/* Support / donation UI. Every class is prefixed nkd- so nothing collides with existing styles.
   Used on the home page (top strip, bottom section, modal) and the studio (corner card). */
:root{
  --nkd-bg:#0d1422;--nkd-text:#f3f7fd;--nkd-muted:#9fb0c8;--nkd-line:rgba(110,170,255,.26);
  --nkd-accent:#27a9ff;--nkd-accent-hi:#5cc3ff;--nkd-on-accent:#031221;--nkd-font:var(--font-sans,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);
}

.nkd-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden].nkd-x,[hidden].nkd-btn{display:none}

/* buttons */
.nkd-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:8px 16px;border:0;border-radius:12px;background:linear-gradient(135deg,#27a9ff,#2f7cf6);color:var(--nkd-on-accent);font:700 13px/1.2 var(--nkd-font);text-decoration:none;cursor:pointer}
.nkd-btn:hover{filter:brightness(1.1)}
.nkd-btn-ghost{background:transparent;border:1px solid var(--nkd-line);color:var(--nkd-text)}
.nkd-btn-sm{min-height:32px;padding:6px 12px;font-size:12px}
.nkd-btn:focus-visible,.nkd-x:focus-visible,.nkd-close:focus-visible,.nkd-later:focus-visible,.nkd-card a:focus-visible,.nkd-support a:focus-visible{outline:2px solid var(--nkd-accent-hi);outline-offset:2px}

/* top strip (home). Not sticky; sits above the sticky nav so it just scrolls away. */
.nkd-strip{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 14px;min-height:46px;padding:7px 48px 7px 16px;box-sizing:border-box;background:#0b1626;border-bottom:1px solid var(--nkd-line);color:#c2d0e6;font:500 13px/1.4 var(--nkd-font);text-align:center}
.nkd-strip p{margin:0}
.nkd-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--nkd-muted);font-size:15px;cursor:pointer}
.nkd-x:hover{color:var(--nkd-text);background:rgba(255,255,255,.07)}
.nkd-nostrip .nkd-strip{display:none}

/* bottom section (home) */
.nkd-support{padding:72px 0;border-top:1px solid var(--nkd-line);background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,.005))}
.nkd-grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.nkd-support h2{margin:0;font-size:clamp(24px,3.4vw,34px);line-height:1.15;letter-spacing:-.025em;color:var(--nkd-text)}
.nkd-support p{margin:14px 0 0;max-width:560px;color:#c2d0e6;font-size:15.5px;line-height:1.65}
.nkd-support .nkd-note{color:var(--nkd-muted);font-size:13px}
.nkd-support a:not(.nkd-btn),.nkd-card a:not(.nkd-btn){color:var(--nkd-accent-hi);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.nkd-fig{margin:0;text-align:center}
.nkd-fig figcaption{max-width:240px;margin:10px auto 0;color:var(--nkd-muted);font-size:12.5px;line-height:1.45}
.nkd-qr{display:block;width:220px;height:220px;max-width:100%;margin:0 auto;background:#fff;border-radius:14px}
.nkd-upirow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.nkd-upi{padding:7px 11px;border:1px solid var(--nkd-line);border-radius:10px;background:rgba(255,255,255,.05);font:600 14px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--nkd-text);user-select:all;-webkit-user-select:all;overflow-wrap:anywhere}

/* popup (modal on home, corner card on studio) */
.nkd-pop{--nkd-bg:#0d1422}
@media (prefers-color-scheme:light){
  .nkd-pop{--nkd-bg:#ffffff;--nkd-text:#0d1726;--nkd-muted:#4a5a72;--nkd-line:rgba(20,50,100,.22);--nkd-accent-hi:#0a64b4}
  .nkd-pop .nkd-upi{background:rgba(10,30,70,.05)}
  .nkd-pop .nkd-text,.nkd-pop .nkd-mail{color:#243449}
}
.nkd-backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;background:rgba(3,5,8,.7);overflow-y:auto;overscroll-behavior:contain}
.nkd-card{position:relative;box-sizing:border-box;width:min(440px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;margin:auto;padding:26px 24px 20px;border:1px solid var(--nkd-line);border-radius:22px;background:var(--nkd-bg);color:var(--nkd-text);font:14px/1.5 var(--nkd-font);text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.55);animation:nkd-in .25s ease-out}
.nkd-card:focus{outline:none}
.nkd-pop--card{position:fixed;z-index:160;left:16px;bottom:16px;width:min(340px,calc(100vw - 32px))}
.nkd-pop--card .nkd-card{width:100%;padding:20px 18px 14px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
.nkd-close{position:absolute;right:10px;top:10px;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;color:var(--nkd-muted);font-size:16px;cursor:pointer}
.nkd-close:hover{color:var(--nkd-text);background:rgba(128,150,190,.16)}
.nkd-title{margin:0 28px 8px;font:800 20px/1.25 var(--nkd-font);letter-spacing:-.01em;color:var(--nkd-text)}
.nkd-text,.nkd-mail,.nkd-note{margin:8px 0 0;font-size:13.5px;line-height:1.55}
.nkd-text,.nkd-mail{color:#c2d0e6}
.nkd-note{color:var(--nkd-muted);font-size:12px}
.nkd-card .nkd-fig{margin:14px 0 0}
.nkd-card .nkd-upirow{justify-content:center;margin-top:12px}
.nkd-card .nkd-buy{margin-top:14px}
.nkd-later{display:inline-block;margin-top:10px;padding:6px 8px;border:0;background:none;color:var(--nkd-muted);font:500 13px var(--nkd-font);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.nkd-later:hover{color:var(--nkd-text)}
/* On desktop the QR is the main method; the upi:// button is for phones. */
@media (hover:hover) and (pointer:fine){.nkd-card .nkd-buy{display:none}}

/* Phones: you cannot scan your own screen, so the popup shows the button instead of the QR. */
@media (hover:none) and (pointer:coarse){.nkd-card .nkd-fig{display:none}}
/* Studio corner card on desktop: two compact columns (QR | text) so it covers as little as possible. */
@media (min-width:861px){
  .nkd-pop--card{width:min(560px,calc(100vw - 32px))}
  .nkd-pop--card .nkd-card{display:grid;grid-template-columns:230px minmax(0,1fr);column-gap:20px;align-content:start;text-align:left;padding:18px 18px 12px}
  .nkd-pop--card .nkd-fig{grid-column:1;grid-row:1/span 8;margin:0;align-self:start}
  .nkd-pop--card .nkd-card>:not(.nkd-fig):not(.nkd-close):not(.nkd-sr){grid-column:2}
  .nkd-pop--card .nkd-title{margin:0 30px 6px 0;font-size:18px}
  .nkd-pop--card .nkd-card .nkd-upirow{justify-content:flex-start}
  .nkd-pop--card .nkd-later{justify-self:start;padding-left:0}
}

/* Phone button (appears after ~5 min of use). Small, bottom-right, above the studio's tab bar. */
.nkd-pill{position:fixed;z-index:155;right:12px;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:2px;padding:4px;border:1px solid var(--nkd-line);border-radius:999px;background:#0d1422;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:nkd-in .25s ease-out}
.nkd-pill--studio{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
.nkd-pill .nkd-btn{border-radius:999px;min-height:40px;padding:8px 14px}
.nkd-pill-x{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--nkd-muted);font-size:14px;cursor:pointer}
.nkd-pill-x:hover{color:var(--nkd-text);background:rgba(255,255,255,.08)}
.nkd-pill-x:focus-visible{outline:2px solid var(--nkd-accent-hi);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.nkd-pill{animation:none}}

@keyframes nkd-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.nkd-card{animation:none}}

@media (max-width:760px){
  .nkd-grid{grid-template-columns:1fr;gap:28px}
  .nkd-support{padding:52px 0}
}
@media (max-width:860px){
  /* studio mobile: sit above the bottom tab bar */
  .nkd-pop--card{left:8px;bottom:calc(76px + env(safe-area-inset-bottom,0px));width:min(340px,calc(100vw - 16px))}
  .nkd-pop--card .nkd-card{max-height:calc(100vh - 100px - env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 100px - env(safe-area-inset-bottom,0px))}
}
@media (max-width:360px){
  .nkd-card{padding:22px 14px 16px}
  .nkd-title{font-size:18px}
}