* { box-sizing: border-box; }
  body { margin: 0; }
  @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes pptZoomIn { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3.4); opacity: 0; } }
  @keyframes pptZoomReveal { 0% { transform: scale(0.45); opacity: 0; } 55% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
  ::-webkit-scrollbar { width: 9px; height: 9px; }
  ::-webkit-scrollbar-thumb { background: #2a3142; border-radius: 6px; }
  ::-webkit-scrollbar-track { background: #0d1320; }
  /* make native date picker icon visible on dark inputs */
  input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8) brightness(1.4); cursor: pointer; opacity: 0.85; }
  input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
  input[type="date"] { color-scheme: dark; }
  #root { min-height: 100vh; }
  .boot { color:#7c8db0; font-family:monospace; display:grid; place-items:center; height:100vh; background:#0a0f1a; }
  @media (max-width: 900px) { .mtc-split { grid-template-columns: 1fr !important; } }

  /* ---------- Mobile / small-screen polish (Phase 1) ----------
     The app is inline-styled (the S object), so these overrides use !important on a
     few className hooks (mtc-header / mtc-tabs / mtc-main / mtc-countdown / mtc-subtitle)
     added in ui.js. Scoped to <= 720px so desktop is untouched. */
  @media (max-width: 720px) {
    /* header: tighter, drop the long subtitle, shrink the countdown */
    .mtc-header { padding: 10px 12px !important; }
    .mtc-subtitle { display: none !important; }
    .mtc-countdown { padding: 5px 9px !important; gap: 7px !important; }

    /* tab strips become a single horizontally-swipeable row instead of wrapping */
    .mtc-tabs {
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
      max-width: 100%;
      scrollbar-width: none;
    }
    .mtc-tabs::-webkit-scrollbar { display: none; }
    .mtc-tabs > button { flex: 0 0 auto; }          /* don't squash the tabs */
    .mtc-subnav { width: 100% !important; }

    /* reclaim space + comfortable tap targets */
    .mtc-main { padding: 10px !important; }
    .mtc-header button, .mtc-tabs button { min-height: 40px; }
  }

  /* ---------- Light mode (DESIGNED theme, no inversion) ----------
     A real light palette. The app's styles are inline (the S object in ui.js), so this
     sheet re-themes SURFACES by matching each serialized inline colour with
     [style*="rgb(...)"] attribute selectors + !important (Chrome serializes inline hex
     colours as "rgb(r, g, b)"). Each dark surface colour maps to ONE designed light
     value, and distinct panels get distinct tints:
       page bg        #e9edf3   (cool gray)
       header         #f7fafe → #e9f0f9 bluish gradient (its own surface)
       cards/toolbar  #ffffff   white cards with #ccd6e3 borders
       gantt label col#f4f7fb   · chart rows on white
       side panel     #fbfcff   (EditPanel <aside>, slightly off-white)
       inputs/chips   #f1f4f8
     Drawing canvases (Elevation/Plan/Foundation SVGs) get a light "engineering paper"
     treatment via the [fill=]/[stroke=] attribute maps further below. Status/accent
     chips with coloured dark fills stay: they read as accents on light surfaces.
     When adding new UI, reuse the existing dark palette hexes so this map keeps
     working — or add the new colour's rgb() to this map. */
  html.light-mode, html.light-mode body { background: #e9edf3; }
  html.light-mode .boot { background: #e9edf3; color: #52647f; }

  /* page container (app + login backdrop) */
  html.light-mode #root > div[style*="background: rgb(10, 15, 26)"] { background: #e9edf3 !important; }
  html.light-mode #root > div[style*="radial-gradient"] { background: radial-gradient(1200px 600px at 50% -10%, #dfe9f6, #eef2f8) !important; }

  /* header — its own bluish surface */
  html.light-mode header[style*="linear-gradient"] { background: linear-gradient(180deg, #f7fafe, #e9f0f9) !important; border-bottom: 1px solid #cdd9e8 !important; }

  /* side panel (EditPanel <aside>) — off-white, distinct from pure-white cards */
  html.light-mode aside[style*="rgb(12, 19, 34)"] { background: #fbfcff !important; border-left: 1px solid #c4d0e0 !important; }

  /* ---- surface map (backgrounds) ---- */
  html.light-mode [style*="background: rgb(12, 19, 34)"]  { background: #ffffff !important; }   /* #0c1322 cards/toolbar/tlWrap */
  html.light-mode [style*="background: rgb(11, 16, 28)"]  { background: #f4f7fb !important; }   /* #0b101c gantt label col */
  html.light-mode [style*="background: rgb(15, 22, 38)"]  { background: #ffffff !important; }   /* #0f1626 stat cards */
  html.light-mode [style*="background: rgb(16, 24, 42)"]  { background: #e7eefb !important; }   /* #10182a selected row / dashed boxes */
  html.light-mode [style*="background: rgb(17, 22, 31)"]  { background: #eef2f7 !important; }   /* #11161f gantt tracks */
  html.light-mode [style*="background: rgb(22, 29, 43)"]  { background: #e6ebf2 !important; }   /* #161d2b grid lines / close btns */
  html.light-mode [style*="background: rgb(26, 34, 51)"]  { background: #e3e9f1 !important; }   /* #1a2233 progress tracks */
  html.light-mode [style*="background: rgb(17, 32, 58)"]  { background: #dce8f8 !important; }   /* #11203a active tabs / banners */
  html.light-mode [style*="background: rgb(19, 35, 63)"]  { background: #dbe8fb !important; }   /* #13233f mini add buttons */
  html.light-mode [style*="background: rgb(21, 35, 62)"]  { background: #e3ecf9 !important; }   /* #15233e mini buttons */
  html.light-mode [style*="background: rgb(17, 35, 63)"]  { background: #e2edfb !important; }   /* #11233f link badges */
  html.light-mode [style*="background: rgb(10, 15, 26)"]  { background: #f1f4f8 !important; }   /* #0a0f1a inputs/chips/toggle strips */

  /* gradient surfaces → light equivalents (kept AFTER the flat maps so they win) */
  html.light-mode [style*="linear-gradient(160deg, rgb(15, 22, 38)"] { background: #ffffff !important; }          /* modals / login card */
  html.light-mode [style*="linear-gradient(135deg, rgb(17, 32, 58)"] { background: linear-gradient(135deg, #e8f0fb, #f7fafd) !important; } /* popover / forecast headline */
  html.light-mode [style*="linear-gradient(160deg, rgb(26, 18, 48)"] { background: linear-gradient(160deg, #f0ebfa, #f8f6fd) !important; } /* link-mode float */

  /* ---- border map ---- */
  html.light-mode [style*="rgb(31, 39, 56)"] { border-color: #ccd6e3 !important; }   /* #1f2738 */
  html.light-mode [style*="rgb(42, 49, 66)"] { border-color: #b9c6d8 !important; }   /* #2a3142 */
  html.light-mode [style*="rgb(36, 48, 73)"] { border-color: #c8d4e4 !important; }   /* #243049 modal borders */
  html.light-mode [style*="rgb(42, 58, 87)"] { border-color: #b9cbe4 !important; }   /* #2a3a57 */
  html.light-mode [style*="rgb(42, 63, 99)"] { border-color: #b9cbe4 !important; }   /* #2a3f63 upload buttons */
  html.light-mode [style*="border-bottom: 1px solid rgb(17, 22, 31)"] { border-bottom-color: #e4e9f1 !important; } /* row separators */

  /* ---- text map ---- */
  html.light-mode [style*="color: rgb(205, 213, 228)"] { color: #2e3a4e !important; }  /* #cdd5e4 body */
  html.light-mode [style*="color: rgb(234, 240, 251)"] { color: #16233a !important; }  /* #eaf0fb bright */
  html.light-mode [style*="color: rgb(154, 166, 189)"] { color: #46566e !important; }  /* #9aa6bd */
  html.light-mode [style*="color: rgb(124, 141, 176)"] { color: #52647f !important; }  /* #7c8db0 */
  html.light-mode [style*="color: rgb(143, 160, 192)"] { color: #4c5f7d !important; }  /* #8fa0c0 */
  html.light-mode [style*="color: rgb(107, 119, 148)"] { color: #5d6a83 !important; }  /* #6b7794 */
  html.light-mode [style*="color: rgb(86, 96, 117)"]  { color: #6e7890 !important; }   /* #566075 hints */
  html.light-mode [style*="color: rgb(94, 113, 150)"] { color: #566a8e !important; }   /* #5e7196 mono labels */
  html.light-mode [style*="color: rgb(138, 147, 168)"] { color: #5f6b80 !important; }  /* #8a93a8 */
  html.light-mode [style*="color: rgb(156, 192, 255)"] { color: #1d5bbf !important; }  /* #9cc0ff links */
  html.light-mode [style*="color: rgb(188, 208, 240)"] { color: #2c4a77 !important; }  /* #bcd0f0 mini buttons */
  html.light-mode [style*="color: rgb(188, 216, 255)"] { color: #1e4f8f !important; }  /* #bcd8ff banners */

  /* ---- shadows: dark-theme drop shadows read heavy on light surfaces → soften ----
     (Chrome serializes inline box-shadow COLOUR-FIRST: "rgba(0, 0, 0, 0.4) 0px 1px 3px") */
  html.light-mode [style*="rgba(0, 0, 0, 0.4) 0px 1px"]   { box-shadow: 0 1px 2px rgba(50, 65, 90, 0.16) !important; }  /* gantt bars / phase bars */
  html.light-mode [style*="rgba(0, 0, 0, 0.5) 0px 1px"]   { box-shadow: 0 1px 2px rgba(50, 65, 90, 0.16) !important; }  /* report stage dots */
  html.light-mode [style*="rgba(0, 0, 0, 0.35) 0px 2px 8px"]  { box-shadow: 0 1px 3px rgba(50, 65, 90, 0.14) !important; }  /* notes */
  html.light-mode [style*="rgba(0, 0, 0, 0.5) 0px 12px 40px"] { box-shadow: 0 10px 28px rgba(50, 70, 100, 0.16) !important; } /* popover */
  html.light-mode [style*="rgba(0, 0, 0, 0.5) -10px 0px 40px"]{ box-shadow: -8px 0 24px rgba(50, 70, 100, 0.14) !important; } /* side panel */
  html.light-mode [style*="rgba(0, 0, 0, 0.5) 0px 24px 70px"],
  html.light-mode [style*="rgba(0, 0, 0, 0.6) 0px 24px 70px"] { box-shadow: 0 16px 44px rgba(50, 70, 100, 0.18) !important; } /* modals / login */
  html.light-mode [style*="rgba(0, 0, 0, 0.6) 0px 16px 50px"] { box-shadow: 0 12px 32px rgba(50, 70, 100, 0.16) !important; } /* link float */
  /* dark separation rings on diamonds/markers → white rings on light bg */
  html.light-mode [style*="rgba(12, 18, 34, 0.9"] { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95) !important; }
  html.light-mode [style*="rgba(13, 19, 32, 0.9)"] { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95) !important; }

  /* ---- drawings (Elevation / Plan / Foundation SVGs): light "engineering paper" ----
     SVG colours are presentation ATTRIBUTES (fill= / stroke=), so plain attribute
     selectors re-theme them (CSS beats presentation attributes even without !important;
     kept anyway for consistency). Status-driven colours (STATUS_META fills, category
     accents) are dynamic and intentionally unmapped — they read as printed markers. */
  html.light-mode [style*="background: rgb(13, 19, 32)"] { background: #fbfcfe !important; }   /* svg canvas + zoom viewport */
  html.light-mode svg [fill="#0d1320"]  { fill: #ffffff !important; }    /* badges / grid bubbles / marker boxes */
  html.light-mode svg [fill="#0a0e16"]  { fill: #f7f9fc !important; }    /* foundation ground */
  html.light-mode svg [fill="#0a0f1a"]  { fill: #f7f9fc !important; }
  html.light-mode svg [fill="#141d2e"]  { fill: #eef2f7 !important; }    /* elevation earth bands */
  html.light-mode svg [fill="#1a2335"]  { fill: #e6ecf4 !important; }
  html.light-mode svg [fill="#102540"]  { fill: #d8e6f7 !important; }    /* column blocks */
  html.light-mode svg [fill="#2e2510"]  { fill: #f3ead0 !important; }    /* shear-wall blocks */
  html.light-mode svg [fill="#445069"]  { fill: #8394ad !important; }
  html.light-mode svg [fill="#4a5874"]  { fill: #8b9cb6 !important; }
  html.light-mode svg [fill="#5e7196"]  { fill: #566a8e !important; }    /* drawing text ↓ */
  html.light-mode svg [fill="#7c8db0"]  { fill: #52647f !important; }
  html.light-mode svg [fill="#9aa6bd"]  { fill: #46566e !important; }
  html.light-mode svg [fill="#566075"]  { fill: #6e7890 !important; }
  html.light-mode svg [fill="#8fa0c0"]  { fill: #4c5f7d !important; }
  html.light-mode svg [fill="#cdd5e4"]  { fill: #2e3a4e !important; }
  html.light-mode svg [fill="#eaf0fb"]  { fill: #16233a !important; }
  html.light-mode svg [fill="#7fb0e6"]  { fill: #2f6bb0 !important; }    /* column labels */
  html.light-mode svg [fill="#caa86a"]  { fill: #8a6d1a !important; }    /* wall labels */
  html.light-mode svg [stroke="#161d2b"] { stroke: #e2e8f0 !important; } /* soil hatch */
  html.light-mode svg [stroke="#33405c"] { stroke: #b9c6da !important; } /* grid lines */
  html.light-mode svg [stroke="#4a5675"] { stroke: #90a1bc !important; } /* grid bubbles */
  html.light-mode svg [stroke="#2a3142"] { stroke: #b9c6d8 !important; }
  html.light-mode svg [stroke="#3a4664"] { stroke: #a9b8cd !important; }
  html.light-mode svg [stroke="#1b2230"] { stroke: #ccd5e2 !important; }
  html.light-mode svg [stroke="#141a26"] { stroke: #d7dee8 !important; }
  html.light-mode svg [stroke="#4a5874"] { stroke: #8b9cb6 !important; }
  html.light-mode svg [stroke="#5e7196"] { stroke: #7688a5 !important; }

  /* ---- chrome ---- */
  html.light-mode ::-webkit-scrollbar-thumb { background: #b9c4d4; }
  html.light-mode ::-webkit-scrollbar-track { background: #e6eaf1; }
  html.light-mode input[type="date"] { color-scheme: light; }
  html.light-mode input[type="date"]::-webkit-calendar-picker-indicator { filter: none; }
  html.light-mode input::placeholder, html.light-mode textarea::placeholder { color: #8593a8; }
  @media print {
    body { background: #fff !important; color: #000 !important; }
    header, .gantt-toolbar, .gantt-sidebar-ctrl, button, .ai-fab { display: none !important; }
    .gantt-scroll { overflow: visible !important; }
    canvas { max-width: 100% !important; }
    @page { margin: 10mm; size: A3 landscape; }
  }