:root { color-scheme: dark; --ink: #f1f5f0; --muted: #a8b3aa; --bg: #08120d; --panel: #101c14; --line: #26352a; --lime: #c5f86c; --orange: #ffb36b; --red: #ff8d8d; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 15% -10%, #274c2d 0, transparent 32rem), var(--bg); color: var(--ink); font: 15px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; }
.shell { max-width: 1280px; margin: 0 auto; padding: 24px 28px 72px; }
header.site-header { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; gap: 24px; align-items: center; margin: -24px -28px 34px; padding: 16px 28px; background: color-mix(in srgb, var(--bg) 90%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-width: max-content; }
.brand strong, .brand small { display: block; line-height: 1.1; }.brand strong { font-size: .92rem; letter-spacing: -.02em; }.brand small { color: var(--muted); font-size: .65rem; margin-top: 4px; }.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--lime); color: #102210; font-size: 1.2rem; font-weight: 900; }
.desktop-nav { display: flex; gap: 4px; align-items: center; margin-left: auto; }.desktop-nav a { color: var(--muted); text-decoration: none; padding: 9px 12px; border-radius: 7px; font-size: .8rem; font-weight: 800; }.desktop-nav a:hover, .desktop-nav a.active { color: var(--ink); background: #1b2b1e; }.header-actions { display: flex; align-items: center; gap: 10px; }.menu-toggle { display: none; background: transparent; border-color: var(--line); color: var(--ink); }
h1, h2, p { margin: 0; } h1 { max-width: 680px; font-size: clamp(2.1rem, 5vw, 4rem); letter-spacing: -0.065em; line-height: .98; } h2 { font-size: 1.15rem; letter-spacing: -0.03em; }
.eyebrow { color: var(--lime); font-size: .72rem; font-weight: 800; letter-spacing: .12em; margin-bottom: 8px; } .subhead { color: var(--muted); max-width: 610px; margin-top: 18px; font-size: 1.03rem; }
button { border: 1px solid #5f8c64; background: var(--lime); color: #102210; border-radius: 8px; padding: 11px 15px; font-weight: 800; cursor: pointer; transition: transform .16s ease, filter .16s ease, opacity .16s ease; } button:hover { filter: brightness(1.08); transform: translateY(-1px); } button:disabled { cursor: wait; opacity: .62; transform: none; } button.is-loading::after { content: ""; display: inline-block; width: .72em; height: .72em; margin-left: .55em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.08em; animation: button-spin .72s linear infinite; } button.danger { background: transparent; border-color: #835050; color: #ffb0b0; padding: 7px 10px; font-size: .78rem; }
.setup-warning { background: #3d2e11; color: #ffe0a1; padding: 15px 18px; border: 1px solid #8a6b27; border-radius: 10px; margin-bottom: 22px; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; } .metrics article, .panel { background: color-mix(in srgb, var(--panel) 92%, black); border: 1px solid var(--line); border-radius: 12px; }
.metrics article { padding: 20px; min-height: 140px; display: flex; flex-direction: column; } .metrics span, .metrics small { color: var(--muted); } .metrics strong { color: var(--lime); font-size: 2.1rem; letter-spacing: -.07em; margin: 12px 0 auto; } .metrics small { font-size: .77rem; }
.panel { margin-top: 18px; overflow: hidden; } .panel-heading { padding: 20px 20px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .panel-heading .eyebrow { margin-bottom: 4px; } .count { color: var(--muted); font-size: .78rem; }
.table-wrap { overflow: auto; border-top: 1px solid var(--line); } table { border-collapse: collapse; width: 100%; min-width: 800px; } th, td { padding: 14px 20px; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); } th { color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; } td { vertical-align: middle; } tr:last-child td { border-bottom: 0; } .member { display: grid; } .member small { color: var(--muted); } .status { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; text-transform: capitalize; } .status.active, .status.completed { background: #244425; color: #bbf6bc; } .status.pending { background: #4f411a; color: #ffe09a; } .status.failed, .status.timeout { background: #4b2929; color: #ffb4b4; } .empty { text-align: center; color: var(--muted); padding: 34px; }
@media (max-width: 980px) { .desktop-nav { display: none; }.menu-toggle { display: inline-block; } }
@media (max-width: 800px) { .shell { padding: 16px 16px 50px; } header.site-header { margin: -16px -16px 26px; padding: 12px 16px; } header.site-header #refresh { display: none; } .metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .metrics { grid-template-columns: 1fr; } }
.sidebar-backdrop[hidden] { display: none; }.sidebar-backdrop { position: fixed; inset: 0; z-index: 19; background: rgba(0,0,0,.58); }.mobile-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: min(84vw, 320px); padding: 20px; background: #0d1911; border-right: 1px solid var(--line); transform: translateX(-105%); transition: transform .22s ease; box-shadow: 20px 0 50px rgba(0,0,0,.28); }.mobile-sidebar.open { transform: translateX(0); }.sidebar-top { display:flex; align-items:center; justify-content:space-between; padding-bottom:26px; border-bottom:1px solid var(--line); }.icon-button { border: 0; background: transparent; color: var(--muted); font-size: 1.7rem; padding: 2px 8px; }.mobile-nav { display:grid; gap:6px; padding:24px 0; }.mobile-nav a { display:flex; align-items:center; gap:14px; padding:13px 12px; color:var(--muted); text-decoration:none; border-radius:8px; font-weight:800; }.mobile-nav a span { color: var(--lime); font-size:.68rem; font-variant-numeric:tabular-nums; }.mobile-nav a:hover,.mobile-nav a.active { color:var(--ink); background:#1b2b1e; }.sidebar-note { color:var(--muted); font-size:.78rem; border-top:1px solid var(--line); padding-top:20px; }.menu-open { overflow:hidden; }
.settings-panel { padding-bottom: 20px; } .settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; padding: 4px 20px 0; } fieldset { grid-column:span 1; border:1px solid var(--line); border-radius:10px; padding:14px; display:grid; gap:12px; min-width:0; } legend { color:var(--lime); font-weight:800; padding:0 5px; } label { display:grid; gap:6px; color:var(--muted); font-size:.84rem; font-weight:700; } input,textarea,select { width:100%; border:1px solid var(--line); border-radius:8px; background:#0a140d; color:var(--ink); padding:10px; font:inherit; } input[type=checkbox] { width:auto; accent-color:var(--lime); } textarea { min-height:100px; resize:vertical; } .wide,.form-actions { grid-column:1 / -1; } .price-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } .switch { display:flex; align-items:center; gap:10px; color:var(--ink); } .switch input { width:auto; } .hint { color:var(--muted); font-size:.76rem; font-weight:400; margin:0; } .form-actions { display:flex; flex-wrap:wrap; align-items:end; gap:10px; } .delete-control{min-width:220px}.heading-actions { display:flex; gap:12px; align-items:center; }.compact { grid-template-columns:repeat(3,minmax(0,1fr)); } [hidden] { display:none !important; } @media(max-width:800px){.settings-grid,.compact{grid-template-columns:1fr}.price-grid{grid-template-columns:1fr 1fr}fieldset{grid-column:span 1}} @media(max-width:420px){.price-grid{grid-template-columns:1fr}.form-actions button,.delete-control{width:100%}.heading-actions{align-items:flex-end; flex-direction:column; gap:6px}}
@keyframes button-spin { to { transform: rotate(360deg); } }
.photo-crop { grid-column: 1 / -1; display: grid; grid-template-columns: 180px minmax(180px, 320px) auto; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #0a140d; }.crop-preview { width: 180px; height: 180px; overflow: hidden; border-radius: 12px; border: 1px solid var(--lime); background: #050a06; display: grid; place-items: center; }.crop-preview img { width: 100%; height: 100%; object-fit: cover; transition: transform .15s ease; }.photo-crop label { min-width: 0; }.photo-crop input[type=range] { accent-color: var(--lime); padding: 0; } @media(max-width:600px){.photo-crop{grid-template-columns:1fr}.crop-preview{margin:auto}}
.owner-row { background: color-mix(in srgb, #274c2d 28%, transparent); }.owner-lock { color: var(--lime); font-size: 1.1rem; }.protected-label { color: var(--lime); font-size: .76rem; font-weight: 800; }
.status.owner { background: #334d22; color: #d7ff9b; }
.payment-search { display: flex; align-items: center; gap: 12px; min-width: min(100%, 480px); }.payment-search input { min-width: min(100%, 300px); }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media(max-width:700px){.payment-search{align-items:stretch; flex-direction:column; width:100%;}.payment-search input{min-width:0}}
.table-controls { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 20px 16px; }.table-controls label { flex: 1 1 210px; }.table-controls input,.table-controls select { height: 42px; }.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; }.pagination > div { display: flex; gap: 8px; }.secondary { background: transparent; border-color: var(--line); color: var(--ink); padding: 8px 12px; font-size: .8rem; } .status.expired,.status.removed,.status.inactive { background: #353b36; color: #c3ccc4; } @media(max-width:560px){.pagination{align-items: stretch; flex-direction:column}.pagination > div{display:grid;grid-template-columns:1fr 1fr}.pagination button{width:100%}}
.icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }.icon-button.is-loading svg { animation: button-spin .72s linear infinite; }.icon-button.is-loading::after { display: none; }.login-screen { min-height: calc(100vh - 48px); display: grid; place-items: center; }.login-card { width: min(100%, 420px); padding: 30px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--panel) 94%, black); box-shadow: 0 20px 60px rgba(0,0,0,.28); }.login-card .brand-mark { margin-bottom: 20px; }.login-card h1 { font-size: 2rem; margin-bottom: 10px; }.login-card form { display: grid; gap: 14px; margin-top: 24px; }.login-card button { width: 100%; margin-top: 4px; }