/* ─────────────────────────────────────────────────────────────
   Sagebit — sage & botanical theme
   Deep forest charcoal, soft sage, fresh mint. Calm and natural
   rather than casino-loud; every colour is a token below so the
   whole site re-skins from this one block.
   ───────────────────────────────────────────────────────────── */
:root{
  --sage:#A9C5AE; --sage-dark:#7F9E86; --moss:#5E8C6A; --moss-dark:#446B4F;
  --mint:#7BD8A3; --mint-dark:#4FB07D;
  --ink:#E9F1EB; --ink-soft:#A6BCAC; --ink-faint:#6D8376;
  --bg:#0B110F; --surface:#131C18; --surface-2:#1A2621; --line:#28372F;
  --good:#7BD8A3; --danger:#F0798A; --amber:#E3C08D;
  --radius:16px;
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --glow-sage:0 0 24px rgba(169,197,174,.30);
  --glow-moss:0 0 26px rgba(123,216,163,.32);
  /* Height of the fixed mobile tab bar. Used by the bottom-nav block AND by
     every "keep content clear of the nav" rule, so it only changes here. */
  --mnav-h:62px;
}
*{box-sizing:border-box}
body{
  font-family:'DM Sans',system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(94,140,106,.22), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(123,216,163,.10), transparent 55%),
    #0B110F;
  background-attachment:fixed;
  min-height:100vh;
  /* Stop iOS Safari auto-inflating text in landscape. */
  -webkit-text-size-adjust:100%;
}
/* Faint botanical speckle — sagebit's answer to nyxtap's starfield. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1.6px 1.6px at 22% 28%, rgba(169,197,174,.22), transparent),
    radial-gradient(1.4px 1.4px at 68% 62%, rgba(123,216,163,.18), transparent),
    radial-gradient(1.2px 1.2px at 42% 82%, rgba(169,197,174,.14), transparent),
    radial-gradient(1.5px 1.5px at 86% 24%, rgba(123,216,163,.16), transparent),
    radial-gradient(1.2px 1.2px at 54% 12%, rgba(169,197,174,.12), transparent),
    radial-gradient(1.3px 1.3px at 12% 72%, rgba(123,216,163,.14), transparent);
  background-repeat:repeat;background-size:560px 560px;opacity:.6;
}
main,nav,footer{position:relative;z-index:1;}

h1,h2,h3,h4,h5,.fw-black{font-family:'Outfit','Nunito',sans-serif;font-weight:700;letter-spacing:.5px;}
.fw-black{font-weight:900;}
a{color:var(--sage);text-decoration:none;}
a:hover{color:#fff;text-decoration:none;}

/* ── Nav ── */
.sage-nav{
  background:rgba(11,17,15,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.sage-nav .navbar-brand{
  font-family:'Outfit',sans-serif;font-weight:900;font-size:1.3rem;color:var(--ink);
  text-shadow:var(--glow-moss);
}
.sage-logo{filter:drop-shadow(0 0 8px rgba(169,197,174,.7));}
.sage-nav .nav-link{color:var(--ink-soft)!important;font-weight:600;}
.sage-nav .nav-link:hover,.sage-nav .nav-link.active{color:var(--sage)!important;}
.dropdown-menu{background:var(--surface);border:1px solid var(--line);}
.dropdown-item{color:var(--ink-soft);}
.dropdown-item:hover{background:var(--surface-2);color:var(--sage);}
.dropdown-item-text{color:var(--ink-faint);}
.dropdown-divider{border-color:var(--line);}
.navbar-toggler{border-color:var(--line);}
.navbar-toggler-icon{filter:invert(1) brightness(1.4);}
.sage-faucet-menu{max-height:60vh;overflow:auto;min-width:230px;}
.sage-faucet-menu .dropdown-item{display:flex;align-items:center;gap:.55rem;font-weight:600;}

/* ── Buttons ── */
.btn-sage{
  background:linear-gradient(135deg,var(--mint),var(--mint-dark));
  border:0;color:#08120C;font-weight:800;font-family:'Outfit',sans-serif;letter-spacing:.5px;
  border-radius:50px;padding:.6rem 1.5rem;min-height:44px;transition:.15s;
}
.btn-sage:hover{color:#08120C;transform:translateY(-1px);box-shadow:var(--glow-sage);}
.btn-sage:disabled{opacity:.5;transform:none;box-shadow:none;cursor:not-allowed;}
.btn-ghost{
  background:transparent;border:1px solid var(--line);color:var(--ink-soft);
  border-radius:50px;padding:.5rem 1.3rem;font-weight:600;transition:.15s;
}
.btn-ghost:hover{border-color:var(--moss);color:#fff;}

/* ── Hero ── */
.sage-hero{text-align:center;padding:2rem 0 2.4rem;}
.sage-hero h1{
  font-size:2.6rem;
  background:linear-gradient(135deg,#F2F8F3,var(--sage) 50%,var(--mint));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(94,140,106,.30);
}
.sage-hero p{color:var(--ink-soft);font-size:1.05rem;}

/* ── Faucet grid ── */
/* Fixed 5-per-row — for the current ~15 active coins that's 3 rows. Falls
   back to auto-fill on narrow screens (see the max-width:576px override
   below) rather than cramming 5 tiny columns onto a phone. */
.faucet-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
/* Row ad inside the faucet grid — spans every column so the card flow stays
   aligned at any breakpoint (see pages/landing.php). */
.faucet-grid > .fg-ad{grid-column:1/-1;}
.faucet-card{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 14px;text-align:center;transition:.16s;display:block;color:var(--ink);
}
.faucet-card:hover{
  transform:translateY(-4px);border-color:var(--sage);
  box-shadow:var(--glow-sage);color:var(--ink);
}
.faucet-card img{width:44px;height:44px;margin-bottom:8px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));}
.faucet-card .coin{font-family:'Outfit',sans-serif;font-weight:800;font-size:1.05rem;}
.faucet-card .rate{font-size:.78rem;color:var(--ink-soft);margin-top:3px;}
/* Dashboard's personalized faucet grid — same card, ready/cooldown state added. */
.dash-faucet-card.is-ready{border-color:var(--good);}
.dash-faucet-card.is-wait img{filter:grayscale(.5) opacity(.7);}

/* ── Cards / claim ── */
.card-sage{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
}
.claim-amount{
  font-family:'Outfit',sans-serif;font-weight:900;font-size:2.1rem;line-height:1;
  color:var(--mint);text-shadow:var(--glow-moss);
}
.claim-sub{color:var(--ink-soft);}
.big-timer{font-family:'Outfit',sans-serif;font-weight:900;font-size:2.4rem;letter-spacing:2px;color:var(--moss);text-shadow:var(--glow-moss);}

.form-control{
  background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:.6rem .9rem;
}
.form-control:focus{
  background:var(--bg);color:var(--ink);border-color:var(--moss);
  box-shadow:0 0 0 .2rem rgba(94,140,106,.25);
}
.form-control::placeholder{color:var(--ink-faint);}
/* Native <input type=date> renders its text/icon with browser chrome that
   doesn't inherit `color` — color-scheme tells the browser to draw its own
   controls (text, picker icon, the calendar popup) light-on-dark instead of
   assuming a white page; the icon filter is a Firefox fallback since Firefox
   doesn't yet re-tint the icon from color-scheme alone. */
input[type="date"]{color-scheme:dark;}
input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.85);cursor:pointer;}

.captcha-box img{border:1px solid var(--line);border-radius:10px;background:#F4F8F4;}
.payout-row{display:flex;justify-content:space-between;font-size:.85rem;padding:.45rem 0;border-bottom:1px dashed var(--line);color:var(--ink-soft);}
.payout-row:last-child{border-bottom:0;}
.payout-row .amt{color:var(--sage);font-weight:600;}

.alert{border-radius:12px;border:1px solid var(--line);}
.alert-success{background:rgba(123,216,163,.12);color:var(--good);border-color:rgba(123,216,163,.32);}
.alert-danger{background:rgba(240,121,138,.12);color:var(--danger);border-color:rgba(240,121,138,.32);}
/* Warning takes the one warm tone in the palette so it reads as caution rather
   than blending into the sage greens the way a green-on-green warning does. */
.alert-warning{background:rgba(227,192,141,.12);color:var(--amber);border-color:rgba(227,192,141,.32);}
.alert-info{background:rgba(169,197,174,.12);color:var(--sage);border-color:rgba(169,197,174,.32);}

.text-muted{color:var(--ink-faint)!important;}

/* ── Footer ── */
.sage-footer{background:rgba(11,17,15,.6);border-top:1px solid var(--line);padding:1.8rem 0;margin-top:2.5rem;}
.sage-footer .sage-logo{filter:drop-shadow(0 0 8px rgba(169,197,174,.7));}

/* ── Stat strip ── */
.stat-strip{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:1.2rem;}
.stat-pill{background:var(--surface);border:1px solid var(--line);border-radius:50px;padding:.35rem 1.05rem;font-size:.85rem;color:var(--ink-soft);}
.stat-pill strong{color:var(--sage);}
.sage-online-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--good);margin-right:.45rem;vertical-align:middle;box-shadow:0 0 0 0 rgba(123,216,163,.6);animation:sage-online-pulse 2s ease-out infinite;}
@keyframes sage-online-pulse{0%{box-shadow:0 0 0 0 rgba(123,216,163,.55);}70%{box-shadow:0 0 0 7px rgba(123,216,163,0);}100%{box-shadow:0 0 0 0 rgba(123,216,163,0);}}
@media (prefers-reduced-motion:reduce){.sage-online-dot{animation:none;}}

/* ── Site stats card (landing page) ──────────────────────────────────── */
/* ── Homepage: paid out per coin ─────────────────────────────────────────
   Replaces the old flat row of wrapped .ncst-item chips, which gave 15
   near-identical pills with no hierarchy and no sense of scale. A real grid
   with the ticker, the unit count and the USD value on their own lines reads
   at a glance, and coins nothing has been claimed on are muted rather than
   competing with the ones that matter. */
.coin-paid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px;}
.cp-item{
  display:flex;align-items:flex-start;gap:.6rem;min-width:0;
  padding:.6rem .7rem;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  transition:border-color .15s;
}
.cp-item:hover{border-color:var(--sage-dark);}
.cp-item img{width:26px;height:26px;object-fit:contain;flex:0 0 26px;}
.cp-body{min-width:0;flex:1 1 auto;}
.cp-coin{font-family:'Outfit',sans-serif;font-weight:800;font-size:.84rem;color:var(--ink);line-height:1.15;}
/* Amount and USD stack UNDER the ticker rather than sitting beside it: on one
   row the figure is what gets ellipsised ("59,0…"), and the figure is the
   entire point of the card. */
.cp-amt{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--sage);
  line-height:1.35;white-space:nowrap;}
.cp-amt span{color:var(--ink-faint);}
.cp-item.is-zero{opacity:.45;}
.cp-item.is-zero .cp-amt{color:var(--ink-faint);}
@media(max-width:576px){
  .coin-paid-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px;}
  .cp-item{padding:.5rem .55rem;gap:.45rem;}
  .cp-item img{width:22px;height:22px;flex-basis:22px;}
}

/* ── Compact "contest is live" pill (faucet claim pages) ─────────────── */
.sage-contest-pill{
  display:inline-flex;align-items:center;gap:.4rem;
  background:linear-gradient(135deg,rgba(169,197,174,.14),rgba(94,140,106,.14));
  border:1px solid var(--sage-dark);border-radius:50px;
  padding:.3rem .85rem;margin-bottom:.9rem;
  font-size:.78rem;color:var(--ink-soft);text-decoration:none;
  transition:transform .15s,border-color .15s;
}
.sage-contest-pill:hover{color:var(--ink);transform:translateY(-1px);border-color:var(--sage);}
.sage-contest-pill strong{color:var(--sage);font-family:'Outfit',sans-serif;}
.sage-contest-pill .ncp-timer{font-family:'JetBrains Mono',monospace;color:var(--moss);}
/* ── Admin ── */
.admin-wrap{max-width:1000px;margin:0 auto;}
table.sage-table{width:100%;border-collapse:collapse;font-size:.9rem;color:var(--ink);}
/* Defensive: Bootstrap's .table sets --bs-table-bg/#fff, which paints these
   rows white on the dark theme if anyone ever adds `table` alongside
   `sage-table`. Neutralising the variables here means the class is safe to
   combine with Bootstrap utilities and can't silently go unreadable. */
table.sage-table{--bs-table-bg:transparent;--bs-table-color:var(--ink);
  --bs-table-striped-bg:transparent;--bs-table-striped-color:var(--ink);
  --bs-table-accent-bg:transparent;background-color:transparent;}
table.sage-table th,table.sage-table td{padding:.6rem .7rem;border-bottom:1px solid var(--line);
  text-align:left;background-color:transparent;color:inherit;}
table.sage-table th{color:var(--ink-soft);font-family:'Outfit',sans-serif;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.8px;font-weight:700;
  border-bottom:1px solid var(--sage-dark);}
/* Zebra + hover: long admin tables are read by scanning across a row, and a
   faint band per row is what keeps your eye on the right one. */
table.sage-table tbody tr:nth-child(odd){background:rgba(169,197,174,.045);}
table.sage-table tbody tr:hover{background:rgba(123,216,163,.10);}
table.sage-table tbody tr:last-child td{border-bottom:0;}
/* Numbers line up and compare only when they're right-aligned and tabular. */
table.sage-table td.mono,table.sage-table td.text-end,table.sage-table th.text-end{
  font-variant-numeric:tabular-nums;}
/* Scrollable table body with a header that stays put while paging through it */
.sage-table-scroll{max-height:70vh;overflow-y:auto;overflow-x:auto;}
.sage-table-scroll table.sage-table thead th{position:sticky;top:0;background:var(--surface-2);z-index:1;}

/* ── Admin → Faucets: one form for every row ──────────────────────────────
   Replaces the old form-per-faucet (21 coins = 21 saves + 21 reloads). The
   dirty markers exist so that after editing several rows you can still see at
   a glance which ones you touched before committing. */
.fc-row.is-dirty{border-color:var(--mint);box-shadow:0 0 0 1px rgba(123,216,163,.25);}
.fc-dirty{background:rgba(123,216,163,.18);color:var(--mint);font-size:.62rem;
  text-transform:uppercase;letter-spacing:.6px;vertical-align:middle;}
.fc-savebar{
  position:sticky;bottom:0;z-index:20;margin-top:.75rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.75rem 1rem;border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(19,28,24,.96);backdrop-filter:blur(10px);
  box-shadow:0 -6px 22px rgba(0,0,0,.35);
}
#fcStatus.is-dirty{color:var(--mint);font-weight:600;}
/* Switched-off faucets sort below the divider and read as demoted, so the
   live ones are what you scan first. */
.fc-row.is-off{opacity:.58;}
.fc-row.is-off:hover,.fc-row.is-off:focus-within{opacity:1;}
.fc-row.is-off.is-dirty{opacity:1;}
.fc-divider{
  display:flex;align-items:center;gap:.75rem;margin:1.25rem 0 .25rem;
  color:var(--ink-faint);font:700 .72rem/1 'Outfit',sans-serif;
  text-transform:uppercase;letter-spacing:1px;
}
.fc-divider::before,.fc-divider::after{content:"";flex:1;height:1px;background:var(--line);}

/* ── Ad slots + 3-column shell ───────────────────────────────────────────── */
.sage-ad-wrap{width:100%;display:flex;justify-content:center;padding:14px 8px 4px;overflow-x:auto;}
.sage-ad-wrap-bottom{padding:18px 8px 4px;}
/* Raw admin-pasted ad code (Admin -> Ads) is often a network's own
   <iframe width="728">/<img>/<ins> with a fixed pixel width. ad_slot()
   (includes/helpers.php) drops this straight into a bare .sage-ad wherever
   it's called — some call sites (ad_mid_content, ad_home_banner,
   ad_home_row*_728) sit directly in the page container with no
   .sage-ad-wrap/.card-sage around them to contain it, so on a phone narrower
   than the creative's width it pushed the WHOLE PAGE sideways (the
   pinch-zoom-out-to-see-the-site bug). Contain every .sage-ad at the
   source instead of relying on an ancestor: overflow:hidden + max-width
   traps it to its own box, and contain:layout paint also stops any ad
   code that self-styles with position:fixed from breaking out over the
   page (same fix PlayNXC's own .nxc-ad already uses in
   assets/css/theme.css). max-width alone can't beat an inline width=
   attribute, hence the descendant !important overrides. */
.sage-ad{display:block;text-align:center;margin:0 auto;max-width:100%;overflow:hidden;position:relative;contain:layout paint;}
.sage-ad iframe,.sage-ad img,.sage-ad ins,.sage-ad embed,.sage-ad object,
.sage-ad a,.sage-ad div,.sage-ad table{max-width:100% !important;}
.sage-ad-lbl{display:block;font-size:.6rem;letter-spacing:2px;text-transform:uppercase;color:var(--ink-faint);margin-bottom:3px;}
.sage-ad-body{display:inline-block;line-height:0;max-width:100%;}
.sage-ad-rail .sage-ad-body{min-height:250px;}
.sage-ad-box{display:block;}                     /* 300x250 stacked on its own row, e.g. inside the claim card */
/* in-card ad slots (claim card on the faucet + post-captcha pages) */
.card-sage .sage-ad{margin:12px 0;}
.card-sage .sage-ad-box .sage-ad-body{min-height:250px;}

/* ── Admin settings tabs ─────────────────────────────────────────────────── */
.sage-set-tabs{display:flex;flex-wrap:wrap;gap:6px;}
.sage-set-pane[hidden]{display:none !important;}

.sage-shell{
  display:flex;gap:22px;align-items:flex-start;justify-content:center;
  max-width:1440px;margin:0 auto;padding:0 12px;
}
.sage-main{flex:1 1 auto;min-width:0;max-width:960px;}
.sage-rail{flex:0 0 300px;width:300px;position:sticky;top:84px;padding-top:18px;}
.sage-rail.is-empty{display:none;}

.sage-recent{margin:0 auto;}
.sage-recent-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;}
@media(max-width:560px){ .sage-recent-grid{grid-template-columns:1fr;} }

/* Below ~1180px there isn't room for 300 + content + 300 side by side —
   stack them instead of hiding the rails. Ads stay visible on mobile,
   they just move above/below the content rather than sitting beside it. */
@media(max-width:1180px){
  .sage-shell{flex-direction:column;gap:14px;padding:0 12px;}
  .sage-rail{position:static;width:100%;flex:none;padding-top:0;
    display:flex;justify-content:center;}
  .sage-rail.is-empty{display:none;}
  .sage-main{max-width:100%;margin:0;width:100%;}
}

/* ── Compact "How it works" — reveal on hover / focus ──────────────────── */
.howto{position:relative;display:inline-block;margin-left:.5rem;cursor:help;
  color:var(--moss);border-bottom:1px dotted var(--moss);white-space:nowrap;}
.howto:focus{outline:none;}
.howto-pop{
  position:absolute;left:0;top:calc(100% + 8px);z-index:40;
  width:min(300px,80vw);padding:12px 14px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line);box-shadow:var(--shadow);
  color:var(--ink-soft);font-size:.8rem;line-height:1.5;white-space:normal;
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:.14s;
}
.howto-pop b{display:inline-block;width:16px;height:16px;line-height:16px;text-align:center;
  border-radius:50%;background:var(--moss);color:#fff;font-size:.7rem;}
.howto:hover .howto-pop,.howto:focus .howto-pop,.howto:focus-within .howto-pop{
  opacity:1;visibility:visible;transform:translateY(0);
}

@media(max-width:576px){
  .sage-hero{padding:1.4rem 0 1.8rem;}
  .sage-hero h1{font-size:1.7rem}
  .sage-hero p{font-size:.95rem;}
  /* fixed 3-up: 1fr shrinks freely so it can never overflow a narrow
     viewport (minmax(104px,…) could, which forced a pinch-zoom). */
  .faucet-grid{grid-template-columns:repeat(3,1fr);gap:10px;}
  .faucet-card{padding:14px 6px;min-width:0;}
  .faucet-card img{width:36px;height:36px;}
  .faucet-card .coin{font-size:.95rem;}
  .faucet-card .rate{font-size:.72rem;word-break:break-word;}
  .card-sage.p-4{padding:1.1rem !important;}
  .claim-amount{font-size:1.7rem;}
  .big-timer{font-size:1.9rem;}
  .container{padding-left:12px;padding-right:12px;}
  table.sage-table{font-size:.78rem;}
  table.sage-table th,table.sage-table td{padding:.45rem .5rem;}
  .admin-wrap .row.g-2 > div{margin-bottom:.4rem;}
}

/* ── Referral box ─────────────────────────────────────────────────────── */
.sage-refbox h5{font-family:'Outfit',sans-serif;color:var(--sage);}
.mono{font-family:'JetBrains Mono',monospace;font-size:.85rem;}
/* Bootstrap ships <code> in magenta (--bs-code-color:#d63384), which is both
   off-palette and low-contrast on the dark ground. The admin uses <code> ~50
   times for setting keys and URLs, so it needs to be legible. */
code,kbd{
  font-family:'JetBrains Mono',monospace;font-size:.86em;
  color:var(--sage);background:rgba(169,197,174,.10);
  border:1px solid var(--line);border-radius:6px;padding:.08em .38em;
  word-break:break-word;
}
kbd{color:var(--ink);background:var(--surface-2);}
pre code{border:0;background:none;padding:0;}

/* ── Verification spinner (pages/captcha-return.php) ─────────────────── */
.sage-spinner{
  width:44px;height:44px;margin:0 auto;border:4px solid var(--line);
  border-top-color:var(--sage);border-radius:50%;animation:sage-spin .8s linear infinite;
}
@keyframes sage-spin{to{transform:rotate(360deg);}}

/* ── PTC — one horizontally-scrollable row of task cards per provider ── */
.sage-ptc-wrap{position:relative;}
.sage-ptc-row{
  display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;cursor:grab;scrollbar-width:auto;scrollbar-color:var(--sage-dark) var(--surface-2);
}
.sage-ptc-row.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none;}
.sage-ptc-card{
  position:relative;flex:0 0 190px;scroll-snap-align:start;display:block;color:var(--ink);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-radius:var(--radius-sm,12px);
  padding:14px;transition:.15s;
}
.sage-ptc-card:hover{border-color:var(--sage);transform:translateY(-2px);color:var(--ink);}
.sage-ptc-row.is-dragging .sage-ptc-card:hover{transform:none;border-color:var(--line);}
.sage-ptc-card img{width:40px;height:40px;border-radius:8px;object-fit:cover;margin-bottom:8px;}
.sage-ptc-title{font-weight:700;font-size:.9rem;line-height:1.25;margin-bottom:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.sage-ptc-desc{color:var(--ink-faint);font-size:.75rem;line-height:1.3;margin-bottom:8px;}
.sage-ptc-reward{color:var(--sage);font-weight:800;font-size:.95rem;}
.sage-ptc-meta{color:var(--ink-faint);font-size:.7rem;margin-top:2px;}
/* chunkier, always-visible scrollbar so the row is easy to grab on desktop */
.sage-ptc-row::-webkit-scrollbar{height:10px;}
.sage-ptc-row::-webkit-scrollbar-track{background:var(--surface-2);border-radius:5px;}
.sage-ptc-row::-webkit-scrollbar-thumb{background:var(--sage-dark);border-radius:5px;border:2px solid var(--surface-2);}
.sage-ptc-row::-webkit-scrollbar-thumb:hover{background:var(--sage);}

/* ‹ › paddles — shown on hover-capable pointers only, JS toggles [hidden] at the ends */
.sage-ptc-nav{
  position:absolute;top:calc(50% - 22px);z-index:3;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;line-height:1;
  background:var(--surface);color:var(--sage);border:1px solid var(--line);
  box-shadow:var(--shadow);cursor:pointer;transition:.15s;padding:0;
}
.sage-ptc-nav:hover{background:var(--surface-2);border-color:var(--sage);transform:scale(1.08);}
.sage-ptc-nav.prev{left:-6px;}
.sage-ptc-nav.next{right:-6px;}
@media(hover:none){ .sage-ptc-nav{display:none;} }

/* pending / done badge on a card the user just clicked */
.sage-ptc-badge{
  position:absolute;top:8px;right:8px;z-index:2;font-size:.66rem;font-weight:800;
  padding:3px 8px;border-radius:999px;letter-spacing:.3px;white-space:nowrap;
  background:var(--surface);border:1px solid var(--line);
}
.sage-ptc-badge.pending{color:var(--sage);border-color:var(--sage-dark);animation:sage-badge-pulse 1.6s ease-in-out infinite;}
.sage-ptc-badge.done{color:var(--good);border-color:var(--good);}
.sage-ptc-badge.stale{color:var(--ink-faint);}
.sage-ptc-card.is-done{opacity:.62;}
.sage-ptc-card.is-done .sage-ptc-title{text-decoration:line-through;text-decoration-color:var(--ink-faint);}
@keyframes sage-badge-pulse{0%,100%{opacity:1;}50%{opacity:.45;}}

/* sound toggle on the balance card */
.sage-snd-btn{
  background:none;border:1px solid var(--line);color:var(--ink-soft);
  border-radius:999px;padding:2px 10px;font-size:.78rem;cursor:pointer;transition:.15s;
}
.sage-snd-btn:hover{border-color:var(--sage);color:var(--sage);}

/* pay toasts — top-right stack, clear of the sticky navbar */
.sage-toast-wrap{
  position:fixed;right:16px;top:72px;z-index:1080;display:flex;flex-direction:column;
  gap:10px;max-width:min(340px,calc(100vw - 32px));pointer-events:none;
}
.sage-toast{
  pointer-events:auto;background:var(--surface);border:1px solid var(--sage-dark);
  border-left:4px solid var(--sage);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow);
  display:flex;gap:10px;align-items:flex-start;animation:sage-toast-in .35s cubic-bezier(.2,.8,.2,1);
}
.sage-toast.out{animation:sage-toast-out .3s ease forwards;}
.sage-toast.reverse{border-color:var(--danger);border-left-color:var(--danger);}
.sage-toast .ic{font-size:1.3rem;line-height:1.2;}
.sage-toast .tt{font-weight:800;font-size:.9rem;color:var(--ink);}
.sage-toast .sb{font-size:.76rem;color:var(--ink-faint);margin-top:1px;}
@keyframes sage-toast-in{from{transform:translateX(120%);opacity:0;}to{transform:translateX(0);opacity:1;}}
@keyframes sage-toast-out{to{transform:translateX(120%);opacity:0;}}
@media(prefers-reduced-motion:reduce){
  .sage-toast,.sage-toast.out{animation:none;}
  .sage-ptc-badge.pending{animation:none;}
  .sage-ptc-row{scroll-behavior:auto;}
}

@media(max-width:576px){
  .sage-ptc-card{flex-basis:150px;padding:10px;}
}

/* ── Claim strip (templates/claim-strip.php, faucet claim pages only) ─── */
.sage-claim-strip{
  position:relative;z-index:1;background:rgba(11,17,15,.6);
  border-bottom:1px solid var(--line);
}
.sage-claim-strip .ncs-track{
  /* One centred row when everything fits; on a narrow screen it WRAPS to as
     many rows as needed rather than squeezing every coin down to an
     unreadable sliver (the old flex:1 1 0 / overflow:hidden behaviour). */
  display:flex;flex-wrap:wrap;gap:.4rem;padding:.55rem 12px;
  justify-content:center;
}
.ncs-item{
  flex:0 1 64px;min-width:58px;max-width:84px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:.3rem .2rem;border-radius:12px;
  border:1px solid transparent;color:var(--ink-soft);text-decoration:none;
  transition:transform .15s,border-color .15s;
}
.ncs-item:hover{color:var(--ink);transform:translateY(-1px);}
.ncs-item img{width:100%;max-width:40px;height:auto;aspect-ratio:1/1;object-fit:contain;transition:filter .2s;}
.ncs-item .ncs-name{font-size:.6rem;text-transform:uppercase;letter-spacing:.5px;line-height:1;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ncs-item .ncs-timer{font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--sage);line-height:1;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ncs-item.is-ready{border-color:var(--sage-dark);box-shadow:var(--glow-sage);animation:ncsPulse 2.4s ease-in-out infinite;}
.ncs-item.is-ready .ncs-name{color:var(--sage);}
.ncs-item.is-wait img{filter:grayscale(.7) opacity(.5);}
/* Reserve health — thin bar under the icon, filled to reserve_status()'s pct. */
.ncs-health{display:block;width:28px;height:3px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:1px;}
.ncs-health-fill{display:block;height:100%;background:var(--good);border-radius:2px;}
/* Empty — FaucetPay balance can't cover a payout right now. */
.ncs-item.is-empty{border-color:rgba(240,121,138,.35);}
.ncs-item.is-empty img{filter:grayscale(1) opacity(.35);}
.ncs-item.is-empty .ncs-name{color:var(--danger);}
.ncs-item .ncs-empty{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--danger);line-height:1;}
@keyframes ncsPulse{0%,100%{box-shadow:0 0 0 rgba(169,197,174,0);}50%{box-shadow:var(--glow-sage);}}
@media(min-width:992px){
  .ncs-item img{max-width:46px;}
}
@media(max-width:576px){
  .ncs-track{gap:.35rem;padding:.5rem 8px;}
  .ncs-item{flex-basis:56px;min-width:52px;max-width:72px;padding:.3rem .15rem;}
  .ncs-item img{max-width:34px;}
  .ncs-item .ncs-name{font-size:.56rem;}
  .ncs-item .ncs-timer{font-size:.62rem;}
}

/* ── Mobile bottom nav (templates/footer.php, < lg only) ──────────────────
   Height lives in --mnav-h (see :root). nyxtap repeated the literal 58px in
   four places — bar height, sheet offset, body padding — so the bar and the
   content padding could drift apart. One token now drives all of them. */
.sage-mnav,.sage-msheet,.sage-mbackdrop{display:none;}
@media(max-width:991.98px){
  html,body{overflow-x:hidden;}
  .sage-mnav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1050;height:var(--mnav-h);
    background:rgba(19,28,24,.94);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    box-shadow:0 -2px 16px rgba(0,0,0,.34);padding-bottom:env(safe-area-inset-bottom,0);
  }
  .sage-mnav-item{
    position:relative;flex:1 1 0;min-width:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;border:0;background:none;color:var(--ink-faint);text-decoration:none;cursor:pointer;
    font:800 .6rem/1 'Nunito',sans-serif;transition:color .15s,transform .1s;
    -webkit-tap-highlight-color:transparent;
  }
  .sage-mnav-item i{font-size:1.3rem;line-height:1;}
  .sage-mnav-item.is-active{color:var(--mint);}
  /* Pill above the active tab — a clearer "you are here" than colour alone,
     which is easy to miss on a small, dim screen. */
  .sage-mnav-item.is-active::before{
    content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:26px;height:3px;border-radius:0 0 4px 4px;background:var(--mint);
  }
  .sage-mnav-item:active{transform:translateY(1px);}
  /* Unread/claimable dot, e.g. referral earnings waiting to be claimed. */
  .sage-mnav-dot{
    position:absolute;top:7px;left:calc(50% + 9px);width:8px;height:8px;border-radius:50%;
    background:var(--mint);border:2px solid var(--surface);
  }

  .sage-mbackdrop{
    display:block;position:fixed;inset:0;z-index:1046;background:rgba(0,0,0,.5);
    opacity:0;pointer-events:none;transition:opacity .2s;
  }
  .sage-mbackdrop.is-open{opacity:1;pointer-events:auto;}

  .sage-msheet{
    display:block;position:fixed;left:0;right:0;
    bottom:calc(var(--mnav-h) + env(safe-area-inset-bottom,0));z-index:1047;
    background:var(--surface);border-top:1px solid var(--line);border-radius:18px 18px 0 0;
    box-shadow:0 -6px 28px rgba(0,0,0,.4);
    padding:.35rem .9rem calc(.75rem + env(safe-area-inset-bottom,0));
    max-height:70vh;overflow-y:auto;pointer-events:none;visibility:hidden;
    transform:translateY(calc(100% + 80px));
    transition:transform .24s ease, visibility 0s linear .24s;
  }
  .sage-msheet.is-open{transform:translateY(0);pointer-events:auto;visibility:visible;transition:transform .24s ease;}
  .sage-msheet-grip{width:38px;height:4px;border-radius:99px;background:var(--line);margin:.2rem auto .45rem;}
  /* Balance strip at the top of the sheet — puts the Sage total one tap from
     anywhere without spending a tab slot on it. */
  .sage-msheet-bal{
    display:flex;align-items:center;justify-content:space-between;gap:.5rem;
    padding:.6rem .35rem .7rem;border-bottom:1px solid var(--line);margin-bottom:.15rem;
  }
  .sage-msheet-bal .lbl{font:600 .78rem/1 'DM Sans',sans-serif;color:var(--ink-soft);}
  .sage-msheet-bal .val{font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--mint);}
  .sage-msheet a,.sage-msheet button{
    display:flex;align-items:center;gap:.75rem;width:100%;min-height:48px;padding:.75rem .35rem;
    border:0;background:none;color:var(--ink);text-decoration:none;text-align:left;cursor:pointer;
    font:600 .95rem/1 'DM Sans',sans-serif;border-bottom:1px solid var(--line);
    -webkit-tap-highlight-color:transparent;
  }
  .sage-msheet form{border-bottom:1px solid var(--line);}
  .sage-msheet form button{border-bottom:0;}
  .sage-msheet > a:last-child,.sage-msheet > button:last-child{border-bottom:0;}
  .sage-msheet i{font-size:1.05rem;color:var(--sage);width:1.5rem;text-align:center;}
  .sage-msheet .sage-msheet-danger,.sage-msheet .sage-msheet-danger i{color:var(--danger);}
  /* Freeze the page behind an open sheet so the backdrop doesn't scroll. */
  body.sage-noscroll{overflow:hidden;}

  body{padding-bottom:calc(var(--mnav-h) + env(safe-area-inset-bottom,0));}
}

/* ── Contest pages ──────────────────────────────────────────────────── */
.ct-bar{height:8px;border-radius:50px;background:var(--bg);border:1px solid var(--line);overflow:hidden;}
.ct-bar > span{display:block;height:100%;border-radius:50px;background:linear-gradient(90deg,var(--moss),var(--sage));}
table.sage-table tbody tr.ct-you,table.sage-table tbody tr.ct-you:nth-child(odd){background:rgba(123,216,163,.18);}
table.sage-table tbody tr.ct-you td{color:var(--ink);font-weight:600;}

/* Bootstrap's bg-warning is a full-strength yellow block — far too loud on the
   dark ground, and these two notices are long paragraphs, not one-word chips.
   Soft amber on a tinted panel stays a warning without glaring. */
.badge.badge-warn{
  background:rgba(227,192,141,.13);color:var(--amber);
  border:1px solid rgba(227,192,141,.34);border-radius:10px;
  padding:.55rem .7rem;font-weight:500;font-size:.78rem;line-height:1.45;
}
.badge.badge-warn strong{color:#F1D9B4;}
/* Opt-in for the long explanatory notices, which are paragraphs not chips. */
.badge.badge-warn-block{display:block;white-space:normal;text-align:left;}