/* Support app — base stylesheet. Tenant tints live in --tenant-color. */
:root {
    --bg: #0f1419;
    --bg-2: #1a1f2e;
    --bg-3: #232b3b;
    --fg: #e4e6eb;
    --fg-2: #b0b3b8;
    --fg-3: #8a8d91;
    --border: #2d3748;
    --card: #1e2533;
    --tenant-color: #0ea5e9;
    --warn: #f59e0b;
    --danger: #ef4444;
    --success: #22c55e;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; }
a { color: var(--tenant-color); text-decoration: none; }
a:hover { text-decoration: underline; }
.sup-header { border-bottom: 1px solid var(--border); background: var(--bg-2); }
.sup-header-inner { max-width: 1100px; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.sup-brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--fg); font-size: 1.1rem; font-weight: 600; }
.sup-brand:hover { text-decoration: none; }
.sup-brand-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sup-nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; font-size: 0.95rem; }
.sup-nav a { color: var(--fg-2); }
.sup-nav a:hover { color: var(--tenant-color); }
.sup-userchip { color: var(--fg-3); font-size: 0.85rem; }
.sup-userchip a { color: var(--fg-3); margin-left: 0.5rem; }
.sup-main { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }
.sup-flash { max-width: 1100px; margin: 1rem auto 0; padding: 0.8rem 1.2rem; border-radius: 6px; background: rgba(56,189,248,0.08); border-left: 4px solid var(--tenant-color); }
.sup-flash-warn { background: rgba(245,158,11,0.08); border-left-color: var(--warn); }
.sup-flash-error { background: rgba(239,68,68,0.08); border-left-color: var(--danger); }
.sup-flash-good { background: rgba(34,197,94,0.08); border-left-color: var(--success); }
.sup-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; margin-bottom: 1.25rem; }
.sup-card h1, .sup-card h2 { color: var(--tenant-color); margin-bottom: 0.75rem; }
.sup-card h1 { font-size: 1.5rem; }
.sup-card h2 { font-size: 1.2rem; }
.sup-card p, .sup-card li { color: var(--fg-2); margin-bottom: 0.5rem; }
.sup-card ul, .sup-card ol { margin-left: 1.5rem; }
.sup-form { display: flex; flex-direction: column; gap: 0.85rem; }
.sup-form label { color: var(--fg-2); font-size: 0.9rem; }
.sup-form input[type=email], .sup-form input[type=text], .sup-form input[type=password], .sup-form select, .sup-form textarea {
    width: 100%; background: var(--bg-3); color: var(--fg); border: 1px solid var(--border); border-radius: 4px; padding: 0.6rem 0.8rem; font-size: 0.95rem; font-family: inherit;
}
.sup-form input:focus, .sup-form textarea:focus, .sup-form select:focus { outline: 2px solid var(--tenant-color); outline-offset: 1px; }
.sup-form textarea { min-height: 8rem; resize: vertical; }
.sup-btn { display: inline-block; padding: 0.55rem 1.1rem; border-radius: 5px; font-size: 0.95rem; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: var(--bg-3); color: var(--fg); }
.sup-btn:hover { background: var(--bg-2); text-decoration: none; }
.sup-btn-primary { background: var(--tenant-color); color: #0b0f17; border-color: var(--tenant-color); }
.sup-btn-primary:hover { filter: brightness(1.1); background: var(--tenant-color); }
.sup-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.sup-table th, .sup-table td { padding: 0.6rem 0.8rem; text-align: left; border-bottom: 1px solid var(--border); }
.sup-table th { background: var(--bg-3); color: var(--fg); font-weight: 600; }
.sup-status { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 4px; font-size: 0.78rem; font-weight: 600; }
.sup-status-open { background: rgba(245,158,11,0.18); color: var(--warn); }
.sup-status-in_progress { background: rgba(56,189,248,0.18); color: var(--tenant-color); }
.sup-status-waiting_on_user { background: rgba(139,92,246,0.18); color: #8b5cf6; }
.sup-status-resolved, .sup-status-closed { background: rgba(34,197,94,0.18); color: var(--success); }
.sup-status-duplicate { background: rgba(138,141,145,0.18); color: var(--fg-3); }
.sup-footer { border-top: 1px solid var(--border); margin-top: 4rem; }
.sup-footer-inner { max-width: 1100px; margin: 0 auto; padding: 1.5rem; color: var(--fg-3); font-size: 0.85rem; }
.sup-footer-inner p { margin-bottom: 0.4rem; }
.sup-footer-meta { color: var(--fg-3); font-size: 0.8rem; }
.sup-verify-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 2rem; max-width: 640px; margin: 2rem auto; }
.sup-verify-pass { border-left: 6px solid var(--success); }
.sup-verify-fail { border-left: 6px solid var(--danger); }
.sup-verify-row { display: flex; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
.sup-verify-row:last-child { border-bottom: 0; }
.sup-verify-row .k { width: 130px; color: var(--fg-3); }
.sup-verify-row .v { color: var(--fg); flex: 1; word-break: break-word; }
.sup-msg { background: var(--bg-3); border-radius: 6px; padding: 0.85rem 1.1rem; margin-bottom: 0.75rem; }
.sup-msg-staff { border-left: 3px solid var(--tenant-color); }
.sup-msg-user { border-left: 3px solid var(--fg-3); }
.sup-msg-bot { border-left: 3px solid var(--warn); }
.sup-msg-meta { color: var(--fg-3); font-size: 0.8rem; margin-bottom: 0.4rem; }
.sup-msg-body { color: var(--fg); white-space: pre-wrap; }