body { font-family: -apple-system, system-ui, sans-serif; margin: 0; background: #f5f5f7; color: #1d1d1f; }
.topbar { display: flex; align-items: center; gap: 2rem; padding: 1rem 2rem; background: #fff; border-bottom: 1px solid #d2d2d7; }
.brand { font-weight: 600; text-decoration: none; color: #1d1d1f; }
nav a { margin-right: 1rem; color: #0066cc; text-decoration: none; }
nav a:hover { text-decoration: underline; }
.git-status { margin-left: auto; font-size: 0.85rem; color: #6e6e73; }
.git-status code { background: #f5f5f7; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.85rem; }
main { max-width: 1200px; margin: 0 auto; padding: 2rem; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 0.5rem 1rem; text-align: left; border-bottom: 1px solid #e5e5ea; }
th { background: #fafafa; font-size: 0.85rem; text-transform: uppercase; }
.btn { display: inline-block; padding: 0.5rem 1rem; background: #0066cc; color: #fff; border: none; border-radius: 6px; cursor: pointer; text-decoration: none; }
.btn:hover { background: #0056b3; }
.btn-secondary { background: #e5e5ea; color: #1d1d1f; }
.btn-danger { background: #d70015; }
.flash { padding: 0.75rem 1rem; margin: 1rem 0; border-radius: 6px; background: #e8f3ff; border: 1px solid #0066cc; }
.flash.error { background: #ffe8e8; border-color: #d70015; }
.badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 4px; font-size: 0.8rem; }
.badge-pending { background: #e5e5ea; }
.badge-running { background: #fff0b3; }
.badge-completed { background: #d1f2d1; }
.badge-failed { background: #ffd1d1; }
.badge-needs-op { background: #ffd1a0; }
.badge-cancelled { background: #e0e0e0; color: #6e6e73; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { background: #fff; padding: 2rem; border-radius: 12px; max-width: 480px; width: 90%; }
form label { display: block; margin: 0.75rem 0 0.25rem; font-weight: 500; }
form input, form textarea, form select { width: 100%; padding: 0.5rem; border: 1px solid #d2d2d7; border-radius: 6px; font: inherit; box-sizing: border-box; }
form textarea { min-height: 120px; }
.memory-bar { margin: 1rem 0; }
.memory-bar .bar { display: flex; height: 14px; border-radius: 4px; overflow: hidden; background: #e5e5ea; }
.memory-bar .seg.used  { background: #e74c3c; }
.memory-bar .seg.cache { background: #f39c12; }
.memory-bar .seg.free  { background: #2ecc71; }
.memory-bar small { color: #6e6e73; }

[x-cloak] { display: none !important; }

/* --- Dashboard --- */
.kpi-row { display:flex; gap:1em; flex-wrap:wrap; margin:1em 0; }
.kpi-card { flex:1; min-width:160px; padding:1em; background:#f5f5f7; border-radius:8px; }
.kpi-num { font-size:2em; font-weight:600; line-height:1; }
.kpi-label { font-size:0.9em; color:#6e6e73; margin-top:0.3em; }
.kpi-card small { display:block; margin-top:0.5em; color:#6e6e73; }

.docs-section { background:#fafafa; border:1px solid #e5e5ea; border-radius:8px; padding:0.5em 1em; margin:1em 0; }
.docs-section summary { cursor:pointer; padding:0.5em 0; }
.docs-section summary h2 { margin:0; }
.docs-section .docs-body { padding:0.5em 0 1em; }
.docs-section h3 { margin-top:1.2em; }
.docs-section h4 { margin-top:1em; color:#1d1d1f; }
.docs-section ul, .docs-section ol { padding-left:1.5em; }

/* Account overview table on dashboard */
.overview-table { width: 100%; border-collapse: collapse; margin: 0.5em 0 1em; }
.overview-table th, .overview-table td { padding: 0.6em 0.8em; border-bottom: 1px solid #e5e5ea; vertical-align: top; }
.overview-table th { background: #f5f5f7; text-align: left; font-weight: 600; font-size: 0.9em; }
.overview-table tr:hover td { background: #fafafa; }

/* Status badges (на ревью / реджект / не залита / etc) */
.status-badge {
    display: inline-block; padding: 0.2em 0.6em; border-radius: 4px;
    font-size: 0.85em; font-weight: 500;
}
.status-no-app, .status-no-version { background:#e5e5ea; color:#1d1d1f; }
.status-not-provisioned { background:#d2d2d7; color:#1d1d1f; }
.status-not-uploaded { background:#fff3cd; color:#856404; }
.status-ready { background:#cce5ff; color:#004085; }
.status-in-progress { background:#fce8d4; color:#7a4d00; }
.status-review { background:#e7f3ff; color:#0066cc; border:1px solid #b8daff; }
.status-rejected { background:#ffe0e0; color:#a02020; border:1px solid #f5c6cb; }
.status-approved { background:#e2f4d8; color:#2d5016; }
.status-live { background:#d4edda; color:#155724; border:1px solid #b8dabf; }
.status-removed { background:#ffcccc; color:#8b0000; border:1px solid #d0021b; }

/* KPI clarity: bigger gap label→number so they don't visually merge into adjacent card */
.kpi-card { display:flex; flex-direction:column; gap:0.25em; }

/* Rejection preview inline in dashboard table */
.rejection-preview {
    margin-top: 0.5em;
    padding: 0.5em 0.7em;
    background: #fff5f5;
    border-left: 3px solid #d0021b;
    border-radius: 3px;
    max-width: 480px;
}
.rejection-preview pre {
    white-space: pre-wrap;
    margin: 0.3em 0 0.4em;
    font-size: 0.85em;
    color: #5a1010;
    background: transparent;
}
.rejection-preview a { color: #a02020; font-weight: 500; }

/* VMs page: soft-green row tint for any VM that is currently running.
   Easier to scan a 20+-VM list and immediately see what's eating
   one of the two precious macOS Virtualization slots. Mint-100
   from Material palette — colour-vision-safe and unintrusive. */
tr.vm-running { background: #e8f5e9; }
tr.vm-running:hover { background: #d8efdb; }

/* Dashboard: when an account has multiple apps, each app gets its own
   row but they should read as a group. The first row of each subsequent
   account group gets a thicker top border to mark the boundary;
   sibling-app rows of the same account read continuous. */
tbody tr.account-first-row > td {
    border-top: 2px solid #999;
}