:root{
    --red-900:#5C0F13;
    --red-700:#8A1418;
    --red-600:#B01F22;
    --red-500:#D62E30;
    --red-400:#E85F52;
    --red-050:#FBE9E7;
    --gray-950:#131416;
    --gray-900:#1B1D20;
    --gray-850:#212327;
    --gray-800:#292C30;
    --gray-700:#383C41;
    --gray-600:#4C5157;
    --gray-500:#6B7178;
    --gray-400:#8E949B;
    --gray-300:#B4B9BE;
    --gray-200:#D6D9DC;
    --gray-100:#EDEEEF;
    --gray-050:#F5F6F6;
    --white:#FFFFFF;
    --amber:#C68A2E;
    --green:#4C8B5B;
    --radius-lg:16px;
    --radius-md:10px;
    --radius-sm:6px;
    --font: 'Vazirmatn', sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html, body{ height:100%; }
  body{
    font-family: var(--font);
    background: var(--gray-050);
    color: var(--gray-900);
    font-size:14px;
    -webkit-font-smoothing:antialiased;
    overflow:hidden;
  }
  .app{ display:flex; height:100vh; overflow:hidden; }

  /* ===== SIDEBAR ===== */
  .sidebar{
    width:230px; flex-shrink:0;
    background: var(--gray-950);
    color: var(--gray-300);
    display:flex; flex-direction:column;
    padding:20px 14px;
    height:100%;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:var(--gray-700) transparent;
  }
  .sidebar::-webkit-scrollbar{ width:6px; }
  .sidebar::-webkit-scrollbar-track{ background:transparent; }
  .sidebar::-webkit-scrollbar-thumb{ background:var(--gray-700); border-radius:10px; }
  .brand{ display:flex; align-items:center; gap:10px; padding:6px 8px 22px 8px; border-bottom:1px solid var(--gray-800); margin-bottom:18px;}
  .brand-mark{ width:38px; height:38px; border-radius:10px; background:linear-gradient(160deg, var(--red-600), var(--red-900)); display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; }
  .brand-mark svg{ width:22px; height:22px; }
  .brand-text .t1{ font-size:14px; font-weight:700; color:var(--white); line-height:1.3;}
  .brand-text .t2{ font-size:10.5px; color:var(--gray-500); letter-spacing:.03em; }

  .nav-group-label{ font-size:10.5px; color:var(--gray-600); font-weight:600; letter-spacing:.06em; margin:16px 10px 8px; text-transform:uppercase; }
  .nav-item{
    display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--radius-sm);
    font-size:13.5px; font-weight:500; color:var(--gray-300); cursor:pointer; position:relative;
    transition:.15s;
  }
  .nav-item:hover{ background:var(--gray-900); color:var(--white); }
  .nav-item.active{ background:var(--red-700); color:var(--white); }
  .nav-item .ic{ width:18px; height:18px; flex-shrink:0; opacity:.9;}
  .nav-item .badge{ margin-right:auto; background:var(--red-500); color:var(--white); font-size:10px; font-weight:700; padding:1px 6px; border-radius:20px; }

  .sidebar-foot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--gray-800); display:flex; align-items:center; gap:9px;}
  .avatar-sm{ width:30px; height:30px; border-radius:50%; background:var(--gray-700); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--gray-200); flex-shrink:0;}
  .sidebar-foot .name{ font-size:12.5px; font-weight:600; color:var(--gray-100); }
  .sidebar-foot .role{ font-size:10.5px; color:var(--gray-500); }

  /* ===== MAIN ===== */
  .main{ flex:1; min-width:0; display:flex; flex-direction:column; height:100%; overflow:hidden; }
  .topbar{
    height:62px; background:var(--white); border-bottom:1px solid var(--gray-200);
    display:flex; align-items:center; justify-content:space-between; padding:0 24px; flex-shrink:0;
    position:relative; z-index:20;
  }
  .topbar::before{
    content:''; position:absolute; top:0; right:0; left:0; height:3px;
    background:linear-gradient(90deg, var(--red-600), #E8A33D, var(--green), #4A90D9);
  }
  .topbar-title{ font-size:15.5px; font-weight:700; color:var(--gray-950); }
  .topbar-sub{ font-size:11.5px; color:var(--gray-500); font-weight:500; }
  .search-box{
    display:flex; align-items:center; gap:8px; background:var(--gray-050); border:1px solid var(--gray-200);
    border-radius:20px; padding:7px 14px; width:280px; color:var(--gray-500); font-size:12.5px;
  }
  .topbar-right{ display:flex; align-items:center; gap:16px; }
  .icon-btn{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--gray-050); position:relative; cursor:pointer; color:var(--gray-600);}
  .icon-btn .dot{ position:absolute; top:6px; left:8px; width:7px; height:7px; background:var(--red-500); border-radius:50%; border:2px solid var(--white);}

  .view-tabs{ display:flex; gap:6px; padding:14px 24px 0; background:var(--white); border-bottom:1px solid var(--gray-200); flex-shrink:0;}
  .view-tab{ padding:10px 4px; font-size:13px; font-weight:600; color:var(--gray-500); cursor:pointer; border-bottom:2.5px solid transparent; margin-left:22px;}
  .view-tab.active{ color:var(--red-600); border-color:var(--red-600); }

  .view{ display:none; padding:22px 24px 40px; }
  .content{ padding:22px 24px 40px; flex:1; overflow-y:auto; }
  .view.active{ display:block; }

  /* ===== KPI CARDS ===== */
  .kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
  .kpi-card{ background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-md); padding:16px 18px; position:relative; overflow:hidden;}
  .kpi-card .stripe{ position:absolute; top:0; right:0; width:4px; height:100%; }
  .kpi-label{ font-size:11.5px; color:var(--gray-500); font-weight:600; margin-bottom:8px; display:flex; align-items:center; justify-content:space-between;}
  .kpi-value{ font-size:22px; font-weight:800; color:var(--gray-950); }
  .kpi-unit{ font-size:11px; color:var(--gray-500); font-weight:600; margin-right:4px;}
  .kpi-trend{ font-size:11px; font-weight:700; margin-top:6px; display:flex; align-items:center; gap:4px;}
  .kpi-trend.up{ color:var(--green); }
  .kpi-trend.down{ color:var(--red-600); }
  .kpi-trend.warn{ color:var(--amber); }

  .row-2{ display:grid; grid-template-columns:1.35fr .9fr; gap:14px; margin-bottom:14px; align-items:start; }

  .card{ background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:18px 20px; }
  .card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .card-title{ font-size:14px; font-weight:700; color:var(--gray-950); display:flex; align-items:center; gap:8px;}
  .card-title .dot-ic{ width:7px; height:20px; border-radius:3px; background:var(--red-600); }
  .card-link{ font-size:11.5px; color:var(--red-600); font-weight:600; cursor:pointer; margin-inline-end:12px; display:inline-block; }
  .card-link:last-child{ margin-inline-end:0; }
  td form.inline-action, td > form{ display:inline-block; margin-inline-end:12px; }
  td form.inline-action:last-child, td > form:last-child{ margin-inline-end:0; }

  /* bar chart mock */
  .chart-wrap{ display:flex; align-items:flex-end; gap:12px; height:150px; padding:0 4px; }
  .bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end;}
  .bar{ width:100%; max-width:34px; border-radius:5px 5px 2px 2px; background:var(--gray-200); position:relative; }
  .bar.filled{ background:linear-gradient(180deg, var(--red-500), var(--red-700)); }
  .bar-label{ font-size:10.5px; color:var(--gray-500); font-weight:600; }

  table.mini{ width:100%; border-collapse:collapse; font-size:12.5px; }
  table.mini th{ text-align:right; color:var(--gray-500); font-weight:600; font-size:11px; padding:6px 8px; border-bottom:1px solid var(--gray-200);}
  table.mini td{ padding:9px 8px; border-bottom:1px solid var(--gray-100); vertical-align:middle;}
  table.mini tr:last-child td{ border-bottom:none; }
  .name-cell{ font-weight:600; color:var(--gray-900); }
  .sub-cell{ font-size:10.5px; color:var(--gray-500); display:block; margin-top:1px;}
  .pill{ display:inline-block; padding:3px 9px; border-radius:20px; font-size:10.5px; font-weight:700; white-space:nowrap;}
  .pill-red{ background:var(--red-050); color:var(--red-700); }
  .pill-amber{ background:#FBF1E1; color:var(--amber); }
  .pill-gray{ background:var(--gray-100); color:var(--gray-600); }
  .pill-green{ background:#E7F2E9; color:var(--green); }

  .zone-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--gray-100); }
  .zone-row:last-child{ border-bottom:none; }
  .zone-name{ font-size:12.5px; font-weight:600; width:120px; flex-shrink:0; }
  .zone-bar-track{ flex:1; min-width:110px; width:100%; height:7px; background:var(--gray-100); border-radius:10px; overflow:hidden; display:block; }
  .zone-bar-fill{ height:100%; border-radius:10px; display:block; }
  .zone-pct{ font-size:11.5px; font-weight:700; width:34px; text-align:left; flex-shrink:0; }
  .zone-visit{ font-size:10.5px; color:var(--gray-500); width:78px; flex-shrink:0; }

  /* ===== PROJECT VIEW ===== */
  .proj-header{ display:flex; justify-content:space-between; align-items:flex-start; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:20px 22px; margin-bottom:16px;}
  .proj-title{ font-size:18px; font-weight:800; color:var(--gray-950); margin-bottom:4px;}
  .proj-meta{ display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; }
  .proj-meta-item{ font-size:12px; color:var(--gray-600); display:flex; align-items:center; gap:6px;}
  .proj-meta-item b{ color:var(--gray-900); font-weight:700; }
  .proj-meta-item .lbl{ color:var(--gray-500); font-weight:600;}

  .gauge-box{ text-align:center; flex-shrink:0; margin-right:20px; }
  .gauge-caption{ font-size:11px; color:var(--gray-500); font-weight:700; margin-top:4px; }
  .gauge-caption b{ display:block; font-size:10px; color:var(--gray-400); font-weight:500; margin-top:1px;}

  /* stage stepper */
  .stepper-card{ background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:20px 22px 8px; margin-bottom:16px;}
  .stepper{ display:flex; align-items:center; overflow-x:auto; padding-bottom:12px; gap:0; }
  .step{ display:flex; flex-direction:column; align-items:center; min-width:104px; cursor:pointer; flex-shrink:0; position:relative;}
  .step-line{ position:absolute; top:16px; height:2px; width:100%; left:50%; background:var(--gray-200); z-index:0;}
  .step:last-child .step-line{ display:none; }
  .step.done .step-line{ background:var(--red-500); }
  .step-dot{ width:32px; height:32px; border-radius:50%; background:var(--gray-100); border:2px solid var(--gray-200); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:var(--gray-500); z-index:1; }
  .step.done .step-dot{ background:var(--red-600); border-color:var(--red-600); color:var(--white); }
  .step.current .step-dot{ background:var(--white); border-color:var(--red-600); color:var(--red-600); box-shadow:0 0 0 4px var(--red-050); }
  .step-label{ font-size:11px; font-weight:600; color:var(--gray-500); margin-top:8px; text-align:center; }
  .step.current .step-label, .step.done .step-label{ color:var(--gray-900); }

  .rivet-divider{ position:relative; height:12px; margin:6px 0 14px; }
  .rivet-divider::before{ content:''; position:absolute; top:5px; right:0; left:0; height:2px; background:var(--gray-150,var(--gray-200)); }
  .rivet-divider::after{
    content:''; position:absolute; top:0; right:0; left:0; height:12px;
    background-image: radial-gradient(circle, var(--gray-300) 2px, transparent 2.2px);
    background-size:22px 12px; background-repeat:repeat-x; background-position:center;
  }

  .stage-panel{ background:var(--gray-050); border:1px dashed var(--gray-300); border-radius:var(--radius-md); padding:16px 18px; margin:6px 0 16px; }
  .stage-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
  .stage-panel-title{ font-size:12.5px; font-weight:700; color:var(--gray-900); }
  .stage-panel-grid{ display:grid; grid-template-columns:220px 1fr; gap:18px; }

  .field-label{ font-size:11px; color:var(--gray-500); font-weight:700; margin-bottom:6px; display:block;}
  .value-input{ width:100%; border:1px solid var(--gray-300); background:var(--white); border-radius:var(--radius-sm); padding:9px 12px; font-family:var(--font); font-size:13px; font-weight:700; color:var(--gray-950); }
  .value-input:focus{ outline:none; border-color:var(--red-500); box-shadow:0 0 0 3px var(--red-050); }
  .value-sub{ font-size:10.5px; color:var(--gray-500); margin-top:5px; }

  .invoice-list{ display:flex; flex-direction:column; gap:8px; }
  .invoice-row{ display:flex; align-items:center; gap:10px; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-sm); padding:9px 12px; }
  .invoice-icon{ width:30px; height:30px; border-radius:8px; background:var(--red-050); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .invoice-num{ font-size:12.5px; font-weight:700; color:var(--gray-900); }
  .invoice-date{ font-size:10.5px; color:var(--gray-500); }
  .invoice-amount{ font-size:13px; font-weight:800; color:var(--gray-950); margin-right:auto; }
  .empty-mini{ font-size:11.5px; color:var(--gray-500); text-align:center; padding:14px; border:1px dashed var(--gray-300); border-radius:var(--radius-sm); background:var(--white); }

  .btn{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font); font-size:12px; font-weight:700; padding:8px 14px; border-radius:var(--radius-sm); border:1px solid var(--gray-300); background:var(--white); color:var(--gray-700); cursor:pointer; }
  .btn:hover{ background:var(--gray-050); }
  .btn-primary{ background:var(--red-600); border-color:var(--red-600); color:var(--white); }
  .btn-primary:hover{ background:var(--red-700); }
  .btn-sm{ padding:6px 11px; font-size:11.5px; }

  /* project inner tabs */
  .inner-tabs{ display:flex; gap:4px; background:var(--gray-100); padding:4px; border-radius:var(--radius-md); width:fit-content; margin-bottom:16px;}
  .inner-tab{ padding:8px 16px; font-size:12.5px; font-weight:700; color:var(--gray-600); border-radius:8px; cursor:pointer; }
  .inner-tab.active{ background:var(--white); color:var(--red-600); box-shadow:0 1px 3px rgba(0,0,0,.08); }
  .inner-view{ display:none; }
  .inner-view.active{ display:block; }

  .catalog-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
  .chip{ font-size:11.5px; font-weight:700; padding:6px 12px; border-radius:20px; background:var(--gray-100); color:var(--gray-600); border:1px solid var(--gray-200); cursor:pointer; }
  .chip:hover{ background:var(--red-050); color:var(--red-700); border-color:var(--red-050); }

  table.prod-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
  table.prod-table th{ text-align:right; background:var(--gray-050); color:var(--gray-500); font-weight:700; font-size:10.5px; padding:9px 12px; border-bottom:1px solid var(--gray-200);}
  table.prod-table td{ padding:11px 12px; border-bottom:1px solid var(--gray-100); }
  table.prod-table tfoot td{ font-weight:800; font-size:13.5px; color:var(--gray-950); border-top:2px solid var(--gray-200); border-bottom:none; padding-top:13px;}
  .cat-tag{ font-size:9.5px; font-weight:700; color:var(--red-700); background:var(--red-050); padding:2px 7px; border-radius:5px; margin-right:6px; }

  .person-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
  .person-card{ background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-md); padding:16px 18px; }
  .person-top{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
  .person-avatar{ width:42px; height:42px; border-radius:50%; background:var(--gray-800); color:var(--white); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex-shrink:0; }
  .person-name{ font-size:13.5px; font-weight:700; }
  .person-role{ font-size:11px; color:var(--gray-500); font-weight:600; }
  .disc-row{ display:flex; gap:6px; margin:10px 0; }
  .disc-tag{ flex:1; text-align:center; padding:6px 0; border-radius:6px; font-size:10.5px; font-weight:800; background:var(--gray-100); color:var(--gray-400); }
  .disc-tag.active{ background:var(--red-600); color:var(--white); }
  .person-note{ font-size:11.5px; color:var(--gray-600); line-height:1.8; background:var(--gray-050); border-radius:var(--radius-sm); padding:10px 12px; margin-top:8px; }
  .person-note b{ color:var(--gray-900); }

  .ai-card{ display:grid; grid-template-columns:200px 1fr; gap:24px; align-items:center; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:22px; margin-bottom:14px; }
  .ai-risk-title{ font-size:12px; font-weight:700; color:var(--gray-500); margin-bottom:6px; }
  .ai-risk-text{ font-size:14px; font-weight:700; color:var(--gray-950); margin-bottom:14px; line-height:1.6;}
  .ai-suggest{ background:var(--red-050); border-radius:var(--radius-md); padding:12px 16px; font-size:12.5px; color:var(--red-700); font-weight:600; line-height:1.8; display:flex; gap:10px; }

  .role-switch{ display:flex; gap:3px; background:var(--gray-100); padding:3px; border-radius:20px; }
  .role-btn{ padding:7px 14px; font-size:11.5px; font-weight:700; border-radius:16px; color:var(--gray-500); cursor:pointer; }
  .role-btn.active{ background:var(--red-600); color:var(--white); }
  .role-hidden{ display:none !important; }

  .section-label{ font-size:11px; font-weight:800; color:var(--gray-500); letter-spacing:.04em; text-transform:uppercase; margin:22px 2px 10px; display:flex; align-items:center; gap:8px; }
  .section-label::after{ content:''; flex:1; height:1px; background:var(--gray-200); }
  .scope-note{ font-size:11px; color:var(--gray-500); font-weight:600; background:var(--gray-050); border:1px solid var(--gray-200); border-radius:20px; padding:5px 12px; display:inline-flex; align-items:center; gap:6px; margin-bottom:14px; }

  .funnel-row{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
  .funnel-label{ font-size:11.5px; font-weight:600; color:var(--gray-600); width:96px; flex-shrink:0; }
  .funnel-track{ flex:1; height:20px; background:var(--gray-100); border-radius:6px; overflow:hidden; }
  .funnel-fill{ height:100%; background:linear-gradient(90deg, var(--red-400), var(--red-600)); border-radius:6px; display:flex; align-items:center; justify-content:flex-end; padding:0 8px; }
  .funnel-count{ font-size:10.5px; font-weight:800; color:var(--white); }

  /* ===== CATALOG ===== */
  .cat-card{ background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); margin-bottom:12px; overflow:hidden; }
  .cat-head{ display:flex; align-items:center; gap:12px; padding:16px 20px; cursor:pointer; }
  .cat-icon{ width:38px; height:38px; border-radius:10px; background:var(--red-050); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--red-700); }
  .cat-name{ font-size:14px; font-weight:700; color:var(--gray-950); }
  .cat-count{ font-size:11px; color:var(--gray-500); font-weight:600; }
  .cat-chevron{ margin-right:auto; transition:.2s; color:var(--gray-400); }
  .cat-card.open .cat-chevron{ transform:rotate(180deg); }
  .cat-body{ display:none; border-top:1px solid var(--gray-100); padding:6px 20px 16px; }
  .cat-card.open .cat-body{ display:block; }
  table.price-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
  table.price-table th{ text-align:right; color:var(--gray-500); font-weight:700; font-size:10.5px; padding:10px 10px 8px; }
  table.price-table td{ padding:10px; border-top:1px solid var(--gray-100); }
  .trend-up{ color:var(--green); font-weight:700; font-size:11px; }
  .trend-down{ color:var(--red-600); font-weight:700; font-size:11px; }
  .trend-flat{ color:var(--gray-400); font-weight:700; font-size:11px; }
  .price-cell{ font-weight:800; color:var(--gray-950); }

  /* ===== GALLERY ===== */
  .filter-bar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
  .filter-chip{ font-size:11.5px; font-weight:700; padding:7px 14px; border-radius:20px; background:var(--white); color:var(--gray-600); border:1px solid var(--gray-200); cursor:pointer; }
  .filter-chip.active{ background:var(--red-600); color:var(--white); border-color:var(--red-600); }
  .gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
  .photo-card{ background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-md); padding:10px; }
  .photo-thumb{ aspect-ratio:4/3; border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:9px; }
  .photo-thumb.type-product{ background:linear-gradient(135deg, var(--red-050), #f3d9d6); color:var(--red-700); }
  .photo-thumb.type-project{ background:linear-gradient(135deg, var(--gray-100), var(--gray-200)); color:var(--gray-600); }
  .photo-title{ font-size:12px; font-weight:700; color:var(--gray-900); margin-bottom:6px; line-height:1.4; }
  .photo-tags{ display:flex; gap:5px; flex-wrap:wrap; }
  .photo-tag{ font-size:9.5px; font-weight:700; padding:2px 8px; border-radius:10px; background:var(--gray-100); color:var(--gray-600); }
  .upload-card{ border:1.5px dashed var(--gray-300); border-radius:var(--radius-md); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px; cursor:pointer; color:var(--gray-500); background:var(--gray-050); min-height:170px; }
  .upload-card:hover{ border-color:var(--red-400); color:var(--red-600); }
  .upload-box{ background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:18px 20px; margin-bottom:16px; display:none; }
  .upload-box.open{ display:block; }
  .upload-grid{ display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:end; }
  .select-input{ width:100%; border:1px solid var(--gray-300); background:var(--white); border-radius:var(--radius-sm); padding:9px 12px; font-family:var(--font); font-size:12.5px; color:var(--gray-900); }

  /* ===== CONSTRUCTION PHASE (separate from sales stage) ===== */
  .phase-card{ background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:16px 22px 6px; margin-bottom:16px; }
  .phase-title-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .phase-title{ font-size:12.5px; font-weight:700; color:var(--gray-900); display:flex; align-items:center; gap:8px; }
  .phase-title .dot-ic-alt{ width:7px; height:20px; border-radius:3px; background:var(--gray-600); }
  .phase-hint{ font-size:10.5px; color:var(--gray-500); font-weight:600; }
  .phase-stepper{ display:flex; align-items:center; overflow-x:auto; padding-bottom:14px; gap:0; }
  .phase{ display:flex; flex-direction:column; align-items:center; min-width:92px; flex-shrink:0; position:relative; }
  .phase-line{ position:absolute; top:14px; height:2px; width:100%; left:50%; background:var(--gray-200); z-index:0; }
  .phase:last-child .phase-line{ display:none; }
  .phase.done .phase-line{ background:var(--gray-500); }
  .phase-dot{ width:28px; height:28px; border-radius:50%; background:var(--gray-100); border:2px solid var(--gray-200); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--gray-500); z-index:1; }
  .phase.done .phase-dot{ background:var(--gray-700); border-color:var(--gray-700); color:var(--white); }
  .phase.current .phase-dot{ background:var(--white); border-color:var(--gray-700); color:var(--gray-700); box-shadow:0 0 0 4px var(--gray-100); }
  .phase-label{ font-size:10.5px; font-weight:600; color:var(--gray-500); margin-top:7px; text-align:center; }
  .phase.current .phase-label, .phase.done .phase-label{ color:var(--gray-900); }

  /* ===== PEOPLE / INFLUENCE ===== */
  .person-head-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .role-select{ border:1px solid var(--gray-300); background:var(--gray-050); border-radius:var(--radius-sm); padding:5px 10px; font-family:var(--font); font-size:10.5px; font-weight:700; color:var(--gray-700); }
  .influence-label-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; }
  .influence-label{ font-size:10.5px; color:var(--gray-500); font-weight:700; }
  .influence-pct{ font-size:11px; font-weight:800; }
  .influence-track{ height:7px; background:var(--gray-100); border-radius:10px; overflow:hidden; margin-bottom:8px; }
  .influence-fill{ height:100%; border-radius:10px; }
  .warn-badge{ display:flex; align-items:center; gap:6px; background:#FBF1E1; color:var(--amber); font-size:10.5px; font-weight:700; padding:6px 10px; border-radius:var(--radius-sm); margin-bottom:8px; }
  .unknown-track{ background:repeating-linear-gradient(135deg, var(--gray-200), var(--gray-200) 4px, var(--gray-100) 4px, var(--gray-100) 8px); }

  /* ===== COMMENTS / AI PER STAGE ===== */
  .stage-extra{ display:grid; grid-template-columns:1.2fr 1fr; gap:18px; margin-top:16px; }
  .comment-list{ display:flex; flex-direction:column; gap:8px; max-height:190px; overflow-y:auto; margin-bottom:10px; }
  .comment-item{ background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-sm); padding:8px 11px; }
  .comment-author{ font-size:11px; font-weight:700; color:var(--gray-900); }
  .comment-date{ font-size:9.5px; color:var(--gray-400); font-weight:600; margin-right:6px; }
  .comment-text{ font-size:11.5px; color:var(--gray-600); margin-top:3px; line-height:1.6; }
  .comment-input-row{ display:flex; gap:8px; }
  .comment-input{ flex:1; border:1px solid var(--gray-300); background:var(--white); border-radius:var(--radius-sm); padding:8px 11px; font-family:var(--font); font-size:12px; }
  .stage-ai-box{ background:var(--red-050); border-radius:var(--radius-md); padding:12px 14px; font-size:11.5px; color:var(--red-700); font-weight:600; line-height:1.8; display:flex; gap:8px; align-items:flex-start; height:fit-content; }

  /* ===== PAYMENT PREFERENCE ===== */
  .payment-select{ border:1px solid var(--gray-300); background:var(--gray-050); border-radius:20px; padding:5px 12px; font-family:var(--font); font-size:11.5px; font-weight:700; color:var(--red-700); }

  /* ===== ACCESS / USERS VIEW ===== */
  .access-note{ background:var(--red-050); border-radius:var(--radius-md); padding:12px 16px; font-size:12px; color:var(--red-700); font-weight:600; line-height:1.8; margin-bottom:16px; }
  .scope-chip{ font-size:10px; font-weight:700; padding:2px 9px; border-radius:10px; background:var(--gray-100); color:var(--gray-600); margin-left:4px; display:inline-block; margin-top:2px; }

  /* ===== PROJECTS LIST / ACCESS LOCKS ===== */
  .locked-row td{ opacity:.5; }
  .lock-note{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; color:var(--gray-500); white-space:nowrap; }
  .back-link{ font-size:12px; color:var(--red-600); font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:5px; margin-bottom:12px; }

  /* ===== TARGET LADDER ===== */
  .ladder{ display:flex; height:52px; border-radius:var(--radius-md); overflow:visible; position:relative; margin:22px 0 10px; }
  .ladder-seg{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:10.5px; font-weight:700; border:1px solid var(--gray-200); }
  .ladder-seg:first-child{ border-radius:0 var(--radius-md) var(--radius-md) 0; }
  .ladder-seg:last-child{ border-radius:var(--radius-md) 0 0 var(--radius-md); }
  .ladder-seg .seg-range{ font-size:9.5px; font-weight:600; opacity:.85; }
  .ladder-marker{ position:absolute; top:-7px; bottom:-7px; width:3px; background:var(--red-600); border-radius:3px; }
  .ladder-marker::after{ content:attr(data-label); position:absolute; top:-17px; right:50%; transform:translateX(50%); font-size:10px; font-weight:800; color:var(--red-600); white-space:nowrap; }
  .target-progress-row{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--gray-100); }
  .target-progress-row:last-child{ border-bottom:none; }
  .tp-name{ width:150px; font-size:12.5px; font-weight:700; flex-shrink:0; }
  .tp-track{ flex:1; height:8px; background:var(--gray-100); border-radius:10px; overflow:hidden; }
  .tp-fill{ height:100%; border-radius:10px; background:var(--red-500); }
  .tp-val{ font-size:11px; font-weight:700; color:var(--gray-600); width:170px; text-align:left; flex-shrink:0; }

  /* ===== SETTINGS ===== */
  .settings-list{ list-style:none; }
  .settings-list li{ display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--gray-100); font-size:12.5px; font-weight:600; }
  .settings-list li:last-child{ border-bottom:none; }
  .drag-dots{ color:var(--gray-300); font-size:13px; letter-spacing:1px; cursor:grab; }
  .mini-form-row{ display:flex; gap:8px; margin-top:12px; align-items:center; }

  /* ===== NOTIFICATIONS ===== */
  .notif-wrap{ position:relative; }
  .notif-dropdown{ display:none; position:absolute; top:44px; left:0; width:320px; max-height:400px; overflow-y:auto; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-md); box-shadow:0 8px 24px rgba(0,0,0,.12); z-index:50; }
  .notif-dropdown.open{ display:block; }
  .notif-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--gray-100); font-size:12.5px; font-weight:700; position:sticky; top:0; background:var(--white); }
  .notif-item{ padding:10px 14px; border-bottom:1px solid var(--gray-100); }
  .notif-item:last-child{ border-bottom:none; }
  .notif-item.unread{ background:var(--red-050); }
  .notif-msg{ font-size:12px; font-weight:600; color:var(--gray-900); line-height:1.7; }
  .notif-time{ font-size:10px; color:var(--gray-500); margin-top:3px; }

  @media (max-width: 980px){
    .kpi-grid{ grid-template-columns:repeat(2,1fr); }
    .row-2{ grid-template-columns:1fr; }
    .stage-panel-grid{ grid-template-columns:1fr; }
    .stage-extra{ grid-template-columns:1fr; }
    .person-grid{ grid-template-columns:1fr; }
    .ai-card{ grid-template-columns:1fr; text-align:center; }
    .sidebar{ display:none; }
    .gallery-grid{ grid-template-columns:repeat(2,1fr); }
    .upload-grid{ grid-template-columns:1fr; }
  }