body {
  background: radial-gradient(circle at top right, rgba(0,224,213,.15), transparent 28%), linear-gradient(180deg,var(--perksi-bg),var(--perksi-bg-deep));
}
.perksi-shell { max-width: var(--perksi-content); margin: 0 auto; padding: 24px 22px 48px; }
.perksi-nav { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 0 28px; }
.perksi-brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:1.2px; text-decoration:none; }
.perksi-mark { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--perksi-accent); border-radius:12px; color:var(--perksi-accent); box-shadow:0 0 22px rgba(0,224,213,.25); }
.perksi-links { display:flex; gap:18px; align-items:center; color:var(--perksi-muted); }
.perksi-links a { text-decoration:none; }
.perksi-card { background:rgba(12,36,56,.86); border:1px solid var(--perksi-border); border-radius:var(--perksi-radius-lg); padding:24px; box-shadow:var(--perksi-shadow); }
.perksi-grid { display:grid; gap:18px; }
.perksi-grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.perksi-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.perksi-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:11px 18px; border-radius:12px; border:1px solid transparent; text-decoration:none; font-weight:800; }
.perksi-btn-primary { background:var(--perksi-accent); color:#061827; }
.perksi-btn-secondary { background:transparent; color:var(--perksi-text); border-color:var(--perksi-border); }
.perksi-input { width:100%; padding:12px 13px; color:var(--perksi-text); background:rgba(255,255,255,.055); border:1px solid var(--perksi-border); border-radius:12px; outline:none; }
.perksi-input:focus { border-color:var(--perksi-accent); box-shadow:0 0 0 3px var(--perksi-accent-soft); }
.perksi-label { display:block; margin:0 0 7px; color:var(--perksi-muted); font-size:.92rem; }
.perksi-form-row { margin-bottom:16px; }
.perksi-muted { color:var(--perksi-muted); }
.perksi-status { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:999px; font-weight:800; font-size:.82rem; border:1px solid rgba(34,229,139,.35); color:var(--perksi-safe); background:rgba(34,229,139,.12); }
.perksi-alert { display:none; margin:14px 0; padding:12px 14px; border-radius:12px; border:1px solid var(--perksi-border); }
.perksi-alert[data-state="error"] { display:block; color:#ffd6dd; border-color:rgba(255,77,109,.45); background:rgba(255,77,109,.12); }
.perksi-alert[data-state="success"] { display:block; color:#d7ffed; border-color:rgba(34,229,139,.4); background:rgba(34,229,139,.12); }
.perksi-page-title { font-size:clamp(2rem,5vw,4rem); margin:10px 0 16px; letter-spacing:-1.5px; }
.perksi-section { padding:38px 0; }
.perksi-footer { margin-top:46px; padding-top:22px; border-top:1px solid var(--perksi-border); color:var(--perksi-muted); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.perksi-app-layout { display:grid; grid-template-columns:240px 1fr; gap:22px; }
.perksi-sidebar { position:sticky; top:20px; align-self:start; }
.perksi-sidebar a { display:block; padding:11px 12px; color:var(--perksi-muted); text-decoration:none; border-radius:10px; }
.perksi-sidebar a:hover,.perksi-sidebar a[aria-current="page"] { color:var(--perksi-text); background:var(--perksi-accent-soft); }
.perksi-metric { padding:18px; border:1px solid var(--perksi-border); border-radius:16px; background:rgba(255,255,255,.045); }
.perksi-metric strong { display:block; font-size:1.8rem; margin-top:7px; }
@media(max-width:820px){ .perksi-grid-2,.perksi-grid-3,.perksi-app-layout{grid-template-columns:1fr}.perksi-links{display:none}.perksi-sidebar{position:static}.perksi-sidebar nav{display:flex;flex-wrap:wrap}.perksi-sidebar a{display:inline-block} }