/* Lovix v162 · Mobile white-screen + Mac compact-desktop layout safety layer.
   Loaded last; scoped to mobile and MacBook-width breakpoints to avoid changing the stable 1920px Windows desktop. */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
html,body,#root{
  min-width:0;
}
body{
  overflow-x:hidden;
}
#lovix-boot-fallback{
  position:fixed;
  inset:0;
  z-index:2147483646;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:linear-gradient(180deg,#fbfbf7 0%,#f5f6ef 100%);
  font-family:"Microsoft YaHei","PingFang SC","Inter","Helvetica Neue",Arial,sans-serif;
  color:#111311;
}
#lovix-boot-fallback .lv162-fallback-card{
  width:min(420px,100%);
  border:1px solid rgba(18,20,17,.08);
  border-radius:28px;
  background:#fff;
  box-shadow:0 24px 80px rgba(18,24,17,.10);
  padding:28px;
  text-align:left;
}
#lovix-boot-fallback .lv162-fallback-mark{
  width:40px;
  height:40px;
  border-radius:14px;
  background:#111311;
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:800;
  margin-bottom:18px;
}
#lovix-boot-fallback h1{margin:0;font-size:20px;line-height:1.25;letter-spacing:-.03em;}
#lovix-boot-fallback p{margin:12px 0 0;font-size:13px;line-height:1.8;color:#6f7667;}
#lovix-boot-fallback .lv162-fallback-actions{display:flex;gap:10px;margin-top:20px;}
#lovix-boot-fallback button{height:42px;border-radius:15px;border:1px solid #E6E6E6;background:#fff;padding:0 14px;font-size:13px;font-weight:700;color:#171717;}
#lovix-boot-fallback button:first-child{background:#111311;color:#fff;border-color:#111311;}

/* MacBook / Safari compact desktop: reduce the huge desktop gutter and prevent fixed-width panels from overflowing.
   This targets common Mac CSS widths (1280/1440/1512) but leaves 1600/1920 Windows unchanged. */
@media (min-width:861px) and (max-width:1535px){
  :root{
    --lovix-content-gutter:clamp(28px,3.2vw,52px) !important;
    --lovix-content-left:max(var(--lovix-content-gutter),calc((100% - var(--lovix-content-max))/2 + var(--lovix-content-gutter))) !important;
  }
  main,
  main > *,
  .dashboard-workspace,
  .dashboard-content-anchor,
  .account-clean-scope,
  .lvtt-page,
  .lvsp-page,
  .lvinv-page,
  .supplier-page-scope,
  .company-vault-page{
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  .dashboard-content-anchor,
  .account-clean-scope > div,
  .lvtt-page .lvtt-wrap,
  .lvsp-page,
  .lvinv-page,
  .supplier-page-scope,
  .company-vault-page{
    max-width:min(var(--lovix-content-max), calc(100vw - 64px)) !important;
  }
  .lvtt-page .lvtt-list{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .dashboard-workspace .lovix-time-rail-board{
    max-width:100% !important;
  }
  .dashboard-workspace .lovix-time-rail-scroll{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  .dashboard-workspace .lovix-time-rail-grid{
    min-width:920px !important;
  }
  aside.sticky{
    max-width:248px !important;
  }
}

@media (min-width:861px) and (max-width:1280px){
  :root{
    --lovix-content-gutter:32px !important;
    --lovix-content-left:32px !important;
  }
  .lvtt-page .lvtt-board{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .lvtt-page .lvtt-list{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* Mobile: make login/auth actually scrollable and keep React pages mounted within the viewport. */
@media (max-width:860px){
  :root{
    --lovix-content-gutter:16px !important;
    --lovix-content-left:16px !important;
  }
  html,body,#root{
    width:100% !important;
    min-height:100% !important;
    overflow-x:hidden !important;
  }
  #root > div{
    width:100% !important;
    min-width:0 !important;
  }
  main{
    width:100% !important;
    min-width:0 !important;
    max-width:100vw !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
  }
  main *{
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  main img,
  main svg,
  main canvas,
  main video{
    max-width:100% !important;
  }
  aside.sticky{
    display:none !important;
  }
  .world-map-hero{
    height:max(640px, calc(100svh - 56px)) !important;
    min-height:640px !important;
    overflow:hidden !important;
  }
  .world-map-hero__svg{
    max-width:none !important;
  }
  .dashboard-content-anchor{
    padding-left:16px !important;
    padding-right:16px !important;
    max-width:100vw !important;
  }
  .dashboard-workspace .lovix-time-rail-board{
    padding:18px 14px 20px !important;
    border-radius:24px !important;
    overflow:hidden !important;
  }
  .dashboard-workspace .lovix-time-rail-head{
    flex-direction:column !important;
    align-items:flex-start !important;
  }
  .dashboard-workspace .lovix-time-rail-badges{
    justify-content:flex-start !important;
  }
  .dashboard-workspace .lovix-time-rail-scroll{
    overflow-x:auto !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:touch;
  }
  .dashboard-workspace .lovix-time-rail-grid,
  .dashboard-workspace .lovix-time-rail-scroll.is-scrollable .lovix-time-rail-grid{
    min-width:760px !important;
  }
  .dashboard-workspace .lovix-time-rail-popover{
    position:fixed !important;
    left:50% !important;
    right:auto !important;
    top:auto !important;
    bottom:calc(76px + env(safe-area-inset-bottom,0px)) !important;
    transform:translateX(-50%) !important;
    width:min(320px, calc(100vw - 28px)) !important;
    max-width:calc(100vw - 28px) !important;
    z-index:260 !important;
  }
  .dashboard-workspace .lovix-time-pop-arrow{
    display:none !important;
  }
  .lvtt-page .lvtt-board,
  .lvtt-page .lvtt-list,
  .lvsp-page .lvsp-content-grid,
  .company-vault-page .cv-main,
  .company-vault-page .cv-form-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }

  /* Auth/login gate: previous layout used fixed 100vh + overflow hidden, which can look like a blank screen on iPhone. */
  #lovix-auth-gate{
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  #lovix-auth-gate .auth-shell{
    height:auto !important;
    min-height:100svh !important;
    padding:calc(12px + env(safe-area-inset-top,0px)) 14px calc(18px + env(safe-area-inset-bottom,0px)) !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
  }
  #lovix-auth-gate .auth-card{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    display:block !important;
    border-radius:24px !important;
    overflow:visible !important;
  }
  #lovix-auth-gate .auth-visual{
    display:block !important;
    padding:16px 16px 0 !important;
    min-height:0 !important;
  }
  #lovix-auth-gate .auth-brand{
    position:static !important;
    top:auto !important;
    left:auto !important;
    margin:0 !important;
    width:max-content !important;
    max-width:100% !important;
  }
  #lovix-auth-gate .auth-copy,
  #lovix-auth-gate .auth-desc,
  #lovix-auth-gate .auth-mini,
  #lovix-auth-gate .helper,
  #lovix-auth-gate .footnote{
    display:none !important;
  }
  #lovix-auth-gate .auth-form-wrap{
    padding:14px 14px 16px !important;
    display:block !important;
  }
  #lovix-auth-gate form{
    width:100% !important;
    padding:18px 16px 16px !important;
    border-radius:22px !important;
  }
  #lovix-auth-gate h1{
    margin-top:12px !important;
    font-size:24px !important;
  }
  #lovix-auth-gate p{
    margin-bottom:14px !important;
  }
  #lovix-auth-gate .field{
    margin-top:10px !important;
  }
  #lovix-auth-gate input,
  #lovix-auth-gate button{
    height:48px !important;
    font-size:16px !important;
  }
  #lovix-auth-gate button{
    margin-top:14px !important;
  }

  /* Dashboard "重要事项" card (联络进展 / 关键任务): desktop uses a fixed two-column
     grid with fixed-height rows. At mobile widths each column becomes too narrow,
     names wrap to a second line, and the fixed row height clips/overlaps the next
     row. Stack the two columns and let rows grow to fit their content instead. */
  .dashboard-workspace div.grid.items-stretch,
  .dashboard-workspace div.grid.items-center.mb-3{
    grid-template-columns:minmax(0,1fr) !important;
    row-gap:10px !important;
  }
  .dashboard-workspace div.grid.items-stretch > div.self-stretch.w-px{
    display:none !important;
  }
  .dashboard-workspace ul.list-none > li{
    height:auto !important;
    min-height:44px !important;
    max-height:none !important;
    align-items:flex-start !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
  }

  /* Overdue Interrupt cards: desktop grid forces a 320px minimum column width,
     which is wider than the available space inside this card's own padding on a
     phone screen, so the card overflows past the outer panel's rounded corner. */
  .lovix-v136-overdue{
    padding:20px 16px 22px !important;
  }
  .lovix-v136-overdue-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }
}