:root {
      --bg: #111318;
      --panel: #1a1e26;
      --panel-2: #222733;
      --border: #343b49;
      --text: #eef2f7;
      --muted: #aab3c2;
      --accent: #8aa4ff;
      --danger: #ff7d8a;
      --success: #70d6a5;
      --shadow: 0 10px 30px rgba(0,0,0,.25);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
    }

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

    button {
      border: 1px solid var(--border);
      background: var(--panel-2);
      color: var(--text);
      border-radius: 10px;
      padding: .7rem 1rem;
      cursor: pointer;
    }

    button:hover { filter: brightness(1.08); }
    button.primary { background: var(--accent); color: #0d142b; border-color: transparent; font-weight: 700; }
    button.danger { color: var(--danger); }
    button.ghost { background: transparent; }

    input, textarea, select {
      width: 100%;
      color: var(--text);
      background: #11151c;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: .75rem;
      outline: none;
    }

    input:focus, textarea:focus, select:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(138,164,255,.15);
    }

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

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

    .sidebar {
      border-right: 1px solid var(--border);
      background: #151820;
      padding: 1rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      min-width: 0;
    }

    .brand {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .5rem;
    }

    .brand h1 {
      font-size: 1.05rem;
      margin: 0;
    }

    .version {
      font-size: .75rem;
      color: var(--muted);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: .2rem .5rem;
    }

    .main {
      min-width: 0;
      display: flex;
      flex-direction: column;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 10;
      padding: .8rem 1rem;
      background: rgba(17,19,24,.94);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
      display: flex;
      gap: .7rem;
      align-items: center;
    }

    .topbar input { flex: 1; }

    .content {
      display: grid;
      grid-template-columns: minmax(260px, 380px) 1fr;
      gap: 1rem;
      padding: 1rem;
      min-height: 0;
      flex: 1;
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: var(--shadow);
      min-width: 0;
    }

    .panel-header {
      padding: 1rem;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
    }

    .panel-body { padding: 1rem; }

    .stack { display: grid; gap: .75rem; }
    .row { display: flex; gap: .6rem; align-items: center; }
    .row > * { min-width: 0; }

    .project-list, .entity-list {
      display: grid;
      gap: .5rem;
      max-height: 34vh;
      overflow: auto;
    }

    .project-item, .entity-item {
      text-align: left;
      width: 100%;
      background: transparent;
      padding: .75rem;
    }

    .project-item.active, .entity-item.active {
      border-color: var(--accent);
      background: rgba(138,164,255,.1);
    }

    .entity-item strong {
      display: block;
      margin-bottom: .25rem;
    }

    .entity-item small {
      color: var(--muted);
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .category-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .5rem;
    }

    .category-button {
      text-align: left;
      padding: .65rem;
      background: transparent;
    }

    .category-button.active {
      border-color: var(--accent);
      color: var(--accent);
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    label {
      display: grid;
      gap: .4rem;
      color: var(--muted);
      font-size: .9rem;
    }

    label.full { grid-column: 1 / -1; }

    .status {
      font-size: .8rem;
      color: var(--success);
      margin-left: auto;
      white-space: nowrap;
    }

    .empty {
      color: var(--muted);
      text-align: center;
      padding: 2rem 1rem;
    }

    .toolbar {
      display: flex;
      gap: .5rem;
      flex-wrap: wrap;
    }

    .mobile-only { display: none; }

    .modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.65);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 100;
      padding: 1rem;
    }

    .modal.open { display: flex; }

    .modal-card {
      width: min(620px, 100%);
      max-height: 90vh;
      overflow: auto;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: var(--shadow);
    }

    .tag {
      display: inline-block;
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: .2rem .55rem;
      margin: .15rem .2rem .15rem 0;
      font-size: .8rem;
      color: var(--muted);
    }

    .section-card {
      grid-column: 1 / -1;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: .9rem;
      background: rgba(255,255,255,.02);
    }

    .section-card h3 {
      margin: 0 0 .8rem;
      font-size: 1rem;
    }

    .template-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .8rem;
    }

    .custom-row {
      display: grid;
      grid-template-columns: minmax(120px, .7fr) 1.3fr auto;
      gap: .5rem;
      margin-bottom: .5rem;
      align-items: start;
    }

    .hint {
      color: var(--muted);
      font-size: .82rem;
      line-height: 1.55;
    }

    .folder-list {
      display: grid;
      gap: .4rem;
      max-height: 180px;
      overflow: auto;
    }

    .folder-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: .35rem;
    }

    .folder-row button:first-child {
      text-align: left;
      background: transparent;
    }

    .folder-row.active button:first-child {
      border-color: var(--accent);
      color: var(--accent);
      background: rgba(138,164,255,.08);
    }

    .filter-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .5rem;
      margin-bottom: .75rem;
    }

    .entity-meta {
      display: flex;
      flex-wrap: wrap;
      gap: .3rem;
      margin-top: .35rem;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: .12rem .45rem;
      font-size: .72rem;
      color: var(--muted);
      line-height: 1.35;
    }

    .badge.accent {
      color: var(--accent);
      border-color: rgba(138,164,255,.55);
    }

    .breadcrumb {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .3rem;
      grid-column: 1 / -1;
      padding: .65rem .8rem;
      border: 1px solid var(--border);
      border-radius: 10px;
      color: var(--muted);
      background: rgba(255,255,255,.02);
    }

    .breadcrumb button {
      padding: .2rem .35rem;
      border: 0;
      background: transparent;
      color: var(--accent);
    }

    .checkline {
      display: flex;
      align-items: center;
      gap: .5rem;
      color: var(--text);
    }

    .checkline input {
      width: auto;
      flex: 0 0 auto;
    }

    .folder-checks {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem .8rem;
    }

    .relation-row {
      display: grid;
      grid-template-columns: minmax(110px,.6fr) 1.4fr auto;
      gap: .5rem;
      margin-bottom: .5rem;
      align-items: start;
    }

    .incoming-row {
      display: grid;
      grid-template-columns: minmax(90px,.5fr) 1.5fr;
      gap: .5rem;
      align-items: center;
      padding: .45rem 0;
      border-bottom: 1px solid rgba(52,59,73,.55);
    }

    .incoming-row:last-child { border-bottom: 0; }

    .link-button {
      text-align: left;
      background: transparent;
      color: var(--accent);
    }

    .mini-actions {
      display: flex;
      gap: .4rem;
      align-items: center;
    }

    .template-manager {
      width: min(1060px, 100%);
    }

    .template-toolbar {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) auto auto auto;
      gap: .55rem;
      align-items: center;
    }

    .template-field-card {
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: .8rem;
      margin-bottom: .7rem;
      background: rgba(255,255,255,.02);
    }

    .template-field-head {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: .6rem;
      align-items: center;
      margin-bottom: .65rem;
    }

    .template-field-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .65rem;
    }

    .template-field-grid .full {
      grid-column: 1 / -1;
    }

    .required-warning {
      grid-column: 1 / -1;
      border: 1px solid rgba(255,125,138,.55);
      background: rgba(255,125,138,.08);
      color: #ffc4ca;
      border-radius: 10px;
      padding: .7rem .8rem;
      line-height: 1.5;
    }

    .orphan-grid {
      display: grid;
      gap: .65rem;
    }

    .multi-select {
      min-height: 130px;
    }

    .field-inline {
      display: flex;
      align-items: center;
      gap: .55rem;
      color: var(--text);
    }

    .field-inline input[type="checkbox"] {
      width: auto;
    }

    .category-tools {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: .5rem;
      align-items: end;
    }

    .history-manager,
    .backup-manager {
      width: min(1120px, 100%);
    }

    .history-layout {
      display: grid;
      grid-template-columns: minmax(260px, .75fr) minmax(360px, 1.25fr);
      gap: 1rem;
      align-items: start;
    }

    .history-list {
      display: grid;
      gap: .55rem;
      max-height: 68vh;
      overflow: auto;
    }

    .history-item {
      border: 1px solid var(--border);
      border-radius: 11px;
      padding: .7rem;
      background: rgba(255,255,255,.02);
    }

    .history-item.active {
      border-color: var(--accent);
      background: rgba(138,164,255,.08);
    }

    .history-item-head {
      display: flex;
      justify-content: space-between;
      gap: .5rem;
      align-items: flex-start;
    }

    .history-item small {
      color: var(--muted);
      display: block;
      margin-top: .25rem;
    }

    .diff-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }

    .diff-table th,
    .diff-table td {
      border-bottom: 1px solid var(--border);
      padding: .6rem;
      vertical-align: top;
      text-align: left;
      overflow-wrap: anywhere;
      white-space: pre-wrap;
    }

    .diff-table th {
      color: var(--muted);
      font-size: .82rem;
    }

    .diff-added { background: rgba(112,214,165,.08); }
    .diff-removed { background: rgba(255,125,138,.08); }
    .diff-changed { background: rgba(138,164,255,.08); }

    .backup-grid {
      display: grid;
      grid-template-columns: minmax(300px, .8fr) minmax(360px, 1.2fr);
      gap: 1rem;
      align-items: start;
    }

    .storage-meter {
      height: 12px;
      border-radius: 999px;
      overflow: hidden;
      background: #11151c;
      border: 1px solid var(--border);
    }

    .storage-meter > span {
      display: block;
      height: 100%;
      background: var(--accent);
      width: 0;
      transition: width .2s ease;
    }

    .backup-list,
    .trash-list {
      display: grid;
      gap: .6rem;
      max-height: 46vh;
      overflow: auto;
    }

    .backup-item,
    .trash-item {
      border: 1px solid var(--border);
      border-radius: 11px;
      padding: .75rem;
      background: rgba(255,255,255,.02);
    }

    .backup-item-head,
    .trash-item-head {
      display: flex;
      justify-content: space-between;
      gap: .6rem;
      align-items: flex-start;
      margin-bottom: .45rem;
    }

    .backup-tabs {
      display: flex;
      gap: .5rem;
      flex-wrap: wrap;
    }

    .backup-tabs button.active {
      border-color: var(--accent);
      color: var(--accent);
      background: rgba(138,164,255,.08);
    }

    .capacity-warning {
      color: var(--danger);
      font-size: .83rem;
      line-height: 1.5;
    }

    @media (max-width: 860px) {
      .history-layout,
      .backup-grid {
        grid-template-columns: 1fr;
      }

      .history-list,
      .backup-list,
      .trash-list {
        max-height: none;
      }
    }

    .import-manager {
      width: min(1180px, 100%);
    }

    .import-source-grid {
      display: grid;
      grid-template-columns: 1.3fr .7fr;
      gap: .8rem;
    }

    .import-options {
      display: grid;
      grid-template-columns: repeat(3, minmax(150px, 1fr));
      gap: .65rem;
    }

    .import-preview-list {
      display: grid;
      gap: .75rem;
    }

    .import-candidate {
      border: 1px solid var(--border);
      border-radius: 13px;
      padding: .85rem;
      background: rgba(255,255,255,.025);
    }

    .import-candidate.duplicate {
      border-color: rgba(255,184,92,.62);
      background: rgba(255,184,92,.055);
    }

    .import-candidate.disabled {
      opacity: .58;
    }

    .candidate-head {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: .65rem;
      align-items: center;
      margin-bottom: .7rem;
    }

    .candidate-grid {
      display: grid;
      grid-template-columns: 1.2fr repeat(3, minmax(125px,.7fr));
      gap: .6rem;
    }

    .candidate-grid .wide {
      grid-column: span 2;
    }

    .candidate-raw {
      margin-top: .65rem;
      border: 1px solid var(--border);
      border-radius: 9px;
      padding: .65rem;
      max-height: 150px;
      overflow: auto;
      white-space: pre-wrap;
      color: var(--muted);
      font-size: .82rem;
      background: #11151c;
    }

    .parsed-fields {
      display: flex;
      flex-wrap: wrap;
      gap: .35rem;
      margin-top: .55rem;
    }

    .duplicate-note {
      margin-top: .55rem;
      padding: .55rem .65rem;
      border-radius: 9px;
      color: #ffd7a4;
      background: rgba(255,184,92,.08);
      border: 1px solid rgba(255,184,92,.35);
      font-size: .82rem;
    }

    .history-row {
      border: 1px solid var(--border);
      border-radius: 11px;
      padding: .75rem;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: .65rem;
      align-items: center;
      margin-bottom: .55rem;
    }

    .source-files {
      display: grid;
      gap: .35rem;
      max-height: 130px;
      overflow: auto;
    }

    .source-file-row {
      display: flex;
      justify-content: space-between;
      gap: .5rem;
      border-bottom: 1px solid rgba(52,59,73,.5);
      padding: .35rem 0;
      color: var(--muted);
      font-size: .84rem;
    }

    .import-summary {
      display: flex;
      flex-wrap: wrap;
      gap: .45rem;
      align-items: center;
      padding: .65rem .75rem;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: rgba(138,164,255,.055);
    }

    @media (max-width: 900px) {
      .import-source-grid,
      .import-options,
      .candidate-grid {
        grid-template-columns: 1fr;
      }
      .candidate-grid .wide {
        grid-column: auto;
      }
    }

    @media (max-width: 760px) {
      .template-toolbar,
      .template-field-grid,
      .category-tools {
        grid-template-columns: 1fr;
      }
      .template-field-grid .full {
        grid-column: auto;
      }
    }

    @media (max-width: 700px) {
      .filter-grid,
      .relation-row,
      .incoming-row {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 700px) {
      .template-grid,
      .custom-row {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 900px) {
      .app { grid-template-columns: 1fr; }
      .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(86vw, 340px);
        z-index: 50;
        transform: translateX(-105%);
        transition: transform .2s ease;
        box-shadow: var(--shadow);
      }
      .sidebar.open { transform: translateX(0); }
      .mobile-only { display: inline-flex; }
      .content { grid-template-columns: 1fr; }
      .editor-panel { min-height: 50vh; }
      .form-grid { grid-template-columns: 1fr; }
      label.full { grid-column: auto; }
      .topbar { padding: .7rem; }
    }

    @media (max-width: 520px) {
      .content { padding: .65rem; }
      .panel-header, .panel-body { padding: .8rem; }
      .topbar { flex-wrap: wrap; }
      .topbar input { order: 3; flex-basis: 100%; }
      button { padding: .65rem .8rem; }
    }
  

    [hidden] { display: none !important; }

    :root {
      --font-scale: 1;
    }

    html { font-size: calc(16px * var(--font-scale)); }

    html[data-theme="light"] {
      --bg: #f2f4f8;
      --panel: #ffffff;
      --panel-2: #e9edf5;
      --border: #cdd4df;
      --text: #1b2330;
      --muted: #647083;
      --accent: #506fdb;
      --danger: #c33c4b;
      --success: #20845a;
      --shadow: 0 10px 30px rgba(30,40,60,.12);
    }

    html[data-theme="light"] input,
    html[data-theme="light"] textarea,
    html[data-theme="light"] select {
      background: #f7f9fc;
    }

    body.compact .sidebar { gap: .65rem; padding: .75rem; }
    body.compact .panel-header,
    body.compact .panel-body { padding: .7rem; }
    body.compact button { padding: .52rem .7rem; }
    body.compact input,
    body.compact textarea,
    body.compact select { padding: .58rem; }
    body.compact .entity-item { padding-top: .55rem; padding-bottom: .55rem; }

    .network-badge.offline {
      color: var(--danger);
      border-color: rgba(255,125,138,.55);
    }

    .update-banner {
      position: fixed;
      left: 50%;
      bottom: 1rem;
      transform: translateX(-50%);
      z-index: 300;
      width: min(680px, calc(100% - 2rem));
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .8rem;
      padding: .8rem 1rem;
      border: 1px solid var(--accent);
      border-radius: 14px;
      background: var(--panel);
      box-shadow: var(--shadow);
    }

    .settings-manager { width: min(760px, 100%); }

    .settings-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .8rem;
    }

    .settings-grid .full { grid-column: 1 / -1; }

    .lock-screen {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: grid;
      place-items: center;
      padding: 1rem;
      background: #0d1016;
    }

    .lock-card {
      width: min(420px, 100%);
      border: 1px solid #343b49;
      border-radius: 18px;
      padding: 1.25rem;
      background: #1a1e26;
      color: #eef2f7;
      box-shadow: 0 18px 60px rgba(0,0,0,.45);
      display: grid;
      gap: .85rem;
      text-align: center;
    }

    .lock-logo {
      width: 72px;
      height: 72px;
      border-radius: 18px;
      margin: 0 auto;
      display: grid;
      place-items: center;
      background: #222a3d;
      font-size: 2rem;
    }

    .first-run-manager { width: min(720px, 100%); }

    .welcome-actions {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: .7rem;
    }

    .pwa-info {
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: .8rem;
      background: rgba(255,255,255,.02);
      line-height: 1.6;
    }

    @media (max-width: 700px) {
      .settings-grid,
      .welcome-actions { grid-template-columns: 1fr; }
      .settings-grid .full { grid-column: auto; }
      .network-badge { display: none; }
    }

html[data-theme="light"] .sidebar {
  background: #e7ebf2;
}

html[data-theme="light"] .topbar {
  background: rgba(242,244,248,.94);
}

html[data-theme="light"] .project-item,
html[data-theme="light"] .entity-item,
html[data-theme="light"] .category-button,
html[data-theme="light"] .folder-row button:first-child,
html[data-theme="light"] .link-button {
  color: var(--text);
}

html[data-theme="light"] .modal {
  background: rgba(30,38,52,.38);
}


/* v0.8 cloud sync */
.cloud-status-button {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
  padding: .55rem .72rem;
}

.cloud-dot {
  width: .62rem;
  height: .62rem;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 3px rgba(170,179,194,.12);
}

.cloud-dot.synced { background: var(--success); box-shadow: 0 0 0 3px rgba(112,214,165,.13); }
.cloud-dot.dirty { background: #f2c66d; box-shadow: 0 0 0 3px rgba(242,198,109,.13); }
.cloud-dot.error { background: var(--danger); box-shadow: 0 0 0 3px rgba(255,125,138,.13); }
.cloud-dot.syncing { background: var(--accent); animation: cloudPulse 1s infinite alternate; }

@keyframes cloudPulse { from { opacity: .35; } to { opacity: 1; } }

.cloud-manager { width: min(920px, 100%); }
.conflict-manager { width: min(900px, 100%); }

.sync-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .65rem;
}

.sync-summary-grid > div {
  display: grid;
  gap: .25rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .7rem;
  background: rgba(255,255,255,.02);
}

.conflict-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
}

.cloud-project-mark {
  font-size: .72rem;
  color: var(--muted);
  margin-left: .35rem;
}

@media (max-width: 760px) {
  .sync-summary-grid,
  .conflict-compare { grid-template-columns: 1fr; }
  .cloud-status-button #cloudStatusText { display:none; }
}


/* v0.8.1 sync queue, log, and field-level conflict merge */
.sync-queue-list,
.sync-log-list,
.conflict-merge-list {
  display: grid;
  gap: .55rem;
  margin-top: .65rem;
}

.sync-queue-item,
.sync-log-item,
.conflict-merge-item {
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: .7rem;
  background: rgba(255,255,255,.02);
}

.sync-queue-item.error,
.sync-log-item.error {
  border-color: rgba(255,125,138,.55);
  background: rgba(255,125,138,.07);
}

.sync-log-item.success {
  border-color: rgba(112,214,165,.45);
  background: rgba(112,214,165,.05);
}

.sync-log-head,
.conflict-merge-head {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  align-items: flex-start;
}

.sync-log-item small,
.sync-queue-item small {
  display: block;
  color: var(--muted);
  margin-top: .2rem;
}

.conflict-merge-item {
  display: grid;
  grid-template-columns: minmax(150px,.65fr) minmax(220px,1fr) minmax(220px,1fr) minmax(150px,.55fr);
  gap: .6rem;
  align-items: start;
}

.conflict-value {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 190px;
  overflow: auto;
  padding: .55rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #11151c;
  font-size: .83rem;
}

html[data-theme="light"] .conflict-value {
  background: #f6f8fc;
}

.conflict-choice label {
  margin-bottom: .35rem;
}

@media (max-width: 900px) {
  .conflict-merge-item {
    grid-template-columns: 1fr;
  }
}


/* v0.8.2 device management, selective sync, diagnostics, snapshots */
.cloud-manager { width: min(1080px, 100%); }
.cloud-admin-list {
  display: grid;
  gap: .6rem;
}
.cloud-admin-item {
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: .75rem;
  background: rgba(255,255,255,.02);
}
.cloud-admin-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .7rem;
}
.cloud-admin-meta {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-top: .35rem;
}
.cloud-admin-actions {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  margin-top: .65rem;
}
.project-sync-row {
  display: grid;
  grid-template-columns: minmax(180px,1fr) minmax(170px,.7fr) auto;
  gap: .65rem;
  align-items: center;
}
.diagnostic-output {
  margin: .8rem 0 0;
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .8rem;
  background: #11151c;
  color: var(--text);
  font: .82rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
}
html[data-theme="light"] .diagnostic-output { background: #f6f8fc; }
.sync-mode-mark { color: var(--muted); font-size: .75rem; }
.sync-mode-mark.local { color: #f2c66d; }
.sync-mode-mark.paused { color: var(--danger); }
.sync-mode-mark.pull { color: var(--accent); }
.toast-container {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1200;
  width: min(420px, calc(100% - 2rem));
  display: grid;
  gap: .55rem;
  pointer-events: none;
}
.toast-message {
  pointer-events: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .75rem .85rem;
  background: var(--panel);
  box-shadow: var(--shadow);
  animation: toastIn .18s ease-out;
}
.toast-message.success { border-color: rgba(112,214,165,.55); }
.toast-message.error { border-color: rgba(255,125,138,.6); }
.toast-message.warning { border-color: rgba(242,198,109,.65); }
@keyframes toastIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }
@media (max-width: 760px) {
  .project-sync-row { grid-template-columns: 1fr; }
  .cloud-admin-head { display: grid; }
}