/* ── ATP Portal — Layout: body, sidebar, topbar, tabs ────────── */

    body {
      background: var(--bg0);
      color: var(--text1);
      font-family: system-ui, sans-serif;
      font-size: 13px;
      height: 100vh;
      display: flex;
      overflow: hidden
    }

    button,
    select,
    input {
      font: inherit
    }

    .sidebar {
      width: 290px;
      min-width: 290px;
      background: var(--bg1);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-height: 0;
      z-index: 20
    }

    .sidebar-header {
      padding: 16px 14px 12px;
      border-bottom: 1px solid var(--border)
    }

    .logo {
      font-size: 14px;
      font-weight: 600;
      color: var(--text1);
      letter-spacing: .3px
    }

    .sub {
      font-size: 11px;
      color: var(--text3);
      margin-top: 2px
    }

    .sidebar-search {
      padding: 10px;
      border-bottom: 1px solid var(--border)
    }

    .sidebar-search input {
      width: 100%;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 12px;
      color: var(--text1);
      outline: none
    }

    .sidebar-search input::placeholder {
      color: var(--text3)
    }

    .sidebar-filters {
      padding: 10px;
      border-bottom: 1px solid var(--border);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px
    }

    .sidebar-filters select {
      width: 100%;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 7px 10px;
      font-size: 12px;
      color: var(--text1);
      outline: none
    }

    .chip-row {
      padding: 8px 10px;
      border-bottom: 1px solid var(--border);
      display: flex;
      gap: 6px;
      flex-wrap: wrap
    }

    .chip-btn {
      background: var(--bg2);
      color: var(--text2);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 4px 10px;
      font-size: 11px;
      cursor: pointer
    }

    .chip-btn.active {
      background: rgba(55, 138, 221, .16);
      border-color: rgba(55, 138, 221, .5);
      color: #9cc8f3
    }

    .chip-import {
      background: rgba(127, 119, 221, .12);
      border-color: rgba(127, 119, 221, .4);
      color: #b3afee
    }

    .sidebar-body {
      overflow-y: auto;
      flex: 1;
      min-height: 0;
      padding: 8px 0
    }

    .client-group {
      margin-bottom: 4px
    }

    .client-label {
      font-size: 10px;
      font-weight: 600;
      color: var(--text3);
      letter-spacing: .8px;
      text-transform: uppercase;
      padding: 8px 14px 4px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .proj-item {
      padding: 9px 14px;
      cursor: pointer;
      border-left: 2px solid transparent;
      transition: background .15s;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: start
    }

    .proj-item:hover {
      background: var(--bg2)
    }

    .proj-item.active {
      background: var(--bg2);
      border-left-color: var(--blue)
    }

    .proj-name {
      font-size: 12px;
      color: var(--text1);
      line-height: 1.3
    }

    .proj-id {
      font-size: 10px;
      color: var(--text3);
      margin-top: 1px;
      font-family: monospace
    }

    .proj-meta-side {
      font-size: 10px;
      color: var(--text3);
      margin-top: 4px
    }

    .proj-actions {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px
    }

    .star-btn {
      border: none;
      background: transparent;
      color: var(--text3);
      cursor: pointer;
      font-size: 15px;
      line-height: 1
    }

    .star-btn.active {
      color: #ffd166
    }

    .proj-badge {
      display: inline-block;
      font-size: 9px;
      padding: 2px 6px;
      border-radius: 10px;
      font-weight: 500
    }

    .badge-live {
      background: #0F3D2E;
      color: #1D9E75
    }

    .badge-closed {
      background: #2a2a2a;
      color: #5c5c6a
    }

    .badge-pending {
      background: #3a2e0a;
      color: #EF9F27
    }

    .badge-imported {
      background: #1a1a3a;
      color: #7F77DD
    }

    .pace-pill {
      font-size: 9px;
      padding: 2px 6px;
      border-radius: 999px;
      font-weight: 600
    }

    .pace-ok {
      background: rgba(29, 158, 117, .15);
      color: #5fcfa9
    }

    .pace-warn {
      background: rgba(239, 159, 39, .15);
      color: #f0b84a
    }

    .pace-crit {
      background: rgba(226, 75, 74, .15);
      color: #f07070
    }

    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-width: 0;
      min-height: 0
    }

    .topbar {
      background: var(--bg1);
      border-bottom: 1px solid var(--border);
      padding: 12px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-shrink: 0
    }

    .proj-title {
      font-size: 15px;
      font-weight: 500
    }

    .proj-meta {
      font-size: 11px;
      color: var(--text2);
      margin-top: 2px
    }

    .topbar-right {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .status-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--teal);
      display: inline-block
    }

    .ts-text {
      font-size: 11px;
      color: var(--text3)
    }

    .action-btn {
      font-size: 11px;
      padding: 7px 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg2);
      color: var(--text2);
      cursor: pointer
    }

    .action-btn:hover {
      background: var(--bg3);
      color: var(--text1)
    }

    .action-btn.primary {
      background: var(--blue-dim);
      border-color: var(--blue-dim);
      color: #fff
    }

    .action-btn.primary:hover {
      background: var(--blue)
    }

    .tab-bar {
      display: flex;
      padding: 0 20px;
      background: var(--bg1);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      overflow-x: auto
    }

    .tab-btn {
      padding: 10px 18px;
      font-size: 12px;
      font-weight: 500;
      color: var(--text2);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: color .15s;
      white-space: nowrap
    }

    .tab-btn:hover {
      color: var(--text1)
    }

    .tab-btn.active {
      color: var(--blue);
      border-bottom-color: var(--blue)
    }

    .content {
      flex: 1 1 auto;
      overflow-y: auto;
      overflow-x: hidden;
      min-height: 0;
      padding: 20px;
      -webkit-overflow-scrolling: touch
    }