:root {
      --font-ui:      'DM Sans', ui-sans-serif, sans-serif;
      --font-display: 'Space Grotesk', ui-sans-serif, sans-serif;
      --font-mono:    'JetBrains Mono', ui-monospace, monospace;

      --bg: #0e0e0e;
      --bg2: #141414;
      --bg3: #1c1c1c;
      --panel: rgba(20, 20, 20, .94);
      --panel2: rgba(28, 28, 28, .92);
      --text: #fdfdfd;
      --muted: #7a7a8a;
      --hint: #3a3a4a;
      --line: rgba(255, 255, 255, .08);
      --primary: #6c00ff;
      --primary2: #9b4dff;
      --primary-bg: rgba(108, 0, 255, .08);
      --blue: #2563eb;
      --cyan: #0891b2;
      --green: #16a34a;
      --yellow: #f6bd3a;
      --orange: #ea580c;
      --red: #f22822;
      --shadow: 0 24px 64px rgba(0, 0, 0, .64);
      --radius: 16px;
      --input: rgba(20, 20, 20, .9);
    }

    [data-theme="light"] {
      --bg: #f0f2f5;
      --bg2: #ffffff;
      --panel: rgba(255, 255, 255, .98);
      --panel2: rgba(244, 246, 249, .98);
      --text: #1a2332;
      --muted: #4a5568;
      --line: rgba(30, 41, 59, .14);
      --input: #ffffff;
      --shadow: 0 2px 12px rgba(0, 0, 0, .09);
      --primary: #5b4ee8;
      --primary2: #7c6fef;
      --blue: #2563eb;
      --cyan: #0891b2;
      --green: #16a34a;
      --yellow: #ca8a04;
      --orange: #ea580c;
      --red: #dc2626;
    }

    [data-theme="light"] body {
      background:
        radial-gradient(circle at top left, rgba(91,78,232,.06), transparent 40%),
        linear-gradient(160deg, #f0f2f5 0%, #e6e9ee 100%);
    }

    [data-theme="light"] .topbar {
      background: rgba(255, 255, 255, .96);
      border-bottom-color: rgba(30, 41, 59, .12);
    }

    * {
      box-sizing: border-box;
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }

    html,
    body {
      min-height: 100%;
    }

    body {
      margin: 0;
      font-family: var(--font-ui);
      background:
        radial-gradient(circle at top left, rgba(108, 0, 255, .12), transparent 40%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
      color: var(--text);
    }

    button,
    input,
    textarea,
    select {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    .app {
      min-height: 100vh;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 50;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      padding: 14px 22px;
      border-bottom: 1px solid var(--line);
      background: rgba(7, 11, 20, .72);
      backdrop-filter: blur(18px);
    }



    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 215px;
    }

    .logo {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--primary), var(--blue));
      box-shadow: 0 12px 36px rgba(124, 58, 237, .35);
      color: #fff;
      font-weight: 900;
      flex: 0 0 auto;
      overflow: hidden;
    }

    .logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    .logo span {
      display: none;
      line-height: 1;
    }

    .brand h1 {
      margin: 0;
      font-size: 16px;
      line-height: 1.1;
      letter-spacing: .2px;
    }

    .brand p {
      margin: 3px 0 0;
      color: var(--muted);
      font-size: 12px;
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 4px;
      overflow-x: auto;
      scrollbar-width: none;
      padding: 2px 0;
    }

    .nav::-webkit-scrollbar {
      display: none;
    }

    .nav button,
    .btn {
      border: 1px solid var(--line);
      background: rgba(15, 23, 42, .45);
      color: var(--text);
      border-radius: 12px;
      padding: 9px 13px;
      transition: .16s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      white-space: nowrap;
      text-decoration: none;
    }

    .nav button {
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 750;
      border-radius: 10px;
    }

    .nav-icon-btn svg {
      opacity: .7;
      flex: 0 0 auto;
    }
    .nav-icon-btn:hover svg, .nav-icon-btn.active svg { opacity: 1; }

    [data-theme="light"] .nav button,
    [data-theme="light"] .btn {
      background: rgba(255, 255, 255, .78);
    }

    .nav button:hover,
    .btn:hover {
      transform: translateY(-1px);
      border-color: rgba(168, 85, 247, .55);
      background: rgba(124,58,237,.1);
    }

    .nav button.active {
      background: linear-gradient(135deg, var(--primary), var(--blue));
      border-color: transparent;
      color: #fff;
    }

    /* Deal bar gets extra top margin to breathe */
    .deal-bar { margin-top: 4px; }

    .top-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: flex-end;
      min-width: 175px;
    }

    .container {
      width: min(1520px, calc(100% - 32px));
      margin: 22px auto 42px;
    }

    .layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 18px;
      align-items: start;
    }

    .panel,
    .summary,
    .item,
    .package-card,
    .project-card,
    .client-card,
    .task-card,
    .finance-card,
    .team-card,
    .calendar-card,
    .crm-card,
    .proposal-preview {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .panel {
      padding: 18px;
      min-width: 0; /* без этого .panel как грид-ячейка раздувается под min-content контента (напр. .fin-summary-grid) и ломает мобильную раскладку */
    }

    .summary {
      position: sticky;
      top: 86px;
      padding: 18px;
    }

    .section-title {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 16px;
    }

    h1,
    h2,
    h3 {
      margin-top: 0;
      line-height: 1.15;
    }

    h1 {
      margin-bottom: 6px;
      font-size: 30px;
      letter-spacing: -.035em;
    }

    h2 {
      font-size: 22px;
      letter-spacing: -.025em;
    }

    h3 {
      margin-bottom: 8px;
      font-size: 17px;
      letter-spacing: -.015em;
    }

    p {
      color: var(--muted);
      line-height: 1.45;
    }

    .grid {
      display: grid;
      gap: 14px;
    }

    .grid.two {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid.three {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid.four {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .grid.five {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .field {
      display: grid;
      gap: 6px;
    }

    .field label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
    }

    input,
    select,
    textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px 11px;
      background: var(--input);
      color: var(--text);
      outline: none;
    }

    textarea {
      min-height: 92px;
      resize: vertical;
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: rgba(168, 85, 247, .65);
      box-shadow: 0 0 0 4px rgba(124, 58, 237, .14);
    }

    input.input-error {
      border-color: var(--red) !important;
      box-shadow: 0 0 0 3px rgba(220, 38, 38, .15) !important;
    }

    .field-error-msg {
      font-size: 11px;
      color: var(--red);
      margin-top: 2px;
    }

    .toolbar {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }

    .btn.primary {
      background: linear-gradient(135deg, var(--primary), var(--primary2));
      border-color: transparent;
      color: #fff;
    }

    .btn.blue {
      background: linear-gradient(135deg, var(--blue), var(--cyan));
      border-color: transparent;
      color: #fff;
    }

    .btn.green {
      background: linear-gradient(135deg, var(--green), #059669);
      border-color: transparent;
      color: #fff;
    }

    .btn.yellow {
      background: linear-gradient(135deg, var(--yellow), var(--orange));
      border-color: transparent;
      color: #fff;
    }

    .btn.danger {
      background: linear-gradient(135deg, var(--red), #b91c1c);
      border-color: transparent;
      color: #fff;
    }

    .btn.small {
      padding: 7px 10px;
      font-size: 13px;
    }

    .btn.full {
      width: 100%;
    }

    .tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin: 14px 0 16px;
    }

    .tab {
      border: 1px solid var(--line);
      background: var(--panel2);
      color: var(--text);
      border-radius: 999px;
      padding: 9px 12px;
    }

    .tab.active {
      background: linear-gradient(135deg, var(--primary), var(--blue));
      color: #fff;
      border-color: transparent;
    }

    .list {
      display: grid;
      gap: 12px;
    }

    .item,
    .package-card,
    .project-card,
    .client-card,
    .task-card,
    .finance-card,
    .team-card,
    .calendar-card,
    .crm-card {
      padding: 16px;
      position: relative;
    }

    .item.selected {
      border-color: rgba(22, 163, 74, .55);
    }

    .item.optional {
      border-style: dashed;
      border-color: rgba(202, 138, 4, .75);
    }

    .item.hidden-item {
      opacity: .72;
      border-style: dashed;
    }

    .item-top,
    .line-head {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      align-items: flex-start;
    }

    .price {
      font-size: 23px;
      font-weight: 850;
      font-family: var(--font-display);
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
      white-space: nowrap;
    }

    .price-editor {
      width: 190px;
      display: grid;
      gap: 8px;
      text-align: right;
    }

    .price-editor input {
      text-align: right;
    }

    .badges {
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
      margin-top: 10px;
    }

    .badge,
    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 5px 8px;
      color: var(--muted);
      font-size: 11px;
      background: rgba(15, 23, 42, .35);
      opacity: .92;
    }

    .status-pill {
      color: var(--text);
      font-weight: 850;
      background: rgba(124, 58, 237, .16);
    }

    .status-pill.green {
      color: #86efac;
    }

    .status-pill.yellow {
      color: var(--yellow);
    }

    [data-theme="light"] .status-pill.green {
      color: #15803d;
    }

    [data-theme="light"] .status-pill.yellow {
      color: #a16207;
    }

    .summary-line {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid var(--line);
    }

    .summary-line strong {
      text-align: right;
    }

    .summary-total {
      margin-top: 16px;
      padding: 16px;
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(124, 58, 237, .22), rgba(37, 99, 235, .18));
      display: grid;
      gap: 4px;
    }

    .summary-total strong {
      font-size: 30px;
    }

    .empty {
      padding: 30px;
      border: 1px dashed var(--line);
      border-radius: var(--radius);
      color: var(--muted);
      text-align: center;
    }

    .calc-box {
      padding: 14px;
      margin-top: 14px;
      background: var(--panel2);
      box-shadow: none;
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }

    .mini-note {
      font-size: 12px;
      color: var(--muted);
    }

    .line-name-input {
      font-size: 16px;
      font-weight: 850;
      background: transparent;
      border: 1px solid transparent;
      padding: 2px 6px;
      border-radius: 8px;
      width: 100%;
      display: block;
      color: var(--text);
      letter-spacing: -.01em;
    }
    .line-name-input::placeholder { color: var(--text); opacity: 0.9; }
    .line-name-input:hover { border-color: var(--line); }
    .line-name-input:focus {
      background: var(--input);
      border-color: rgba(168,85,247,.65);
      box-shadow: 0 0 0 4px rgba(124,58,237,.14);
    }

    .line-desc-input {
      min-height: 36px;
      font-size: 13px;
      color: var(--muted);
      background: transparent;
      resize: none;
      border: 1px solid transparent;
      padding: 2px 6px;
      border-radius: 8px;
      width: 100%;
      display: block;
      margin-top: 2px;
      line-height: 1.45;
    }

    .line-desc-input:hover {
      border-color: var(--line);
    }

    .line-desc-input:focus {
      background: var(--input);
      border-color: rgba(168, 85, 247, .65);
      color: var(--text);
      box-shadow: 0 0 0 4px rgba(124, 58, 237, .14);
    }

    .home-clients-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }

    .home-client-card {
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--panel2);
      cursor: pointer;
      transition: .15s ease;
    }

    .home-client-card:hover {
      border-color: rgba(168, 85, 247, .55);
      transform: translateY(-1px);
    }

    .home-client-card h3 {
      margin: 0 0 3px;
      font-size: 14px;
    }

    .home-client-card p {
      margin: 0;
      font-size: 12px;
    }

    .drag-handle {
      width: 26px;
      height: 26px;
      border-radius: 9px;
      display: grid;
      place-items: center;
      color: var(--muted);
      border: 1px solid var(--line);
      margin-top: 2px;
      cursor: grab;
      user-select: none;
      flex: 0 0 auto;
    }

    .proposal-preview {
      margin-top: 16px;
      padding: 24px;
      color: #111827;
      background: #fff;
      overflow-x: auto;
    }

    .proposal-preview p {
      color: #374151;
    }

    .proposal-preview table,
    #printArea table {
      width: 100%;
      border-collapse: collapse;
      margin: 12px 0 20px;
    }

    .proposal-preview th,
    .proposal-preview td,
    #printArea th,
    #printArea td {
      border-bottom: 1px solid #e5e7eb;
      padding: 10px;
      text-align: left;
      vertical-align: top;
    }

    .toast {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 120;
      padding: 13px 16px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--panel);
      color: var(--text);
      box-shadow: var(--shadow);
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
      transition: .18s ease;
    }

    .toast.show {
      opacity: 1;
      transform: translateY(0);
    }

    mark {
      background: rgba(250, 204, 21, .55);
      color: inherit;
      padding: 0 2px;
      border-radius: 4px;
    }

    .hidden-bar {
      padding: 14px;
      border-radius: 16px;
      background: rgba(202, 138, 4, .13);
      border: 1px solid rgba(202, 138, 4, .38);
      margin-bottom: 14px;
    }

    .pill-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 22px;
      height: 22px;
      padding: 0 7px;
      border-radius: 999px;
      background: rgba(124, 58, 237, .22);
      color: var(--text);
      font-size: 12px;
      font-weight: 850;
    }

    .metric-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 12px;
    }

    .metric {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 10px;
      background: rgba(255, 255, 255, .035);
    }

    .metric span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }

    .metric strong {
      display: block;
      margin-top: 4px;
      font-size: 15px;
    }

    .kanban {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }

    .kanban-col {
      background: var(--panel2);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 14px;
      min-height: 220px;
    }

    .kanban-col h3 {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .task-card,
    .finance-card,
    .team-card,
    .calendar-card,
    .crm-card {
      box-shadow: none;
      background: rgba(15, 23, 42, .44);
    }

    [data-theme="light"] .task-card,
    [data-theme="light"] .finance-card,
    [data-theme="light"] .team-card,
    [data-theme="light"] .calendar-card,
    [data-theme="light"] .crm-card {
      background: rgba(255, 255, 255, .74);
    }

    .client-mode .nav,
    .client-mode .client-hidden {
      display: none !important;
    }

    .client-mode .layout {
      grid-template-columns: 1fr;
    }

    .client-mode .summary {
      display: none !important;
    }

    .client-mode .proposal-preview {
      margin-top: 0;
    }

    .estimate-toolbar {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }

    .estimate-toolbar .btn {
      padding: 8px 12px;
    }

    .estimate-stage {
      padding: 16px;
      margin-top: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .03);
    }

    .estimate-stage-head {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: flex-start;
      margin-bottom: 12px;
    }

    .estimate-stage-title {
      display: grid;
      gap: 4px;
    }

    .estimate-stage-title h2 {
      margin-bottom: 0;
      font-size: 20px;
    }

    .estimate-stage-meta {
      color: var(--muted);
      font-size: 12px;
    }

    .estimate-stage-tools {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .line-collapsed-note {
      padding: 10px 12px;
      margin-top: 10px;
      border: 1px dashed var(--line);
      border-radius: 14px;
      color: var(--muted);
      font-size: 13px;
      background: rgba(255, 255, 255, .03);
    }

    .catalog-price-input {
      max-width: 190px;
    }

    .proposal-brand {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px;
    }

    .proposal-brand img {
      width: 54px;
      height: 54px;
      object-fit: contain;
    }

    .proposal-brand h1 {
      margin: 0;
    }

    .proposal-brand p {
      margin: 3px 0 0;
    }

    .estimate-line-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .line-total-note {
      color: var(--muted);
      font-size: 12px;
      margin-top: -2px;
    }

    .quick-actions-box {
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255, 255, 255, .035);
      margin-top: 14px;
    }

    .quick-actions-box h3 {
      margin-bottom: 8px;
      font-size: 15px;
    }

    #printArea {
      display: none;
    }

    @media print {
      body {
        background: #fff !important;
      }

      .topbar,
      .mobile-bottom-nav,
      .toast,
      .toast.show,
      #toast,
      #printArea,
      .no-print,
      .section-title.no-print {
        display: none !important;
        visibility: hidden !important;
      }

      .container {
        width: 100% !important;
        margin: 0 !important;
      }

      .panel {
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
      }
    }

    /* ── MEDIUM SCREENS (1161–1600px): icon-only nav ────────────────────── */
    @media (min-width: 1161px) and (max-width: 1600px) {
      .nav-label { display: none; }
      .nav button { padding: 9px; gap: 0; justify-content: center; min-width: 34px; }
      .brand p { display: none; }
      .autosave-indicator { display: none; }
      #undoBtn, #redoBtn { display: none; }
      .admin-indicator {
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
      }
    }

    @media (max-width: 1160px) {
      /* Топбар: 3 колонки с бургером вместо nav-строки */
      .topbar {
        grid-template-columns: auto 1fr auto;
        align-items: center;
        padding: 10px 16px;
        gap: 10px;
      }

      .nav { display: none; }
      .burger-btn { display: inline-flex; }
      .brand p { display: none; }
      .brand { min-width: 0; }
      .top-actions { gap: 4px; min-width: 0; }
      .autosave-indicator { display: none; }
      #undoBtn, #redoBtn { display: none; }
      .admin-indicator {
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
      }

      .layout,
      .kanban {
        grid-template-columns: 1fr;
      }

      .summary {
        position: static;
      }

      .grid.five,
      .grid.four,
      .grid.three,
      .grid.two {
        grid-template-columns: 1fr;
      }

      .brand,
      .top-actions {
        min-width: 0;
      }
    }

    @media (max-width: 720px) {
      .container {
        width: calc(100% - 16px);
      }

      .topbar {
        grid-template-columns: auto 1fr auto;
        padding: 10px 14px;
        gap: 10px;
      }

      .nav { display: none; }

      .burger-btn { display: inline-flex; }

      .brand { min-width: 0; }
      .brand h1 { font-size: 14px; }
      .brand p { display: none; }

      .top-actions { gap: 4px; min-width: 0; }
      .autosave-indicator { display: none; }
      #themeBtn, #clientModeBtn, .help-btn, .global-add-wrap, #settingsIconBtn, #searchBtn, #undoBtn, #redoBtn { display: none; }
      /* Profile page mobile fixes */
      .plan-card { padding: 14px; }
      .plan-card .plan-price { font-size: 22px; }
      .section-title h1 { font-size: 20px; }
      /* Auth gate mobile */
      .auth-gate-box { padding: 24px 18px; max-width: 100%; margin: 8px; }
      /* Admin indicator compact on mobile */
      .admin-indicator { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; padding: 4px 6px; }

      .toolbar { flex-direction: column; align-items: stretch; }

      .item-top,
      .section-title,
      .line-head,
      .estimate-stage-head {
        flex-direction: column;
      }

      .price-editor {
        width: 100%;
        text-align: left;
      }

      .price-editor input {
        text-align: left;
      }

      h1 {
        font-size: 22px;
      }

      .metric-grid {
        grid-template-columns: 1fr;
      }

      .grid.three,
      .grid.two {
        grid-template-columns: 1fr;
      }

      .deal-card-footer {
        flex-wrap: wrap;
        gap: 6px;
      }

      /* Compact topbar on mobile */
      .presence-area { display: none; }
      .admin-indicator { max-width: 90px; font-size: 10px; padding: 3px 7px; }
      .profile-avatar-btn { width: 28px; height: 28px; font-size: 12px; }

      /* Profile page mobile: tiers scrollable row */
      .grid.five {
        grid-template-columns: repeat(5, minmax(200px, 1fr));
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        padding-bottom: 8px; scrollbar-width: none;
      }
      .grid.five::-webkit-scrollbar { display: none; }
      .plan-card { padding: 12px; }


      /* Section title on mobile */
      .section-title { gap: 10px; }
      .section-title h1 { font-size: 20px; }

      /* Deal bar compact */
      .deal-compact-row { flex-direction: column; gap: 8px; }
      .deal-stats-inline { flex-wrap: wrap; gap: 6px; }
      .deal-nav-group { flex-wrap: wrap; gap: 6px; }
      .next-action-btn { font-size: 12px; padding: 6px 10px; }
    }

    /* ── GLOBAL SEARCH ──────────────────────────── */
    .search-modal {
      position: fixed; inset: 0; z-index: 600;
      background: rgba(7,11,20,.75); backdrop-filter: blur(8px);
      display: flex; align-items: flex-start; justify-content: center;
      padding-top: 80px;
    }
    .search-box {
      width: min(600px, calc(100vw - 32px)); background: var(--panel);
      border-radius: 20px; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.5);
      overflow: hidden;
    }
    .search-result {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 16px; cursor: pointer; transition: .1s;
    }
    .search-result:hover { background: rgba(124,58,237,.1); }
    .search-result-icon { width: 32px; height: 32px; border-radius: 8px; flex: 0 0 32px; display: flex; align-items: center; justify-content: center; font-size: 15px; }
    .search-result-name { font-size: 13px; font-weight: 750; }
    .search-result-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
    .search-section { padding: 8px 16px 4px; font-size: 10px; font-weight: 850; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

    /* ── PROFILE DROPDOWN ───────────────────────── */
    .profile-dd-wrap { position: relative; }
    .profile-dd {
      position: absolute; top: calc(100% + 10px); right: 0;
      width: 230px; background: var(--panel); border: 1px solid var(--line);
      border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.45);
      z-index: 300; overflow: hidden; display: none;
    }
    .profile-dd.open { display: block; animation: fadeIn .15s ease; }
    [data-theme="light"] .profile-dd { box-shadow: 0 8px 32px rgba(0,0,0,.15); }
    .pd-head {
      display: flex; align-items: center; gap: 10px;
      padding: 14px 16px 12px; border-bottom: 1px solid var(--line);
    }
    .pd-avatar {
      width: 38px; height: 38px; border-radius: 50%; flex: 0 0 38px;
      background: linear-gradient(135deg, var(--primary), var(--blue));
      display: flex; align-items: center; justify-content: center;
      font-size: 15px; font-weight: 900; color: #fff; overflow: hidden;
    }
    .pd-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .pd-email { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pd-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
    .pd-sep { height: 1px; background: var(--line); margin: 4px 0; }
    .pd-item {
      display: flex; align-items: center; gap: 10px;
      width: 100%; padding: 9px 16px; border: none; background: none;
      color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer;
      text-align: left; transition: .12s;
    }
    .pd-item:hover { background: rgba(124,58,237,.08); color: var(--primary2); }
    .pd-item.danger { color: var(--red); }
    .pd-item.danger:hover { background: rgba(220,38,38,.07); color: var(--red); }
    .pd-item-icon { width: 18px; text-align: center; opacity: .7; font-size: 14px; flex: 0 0 18px; }

    /* ── HELP DROPDOWN ───────────────────────────── */
    .help-dd-wrap { position: relative; }
    .help-dd-wrap--hidden { display: none; }
    .help-dd {
      position: absolute; top: calc(100% + 10px); right: 0;
      width: 240px; background: var(--panel); border: 1px solid var(--line);
      border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.45);
      z-index: 300; overflow: hidden; display: none; padding: 6px 0;
    }
    .help-dd.open { display: block; animation: fadeIn .15s ease; }
    .help-dd-section { padding: 6px 14px 2px; font-size: 10px; font-weight: 850; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
    .help-dd-item {
      display: flex; align-items: center; gap: 10px;
      width: 100%; padding: 8px 16px; border: none; background: none;
      color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer;
      text-align: left; transition: .12s; text-decoration: none;
    }
    .help-dd-item:hover { background: rgba(124,58,237,.08); color: var(--primary2); }
    .help-dd-item .hdi-sub { font-size: 10px; font-weight: 500; color: var(--muted); margin-top: 1px; }
    .help-dd-item-icon { width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex: 0 0 20px; }

    /* ── CURRENCY DROPDOWN ───────────────────────── */
    .currency-select-wrap { position: relative; }
    .currency-select-btn {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      width: 100%; padding: 10px 14px; border: 1px solid var(--line);
      border-radius: 12px; background: var(--input); color: var(--text);
      font-size: 14px; font-weight: 700; cursor: pointer; transition: .14s;
    }
    .currency-select-btn:hover { border-color: rgba(124,58,237,.5); }
    .currency-select-dd {
      position: absolute; top: calc(100% + 4px); left: 0; right: 0;
      background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
      box-shadow: 0 12px 40px rgba(0,0,0,.3); z-index: 200; overflow: hidden;
      display: none;
    }
    .currency-select-dd.open { display: block; animation: fadeIn .12s ease; }
    .currency-opt {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px; cursor: pointer; transition: .12s;
      font-size: 13px; border: none; background: none; color: var(--text);
      width: 100%; text-align: left;
    }
    .currency-opt:hover { background: rgba(124,58,237,.08); }
    .currency-opt.active { background: rgba(124,58,237,.12); color: var(--primary2); font-weight: 750; }
    .currency-sym { font-size: 15px; font-weight: 900; width: 22px; text-align: center; opacity: .8; }

    /* ── MOBILE BOTTOM NAV ──────────────────────── */
    .mobile-bottom-nav {
      display: none;
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 110;
      background: rgba(10,10,18,.96);
      border-top: 1px solid var(--line);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      backdrop-filter: blur(20px) saturate(180%);
      padding: 8px 4px env(safe-area-inset-bottom, 8px);
      gap: 0;
      align-items: center;
    }
    [data-theme="light"] .mobile-bottom-nav { background: rgba(255,255,255,.96); }
    .mbn-item {
      flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 3px; padding: 2px 2px 4px; border: none; background: none;
      color: var(--muted); font-size: 10px; font-weight: 700; cursor: pointer;
      transition: .15s; min-width: 0; overflow: hidden; position: relative;
    }
    .mbn-item.active { color: var(--primary2); }
    .mbn-item.active::after {
      content: ""; position: absolute; bottom: 2px;
      width: 4px; height: 4px; border-radius: 50%;
      background: var(--primary2);
    }
    .mbn-item:active { transform: scale(.9); }
    .mbn-item svg { flex: 0 0 auto; display: block; }
    .mbn-item.active svg { filter: drop-shadow(0 0 4px rgba(155,77,255,.5)); }
    .mbn-add {
      flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%;
      background: linear-gradient(135deg, var(--primary), var(--blue));
      color: #fff; font-size: 26px; font-weight: 300; line-height: 1;
      box-shadow: 0 4px 20px rgba(124,58,237,.55);
      display: flex; align-items: center; justify-content: center;
      border: none; cursor: pointer; margin-top: -18px; transition: .15s;
      flex-shrink: 0; position: relative; z-index: 1;
    }
    .mbn-add:hover { box-shadow: 0 6px 24px rgba(124,58,237,.7); }
    .mbn-add:active { transform: scale(.9); }
    @media (max-width: 720px) {
      .mobile-bottom-nav { display: flex; }
      .container { padding-bottom: 88px; }
    }

    /* ── WELCOME SCREEN ─────────────────────────── */
    .welcome-screen {
      text-align: center;
      padding: 60px 24px 80px;
      max-width: 740px;
      margin: 0 auto;
    }
    .welcome-screen h1 { font-size: 36px; margin-bottom: 10px; }
    .welcome-screen > p { font-size: 16px; color: var(--muted); }
    .welcome-steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin: 36px 0 40px;
      text-align: left;
    }
    .welcome-step {
      padding: 20px 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel2);
    }
    .welcome-step-num {
      width: 34px; height: 34px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary), var(--blue));
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-weight: 900; font-size: 15px;
      margin-bottom: 12px;
    }
    .welcome-step h3 { font-size: 14px; margin-bottom: 5px; }
    .welcome-step p { font-size: 12px; margin: 0; }
    @media (max-width: 720px) {
      .welcome-steps { grid-template-columns: 1fr 1fr; }
    }

    /* ── WIZARD ─────────────────────────────────── */
    .wizard-wrap {
      max-width: 860px;
      margin: 0 auto;
    }
    .wizard-progress {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 0 60px 28px;
    }
    .wstep {
      display: flex; flex-direction: column; align-items: center;
      gap: 8px; min-width: 90px;
    }
    .wstep-num {
      width: 40px; height: 40px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-weight: 900; font-size: 15px;
      border: 2px solid var(--line);
      color: var(--muted);
      background: var(--panel);
      transition: .22s; position: relative; z-index: 1;
    }
    .wstep.active .wstep-num {
      background: linear-gradient(135deg, var(--primary), var(--blue));
      border-color: transparent; color: #fff;
      box-shadow: 0 0 0 6px rgba(124,58,237,.18);
    }
    .wstep.done .wstep-num {
      background: var(--green); border-color: transparent; color: #fff;
    }
    .wstep-label { font-size: 12px; font-weight: 850; color: var(--muted); text-align: center; }
    .wstep.active .wstep-label { color: var(--text); }
    .wstep.done .wstep-label { color: #86efac; }
    [data-theme="light"] .wstep.done .wstep-label { color: #15803d; }
    .wstep-line {
      flex: 1; height: 2px; background: var(--line);
      margin-top: 19px; min-width: 50px; transition: background .25s;
    }
    .wstep-line.done { background: var(--green); }
    .wizard-body {
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
    }
    .wizard-pkg-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 12px;
      margin-top: 14px;
    }
    .wizard-pkg-card {
      padding: 14px 16px;
      border: 2px solid var(--line);
      border-radius: 14px;
      cursor: pointer;
      transition: .15s ease;
      background: var(--panel2);
    }
    .wizard-pkg-card:hover {
      border-color: rgba(168, 85, 247, .7);
      background: rgba(124,58,237,.08);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(124,58,237,.18);
    }
    .wizard-pkg-card:active { transform: translateY(0); }
    .wizard-pkg-card h3 { font-size: 14px; margin-bottom: 4px; }
    .wizard-pkg-card p { font-size: 12px; margin: 0; }
    .wizard-pkg-card .pkg-price { font-weight: 900; font-size: 15px; margin-top: 8px; color: var(--primary2); }

    /* ── PACKAGE CARD ─────────────────────────────────── */
    .package-card {
      position: relative; overflow: hidden; padding: 18px 18px 16px;
      display: flex; flex-direction: column;
      border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s;
    }
    .package-card:hover { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), 0 12px 32px rgba(0,0,0,.22); transform: translateY(-2px); }

    .package-card::before {
      content: ""; position: absolute; left: 0; top: 0; bottom: 0;
      width: 3px; border-radius: var(--radius) 0 0 var(--radius);
      background: var(--line);
    }
    .package-card[data-cat="social"]::before    { background: linear-gradient(180deg, #7c3aed, #a855f7); }
    .package-card[data-cat="interview"]::before { background: linear-gradient(180deg, #2563eb, #60a5fa); }
    .package-card[data-cat="business"]::before  { background: linear-gradient(180deg, #059669, #34d399); }
    .package-card[data-cat="events"]::before    { background: linear-gradient(180deg, #ea580c, #fb923c); }
    .package-card[data-cat="ai"]::before        { background: linear-gradient(180deg, #0891b2, #22d3ee); }
    .package-card[data-cat="graphic"]::before   { background: linear-gradient(180deg, #db2777, #f472b6); }
    .package-card[data-cat="photo"]::before     { background: linear-gradient(180deg, #d97706, #fbbf24); }
    .package-card[data-cat="corporate"]::before { background: linear-gradient(180deg, #4338ca, #818cf8); }

    .pkg-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
    .pkg-card-name { margin: 0 0 5px; font-size: 15px; font-weight: 900; line-height: 1.3; }
    .pkg-card-desc { margin: 0 0 12px; font-size: 12px; color: var(--muted); line-height: 1.5; }
    .pkg-card-price {
      font-family: 'Space Grotesk', sans-serif; font-weight: 900; font-size: 22px;
      font-variant-numeric: tabular-nums; color: var(--fg); margin-bottom: 6px; letter-spacing: -.02em;
    }
    .pkg-card-for { font-size: 11px; color: var(--muted); margin-bottom: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
    .pkg-card-items { flex: 1; margin-bottom: 14px; }
    .pkg-item-line { font-size: 12px; padding: 3px 0; color: var(--fg2); border-bottom: 1px solid var(--line); }
    .pkg-item-line:last-child { border-bottom: none; }
    .pkg-note { font-size: 11px; color: var(--muted); font-style: italic; background: var(--surface2); padding: 6px 10px; border-radius: 6px; margin: 0 0 12px; line-height: 1.4; }
    .pkg-card-actions { display: flex; gap: 8px; margin-top: auto; }

    .pkg-cat-badge {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 10px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase;
      padding: 2px 8px; border-radius: 999px;
    }
    .pkg-cat-badge[data-cat="social"]    { background: rgba(124,58,237,.12); color: #a855f7; }
    .pkg-cat-badge[data-cat="interview"] { background: rgba(37,99,235,.12);  color: #60a5fa; }
    .pkg-cat-badge[data-cat="business"]  { background: rgba(5,150,105,.12);   color: #34d399; }
    .pkg-cat-badge[data-cat="events"]    { background: rgba(234,88,12,.12);   color: #fb923c; }
    .pkg-cat-badge[data-cat="ai"]        { background: rgba(8,145,178,.12);   color: #22d3ee; }
    .pkg-cat-badge[data-cat="graphic"]   { background: rgba(219,39,119,.12);  color: #f472b6; }
    .pkg-cat-badge[data-cat="photo"]     { background: rgba(217,119,6,.12);   color: #fbbf24; }
    .pkg-cat-badge[data-cat="corporate"] { background: rgba(67,56,202,.12);   color: #818cf8; }
    [data-theme="light"] .pkg-cat-badge[data-cat="social"]    { color: #5b4ee8; }
    [data-theme="light"] .pkg-cat-badge[data-cat="interview"] { color: #1d4ed8; }
    [data-theme="light"] .pkg-cat-badge[data-cat="business"]  { color: #15803d; }
    [data-theme="light"] .pkg-cat-badge[data-cat="events"]    { color: #c2410c; }
    [data-theme="light"] .pkg-cat-badge[data-cat="ai"]        { color: #0e7490; }
    [data-theme="light"] .pkg-cat-badge[data-cat="graphic"]   { color: #be185d; }
    [data-theme="light"] .pkg-cat-badge[data-cat="photo"]     { color: #b45309; }
    [data-theme="light"] .pkg-cat-badge[data-cat="corporate"] { color: #3730a3; }

    .pkg-group-header {
      font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em;
      color: var(--muted); padding: 6px 0 10px; margin-top: 18px; border-bottom: 1px solid var(--line);
      margin-bottom: 14px; grid-column: 1 / -1;
    }

    .client-select-list {
      display: grid; gap: 8px; max-height: 280px; overflow-y: auto;
      scrollbar-width: thin; margin-top: 10px;
    }
    .client-select-item {
      padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
      cursor: pointer; display: flex; justify-content: space-between;
      align-items: center; background: var(--panel2); transition: .15s;
    }
    .client-select-item:hover, .client-select-item.selected {
      border-color: rgba(168, 85, 247, .6); background: rgba(124,58,237,.1);
    }

    /* ── DEAL VIEW ───────────────────────────────── */
    .deal-bar {
      padding: 16px 18px 0;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      margin-bottom: 14px;
    }
    .deal-bar-top {
      display: flex; justify-content: space-between;
      align-items: flex-start; gap: 16px; margin-bottom: 14px;
    }
    .deal-bar-title h2 { margin: 0; font-size: 20px; }
    .deal-bar-title p { margin: 4px 0 0; font-size: 13px; }
    .deal-bar-meta {
      display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    }
    .deal-stats {
      display: flex; gap: 14px; align-items: center;
    }
    .deal-stat { text-align: right; }
    .deal-stat span { display: block; font-size: 11px; color: var(--muted); }
    .deal-stat strong { font-size: 17px; font-weight: 900; }
    .deal-pay-bar {
      height: 5px; background: var(--line); border-radius: 999px;
      overflow: hidden; margin-top: 4px; width: 80px;
    }
    .deal-pay-fill {
      height: 100%; border-radius: 999px;
      background: linear-gradient(90deg, var(--green), #059669);
      transition: width .3s;
    }
    .deal-tabs {
      display: flex; gap: 4px; border-top: 1px solid var(--line);
      padding-top: 2px; margin: 0 -18px; padding-left: 18px;
      overflow-x: auto; scrollbar-width: none;
    }
    .deal-tabs::-webkit-scrollbar { display: none; }
    .deal-tab {
      border: none; background: transparent;
      color: var(--muted); font-size: 13px; font-weight: 750;
      padding: 10px 14px; cursor: pointer; white-space: nowrap;
      border-bottom: 3px solid transparent;
      transition: .15s; border-radius: 0;
    }
    .deal-tab:hover { color: var(--text); }
    .deal-tab.active {
      color: var(--primary2);
      border-bottom-color: var(--primary2);
    }

    /* ── CRM HOME ─────────────────────────────────── */
    /* ── DASHBOARD ───────────────────────────────── */
    .db-header {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 0 4px;
    }
    .db-greeting { margin: 0 0 4px; font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
    .db-date { margin: 0; font-size: 13px; color: var(--muted); }

    .db-kpi-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px; margin-bottom: 14px;
    }
    .db-kpi {
      display: flex; align-items: center; gap: 12px;
      background: var(--panel2); border: 1px solid var(--line);
      border-radius: 14px; padding: 14px; transition: .14s;
    }
    .db-kpi:hover { border-color: rgba(124,58,237,.35); }
    .db-kpi-warn { border-color: rgba(234,88,12,.3) !important; }
    .db-kpi-icon {
      width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center; font-size: 18px;
    }
    .db-kpi-body { flex: 1; min-width: 0; }
    .db-kpi-label { font-size: 11px; color: var(--muted); font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
    .db-kpi-value { font-size: 20px; font-weight: 900; letter-spacing: -.02em; margin: 2px 0; font-variant-numeric: tabular-nums; }
    .db-kpi-delta { font-size: 11px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .db-kpi-delta.pos { color: var(--green); }
    .db-kpi-delta.neg { color: var(--red); }
    .db-kpi-delta.neu { color: var(--muted); }

    @media (max-width: 900px) {
      .db-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 480px) {
      .db-kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
      .db-kpi { padding: 10px; gap: 8px; }
      .db-kpi-icon { width: 32px; height: 32px; font-size: 14px; border-radius: 9px; }
      .db-kpi-value { font-size: 16px; }
      .db-kpi-label { font-size: 10px; }
      .db-greeting { font-size: 18px; }
    }

    .crm-home-funnel {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      gap: 10px; margin-bottom: 4px;
    }
    .funnel-stage {
      padding: 14px 12px;
      border: 1px solid var(--line);
      border-radius: 14px; background: var(--panel2);
      cursor: pointer; transition: .15s;
    }
    .funnel-stage:hover { border-color: rgba(168,85,247,.5); transform: translateY(-1px); }
    .funnel-stage.active { border-color: var(--primary2); background: rgba(124,58,237,.12); }
    .funnel-stage h3 { font-size: 12px; color: var(--muted); margin: 0 0 6px; }
    .funnel-stage .fs-count { font-size: 26px; font-weight: 900; }
    .funnel-stage .fs-amount { font-size: 11px; color: var(--muted); margin-top: 2px; }
    .deal-card {
      padding: 16px; cursor: pointer; transition: .15s;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
    }
    .deal-card:hover { border-color: rgba(168,85,247,.5); transform: translateY(-1px); }
    .deal-card.current { border-color: rgba(22,163,74,.5); }
    .deal-card-client { font-size: 13px; font-weight: 750; transition: opacity .12s; }
    .deal-card-client:hover { opacity: .75; }
    .deal-card-name { font-size: 15px; font-weight: 900; margin: 3px 0 8px; }
    .deal-dup-btn {
      width: 24px; height: 24px; padding: 0;
      border: 1px solid transparent;
      background: none; border-radius: 6px;
      cursor: pointer; color: var(--muted);
      display: grid; place-items: center;
      opacity: 0; transition: opacity .15s, color .15s, border-color .15s, background .15s;
      flex-shrink: 0;
    }
    .deal-card:hover .deal-dup-btn { opacity: 1; }
    .deal-dup-btn:hover { color: var(--text); border-color: var(--line); background: var(--panel2); }
    .deal-card-footer {
      display: flex; justify-content: space-between;
      align-items: center; gap: 8px; margin-top: 10px;
    }
    .next-action-btn {
      padding: 7px 12px; border-radius: 999px; border: none;
      background: linear-gradient(135deg, var(--primary), var(--blue));
      color: #fff; font-size: 12px; font-weight: 750; cursor: pointer;
      white-space: nowrap; transition: .15s;
    }
    .next-action-btn:hover { opacity: .88; transform: translateY(-1px); }
    .health-dot {
      width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
    }
    .health-dot.green { background: var(--green); }
    .health-dot.yellow { background: var(--yellow); }
    .health-dot.red { background: var(--red); }
    .health-dot.grey { background: var(--muted); }

    /* ── SCROLL TO TOP ───────────────────────────── */
    .scroll-top-btn {
      position: fixed;
      bottom: 28px; right: 20px;
      width: 36px; height: 36px;
      border-radius: 50%;
      background: rgba(124,58,237,.82);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      color: #fff; border: none; cursor: pointer;
      font-size: 14px; font-weight: 900;
      box-shadow: 0 4px 18px rgba(124,58,237,.38);
      opacity: 0; transform: translateY(12px) scale(.9);
      transition: opacity .22s ease, transform .22s ease;
      z-index: 200;
      display: flex; align-items: center; justify-content: center;
      line-height: 1;
    }
    .scroll-top-btn.visible {
      opacity: 1; transform: translateY(0) scale(1);
    }
    .scroll-top-btn:hover {
      background: var(--primary2);
      transform: translateY(-2px) scale(1.08) !important;
      box-shadow: 0 8px 28px rgba(124,58,237,.55);
    }
    @media (max-width: 720px) {
      .scroll-top-btn { bottom: 88px; right: 14px; }
    }

    /* ── ESTIMATE STAGE VISUAL ────────────────────── */
    .estimate-stage {
      padding: 0 !important;
      margin-top: 20px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: transparent;
      overflow: hidden;
    }
    .stage-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      padding: 14px 18px;
      border-bottom: 1px solid var(--line);
      background: rgba(255,255,255,.04);
    }
    [data-theme="light"] .stage-header {
      background: rgba(0,0,0,.025);
    }
    .stage-header-left {
      display: flex; align-items: center; gap: 12px;
    }
    .stage-color-bar {
      width: 5px;
      border-radius: 999px;
      align-self: stretch;
      min-height: 32px;
      flex: 0 0 auto;
    }
    .stage-header h2 {
      margin: 0; font-size: 18px; letter-spacing: -.02em;
    }
    .stage-header-meta {
      font-size: 12px; color: var(--muted); margin-top: 3px;
    }
    .stage-body {
      padding: 16px;
    }
    .stage-collapsed-note {
      padding: 12px 18px;
      color: var(--muted); font-size: 13px;
    }

    /* ── CLIENT DETAIL ─────────────────────────────── */
    .client-detail-header {
      padding: 20px;
      background: var(--panel2);
      border-radius: var(--radius);
      border: 1px solid var(--line);
      margin-bottom: 16px;
    }
    .client-detail-top {
      display: flex; justify-content: space-between;
      align-items: flex-start; gap: 16px; margin-bottom: 16px;
    }
    .client-detail-top h1 { margin: 0; font-size: 26px; }
    .client-projects-list {
      display: grid; gap: 10px; margin-top: 14px;
    }
    .client-project-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px;
      background: var(--panel); gap: 14px;
      cursor: pointer; transition: .15s;
    }
    .client-project-row:hover { border-color: rgba(168,85,247,.5); }
    .client-project-row h4 { margin: 0 0 3px; font-size: 14px; }
    .client-project-row p { margin: 0; font-size: 12px; color: var(--muted); }

    /* ── FINANCE TABLE (Otask style) ────────────── */
    .fin-table-wrap {
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow-x: auto;
      overflow-y: hidden;
      margin-top: 10px;
    }
    .fin-table {
      width: 100%; border-collapse: collapse;
    }
    .fin-table th {
      text-align: left; padding: 10px 14px;
      font-size: 11px; font-weight: 850;
      color: var(--muted); letter-spacing: .05em; text-transform: uppercase;
      background: var(--panel2);
      border-bottom: 1px solid var(--line);
      white-space: nowrap;
    }
    .fin-table td {
      padding: 11px 14px;
      font-size: 13px;
      border-bottom: 1px solid var(--line);
      vertical-align: middle;
    }
    .fin-table tr:last-child td { border-bottom: none; }
    .fin-table tbody tr:hover td { background: rgba(255,255,255,.05); }
    .fin-table tbody tr:hover .amount-cell { text-decoration: underline dotted; }
    [data-theme="light"] .fin-table tbody tr:hover td { background: rgba(0,0,0,.04); }
    .fin-table .amount-cell { font-weight: 900; font-size: 14px; text-align: right; white-space: nowrap; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
    .fin-table .amount-cell.income { color: #86efac; }
    .fin-table .amount-cell.expense { color: #fca5a5; }
    [data-theme="light"] .fin-table .amount-cell.income { color: #15803d; }
    [data-theme="light"] .fin-table .amount-cell.expense { color: #dc2626; }
    .fin-table .type-badge {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 850;
    }
    .fin-table .type-badge.income { background: rgba(22,163,74,.14); color: #86efac; }
    .fin-table .type-badge.expense { background: rgba(220,38,38,.12); color: #fca5a5; }
    [data-theme="light"] .fin-table .type-badge.income { color: #15803d; }
    [data-theme="light"] .fin-table .type-badge.expense { color: #dc2626; }
    .fin-table-footer td {
      background: var(--panel2); font-weight: 900;
      font-size: 13px; border-top: 2px solid var(--line);
    }
    .fin-action-bar {
      display: flex; gap: 10px; align-items: center;
      margin-bottom: 14px; flex-wrap: wrap;
    }
    .btn-income {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 10px 18px; border-radius: 999px; border: none;
      background: var(--green); color: #fff; font-weight: 850; font-size: 14px;
      cursor: pointer; transition: .15s;
    }
    .btn-income:hover { background: #15803d; }
    .btn-expense {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 10px 18px; border-radius: 999px; border: none;
      background: var(--red); color: #fff; font-weight: 850; font-size: 14px;
      cursor: pointer; transition: .15s;
    }
    .btn-expense:hover { background: #b91c1c; }

    .fin-quick-add {
      display: flex; gap: 10px; flex-wrap: wrap;
      margin-bottom: 14px;
    }
    .fin-quick-half {
      display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
      flex: 1 1 280px; min-width: 0;
      padding: 10px; border-radius: 14px;
      border: 1px solid var(--line); background: var(--panel2);
    }
    .fin-quick-half.income { border-color: rgba(22,163,74,.3); }
    .fin-quick-half.expense { border-color: rgba(220,38,38,.2); }
    .fin-quick-input {
      flex: 1 1 140px; min-width: 0;
      padding: 8px 10px; font-size: 13px;
    }
    .fin-quick-amount { flex: 0 1 90px; }
    .fin-quick-btn {
      flex: 1 1 100%;
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      padding: 9px 14px; border-radius: 999px; border: none;
      font-weight: 850; font-size: 13px; color: #fff; cursor: pointer; transition: .15s;
      white-space: nowrap;
    }
    .fin-quick-btn.income { background: var(--green); }
    .fin-quick-btn.income:hover { background: #15803d; }
    .fin-quick-btn.expense { background: var(--red); }
    .fin-quick-btn.expense:hover { background: #b91c1c; }
    .fin-quick-extra {
      flex: 0 0 auto;
      display: inline-flex; align-items: center; justify-content: center;
      width: 44px; height: 44px; border-radius: 12px;
      border: 1px solid var(--line); background: var(--panel2);
      color: var(--muted); font-size: 18px; font-weight: 900; cursor: pointer; transition: .15s;
    }
    .fin-quick-extra:hover { color: var(--text); border-color: var(--primary2); }
    @media (min-width: 560px) {
      .fin-quick-btn { flex: 0 0 auto; }
    }

    /* ── ESTIMATE IN DEAL: clear tab context ───── */
    .deal-tab.active {
      color: var(--text) !important;
      background: rgba(124,58,237,.15);
      border-radius: 8px 8px 0 0;
      border-bottom-color: var(--primary2) !important;
    }
    .estimate-section-title {
      display: flex; justify-content: space-between;
      align-items: center; gap: 14px; margin-bottom: 16px;
    }
    .estimate-section-title h2 { margin: 0; font-size: 18px; }

    /* ── PAGE ANIMATIONS ─────────────────────────── */
    #appContent { animation: pageFadeIn .2s ease; }
    @keyframes pageFadeIn { from { opacity: .7; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

    .deal-card, .project-card, .client-card, .item, .package-card {
      transition: transform .15s ease, border-color .15s, box-shadow .15s;
    }
    .deal-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 36px rgba(0,0,0,.28);
    }
    .btn, .nav button, .tab, .deal-tab, .next-action-btn {
      transition: background .15s, border-color .15s, color .15s, transform .12s, box-shadow .15s !important;
    }
    .funnel-stage { transition: border-color .15s, background .15s, transform .12s; }

    /* ── LOGO ANIMATION ──────────────────────────── */
    .logo {
      transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease !important;
      cursor: pointer !important;
    }
    .logo:hover {
      transform: scale(1.12) rotate(-6deg) !important;
      box-shadow: 0 8px 32px rgba(124,58,237,.65) !important;
    }

    /* ── DEAL HEADER COMPACT ─────────────────────── */
    .deal-bar { padding: 16px 22px 0; }
    .deal-compact-row {
      display: flex; justify-content: space-between;
      align-items: center; gap: 14px; flex-wrap: wrap;
      margin-bottom: 14px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line);
    }
    .deal-nav-group {
      display: flex; align-items: center; gap: 10px;
      flex-wrap: wrap; flex: 1; min-width: 0;
    }
    .deal-nav-group h2 { margin: 0; font-size: 19px; font-weight: 900; }
    .deal-actions-group {
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 0 0 auto;
    }
    .deal-stats-inline {
      display: flex; align-items: center; gap: 16px;
      padding: 8px 14px; border-radius: 12px;
      background: var(--panel2); border: 1px solid var(--line);
    }
    .deal-stat-item { display: flex; flex-direction: column; align-items: flex-end; }
    .deal-stat-item span { font-size: 10px; color: var(--muted); font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
    .deal-stat-item strong { font-size: 15px; font-weight: 900; }
    .deal-stat-sep { width: 1px; height: 28px; background: var(--line); flex: 0 0 auto; }
    .crm-select-pill {
      padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 750;
      background: rgba(124,58,237,.15); border: 1px solid rgba(124,58,237,.3); color: var(--text);
      cursor: pointer; max-width: 130px;
    }

    /* ── DEAL SWITCHER ────────────────────────────── */
    .deal-switcher { position: relative; flex: 0 0 auto; }
    .deal-switcher-btn {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 12px 6px 14px; border-radius: 10px;
      background: var(--card); border: 1px solid var(--line);
      color: var(--text); font-size: 14px; font-weight: 800;
      cursor: pointer; transition: border-color .15s, background .15s;
      max-width: 240px; min-width: 0;
    }
    .deal-switcher-btn:hover { border-color: var(--primary2); background: var(--panel2); }
    .deal-switcher-btn-label {
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;
    }
    .deal-switcher-chevron {
      flex: 0 0 auto; font-size: 10px; color: var(--muted);
      transition: transform .15s;
    }
    .deal-switcher-chevron.open { transform: rotate(180deg); }
    .deal-switcher-dropdown {
      position: absolute; top: calc(100% + 8px); left: 0;
      background: var(--panel); border: 1px solid var(--line);
      border-radius: 14px; box-shadow: 0 20px 56px rgba(0,0,0,.55);
      min-width: 280px; max-width: 360px; max-height: 340px;
      overflow-y: auto; z-index: 1001;
      animation: fadeSlideDown .15s ease;
      padding: 6px;
    }
    @keyframes fadeSlideDown {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .deal-switcher-item {
      display: flex; flex-direction: column; gap: 3px;
      padding: 10px 12px; border-radius: 9px;
      cursor: pointer; transition: background .1s;
    }
    .deal-switcher-item:hover { background: var(--panel2); }
    .deal-switcher-item.active { background: rgba(124,58,237,.13); }
    .deal-switcher-item-name {
      font-size: 13px; font-weight: 800;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .deal-switcher-item-sub {
      display: flex; align-items: center; gap: 8px;
      font-size: 11px; color: var(--muted);
    }
    .deal-switcher-divider {
      height: 1px; background: var(--line); margin: 4px 0;
    }

    /* ── ANALYTICS DATE FILTER ────────────────────── */
    .analytics-date-bar {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      margin-bottom: 18px; padding: 12px 16px;
      background: var(--panel2); border-radius: 14px;
      border: 1px solid var(--line);
    }
    .date-preset-btn {
      padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line);
      background: transparent; color: var(--muted); font-size: 12px; font-weight: 750;
      cursor: pointer; transition: .14s;
    }
    .date-preset-btn.active {
      background: linear-gradient(135deg, var(--primary), var(--blue));
      border-color: transparent; color: #fff;
    }
    .date-preset-btn:hover:not(.active) { border-color: rgba(168,85,247,.5); color: var(--text); }
    .date-range-inputs {
      display: flex; align-items: center; gap: 6px; margin-left: 8px;
    }
    .date-range-inputs input {
      width: 130px; padding: 5px 10px; font-size: 12px; border-radius: 10px;
    }

    /* ── SVG CHART ────────────────────────────────── */
    .svg-chart-wrap { overflow-x: auto; padding-bottom: 8px; }
    .svg-chart-tooltip {
      position: absolute; background: var(--panel); border: 1px solid var(--line);
      border-radius: 10px; padding: 8px 12px; font-size: 12px;
      pointer-events: none; z-index: 50; white-space: nowrap;
      box-shadow: 0 8px 24px rgba(0,0,0,.3);
    }

    /* ── REAL CALENDAR GRID ─────────────────────── */
    /* ── CALENDAR HEADER ──────────────────────────── */
    .cal-header {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
    }
    .cal-header-title h1 { margin: 0 0 2px; }
    .cal-header-sub { margin: 0; font-size: 13px; color: var(--muted); }
    .cal-add-btn { flex-shrink: 0; }

    /* ── CALENDAR NAV BAR ─────────────────────────── */
    .cal-nav2 {
      display: flex; align-items: center; justify-content: space-between;
      gap: 10px;
      background: var(--panel2); border: 1px solid var(--line);
      border-radius: 14px; padding: 8px 12px;
      margin-bottom: 10px;
    }
    .cal-nav2-center {
      display: flex; align-items: center; gap: 10px; min-width: 0;
    }
    .cal-nav2-arrow {
      width: 32px; height: 32px; border-radius: 8px;
      border: 1px solid var(--line); background: transparent;
      color: var(--muted); font-size: 16px; cursor: pointer;
      transition: .13s; display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .cal-nav2-arrow:hover { border-color: rgba(168,85,247,.5); color: var(--primary2); background: rgba(124,58,237,.08); }
    .cal-nav2-month {
      font-size: 18px; font-weight: 900; color: var(--text);
      min-width: 130px; text-align: center; letter-spacing: -.02em;
      font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .cal-nav2-today {
      padding: 7px 14px; border-radius: 10px; font-size: 13px; font-weight: 750;
      background: linear-gradient(135deg, var(--primary), var(--blue));
      border: none; color: #fff; cursor: pointer; transition: .13s; white-space: nowrap;
      flex-shrink: 0;
    }
    .cal-nav2-today:hover { opacity: .88; }
    @media (max-width: 720px) {
      .cal-nav2 { padding: 7px 8px; gap: 6px; }
      .cal-nav2-center { gap: 4px; }
      .cal-nav2-month { font-size: 15px; min-width: 0; }
      .cal-nav2-today { padding: 7px 12px; font-size: 12px; }
      .cal-header-sub { display: none; }
    }

    /* ── MONTH PILLS (scrollable row) ─────────────── */
    .cal-months-scroll {
      display: flex; flex-wrap: nowrap; gap: 5px; margin-bottom: 14px;
      overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 4px 6px;
      scrollbar-width: none;
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
      mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    }
    .cal-months-scroll::-webkit-scrollbar { display: none; }
    .cal-month-pill {
      padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line);
      background: transparent; color: var(--muted); font-size: 12px; font-weight: 750;
      cursor: pointer; transition: .13s; white-space: nowrap; flex-shrink: 0;
    }
    .cal-month-pill:hover { border-color: rgba(168,85,247,.5); color: var(--text); }
    .cal-month-pill.active {
      background: rgba(124,58,237,.18); border-color: var(--primary2);
      color: var(--primary2);
    }
    @media (max-width: 720px) {
      .cal-months-scroll { gap: 4px; }
      .cal-month-pill { padding: 5px 10px; font-size: 11px; }
    }
    .cal-weekdays {
      display: grid; grid-template-columns: repeat(7, 1fr);
      gap: 4px; margin-bottom: 4px;
    }
    .cal-weekday {
      text-align: center; font-size: 11px; font-weight: 850;
      color: var(--muted); padding: 6px 0; letter-spacing: .04em;
      text-transform: uppercase;
    }
    .cal-weekday.weekend { color: var(--red); opacity: .7; }
    .cal-grid-wrap {
      display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
    }
    .cal-cell {
      min-height: 80px; padding: 7px 8px;
      border: 1px solid var(--line);
      border-radius: 10px; background: var(--panel2);
      cursor: pointer; transition: .14s; position: relative;
      overflow: hidden;
    }
    .cal-cell:hover { border-color: rgba(168,85,247,.45); background: rgba(124,58,237,.06); }
    .cal-cell.today {
      border-color: var(--primary2);
      background: rgba(124,58,237,.1);
      box-shadow: 0 0 0 2px rgba(124,58,237,.22) inset;
    }
    .cal-cell.other-month { opacity: .32; }
    .cal-cell.selected { border-color: var(--blue); background: rgba(37,99,235,.1); }
    .cal-cell.weekend .cal-day-num { color: var(--red); opacity: .7; }
    .cal-day-num {
      font-size: 13px; font-weight: 900; color: var(--text);
      display: block; margin-bottom: 4px; line-height: 1;
    }
    .cal-cell.today .cal-day-num {
      color: #fff; background: var(--primary); border-radius: 50%;
      width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
      font-size: 11px;
    }
    .cal-dots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
    .cal-dot-item {
      width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
    }
    .cal-dot-item.deadline { background: var(--red); }
    .cal-dot-item.task { background: var(--blue); }
    .cal-dot-item.payment { background: var(--green); }
    .cal-dot-item.expense { background: var(--orange); }
    .cal-event-label {
      display: block; font-size: 9px; font-weight: 750;
      padding: 2px 4px; border-radius: 4px; margin-top: 2px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
    }
    .cal-event-label.deadline { background: rgba(220,38,38,.18); color: #fca5a5; }
    .cal-event-label.task { background: rgba(37,99,235,.18); color: #93c5fd; }
    .cal-event-label.payment { background: rgba(22,163,74,.18); color: #86efac; }
    .cal-event-label.expense { background: rgba(234,88,12,.18); color: #fdba74; }
    [data-theme="light"] .cal-event-label.deadline { color: #dc2626; }
    [data-theme="light"] .cal-event-label.task { color: #1d4ed8; }
    [data-theme="light"] .cal-event-label.payment { color: #15803d; }
    [data-theme="light"] .cal-event-label.expense { color: #c2410c; }
    .cal-legend {
      display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px;
      padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px;
      background: var(--panel2);
    }
    .cal-legend-item {
      display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted);
    }
    .cal-legend-dot {
      width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
    }
    .cal-day-panel {
      margin-top: 16px; padding: 16px;
      border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
    }
    .cal-day-panel h3 { margin: 0 0 12px; font-size: 16px; }
    .cal-day-event-row {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 0; border-bottom: 1px solid var(--line);
    }
    .cal-day-event-row:last-child { border-bottom: none; }
    .cal-day-event-type {
      width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
    }
    .cal-day-event-info { flex: 1; }
    .cal-day-event-info h4 { margin: 0 0 2px; font-size: 14px; }
    .cal-day-event-info p { margin: 0; font-size: 11px; color: var(--muted); }
    @media (max-width: 720px) {
      .cal-cell { min-height: 52px; padding: 5px 4px; }
      .cal-day-num { font-size: 11px; }
      .cal-event-label { display: none; }
    }

    /* ── GLOBAL CALENDAR ─────────────────────────── */
    .gcal-event {
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: var(--panel2);
      display: flex; justify-content: space-between;
      align-items: center; gap: 12px;
      transition: .15s;
    }
    .gcal-event:hover { border-color: rgba(168,85,247,.45); }
    .gcal-event-left h4 { margin: 0 0 2px; font-size: 14px; }
    .gcal-event-left p { margin: 0; font-size: 12px; color: var(--muted); }
    .gcal-date-badge {
      flex: 0 0 auto; text-align: right;
      font-weight: 850; font-size: 13px; white-space: nowrap;
    }
    .gcal-date-overdue { color: var(--red); }
    .gcal-date-soon { color: var(--orange); }
    .gcal-date-ok { color: var(--muted); }
    .gcal-group-header {
      font-size: 12px; font-weight: 850; color: var(--muted);
      letter-spacing: .05em; text-transform: uppercase;
      margin: 18px 0 8px;
    }
    .gcal-type-badge {
      display: inline-flex; align-items: center;
      padding: 3px 8px; border-radius: 999px; font-size: 10px;
      font-weight: 850; flex: 0 0 auto;
    }
    .gcal-type-badge.deadline { background: rgba(220,38,38,.12); color: #fca5a5; }
    .gcal-type-badge.task { background: rgba(37,99,235,.12); color: #93c5fd; }
    .gcal-type-badge.payment { background: rgba(22,163,74,.12); color: #86efac; }
    [data-theme="light"] .gcal-type-badge.deadline { color: #dc2626; }
    [data-theme="light"] .gcal-type-badge.task { color: #1d4ed8; }
    [data-theme="light"] .gcal-type-badge.payment { color: #15803d; }

    /* ── ANALYTICS TABS ──────────────────────────── */
    .analytics-section {
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--panel2);
      margin-bottom: 16px;
    }
    .analytics-section h3 { font-size: 14px; color: var(--muted); margin: 0 0 14px; font-weight: 850; }
    .category-bar-item {
      display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
    }
    .category-bar-fill {
      height: 8px; border-radius: 999px; min-width: 2px; transition: width .3s;
    }
    .category-bar-label { font-size: 13px; flex: 1; }
    .category-bar-amount { font-size: 13px; font-weight: 900; white-space: nowrap; }
    .fin-subtab-bar {
      display: flex; gap: 4px; margin-bottom: 18px;
      border-bottom: 1px solid var(--line);
    }
    .fin-subtab {
      padding: 10px 16px; border: none; background: transparent;
      color: var(--muted); font-size: 13px; font-weight: 750;
      cursor: pointer; border-bottom: 3px solid transparent;
      transition: .15s;
    }
    .fin-subtab.active { color: var(--primary2); border-bottom-color: var(--primary2); }
    .fin-subtab:hover { color: var(--text); }

    /* ── AUTO-SAVE INDICATOR ─────────────────────── */
    .autosave-indicator {
      font-size: 11px; font-weight: 750;
      color: #86efac; opacity: 0;
      transition: opacity .4s; white-space: nowrap;
      padding: 4px 8px; border-radius: 999px;
    }
    [data-theme="light"] .autosave-indicator { color: #15803d; }
    .autosave-indicator.show { opacity: 1; }
    .autosave-indicator.saving { color: var(--muted); opacity: 1; }

    /* ── DEAL STAGE PROGRESS ─────────────────────── */
    .deal-stage-progress {
      display: flex; align-items: center;
      padding: 10px 18px 12px; gap: 0;
      overflow-x: auto; scrollbar-width: none;
    }
    .deal-stage-progress::-webkit-scrollbar { display: none; }
    .dsp-step {
      display: flex; align-items: center; flex: 0 0 auto; cursor: pointer;
    }
    .dsp-pill {
      padding: 5px 13px; border-radius: 99px; font-size: 12px; font-weight: 700;
      border: 1.5px solid var(--line); color: var(--muted); white-space: nowrap;
      background: transparent; transition: all .18s; -webkit-user-select: none; user-select: none;
    }
    .dsp-step:hover .dsp-pill { border-color: rgba(168,85,247,.4); color: var(--text); }
    .dsp-step.done .dsp-pill {
      background: rgba(22,163,74,.1); border-color: rgba(22,163,74,.35);
      color: #86efac;
    }
    [data-theme="light"] .dsp-step.done .dsp-pill { color: #15803d; background: rgba(22,163,74,.08); }
    .dsp-step.active .dsp-pill {
      background: linear-gradient(135deg, var(--primary), #4f46e5);
      border-color: transparent; color: #fff;
      box-shadow: 0 4px 16px rgba(124,58,237,.4);
    }
    .dsp-line {
      height: 2px; min-width: 14px; flex: 1 1 14px;
      background: var(--line); transition: background .2s;
    }
    .dsp-line.done { background: rgba(22,163,74,.5); }

    /* ── GLOBAL FINANCES ─────────────────────────── */
    .gfin-month-bar {
      display: flex; align-items: flex-end; gap: 4px;
      height: 120px; padding: 0 4px;
    }
    .gfin-month-col {
      display: flex; flex-direction: column; align-items: center;
      gap: 2px; flex: 1; min-width: 28px;
    }
    .gfin-bar {
      width: 100%; border-radius: 4px 4px 0 0; min-height: 2px; transition: .2s;
    }
    .gfin-bar.income { background: var(--green); }
    .gfin-bar.expense { background: var(--red); opacity: .7; }
    .gfin-month-label {
      font-size: 9px; color: var(--muted); white-space: nowrap; margin-top: 4px;
    }
    .gfin-project-filter {
      display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
    }

    /* ── FINANCE MODAL ───────────────────────────── */
    .modal-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,.55);
      z-index: 500;
      display: flex; align-items: center; justify-content: center;
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      animation: fadeIn .18s ease;
    }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    .modal-box {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 28px;
      width: min(480px, calc(100vw - 32px));
      max-height: calc(100dvh - 48px);
      overflow-y: auto;
      box-shadow: 0 32px 80px rgba(0,0,0,.55);
      animation: slideUp .2s ease;
    }
    @media (max-width: 720px) {
      .modal-box { padding: 20px 16px; border-radius: 16px; }
    }
    @keyframes slideUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    .modal-type-switch {
      display: flex; gap: 6px; margin-bottom: 20px;
    }
    .modal-type-btn {
      padding: 10px 20px; border-radius: 999px; border: 2px solid var(--line);
      font-size: 14px; font-weight: 850; cursor: pointer; transition: .15s;
      background: transparent; color: var(--muted);
    }
    .modal-type-btn.income.active {
      background: var(--green); border-color: var(--green); color: #fff;
    }
    .modal-type-btn.expense.active {
      background: var(--red); border-color: var(--red); color: #fff;
    }
    .modal-amount-input {
      font-size: 26px; font-weight: 900; border-radius: 12px;
      padding: 12px 16px; width: 100%;
    }
    .modal-amount-input.invalid { border-color: rgba(220,38,38,.6); }
    .modal-save-btn {
      padding: 12px 28px; border-radius: 999px; border: none;
      font-size: 15px; font-weight: 900; cursor: pointer; transition: .15s;
      color: #fff;
    }
    .modal-save-btn.income { background: var(--green); }
    .modal-save-btn.expense { background: var(--red); }
    .modal-save-btn:disabled { opacity: .45; cursor: default; }
    .modal-save-btn:not(:disabled):hover { opacity: .85; transform: translateY(-1px); }

    /* ── COMPACT TASK CARDS ───────────────────────── */
    .task-title-input {
      flex: 1; background: transparent; border: none;
      border-bottom: 1px solid transparent;
      font-size: 14px; font-weight: 750; color: var(--text);
      padding: 2px 0; width: 100%;
    }
    .task-title-input:hover { border-bottom-color: var(--line); }
    .task-title-input:focus { border-bottom-color: rgba(168,85,247,.65); outline: none; }
    .task-mini-select {
      padding: 5px 8px; font-size: 11px; border-radius: 8px;
      background: var(--input); border: 1px solid var(--line);
      color: var(--text); cursor: pointer;
    }
    details summary { -webkit-user-select: none; user-select: none; }
    details summary::-webkit-details-marker { display: none; }

    /* ── GLOBAL QUICK ADD ────────────────────────── */
    .global-add-wrap { position: relative; }
    .global-add-btn {
      width: 36px; height: 36px; border-radius: 50%;
      background: var(--primary); color: #fff; border: none;
      font-size: 22px; font-weight: 900; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: .15s; box-shadow: 0 4px 18px rgba(124,58,237,.45);
      flex: 0 0 auto; line-height: 1;
    }
    .global-add-btn:hover { background: var(--primary2); transform: scale(1.08); }
    .global-add-menu {
      position: absolute; right: 0; top: calc(100% + 10px);
      background: var(--panel); border: 1px solid var(--line);
      border-radius: 16px; padding: 8px; min-width: 210px;
      box-shadow: 0 20px 60px rgba(0,0,0,.4); z-index: 300;
      display: none; flex-direction: column; gap: 2px;
    }
    .global-add-menu.open { display: flex; }
    .global-add-menu-item {
      padding: 11px 14px; border-radius: 10px; border: none;
      background: transparent; color: var(--text); text-align: left;
      font-size: 13px; font-weight: 750; cursor: pointer; transition: .12s;
      display: flex; align-items: center; gap: 8px;
    }
    .global-add-menu-item:hover { background: rgba(124,58,237,.14); }
    .global-add-menu-item .icon {
      width: 26px; height: 26px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; flex: 0 0 auto;
    }
    .global-add-menu-divider {
      height: 1px; background: var(--line); margin: 4px 6px;
    }

    /* ── NAV DEAL INDICATOR ──────────────────────── */
    .nav-deal-indicator {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 12px; border-radius: 999px;
      background: rgba(22,163,74,.14);
      border: 1px solid rgba(22,163,74,.3);
      font-size: 13px; font-weight: 750;
      color: #86efac; white-space: nowrap; cursor: pointer;
      transition: .15s;
    }
    [data-theme="light"] .nav-deal-indicator { color: #15803d; }
    .nav-deal-indicator:hover { background: rgba(22,163,74,.22); }
    .nav-deal-indicator .dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--green); flex: 0 0 auto;
    }

    /* ── QUICK FINANCE ───────────────────────────── */
    .quick-finance-bar {
      display: flex;
      gap: 10px;
      align-items: stretch;
      padding: 14px 0;
      border-top: 1px solid var(--line);
      margin-top: 14px;
      flex-wrap: wrap;
    }
    .quick-fin-form {
      display: flex;
      gap: 8px;
      align-items: center;
      flex: 1;
      min-width: 280px;
      padding: 12px 14px;
      background: var(--panel2);
      border: 1px solid var(--line);
      border-radius: 14px;
    }
    .quick-fin-form.income { border-color: rgba(22,163,74,.35); }
    .quick-fin-form.expense { border-color: rgba(220,38,38,.25); }
    .quick-fin-label {
      font-size: 12px; font-weight: 850;
      white-space: nowrap; color: var(--muted);
    }
    .quick-fin-form.income .quick-fin-label { color: #86efac; }
    .quick-fin-form.expense .quick-fin-label { color: #fca5a5; }
    [data-theme="light"] .quick-fin-form.income .quick-fin-label { color: #15803d; }
    [data-theme="light"] .quick-fin-form.expense .quick-fin-label { color: #dc2626; }
    .quick-fin-form input {
      flex: 1; min-width: 80px; padding: 7px 10px;
      border-radius: 10px; font-size: 13px;
    }
    .quick-fin-form input.amount-input { max-width: 100px; }

    /* ── FINANCE PAGE ─────────────────────────────── */
    .fin-summary-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 12px;
      margin-bottom: 20px;
    }
    .fin-card {
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--panel2);
    }
    .fin-card h3 { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
    .fin-card .fin-amount { font-size: 22px; font-weight: 900; }
    .fin-card .fin-sub { font-size: 11px; color: var(--muted); margin-top: 4px; }
    .fin-card.income-card { border-color: rgba(22,163,74,.35); }
    .fin-card.expense-card { border-color: rgba(220,38,38,.2); }
    .fin-card.profit-card { border-color: rgba(124,58,237,.35); }
    .fin-row {
      display: flex; justify-content: space-between;
      align-items: flex-start; gap: 12px;
      padding: 12px 0; border-bottom: 1px solid var(--line);
    }
    .fin-row:last-child { border-bottom: none; }
    .fin-row-info h4 { margin: 0 0 3px; font-size: 14px; }
    .fin-row-info p { margin: 0; font-size: 12px; color: var(--muted); }
    .fin-row-amount { font-weight: 900; font-size: 16px; white-space: nowrap; }
    .fin-row-amount.positive { color: var(--green); }
    .fin-row-amount.negative { color: var(--red); }
    .fin-category-badge {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 8px; border-radius: 999px; font-size: 11px;
      background: rgba(124,58,237,.12); color: var(--primary2);
      margin-top: 4px;
    }
    .fin-section-head {
      display: flex; justify-content: space-between;
      align-items: center; margin: 20px 0 12px; gap: 12px;
    }
    .fin-section-head h2 { margin: 0; font-size: 18px; }

    /* ── CONTRACTS ───────────────────────────────── */
    .contract-card {
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      cursor: pointer;
      transition: .15s;
    }
    .contract-card:hover { border-color: rgba(168,85,247,.5); transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0,0,0,.28); }
    .contract-card h3 { margin: 0 0 6px; }
    .contract-card p { margin: 0; font-size: 13px; }
    .contract-editor {
      width: 100%;
      min-height: 420px;
      font-family: inherit;
      font-size: 14px;
      line-height: 1.6;
      padding: 16px;
      border-radius: 12px;
      background: var(--input);
      border: 1px solid var(--line);
      color: var(--text);
      resize: vertical;
    }
    .contract-editor:focus { border-color: rgba(168,85,247,.65); box-shadow: 0 0 0 4px rgba(124,58,237,.14); outline: none; }

    /* ── MAIN MENU MODAL ─────────────────────────── */
    .main-menu-modal {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-top: 16px;
    }
    .main-menu-item {
      padding: 16px 10px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--panel2);
      text-align: center;
      cursor: pointer;
      transition: .15s;
      color: var(--text);
    }
    .main-menu-item:hover { background: rgba(124,58,237,.14); transform: translateY(-2px); border-color: rgba(124,58,237,.3); }
    .main-menu-item .mm-icon { font-size: 26px; display: block; margin-bottom: 6px; }
    .main-menu-item .mm-label { font-size: 12px; font-weight: 750; }
    .main-menu-item .mm-sub { font-size: 10px; color: var(--muted); margin-top: 2px; }
    @media (max-width: 720px) {
      .main-menu-modal { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
      .main-menu-item { padding: 12px 8px; border-radius: 12px; }
      .main-menu-item .mm-icon { font-size: 22px; margin-bottom: 4px; }
      .main-menu-item .mm-label { font-size: 11px; }
      .main-menu-item .mm-sub { display: none; }
    }

    /* ── TASK MODAL ──────────────────────────────── */
    .task-modal-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,.55);
      z-index: 500;
      display: flex; align-items: center; justify-content: center;
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      animation: fadeIn .18s ease;
    }
    .task-modal-box {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 24px;
      width: min(520px, calc(100vw - 32px));
      box-shadow: 0 32px 80px rgba(0,0,0,.55);
      animation: slideUp .2s ease;
    }

    /* ── IMPROVED SUMMARY ────────────────────────── */
    .summary-stage-row {
      display: flex; justify-content: space-between;
      gap: 10px; padding: 6px 0;
      font-size: 13px;
    }
    .margin-badge {
      display: inline-flex; align-items: center;
      padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 850;
      border: 1px solid transparent;
    }
    .margin-badge.good { background: rgba(22,163,74,.18); color: #86efac; }
    .margin-badge.ok { background: rgba(246,189,58,.14); color: var(--yellow); border-color: rgba(246,189,58,.3); }
    .margin-badge.bad { background: rgba(220,38,38,.18); color: #fca5a5; }
    [data-theme="light"] .margin-badge.good { color: #15803d; }
    [data-theme="light"] .margin-badge.ok { color: #92600a; background: rgba(202,138,4,.12); border-color: rgba(202,138,4,.3); }
    [data-theme="light"] .margin-badge.bad { color: #dc2626; }

    /* ── ADMIN / SUPABASE ──────────────────────────── */
    .admin-indicator {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 12px; font-weight: 700; color: var(--muted);
      background: rgba(22,163,74,.12); border: 1px solid rgba(22,163,74,.25);
      border-radius: 999px; padding: 4px 10px; white-space: nowrap;
    }
    .admin-indicator::before { content: "●"; color: #22c55e; font-size: 8px; }
    .presence-dot {
      display: inline-flex; align-items: center; justify-content: center;
      width: 26px; height: 26px; border-radius: 50%;
      background: linear-gradient(135deg, var(--primary), var(--blue));
      color: #fff; font-size: 10px; font-weight: 800; letter-spacing: -.3px;
      border: 2px solid rgba(34,197,94,.6);
      box-shadow: 0 0 0 2px rgba(34,197,94,.2);
      cursor: default; margin-right: 4px; flex-shrink: 0;
    }
    .presence-area { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; }
    .client-link { cursor: pointer; }
    .admin-modal-box {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 28px;
      width: min(420px, calc(100vw - 32px));
    }
    .supabase-config-box {
      border: 1px solid rgba(139,127,232,.3);
      border-radius: var(--radius);
      padding: 18px;
      margin-top: 18px;
      background: rgba(139,127,232,.04);
    }
    .sync-badge {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 11px; color: #22c55e;
      background: rgba(22,163,74,.1); border-radius: 999px;
      padding: 2px 8px;
    }

    /* ── SKELETON LOADING ───────────────────────────── */
    @keyframes skelShimmer {
      0%   { background-position: -600px 0; }
      100% { background-position: 600px 0; }
    }
    .skel {
      border-radius: 8px;
      background: linear-gradient(90deg, var(--panel2) 25%, rgba(148,163,184,.08) 50%, var(--panel2) 75%);
      background-size: 600px 100%;
      animation: skelShimmer 1.5s infinite linear;
      display: block;
    }
    [data-theme="light"] .skel {
      background: linear-gradient(90deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.02) 50%, rgba(0,0,0,.05) 75%);
      background-size: 600px 100%;
      animation: skelShimmer 1.5s infinite linear;
    }
    .skel-card {
      border-radius: var(--radius);
      background: var(--panel2);
      border: 1px solid var(--line);
      padding: 20px;
    }

    /* ── AUTH GATE ─────────────────────────────────── */
    .auth-gate {
      position: fixed; inset: 0; z-index: 999;
      display: flex; align-items: center; justify-content: center;
      background: var(--bg);
      background-image: radial-gradient(circle at top left, rgba(124,58,237,.18), transparent 40%),
        radial-gradient(circle at bottom right, rgba(37,99,235,.12), transparent 40%);
      overflow-y: auto; padding: 16px;
    }
    .auth-gate-inner {
      display: flex; align-items: stretch; gap: 48px;
      width: 100%; max-width: 900px; margin: auto;
    }
    .auth-gate-left {
      flex: 1; padding: 20px 0; display: flex; flex-direction: column; justify-content: center;
    }
    .auth-gate-brand {
      display: flex; align-items: center; gap: 14px; margin-bottom: 0;
    }
    .auth-features-list {
      list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 14px;
    }
    .auth-features-list li {
      display: flex; align-items: flex-start; gap: 12px;
    }
    .auth-feat-icon {
      font-size: 20px; flex-shrink: 0; margin-top: 1px;
    }
    .auth-features-list li div {
      display: flex; flex-direction: column; gap: 2px;
    }
    .auth-features-list li strong {
      font-size: 14px; font-weight: 700; color: var(--text);
    }
    .auth-features-list li span {
      font-size: 12px; color: var(--muted);
    }
    .auth-stats-row {
      display: flex; gap: 20px; flex-wrap: wrap;
    }
    .auth-stats-row div {
      display: flex; flex-direction: column; gap: 2px;
      background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.2);
      border-radius: 12px; padding: 10px 16px;
    }
    .auth-stats-row strong { font-size: 18px; font-weight: 900; color: var(--primary2); }
    .auth-stats-row span { font-size: 11px; color: var(--muted); }
    .auth-gate-right { flex: 0 0 auto; display: flex; align-items: center; }
    .auth-gate-box {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 24px;
      box-shadow: 0 32px 80px rgba(0,0,0,.28);
      padding: 36px 32px;
      width: min(400px, calc(100vw - 32px));
    }
    .auth-gate-logo {
      display: flex; align-items: center; gap: 12px; margin-bottom: 24px;
    }
    .auth-gate-logo .logo { flex: 0 0 auto; }
    .auth-tab-bar {
      display: flex; gap: 0; margin-bottom: 24px;
      background: var(--panel2); border-radius: 12px; padding: 4px;
    }
    .auth-tab {
      flex: 1; border: none; border-radius: 9px; padding: 9px;
      font-size: 13px; font-weight: 750; cursor: pointer;
      background: transparent; color: var(--muted); transition: .15s;
    }
    .auth-tab.active { background: var(--primary); color: #fff; }
    @media (max-width: 700px) {
      .auth-gate-inner { flex-direction: column; gap: 0; }
      .auth-gate-left { display: none; }
      .auth-gate-right { width: 100%; }
      .auth-gate-box { width: 100%; padding: 28px 20px; }
    }

    /* ── SUPPORT PAGE ──────────────────────────────── */
    .support-card {
      display: flex; align-items: center; gap: 16px;
      padding: 16px; border-radius: 14px;
      background: var(--panel2); border: 1px solid var(--line);
      cursor: pointer; transition: border-color .15s, transform .15s;
    }
    .support-card:hover { border-color: var(--primary); transform: translateY(-1px); }
    .support-card-icon {
      width: 44px; height: 44px; border-radius: 12px;
      display: grid; place-items: center; font-size: 20px;
      flex-shrink: 0;
    }

    /* ── NOTIFICATION BELL ─────────────────────────── */
    .notif-btn {
      position: relative; border: none; background: none;
      color: var(--text); cursor: pointer; padding: 6px 8px;
      border-radius: 10px; font-size: 18px; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      transition: .14s;
    }
    .notif-btn:hover { background: rgba(148,163,184,.12); }
    .notif-badge {
      position: absolute; top: 2px; right: 2px;
      background: var(--red); color: #fff;
      font-size: 9px; font-weight: 900; border-radius: 999px;
      min-width: 15px; height: 15px; display: flex; align-items: center;
      justify-content: center; padding: 0 3px; line-height: 1;
    }
    .notif-popup {
      position: fixed; right: 16px; top: 62px; z-index: 200;
      width: min(380px, calc(100vw - 24px));
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: 0 20px 60px rgba(0,0,0,.28);
      overflow: hidden;
    }
    .notif-popup-header {
      display: flex; justify-content: space-between; align-items: center;
      padding: 14px 18px 12px; border-bottom: 1px solid var(--line);
    }
    .notif-list { max-height: 420px; overflow-y: auto; }
    .notif-item {
      display: flex; gap: 12px; align-items: flex-start;
      padding: 12px 18px; border-bottom: 1px solid var(--line);
      cursor: pointer; transition: .12s;
    }
    .notif-item:hover { background: rgba(148,163,184,.06); }
    .notif-item.unread { background: rgba(124,58,237,.05); }
    .notif-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--primary); flex: 0 0 8px; margin-top: 5px;
    }
    .notif-item.unread .notif-dot { background: var(--primary); }
    .notif-item:not(.unread) .notif-dot { background: transparent; }
    .notif-body { font-size: 12px; line-height: 1.45; }
    .notif-body strong { display: block; font-size: 13px; margin-bottom: 2px; }
    .notif-time { font-size: 10px; color: var(--muted); margin-top: 3px; }

    /* ── ESTIMATE NAV TOOLTIP ──────────────────────── */
    .estimate-nav-btn {
      position: relative;
    }
    .estimate-nav-btn.has-project::after {
      content: "";
      position: absolute;
      top: 5px; right: 5px;
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--primary);
      box-shadow: 0 0 6px var(--primary);
    }
    .estimate-nav-tooltip-fixed {
      position: fixed;
      z-index: 9999;
      pointer-events: none;
      background: rgba(10, 13, 28, .92);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(124, 58, 237, .5);
      border-radius: 10px;
      padding: 7px 14px 7px 10px;
      display: flex; align-items: center; gap: 8px;
      font-size: 12px; font-weight: 700;
      color: var(--text);
      white-space: nowrap;
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity .22s cubic-bezier(.34,1.56,.64,1),
                  transform .22s cubic-bezier(.34,1.56,.64,1);
      box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(124,58,237,.12);
    }
    .estimate-nav-tooltip-fixed.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .estimate-nav-tooltip-fixed::before {
      content: "";
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--primary);
      flex-shrink: 0;
      box-shadow: 0 0 8px var(--primary);
    }
    [data-theme="light"] .estimate-nav-tooltip-fixed {
      background: rgba(255,255,255,.95);
      box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 0 0 1px rgba(124,58,237,.15);
    }

    /* ── THEME TOGGLE BUTTON ───────────────────────── */
    .theme-toggle-btn {
      width: 36px; height: 36px; padding: 0;
      border: 1px solid var(--line);
      background: none; border-radius: 10px;
      cursor: pointer; color: var(--text);
      display: grid; place-items: center;
      transition: border-color .2s, background .2s, transform .2s;
      flex: 0 0 auto;
    }
    .theme-toggle-btn:hover {
      background: rgba(148,163,184,.1);
      border-color: var(--primary);
      transform: scale(1.08);
    }
    .theme-toggle-btn:active { transform: scale(.93) rotate(20deg); }

    .theme-icon {
      position: relative; width: 16px; height: 16px;
    }
    .theme-icon .icon-moon,
    .theme-icon .icon-sun {
      position: absolute; top: 0; left: 0;
      transition: opacity .35s cubic-bezier(.34,1.56,.64,1),
                  transform .35s cubic-bezier(.34,1.56,.64,1);
    }

    /* dark mode (default): moon visible, sun hidden */
    .theme-icon .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }
    .theme-icon .icon-sun  { opacity: 0; transform: rotate(90deg) scale(0); }

    /* light mode: sun visible, moon hidden */
    [data-theme="light"] .theme-icon .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0); }
    [data-theme="light"] .theme-icon .icon-sun  { opacity: 1; transform: rotate(0deg) scale(1); }

    /* ── HELP BUTTON ─────────────────────────────── */
    .help-btn {
      border: 1px solid var(--line); background: none;
      color: var(--muted); border-radius: 50%;
      width: 30px; height: 30px; font-size: 14px; font-weight: 900;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: .14s;
    }
    .help-btn:hover { border-color: var(--primary); color: var(--primary); }

    .profile-avatar-btn {
      width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
      background: linear-gradient(135deg, var(--primary), var(--blue));
      color: #fff; font-size: 14px; font-weight: 900;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; flex: 0 0 34px;
      transition: .15s; box-shadow: 0 4px 14px rgba(124,58,237,.35);
    }
    .profile-avatar-btn:hover { box-shadow: 0 6px 20px rgba(124,58,237,.5); transform: scale(1.06); }
    .profile-avatar-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .profile-avatar-btn.active { box-shadow: 0 0 0 2px #fff, 0 4px 14px rgba(124,58,237,.35); }

    /* ── PROFILE PAGE ─────────────────────────────── */
    .plan-card {
      border: 1px solid var(--line); border-radius: 16px;
      padding: 20px; text-align: center; transition: .18s; cursor: default;
    }
    .plan-card.popular {
      border-color: var(--primary); background: rgba(124,58,237,.06);
    }
    .plan-card .plan-price { font-size: 28px; font-weight: 900; margin: 10px 0 4px; }
    .plan-card .plan-period { font-size: 12px; color: var(--muted); }
    .plan-card .plan-label { font-size: 13px; font-weight: 850; margin-bottom: 6px; }
    .popular-badge {
      display: inline-block; background: var(--primary); color: #fff;
      font-size: 10px; font-weight: 900; border-radius: 999px;
      padding: 2px 10px; margin-bottom: 8px; text-transform: uppercase;
    }
    .plan-save { font-size: 11px; color: #22c55e; font-weight: 700; margin-top: 4px; }

    /* ── KNOWLEDGE BASE ────────────────────────────── */
    .kb-new-card {
      background: var(--panel2); border: 2px dashed var(--line);
      border-radius: 14px; padding: 16px; cursor: pointer; transition: .14s;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 10px; min-height: 130px; color: var(--muted);
    }
    .kb-new-card:hover { border-color: var(--primary2); color: var(--primary2); background: rgba(124,58,237,.06); }
    .kb-new-icon {
      width: 44px; height: 44px; border-radius: 12px;
      background: rgba(124,58,237,.12); border: 1px dashed rgba(124,58,237,.3);
      display: flex; align-items: center; justify-content: center;
      font-size: 24px; font-weight: 300; color: var(--primary2); transition: .14s;
    }
    .kb-new-card:hover .kb-new-icon { background: rgba(124,58,237,.2); }
    .kb-new-label { font-size: 13px; font-weight: 750; }
    .kb-doc-card {
      background: var(--panel2); border: 1px solid var(--line);
      border-radius: 14px; padding: 16px; cursor: pointer; transition: .14s;
    }
    .kb-doc-card:hover { border-color: rgba(124,58,237,.4); background: rgba(124,58,237,.04); }
    .kb-doc-card h3 { margin: 0 0 6px; font-size: 14px; font-weight: 800; }
    .kb-doc-card p { margin: 0; font-size: 12px; }
    .kb-editor { display: flex; flex-direction: column; gap: 12px; }
    .kb-editor textarea { min-height: 320px; font-family: inherit; font-size: 14px; line-height: 1.6; }
    .kb-cat-badge {
      font-size: 10px; font-weight: 850; padding: 2px 8px;
      border-radius: 999px; display: inline-flex; text-transform: uppercase;
    }
    .kb-cat-badge.sales { background: rgba(22,163,74,.14); color: #16a34a; }
    .kb-cat-badge.prod { background: rgba(37,99,235,.12); color: #2563eb; }
    .kb-cat-badge.price { background: rgba(202,138,4,.14); color: #ca8a04; }
    .kb-cat-badge.client { background: rgba(124,58,237,.12); color: var(--primary); }
    .kb-cat-badge.guide { background: rgba(8,145,178,.12); color: #0891b2; }
    [data-theme="light"] .kb-cat-badge.sales { color: #15803d; }
    [data-theme="light"] .kb-cat-badge.prod { color: #1d4ed8; }
    [data-theme="light"] .kb-cat-badge.price { color: #a16207; }

    /* ── BURGER MENU ──────────────────────────────── */
    .burger-btn {
      display: none;
      background: none;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 7px 10px;
      color: var(--text);
      cursor: pointer;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      gap: 3px;
      flex-direction: column;
    }
    .burger-btn span {
      display: block;
      width: 18px; height: 2px;
      background: currentColor;
      border-radius: 2px;
      transition: .2s ease;
    }
    /* ── ONBOARDING SLIDER ──────────────────────────── */
    .ob-slider-wrap { overflow: hidden; position: relative; }
    .ob-slides {
      display: flex;
      transition: transform .35s cubic-bezier(.4,0,.2,1);
    }
    .ob-slide {
      min-width: 100%;
      padding: 0 2px;
    }
    .ob-placeholder {
      width: 100%; height: 160px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(37,99,235,.14));
      border: 1px dashed rgba(124,58,237,.35);
      display: flex; align-items: center; justify-content: center;
      color: var(--muted); font-size: 12px; font-weight: 750;
      margin-bottom: 18px; text-align: center; padding: 16px;
    }
    .ob-slide h3 { margin: 0 0 8px; font-size: 17px; }
    .ob-slide p { margin: 0; font-size: 14px; line-height: 1.5; }
    .ob-nav {
      display: flex; align-items: center; justify-content: space-between;
      margin-top: 22px; gap: 12px;
    }
    .ob-dots {
      display: flex; gap: 6px; align-items: center;
    }
    .ob-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--line); transition: .22s ease; cursor: pointer;
    }
    .ob-dot.active {
      background: var(--primary);
      width: 22px; border-radius: 4px;
    }
    .ob-arrow {
      background: none; border: 1px solid var(--line);
      border-radius: 10px; padding: 7px 14px;
      color: var(--text); font-size: 16px; cursor: pointer;
      transition: .15s;
    }
    .ob-arrow:disabled { opacity: .3; cursor: default; }
    .ob-arrow:not(:disabled):hover { border-color: rgba(124,58,237,.5); background: rgba(124,58,237,.08); }

/* ── MOBILE TOPBAR: show only logo + profile icon ── */
@media (max-width: 720px) {
  .brand h1 { display: none; }
  #adminTopbar { display: none !important; }
}

/* ── BRIEF MODE (public client form) ───────────────── */
body.brief-mode .topbar { display: none !important; }
body.brief-mode .mobile-bottom-nav { display: none !important; }
body.brief-mode .app { padding-top: 0 !important; min-height: 100vh; display: block; }
body.brief-mode #appContent { padding: 0; }

.brief-wrap {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 40px 16px 60px;
}
.brief-inner { width: 100%; max-width: 580px; }
.brief-logo-row {
  display: flex; align-items: center; gap: 14px; margin-bottom: 32px;
}
.brief-logo-box {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--blue));
  display: grid; place-items: center;
}
.brief-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 24px; padding: 36px 32px; box-shadow: var(--shadow);
}
.brief-card h1 { margin: 0 0 8px; font-size: 24px; font-weight: 900; }
.brief-card > p.brief-sub { margin: 0 0 24px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.brief-section-title {
  font-size: 13px; font-weight: 850; color: var(--primary2);
  padding: 10px 0 8px; margin-top: 12px;
  border-top: 1px solid var(--line);
  letter-spacing: .01em;
}
.brief-section-title:first-of-type { margin-top: 0; border-top: none; }
.brief-fields { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.brief-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.brief-submit {
  width: 100%; padding: 15px; margin-top: 20px;
  border-radius: 12px; font-size: 16px; font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--blue));
  color: #fff; border: none; cursor: pointer;
  transition: .18s; letter-spacing: -.01em;
}
.brief-submit:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.brief-submit:disabled { opacity: .5; cursor: default; }
.brief-error { color: var(--red); font-size: 13px; margin-top: 10px; }
.brief-success-wrap { text-align: center; padding: 48px 24px; }
.brief-success-icon { font-size: 64px; margin-bottom: 16px; }
.brief-success-wrap h2 { margin: 0 0 10px; font-size: 26px; font-weight: 900; }
.brief-success-wrap p { color: var(--muted); font-size: 15px; line-height: 1.55; margin: 0; }
.brief-link-box {
  background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.3);
  border-radius: 12px; padding: 12px 14px;
  display: flex; align-items: center; gap: 10px; margin-top: 16px;
}
.brief-link-url {
  flex: 1; font-size: 12px; color: var(--muted);
  word-break: break-all; -webkit-user-select: all; user-select: all; font-family: monospace;
}
.brief-card-item {
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px; transition: .14s;
}
.brief-card-item:hover { border-color: rgba(124,58,237,.3); }
@media (max-width: 600px) {
  .brief-row { grid-template-columns: 1fr; }
  .brief-card { padding: 24px 18px; border-radius: 18px; }
  .brief-wrap { padding: 24px 12px 48px; }
}

/* ═══════════════════════════════════════════════════════
   AI SPINNER
═══════════════════════════════════════════════════════ */
.ai-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ai-spin .65s linear infinite;
  vertical-align: middle;
  flex-shrink: 0;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════
   КЛИЕНТСКИЙ ПОРТАЛ
═══════════════════════════════════════════════════════ */
body.portal-mode .topbar,
body.portal-mode .nav { display: none !important; }

.portal-wrap {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start;
  padding: 40px 16px 60px;
  background: var(--bg);
  background-image:
    radial-gradient(circle at top left, rgba(124,58,237,.14), transparent 40%),
    radial-gradient(circle at bottom right, rgba(37,99,235,.1), transparent 40%);
}
.portal-inner { width: 100%; max-width: 580px; }
.portal-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 28px;
}
.portal-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 24px; padding: 32px 28px; box-shadow: var(--shadow);
}
.portal-status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: rgba(202,138,4,.1); border: 1px solid rgba(202,138,4,.3);
  color: var(--yellow); margin-bottom: 18px;
}
.portal-status-badge.approved {
  background: rgba(22,163,74,.1); border-color: rgba(22,163,74,.3); color: var(--green);
}
.portal-title {
  font-size: 26px; font-weight: 900; letter-spacing: -.035em;
  margin: 0 0 22px; line-height: 1.15;
}
.portal-price-block {
  background: rgba(124,58,237,.07); border: 1px solid rgba(124,58,237,.18);
  border-radius: 14px; padding: 16px 20px; margin-bottom: 24px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px;
}
.portal-price-label { font-size: 13px; color: var(--muted); }
.portal-price-amount { font-size: 26px; font-weight: 900; color: var(--primary2); }
.portal-section { margin-bottom: 20px; }
.portal-section h3 {
  font-size: 11px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px;
}
.portal-section p { font-size: 14px; line-height: 1.7; color: var(--text); margin: 0; }
.portal-note {
  background: var(--panel2); border-radius: 12px; padding: 16px 18px;
  border: 1px solid var(--line);
}
.portal-services-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.portal-services-list li {
  font-size: 13px; padding: 6px 10px; border-radius: 8px;
  background: var(--panel2); border: 1px solid var(--line);
}
.portal-services-list li::before { content: "✓ "; color: var(--green); font-weight: 700; }
@media (max-width: 600px) {
  .portal-card { padding: 22px 18px; border-radius: 18px; }
  .portal-title { font-size: 20px; }
  .portal-price-amount { font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════
   DRAG-AND-DROP КАНБАН
═══════════════════════════════════════════════════════ */
.kanban-col.dragover {
  border-color: var(--primary2) !important;
  background: rgba(124,58,237,.1) !important;
  box-shadow: 0 0 0 2px rgba(124,58,237,.2) inset;
  transition: background .12s, border-color .12s;
}
.kanban-drop-hint { opacity: .5; font-style: italic; }
.crm-card[draggable="true"],
.task-card[draggable="true"] {
  cursor: grab;
  -webkit-user-select: none; user-select: none;
}
.crm-card[draggable="true"]:active,
.task-card[draggable="true"]:active { cursor: grabbing; }
.crm-card[draggable="true"]:hover,
.task-card[draggable="true"]:hover {
  border-color: rgba(124,58,237,.45);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transition: transform .14s, box-shadow .14s, border-color .14s;
}

/* ═══════════════════════════════════════════════════════
   SWIPE-TO-DELETE
═══════════════════════════════════════════════════════ */
.swipe-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.swipe-delete-bg {
  position: absolute;
  right: 0; top: 0; bottom: 0; width: 72px;
  background: var(--red);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; border-radius: var(--radius);
  pointer-events: none;
}
.swipe-wrap .task-card {
  position: relative; z-index: 1;
  background: var(--panel);
}
@media (min-width: 768px) {
  .swipe-delete-bg { display: none; }
}

/* ═══════════════════════════════════════════════════════
   OAUTH / СОЦИАЛЬНЫЙ ВХОД
═══════════════════════════════════════════════════════ */
.oauth-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 14px;
}
.oauth-divider::before,
.oauth-divider::after {
  content: ''; flex: 1; border-top: 1px solid var(--line);
}
.oauth-divider span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.oauth-buttons {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.oauth-btn {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  padding: 10px 6px 8px;
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--text);
  font-size: 10px; font-weight: 700; cursor: pointer;
  transition: .14s; white-space: nowrap; overflow: hidden;
}
.oauth-btn:hover {
  border-color: rgba(168,85,247,.4);
  background: rgba(124,58,237,.07);
  transform: translateY(-1px);
}
.oauth-btn svg { flex-shrink: 0; }
[data-theme="light"] .oauth-btn { background: rgba(255,255,255,.9); }
@media (max-width: 380px) {
  .oauth-buttons { grid-template-columns: repeat(2, 1fr); }
  .oauth-btn span { display: none; }
  .oauth-btn { flex-direction: row; padding: 10px; }
}
.oauth-btn.oauth-soon {
  opacity: .38; cursor: not-allowed; position: relative;
}
.oauth-btn.oauth-soon::after {
  content: 'скоро';
  position: absolute; top: 3px; right: 4px;
  font-size: 8px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em;
}
.oauth-btn.oauth-active:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.oauth-btn.oauth-google-full {
  flex-direction: row; padding: 11px 16px; font-size: 13px; font-weight: 700;
  justify-content: center; gap: 10px;
}
.oauth-btn.oauth-vk {
  background: #0077ff; border-color: #0077ff; color: #fff;
}
.oauth-btn.oauth-vk:hover { background: #005fcc; border-color: #005fcc; }