:root {
    --ink: #181612; --ink-2: #3a352d; --ink-3: #6b6358; --ink-4: #9a9185;
    --paper: #f6f2ea; --paper-2: #efeae0; --paper-3: #e6dfd1;
    --line: #d9d1bf; --line-2: #c4b9a3;
    --accent: #b8541f; --accent-2: #d4823f;
    --sage: #5e7a4f; --sage-2: #8fa97e;
    --warn: #b85d3a; --crit: #9a3327; --hl: #f0e6cf;
    --white: #fffdf8; --radius: 3px;
    --shadow-sm: 0 1px 0 rgba(24,22,18,0.04);
    --shadow-md: 0 2px 8px rgba(24,22,18,0.06), 0 1px 0 rgba(24,22,18,0.04);
    --shadow-lg: 0 8px 24px rgba(24,22,18,0.08), 0 1px 0 rgba(24,22,18,0.04);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body { font-family: 'Geist', -apple-system, sans-serif; background: var(--paper); color: var(--ink); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
  .serif { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; letter-spacing: -0.01em; }
  .mono { font-family: 'JetBrains Mono', monospace; font-feature-settings: "tnum" 1; }

  .app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }

  /* Sidebar */
  .sidebar { background: var(--ink); color: var(--paper); padding: 28px 0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
  .brand { padding: 0 24px 16px; border-bottom: 1px solid rgba(246,242,234,0.08); margin-bottom: 20px; }
  .brand-name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 22px; letter-spacing: -0.02em; line-height: 1; }
  .brand-sub { font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-4); margin-top: 6px; }
  .nav-section { padding: 0 12px; margin-bottom: 24px; }
  .nav-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-4); padding: 0 12px 8px; }
  .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius); color: rgba(246,242,234,0.75); cursor: pointer; font-size: 13px; transition: all 0.15s ease; border: none; background: transparent; width: 100%; text-align: left; font-family: inherit; }
  .nav-item:hover { background: rgba(246,242,234,0.06); color: var(--paper); }
  .nav-item.active { background: var(--accent); color: var(--white); }
  .nav-item-icon { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.9; }
  .sidebar-footer { margin-top: auto; padding: 16px 24px 0; border-top: 1px solid rgba(246,242,234,0.08); }
  .assumptions-note { font-size: 11px; color: var(--ink-4); line-height: 1.5; }
  .assumptions-note strong { color: rgba(246,242,234,0.8); display:block; margin-bottom: 4px; font-weight: 500; }

  /* Topbar */
  .topbar { background: var(--white); border-bottom: 1px solid var(--line); padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; }
  .breadcrumb { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.12em; }
  .topbar-right { display: flex; align-items: center; gap: 20px; }
  .role-switcher { display: flex; align-items: center; gap: 8px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px; }
  .role-btn { background: transparent; border: none; padding: 6px 12px; font-size: 12px; color: var(--ink-3); cursor: pointer; border-radius: 2px; font-family: inherit; transition: all 0.15s ease; }
  .role-btn:hover { color: var(--ink); }
  .role-btn.active { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); font-weight: 500; }
  .user-chip { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border: 1px solid var(--line); border-radius: 100px; background: var(--white); }
  .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: white; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
  .user-name { font-size: 12px; font-weight: 500; }
  .user-role { font-size: 11px; color: var(--ink-3); margin-top: -2px; }

  /* Pages */
  main { display: flex; flex-direction: column; }
  .page { display: none; padding: 32px; max-width: 1400px; }
  .page.active { display: block; }
  .page-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
  .page-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 40px; letter-spacing: -0.025em; line-height: 1.05; }
  .page-subtitle { color: var(--ink-3); margin-top: 6px; font-size: 14px; max-width: 60ch; }
  .page-header-actions { display: flex; gap: 8px; align-items: center; }

  /* Buttons */
  .btn { padding: 8px 16px; border: 1px solid var(--line-2); background: var(--white); color: var(--ink); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; border-radius: var(--radius); transition: all 0.15s ease; display: inline-flex; align-items: center; gap: 6px; }
  .btn:hover { background: var(--paper-2); border-color: var(--ink-3); }
  .btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
  .btn-accent { background: var(--accent); color: var(--white); border-color: var(--accent); }
  .btn-accent:hover { background: var(--ink); border-color: var(--ink); }
  .btn-sm { padding: 5px 10px; font-size: 12px; }
  .btn-danger { background: var(--crit); color: var(--white); border-color: var(--crit); }

  /* KPI Cards */
  .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
  .kpi { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; position: relative; overflow: hidden; }
  .kpi::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 24px; background: var(--accent); }
  .kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); margin-bottom: 12px; }
  .kpi-value { font-family: 'Fraunces', serif; font-size: 36px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
  .kpi-unit { font-size: 14px; color: var(--ink-3); font-family: 'Geist', sans-serif; margin-left: 4px; }
  .kpi-delta { margin-top: 10px; font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 4px; }
  .kpi-delta .up { color: var(--sage); }
  .kpi-delta .down { color: var(--crit); }

  /* Panels */
  .panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 24px; }
  .panel-header { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
  .panel-title { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
  .panel-sub { font-size: 12px; color: var(--ink-3); }
  .panel-body { padding: 20px; }
  .panel-body.no-pad { padding: 0; }
  /* Collapsible filter panels (Opp per SA, Allocation Status, Team Forecast) */
  .filter-panel-header { cursor: pointer; user-select: none; }
  .filter-toggle-btn { transition: transform 0.15s ease; padding: 2px 9px; line-height: 1; }
  .panel.filters-collapsed .filter-panel-header { border-bottom: none; }
  .panel.filters-collapsed .panel-body { display: none; }
  .panel.filters-collapsed .filter-toggle-btn { transform: rotate(-90deg); }

  /* Engagement Notes — opportunity picker grid */
  .eng-opp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-bottom: 24px; }
  .eng-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; transition: all 0.15s ease; }
  .eng-card:hover { border-color: var(--ink-3); }
  .eng-card.selected { outline: 2px solid var(--accent); border-color: var(--accent); }
  .eng-card-name { font-size: 13px; font-weight: 500; margin-bottom: 8px; line-height: 1.35; }
  .eng-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .eng-card-sfdc { font-size: 11px; color: var(--ink-3); font-family: monospace; }

  /* Tables */
  table { width: 100%; border-collapse: collapse; }
  thead th { text-align: left; padding: 10px 16px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); border-bottom: 1px solid var(--line); background: var(--paper-2); font-weight: 500; }
  #oppTable thead th { text-align: center; }
  /* Opportunities table has many columns — scroll horizontally instead of
     letting the browser compress column widths and wrap/shrink the text.
     The scrollbar is kept always-visible (not overlay/auto-hide) so it's
     obvious there is more data to the right. */
  .table-scroll { overflow-x: auto; scrollbar-gutter: stable; }
  .table-scroll::-webkit-scrollbar { height: 10px; }
  .table-scroll::-webkit-scrollbar-track { background: var(--paper-2); }
  .table-scroll::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 5px; }
  #oppTable { width: auto; min-width: 100%; }
  #oppTable th, #oppTable td { white-space: nowrap; }
  tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
  tbody tr:last-child td { border-bottom: none; }
  tbody tr:hover { background: var(--paper-2); cursor: pointer; }
  .badge { display: inline-block; padding: 2px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; border-radius: 2px; font-weight: 500; }
  .badge-lead { background: var(--ink); color: var(--paper); }
  .badge-support { background: var(--paper-3); color: var(--ink-2); }
  .badge-stage { background: var(--hl); color: var(--ink-2); }
  .badge-stage.discovery { background: #e8e0d0; }
  .badge-stage.proposal { background: #f0d9b8; }
  .badge-stage.negotiation { background: #e8c597; color: var(--ink); }
  .badge-stage.closed { background: var(--sage-2); color: var(--white); }
  .badge-stage.closing { background: #c8a860; color: var(--white); }
  .badge-internal { background: var(--ink-4); color: var(--paper); }
  .badge-pto { background: var(--sage); color: var(--white); }
  .wk-status { display:inline-block; padding:2px 6px; font-size:9px; text-transform:uppercase; letter-spacing:0.1em; border-radius:2px; font-weight:600; line-height:1.4; }
  .wk-status-draft     { background:#e8e3d8; color:var(--ink-3); }
  .wk-status-pending   { background:#f5dfc0; color:#7a4010; }
  .wk-status-submitted { background:#d4e8cc; color:#2e5c1e; }

  /* Dashboard */
  .dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }

  /* Capacity */
  .cap-summary { display: grid; grid-template-columns: 280px 1fr; gap: 24px; margin-bottom: 24px; }
  .cap-donut { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .donut-svg { width: 180px; height: 180px; }
  .donut-center { text-align: center; margin-top: -100px; pointer-events: none; }
  .donut-pct { font-family: 'Fraunces', serif; font-size: 38px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
  .donut-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); margin-top: 4px; }
  .donut-key { margin-top: 70px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
  .donut-key-item { font-size: 11px; display: flex; align-items: center; gap: 6px; }
  .donut-key-item .sw { width: 10px; height: 10px; border-radius: 2px; }

  /* Heatmap */
  .heatmap-wrap { overflow-x: auto; }
  .heatmap { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 800px; }
  .heatmap th, .heatmap td { padding: 0; }
  .heatmap thead th { background: var(--paper-2); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--line); font-weight: 500; }
  .heatmap thead th.region-h { text-align: left; padding-left: 16px; }
  .heatmap tbody td { border-bottom: 1px solid var(--line); text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 12px; height: 36px; }
  .heatmap tbody td.region-c { text-align: left; padding-left: 16px; font-family: 'Geist', sans-serif; font-weight: 500; background: var(--paper); }
  .heatmap tbody td.region-c .country-flag { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; margin-left: 6px; }
  .cell { display: block; width: 100%; height: 100%; line-height: 36px; color: var(--ink); cursor: default; }
  .cell-0 { background: #f0ead8; }
  .cell-1 { background: #d9c990; color: var(--ink); }
  .cell-2 { background: #c4a652; color: var(--white); }
  .cell-3 { background: #9a7e2f; color: var(--white); }
  .cell-4 { background: var(--crit); color: var(--white); }

  .heatmap tr.group-hdr td { background: var(--paper-3); padding: 5px 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); border-bottom: 1px solid var(--line); }

  /* Timesheet */
  .ts-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding: 12px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
  .ts-week-nav { display: flex; align-items: center; gap: 12px; }
  .ts-week-label { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 500; }
  .ts-totals { display: flex; gap: 24px; }
  .ts-total { text-align: right; }
  .ts-total-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); }
  .ts-total-val { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 16px; margin-top: 2px; }
  .ts-total-val.warn { color: var(--warn); }
  .ts-total-val.good { color: var(--sage); }
  .ts-grid { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: visible; position: relative; }
  /* unified grid: type-badge | entry-select | activity-select | Mon..Sun | Total | remove */
  .ts-row { display: grid; grid-template-columns: 24px 2.2fr 1.1fr 78px 78px 78px 78px 78px 84px 40px; border-bottom: 1px solid var(--line); align-items: stretch; }
  .ts-row:last-child { border-bottom: none; }
  .ts-row.header { background: var(--paper-2); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); font-weight: 500; }
  .ts-row.header > div { padding: 10px 8px; display: flex; align-items: center; }
  .ts-row.header > div:nth-child(n+4):nth-child(-n+11) { justify-content: center; }
  .ts-row.totals { background: #e8e3d8; border-top: 2px solid var(--line); font-weight: 600; font-family: 'JetBrains Mono', monospace; }
  .ts-row.totals > div { padding: 10px 8px; display: flex; align-items: center; }
  .ts-row.totals > div:nth-child(n+4):nth-child(-n+11) { justify-content: center; }

  /* type badge column */
  .ts-cell-type { border-right: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: 0 4px; }
  .ts-type-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .ts-type-dot.billable { background: var(--accent); }
  .ts-type-dot.internal { background: var(--ink-4); }
  .ts-type-dot.pto { background: var(--sage); }

  /* entry select (opp or internal) */
  .ts-cell-entry { border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; padding: 8px; gap: 4px; }
  .ts-entry-select { width: 100%; border: none; background: transparent; font-family: inherit; font-size: 12px; font-weight: 500; color: var(--ink); padding: 0; cursor: pointer; }
  .ts-entry-select:focus { outline: 1px solid var(--accent); border-radius: 2px; }
  .ts-entry-badge { display: flex; gap: 4px; align-items: center; }

  /* activity select */
  .ts-cell-activity { padding: 6px; border-right: 1px solid var(--line); display: flex; align-items: center; }
  .ts-cell-activity select { width: 100%; border: 1px solid var(--line); background: var(--white); font-family: inherit; font-size: 11px; padding: 4px 4px; border-radius: 2px; color: var(--ink-2); }
  .ts-cell-activity select:focus { outline: none; border-color: var(--accent); }

  .ts-cell-hour { border-right: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
  .ts-cell-hour:last-child { border-right: none; }
  .ts-cell-hour input { width: 100%; text-align: center; border: none; background: transparent; font-family: 'JetBrains Mono', monospace; padding: 10px 2px; font-size: 12px; color: var(--ink); }
  .ts-cell-hour input:focus { outline: none; background: var(--hl); }
  .ts-cell-hour input.weekend { background: var(--paper-2); color: var(--ink-4); }
  .ts-cell-remove { display: flex; align-items: center; justify-content: center; }
  .ts-remove-btn { background: none; border: none; color: var(--ink-4); cursor: pointer; font-size: 14px; padding: 4px; line-height: 1; border-radius: 2px; }
  .ts-remove-btn:hover { color: var(--crit); background: var(--paper-2); }

  .ts-add-row { padding: 10px 12px; border-top: 1px solid var(--line); background: var(--paper-2); display: flex; gap: 8px; }

  /* forecast 100% cap */
  .fc-cap-bar { margin-top: 12px; }
  .fc-cap-label { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; display: flex; justify-content: space-between; }
  .fc-cap-track { height: 10px; background: var(--paper-2); border-radius: 3px; overflow: hidden; border: 1px solid var(--line); }
  .fc-cap-fill { height: 100%; background: var(--sage); border-radius: 3px; transition: width 0.3s ease, background 0.3s ease; }
  .fc-cap-fill.warn { background: var(--warn); }
  .fc-cap-fill.crit { background: var(--crit); }
  .fc-over-msg { font-size: 11px; color: var(--crit); margin-top: 4px; font-weight: 500; }

  /* Forecast — dot | entry | wk×4 | total | remove */
  .forecast-grid { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .fc-row { display: grid; grid-template-columns: 24px 2.2fr 100px 100px 100px 100px 72px 32px; border-bottom: 1px solid var(--line); align-items: stretch; }
  .fc-row:last-child { border-bottom: none; }
  .fc-row.header { background: var(--paper-2); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); font-weight: 500; }
  .fc-row.header > div { padding: 10px 8px; display:flex; align-items:center; }
  .fc-row.header > div:nth-child(n+3) { justify-content: center; }
  .fc-row.cap-row { background: var(--paper-2); }
  .fc-row.cap-row > div { padding: 10px 8px; display:flex; align-items:center; font-size:12px; }
  .fc-row.cap-row > div:nth-child(n+3) { justify-content:center; font-family:'JetBrains Mono',monospace; font-weight:600; }
  .fc-cell-dot { border-right: 1px solid var(--line); display:flex; align-items:center; justify-content:center; }
  .fc-cell-entry { border-right: 1px solid var(--line); padding: 8px; display:flex; flex-direction:column; justify-content:center; gap:3px; }
  .fc-entry-select { width:100%; border:none; background:transparent; font-family:inherit; font-size:12px; font-weight:500; color:var(--ink); padding:0; cursor:pointer; }
  .fc-entry-select:focus { outline: 1px solid var(--accent); border-radius:2px; }
  .fc-cell { padding: 8px; border-right: 1px solid var(--line); display: flex; align-items: center; justify-content:center; }
  .fc-cell:last-child { border-right: none; }
  .fc-cell input { width: 56px; text-align: center; border: 1px solid var(--line); background: var(--white); font-family: 'JetBrains Mono', monospace; padding: 5px 3px; font-size: 13px; border-radius: 2px; }
  .fc-cell input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(184,84,31,0.15); }
  .fc-total { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
  .fc-cell-remove { display:flex; align-items:center; justify-content:center; }
  .fc-add-row { padding: 10px 12px; border-top: 1px solid var(--line); background: var(--paper-2); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

  /* Activity tag multi-select */
  .tag-wrap { position:relative; }
  .tag-chips { display:flex; flex-wrap:wrap; gap:3px; min-height:22px; cursor:pointer; padding:2px; }
  .tag-chip { display:inline-flex; align-items:center; gap:3px; background:var(--hl); border:1px solid var(--line-2); border-radius:2px; padding:1px 5px; font-size:10px; font-weight:500; color:var(--ink-2); line-height:1.4; }
  .tag-chip.internal { background:#e8e0d8; }
  .tag-chip-x { cursor:pointer; color:var(--ink-4); font-size:11px; line-height:1; margin-left:1px; }
  .tag-chip-x:hover { color:var(--crit); }
  .tag-add-btn { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border:1px dashed var(--line-2); border-radius:2px; font-size:12px; color:var(--ink-4); cursor:pointer; flex-shrink:0; }
  .tag-add-btn:hover { border-color:var(--accent); color:var(--accent); }
  .tag-menu { display:none; position:absolute; top:calc(100% + 2px); left:0; z-index:200; background:var(--white); border:1px solid var(--line-2); border-radius:var(--radius); box-shadow:var(--shadow-md); min-width:180px; max-height:200px; overflow-y:auto; padding:4px 0; }
  .tag-menu.open { display:block; }
  .tag-menu-item { padding:6px 12px 6px 28px; font-size:12px; cursor:pointer; position:relative; }
  .tag-menu-item:hover { background:var(--paper-2); }
  .tag-menu-item.selected::before { content:'✓'; position:absolute; left:10px; color:var(--sage); font-size:11px; }

  /* Milestone detail panel per timesheet row */
  .ts-detail-panel { display:none; border-bottom:1px solid var(--line); background:var(--paper); }
  .ts-detail-panel.open { display:block; }
  .ts-detail-inner { padding:16px 20px; display:grid; grid-template-columns:1fr 300px; gap:20px; }
  .ts-ms-list { display:flex; flex-direction:column; gap:8px; }
  .ts-ms-item { border-left:3px solid var(--accent); padding:7px 10px; background:var(--white); border-radius:0 var(--radius) var(--radius) 0; border:1px solid var(--line); border-left-width:3px; }
  .ts-ms-item.complete { border-left-color:var(--sage); }
  .ts-ms-item.upcoming { border-left-color:var(--line-2); }
  .ts-ms-title { font-size:12px; font-weight:600; display:flex; justify-content:space-between; margin-bottom:3px; }
  .ts-ms-note { font-size:11px; color:var(--ink-3); line-height:1.45; }
  .ts-log-form { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:14px; }
  .ts-log-form h5 { font-size:10px; text-transform:uppercase; letter-spacing:0.12em; color:var(--ink-3); margin-bottom:10px; font-weight:500; }

  /* Milestones */
  .ms-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
  .ms-tab { padding: 10px 20px; cursor: pointer; font-size: 13px; color: var(--ink-3); border-bottom: 2px solid transparent; transition: all 0.15s ease; }
  .ms-tab:hover { color: var(--ink); }
  .ms-tab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 500; }
  .timeline { position: relative; padding-left: 32px; }
  .timeline::before { content: ''; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 1px; background: var(--line-2); }
  .ms-item { position: relative; padding: 16px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; }
  .ms-item::before { content: ''; position: absolute; left: -28px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--paper); }
  .ms-item.complete::before { background: var(--sage); }
  .ms-item.upcoming::before { background: var(--paper-3); border-color: var(--line-2); }
  .ms-item-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
  .ms-type { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 500; }
  .ms-date { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-3); }
  .ms-opp { font-size: 12px; color: var(--accent); font-weight: 500; margin-bottom: 8px; }
  .ms-note { font-size: 13px; color: var(--ink-2); line-height: 1.55; }

  /* Settings */
  .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .hours-table { width: 100%; }
  .hours-table input { width: 60px; padding: 4px 6px; border: 1px solid var(--line); background: var(--white); font-family: 'JetBrains Mono', monospace; font-size: 13px; text-align: center; border-radius: 2px; }
  .hours-table input:focus { outline: none; border-color: var(--accent); }

  /* Bars */
  .bar-row { display: grid; grid-template-columns: 140px 1fr 60px; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
  .bar-row:last-child { border-bottom: none; }
  .bar-row:hover { opacity: 0.85; }
  .bar-row.selected { background: var(--hl); border-radius: var(--radius); outline: 2px solid var(--accent); }
  .bar-label { font-size: 12px; font-weight: 500; }
  .bar-label-sub { font-size: 11px; color: var(--ink-3); }
  .bar-track { height: 8px; background: var(--paper-2); border-radius: 2px; overflow: hidden; position: relative; }
  .bar-fill { height: 100%; background: var(--accent); border-radius: 2px; }
  .bar-fill.sage { background: var(--sage); }
  .bar-fill.warn { background: var(--warn); }
  .bar-fill.crit { background: var(--crit); }
  .bar-value { font-family: 'JetBrains Mono', monospace; font-size: 12px; text-align: right; }

  /* Filter pills */
  .filter-row { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
  .pill { padding: 5px 12px; font-size: 12px; border: 1px solid var(--line); background: var(--white); color: var(--ink-3); border-radius: 100px; cursor: pointer; font-family: inherit; }
  .pill:hover { color: var(--ink); border-color: var(--ink-3); }
  .pill.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

  /* Banner */
  .banner { background: linear-gradient(95deg, var(--hl) 0%, var(--paper-3) 100%); border: 1px solid var(--line-2); padding: 16px 20px; border-radius: var(--radius); margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .banner-text { font-size: 13px; color: var(--ink-2); }
  .banner-text strong { color: var(--ink); }

  /* Modal */
  .modal-bg { position: fixed; inset: 0; background: rgba(24,22,18,0.4); display: none; align-items: center; justify-content: center; z-index: 100; }
  .modal-bg.open { display: flex; }
  .modal { background: var(--white); border-radius: var(--radius); width: 720px; max-width: 90vw; max-height: 85vh; overflow: hidden; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
  .modal-head { padding: 24px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-start; flex-shrink: 0; }
  .modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--ink-3); padding: 4px; }
  .modal-body { padding: 24px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
  /* Show/hide eye toggle inside a password field */
  .pwd-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 15px; line-height: 1; padding: 4px; opacity: 0.4; }
  .pwd-eye:hover { opacity: 0.7; }
  .pwd-eye.revealed { opacity: 0.95; }
  .modal-section { margin-bottom: 24px; }
  .modal-section h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); margin-bottom: 12px; font-weight: 500; }

  /* Add form modal */
  .form-row { margin-bottom: 16px; }
  .form-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); margin-bottom: 6px; display: block; }
  .form-input { width: 100%; padding: 8px 12px; border: 1px solid var(--line); background: var(--white); font-family: inherit; font-size: 13px; border-radius: var(--radius); color: var(--ink); }
  .form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(184,84,31,0.12); }
  .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .modal-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 16px 24px; border-top: 1px solid var(--line); margin: 8px -24px -24px; position: sticky; bottom: -24px; background: var(--white); }

  /* Toast */
  .toast { position: fixed; bottom: 24px; right: 24px; background: var(--ink); color: var(--paper); padding: 12px 20px; border-radius: var(--radius); font-size: 13px; z-index: 500; opacity: 0; transform: translateY(8px); transition: all 0.3s ease; pointer-events: none; }
  .toast.show { opacity: 1; transform: translateY(0); }
  .toast.success { background: var(--sage); }
  .toast.error { background: var(--crit); }

  /* Milestone calendar */
  .cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 24px; }
  .cal-header { background: var(--paper-2); padding: 8px 10px; text-align: center; }
  .cal-dow { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); }
  .cal-date-num { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; margin-top: 2px; color: var(--ink); }
  .cal-date-num.today { color: var(--accent); }
  .cal-date-num.past { color: var(--ink-4); }
  .cal-cell { background: var(--white); padding: 8px; min-height: 88px; display: flex; flex-direction: column; gap: 4px; }
  .cal-cell.today-col { background: var(--hl); }
  .cal-cell.past-col { background: var(--paper-2); }
  .cal-event { padding: 3px 7px; border-radius: 2px; font-size: 10px; font-weight: 600; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
  .cal-event.svr { background: var(--accent); color: var(--white); }
  .cal-event.dr2 { background: var(--sage); color: var(--white); }
  .cal-event.close { background: var(--ink-2); color: var(--white); }
  .cal-event-name { font-weight: 400; opacity: 0.9; }
  .cal-week-label { grid-column: 1/-1; background: var(--paper-3); padding: 6px 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-2); }


  /* ── Login screen ── */
  #loginScreen { position:fixed;inset:0;background:var(--paper);display:flex;align-items:center;justify-content:center;z-index:9999; }
  #loginScreen.hidden { display:none; }
  .login-card { background:var(--white);border:1px solid var(--line);border-radius:12px;padding:40px 44px;width:100%;max-width:400px;box-shadow:0 8px 40px rgba(0,0,0,0.08); }
  .login-logo { font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:700;color:var(--ink);letter-spacing:-0.5px;margin-bottom:4px; }
  .login-sub  { font-size:13px;color:var(--ink-3);margin-bottom:32px; }
  .login-label { font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-3);margin-bottom:6px; }
  .login-input { width:100%;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius);font-size:14px;font-family:inherit;background:var(--white);color:var(--ink);margin-bottom:16px;box-sizing:border-box;transition:border-color 0.15s; }
  .login-input:focus { outline:none;border-color:var(--accent); }
  .login-btn { width:100%;padding:12px;background:var(--ink);color:var(--white);border:none;border-radius:var(--radius);font-size:14px;font-weight:600;cursor:pointer;transition:opacity 0.15s;margin-top:4px; }
  .login-btn:hover { opacity:0.85; }
  .login-error { font-size:12px;color:var(--crit);margin-top:12px;text-align:center;min-height:18px; }
  .login-hint { font-size:11px;color:var(--ink-4);margin-top:20px;text-align:center; }
  /* Scrollbar */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--paper-2); }
  ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 5px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

  /* Save indicator */
  .save-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); display: inline-block; margin-right: 6px; }
  .save-dot.saving { background: var(--accent-2); animation: pulse 1s infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }