:root { --ink:#17151e; --muted:#65616f; --surface:#f8f7ff; --card:#fff; --line:#ded9ed; --indigo:#5748e8; --violet:#7a54db; --gold:#f4a400; --danger:#cb3044; }
* { box-sizing:border-box; }
html { background:var(--surface); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif; }
body { margin:0; min-width:320px; }
.admin-page { min-height:100vh; display:flex; flex-direction:column; }
a { color:var(--indigo); font-weight:650; text-underline-offset:3px; }
.site-header { background:#fff; border-bottom:1px solid var(--line); }
.header-content,.content,.footer-content { width:min(100% - 40px, 860px); margin:auto; }
.header-content { display:flex; align-items:center; justify-content:space-between; min-height:70px; gap:20px; }
.brand { color:var(--ink); font-size:1.2rem; font-weight:800; text-decoration:none; white-space:nowrap; }
.brand-mark { color:var(--indigo); margin-right:5px; }
nav { display:flex; flex-wrap:wrap; gap:17px; }
nav a { color:var(--muted); text-decoration:none; }
nav a[aria-current="page"] { color:var(--indigo); }
.content { padding:52px 0 68px; }
.eyebrow { color:var(--indigo); font-weight:750; letter-spacing:.03em; text-transform:uppercase; font-size:.77rem; }
h1 { font-size:clamp(2.2rem,7vw,3.5rem); line-height:1.04; letter-spacing:-.04em; margin:10px 0 16px; }
h2 { font-size:1.4rem; margin:34px 0 10px; letter-spacing:-.02em; }
h3 { font-size:1.05rem; margin:0 0 6px; }
p,li { color:var(--muted); font-size:1.04rem; line-height:1.6; }
.lead { font-size:1.2rem; max-width:640px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:24px; margin-top:22px; box-shadow:0 8px 22px rgba(61,45,120,.05); }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:25px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:11px 17px; background:var(--indigo); border:0; border-radius:12px; color:#fff; font:inherit; font-weight:750; text-decoration:none; cursor:pointer; }
.button:hover { background:#493bd4; }
.button.secondary { background:#eeebff; color:var(--indigo); }
.site-footer { border-top:1px solid var(--line); background:#fff; padding:23px 0; }
.footer-content { display:flex; gap:15px; justify-content:space-between; color:var(--muted); font-size:.9rem; }
form { display:grid; gap:16px; }
label { display:grid; gap:7px; color:var(--ink); font-weight:700; font-size:.95rem; }
input,select,textarea { width:100%; border:1px solid #cfc9dd; background:#fff; border-radius:11px; color:var(--ink); font:inherit; padding:12px; }
textarea { min-height:124px; resize:vertical; }
input:focus,select:focus,textarea:focus { outline:3px solid #dcd8ff; border-color:var(--indigo); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.hint,.notice { color:var(--muted); font-size:.92rem; }
.notice { padding:12px 14px; background:#f0efff; border-radius:11px; }
.error { color:var(--danger); }.success { color:#197943; }
.honeypot { position:absolute; left:-9999px; }
.message { white-space:pre-wrap; color:var(--ink); }
.inbox-item { border-top:1px solid var(--line); padding:20px 0; }.inbox-item:first-child { border-top:0; }
.meta { color:var(--muted); font-size:.9rem; }.status { border:0; border-radius:999px; background:#eeebff; color:var(--indigo); padding:6px 9px; font:inherit; font-weight:700; }
.hidden { display:none !important; }
.admin-label { color:var(--muted); font-size:.92rem; font-weight:700; }
.admin-content { width:min(100% - 48px,1120px); max-width:none; padding:clamp(36px,7vh,84px) 0 42px; }
.admin-login { width:min(100%,500px); max-width:none; margin:0 auto 26px; padding:30px; }
.admin-page .site-footer { margin-top:auto; }
.admin-page .site-footer { padding:18px 0; }
.password-field { position:relative; display:block; }.password-field input { padding-right:68px; }.text-button { appearance:none; border:0; background:transparent; color:var(--indigo); font:inherit; font-weight:750; padding:5px; cursor:pointer; }.password-toggle { position:absolute; right:9px; top:50%; transform:translateY(-50%); }
.admin-title-row,.section-title-row,.dialog-header,.request-top { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.admin-title-row h1 { margin-bottom:8px; }.admin-actions { display:flex; flex-wrap:wrap; gap:9px; padding-top:14px; }
.admin-section { margin-top:46px; }.admin-section h2 { margin:0 0 8px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:16px; }
.metric-card,.health-card,.request-card { background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 22px rgba(61,45,120,.05); }
.metric-card { padding:18px; min-height:142px; }.metric-card h3 { margin:0; }.metric-value { color:var(--ink); font-size:1.9rem; font-weight:800; line-height:1.05; margin:16px 0 7px; letter-spacing:-.04em; }
.health-card { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; overflow:hidden; margin-top:16px; }.health-card div { padding:17px; background:var(--card); border:1px solid #f1eef8; }.health-card span { display:block; color:var(--muted); font-size:.86rem; margin-bottom:7px; }.health-card strong { display:block; color:var(--ink); font-size:.98rem; overflow-wrap:anywhere; }
.filter-row { display:flex; flex-wrap:wrap; align-items:end; gap:14px; background:#f0efff; border-radius:15px; padding:15px; margin:17px 0; }.filter-row label { min-width:145px; }.filter-row .search-label { flex:1 1 260px; }.filter-row input,.filter-row select { background:#fff; }.check-label { display:flex; grid-template-columns:auto 1fr; align-items:center; gap:8px; min-height:46px; }.check-label input { width:18px; height:18px; accent-color:var(--indigo); }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:16px; background:#fff; }table { width:100%; min-width:800px; border-collapse:collapse; text-align:left; }th,td { padding:13px 15px; border-bottom:1px solid var(--line); vertical-align:middle; }th { color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.045em; }tbody tr:last-child td { border-bottom:0; }.selectable-row { cursor:pointer; }.selectable-row:hover,.selectable-row:focus { background:#f4f2ff; outline:none; }
.status-tag { display:inline-flex; align-items:center; min-height:27px; padding:4px 9px; border-radius:999px; background:#eceaff; color:var(--indigo); font-size:.82rem; font-weight:750; white-space:nowrap; }.status-tag.failed { background:#fde8ec; color:var(--danger); }.status-tag.pending { background:#fff3d7; color:#8b5d00; }.status-tag.processing { background:#e5f3fa; color:#1b647c; }.status-tag.completed { background:#e8f6ec; color:#197943; }.status-tag.unavailable { background:#ececf0; color:#55515d; }
.pagination { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:14px; }.pagination .button { min-height:39px; padding:8px 13px; }.button:disabled { opacity:.45; cursor:not-allowed; }
.request-list { display:grid; gap:10px; }.request-card { padding:16px 18px; }.request-card h3 { font-size:1.08rem; }.request-card p { margin:8px 0; }.request-card strong { color:var(--ink); }.compact-request { cursor:pointer; }.compact-request:hover,.compact-request:focus { background:#f4f2ff; outline:3px solid #dcd8ff; outline-offset:1px; }.table-subtitle { display:block; color:var(--muted); font-size:.82rem; font-weight:500; margin-top:3px; }.job-detail { width:min(760px,calc(100% - 30px)); max-height:85vh; border:1px solid var(--line); border-radius:20px; padding:24px; color:var(--ink); background:var(--surface); box-shadow:0 20px 70px rgba(16,12,45,.3); }.job-detail::backdrop { background:rgba(20,17,34,.5); }.dialog-header { position:sticky; top:-24px; z-index:1; padding:2px 0 17px; background:var(--surface); border-bottom:1px solid var(--line); }.dialog-header h2 { margin:4px 0; }.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:18px 0 24px; }.detail-item { padding:13px; background:#fff; border:1px solid #f1eef8; }.detail-item span { display:block; color:var(--muted); font-size:.8rem; margin-bottom:4px; }.detail-item strong { overflow-wrap:anywhere; }.detail-json { overflow:auto; padding:14px; background:#201d2d; color:#f8f7ff; border-radius:13px; font-size:.85rem; }.history-list { padding-left:21px; }.history-list li { color:var(--muted); margin:8px 0; }.support-detail h3 { margin-top:24px; }.support-detail .support-subject { margin:18px 0 6px; }.support-controls { display:grid; grid-template-columns:minmax(180px,1fr) auto; gap:12px; align-items:end; }.support-controls p { grid-column:1 / -1; margin:0; }.support-request-details { margin-bottom:16px; }
@media (max-width:600px) { .header-content,.footer-content { align-items:flex-start; flex-direction:column; padding:17px 0; }.content { padding-top:38px; }.admin-content { width:min(100% - 32px,1120px); padding-top:30px; }.admin-login { padding:24px; }.grid,.form-grid { grid-template-columns:1fr; }.footer-content { gap:8px; } }
@media (max-width:820px) { .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.health-card { grid-template-columns:repeat(2,minmax(0,1fr)); }.admin-title-row { flex-direction:column; }.admin-actions { padding-top:0; } }
@media (max-width:520px) { .metric-grid,.health-card,.detail-grid,.support-controls { grid-template-columns:1fr; }.filter-row { align-items:stretch; }.filter-row label { width:100%; }.pagination { justify-content:space-between; gap:8px; }.pagination .hint { font-size:.8rem; }.request-top { flex-direction:column; gap:9px; }.support-controls .button { width:100%; } }