/* ============================================================================
   Phones: the website drawn the way the Furobox app draws itself.

   Values come from the Flutter app (C:/Users/patel/project/furobox-mobile):
   lib/core/theme/app_theme.dart, shared/layouts/base_scaffold.dart,
   shared/widgets/sidebar.dart, features/ai_chat/widgets/*, home/home_screen.dart,
   features/tools/all_tools_screen.dart. The app is flat on Android and "Liquid
   Glass" on iOS, so html.fm-ios gets the glass panes and everything else the
   flat look (base.html sets fm / fm-ios / fm-android before the page paints).

   Every rule is under html.fm so it wins over the page stylesheets loaded later
   in <body> without !important, which is kept for inline styles and the few
   older rules that use it themselves. Desktop is untouched: all of it is inside
   one max-width: 768px query, the site's own phone breakpoint.
   ========================================================================== */

@media (max-width: 768px) {

  /* ── Tokens (app_theme.dart) ─────────────────────────────────────────────── */
  html.fm {
    --fm-bg: #FFFFFF;
    --fm-surface: #FFFFFF;
    --fm-surface-2: #F8FAFC;
    --fm-surface-3: #F3F4F6;
    --fm-text: #0D0D0D;
    --fm-title: #1F2937;
    --fm-text-2: #374151;
    --fm-muted: #607187;
    --fm-placeholder: #9CA3AF;
    --fm-navy: #0B2F4E;
    --fm-blue: #1B91F8;
    --fm-composer: #1C72F3;
    --fm-composer-w: 0.5px;
    --fm-outline: rgba(27, 145, 248, 0.40);
    --fm-tint: rgba(27, 145, 248, 0.10);
    --fm-line: #E5E7EB;
    --fm-menu-line: #F0F2F5;
    --fm-bubble: #F4F4F4;
    --fm-code-bg: #F6F8FA;
    --fm-code-bar: #EAEEF2;
    --fm-code-text: #24292F;
    --fm-code-line: #D1D5DB;
    --fm-inline-code: #6366F1;
    --fm-danger: #EF4444;
    --fm-scrim: rgba(0, 0, 0, 0.25);
    --fm-send-bg: #0B2F4E;
    --fm-send-fg: #FFFFFF;
    --fm-shadow-menu: 0 6px 20px rgba(0, 0, 0, 0.10);
    --fm-shadow-toast: 0 3px 18px rgba(0, 0, 0, 0.06);
    --fm-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* Material folder_outlined, for masks. */
    --fm-icon-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.17 6l2 2H20v10H4V6h5.17M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E");
  }
  html.fm body.dark {
    --fm-bg: #000000;
    --fm-surface: #1A1A1A;
    --fm-surface-2: #1A2332;
    --fm-surface-3: #374151;
    --fm-text: #F9FAFB;
    --fm-title: #FFFFFF;
    --fm-text-2: #D1D5DB;
    --fm-muted: #9CA3AF;
    --fm-navy: #F9FAFB;
    --fm-blue: #60A5FA;
    --fm-composer: #60A5FA;
    --fm-composer-w: 1px;
    --fm-outline: rgba(59, 130, 246, 0.50);
    --fm-tint: rgba(96, 165, 250, 0.16);
    --fm-line: #374151;
    --fm-menu-line: #374151;
    --fm-bubble: #272727;
    --fm-code-bg: #161B22;
    --fm-code-bar: #1C2530;
    --fm-code-text: #E6EDF3;
    --fm-code-line: #374151;
    --fm-inline-code: #60A5FA;
    --fm-danger: #F87171;
    --fm-scrim: rgba(0, 0, 0, 0.40);
    --fm-send-bg: #FFFFFF;
    --fm-send-fg: #000000;
    --fm-shadow-menu: 0 6px 20px rgba(0, 0, 0, 0.35);
    --fm-shadow-toast: 0 3px 18px rgba(0, 0, 0, 0.38);
  }

  /* ── Page: flat white (black), Inter, the app's reading colour ───────────── */
  html.fm body {
    font-family: var(--fm-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--fm-text);
    background: var(--fm-bg);
  }
  html.fm body .main-content-wrapper,
  html.fm body #mainContent,
  html.fm body .home-content-wrapper,
  html.fm body .chat-container {
    background: var(--fm-bg);
  }

  /* ── Header (base_scaffold.dart): 45px, no border, hamburger at 6px ──────── */
  html.fm body .mobile-header-toggle {
    width: 40px;
    height: 40px;
    top: calc(env(safe-area-inset-top, 0px) + 2.5px);
    left: 6px;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent; /* no grey disc on tap */
  }
  html.fm body .mobile-header-toggle svg {
    width: 32px;
    height: 32px;
  }
  html.fm body.dark .mobile-header-toggle svg line {
    stroke: #F9FAFB;
  }
  /* The chat header: no rule under it; messages fade out beneath it. No blur
     either, as in the app; style.css gives it one, and inside it the chat
     title's menu (glass on iOS) lost its fill and showed the chat through. */
  html.fm body .ai-custom-header {
    /* style.css makes it 50px with !important, which sat the title 2.5px
       below the menu button on the 45px header line. */
    height: calc(45px + env(safe-area-inset-top, 0px)) !important;
    padding-top: env(safe-area-inset-top, 0px);
    border: 0;
    box-shadow: none;
    background: linear-gradient(to bottom, var(--fm-bg) 0%, var(--fm-bg) 55%, transparent 100%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* The title starts 6px past the 40px hamburger (its text at 52px). */
  html.fm body .ai-custom-header .header-chat-title-wrapper {
    margin-left: 10px;
  }
  html.fm body .ai-custom-header .chat-title {
    font-family: var(--fm-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--fm-title);
  }
  html.fm body .ai-custom-header .chat-title-dropdown i {
    color: var(--fm-placeholder);
    font-size: 13px;
  }
  /* A chat inside a project: the app's header shows the project as a chip,
     folder and name, which opens the project (ChatProjectHeaderTitle). The
     web's breadcrumb crowded both names into the line, the project's cut to
     "Trip t…" and the chat's pushed to the middle. Here the project takes the
     line, its folder at 50px like every title, and the chat's own title gives
     way to its ⌄, which still opens the chat's menu. */
  html.fm body .ai-custom-header .chat-project-link {
    flex: 0 1 auto;
    min-width: 0;
    max-width: none; /* the page caps it near 100px, "Trip to …" */
    gap: 7px;
    margin-left: 16px;
    padding: 6px 0;
    font-family: var(--fm-font);
    font-size: 16px;
    font-weight: 600;
    color: var(--fm-navy);
    text-decoration: none;
  }
  html.fm body .ai-custom-header .chat-project-link .chat-project-folder {
    font-size: 20px !important; /* over its inline 15px */
  }
  html.fm body .ai-custom-header .chat-project-name {
    min-width: 0;
    max-width: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
  }
  html.fm body .ai-custom-header .chat-project-link + .bi-chevron-right {
    display: none;
  }
  html.fm body .ai-custom-header .chat-project-link ~ .header-chat-title-wrapper {
    flex: 0 0 auto;
    margin-left: -6px;
    padding: 6px;
  }
  html.fm body .ai-custom-header .chat-project-link ~ .header-chat-title-wrapper .chat-title {
    display: none !important;
  }

  /* The header's buttons are plain on iOS too: the glass circle behind the
     menu button read as a stray grey disc on the white page. One menu button,
     one title inset (50px), the same outlined Upgrade / New buttons. */

  /* Every other page: the 45px header band each of the app's screens has, for
     the hamburger that floats at the top left. Pages put their own title, icon
     tile or back link in that corner, under the button (PDF Editor, Upload,
     Live Transcription, Profile). Home and chat lay out their own headers, and
     AI Tools puts its title in the band itself. Pages without a sidebar (sign
     in, onboarding) have no hamburger to make room for. */
  html.fm body:not(.no-sidebar) .main-content-wrapper:not(:has(.home-content-wrapper, .chat-container, .all-tools-container)) {
    padding-top: calc(45px + env(safe-area-inset-top, 0px));
    min-height: 0;
  }
  /* The shell is a screen tall on its own, so under the band (and the
     wrapper's 20px foot) a short page scrolled by 70px of nothing; the navbar
     row above it added 6px more, with nothing in it but the fixed button. */
  html.fm body:not(.no-sidebar) .main-content-wrapper:not(:has(.home-content-wrapper, .chat-container, .all-tools-container)) > .app-shell {
    min-height: calc(100vh - 45px - 20px - env(safe-area-inset-top, 0px));
  }
  html.fm body:not(.no-sidebar):not(:has(.home-content-wrapper, .chat-container)) header > nav.navbar.with-sidebar {
    padding-top: 0;
  }
  html.fm body:not(.no-sidebar):not(:has(.home-content-wrapper, .chat-container, .all-tools-container))::before {
    content: "";
    position: fixed;
    z-index: 998; /* under the drawer (1000) and its scrim (999) */
    top: 0;
    left: 0;
    right: 0;
    height: calc(45px + env(safe-area-inset-top, 0px));
    background: var(--fm-bg);
    pointer-events: none;
  }

  /* Home's Upgrade (home.html) is not on a phone: beside the Chat | Tools
     switch the header band had no room for it, and the app's has none there
     either (base_scaffold.dart). A computer keeps it at the top left. */
  html.fm body .home-upgrade-btn {
    display: none;
  }
  /* Signed out, home: the app's Log In at the top right
     (base_scaffold.dart _buildGuestHeaderButton), outlined like Upgrade. */
  html.fm body .home-login-btn {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 6.5px);
    right: 12px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 16px;
    border: 1px solid var(--fm-outline);
    border-radius: 8px;
    background: transparent;
    font-family: var(--fm-font);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--fm-navy) !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
  }
  html.fm body.dark .home-login-btn {
    border-color: rgba(59, 130, 246, 0.5);
  }
  /* Pages without the drawer (sign-in, onboarding): the logo mark alone on the
     left, as the app's screens carry it, in place of the wordmark. */
  html.fm body .navbar-brand .navbar-brand-full {
    display: none !important;
  }
  html.fm body .navbar-brand .navbar-brand-mark {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
  }
  /* Sign-in: the app's way out, a ✕ at the top right that goes home
     (email_entry_screen.dart): 34px round, the icon 18 in the muted grey. */
  html.fm body .auth-close-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 8px; /* level with the logo mark */
    right: 16px;
    width: 34px;
    height: 34px;
    border-radius: 17px;
    color: var(--fm-muted);
    -webkit-tap-highlight-color: transparent;
  }
  html.fm body .auth-close-btn:active {
    background: var(--fm-surface-3);
  }

  /* ── Drawer (sidebar.dart): 260px overlay, right corners 22, light scrim ─── */
  html.fm body #sidebar.sidebar.expanded {
    width: 260px;
    border-radius: 0 22px 22px 0;
    background: var(--fm-bg);
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.18);
    overflow: hidden;
  }
  html.fm body.dark #sidebar.sidebar.expanded {
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.55);
  }
  /* Its colour is an inline style in sidebar.html, hence !important. */
  html.fm body #sidebarBackdrop {
    background: var(--fm-scrim) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* While it is open, the scrim and the drawer sit over the pages' own fixed
     headers. The chat and group headers are at 1000, over the scrim's 999,
     so they stayed bright behind it and took the taps meant to close it. */
  html.fm body.sidebar-open #sidebarBackdrop {
    z-index: 1001 !important;
  }
  html.fm body #sidebar.sidebar.expanded {
    z-index: 1002;
  }
  /* The "Get the Furobox app" card (app_prompt.html) sits at 1045, over the
     page; while the drawer is open it goes under the scrim, or it covered
     the drawer's New Chat and Log in / Sign up buttons. */
  html.fm body.sidebar-open #furoboxAppPrompt {
    z-index: 1000;
  }
  /* style.css gives .app-page a (zero) transform while the drawer is open,
     which made it the containing block of the page's fixed header: the
     Groups title and New button dropped 45px, under the band. */
  html.fm body.sidebar-open .app-page {
    transform: none;
  }
  /* The page behind is dimmed, not blurred. */
  html.fm body.sidebar-open .main-content-wrapper,
  html.fm body.sidebar-open #mainContent {
    filter: none;
  }
  /* Rows: 38px nav, 34px chats, 16px text ×0.92, highlight = hairline only. */
  html.fm body #sidebar .nav-link-sidebar {
    min-height: 38px;
    margin: 1px 0;
    padding: 0 12px;
    gap: 12px;
    border: 0.8px solid transparent;
    border-radius: 8px;
    font-family: var(--fm-font);
    font-size: 14.7px;
    font-weight: 400;
    color: var(--fm-text);
    background: transparent;
  }
  html.fm body #sidebar .nav-link-sidebar.nav-active,
  html.fm body #sidebar .nav-link-sidebar.active {
    border-color: var(--fm-outline);
    background: transparent;
    font-weight: 600;
    color: #0B245E;
  }
  html.fm body.dark #sidebar .nav-link-sidebar.nav-active,
  html.fm body.dark #sidebar .nav-link-sidebar.active {
    color: #60A5FA;
  }
  html.fm body #sidebar .nav-link-sidebar .nav-label {
    font-size: inherit;
    font-weight: inherit;
  }
  html.fm body #sidebar .recent-header,
  html.fm body #sidebar .recent-toggle {
    font-family: var(--fm-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--fm-muted);
  }
  html.fm body #sidebar #chatList a.chat-item {
    min-height: 34px;
    margin: 1px 0;
    padding: 0 4px 0 12px;
    border: 0.5px solid transparent;
    border-radius: 8px;
    font-family: var(--fm-font);
    font-size: 14.7px;
    color: var(--fm-text);
    background: transparent;
  }
  html.fm body #sidebar #chatList a.chat-item.active,
  html.fm body #sidebar #chatList a.chat-item[aria-current="page"] {
    border-color: var(--fm-outline);
    font-weight: 500;
    background: transparent;
  }
  html.fm body #sidebar #chatList a.chat-item .chat-title {
    font-size: inherit;
    color: inherit;
  }
  html.fm body #sidebar .sidebar-bottom {
    border-top: 0;
  }
  html.fm body #sidebar .user-profile {
    border-radius: 10px;
  }
  /* The header (sidebar.dart _buildHeader): the logo on the left and, signed
     in, a round avatar on the right that opens Settings, where the close
     button was. The drawer shuts from its scrim or a swipe, as the app's. */
  html.fm body #sidebar #sidebarShuttle {
    display: none !important;
  }
  html.fm body #sidebar .sidebar-header-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin: 0 -2px 0 auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #1B4F8A, #0B2F4E);
    font-family: var(--fm-font);
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1;
    color: #FFFFFF;
    -webkit-tap-highlight-color: transparent;
  }
  html.fm body.dark #sidebar .sidebar-header-avatar {
    background: linear-gradient(135deg, #2A4A6B, #374151);
  }
  html.fm body #sidebar .sidebar-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Signed in, the account is that avatar: no profile row at the bottom.
     (A guest's drawer carries #guestLoginBtn there instead; see below.) */
  html.fm body #sidebar .sidebar-bottom:has(#userProfileBtn) {
    display: none !important;
  }
  /* New Chat (sidebar.dart _buildNewChatButton): signed in, a pill floating
     over the list's end at the bottom right, not the first row. The list
     dissolves under it (an 80px fade) and runs 64px past its last row, so
     that row can scroll clear of it. A guest's stays a row: the Log in /
     Sign up button has the bottom. */
  html.fm body #sidebar .sidebar-inner:not(:has(#guestLoginBtn)) .sidebar-nav > .nav-item:has(> #newChatBtn) {
    position: absolute;
    right: 10px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 6;
    width: auto;
    margin: 0;
  }
  html.fm body #sidebar .sidebar-inner:not(:has(#guestLoginBtn)) #newChatBtn {
    min-height: 0;
    height: 40px;
    margin: 0;
    padding: 0 14px;
    gap: 6px;
    border: 1px solid rgba(27, 145, 248, 0.4);
    border-radius: 20px;
    background: var(--fm-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05);
    font-size: 12.9px;
    font-weight: 500;
    color: var(--fm-navy);
    -webkit-tap-highlight-color: transparent;
  }
  /* dark_mode.css clears every sidebar link's border with !important. */
  html.fm body.dark #sidebar .sidebar-inner:not(:has(#guestLoginBtn)) #newChatBtn {
    border-color: rgba(59, 130, 246, 0.5) !important;
    background: #1A1A1A;
  }
  html.fm body #sidebar .sidebar-inner:not(:has(#guestLoginBtn)) #newChatBtn img:first-child {
    width: 12px;
    height: 12px;
  }
  html.fm[lang|="en"] body #sidebar .sidebar-inner:not(:has(#guestLoginBtn)) #newChatBtn .nav-label {
    text-transform: capitalize; /* the app's "New Chat" */
  }
  html.fm body #sidebar .sidebar-inner:has(#newChatBtn):not(:has(#guestLoginBtn))::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    height: calc(80px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.94));
    pointer-events: none;
  }
  html.fm body.dark #sidebar .sidebar-inner:has(#newChatBtn):not(:has(#guestLoginBtn))::after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.94));
  }
  html.fm body #sidebar .sidebar-inner:not(:has(#guestLoginBtn)) .sidebar-scrollable-section {
    padding-bottom: 64px;
  }
  /* Signed out: New chat, Search chats and AI Tools at the top; Settings,
     Pricing & Plans and Company at the bottom, over the Log in / Sign up
     button (sidebar.dart _buildGuestBottom). Projects, Groups and Recent have
     nothing in them for a guest and stay out. #guestLoginBtn is a guest's
     only, so it tells the two drawers apart. */
  html.fm body #sidebar .sidebar-inner:has(#guestLoginBtn) .sidebar-scrollable-section,
  html.fm body #sidebar .sidebar-inner:has(#guestLoginBtn) .bottom-divider {
    display: none !important;
  }
  /* sidebar.css zeroes this padding, and style.css makes every .user-profile
     transparent with its own padding, all with !important. */
  html.fm body #sidebar .sidebar-inner:has(#guestLoginBtn) .sidebar-bottom {
    padding: 0 0 calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html.fm body #sidebar .sidebar-inner:has(#guestLoginBtn) .login-section {
    margin: 0 !important;
    padding: 8px 10px 0 !important;
  }
  html.fm body #sidebar #guestLoginBtn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 12px !important;
    border: 0;
    border-radius: 8px !important;
    background: #0B2F4E !important;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  html.fm body.dark #sidebar #guestLoginBtn {
    background: #60A5FA !important;
  }
  html.fm body #sidebar #guestLoginBtn .user-avatar,
  html.fm body #sidebar #guestLoginBtn .user-info {
    display: none !important;
  }
  html.fm body #sidebar #guestLoginBtn .guest-login-label-app {
    display: block;
    font-family: var(--fm-font);
    font-size: 12px;
    font-weight: 500;
    color: #FFFFFF;
  }

  /* ── Home (home_screen.dart): wordmark 220px, composer radius 20 ─────────── */
  /* The wordmark 220px wide and 32px over the composer, both 16px in from the
     screen's edges (three nested paddings put the composer at 32). */
  html.fm body .home-content-wrapper .hero-bleed,
  html.fm body .home-content-wrapper .search-bar-wrapper {
    padding-left: 0;
    padding-right: 0;
  }
  html.fm body .home-content-wrapper .hero-container {
    padding-left: 16px;
    padding-right: 16px;
  }
  html.fm body .home-content-wrapper .logo-wrapper {
    margin-bottom: 32px;
  }
  html.fm body .home-content-wrapper .logo-icon1,
  html.fm body .home-content-wrapper .logo-icon1 svg {
    width: 220px;
    max-width: none;
    height: auto;
  }
  html.fm body .hero-container .search-bar {
    border: var(--fm-composer-w) solid var(--fm-composer);
    border-radius: 20px;
    background: var(--fm-bg);
    box-shadow: none;
  }
  html.fm body .hero-container textarea#searchInput {
    font-family: var(--fm-font);
    font-size: 15px;
    color: var(--fm-text);
  }
  html.fm body .hero-container textarea#searchInput::placeholder {
    color: var(--fm-placeholder);
  }
  /* The composer's own buttons (+, mic, model) have no fill in the app: they sit
     on the box, which on iOS is glass and showed them as white squares. */
  html.fm body .hero-container .search-bar .icon-btn,
  html.fm body .hero-container .search-bar #modelSelector.model-selector,
  html.fm body #chatForm .furo-icon-btn,
  html.fm body #chatForm #modelSelector.model-selector {
    background: transparent;
    box-shadow: none;
  }
  /* The corner button (send, or voice while the box is empty): 30×30, radius
     8, navy (white in dark) with a white glyph, on every composer. home.css
     gives it a 34-38px minimum height at phone widths, hence the min-height. */
  html.fm body #sendBtn.icon-btn1,
  html.fm body .furo-input-bar .furo-icon-btn-primary {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    padding: 0;
    border-radius: 8px;
    background: var(--fm-send-bg);
    color: var(--fm-send-fg);
  }
  html.fm body #sendBtn.icon-btn1 svg,
  html.fm body #sendBtn.icon-btn1 i,
  html.fm body .furo-input-bar .furo-icon-btn-primary svg,
  html.fm body .furo-input-bar .furo-icon-btn-primary i {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }
  /* +, mic and the model picker sit 2px apart, as in the app; they were 36px
     boxes 4-8px apart, with the picker's own 10px padding on top. */
  html.fm body .search-bar .search-actions-left,
  html.fm body .furo-input-bar .furo-actions-left {
    gap: 2px;
    min-width: 0;
  }
  /* home.css sets the home ones, and their minimums, to 36px with !important. */
  html.fm body .search-bar .search-actions-left .icon-btn,
  html.fm body .furo-input-bar .furo-actions-left .furo-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0;
  }
  html.fm body .search-bar .search-model-selector,
  html.fm body .furo-input-bar .furo-model-selector,
  html.fm body .search-bar .model-selector-container,
  html.fm body .furo-input-bar .model-selector-container {
    min-width: 0;
  }
  html.fm body .search-bar #modelSelector.model-selector,
  html.fm body .furo-input-bar #modelSelector.model-selector {
    max-width: 100%;
    padding-left: 6px;
    padding-right: 6px;
    gap: 6px;
  }
  /* The model's whole name, as the app shows it (the page capped it at 60px
     and let the rest spill over the chevron); an ellipsis only once the row
     runs out of room. */
  html.fm body .search-bar #modelSelector .current-model,
  html.fm body .furo-input-bar #modelSelector .current-model {
    min-width: 0;
    max-width: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* ── Chat messages (message_bubble.dart) ─────────────────────────────────── */
  /* User: right-aligned #F4F4F4 bubble, radius 8, 64px gutter on the left. */
  html.fm body .message.user .bubble.user-bubble {
    max-width: calc(100% - 64px);
    padding: 10px 14px;
    border: 0;
    border-radius: 8px;
    background: var(--fm-bubble);
    color: var(--fm-text);
    font-family: var(--fm-font);
    font-size: 15px;
    line-height: 1.5;
  }
  html.fm body .message.user .bubble.user-bubble .user-message-text {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
  }
  /* Assistant: no bubble, full-width 15/1.65 text with 16px gutters. */
  html.fm body .bubble.bubble-furobox {
    max-width: 100%;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  html.fm body .bubble.bubble-furobox .md {
    font-family: var(--fm-font);
    font-size: 15px;
    line-height: 1.65;
    color: var(--fm-text);
  }
  html.fm body .bubble.bubble-furobox .md p,
  html.fm body .bubble.bubble-furobox .md li {
    font-size: 15px;
    line-height: 1.65;
    color: var(--fm-text);
  }
  html.fm body .bubble.bubble-furobox .md p {
    margin: 0 0 10px;
  }
  /* Headings: plain bold text, no colour and no rule (the web drew them blue
     and underlined). 22 / 18.5 / 16.5, weight 700, 22px above, 8px below. */
  html.fm body .bubble.bubble-furobox .md h1,
  html.fm body .bubble.bubble-furobox .md h2,
  html.fm body .bubble.bubble-furobox .md h3,
  html.fm body .bubble.bubble-furobox .md h4 {
    font-family: var(--fm-font);
    font-weight: 700;
    line-height: 1.3;
    color: var(--fm-text);
    border: 0;
    padding: 0;
    margin: 22px 0 8px;
    letter-spacing: 0;
  }
  html.fm body .bubble.bubble-furobox .md h1 { font-size: 22px; }
  html.fm body .bubble.bubble-furobox .md h2 { font-size: 18.5px; }
  html.fm body .bubble.bubble-furobox .md h3,
  html.fm body .bubble.bubble-furobox .md h4 { font-size: 16.5px; }
  html.fm body .bubble.bubble-furobox .md > :first-child { margin-top: 0; }
  html.fm body .bubble.bubble-furobox .md a {
    color: var(--fm-blue);
    text-decoration: underline;
  }
  html.fm body .bubble.bubble-furobox .md ul,
  html.fm body .bubble.bubble-furobox .md ol {
    margin: 0 0 10px;
    padding-left: 22px;
  }
  html.fm body .bubble.bubble-furobox .md li {
    margin-bottom: 6px;
  }
  html.fm body .bubble.bubble-furobox .md ul li::marker {
    color: var(--fm-muted);
  }
  html.fm body .bubble.bubble-furobox .md ol li::marker {
    font-weight: 600;
  }
  html.fm body .bubble.bubble-furobox .md hr {
    border: 0;
    border-top: 1px solid var(--fm-line);
    margin: 14px 0;
    opacity: 1;
  }
  /* Inline code: #F3F4F6 chip, 1px border, radius 4, indigo mono 13px. */
  html.fm body .bubble.bubble-furobox .md :not(pre) > code {
    padding: 1px 5px;
    margin: 0 1px;
    border: 1px solid var(--fm-line);
    border-radius: 4px;
    background: var(--fm-surface-3);
    color: var(--fm-inline-code);
    font-size: 13px;
  }
  /* Code block: #F6F8FA, 1px #D1D5DB, radius 8, 13/1.55 mono. */
  html.fm body .bubble.bubble-furobox .code-block-container {
    border: 1px solid var(--fm-code-line);
    border-radius: 8px;
    background: var(--fm-code-bg);
    overflow: hidden;
    margin: 0 0 10px;
  }
  html.fm body .bubble.bubble-furobox .code-block-container pre,
  html.fm body .bubble.bubble-furobox .code-block-container pre code {
    background: var(--fm-code-bg);
    color: var(--fm-code-text);
    font-size: 13px;
    line-height: 1.55;
  }
  /* Tables: 1px grid in a radius-8 frame, #F6F8FA bold header row. */
  html.fm body .bubble.bubble-furobox .md table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--fm-line);
    border-radius: 8px;
    overflow: hidden;
    font-size: 13.5px;
    line-height: 1.4;
    margin: 0 0 10px;
  }
  html.fm body .bubble.bubble-furobox .md th,
  html.fm body .bubble.bubble-furobox .md td {
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid var(--fm-line);
    border-right: 1px solid var(--fm-line);
    color: var(--fm-text);
  }
  html.fm body .bubble.bubble-furobox .md th {
    background: var(--fm-code-bg);
    font-weight: 700;
  }
  html.fm body .bubble.bubble-furobox .md tr > :last-child { border-right: 0; }
  html.fm body .bubble.bubble-furobox .md tbody tr:last-child > * { border-bottom: 0; }

  /* ── Chat composer (chat_input_bar.dart): radius 16, 0 16 8 16 strip ───────── */
  html.fm body #composer.input-container {
    padding: 0 16px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--fm-bg);
  }
  html.fm body #chatForm.furo-input-bar {
    border: var(--fm-composer-w) solid var(--fm-composer);
    border-radius: 16px;
    background: var(--fm-bg);
    box-shadow: none;
  }
  /* dark_mode.css paints the composers' edge grey with !important; the app's is
     1px #60A5FA. */
  html.fm body.dark #chatForm.furo-input-bar,
  html.fm body.dark .hero-container .search-bar {
    border-color: var(--fm-composer) !important;
  }
  html.fm body #chatForm textarea#messageInput {
    font-family: var(--fm-font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--fm-text);
  }
  html.fm body #chatForm textarea#messageInput::placeholder {
    color: var(--fm-placeholder);
  }
  /* No line under the composer, as in the app: the chat's "Furobox can make
     mistakes" and the group's "shared with all members" went, and the
     composer sits 8px off the bottom. */
  html.fm body .ai-disclaimer {
    display: none !important;
  }

  /* ── Menus (furo_dropdown.dart): white card, radius 14, 0.8px border ───────── */
  html.fm body .dropdown-menu {
    border: 0.8px solid var(--fm-line);
    border-radius: 14px;
    background: var(--fm-surface);
    box-shadow: var(--fm-shadow-menu);
    padding: 4px 0;
    font-family: var(--fm-font);
  }
  html.fm body .dropdown-menu .dropdown-item {
    padding: 12px 14px;
    font-size: 13.5px;
    color: var(--fm-text);
  }
  html.fm body .dropdown-menu .dropdown-item i {
    color: #6B7280;
    font-size: 17px;
  }
  html.fm body .dropdown-menu .dropdown-item.text-danger,
  html.fm body .dropdown-menu .dropdown-item.text-danger i {
    color: var(--fm-danger) !important;
  }
  html.fm body .dropdown-menu .dropdown-divider {
    border-top-color: var(--fm-menu-line);
    margin: 4px 14px;
    opacity: 1;
  }

  /* ── Toasts (furo_toast.dart): at the top, white card, radius 14 ────────────── */
  html.fm body #toast-container.toast-container {
    top: calc(env(safe-area-inset-top, 0px) + 56px) !important;
    bottom: auto !important;
    left: 16px !important;
    right: 16px !important;
    padding: 0 !important;
    width: auto;
  }
  html.fm body #toast-container .toast {
    width: 100%;
    border: 0;
    border-radius: 14px;
    background: var(--fm-surface);
    box-shadow: var(--fm-shadow-toast);
    font-family: var(--fm-font);
    font-size: 14px;
    line-height: 1.45;
    color: var(--fm-text);
  }
  /* The site's own toasts (toast_notifications.js) as the app's: the width of
     the screen less 16px a side, just under the 45px header rather than over
     it. toast_notifications.css centres them with left: 50%, which held a
     card to half a phone's width; the guest prompt's sentence broke into a
     column of fragments beside its links. The JS sets top inline to stack
     them, so they move down by a margin, which keeps the stack. */
  html.fm body .furobox-toast {
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-top: calc(40px + env(safe-area-inset-top, 0px));
    padding: 13px 16px;
    transform: none !important;
    animation: fmToastIn 0.28s ease-out;
  }
  @keyframes fmToastIn {
    from {
      opacity: 0;
      translate: 0 -12px;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }
  /* The guest prompt carries one action, Log in, as the app's does; the page
     it opens is "Log in or sign up". Beside a second link the sentence had
     no room. */
  html.fm body .furobox-toast-guest .toast-action ~ .toast-action {
    display: none;
  }

  /* ── Dialogs become bottom sheets (furo_modal.dart): top radius 16 ────────── */
  html.fm body .modal-dialog {
    margin: 0;
    max-width: none;
    width: 100%;
    min-height: 100%;
    display: flex;
    align-items: flex-end;
  }
  html.fm body .modal-dialog .modal-content {
    width: 100%;
    border: 0;
    border-radius: 16px 16px 0 0;
    background: var(--fm-surface);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    font-family: var(--fm-font);
  }
  /* The grabber the app draws at the top of every sheet. */
  html.fm body .modal-dialog .modal-content::before {
    content: "";
    display: block;
    width: 36px;
    height: 5px;
    border-radius: 2.5px;
    background: #C9C9CE;
    margin: 10px auto 6px;
  }
  html.fm body.dark .modal-dialog .modal-content::before {
    background: #5B5B5F;
  }
  html.fm body .modal-dialog .modal-header {
    padding: 4px 20px 12px;
    border-bottom: 0.5px solid var(--fm-line);
  }
  html.fm body .modal-dialog .modal-body {
    padding: 16px 20px;
  }
  html.fm body .modal-dialog .modal-footer {
    padding: 0 20px 16px;
    border-top: 0;
    gap: 8px;
  }
  /* The hamburger floats above everything (z 10001); a sheet's barrier covers
     it in the app, so it goes under the backdrop while one is open. */
  html.fm body.modal-open .mobile-header-toggle {
    z-index: 1040;
  }
  /* sidebar.css lifts every row's ⋮ to 1101, over the sheets (1055-1070):
     the dots of the list behind showed through Rename and the rest. */
  html.fm body.modal-open .chat-menu-btn {
    z-index: 1;
  }
  /* Settings has its own ✕ in the sheet; settings_modal.js also shows this
     one in the menu button's corner, which made two. */
  html.fm body #mobileSettingsClose,
  html.fm body #mobileSettingsCloseAI {
    display: none !important;
  }
  html.fm body .modal-dialog .modal-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--fm-text);
  }
  html.fm body .modal-backdrop.show {
    opacity: 1;
    background: rgba(0, 0, 0, 0.40);
  }
  html.fm body .modal.fade .modal-dialog {
    transform: translateY(24px);
  }
  html.fm body .modal.show .modal-dialog {
    transform: none;
  }

  /* ── Fields and buttons (furo_modal.dart, app_theme.dart) ─────────────────── */
  /* Inputs: 15px text, radius 12, 1px #E5E7EB, a 1.5px navy edge on focus. The
     composers' own text boxes (.auto-expand) are not fields and keep theirs. */
  html.fm body input.form-control:not(.auto-expand),
  html.fm body textarea.form-control:not(.auto-expand),
  html.fm body select.form-select,
  html.fm body select.form-control {
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--fm-line);
    border-radius: 12px;
    background-color: var(--fm-surface);
    color: var(--fm-text);
    font-family: var(--fm-font);
    font-size: 15px;
    box-shadow: none;
  }
  html.fm body textarea.form-control:not(.auto-expand) {
    min-height: 88px;
  }
  html.fm body input.form-control:not(.auto-expand):focus,
  html.fm body textarea.form-control:not(.auto-expand):focus,
  html.fm body select.form-select:focus,
  html.fm body select.form-control:focus {
    border-color: var(--fm-navy);
    box-shadow: 0 0 0 0.5px var(--fm-navy);
    outline: 0;
  }
  html.fm body.dark input.form-control:not(.auto-expand):focus,
  html.fm body.dark textarea.form-control:not(.auto-expand):focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 0.5px #3B82F6;
  }
  html.fm body .form-control::placeholder {
    color: var(--fm-muted);
    font-size: 14px;
  }
  html.fm body .form-label,
  html.fm body label.form-label {
    font-family: var(--fm-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--fm-text-2);
    margin-bottom: 6px;
  }
  /* Buttons: radius 10, 14/600; solid navy for the primary action, hairline
     outlines for the rest. */
  html.fm body .btn {
    border-radius: 10px;
    font-family: var(--fm-font);
    font-size: 14px;
    font-weight: 600;
    padding: 11px 20px;
    box-shadow: none;
  }
  html.fm body .btn-sm {
    padding: 7px 14px;
    font-size: 13px;
    border-radius: 8px;
  }
  html.fm body .btn-primary {
    background: var(--fm-send-bg);
    border-color: var(--fm-send-bg);
    color: var(--fm-send-fg);
  }
  html.fm body .btn-outline-primary,
  html.fm body .btn-outline-secondary,
  html.fm body .btn-light {
    background: transparent;
    border: 0.8px solid var(--fm-outline);
    color: var(--fm-navy);
  }
  html.fm body .btn-danger {
    background: #DC2626;
    border-color: #DC2626;
  }
  html.fm body .btn-outline-danger {
    background: transparent;
    border: 0.8px solid rgba(220, 38, 38, 0.5);
    color: #DC2626;
  }

  /* ── Chat | Tools (mode_switch.html; the app's mode_switch.dart) ──────────── */
  /* In the header band, as the app has it, between the menu and the header
     buttons or Log In: mode_switch.html works out where, and how
     small, once they are on the page, so until then it is unseen. Centred
     down the band like them, and it scrolls away with the page, as the title
     it stands in for did. */
  /* The plans page's switch at its phone size (plans.css; the app's
     plans_screen.dart _buildToggle): 32 high in a 40 track, the words at 14.
     Each half is the wider word and 14px either side, as the app's is
     (mode_switch.dart _Fit): wider, the words sat far apart and the switch
     was pushed off the middle of the header. Closer still for less room. */
  html.fm body .mode-switch {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 2.5px);
    left: 50%;
    transform: none;
    width: auto;
    --mode-inset: 4px;
  }
  html.fm body .mode-switch:not(.fitted) {
    visibility: hidden;
  }
  html.fm body .mode-switch-option {
    padding: 0 14px;
    font-family: var(--fm-font);
    font-size: 14px;
  }
  html.fm body .mode-switch.fit-snug .mode-switch-option {
    padding: 0 11px;
  }
  html.fm body .mode-switch.fit-tight .mode-switch-option {
    padding: 0 8px;
    font-size: 13px;
  }
  /* With room, as the app's: each word's bubble the size of the Upgrade
     button the header no longer has (upgrade_button.dart), 32px high as it
     was; mode_switch.html measures it into --mode-upgrade-half. */
  html.fm body .mode-switch.fit-upgrade {
    min-width: calc(2 * var(--mode-upgrade-half, 0px));
  }
  /* AI Tools: the switch says where you are, so its title goes, kept for
     screen readers; and it has Home's header buttons (all_tools.html). */
  html.fm body:has(#modeSwitch:not([hidden])) .all-tools-header h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* No box of its own: the page lays its parts out in a column with gaps,
     and the buttons are placed in the band, out of it. */
  html.fm body .all-tools-band {
    display: contents;
  }
  /* Home's Temporary chat button, where Home has it (home.html), scrolling
     away with the page like the rest of AI Tools' band. */
  html.fm body .tools-temp-chat-btn {
    position: absolute;
    top: 8px;
    right: 18px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary, #0B2F4E);
    font-size: 19px;
    -webkit-tap-highlight-color: transparent;
  }

  /* ── AI Tools (all_tools_screen.dart): one grouped list, not tabbed tiles ─── */
  /* The shell's 16px sides put the title 16px past the menu button and the
     list 32px in; the container's own 16px are the gutters. */
  html.fm body .app-page:has(.all-tools-container) {
    padding: 0;
  }
  html.fm body .all-tools-container {
    margin-top: 0;
    padding: env(safe-area-inset-top, 0px) 16px calc(24px + env(safe-area-inset-bottom, 0px));
  }
  /* The page title sits in the header line, past the 44px menu slot at 6px. */
  html.fm body .all-tools-header {
    display: flex;
    align-items: center;
    height: 45px;
    margin: 0 0 12px 34px;
    padding: 0;
  }
  html.fm body .all-tools-header h1,
  html.fm body .all-tools-header h2 {
    margin: 0;
    font-family: var(--fm-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--fm-title);
  }
  html.fm body .all-tools-header p {
    display: none;
  }
  html.fm body .all-tools-search {
    margin: 0 0 16px;
  }
  html.fm body .all-tools-search input {
    height: auto;
    padding: 12px 12px 12px 38px;
    border: 1px solid var(--fm-line);
    border-radius: 8px;
    background: var(--fm-surface);
    font-family: var(--fm-font);
    font-size: 14px;
    color: var(--fm-text);
    box-shadow: none;
  }
  html.fm body .all-tools-search input:focus {
    border-color: rgba(27, 145, 248, 0.5);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  }
  html.fm body .all-tools-search .search-icon {
    left: 12px;
    width: 18px;
    height: 18px;
  }
  /* Every category at once, each under its label: the page's filter runs as if
     searching on phones (all_tools.html), so the tabs have nothing to switch. */
  html.fm body .all-tools-container .tools-tabs {
    display: none;
  }
  /* The lines between the website's rows of categories: the app's list has
     none. */
  html.fm body .all-tools-container .tools-sections {
    display: block;
    margin: 0;
  }
  html.fm body .all-tools-container .category-section {
    padding: 0;
    border-top: 0;
  }
  html.fm body .all-tools-container .category-section {
    margin: 0 0 20px;
  }
  html.fm body .all-tools-container .category-label {
    display: block;
    padding: 4px 0 8px 4px;
    font-family: var(--fm-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--fm-muted);
  }
  /* all_tools.html lays it out as a grid of 240-280px columns with !important,
     which left each row 280px wide and its chevron and divider short of the
     card's edge. */
  html.fm body .all-tools-container .tools-grid {
    display: block !important;
    border: 1px solid var(--fm-line);
    border-radius: 14px;
    background: var(--fm-surface);
    overflow: hidden;
    padding: 0;
    gap: 0;
  }
  /* A row: 46px gradient tile, name, chevron; dividers indented 68px. */
  html.fm body .all-tools-container .tool-card {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    gap: 12px;
    width: auto;
    max-width: none;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    text-decoration: none;
  }
  html.fm body .all-tools-container .tool-card + .tool-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 68px;
    right: 0;
    border-top: 1px solid var(--fm-line);
  }
  html.fm body .all-tools-container .tool-card::after {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-left: auto;
    opacity: 0.7;
    background-color: var(--fm-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.29 6.71a1 1 0 0 0 0 1.41L13.17 12l-3.88 3.88a1 1 0 1 0 1.42 1.41l4.59-4.58a1 1 0 0 0 0-1.42L10.71 6.7a1 1 0 0 0-1.42 0z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.29 6.71a1 1 0 0 0 0 1.41L13.17 12l-3.88 3.88a1 1 0 1 0 1.42 1.41l4.59-4.58a1 1 0 0 0 0-1.42L10.71 6.7a1 1 0 0 0-1.42 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  html.fm body .all-tools-container .tool-card:hover,
  html.fm body .all-tools-container .tool-card:active {
    transform: none;
    box-shadow: none;
    background: var(--fm-tint);
  }
  html.fm body .all-tools-container .tool-card .tool-card-image {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border-radius: 13px;
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  html.fm body .all-tools-container .tool-card .tool-card-icon-wrapper {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    font-size: 23px;
    color: #FFFFFF;
  }
  html.fm body .all-tools-container .tool-card .tool-card-icon-wrapper i {
    font-size: 23px;
    color: #FFFFFF;
  }
  /* The tile SVGs draw their glyph small in the middle of a 100×100 canvas, so
     the canvas fills the tile and the glyph lands at the app's 23px. */
  html.fm body .all-tools-container .tool-card .tool-card-icon-wrapper svg {
    width: 46px;
    height: 46px;
    color: #FFFFFF;
  }
  html.fm body .all-tools-container .tool-card .tool-card-title {
    margin: 0;
    padding: 0;
    font-family: var(--fm-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--fm-text);
    text-align: left;
  }
  /* The website's description and arrow: the app's rows carry the name and
     its chevron only. */
  html.fm body .all-tools-container .tool-card-body {
    flex: 1;
    min-width: 0;
  }
  html.fm body .all-tools-container .tool-card-desc,
  html.fm body .all-tools-container .tool-card-go {
    display: none;
  }

  /* ── Projects and Groups (all_projects_screen.dart, all_groups_screen.dart) ─ */
  /* The title and the New button move up into the header line, where the app's
     header holds them; search and sort share the first row under it, 44px. */
  html.fm body .app-page:has(.allprojects-container, .allgroups-container) {
    padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px));
  }
  html.fm body .allprojects-container,
  html.fm body .allgroups-container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: stretch;
    column-gap: 10px;
    max-width: none;
    min-height: 0; /* a full-height box under the header made a short list scroll */
    margin: 0;
    padding: 12px 16px 0;
  }
  html.fm body .allprojects-container > *,
  html.fm body .allgroups-container > * {
    flex: 0 0 100%;
    min-width: 0;
  }
  html.fm body .allprojects-header,
  html.fm body .allgroups-header {
    position: fixed;
    z-index: 998; /* over the band, under the drawer's scrim */
    top: env(safe-area-inset-top, 0px);
    left: 50px; /* past the 44px menu slot at 6px */
    right: 12px;
    height: 45px;
    margin: 0;
    padding: 0;
    gap: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  html.fm body .allprojects-header h1,
  html.fm body .allgroups-header h1 {
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--fm-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--fm-title);
  }
  /* An outlined box, as the app's New Chat button; dark_mode.css fills it blue. */
  html.fm body .allprojects-header .allprojects-new-btn,
  html.fm body .allgroups-header .allgroups-new-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: auto;
    padding: 6px 12px;
    border: 1px solid var(--fm-outline);
    border-radius: 8px;
    background: transparent;
    font-family: var(--fm-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--fm-navy);
  }
  html.fm body.dark .allprojects-header .allprojects-new-btn,
  html.fm body.dark .allgroups-header .allgroups-new-btn {
    border-color: var(--fm-outline) !important;
    background: transparent !important;
    color: var(--fm-navy) !important;
  }
  html.fm body .allprojects-header .allprojects-new-btn svg,
  html.fm body .allgroups-header .allgroups-new-btn svg {
    width: 15px;
    height: 15px;
  }
  html.fm body .allprojects-search-container,
  html.fm body .allprojects-search-wrapper,
  html.fm body .allgroups-search-wrapper {
    flex: 1 1 0;
    margin: 0;
  }
  html.fm body .allprojects-search-input,
  html.fm body .allgroups-search-input {
    height: 44px;
    padding: 0 12px 0 38px;
    border-radius: 8px;
    background: var(--fm-surface);
    font-family: var(--fm-font);
    font-size: 14px;
    color: var(--fm-text);
  }
  html.fm body.dark .allprojects-search-input,
  html.fm body.dark .allgroups-search-input {
    border-color: var(--fm-line) !important;
    background: var(--fm-surface) !important;
  }
  html.fm body .allprojects-search-icon,
  html.fm body .allgroups-search-icon {
    left: 12px;
    width: 18px;
    height: 18px;
    color: var(--fm-muted);
  }
  /* "Sort by:" goes; its trigger becomes the 44px box beside the search field. */
  html.fm body .allprojects-sortrow,
  html.fm body .allgroups-sortrow {
    flex: 0 0 auto;
    margin: 0;
  }
  html.fm body .allprojects-sort-label,
  html.fm body .allgroups-sort-label {
    display: none;
  }
  html.fm body .allprojects-sort-dropdown .sort-trigger,
  html.fm body .allgroups-sort-dropdown .sort-trigger {
    height: 44px;
    padding: 0 12px;
    gap: 4px;
    border: 1px solid var(--fm-line);
    border-radius: 8px;
    background: var(--fm-surface);
    font-family: var(--fm-font);
    font-size: 13px;
    color: var(--fm-navy);
  }
  html.fm body .allprojects-sort-dropdown .sort-trigger-chevron,
  html.fm body .allgroups-sort-dropdown .sort-trigger-chevron {
    font-size: 11px;
    color: var(--fm-muted);
  }
  /* Project rows: folder, name, description; 12px in from the screen's edge. */
  html.fm body .allprojects-list {
    margin: 12px -4px 0;
  }
  html.fm body .allprojects-item {
    margin: 0 0 2px;
    padding: 12px 4px 12px 12px;
  }
  html.fm body .allprojects-link {
    gap: 12px;
    padding-right: 36px; /* clear of the ⋮ */
  }
  html.fm body .allprojects-actions {
    right: 0;
  }
  html.fm body .allprojects-link::before {
    content: "";
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    background-color: var(--fm-muted);
    -webkit-mask: var(--fm-icon-folder) center / contain no-repeat;
    mask: var(--fm-icon-folder) center / contain no-repeat;
  }
  html.fm body .allprojects-title {
    margin: 0;
    font-family: var(--fm-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--fm-navy);
  }
  html.fm body .allprojects-description {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--fm-muted);
  }
  html.fm body .allprojects-empty {
    padding: 64px 24px 0;
    text-align: center;
  }
  html.fm body .allprojects-empty::before {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    background-color: var(--fm-muted);
    -webkit-mask: var(--fm-icon-folder) center / contain no-repeat;
    mask: var(--fm-icon-folder) center / contain no-repeat;
  }
  html.fm body .allprojects-empty h2,
  html.fm body .allgroups-empty h2 {
    margin: 0 0 8px;
    font-family: var(--fm-font);
    font-size: 18px;
    font-weight: 400;
    color: var(--fm-navy);
  }
  html.fm body .allgroups-empty h2 {
    font-size: 17px;
    font-weight: 600;
  }
  html.fm body .allprojects-empty p,
  html.fm body .allgroups-empty p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--fm-muted);
  }
  html.fm body .allprojects-inline-link,
  html.fm body .allgroups-inline-link {
    font-size: inherit;
    font-weight: 600;
    color: var(--fm-blue);
  }
  /* Group rows, the way WhatsApp lists chats: a 52px disc, the name over the
     last activity, and a hairline under the text only. */
  html.fm body .allgroups-list {
    margin-top: 4px;
  }
  html.fm body .allgroups-item {
    margin: 0;
    padding: 0;
  }
  html.fm body .allgroups-item-wrapper {
    position: relative;
  }
  html.fm body .allgroups-item-wrapper::after {
    content: "";
    position: absolute;
    left: 64px;
    right: 0;
    bottom: 0;
    border-bottom: 0.5px solid var(--fm-line);
  }
  html.fm body .allgroups-item:last-child .allgroups-item-wrapper::after {
    display: none;
  }
  html.fm body .allgroups-link {
    gap: 12px;
  }
  html.fm body .allgroups-icon {
    display: flex;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--fm-surface-3);
    color: var(--fm-navy);
    font-size: 24px;
  }
  html.fm body.dark .allgroups-icon {
    background: #1A2332 !important;
    color: #F9FAFB !important;
  }
  html.fm body .allgroups-content {
    gap: 3px;
    padding: 12px 40px 12px 0;
  }
  html.fm body .allgroups-title {
    font-family: var(--fm-font);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--fm-text);
  }
  html.fm body .allgroups-description {
    font-size: 14px;
    color: var(--fm-muted);
  }
  html.fm body .allgroups-actions {
    right: 4px;
  }
  html.fm body .allgroups-section-label {
    padding: 4px 10px 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: #B0BAC5;
  }

  /* ── Group chat (group_chat_screen.dart) ─────────────────────────────────── */
  /* The group's header sat over the menu button: both are fixed at z 1000 and
     the group's comes later in the page. It starts past the button now and
     fades out the way the chat header does, with no rule under it; the title
     is 14 / 500, the ⋮ 20px and muted. */
  html.fm body .group-chat-header,
  html.fm body.dark .group-chat-header {
    left: 50px;
    height: calc(45px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 4px 0 0;
    border: 0;
    background: linear-gradient(to bottom, var(--fm-bg) 0%, var(--fm-bg) 55%, transparent 100%) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  /* The shared chat header underneath carries a title of its own, forced
     visible with !important; the wrapper's opacity still hides it. */
  html.fm body:has(.group-chat-header) .ai-custom-header .header-chat-title-wrapper {
    opacity: 0 !important;
    pointer-events: none;
  }
  html.fm body .group-chat-header .group-title-wrapper {
    margin-left: -6px;
  }
  html.fm body .group-chat-header .group-chat-title {
    font-family: var(--fm-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--fm-title);
  }
  html.fm body .group-chat-header .group-actions-btn i {
    font-size: 20px;
    color: var(--fm-muted);
  }
  /* Placed as the chat page's: 16px from the sides, 8px off the bottom (its
     strip had 12px all round). */
  html.fm body #groupComposer.group-input-container {
    padding: 0 16px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  html.fm body #groupChatForm.furo-input-bar {
    border: var(--fm-composer-w) solid var(--fm-composer);
    border-radius: 16px;
    background: var(--fm-bg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  }
  html.fm body.dark #groupChatForm.furo-input-bar {
    border-color: var(--fm-composer) !important;
  }
  /* dark_mode.css greys the ⋮ and the composer's inner shell. */
  html.fm body.dark .group-chat-header .group-actions-btn,
  html.fm body.dark #groupChatForm .furo-input-shell {
    background: transparent !important;
  }
  html.fm body #groupChatForm textarea#groupInput {
    font-family: var(--fm-font);
    font-size: 15px;
    color: var(--fm-text);
  }

  /* ── Project detail (project_detail_screen.dart) ─────────────────────────── */
  /* The project's name, after a folder, in the header line; Edit and Upload
     files under it; the composer pinned to the bottom, as in the app. */
  html.fm body .app-page:has(.projectdetail-container) {
    padding: 0 0 calc(120px + env(safe-area-inset-bottom, 0px));
  }
  html.fm body .projectdetail-container {
    min-height: 0 !important; /* over its inline style, as the padding */
    padding: 8px 16px 0 !important;
  }
  html.fm body .projectdetail-header {
    padding: 0;
    margin: 0;
  }
  html.fm body .projectdetail-header h1 {
    position: fixed;
    z-index: 998;
    top: env(safe-area-inset-top, 0px);
    left: 50px;
    right: 92px; /* clear of Edit and Upload */
    height: 45px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    white-space: nowrap;
    font-family: var(--fm-font);
    font-size: 16px;
    font-weight: 600;
    color: var(--fm-navy);
  }
  html.fm body .projectdetail-header h1::before {
    content: "";
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask: var(--fm-icon-folder) center / contain no-repeat;
    mask: var(--fm-icon-folder) center / contain no-repeat;
  }
  html.fm body.dark .projectdetail-header h1 {
    color: var(--fm-navy) !important;
  }
  /* Edit and Upload files sit at the right of the header line, where the
     app's header carries the project's actions: icons only, the words kept
     in the buttons for screen readers. */
  html.fm body .projectdetail-header .projectdetail-actions {
    position: fixed;
    z-index: 998;
    top: env(safe-area-inset-top, 0px);
    right: 8px;
    height: 45px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 2px;
  }
  html.fm body .projectdetail-actions .projectdetail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 0;
    color: var(--fm-navy);
  }
  html.fm body.dark .projectdetail-actions .projectdetail-btn {
    background: transparent !important;
    color: var(--fm-navy) !important;
  }
  html.fm body .projectdetail-actions .projectdetail-btn i {
    font-size: 19px;
    line-height: 1;
  }
  html.fm body .projectdetail-container > .furo-input-bar {
    position: fixed;
    z-index: 990;
    left: 16px;
    right: 16px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    width: auto;
    margin: 0;
    border: var(--fm-composer-w) solid var(--fm-composer);
    border-radius: 16px;
    background: var(--fm-bg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  }
  html.fm body.dark .projectdetail-container > .furo-input-bar {
    border-color: var(--fm-composer) !important;
  }
  /* project_details.html opens the composer's menus downward, for a composer
     at the top of the page; pinned to the bottom they open up, as in chat. */
  html.fm body .projectdetail-container > .furo-input-bar .img-pill-dropdown,
  html.fm body .projectdetail-container > .furo-input-bar .add-menu,
  html.fm body .projectdetail-container > .furo-input-bar .model-dropdown,
  html.fm body .projectdetail-container > .furo-input-bar #modelDropdown {
    top: auto !important;
    bottom: calc(100% + 8px) !important;
  }
  html.fm body .projectdetail-container #newChatInput {
    font-family: var(--fm-font);
    font-size: 15px;
  }
  /* The chats: a small section label, then rows of title over a one-line
     preview, clear of their ⋮ (it sat on the preview's end). */
  html.fm body .projectdetail-chats-header {
    margin: 12px 0 4px;
  }
  html.fm body .projectdetail-chats-header h3 {
    margin: 0;
    padding: 0 4px;
    font-family: var(--fm-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--fm-muted);
  }
  html.fm body .projectdetail-chat-item {
    padding: 10px 12px;
  }
  html.fm body .projectdetail-chat-link {
    padding-right: 36px;
  }
  html.fm body .projectdetail-chat-actions {
    right: 4px;
  }
  html.fm body .projectdetail-chat-title {
    font-family: var(--fm-font);
    font-size: 15px;
    font-weight: 400;
    color: var(--fm-navy);
  }
  html.fm body .projectdetail-chat-preview {
    font-size: 13px;
    color: var(--fm-muted);
  }
  html.fm body .projectdetail-empty {
    padding: 56px 24px 0;
  }
  html.fm body .projectdetail-empty h2 {
    font-family: var(--fm-font);
    font-size: 18px;
    font-weight: 400;
    color: var(--fm-navy);
  }
  html.fm body .projectdetail-empty p {
    font-size: 14px;
    color: var(--fm-muted);
  }

  /* ── Chats (chat_search_screen.dart): laid out as Projects is ────────────── */
  html.fm body .app-page:has(.chat-list-container) {
    padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px));
  }
  html.fm body .chat-list-container {
    min-height: 0;
    padding: 12px 16px 0;
  }
  html.fm body .chat-list-container .chat-list-inner {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: stretch;
    column-gap: 10px;
  }
  html.fm body .chat-list-container .chat-list-inner > * {
    flex: 0 0 100%;
    min-width: 0;
  }
  html.fm body .chat-list-container .chat-header {
    position: fixed;
    z-index: 998;
    top: env(safe-area-inset-top, 0px);
    left: 50px;
    right: 12px;
    height: 45px;
    margin: 0;
    padding: 0;
    gap: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  html.fm body .chat-list-container .chat-header h1 {
    margin: 0;
    font-family: var(--fm-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--fm-title);
  }
  html.fm body .chat-list-container .new-chat-btn {
    flex: 0 0 auto;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid var(--fm-outline);
    border-radius: 8px;
    background: transparent;
    font-family: var(--fm-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--fm-navy);
  }
  html.fm body.dark .chat-list-container .new-chat-btn {
    border-color: var(--fm-outline) !important;
    background: transparent !important;
    color: var(--fm-navy) !important;
  }
  html.fm body .chat-list-container .new-chat-btn svg {
    width: 15px;
    height: 15px;
  }
  html.fm body .chat-list-container .search-container {
    flex: 1 1 0;
    margin: 0;
  }
  html.fm body .chat-list-container .search-input {
    height: 44px;
    padding: 0 12px 0 38px;
    border-radius: 8px;
    font-family: var(--fm-font);
    font-size: 14px;
  }
  html.fm body .chat-list-container .search-wrapper > svg {
    left: 12px;
    width: 18px;
    height: 18px;
  }
  html.fm body .chat-list-container .controls-row {
    flex: 0 0 auto;
    margin: 0 !important; /* ai_assistant_home.css pushes it down 7px with !important */
    padding: 0;
  }
  /* Keyboard shortcuts mean nothing on a phone. */
  html.fm body .chat-list-container .search-tip,
  html.fm body .chat-list-container .sort-label {
    display: none;
  }
  html.fm body .chat-list-container .sort-trigger {
    height: 44px;
    padding: 0 12px;
    gap: 4px;
    border: 1px solid var(--fm-line);
    border-radius: 8px;
    background: var(--fm-surface);
    font-family: var(--fm-font);
    font-size: 13px;
    color: var(--fm-navy);
  }
  html.fm body .chat-list-container .chat-list {
    margin: 12px -4px 0;
    padding: 0;
  }
  /* A row: title over a one-line preview, the date at its right. */
  html.fm body .chat-list-container .all-chat-item {
    margin: 0 0 2px;
    padding: 10px 12px;
  }
  html.fm body .chat-list-container .all-chat-item-wrapper {
    align-items: flex-start;
    padding-right: 28px; /* clear of the ⋮ */
  }
  html.fm body .chat-list-container .all-chat-item .title {
    font-family: var(--fm-font);
    font-size: 15px;
    font-weight: 400;
    color: var(--fm-navy);
  }
  html.fm body .chat-list-container .chat-preview {
    margin-top: 2px;
    font-size: 13px;
    color: var(--fm-muted);
  }
  html.fm body .chat-list-container .chat-date {
    display: block;
    flex: 0 0 auto;
    padding: 2px 0 0 8px;
    font-size: 11px;
    color: var(--fm-muted);
  }
  html.fm body .chat-list-container .chat-actions {
    right: 4px;
  }

  /* ── Trip Manager list (all_trips_screen.dart, trip_card.dart) ───────────── */
  /* The title goes up into the header line. Under it: the search square and
     the All / Pinned chips on one row, the line about the tool, the Create
     pill, then the cards. */
  html.fm body .app-page:has(.tm-home) {
    padding: 0 0 calc(28px + env(safe-area-inset-bottom, 0px));
  }
  html.fm body .tm-home {
    padding: 8px 16px 0;
  }
  html.fm body .tm-home-inner {
    display: flex;
    flex-direction: column;
  }
  html.fm body .tm-home .tm-header,
  html.fm body .tm-home .tm-header-text {
    display: contents;
  }
  html.fm body .tm-home .tm-title {
    position: fixed;
    z-index: 998;
    top: env(safe-area-inset-top, 0px);
    left: 50px;
    right: 16px;
    height: 45px;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--fm-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 45px;
    letter-spacing: 0;
    color: var(--fm-title);
  }
  html.fm body .tm-home .tm-controls {
    order: 1;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin: 0;
  }
  html.fm body .tm-home .tm-subtitle {
    order: 2;
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--fm-muted);
  }
  html.fm body .tm-home #tmNewTripBtn {
    order: 3;
  }
  html.fm body .tm-home .tm-loading,
  html.fm body .tm-home .tm-banner,
  html.fm body .tm-home .tm-grid,
  html.fm body .tm-home .tm-empty {
    order: 4;
  }
  /* Search is a 38px square until tapped; then it opens into a 44px field
     across the row and the chips step aside, as the app's does. */
  html.fm body .tm-home .tm-search {
    position: relative;
    flex: 0 0 38px;
    min-width: 0;
    height: 38px;
  }
  html.fm body .tm-home #tmSearch {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 1px solid var(--fm-line);
    border-radius: 14px;
    background: var(--fm-surface);
    color: transparent;
    caret-color: transparent;
    cursor: pointer;
    font-family: var(--fm-font);
    font-size: 14.5px;
  }
  html.fm body .tm-home #tmSearch::placeholder {
    color: transparent;
  }
  html.fm body .tm-home .tm-search-icon {
    left: 10px;
    color: var(--fm-muted);
    pointer-events: none;
  }
  html.fm body .tm-home .tm-controls:has(#tmSearch:focus, #tmSearch:not(:placeholder-shown)) .tm-search {
    flex: 1 1 auto;
    height: 44px;
  }
  html.fm body .tm-home .tm-controls:has(#tmSearch:focus, #tmSearch:not(:placeholder-shown)) #tmSearch {
    padding: 0 12px 0 40px;
    color: var(--fm-text);
    caret-color: auto;
    cursor: text;
  }
  html.fm body .tm-home .tm-controls:has(#tmSearch:focus, #tmSearch:not(:placeholder-shown)) #tmSearch::placeholder {
    color: var(--fm-muted);
  }
  html.fm body .tm-home .tm-controls:has(#tmSearch:focus, #tmSearch:not(:placeholder-shown)) .tm-search-icon {
    left: 12px;
  }
  html.fm body .tm-home .tm-controls:has(#tmSearch:focus, #tmSearch:not(:placeholder-shown)) .tm-filters {
    display: none;
  }
  html.fm body .tm-home .tm-filters {
    gap: 8px;
  }
  html.fm body .tm-home .tm-chip {
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--fm-line);
    border-radius: 14px;
    background: var(--fm-surface);
    font-family: var(--fm-font);
    font-size: 13px;
    font-weight: 700;
    color: var(--fm-text);
  }
  html.fm body .tm-home .tm-chip.active {
    border: 1.2px solid var(--fm-outline);
    color: var(--fm-navy);
  }
  html.fm body.dark .tm-home .tm-chip.active {
    color: var(--fm-blue);
  }
  /* "Create": a white pill with a blue + disc, centred over the cards. */
  html.fm body .tm-home #tmNewTripBtn.tm-btn-primary {
    align-self: center;
    gap: 10px;
    margin: 16px 0 0;
    padding: 10px 14px;
    border: 0;
    border-radius: 14px;
    background: var(--fm-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14), 0 1px 1px rgba(0, 0, 0, 0.06);
    font-family: var(--fm-font);
    font-size: 15px;
    font-weight: 800;
    color: var(--fm-navy);
  }
  html.fm body.dark .tm-home #tmNewTripBtn.tm-btn-primary {
    border: 1px solid var(--fm-line);
    box-shadow: none;
  }
  html.fm body .tm-home #tmNewTripBtn.tm-btn-primary svg {
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    padding: 5px;
    border-radius: 50%;
    background: var(--fm-blue);
    color: #FFFFFF;
  }
  html.fm body .tm-home .tm-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
  }
  /* A card: 64px picture on the left; name, chips and dates beside it. */
  html.fm body .tm-home .tm-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 5px;
    align-items: start;
    padding: 9px;
    border: 0;
    border-radius: 14px;
    background: var(--fm-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
  }
  html.fm body.dark .tm-home .tm-card {
    border: 1px solid var(--fm-line);
    box-shadow: none;
  }
  html.fm body .tm-home .tm-card-top {
    display: contents;
  }
  html.fm body .tm-home .tm-card-thumb {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 64px;
    height: 64px;
    border-radius: 12px;
  }
  html.fm body .tm-home .tm-card-titles {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding-top: 2px;
  }
  html.fm body .tm-home .tm-menu-btn {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
  }
  html.fm body .tm-home .tm-card-pin {
    grid-column: 3;
    grid-row: 2;
    justify-self: center;
  }
  html.fm body .tm-home .tm-meta {
    grid-column: 2;
    grid-row: 2;
    gap: 6px;
    margin: 0;
  }
  html.fm body .tm-home .tm-card-foot {
    grid-column: 2 / span 2;
    grid-row: 3;
    margin: 0;
    padding: 0;
    border: 0;
  }
  /* The trip's chat: the card's full width, under a hairline. */
  html.fm body .tm-home .tm-chat {
    grid-column: 1 / -1;
    grid-row: 4;
    width: calc(100% + 18px);
    margin: 4px -9px -9px;
    padding: 10px 12px 11px;
    border-top-color: var(--fm-line);
    border-radius: 0 0 14px 14px;
    font-family: var(--fm-font);
  }
  html.fm body .tm-home .tm-chat-title {
    font-size: 13px;
    color: var(--fm-navy);
  }
  html.fm body .tm-home .tm-chat-time {
    font-size: 11.5px;
  }
  html.fm body .tm-home .tm-chat-line {
    font-size: 12.5px;
  }
  html.fm body .tm-home .tm-card-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    font-family: var(--fm-font);
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--fm-navy);
  }
  html.fm body .tm-home .tm-card-sub {
    font-size: 11.5px;
    color: var(--fm-muted);
  }
  html.fm body .tm-home .tm-meta-item {
    padding: 2px 8px;
    border: 0;
    border-radius: 20px;
    background: var(--fm-tint);
    font-family: var(--fm-font);
    font-size: 11px;
    font-weight: 600;
    color: var(--fm-blue);
  }
  html.fm body .tm-home .tm-meta-item svg {
    display: none;
  }
  html.fm body .tm-home .tm-dates {
    font-size: 11px;
    color: var(--fm-muted);
  }
  html.fm body .tm-home .tm-empty {
    padding: 40px 24px 0;
  }
  html.fm body .tm-home .tm-empty-art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin: 0 auto 16px;
    border-radius: 22px;
    background: var(--fm-tint);
    color: var(--fm-blue);
  }
  html.fm body .tm-home .tm-empty-art svg {
    width: 38px;
    height: 38px;
  }
  html.fm body .tm-home #tmEmptyTitle {
    font-family: var(--fm-font);
    font-size: 17.5px;
    font-weight: 800;
    color: var(--fm-navy);
  }
  html.fm body .tm-home #tmEmptyText {
    font-size: 13px;
    color: var(--fm-muted);
  }
  /* The Create pill above already does this. */
  html.fm body .tm-home #tmEmptyCreate {
    display: none;
  }

  /* ── Trip detail (trip_detail_screen.dart) ───────────────────────────────── */
  html.fm body .app-page:has(.tm-detail) {
    padding: 0 0 calc(28px + env(safe-area-inset-bottom, 0px));
  }
  html.fm body .tm-detail {
    padding: 6px 16px 0;
  }
  /* "All trips" is the way back, so it sits in the header line. */
  html.fm body .tm-detail .tm-back {
    position: fixed;
    z-index: 998;
    top: env(safe-area-inset-top, 0px);
    left: 50px;
    height: 45px;
    margin: 0;
    gap: 4px;
    font-family: var(--fm-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--fm-title);
  }
  html.fm body.dark .tm-detail .tm-back {
    color: var(--fm-title) !important;
  }
  html.fm body .tm-detail .tm-d-name {
    font-family: var(--fm-font);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: var(--fm-navy);
  }
  html.fm body.dark .tm-detail .tm-d-name {
    color: var(--fm-navy) !important;
  }
  html.fm body .tm-detail .tm-d-sub {
    font-size: 13px;
  }
  html.fm body .tm-detail .tm-d-meta {
    gap: 6px;
    margin-top: 10px;
  }
  html.fm body .tm-detail .tm-meta-item {
    padding: 3px 9px;
    border: 0;
    border-radius: 20px;
    background: var(--fm-tint);
    font-family: var(--fm-font);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--fm-blue);
  }
  html.fm body.dark .tm-detail .tm-meta-item {
    color: var(--fm-blue) !important;
  }
  html.fm body .tm-detail .tm-d-actions {
    gap: 8px;
    margin-top: 14px;
  }
  html.fm body .tm-detail .tm-d-actbtn {
    height: 36px;
    padding: 0 13px;
    border: 0.8px solid var(--fm-outline);
    border-radius: 10px;
    background: transparent;
    font-family: var(--fm-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--fm-navy);
  }
  html.fm body.dark .tm-detail .tm-d-actbtn {
    color: var(--fm-navy) !important;
  }
  /* Tabs: pills that scroll sideways; the open one outlined in blue. */
  html.fm body .tm-detail .tm-d-tabs {
    gap: 6px;
    margin: 18px -16px 16px;
    padding: 0 16px;
    border-bottom: 0;
  }
  html.fm body .tm-detail .tm-d-tab {
    height: 36px;
    padding: 0 14px;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 18px;
    font-family: var(--fm-font);
    font-size: 12px;
    font-weight: 600;
  }
  html.fm body .tm-detail .tm-d-tab.active {
    border-color: var(--fm-outline);
    font-weight: 700;
    color: var(--fm-navy);
  }
  html.fm body.dark .tm-detail .tm-d-tab.active {
    color: var(--fm-navy) !important;
  }
  /* What's next: the app's blue card with white text. */
  html.fm body .tm-detail .tm-wn,
  html.fm body.dark .tm-detail .tm-wn {
    padding: 16px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #3B82F6, #1D4ED8);
  }
  html.fm body .tm-detail .tm-wn-label {
    color: rgba(255, 255, 255, 0.78);
  }
  html.fm body .tm-detail .tm-wn-title {
    color: #FFFFFF !important;
  }
  html.fm body .tm-detail .tm-wn-sub {
    color: rgba(255, 255, 255, 0.85) !important;
  }
  html.fm body .tm-detail .tm-d-map {
    border-radius: 14px;
  }
  html.fm body .tm-detail .tm-d-h2 {
    font-family: var(--fm-font);
    font-size: 15px;
    font-weight: 800;
  }
  /* Activities: the title gets the row's width, and the move / edit / delete
     buttons (shown only on hover on desktop, so invisible here while still
     taking 118px) sit on the time's line. */
  html.fm body .tm-detail .tm-act {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    grid-template-areas: "check time tools" ". body body";
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
    padding: 10px 8px;
  }
  html.fm body .tm-detail .tm-act-check {
    grid-area: check;
  }
  html.fm body .tm-detail .tm-act-time {
    grid-area: time;
    width: auto;
    padding: 0;
    font-size: 12px;
    font-weight: 800;
    color: var(--fm-muted);
  }
  html.fm body .tm-detail .tm-act-body {
    grid-area: body;
  }
  html.fm body .tm-detail .tm-act-title {
    font-size: 14px;
    font-weight: 700;
  }
  html.fm body .tm-detail .tm-act-tools {
    grid-area: tools;
    opacity: 1;
    color: var(--fm-muted);
  }

  /* ── Expense Tracker (expense_shell.dart, liquid_glass.dart GlassTabBar) ──── */
  /* The title goes up into the header line and the Dashboard / Upload /
     Settings tabs become the app's floating tab bar: a 58px capsule 20px in
     from the sides and 8px off the bottom, icon over label, the open tab on a
     soft grey pill. */
  html.fm body .app-page:has(.et-page) {
    padding: 0 16px calc(90px + env(safe-area-inset-bottom, 0px));
  }
  html.fm body .et-page {
    padding: 8px 0 0;
  }
  html.fm body .et-head {
    margin: 0;
  }
  html.fm body .et-title-mark,
  html.fm body .et-head p {
    display: none;
  }
  html.fm body .et-head h1 {
    position: fixed;
    z-index: 998;
    top: env(safe-area-inset-top, 0px);
    left: 50px;
    right: 16px;
    height: 45px;
    margin: 0;
    font-family: var(--fm-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 45px;
    letter-spacing: 0;
    color: var(--fm-title);
  }
  html.fm body .et-tabs {
    position: fixed;
    z-index: 997; /* under the band's titles, the drawer and sheets */
    left: 20px;
    right: 20px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    display: flex;
    gap: 0;
    height: 58px;
    padding: 4px;
    border-radius: 29px;
    background: rgba(255, 255, 255, 0.80);
    -webkit-backdrop-filter: saturate(180%) blur(6px);
    backdrop-filter: saturate(180%) blur(6px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 18px rgba(0, 0, 0, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  }
  html.fm body.dark .et-tabs {
    background: rgba(48, 48, 48, 0.66);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 4px 18px rgba(0, 0, 0, 0.40);
  }
  html.fm body .et-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0;
    border-radius: 25px;
    background: transparent;
    box-shadow: none;
    font-family: var(--fm-font);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--fm-text);
  }
  html.fm body .et-tab::before {
    content: "";
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: var(--et-tab-icon) center / contain no-repeat;
    mask: var(--et-tab-icon) center / contain no-repeat;
  }
  html.fm body .et-tab[href$="/expense-tracker/"] {
    --et-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.21 15.89A10 10 0 1 1 8 2.83'/%3E%3Cpath d='M22 12A10 10 0 0 0 12 2v10z'/%3E%3C/svg%3E");
  }
  html.fm body .et-tab[href$="/upload/"] {
    --et-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M12 18v-6'/%3E%3Cpath d='M9 15l3-3 3 3'/%3E%3C/svg%3E");
  }
  html.fm body .et-tab[href$="/statements/"] {
    --et-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
  }
  html.fm body .et-tab:hover {
    color: var(--fm-text);
  }
  html.fm body .et-tab.active {
    background: rgba(0, 0, 0, 0.08);
    box-shadow: none;
    font-weight: 600;
    color: var(--fm-text);
  }
  html.fm body.dark .et-tab.active {
    background: rgba(255, 255, 255, 0.12);
  }
  /* Cards (expense_bits.dart XCard): radius 16, padding 16. */
  html.fm body .et-page .et-card {
    border-radius: 16px;
    padding: 16px;
  }

  /* ── Meeting tools, PDF Editor (live_transcription_screen.dart,
     import_transcribe_screen.dart, pdf_editor_screen.dart) ─────────────────── */
  /* These have their own grey-blue page in the app. The title goes up into
     the header line; the page's links (History, Upload, Record, uses left)
     become a row of small outlined buttons under it; the main action of each
     page is solid navy, as the app draws it. */
  html.fm body:has(#pageRoot.app, .upload-page, .pdf-page) {
    --fm-bg: #F0F4F9;
  }
  html.fm body.dark:has(#pageRoot.app, .upload-page, .pdf-page) {
    --fm-bg: #000000;
  }
  html.fm body #pageRoot.app,
  html.fm body .upload-page,
  html.fm body .pdf-page {
    padding: 8px 12px calc(24px + env(safe-area-inset-bottom, 0px));
    background: transparent;
  }
  html.fm body #pageRoot.app > .topbar,
  html.fm body .upload-page > .topbar,
  html.fm body .pdf-page > .topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 0;
    margin: 0 0 12px;
    padding: 0;
  }
  html.fm body #pageRoot.app > .topbar .logo,
  html.fm body #pageRoot.app > .topbar .logo > div:not([class]),
  html.fm body .upload-page > .topbar .page-heading,
  html.fm body .upload-page > .topbar .page-heading > div:not([class]),
  html.fm body .pdf-page > .topbar .page-heading,
  html.fm body .pdf-page > .topbar .page-heading > div:not([class]) {
    display: contents;
  }
  html.fm body #pageRoot.app > .topbar .logo-title,
  html.fm body .upload-page > .topbar .page-title,
  html.fm body .pdf-page > .topbar .page-title {
    position: fixed;
    z-index: 998;
    top: env(safe-area-inset-top, 0px);
    left: 50px;
    right: 16px;
    height: 45px;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--fm-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 45px;
    letter-spacing: 0;
    color: var(--fm-title);
  }
  html.fm body #pageRoot.app > .topbar .logo-icon2,
  html.fm body .upload-page > .topbar .page-icon,
  html.fm body .upload-page > .topbar .page-sub,
  html.fm body .pdf-page > .topbar .page-icon,
  html.fm body .pdf-page > .topbar .page-sub {
    display: none;
  }
  /* The drawer is the way to the other tools. */
  html.fm body .pdf-page > .topbar .btn-nav[href$="/tools/"] {
    display: none;
  }
  html.fm body #pageRoot.app > .topbar .topbar-actions,
  html.fm body .upload-page > .topbar > div,
  html.fm body .pdf-page > .topbar > div {
    display: flex;
    flex: 0 1 auto;
    gap: 8px;
    margin: 0;
  }
  html.fm body #pageRoot.app > .topbar a.btn-upload,
  html.fm body .upload-page > .topbar a.btn-record,
  html.fm body .upload-page > .topbar a.btn-primary,
  html.fm body .pdf-page > .topbar .pdf-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: 32px;
    padding: 0 12px;
    border: 0.8px solid var(--fm-outline);
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    font-family: var(--fm-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--fm-navy);
  }
  /* The uses-left chip, as the links beside it; its tip opened leftward from
     the chip, off the screen's edge, and opens rightward now, as on Live. */
  html.fm body .upload-page > .topbar .mins-chip,
  html.fm body #pageRoot.app > .topbar .mins-chip {
    height: 32px;
    padding: 0 12px;
    gap: 6px;
    border: 0.8px solid var(--fm-outline);
    border-radius: 8px;
    background: transparent;
    font-family: var(--fm-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--fm-navy);
  }
  html.fm body.dark .upload-page > .topbar .mins-chip,
  html.fm body.dark #pageRoot.app > .topbar .mins-chip {
    border-color: var(--fm-outline) !important;
    background: transparent !important;
    color: var(--fm-navy) !important;
  }
  html.fm body .upload-page .mins-tip,
  html.fm body #pageRoot.app .mins-tip {
    left: 0;
    right: auto;
    min-width: 0;
    width: max-content;
    max-width: calc(100vw - 24px);
  }

  /* Live: date, time and the timer on one quiet line, without the email. */
  html.fm body #pageRoot.app .meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 2px 10px;
  }
  html.fm body #pageRoot.app .meta-chip {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 12px;
    color: var(--fm-muted);
  }
  html.fm body #pageRoot.app .meta-chip:first-child,
  html.fm body #pageRoot.app .meta-chip svg {
    display: none;
  }
  html.fm body #pageRoot.app .meta-chip strong {
    font-weight: 400;
    color: inherit;
  }
  html.fm body #pageRoot.app .meta-chip ~ .meta-chip ~ .meta-chip::before {
    content: "\00B7";
    margin: 0 6px;
  }
  /* dark_mode.css greys the page and fills the chips and links; the app keeps
     the page black under its black header. */
  html.fm body.dark #pageRoot.app,
  html.fm body.dark .upload-page,
  html.fm body.dark .pdf-page,
  html.fm body.dark #pageRoot.app .meta-chip,
  html.fm body.dark #pageRoot.app > .topbar a.btn-upload,
  html.fm body.dark .upload-page > .topbar a.btn-record,
  html.fm body.dark .upload-page > .topbar a.btn-primary,
  html.fm body.dark .pdf-page > .topbar .pdf-chip {
    background: transparent !important;
  }
  html.fm body.dark #pageRoot.app > .topbar a.btn-upload,
  html.fm body.dark .upload-page > .topbar a.btn-record,
  html.fm body.dark .upload-page > .topbar a.btn-primary,
  html.fm body.dark .pdf-page > .topbar .pdf-chip {
    border-color: var(--fm-outline) !important;
    color: var(--fm-navy) !important;
  }
  html.fm body:not(.dark) #pageRoot.app .transcript-wrap,
  html.fm body:not(.dark) .upload-page .card,
  html.fm body:not(.dark) .pdf-page .card {
    border: 1px solid #DCE8F5;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(11, 47, 78, 0.05);
    overflow: hidden;
  }
  html.fm body.dark #pageRoot.app .transcript-wrap,
  html.fm body.dark .upload-page .card,
  html.fm body.dark .pdf-page .card {
    border-radius: 14px;
    overflow: hidden;
  }
  html.fm body .upload-page .card-header-title,
  html.fm body .pdf-page .card-header-title,
  html.fm body #pageRoot.app .transcript-title {
    font-family: var(--fm-font);
    font-size: 13px;
    font-weight: 600;
  }
  html.fm body .upload-page .dropzone,
  html.fm body .pdf-page .dropzone {
    border-radius: 12px;
  }
  html.fm body .upload-page .dropzone-title,
  html.fm body .pdf-page .dropzone-title {
    font-family: var(--fm-font);
    font-size: 14px;
    font-weight: 600;
  }
  html.fm body #pageRoot.app .btn-start,
  html.fm body .upload-page .btn-choose,
  html.fm body .upload-page .btn-process,
  html.fm body .pdf-page .btn-choose {
    border: 0;
    background: var(--fm-send-bg);
    color: var(--fm-send-fg);
    font-family: var(--fm-font);
    font-weight: 600;
    letter-spacing: 0;
  }
  html.fm body.dark #pageRoot.app .btn-start,
  html.fm body.dark .upload-page .btn-choose,
  html.fm body.dark .upload-page .btn-process,
  html.fm body.dark .pdf-page .btn-choose {
    background: var(--fm-send-bg) !important;
    color: var(--fm-send-fg) !important;
  }
  html.fm body #pageRoot.app .btn-start {
    height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13px;
  }
  html.fm body .upload-page .btn-choose,
  html.fm body .pdf-page .btn-choose {
    width: auto;
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 14px;
  }
  html.fm body .upload-page .btn-process {
    height: 50px;
    border-radius: 12px;
    font-size: 15px;
  }

  /* ── Settings (settings_screen.dart): grouped boxes on #F2F2F7 ─────────────
     The app's sheet: a white header with its title centred, over a grey page
     whose rows sit in boxes, radius 12 (iOS: panes of glass, radius 22),
     12px apart, with hairlines from the text to 16px short of the edge.
     settings_modal.js builds the menu and the Notifications and Language
     pages; settings_modal.css and dark_mode.css set nearly all of this with
     !important. */
  html.fm body #settingsModal {
    --st-page: #F2F2F7;
    --st-card: #FFFFFF;
    --st-card-edge: none;
    --st-radius: 12px;
    --st-ink: #0D0D0D;
    --st-muted: #607187;
    --st-navy: #0B2F4E;
    --st-blue: #1B91F8;
    --st-red: #EF4444;
    --st-divider: #F0F2F4;
    --st-chevron: #BCC5D0;
    --st-press: rgba(0, 0, 0, 0.04);
    --st-avatar: #0B2F4E;
    --st-switch-off: #D1D5DB;
    --st-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
    --st-thumb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Ccircle cx='10.5' cy='11.3' r='8.6' fill='%23000' fill-opacity='.14'/%3E%3Ccircle cx='10.5' cy='10.5' r='8.5' fill='%23fff'/%3E%3C/svg%3E");
  }
  html.fm body.dark #settingsModal {
    --st-page: #000000;
    --st-card: #1A1A1A;
    --st-ink: #F9FAFB;
    --st-muted: #9CA3AF;
    --st-navy: #F9FAFB;
    --st-blue: #60A5FA;
    --st-red: #F87171;
    --st-divider: #2A3441;
    --st-chevron: #9CA3AF;
    --st-press: rgba(255, 255, 255, 0.06);
    --st-avatar: #2D3748;
    --st-switch-off: #4B5563;
  }
  /* iOS: the boxes are panes of glass (liquid_glass.dart), and rounder. */
  html.fm.fm-ios body #settingsModal {
    --st-card: rgba(255, 255, 255, 0.80);
    --st-card-edge: var(--fm-glass-rim), var(--fm-glass-shadow);
    --st-radius: 22px;
  }
  html.fm.fm-ios body.dark #settingsModal {
    --st-card: rgba(48, 48, 48, 0.66);
  }

  /* A page, not a sheet: the screen's height with a flat top, no grabber. No
     blur: its glass menus would lose their fill inside it. */
  html.fm body #settingsModal .modal-dialog {
    background: transparent !important;
  }
  html.fm body #settingsModal .modal-content.settings-modal {
    overflow: hidden !important;
    border-radius: 0 !important;
    background: var(--st-page) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* The screen's height is what shows of it. settings_modal.css makes the
     page 100vh, the height with the browser's bars tucked away: while
     Chrome's address bar or Safari's toolbar showed, the end of the list,
     Log out, sat under it however far the list scrolled. */
  html.fm body #settingsModal .modal-dialog,
  html.fm body #settingsModal .modal-content.settings-modal {
    min-height: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
  }
  /* Nor a floor under the menu of 100vh less a header, which scrolled a list
     that fits. */
  html.fm body #settingsModal.show-menu .settings-content {
    min-height: 0 !important;
  }
  html.fm body #settingsModal .modal-content.settings-modal::before {
    display: none;
  }
  html.fm body #settingsModal .modal-body,
  html.fm body #settingsModal .settings-content,
  html.fm body #settingsModal .mobile-settings-menu,
  html.fm body #settingsModal.show-section .settings-tab.active {
    background: transparent !important;
  }

  /* The header: a round white back button at the top left and the title
     centred, on the page's own grey with no bar or hairline under it. Its
     64px row is opaque, so a page's own header (.mobile-section-header, the
     same) can stay on top while its content scrolls under it. */
  html.fm body #settingsModal {
    --st-btn: #FFFFFF;
    --st-btn-line: rgba(0, 0, 0, 0.07);
    --st-btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 14px rgba(0, 0, 0, 0.06);
    --st-icon-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 18l-6-6 6-6'/%3E%3C/svg%3E");
  }
  html.fm body.dark #settingsModal {
    --st-btn: #1C1C1E;
    --st-btn-line: rgba(255, 255, 255, 0.10);
    --st-btn-shadow: none;
  }
  html.fm body #settingsModal .settings-modal > .d-flex:not(.modal-body),
  html.fm body #settingsModal .mobile-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    height: calc(64px + env(safe-area-inset-top, 0px));
    margin: 0 !important;
    padding: env(safe-area-inset-top, 0px) 72px 0 !important;
    border-bottom: 0 !important;
    background: var(--st-page) !important;
  }
  html.fm body #settingsModal .settings-modal > .d-flex:not(.modal-body) {
    position: relative;
    flex-shrink: 0;
  }
  html.fm body #settingsModal.show-section .settings-modal > .d-flex:not(.modal-body) {
    display: none !important;
  }
  html.fm body #settingsModal .mobile-section-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
  }
  html.fm body #settingsModal .mobile-section-header:active {
    background: var(--st-page) !important;
  }
  html.fm body #settingsModal .settings-modal .modal-title,
  html.fm body #settingsModal .mobile-section-title {
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--fm-font);
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--st-ink) !important;
  }
  /* The round button: back to the menu on a page, and out of Settings on the
     menu itself (the sheet's close button, drawn as a back chevron).
     settings_modal.css hides the close button on phones for a
     .mobile-close-btn that nothing creates any more. */
  html.fm body #settingsModal .settings-modal > .d-flex:not(.modal-body) .btn-close,
  html.fm body #settingsModal .mobile-back-arrow {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: 16px;
    width: 44px;
    height: 44px;
    margin: 0 !important;
    padding: 0;
    border: 0.5px solid var(--st-btn-line) !important;
    border-radius: 50%;
    background: var(--st-btn) !important;
    box-shadow: var(--st-btn-shadow) !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none;
    font-size: 0 !important;
    -webkit-tap-highlight-color: transparent;
    z-index: 2;
  }
  html.fm body #settingsModal .settings-modal > .d-flex:not(.modal-body) .btn-close::before,
  html.fm body #settingsModal .mobile-back-arrow::before {
    content: "" !important;
    width: 22px;
    height: 22px;
    background: var(--st-ink) !important;
    -webkit-mask: var(--st-icon-chevron-left) center / contain no-repeat;
    mask: var(--st-icon-chevron-left) center / contain no-repeat;
  }

  /* Other pages: on the grey page, 16px in, 12 under the header. */
  html.fm body #settingsModal .settings-tab.active > *:not(.mobile-section-header) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  html.fm body #settingsModal .settings-tab.active > .mobile-section-header + * {
    padding-top: 12px !important;
  }

  /* The menu (settings_modal.js mobileSettingsMenuHtml): boxes 12px apart on
     16px margins. */
  html.fm body #settingsModal .mobile-settings-menu {
    position: relative; /* the theme menu's anchor */
    gap: 12px;
    padding: 12px 16px calc(32px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html.fm body #settingsModal .mobile-settings-group,
  html.fm body #settingsModal #notificationSettings {
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--st-radius);
    background: var(--st-card);
    box-shadow: var(--st-card-edge);
  }
  /* A row (_Row): 16 / 12 padding, a 22px icon in the label's colour, 12 to
     the label (16px), a value and the chevron at the end. */
  html.fm body #settingsModal .mobile-settings-item {
    position: relative;
    display: flex !important;
    align-items: center !important;
    gap: 4px;
    min-height: 0;
    margin: 0;
    padding: 12px 16px !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: var(--st-ink) !important;
    -webkit-tap-highlight-color: transparent;
  }
  html.fm body #settingsModal .mobile-settings-item:active {
    background: var(--st-press) !important;
  }
  html.fm body #settingsModal .mobile-settings-item + .mobile-settings-item::before,
  html.fm body #settingsModal .notification-item + .notification-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50px;
    right: 16px;
    height: 1px;
    background: var(--st-divider);
  }
  html.fm body #settingsModal .mobile-settings-item-content {
    flex: 1 1 auto !important;
    min-width: 0;
    gap: 12px !important;
  }
  html.fm body #settingsModal .mobile-settings-item-icon {
    flex: 0 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px !important;
    height: 22px !important;
    font-size: 19px !important;
    line-height: 1;
    color: var(--st-ink) !important;
    filter: none !important;
  }
  html.fm body #settingsModal .mobile-settings-item-text {
    min-width: 0;
  }
  html.fm body #settingsModal .mobile-settings-item-label {
    margin: 0 !important;
    font-family: var(--fm-font);
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.25;
    color: var(--st-ink) !important;
  }
  html.fm body #settingsModal .mobile-settings-item-desc {
    display: block !important;
    margin-top: 1px;
    font-family: var(--fm-font);
    font-size: 13px !important;
    line-height: 1.25 !important;
    color: var(--st-muted) !important;
  }
  html.fm body #settingsModal .mobile-settings-item-value {
    flex: 0 0 auto;
    font-family: var(--fm-font);
    font-size: 15px;
    color: var(--st-muted);
  }
  html.fm body #settingsModal .mobile-settings-item-arrow {
    flex: 0 0 20px;
    display: flex;
    width: 20px;
    height: 20px;
    font-size: 0 !important;
  }
  html.fm body #settingsModal .mobile-settings-item-arrow::before {
    content: "" !important;
    width: 20px;
    height: 20px;
    background: var(--st-chevron) !important;
    -webkit-mask: var(--st-icon-chevron) center / contain no-repeat;
    mask: var(--st-icon-chevron) center / contain no-repeat;
  }
  /* Log out: a row like the rest, red on iOS, which marks it that way. */
  html.fm.fm-ios body #settingsModal .mobile-logout-item .mobile-settings-item-label,
  html.fm.fm-ios body #settingsModal .mobile-logout-item .mobile-settings-item-icon {
    color: var(--st-red) !important;
  }

  /* The account card: a 44px navy circle, the name 15 / 600, email 13 and
     plan 12 under it. */
  html.fm body #settingsModal .mobile-profile-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
  }
  html.fm body #settingsModal .mobile-profile-avatar {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--st-avatar);
  }
  html.fm body #settingsModal .mobile-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  html.fm body #settingsModal .mobile-profile-avatar .user-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: transparent !important;
    font-family: var(--fm-font);
    font-size: 18px;
    font-weight: 600;
    color: #FFFFFF !important;
  }
  html.fm body #settingsModal .mobile-profile-text {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--fm-font);
    line-height: 1.25;
  }
  html.fm body #settingsModal .mobile-profile-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--st-ink);
  }
  html.fm body #settingsModal .mobile-profile-email {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    color: var(--st-muted);
  }
  html.fm body #settingsModal .mobile-profile-plan {
    font-size: 12px;
    color: var(--st-muted);
  }

  /* The free plan's banner: navy, radius 14 (iOS 22), a white Upgrade pill. */
  html.fm body #settingsModal .mobile-upgrade-banner {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #0B2F4E;
    font-family: var(--fm-font);
  }
  html.fm.fm-ios body #settingsModal .mobile-upgrade-banner {
    border-radius: 22px;
  }
  html.fm body.dark #settingsModal .mobile-upgrade-banner {
    border: 1px solid #374151;
    background: #1A2332;
  }
  html.fm body #settingsModal .mobile-upgrade-text {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
  }
  html.fm body #settingsModal .mobile-upgrade-title {
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF;
  }
  html.fm body #settingsModal .mobile-upgrade-desc {
    margin-top: 2px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
  }
  html.fm body.dark #settingsModal .mobile-upgrade-title {
    color: #F9FAFB;
  }
  html.fm body.dark #settingsModal .mobile-upgrade-desc {
    color: #D1D5DB;
  }
  html.fm body #settingsModal .mobile-upgrade-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border-radius: 20px;
    background: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    color: #0D0D0D;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  html.fm body.dark #settingsModal .mobile-upgrade-btn {
    background: #3B82F6;
    color: #FFFFFF;
  }

  /* Theme's menu (settings_modal.js openThemeMenu): the site's phone menu,
     170 wide, a tick by the theme in use; the barrier under it takes the
     tap that closes it. */
  html.fm body #settingsModal .mobile-theme-barrier {
    position: fixed;
    inset: 0;
    z-index: 20;
  }
  html.fm body #settingsModal .mobile-theme-menu {
    position: absolute;
    z-index: 21;
    left: auto;
    width: 170px;
    min-width: 0;
    margin: 0;
  }
  html.fm body #settingsModal .mobile-theme-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 !important; /* settings_modal.css gives every button 20px under it */
    line-height: 1.2;
  }
  html.fm body #settingsModal .mobile-theme-menu .dropdown-item i {
    width: 17px;
    font-size: 17px;
  }

  /* Language (_LanguagePage): the languages straight on the page, 16 / 14,
     the chosen one blue with a tick. */
  html.fm body #settingsModal .settings-tab.active > .mobile-language-list {
    display: flex;
    flex-direction: column;
    padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html.fm body #settingsModal .mobile-language-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0 !important;
    padding: 14px 16px;
    border: 0;
    background: transparent;
    font-family: var(--fm-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    text-align: left;
    color: var(--st-ink);
    -webkit-tap-highlight-color: transparent;
  }
  html.fm body #settingsModal .mobile-language-option:active {
    background: var(--st-press);
  }
  html.fm body #settingsModal .mobile-language-option span {
    flex: 1 1 auto;
  }
  html.fm body #settingsModal .mobile-language-option i {
    display: none;
    font-size: 20px;
    line-height: 1;
  }
  html.fm body #settingsModal .mobile-language-option.selected {
    color: var(--st-blue);
  }
  html.fm body #settingsModal .mobile-language-option.selected i {
    display: block;
  }

  /* Notifications (_NotificationsPage): one box of two switch rows. The
     words are the page's title already, and the app saves without a note. */
  html.fm body #settingsModal .settings-tab.active > .notifications-section {
    margin: 0 !important;
    padding: 12px 16px 32px !important;
    border: 0 !important;
  }
  html.fm body #settingsModal .notifications-section .persona-title,
  html.fm body #settingsModal #notifSuccess {
    display: none !important;
  }
  html.fm body #settingsModal .notification-item {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
    min-height: 0;
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  html.fm body #settingsModal .notification-item + .notification-item::before {
    left: 16px;
  }
  html.fm body #settingsModal .notification-label {
    font-family: var(--fm-font);
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.25;
    color: var(--st-ink) !important;
  }
  /* The app's switch (furo_switch.dart): a 38 x 21 track, blue when on. */
  html.fm body #settingsModal .notification-item .form-check-input {
    flex: 0 0 38px;
    width: 38px !important;
    height: 21px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background-color: var(--st-switch-off) !important;
    background-image: var(--st-thumb) !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 21px 21px !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: background-position 0.2s ease, background-color 0.2s ease;
  }
  html.fm body #settingsModal .notification-item .form-check-input:checked {
    background-color: #1B91F8 !important;
    background-position: right center !important;
  }

  /* Theme's menu: every row keeps the tick's room (furo_dropdown.dart). */
  html.fm body #settingsModal .mobile-theme-menu .dropdown-item i {
    display: flex;
    align-items: center;
    height: 17px;
    line-height: 1;
  }

  /* Profile (_ProfilePage): each part a small caps heading over a box of
     rows, 20px apart. A row's name sits on the left and its value on the
     right; a field that can be edited shows only its value, or its prompt,
     with the edit button at the end. The box is the section itself, its
     heading lifted above it. Data and Account deletion are
     settings_modal.js's (mobileSettingsPages); the page's own Delete Account
     block gives way to them. */
  html.fm body #settingsModal #tab-profile {
    --st-icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z'/%3E%3C/svg%3E");
  }
  html.fm body #settingsModal #tab-profile > .profile-info-section,
  html.fm body #settingsModal #tab-profile > .mobile-profile-part {
    position: relative;
    margin: 43px 16px 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  html.fm body #settingsModal #tab-profile > .profile-info-section {
    border-radius: var(--st-radius) !important;
    background: var(--st-card) !important;
    box-shadow: var(--st-card-edge) !important;
  }
  html.fm body #settingsModal #tab-profile > .mobile-section-header + .profile-info-section {
    margin-top: 35px !important;
  }
  html.fm body #settingsModal #tab-profile > .mobile-profile-part:last-child {
    margin-bottom: 32px !important;
  }
  html.fm body #settingsModal #tab-profile > .profile-danger-section {
    display: none !important;
  }
  html.fm body #settingsModal #tab-profile .profile-section-title {
    position: absolute;
    left: 4px;
    bottom: 100%;
    margin: 0 !important;
    padding: 0 0 6px !important;
    font-family: var(--fm-font);
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--st-muted) !important;
  }
  html.fm body #settingsModal #tab-profile .profile-field-row {
    position: relative;
    display: flex !important;
    align-items: center !important;
    gap: 16px;
    min-height: 0;
    margin: 0 !important;
    padding: 13px 16px !important;
  }
  html.fm body #settingsModal #tab-profile .profile-field-row + .profile-field-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: var(--st-divider);
  }
  html.fm body #settingsModal #tab-profile .profile-field-label {
    flex: 0 0 auto;
    margin: 0 !important;
    font-family: var(--fm-font);
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.25;
    letter-spacing: 0;
    color: var(--st-ink) !important;
  }
  html.fm body #settingsModal #tab-profile .profile-field-value-wrapper {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html.fm body #settingsModal #tab-profile .profile-field-value {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: right;
    font-family: var(--fm-font);
    font-size: 15px !important;
    letter-spacing: 0;
    color: var(--st-muted) !important;
  }
  html.fm body #settingsModal #tab-profile .profile-field-row:has(.profile-field-input) {
    padding: 10px 16px !important;
  }
  html.fm body #settingsModal #tab-profile .profile-field-row:has(.profile-field-input) > .profile-field-label,
  html.fm body #settingsModal #tab-profile .profile-helper-text {
    display: none !important;
  }
  html.fm body #settingsModal #tab-profile .profile-field-input {
    flex: 1 1 auto;
    min-width: 0;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    font-family: var(--fm-font);
    font-size: 16px !important;
    line-height: 1.25;
    letter-spacing: 0;
    color: var(--st-ink) !important;
    -webkit-text-fill-color: var(--st-ink) !important;
  }
  html.fm body #settingsModal #tab-profile .profile-field-input::placeholder {
    opacity: 1;
    color: var(--st-muted) !important;
    -webkit-text-fill-color: var(--st-muted) !important;
  }
  html.fm body #settingsModal #tab-profile .profile-edit-actions {
    flex: 0 0 auto;
    gap: 0 !important;
  }
  html.fm body #settingsModal #tab-profile .profile-edit-btn:not(#verifyPhoneBtn),
  html.fm body #settingsModal #tab-profile .profile-save-btn,
  html.fm body #settingsModal #tab-profile .profile-cancel-btn {
    width: 44px;
    height: 44px;
    margin: 0 !important; /* settings_modal.css gives every button 20px under it */
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px;
    background: transparent !important;
    opacity: 1;
  }
  html.fm body #settingsModal #tab-profile #verifyPhoneBtn {
    margin: 0 !important;
  }
  html.fm body #settingsModal #tab-profile .profile-edit-btn img {
    width: 20px;
    height: 20px;
  }
  /* Security: Account Created and Last Login as name and value rows, then
     Change Password as a row: a lock on Android; on iOS no icon, a chevron. */
  html.fm body #settingsModal #tab-profile .profile-security-row {
    display: block !important;
  }
  html.fm body #settingsModal #tab-profile .profile-field-label.label-account {
    flex: 1 1 auto;
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }
  html.fm body #settingsModal #tab-profile .profile-security-values {
    margin: 0 !important;
    text-align: right;
    font-size: 15px !important;
    line-height: 1.25 !important;
    color: var(--st-muted) !important;
  }
  html.fm body #settingsModal #tab-profile .profile-change-password-btn {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    border: 0 !important;
    border-radius: 0 0 var(--st-radius) var(--st-radius) !important;
    background-color: transparent !important;
    background-image: linear-gradient(var(--st-divider), var(--st-divider)) !important;
    background-position: 16px 0 !important;
    background-size: calc(100% - 32px) 1px !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
    font-family: var(--fm-font);
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.25;
    text-align: left !important;
    color: var(--st-ink) !important;
    -webkit-tap-highlight-color: transparent;
  }
  html.fm body #settingsModal #tab-profile .profile-change-password-btn:active {
    background-color: var(--st-press) !important;
  }
  html.fm body #settingsModal #tab-profile .profile-change-password-btn::before {
    content: "";
    flex: 0 0 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: var(--st-icon-lock) center / 22px 22px no-repeat;
    mask: var(--st-icon-lock) center / 22px 22px no-repeat;
  }
  html.fm.fm-ios body #settingsModal #tab-profile .profile-change-password-btn::before {
    display: none;
  }
  html.fm.fm-ios body #settingsModal #tab-profile .profile-change-password-btn::after {
    content: "";
    flex: 0 0 20px;
    height: 20px;
    margin-left: auto;
    background: var(--st-chevron);
    -webkit-mask: var(--st-icon-chevron) center / contain no-repeat;
    mask: var(--st-icon-chevron) center / contain no-repeat;
  }
  /* Data and Account deletion: red rows on iOS, with what they do spelled
     out underneath, as iOS explains a setting; Android shows the row alone. */
  html.fm.fm-ios body #settingsModal .mobile-danger-row .mobile-settings-item-label,
  html.fm.fm-ios body #settingsModal .mobile-danger-row .mobile-settings-item-icon {
    color: var(--st-red) !important;
  }
  html.fm body #settingsModal .mobile-settings-footnote {
    display: none;
  }
  html.fm.fm-ios body #settingsModal .mobile-settings-footnote {
    display: block;
    margin: 0 !important;
    padding: 8px 16px 0 !important;
    font-family: var(--fm-font);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--st-muted);
  }

  /* Memory (_MemoryPage): two white boxes with a switch, edged in faint blue,
     each over a "View and manage" box with a chevron. The page's own title
     and blurb are the header's already. */
  html.fm body #settingsModal #memoryMainView > .persona-title,
  html.fm body #settingsModal #memoryMainView > .persona-description {
    display: none !important;
  }
  html.fm body #settingsModal #memoryMainView .pref-section {
    margin: 8px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  html.fm body #settingsModal #memoryMainView .memory-enable-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    margin: 0 0 4px !important;
    padding: 10px 8px 10px 16px !important;
    border: 1px solid rgba(27, 145, 248, 0.22) !important;
    border-radius: 12px !important;
    background: var(--st-card) !important;
  }
  html.fm body.dark #settingsModal #memoryMainView .memory-enable-row {
    border-color: rgba(96, 165, 250, 0.30) !important;
  }
  html.fm body #settingsModal .memory-enable-text {
    flex: 1 1 auto;
    min-width: 0;
  }
  html.fm body #settingsModal .memory-enable-label {
    display: block;
    font-family: var(--fm-font);
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3;
    color: var(--st-navy) !important;
  }
  html.fm body #settingsModal .memory-enable-desc {
    display: block;
    margin-top: 3px;
    font-family: var(--fm-font);
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    color: var(--st-muted) !important;
  }
  html.fm body #settingsModal #memoryMainView .memory-manage-box {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 4px 0 !important; /* settings_modal.css gives every button 20px under it */
    padding: 15px 12px 15px 16px !important;
    border: 1px solid rgba(96, 113, 135, 0.18) !important;
    border-radius: 12px !important;
    background: var(--st-card) !important;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
  }
  html.fm body.dark #settingsModal #memoryMainView .memory-manage-box {
    border-color: rgba(156, 163, 175, 0.18) !important;
  }
  html.fm body #settingsModal .memory-manage-label {
    flex: 1 1 auto;
    font-family: var(--fm-font);
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--st-ink) !important;
  }
  html.fm body #settingsModal .memory-manage-chevron {
    display: flex;
    width: 22px;
    height: 22px;
    font-size: 0 !important;
  }
  html.fm body #settingsModal .memory-manage-chevron::before {
    content: "" !important;
    width: 22px;
    height: 22px;
    background: var(--st-muted) !important;
    -webkit-mask: var(--st-icon-chevron) center / contain no-repeat;
    mask: var(--st-icon-chevron) center / contain no-repeat;
  }
  /* iOS: panes of glass, rounder, as the settings boxes. */
  html.fm.fm-ios body #settingsModal #memoryMainView .memory-enable-row,
  html.fm.fm-ios body #settingsModal #memoryMainView .memory-manage-box {
    border: 0 !important;
    border-radius: 22px !important;
    box-shadow: var(--st-card-edge);
  }
  html.fm.fm-ios body #settingsModal #memoryMainView .memory-enable-row {
    padding: 16px 12px 16px 18px !important;
  }
  /* The app's switch, as on Notifications. */
  html.fm body #settingsModal .memory-enable-row .form-check-input {
    flex: 0 0 38px;
    width: 38px !important;
    height: 21px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background-color: var(--st-switch-off) !important;
    background-image: var(--st-thumb) !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 21px 21px !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: background-position 0.2s ease, background-color 0.2s ease;
  }
  html.fm body #settingsModal .memory-enable-row .form-check-input:checked {
    background-color: #1B91F8 !important;
    background-position: right center !important;
  }

  /* Usage (_UsagePage): a small caps heading, then one box of rows, each its
     name and per cent over a 6px bar. On phones the bars had collapsed to
     nothing: flex: 1 in a column. */
  html.fm body #settingsModal #tab-usage > .usage-header {
    margin: 0 !important;
    padding: 14px 20px 6px !important;
    border: 0 !important;
  }
  html.fm body #settingsModal #tab-usage .usage-header-left {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }
  html.fm body #settingsModal #tab-usage .usage-title {
    margin: 0 !important;
    font-family: var(--fm-font);
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--st-muted) !important;
  }
  html.fm body #settingsModal #tab-usage .usage-plan-badge {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-family: var(--fm-font);
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--st-muted) !important;
  }
  html.fm body #settingsModal #tab-usage > .usage-item {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label stats" "bar bar";
    align-items: center !important;
    gap: 6px 12px !important;
    margin: 0 16px !important;
    padding: 12px 16px !important;
    background: var(--st-card);
  }
  html.fm body #settingsModal #tab-usage > .usage-item--primary {
    border-radius: var(--st-radius) var(--st-radius) 0 0;
  }
  html.fm body #settingsModal #tab-usage > .usage-item:last-child {
    margin-bottom: 32px !important;
    border-radius: 0 0 var(--st-radius) var(--st-radius);
  }
  html.fm body #settingsModal #tab-usage > .usage-item + .usage-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: var(--st-divider);
  }
  html.fm body #settingsModal #tab-usage > .usage-divider {
    height: 1px;
    margin: 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 1 !important;
    background: linear-gradient(var(--st-divider), var(--st-divider)) 16px 0 / calc(100% - 32px) 1px no-repeat, var(--st-card) !important;
  }
  html.fm body #settingsModal #tab-usage .usage-item-label {
    grid-area: label;
    width: auto !important;
    min-width: 0;
  }
  html.fm body #settingsModal #tab-usage .usage-item-name {
    font-family: var(--fm-font);
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0;
    color: var(--st-ink) !important;
  }
  html.fm body #settingsModal #tab-usage .usage-item-sub {
    margin-top: 1px;
    font-family: var(--fm-font);
    font-size: 12px !important;
    color: var(--st-muted) !important;
  }
  html.fm body #settingsModal #tab-usage .usage-item-stats {
    grid-area: stats;
    justify-content: flex-end !important;
    width: auto !important;
    min-width: 0 !important;
  }
  html.fm body #settingsModal #tab-usage .usage-percentage {
    font-family: var(--fm-font);
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--st-muted) !important;
  }
  html.fm body #settingsModal #tab-usage .usage-progress {
    grid-area: bar;
    flex: none;
    width: 100% !important;
    height: 6px !important;
    border-radius: 3px !important;
    background: #E5E7EB !important;
  }
  html.fm body.dark #settingsModal #tab-usage .usage-progress {
    background: #374151 !important;
  }
  html.fm body #settingsModal #tab-usage .usage-progress-bar {
    border-radius: 3px !important;
    background: var(--st-blue) !important;
  }

  /* Persona (_PersonaPage): the blurb, each field under a small caps heading
     in a white box, a full-width navy Save, then the saved personas in a box
     of rows. The page's own title is the header's. */
  html.fm body #settingsModal #tab-persona .persona-header .persona-title,
  html.fm body #settingsModal #tab-persona .persona-helper-text,
  html.fm body #settingsModal #tab-persona > hr {
    display: none !important;
  }
  html.fm body #settingsModal #tab-persona > .persona-header {
    margin: 0 !important;
    padding-bottom: 16px !important;
  }
  html.fm body #settingsModal #tab-persona .persona-description {
    margin: 0 !important;
    font-family: var(--fm-font);
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--st-muted) !important;
  }
  html.fm body #settingsModal #tab-persona .persona-field-group {
    margin: 0 0 16px !important;
    padding: 0 !important;
  }
  html.fm body #settingsModal #tab-persona .persona-field-label {
    display: block;
    margin: 0 !important;
    padding: 2px 0 6px 4px !important;
    font-family: var(--fm-font);
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--st-muted) !important;
  }
  html.fm body #settingsModal #tab-persona .choices {
    margin: 0 !important;
  }
  html.fm body #settingsModal #tab-persona .choices__inner,
  html.fm body #settingsModal #tab-persona .persona-textarea {
    min-height: 48px !important;
    padding: 12px 16px !important;
    border: 0 !important;
    border-radius: var(--st-radius) !important;
    background: var(--st-card) !important;
    box-shadow: var(--st-card-edge) !important;
    font-family: var(--fm-font);
    font-size: 15px !important;
    color: var(--st-ink) !important;
  }
  html.fm body #settingsModal #tab-persona .persona-textarea::placeholder {
    font-size: 14px;
    color: var(--st-muted);
  }
  /* A chosen audience: the app's selected chip. */
  html.fm body #settingsModal #tab-persona .choices__list--multiple .choices__item {
    margin: 0 8px 8px 0 !important;
    padding: 7px 12px !important;
    border: 0.8px solid var(--st-blue) !important;
    border-radius: 20px !important;
    background: rgba(27, 145, 248, 0.12) !important;
    font-family: var(--fm-font);
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--st-blue) !important;
  }
  html.fm body #settingsModal #tab-persona .persona-save-btn {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 14px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #0B2F4E !important;
    font-family: var(--fm-font);
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #FFFFFF !important;
  }
  html.fm body.dark #settingsModal #tab-persona .persona-save-btn {
    background: #3B82F6 !important;
  }
  html.fm body #settingsModal #tab-persona .saved-personas-section {
    margin: 0 !important;
    padding-top: 24px !important;
  }
  html.fm body #settingsModal #tab-persona .persona-list {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: var(--st-radius);
    background: var(--st-card);
    box-shadow: var(--st-card-edge);
    list-style: none;
  }
  html.fm body #settingsModal #tab-persona .persona-item {
    position: relative;
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    margin: 0 !important;
    padding: 12px 8px 12px 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  html.fm body #settingsModal #tab-persona .persona-item + .persona-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: var(--st-divider);
  }
  html.fm body #settingsModal #tab-persona .persona-item-content {
    flex: 1 1 auto;
    min-width: 0;
  }
  html.fm body #settingsModal #tab-persona .persona-item-name {
    font-family: var(--fm-font);
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--st-ink) !important;
  }
  html.fm body #settingsModal #tab-persona .persona-item-description {
    margin: 2px 0 0 !important;
    font-family: var(--fm-font);
    font-size: 13px !important;
    color: var(--st-muted) !important;
  }
  html.fm body #settingsModal #tab-persona .persona-item-actions {
    display: flex !important;
    flex: 0 0 auto;
    gap: 0 !important;
  }
  html.fm body #settingsModal #tab-persona .persona-item-actions .btn {
    width: auto !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 500 !important;
  }
  html.fm body #settingsModal #tab-persona .persona-item-actions .btn-outline-secondary {
    color: var(--st-blue) !important;
  }
  html.fm body #settingsModal #tab-persona .persona-item-actions .btn-outline-danger {
    color: var(--st-red) !important;
  }

  /* Voice (voice_settings_page.dart): the voices in one box (orb, name,
     arrows round a filled play, dots, Record), then Model and Language rows
     in a second, both radius 16. The page's own title is the header's. */
  html.fm body #settingsModal #tab-voice > .persona-title {
    display: none !important;
  }
  html.fm body #settingsModal #tab-voice > .vset-carousel,
  html.fm body #settingsModal #tab-voice > .vset-actions,
  html.fm body #settingsModal #tab-voice > .settings-row {
    margin: 0 16px !important;
    background: var(--st-card);
  }
  html.fm body #settingsModal #tab-voice > .vset-carousel {
    margin-top: 8px !important;
    padding: 22px 0 0 !important;
    border-radius: 16px 16px 0 0;
  }
  html.fm body #settingsModal #tab-voice > .vset-actions {
    padding: 18px 16px 22px !important;
    border-radius: 0 0 16px 16px;
  }
  html.fm body #settingsModal #tab-voice .vset-orb {
    margin-bottom: 14px;
  }
  html.fm body #settingsModal #tab-voice .vset-name {
    font-family: var(--fm-font);
    color: var(--st-ink);
  }
  html.fm body #settingsModal #tab-voice .vset-desc {
    font-family: var(--fm-font);
    color: var(--st-muted);
  }
  html.fm body #settingsModal #tab-voice .vset-nav {
    margin-top: 14px;
  }
  html.fm body #settingsModal #tab-voice .vset-arrow {
    margin: 0 !important;
    border: 1px solid #E5E7EB !important;
    color: var(--st-muted) !important;
  }
  html.fm body.dark #settingsModal #tab-voice .vset-arrow {
    border-color: #374151 !important;
  }
  html.fm body #settingsModal #tab-voice .vset-play {
    width: 52px;
    height: 52px;
    margin: 0 !important;
    border: 0 !important;
    background: #1B91F8 !important;
    font-size: 26px;
    color: #FFFFFF !important;
  }
  html.fm body #settingsModal #tab-voice .vset-btn {
    margin: 0 !important;
    border-radius: 10px;
    border-color: rgba(27, 145, 248, 0.45);
  }
  html.fm body #settingsModal #tab-voice > .settings-row {
    position: relative;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 9px 12px 9px 16px !important;
  }
  html.fm body #settingsModal #tab-voice > .settings-row[style] {
    margin-top: 16px !important; /* Model's: the second box starts here */
    border-radius: 16px 16px 0 0;
  }
  html.fm body #settingsModal #tab-voice > .settings-row:last-child {
    margin-bottom: 32px !important;
    border-radius: 0 0 16px 16px;
  }
  html.fm body #settingsModal #tab-voice > .settings-row + .settings-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: var(--st-divider);
  }
  html.fm body #settingsModal #tab-voice .settings-row-label {
    width: auto !important;
    font-family: var(--fm-font);
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--st-ink) !important;
  }
  html.fm body #settingsModal #tab-voice .vset-dd-btn {
    margin: 0 !important;
    font-family: var(--fm-font);
    font-size: 14px;
    color: var(--st-muted);
  }
  html.fm.fm-ios body #settingsModal #tab-voice > .vset-carousel {
    border-radius: 22px 22px 0 0;
  }
  html.fm.fm-ios body #settingsModal #tab-voice > .vset-actions,
  html.fm.fm-ios body #settingsModal #tab-voice > .settings-row:last-child {
    border-radius: 0 0 22px 22px;
  }
  html.fm.fm-ios body #settingsModal #tab-voice > .settings-row[style] {
    border-radius: 22px 22px 0 0;
  }

  /* Billing (_SubscriptionPage): the plan and its history as white boxes,
     the way to a plan a full-width navy button. The page's title is the
     header's. */
  html.fm body #settingsModal #tab-subscriptions .subscription-page-title {
    display: none !important;
  }
  html.fm body #settingsModal #tab-subscriptions .subscription-card,
  html.fm body #settingsModal #tab-subscriptions .auto-renew-card {
    margin: 0 0 16px !important;
    padding: 16px !important;
    border: 0 !important;
    border-radius: var(--st-radius) !important;
    background: var(--st-card) !important;
    box-shadow: var(--st-card-edge) !important;
  }
  html.fm body #settingsModal #tab-subscriptions .btn-upgrade {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 48px;
    margin: -4px 0 16px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #0B2F4E !important;
    font-family: var(--fm-font);
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #FFFFFF !important;
    text-decoration: none;
  }
  html.fm body.dark #settingsModal #tab-subscriptions .btn-upgrade {
    background: #3B82F6 !important;
  }

  /* ── Meeting History (transcription_history_screen.dart) ─────────────────── */
  /* As the other meeting tools: grey-blue page, title in the header line, its
     links as small outlined buttons; search and sort share one row. */
  html.fm body:not(.dark):has(.hx-page) {
    --fm-bg: #F0F4F9;
  }
  html.fm body .hx-page {
    padding: 8px 12px calc(24px + env(safe-area-inset-bottom, 0px));
    background: transparent;
  }
  html.fm body .hx-page > .topbar {
    margin: 0 0 12px;
    padding: 0;
    min-height: 0;
  }
  html.fm body .hx-page > .topbar .topbar-left {
    display: contents;
  }
  html.fm body .hx-page > .topbar .page-title {
    position: fixed;
    z-index: 998;
    top: env(safe-area-inset-top, 0px);
    left: 50px;
    right: 16px;
    height: 45px;
    margin: 0;
    font-family: var(--fm-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 45px;
    color: var(--fm-title);
  }
  html.fm body .hx-page > .topbar .topbar-right a {
    height: 32px;
    padding: 0 12px;
    border: 0.8px solid var(--fm-outline);
    border-radius: 8px;
    background: transparent;
    font-family: var(--fm-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--fm-navy);
  }
  html.fm body.dark .hx-page > .topbar .topbar-right a {
    background: transparent !important;
    color: var(--fm-navy) !important;
  }
  html.fm body .hx-page #hxSearchForm {
    display: flex;
    align-items: stretch;
    gap: 8px;
  }
  html.fm body .hx-page #hxSearchForm {
    margin-bottom: 12px;
  }
  html.fm body .hx-page .hx-search-wrapper {
    flex: 1 1 0;
    min-width: 0;
    height: 44px;
    margin: 0;
    border-radius: 12px;
  }
  html.fm body .hx-page .hx-controls-row {
    flex: 0 0 auto;
    align-items: stretch;
    margin: 0;
  }
  html.fm body .hx-page .hx-search-tip,
  html.fm body .hx-page .hx-sort-label {
    display: none;
  }
  html.fm body .hx-page .hx-sort-container .furobox-select,
  html.fm body .hx-page .hx-sort-container .furobox-select > button {
    height: 44px;
    border-radius: 12px;
    font-size: 13px;
  }

  /* ── Help (help_center_screen.dart): 26px heading, no desktop air above ──── */
  html.fm body .help-center-container {
    padding-top: 12px;
  }
  html.fm body .help-center-container .help-header {
    margin-bottom: 28px;
  }
  html.fm body .help-center-container .help-header h1 {
    font-family: var(--fm-font);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.3px;
  }

  /* ── Plans (plans_screen.dart): #F9FAFB page, 22px heading, radius-14 cards ─ */
  html.fm body:not(.dark):has(.plans-header) {
    --fm-bg: #F9FAFB;
  }
  html.fm body .main-box:has(.plans-header) {
    margin-top: 0;
  }
  html.fm body .plans-header {
    margin: 8px 0 16px;
  }
  html.fm body .plans-header .plans-title {
    font-family: var(--fm-font);
    font-size: 22px;
    font-weight: 700;
  }
  html.fm body .plans-header .plans-subtitle {
    font-size: 13px;
  }
  /* One card per row, as the app stacks them. plans.css drops to one column
     on phones, but its two-column rule for accounts that have paid (the Go
     card hidden, .plan-cards-3) outranks that, so they got two squeezed cards
     with the price wrapping and the badge cut off. */
  html.fm body .plan-cards-container,
  html.fm body .plan-cards-container.plan-cards-3 {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: none;
  }
  html.fm body .plan-card-horizontal {
    border-radius: 14px;
    padding: 20px;
  }
  /* An outlined pill on one line (it broke over two), inside the card's
     corner rather than on its edge. plans.css also pins it at left: 77% on
     phones, which with right: 14 stretched the pill and left its words
     against one end; and as a block its line box sat them off centre. */
  html.fm body .plan-card-horizontal .most-popular-badge {
    top: 14px;
    right: 14px;
    left: auto;
    transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 0;
    padding: 4px 10px;
    border-radius: 20px;
    line-height: 1.2;
    white-space: nowrap;
    font-weight: 600;
  }

  /* ════════════════════════════════════════════════════════════════════════════
     iOS: Liquid Glass (liquid_glass.dart), for what floats. The page itself
     stays flat; the composer, menus, sheets, toasts and drawer turn to frosted
     panes with the app's larger radii, and text is 10% larger.
     ══════════════════════════════════════════════════════════════════════════ */
  html.fm.fm-ios body {
    --fm-glass-fill: rgba(250, 250, 250, 0.72);
    --fm-glass-heavy: rgba(255, 255, 255, 0.80);
    --fm-glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.76);
    --fm-glass-shadow: 0 3px 16px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.03);
  }
  html.fm.fm-ios body.dark {
    --fm-glass-fill: rgba(48, 48, 48, 0.66);
    --fm-glass-heavy: rgba(28, 28, 30, 0.69);
    --fm-glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(255, 255, 255, 0.19);
    --fm-glass-shadow: 0 3px 16px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.20);
  }
  html.fm.fm-ios body .bubble.bubble-furobox .md,
  html.fm.fm-ios body .bubble.bubble-furobox .md p,
  html.fm.fm-ios body .bubble.bubble-furobox .md li,
  html.fm.fm-ios body .message.user .bubble.user-bubble {
    font-size: 16.5px;
  }
  /* Composers: radius 26, a light frosted fill with the top highlight. Only
     the chat one blurs, for the messages passing under it. backdrop-filter
     makes an element the containing block of its position: fixed children,
     and model_dropdown.js places the home model menu in screen coordinates,
     so on the home composer it opened 400px lower, off the screen; the page
     behind that composer is plain, so it loses nothing without the blur. */
  html.fm.fm-ios body .hero-container .search-bar,
  html.fm.fm-ios body #chatForm.furo-input-bar {
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.24)), var(--fm-glass-fill);
    box-shadow: var(--fm-glass-rim), var(--fm-glass-shadow);
  }
  html.fm.fm-ios body #chatForm.furo-input-bar {
    -webkit-backdrop-filter: saturate(180%) blur(3px);
    backdrop-filter: saturate(180%) blur(3px);
  }
  html.fm.fm-ios body.dark .hero-container .search-bar,
  html.fm.fm-ios body.dark #chatForm.furo-input-bar {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), transparent 5px), var(--fm-glass-fill);
  }
  /* The chat composer floats over the messages instead of sitting on a strip;
     the strip is solid only under it, where the disclaimer line is, which the
     messages scrolled straight through. */
  html.fm.fm-ios body #composer.input-container {
    background: linear-gradient(to top, var(--fm-bg) 0, var(--fm-bg) calc(30px + env(safe-area-inset-bottom, 0px)), transparent calc(64px + env(safe-area-inset-bottom, 0px)));
  }
  html.fm.fm-ios body #sendBtn.icon-btn1,
  html.fm.fm-ios body .furo-input-bar .furo-icon-btn-primary {
    border-radius: 10px;
  }
  /* Drawer: heavy glass, right corners 28, no shadow. */
  html.fm.fm-ios body #sidebar.sidebar.expanded {
    border-radius: 0 28px 28px 0;
    background: var(--fm-glass-heavy);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    box-shadow: none;
  }
  html.fm.fm-ios body #sidebar .sidebar-inner:not(:has(#guestLoginBtn)) #newChatBtn {
    border: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.24)), var(--fm-glass-fill);
    box-shadow: var(--fm-glass-rim), var(--fm-glass-shadow);
  }
  html.fm.fm-ios body.dark #sidebar .sidebar-inner:not(:has(#guestLoginBtn)) #newChatBtn {
    border: 0 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), transparent 5px), var(--fm-glass-fill);
  }
  html.fm.fm-ios body #sidebar .sidebar-inner:has(#newChatBtn):not(:has(#guestLoginBtn))::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7));
  }
  html.fm.fm-ios body.dark #sidebar .sidebar-inner:has(#newChatBtn):not(:has(#guestLoginBtn))::after {
    background: linear-gradient(to bottom, rgba(28, 28, 30, 0), rgba(28, 28, 30, 0.7));
  }
  /* Menus radius 26, sheets 34, toasts 24: all heavy glass. */
  html.fm.fm-ios body .dropdown-menu {
    border-radius: 26px;
    border: 0;
    background: var(--fm-glass-heavy);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: var(--fm-glass-rim);
    padding: 6px;
  }
  html.fm.fm-ios body .dropdown-menu .dropdown-item {
    border-radius: 12px;
    padding: 12px;
  }
  html.fm.fm-ios body .modal-dialog .modal-content {
    border-radius: 34px 34px 0 0;
    background: var(--fm-glass-heavy);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
  html.fm.fm-ios body .modal-backdrop.show {
    background: rgba(0, 0, 0, 0.20);
  }
  html.fm.fm-ios body #toast-container .toast {
    border-radius: 24px;
    background: var(--fm-glass-heavy);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    box-shadow: var(--fm-glass-rim), var(--fm-glass-shadow);
  }
  html.fm.fm-ios body .furobox-toast {
    border-radius: 24px;
    background: var(--fm-glass-heavy) !important;
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    box-shadow: var(--fm-glass-rim), var(--fm-glass-shadow) !important;
  }
  html.fm.fm-ios body .all-tools-container .tools-grid {
    border-radius: 22px;
  }
}