/* Desktop layout layer (dt-r4; dt-r1 + current-page marker, Home row tops, wide admin screens, dt-r3 rounds, dt-r4 sign-in gate) — LAYOUT ONLY.
   Loaded with media="(min-width: 1024px)" and wrapped in the same media query, so below 1024px the browser
   never applies a single rule from this file: the phone app is unchanged. Nothing here restyles a component -
   no colour, font, radius, shadow or spacing token of the app is changed; rules only position, size and
   arrange what already exists. The few desktop-only elements (sidebar "App" section, Master Assistant tool
   rail) are built by js/desktop-shell.v1.js out of the app's own markup and classes.
   Layout rules (claude/desktop-view-recommendation.md):
     sidebar 272px, always open | content max 1200px, centred, 32px side padding
     single column: Companion thread 760px; News / Notices, forms, Learning Hub quiz, calculation inputs 720px */
@media (min-width: 1024px) {
  :root {
    --sc-dt-side: 272px;
    --sc-dt-max: 1200px;
    --sc-dt-pad: 32px;
    --sc-dt-narrow: 720px;
    --sc-dt-thread: 760px;
    --sc-dt-rail: 380px;
  }

  /* ---------- 1. Sidebar: the existing side menu, permanently open ---------- */
  .side-menu-overlay,
  .side-menu-overlay.open {
    display: block !important;
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: var(--sc-dt-side) !important;
    height: 100vh !important;
    min-height: 100vh !important;
    background: transparent !important;
    z-index: 295 !important;            /* below full-window popups (modal-overlay 390), beside every page */
    touch-action: auto !important;
    pointer-events: auto !important;
  }
  .side-menu-overlay .side-menu {
    transform: none !important;
    transition: none !important;
    left: 0 !important;
    width: var(--sc-dt-side) !important;
    max-width: none !important;
  }
  /* the open assistant hides every other page-level element on the phone (styles r42 "Avoid iOS compositing
     surprises"); on desktop the sidebar stays. Selector outranks that rule's two :not(#id). */
  body.ai-chat-open > #side-menu-overlay:not(#sc-dt-x):not(#sc-dt-y) { visibility: visible !important; pointer-events: auto !important; }
  /* the phone's background lock never applies: the sidebar is not a drawer here */
  html.side-menu-open, body.side-menu-open { overflow: visible !important; }

  /* the sidebar's "App" section (built by desktop-shell from the bottom tabs + the AI button) */
  .sc-dt-app[hidden], .sc-dt-menu-head[hidden] { display: block !important; }
  .sc-dt-app .side-menu-item .sc-dt-ic {
    width: 30px; height: 30px; flex: 0 0 30px;
    display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  }
  .sc-dt-app .sc-dt-ic svg, .sc-dt-app .sc-dt-ic img { width: 26px; height: 26px; object-fit: contain; }
  .sc-dt-app .sc-dt-ic.sc-dt-ic-round img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
  /* current page: the app's own selected-navigation look (.notification-subtab.active, styles r42) */
  .side-menu .side-menu-item.sc-dt-current,
  .side-menu .side-menu-profile.sc-dt-current { color: var(--brass-light) !important; background: var(--well-bg) !important; }

  /* ---------- 2. Phone navigation that does not exist on desktop ---------- */
  .bottom-dock-cluster,
  #ai-fab-wrap,
  header#app-header .menu-btn,
  #sc-pull-refresh-indicator { display: none !important; }

  /* floating controls that sit at the left edge on the phone move into the content area (no tab bar to clear) */
  .sc-unit-fab-wrap { left: calc(var(--sc-dt-side) + 15.5px) !important; bottom: 24px !important; }

  /* ---------- 3. Top bar + main tab content beside the sidebar ---------- */
  /* the header is sticky in the page flow (not fixed), so it moves by margin */
  header#app-header { margin-left: var(--sc-dt-side) !important; width: calc(100% - var(--sc-dt-side)) !important; max-width: none !important; box-sizing: border-box !important; }
  main.scroll-content {
    margin-left: var(--sc-dt-side) !important;
    width: calc(100% - var(--sc-dt-side)) !important;
    padding-bottom: 40px !important;    /* no floating tab bar to clear */
  }
  main.scroll-content > .tab-panel {
    max-width: var(--sc-dt-max);
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--sc-dt-pad) !important;
    padding-right: var(--sc-dt-pad) !important;
    box-sizing: border-box;
  }

  /* ---------- 4. Every full-window page opens beside the sidebar ---------- */
  .detail-view,
  .ai-chat-view,
  .home-weather-detail-view,
  #laiw {
    left: var(--sc-dt-side) !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
  /* centred content column for every page (default) */
  .detail-view > .detail-body,
  .detail-view > .detail-view-body {
    width: 100% !important;
    max-width: var(--sc-dt-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--sc-dt-pad) !important;
    padding-right: var(--sc-dt-pad) !important;
    box-sizing: border-box !important;
  }

  /* full-window panels built outside .detail-view (General Management, owner Post pages) */
  #sc-admin-panel,
  #sc-post-panel, #sc-post-compose-panel, #sc-post-detail-panel {
    left: var(--sc-dt-side) !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
  #sc-admin-panel > .detail-header,
  #sc-post-panel > .detail-header, #sc-post-compose-panel > .detail-header, #sc-post-detail-panel > .detail-header {
    left: var(--sc-dt-side) !important;
    right: 0 !important;
    width: auto !important;
  }
  /* wide-table admin screens: the whole width beside the sidebar instead of the 1200px column */
  #sc-admin-panel .sc-admin-card {
    width: 100% !important;
    max-width: none !important;
    padding-left: var(--sc-dt-pad) !important;
    padding-right: var(--sc-dt-pad) !important;
    box-sizing: border-box !important;
  }
  #sc-admin-panel .sc-admin-card,
  #sc-admin-panel [id^="sc-admin-panel-"],
  #sc-admin-list, #sc-admin-list .sc-mt { min-width: 0 !important; max-width: 100% !important; }
  /* dt-r3: the GM tab row wraps onto a second line instead of scrolling sideways, so every tab (Backgrounds at the end
     included) is always on screen and clickable with a mouse; the phone keeps its swipeable single row */
  #sc-admin-panel .sc-admin-tabs { margin-left: 0 !important; margin-right: 0 !important; }
  #sc-admin-panel .sc-admin-tabs-scroll {
    flex-wrap: wrap !important; overflow: visible !important; padding-left: 0 !important; padding-right: 0 !important;
    -webkit-mask-image: none !important; mask-image: none !important; row-gap: 8px !important;
  }
  /* dt-r3: the card fills the window below the header exactly (it was a full window tall under a 64px header, so the
     panel itself scrolled and the tab row slid up behind the header title); the card's own scroll is unchanged */
  #sc-admin-panel .sc-admin-card { min-height: 0 !important; height: calc(100% - 64px) !important; max-height: calc(100% - 64px) !important; }
  /* the member table scrolls sideways inside its frame, with a visible scrollbar, never cut off */
  #sc-admin-list .sc-mt-frame,
  #sc-admin-panel .sc-admin-table-scroll {
    max-width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: thin !important;
  }
  #sc-admin-list .sc-mt-frame::-webkit-scrollbar,
  #sc-admin-panel .sc-admin-table-scroll::-webkit-scrollbar { display: block !important; height: 10px !important; }

  /* ---------- 5. Single-column screens (720px) ---------- */
  #side-news-view > .detail-body,
  #side-posts-view > .detail-body,
  #cert-view > .detail-body,
  #ship-detail-view > .detail-body,
  #learning-hub-view > .detail-body:has(.learning-quiz-progress, .learning-quiz-options, .learning-quiz-result, .learning-quiz-review-list),
  #hydro-view > .detail-body, #draftmark-view > .detail-body, #trim-view > .detail-body,
  #truewind-view > .detail-body, #trial-maneuver-view > .detail-body, #squat-table-view > .detail-body,
  #cable-scope-view > .detail-body, #cargo-view > .detail-body, #deadweight-view > .detail-body,
  #draft-survey-view > .detail-body, #ds-setup-view > .detail-body, #cargo-trim-view > .detail-body,
  #sounding-view > .detail-body, #sounding-ship-detail-view > .detail-body, #sounding-calc-view > .detail-body,
  #aftdraft-view > .detail-body, #celestial-view > .detail-body, #voyage-hub-view > .detail-body,
  #voyage-view > .detail-body, #etaspeed-view > .detail-body {
    max-width: calc(var(--sc-dt-narrow) + 2 * var(--sc-dt-pad)) !important;
  }

  /* ---------- 6. HOME: 12-column card grid ---------- */
  #home-dashboard {
    max-width: none !important;
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-auto-flow: row dense;
    align-items: start;
    gap: 16px !important;
  }
  #home-dashboard > * {
    grid-column: 1 / -1;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* half-width pairs; dense flow closes the gap when a card is not shown (no weather, no active ship) */
  #home-dashboard > .home-summary-carousel,
  #home-dashboard > .home-weather-card,
  #home-dashboard > .home-career-card,
  #home-dashboard > .home-active-ship-section { grid-column: span 6; }
  #home-dashboard > .home-live-gps-card { grid-column: 1 / -1; }
  /* dt-r10: the Life at Sea / Active Ship pair is one size - both items stretch to the row height (the taller
     card sets it) and the ship card button fills its section, so the two cards match exactly. */
  #home-dashboard > .home-career-card,
  #home-dashboard > .home-active-ship-section { align-self: stretch; }
  #home-dashboard > .home-active-ship-section > .home-active-ship-card { height: 100%; }
  /* cards in one row share one top edge: the phone's stacking margins (e.g. the weather card's 14px) do not apply
     inside the grid. The summary carousel keeps its own negative margins - they cancel its slides' 28px shadow
     room, so its visible card already sits on the row line. */
  #home-dashboard > *:not(.home-summary-carousel) { margin-top: 0 !important; margin-bottom: 0 !important; }
  /* dt-r3: the summary carousel's slides drop their 32px side padding (the phone's room around the card), so the
     visible card is exactly as wide as the half-width card below it and the carousel stays inside its own cell */
  #home-dashboard > .home-summary-carousel .home-summary-carousel-slide { padding-left: 0 !important; padding-right: 0 !important; }
  #home-dashboard > .sc-skeleton-home { grid-column: 1 / -1; }

  /* ---------- 7. PROFILE: two columns (desktop-shell groups the existing cards) ---------- */
  #profile-view > #profile-view-body.sc-dt-2col {
    width: 100% !important;
    max-width: var(--sc-dt-max) !important;
    padding-left: var(--sc-dt-pad) !important;
    padding-right: var(--sc-dt-pad) !important;
    box-sizing: border-box !important;
  }
  #profile-view-body.sc-dt-2col {
    display: grid !important;
    grid-template-columns: 380px minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
  }
  #profile-view-body.sc-dt-2col > .sc-dt-col { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
  #profile-view-body.sc-dt-2col > .sc-dt-col-l { position: sticky; top: 16px; }
  #profile-view-body.sc-dt-2col .profile-view-header,
  #profile-view-body.sc-dt-2col .profile-tutor-card { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }
  #profile-view-body.sc-dt-2col .scmc-scene { max-width: 100% !important; }

  /* ---------- 8. MARITIME COMPANION: history list + wide chat ---------- */
  .ai-chat-view { padding-left: 300px !important; box-sizing: border-box !important; }
  .ai-chat-view > .ai-chat-header { left: 300px !important; }
  #ai-chat-history-panel,
  #ai-chat-history-panel[hidden] {
    display: flex !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 300px !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    border-right: 1px solid var(--navy-line);
  }
  #ai-chat-history-btn, #ai-chat-history-close { display: none !important; }
  #ai-chat-messages {
    padding-left: max(16px, calc((100% - var(--sc-dt-thread)) / 2)) !important;
    padding-right: max(16px, calc((100% - var(--sc-dt-thread)) / 2)) !important;
  }
  #ai-chat-chips,
  .ai-chat-view .ai-chat-inputbar,
  .ai-chat-view .ai-chat-composer-status,
  .ai-chat-view .ai-chat-attachment-preview {
    width: calc(100% - 24px) !important;
    max-width: var(--sc-dt-thread) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* ---------- 9. MASTER ASSISTANT: hub list alone = one column; with a tool open = list left, tool right ---------- */
  #master-assistant-view > .detail-body { max-width: calc(var(--sc-dt-narrow) + 2 * var(--sc-dt-pad)) !important; }
  /* with a tool open the hub stays on screen as the list (it is closed by the tool; shown here, not re-opened) */
  html.sc-dt-ma-split #master-assistant-view {
    display: flex !important;
    right: auto !important;
    width: var(--sc-dt-rail) !important;
    z-index: 299 !important;
    border-right: 1px solid var(--navy-line);
  }
  html.sc-dt-ma-split #master-assistant-view > .detail-body { max-width: none !important; padding-left: 18px !important; padding-right: 18px !important; }
  html.sc-dt-ma-split #master-assistant-view #master-assistant-back-btn,
  html.sc-dt-ma-split #master-assistant-view .detail-header-actions { visibility: hidden !important; }
  html.sc-dt-ma-split #master-assistant-view .ma-item.sc-dt-current { outline: 2px solid var(--brass); outline-offset: -2px; }
  html.sc-dt-ma-split .detail-view.open:not(#master-assistant-view),
  html.sc-dt-ma-split #laiw {
    left: calc(var(--sc-dt-side) + var(--sc-dt-rail)) !important;
  }

  /* ---------- 10. SHOPPING: horizontal filter bar above full-width content (dt-r3) ---------- */
  #shop-scroll {
    padding-left: max(var(--sc-dt-pad), calc((100% - var(--sc-dt-max)) / 2 + var(--sc-dt-pad))) !important;
    padding-right: max(var(--sc-dt-pad), calc((100% - var(--sc-dt-max)) / 2 + var(--sc-dt-pad))) !important;
    box-sizing: border-box !important;
  }
  /* the Region / Category pills sit side by side in one bar at a natural width; the content below gets the full width */
  #shop-stickyhead .shop-selectrow { flex-direction: row !important; align-items: stretch !important; gap: 12px !important; padding-left: 0 !important; padding-right: 0 !important; }
  #shop-stickyhead .shop-pillselect.region { flex: 0 0 260px !important; }
  #shop-stickyhead .shop-pillselect.filter { flex: 0 0 320px !important; }
  #shop-content .shop-slogan { margin-left: 0 !important; margin-right: 0 !important; }
  #shop-content .shop-catgrid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; padding-left: 0 !important; padding-right: 0 !important; }
  #shop-content .shop-companies {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    align-items: stretch;
  }
  #shop-content .shop-companies { padding-left: 0 !important; padding-right: 0 !important; }
  #shop-content .shop-companies > .shop-sechead { grid-column: 1 / -1; }
  #shop-content .shop-companies > .shop-company { margin: 0 !important; }
  #shop-content .shop-sechead, #shop-content .shop-hrow { padding-left: 0 !important; padding-right: 0 !important; }

  /* ---------- 11. LEARNING HUB (dt-r3): the hub uses the 1200px column ----------
     The phone's 760px shell is widened only for the hub home, the course page and the course journey (lessons open
     there). The quiz keeps its 720px reading column (section 5) and the tutor tools keep their own layout. */
  #learning-hub-view .learning-hub-shell.lh-home-shell,
  #learning-hub-view .learning-hub-shell.lh-journey,
  #learning-hub-view .learning-hub-shell:has(> .learning-hub-lesson-list),
  #learning-hub-view .learning-hub-shell:has(> .lh-flat-list) { width: 100% !important; max-width: none !important; }

  /* hub home: progress summary and knowledge-test card side by side, then the toolbar and the course lists */
  #learning-hub-view .lh-home-shell {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    align-items: start;
  }
  #learning-hub-view .lh-home-shell > * { grid-column: 1 / -1; min-width: 0; }
  #learning-hub-view .lh-home-shell > .lps-card { grid-column: 1; align-self: stretch; margin-top: 0 !important; }
  #learning-hub-view .lh-home-shell > .lps-card + .kt-card { grid-column: 2; align-self: stretch; margin-top: 0 !important; }
  /* course lists (home departments, department and category pages): cards in columns */
  #learning-hub-view .lh-flat-list { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important; gap: 12px 16px !important; align-items: stretch; }
  #learning-hub-view .lh-flat-list > * { min-width: 0; }

  /* course page: course details on the left, the lesson list beside them */
  #learning-hub-view .learning-hub-shell:has(> .learning-hub-lesson-list) {
    display: grid !important;
    grid-template-columns: 380px minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: 32px;
    align-items: start;
  }
  #learning-hub-view .learning-hub-shell:has(> .learning-hub-lesson-list) > * { grid-column: 1; min-width: 0; }
  #learning-hub-view .learning-hub-shell:has(> .learning-hub-lesson-list) > .learning-hub-section-heading { grid-column: 2; grid-row: 1; margin-top: 0 !important; }
  #learning-hub-view .learning-hub-shell:has(> .learning-hub-lesson-list) > .learning-hub-lesson-list { grid-column: 2; grid-row: 1 / -1; margin-top: 32px !important; }
  #learning-hub-view .learning-hub-shell:has(> .learning-hub-lesson-list) > .learning-hub-lesson-list ~ * { grid-column: 2; }

  /* course journey (every lesson opens here): the header and progress wave across the top, then two columns -
     Slides and Videos on the left, Quiz and Rewards on the right */
  #learning-hub-view .lh-journey { columns: 2; column-gap: 24px; }
  #learning-hub-view .lh-journey > :not(.lh-jr-card) { column-span: all; }
  #learning-hub-view .lh-journey > .lh-jr-card { break-inside: avoid; display: block; width: 100%; box-sizing: border-box; margin: 0 0 10px !important; }
  #learning-hub-view .lh-journey > .lh-journey-wave { margin-bottom: 28px !important; }
  #learning-hub-view .lh-journey > [data-jr-cardwrap="slides"] ~ [data-jr-cardwrap="quiz"],
  #learning-hub-view .lh-journey > [data-jr-cardwrap="videos"] ~ [data-jr-cardwrap="quiz"] { break-before: column; }

  /* ---------- 12. SIGN-UP FORM (dt-r3): the account form uses the wide screen ----------
     Sign-up mode only (the confirm-password field is showing); sign-in keeps its centred column. The card becomes two
     columns - brand, title and introduction on the left, the form beside them - and in the form Rank and Country sit
     side by side. Same fields, same order, same validation: only their placement changes. */
  #sc-auth-gate:has(#sc-auth-password-confirm-field:not([hidden])) > #sc-signin-card:not([hidden]) {
    width: min(1040px, calc(100% - 64px)) !important;
    max-width: none !important;
    margin: auto !important;
    display: grid !important;
    grid-template-columns: 340px minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: 64px;
    align-items: start;
    box-sizing: border-box !important;
  }
  #sc-auth-gate:has(#sc-auth-password-confirm-field:not([hidden])) > #sc-signin-card > * { grid-column: 1; min-width: 0; }
  #sc-auth-gate:has(#sc-auth-password-confirm-field:not([hidden])) > #sc-signin-card > #sc-auth-form { grid-column: 2; grid-row: 1 / 5; }
  #sc-auth-gate:has(#sc-auth-password-confirm-field:not([hidden])) > #sc-signin-card > .sc-auth-divider { grid-column: 2; grid-row: 5; }
  #sc-auth-gate:has(#sc-auth-password-confirm-field:not([hidden])) > #sc-signin-card > #sc-auth-google { grid-column: 2; grid-row: 6; }
  #sc-auth-gate:has(#sc-auth-password-confirm-field:not([hidden])) > #sc-signin-card > #sc-auth-switch { grid-column: 2; grid-row: 7; }
  #sc-auth-gate:has(#sc-auth-password-confirm-field:not([hidden])) #sc-auth-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    align-items: end;
  }
  #sc-auth-gate:has(#sc-auth-password-confirm-field:not([hidden])) #sc-auth-form > * { grid-column: 1 / -1; min-width: 0; }
  #sc-auth-gate:has(#sc-auth-password-confirm-field:not([hidden])) #sc-auth-form > #sc-auth-rank-field { grid-column: 1; }
  #sc-auth-gate:has(#sc-auth-password-confirm-field:not([hidden])) #sc-auth-form > #sc-auth-country-field { grid-column: 2; }

  /* ---------- 13. SIGN-IN GATE (dt-r4, card design dt-r6): welcome-style presentation ----------
     Sign-in mode only (the confirm-password field is hidden) while the sign-in card is the gate's visible card:
     the gate becomes a centred row - the welcome branding card (built by the shell as .sc-dt-auth-panel:
     the welcome page's hero words plus its feature list, on a white card, as in Claude's dt-r3 design) on the
     left, the existing sign-in card on the right, over the gate's own sea background. The white card reads the
     same in both themes. The forgot / reset cards and the sign-up layout (section 12) are untouched, and the
     panel is display:none everywhere else, so nothing changes outside this one state. */
  #sc-auth-gate:has(> #sc-signin-card:not([hidden])):has(#sc-auth-password-confirm-field[hidden]) {
    align-items: center;
    justify-content: center;
    column-gap: 56px;
  }
  #sc-auth-gate:has(> #sc-signin-card:not([hidden])):has(#sc-auth-password-confirm-field[hidden]) > #sc-signin-card {
    margin: 0;
    flex: 0 0 auto;
  }
  #sc-auth-gate:has(> #sc-signin-card:not([hidden])):has(#sc-auth-password-confirm-field[hidden]) > .sc-dt-auth-panel {
    display: block !important;
    flex: 0 1 560px;
    min-width: 0;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 22px 56px rgba(0, 0, 0, .28);
    padding: 30px 32px 24px;
    color: #0d2f47;
    text-align: left;
  }
  .sc-dt-auth-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; }
  .sc-dt-auth-brand img { display: block; width: 34px; height: 34px; border-radius: 9px; }
  .sc-dt-auth-brand span { font-size: 13px; font-weight: 800; letter-spacing: .14em; color: #0B121E; }
  .sc-dt-auth-kicker { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: 2.5px; color: #2AABEE; }
  .sc-dt-auth-head { margin: 0 0 14px; font-family: 'Spectral', serif; font-size: 33px; font-weight: 600; line-height: 1.22; letter-spacing: -0.5px; color: #0B121E; }
  .sc-dt-auth-sub { margin: 0 0 22px; font-size: 14.5px; line-height: 1.55; color: #46647a; }
  .sc-dt-auth-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin: 0 0 20px; }
  .sc-dt-auth-feature { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
  .sc-dt-auth-feature img { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: #eef6fb; object-fit: cover; }
  .sc-dt-auth-feature strong { display: block; font-size: 13px; font-weight: 700; color: #0B121E; }
  .sc-dt-auth-feature span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: #5b7a90; }
  .sc-dt-auth-strip { margin: 0; padding-top: 14px; border-top: 1px solid #e3eef5; font-size: 12.5px; color: #46647a; }

  /* ---------- 14. LOADING AI WORKSPACE (dt-r11): the workspace uses the desktop width ----------
     The workspace's screens wrap their content in .inner, capped at 560px for the phone, so on desktop the
     whole tool sat in one narrow column and the particulars strip scrolled sideways. The viewing and
     planning screens now take the standard content width and the step forms keep a form measure; the
     particulars strip fits on one row (tiles share it evenly) and the work screen's step tiles go three
     across. The phone keeps the workspace's own layout untouched. */
  #laiw-scr-work .inner, #laiw-scr-result .inner, #laiw-scr-detail .inner, #laiw-scr-pre .inner,
  #laiw-scr-dw .inner, #laiw-scr-summary .inner, #laiw-scr-survey .inner, #laiw-scr-list .inner,
  #laiw-scr-data .inner, #laiw-scr-datasec .inner, #laiw-scr-section .inner { max-width: var(--sc-dt-max) !important; }
  #laiw-scr-form .inner, #laiw-scr-setup .inner, #laiw-scr-voyage .inner, #laiw-scr-help .inner { max-width: 720px !important; }
  #laiw .lh-stats { overflow-x: visible !important; flex-wrap: wrap; }
  #laiw .lh-stat { flex: 1 1 140px !important; }
  #laiw-scr-work .lh-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  /* ---------- 15. MASTER ASSISTANT ICON RAIL + LOADING AI STATUS RAIL (dt-r12) ----------
     With a tool open, the hub list narrows to an icon rail: only the tools' logos stay (names ride on the
     hover title the shell sets), so the workspace gets the width. The Loading AI status rail is pinned
     open on desktop (the shell keeps its .open class): its backdrop never shows, and the work column
     shifts right to clear the open rail instead of being covered by it. */
  html.sc-dt-ma-split { --sc-dt-rail: 84px; }
  html.sc-dt-ma-split #master-assistant-view .detail-header { display: none !important; }
  html.sc-dt-ma-split #master-assistant-view > .detail-body { padding-top: 16px !important; padding-left: 10px !important; padding-right: 10px !important; }
  html.sc-dt-ma-split #master-assistant-view .ma-item { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; }
  html.sc-dt-ma-split #master-assistant-view .ma-item > *:not(.ma-thumb) { display: none !important; }
  html.sc-dt-ma-split #master-assistant-view .ma-soon,
  html.sc-dt-ma-split #master-assistant-view .ma-locked { display: none !important; }
  #laiw-rail-bg { display: none !important; }
  #laiw:has(> #laiw-rail.open) .laiw-work-main { margin-left: 240px !important; }
}