:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; color:#1d2733; background:#f5f7fa; }
body { margin:0; } main { max-width:1100px; margin:0 auto; padding:34px 20px 64px; } header,.row { display:flex; align-items:center; justify-content:space-between; gap:16px; } h1,h2 { margin:4px 0 14px; } h1 { font-size:28px; } h2 { font-size:19px; } small { color:#657080; } .panel,.summary article,dialog { background:#fff; border:1px solid #dce3ea; border-radius:12px; box-shadow:0 3px 14px #192b3d0b; } .panel { padding:20px; margin-top:18px; } .summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .summary article { padding:16px; display:grid; gap:6px; } .summary strong { font-size:18px; } form { display:grid; gap:12px; } .panel form { grid-template-columns:repeat(3,minmax(0,1fr)) auto; align-items:end; } label { display:grid; gap:6px; font-size:14px; } input,select,button { font:inherit; padding:9px 10px; border-radius:8px; border:1px solid #b9c4d0; } button { border:0; background:#1769e0; color:#fff; cursor:pointer; white-space:nowrap; } button.secondary { background:#eaf0f7; color:#26394d; } button.danger { background:#c33434; } button:disabled { opacity:.55; cursor:not-allowed; } dialog { min-width:min(430px,calc(100vw - 40px)); padding:22px; } dialog::backdrop { background:#12203380; } dialog output { display:block; padding:12px; word-break:break-all; background:#f4f7fa; border-radius:8px; font-family:ui-monospace,monospace; } #status { min-height:22px; color:#526170; } #login-error,#payment-error { color:#b42318; min-height:18px; margin:0; } .table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; } th,td { text-align:left; padding:12px 8px; border-bottom:1px solid #e5eaf0; vertical-align:top; } .actions { display:flex; flex-wrap:wrap; gap:6px; } .badge { display:inline-block; padding:3px 7px; border-radius:999px; background:#e8f5ed; color:#176b37; font-size:12px; }.badge.warning { background:#fff0e6; color:#9a4a07; }.badge.muted { background:#eef1f4; color:#526170; } .detail-item { border-top:1px solid #e5eaf0; padding:10px 0; display:flex; align-items:center; justify-content:space-between; gap:8px; } @media (max-width:760px) { .summary,.panel form { grid-template-columns:1fr; } main { padding:20px 12px; } th,td { min-width:100px; } }