/* ============================================================
   NextPalm — Mobile App
   phone-framed app, NextPalm brand tokens (from nextpalm.css)
   ============================================================ */

.stage{
  min-height:100vh; display:grid; place-items:center;
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--green) 18%, var(--bg)), var(--bg) 60%);
  padding:clamp(0px,4vw,40px);
}

/* phone shell */
.phone{
  position:relative; width:393px; height:852px; flex:none;
  background:var(--bg); border-radius:54px; overflow:hidden;
  box-shadow:0 0 0 12px #0e1714, 0 0 0 14px #243029;
}
@media(max-width:480px){
  .stage{ padding:0; }
  .phone{ width:100vw; height:100svh; border-radius:0; box-shadow:none; }
}

/* ============================================================
   Site-wide app takeover
   On small screens the desktop page is replaced by the app shell
   injected globally (see functions.php). :has() scopes the hide
   rule so pages WITHOUT the shell are never affected.
   ============================================================ */
.npapp{ display:none; }
@media(max-width:600px){
  body:has(> .npapp){ overflow:hidden; }
  body:has(> .npapp) > *:not(.npapp):not(#wpadminbar):not(script):not(style){ display:none !important; }
  #wpadminbar{ display:none !important; }
  .npapp{
    display:block; position:fixed; inset:0; z-index:9000;
    background:var(--bg); overflow:hidden;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .npapp .np-app{ position:absolute; inset:0; }
}

/* app frame */
.np-app{ position:absolute; inset:0; display:flex; flex-direction:column; }
.np-app .appbar{ flex:none; padding:max(14px, env(safe-area-inset-top)) 18px 12px; display:flex; align-items:center; gap:12px; background:var(--bg); position:relative; z-index:30; transition:background .3s, color .3s; }
.np-app .appbar.on-green{ background:var(--green); color:var(--cream); }
.np-app .appbar .ab-logo{ display:inline-flex; align-items:center; gap:8px; }
.np-app .ab-lead{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:var(--green); flex:none; margin-left:-4px; transition:background .15s; }
.np-app .ab-lead:hover{ background:var(--soft-gray); }
.np-app .appbar.on-green .ab-lead{ color:var(--cream); }
.np-app .appbar.on-green .ab-lead:hover{ background:rgba(255,255,255,.14); }
.np-app .ab-lead svg{ width:24px; height:24px; }
.np-app .appbar .ab-logo .mark{ width:28px; height:28px; color:var(--green); }
.np-app .appbar.on-green .ab-logo .mark{ color:var(--lime); }
.np-app .appbar .ab-logo .word{ font-family:var(--font-display); font-weight:600; font-size:20px; letter-spacing:-.02em; color:var(--green); }
.np-app .appbar.on-green .ab-logo .word{ color:var(--lime); }
.np-app .appbar h2{ font-family:var(--font-display); font-weight:600; font-size:21px; letter-spacing:-.01em; }
.np-app .appbar .ab-spacer{ margin-left:auto; }
.np-app .ab-btn{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:inherit; background:color-mix(in srgb, currentColor 8%, transparent); }
.np-app .appbar:not(.on-green) .ab-btn{ color:var(--green); background:var(--soft-gray); }
.np-app .ab-btn svg{ width:20px; height:20px; }
.np-app .ab-av{ width:40px; height:40px; border-radius:50%; background:var(--fresh); color:var(--green); display:grid; place-items:center; font-family:var(--font-display); font-weight:600; font-size:17px; }

/* scroll region */
.np-app .screens{ flex:1; position:relative; overflow:hidden; }
.np-app .screen{ position:absolute; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:96px; opacity:0; visibility:hidden; transform:translateX(8px); transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s; }
.np-app .screen.active{ opacity:1; visibility:visible; transform:none; }
.np-app .screen::-webkit-scrollbar{ width:0; }

/* ---- search field ---- */
.np-app .m-search{ display:flex; align-items:center; gap:10px; background:var(--soft-gray); border:1px solid transparent; border-radius:100px; padding:12px 16px; margin:4px 18px 8px; }
.np-app .m-search.on-green{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.16); }
.np-app .m-search svg{ width:18px; height:18px; color:var(--ink-soft); flex:none; }
.np-app .m-search.on-green svg{ color:var(--sage-soft); }
.np-app .m-search input{ flex:1; border:none; outline:none; background:none; font-family:inherit; font-size:15px; color:var(--ink); min-width:0; }
.np-app .m-search.on-green input{ color:var(--cream); }
.np-app .m-search.on-green input::placeholder{ color:var(--sage-soft); }

/* ---- greeting header (discover) ---- */
.np-app .disc-hero{ background:var(--green); color:var(--cream); padding:4px 0 18px; margin-bottom:6px; border-radius:0 0 28px 28px; }
.np-app .disc-hi{ padding:4px 20px 14px; }
.np-app .disc-hi .k{ color:var(--sage-soft); font-size:14px; font-weight:600; }
.np-app .disc-hi h1{ font-family:var(--font-display); font-weight:600; font-size:27px; line-height:1.1; letter-spacing:-.02em; margin:3px 0 0; }
.np-app .disc-hi h1 .lime{ color:var(--lime); }

/* section header */
.np-app .m-sec-head{ display:flex; align-items:baseline; justify-content:space-between; padding:18px 20px 12px; }
.np-app .m-sec-head h3{ font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:-.01em; }
.np-app .m-sec-head a{ font-size:13.5px; font-weight:700; color:var(--green-600); }

/* category chips */
.np-app .m-chips{ display:flex; gap:9px; overflow-x:auto; padding:2px 20px 6px; scrollbar-width:none; }
.np-app .m-chips::-webkit-scrollbar{ height:0; }
.np-app .m-chip{ flex:none; font-weight:600; font-size:13.5px; padding:9px 15px; border-radius:100px; background:var(--soft-gray); color:var(--ink-soft); white-space:nowrap; transition:all .18s var(--ease); }
.np-app .m-chip.active{ background:var(--green); color:var(--lime); }

/* horizontal drops rail */
.np-app .rail{ display:flex; gap:13px; overflow-x:auto; padding:4px 20px 8px; scrollbar-width:none; scroll-snap-type:x mandatory; }
.np-app .rail::-webkit-scrollbar{ height:0; }
.np-app .drop-card{ flex:none; width:188px; scroll-snap-align:start; background:#fff; border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:var(--shadow-sm); }
.np-app .drop-head{ height:108px; position:relative; display:grid; place-items:center; }
.np-app .drop-head::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(125deg, transparent 0 14px, color-mix(in srgb, var(--acc) 20%, transparent) 14px 16px); }
.np-app .drop-head .mk{ width:44px; color:var(--acc); position:relative; z-index:1; }
.np-app .drop-head .tagpill{ position:absolute; top:10px; left:10px; z-index:2; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:4px 9px; border-radius:100px; background:var(--acc); color:var(--pc); }
.np-app .drop-meta{ padding:12px 14px 14px; }
.np-app .drop-meta .dn{ font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:-.01em; }
.np-app .drop-meta .dn .tld{ color:var(--fresh); }
.np-app .drop-meta .ds{ font-size:12.5px; color:var(--ink-soft); margin:3px 0 9px; line-height:1.35; height:34px; overflow:hidden; }
.np-app .drop-meta .dp{ display:flex; align-items:center; justify-content:space-between; }
.np-app .drop-meta .dp b{ font-family:var(--font-display); font-weight:600; font-size:15px; }
.np-app .drop-meta .dp .go{ width:28px; height:28px; border-radius:50%; background:var(--lime); color:var(--green); display:grid; place-items:center; }
.np-app .drop-meta .dp .go svg{ width:15px; height:15px; }

/* list card (browse) */
.np-app .m-list{ display:flex; flex-direction:column; gap:12px; padding:6px 18px 0; }
.np-app .lcard{ display:flex; gap:13px; background:#fff; border:1px solid var(--line); border-radius:20px; padding:12px; box-shadow:var(--shadow-sm); align-items:center; }
.np-app .lcard .lthumb{ width:64px; height:64px; border-radius:15px; flex:none; position:relative; display:grid; place-items:center; overflow:hidden; }
.np-app .lcard .lthumb::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(125deg, transparent 0 9px, color-mix(in srgb, var(--acc) 22%, transparent) 9px 11px); }
.np-app .lcard .lthumb .mk{ width:30px; color:var(--acc); position:relative; z-index:1; }
.np-app .lcard .lbody{ flex:1; min-width:0; }
.np-app .lcard .ln{ font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:-.01em; }
.np-app .lcard .ln .tld{ color:var(--fresh); }
.np-app .lcard .ls{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-app .lcard .ltags{ display:flex; gap:5px; margin-top:7px; }
.np-app .lcard .ltag{ font-size:11px; font-weight:600; color:var(--ink-soft); background:var(--soft-gray); padding:3px 8px; border-radius:100px; }
.np-app .lcard .lprice{ text-align:right; flex:none; }
.np-app .lcard .lprice b{ font-family:var(--font-display); font-weight:600; font-size:15px; display:block; }
.np-app .lcard .lprice small{ font-size:10px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; font-weight:700; }

/* ---- feed (posts) ---- */
.np-app .m-feed .mpost{ padding:14px 18px; border-bottom:1px solid var(--line); display:flex; gap:11px; }
.np-app .m-feed .mpost .av{ width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--font-display); font-weight:600; color:#fff; font-size:16px; }
.np-app .m-feed .pbody{ flex:1; min-width:0; }
.np-app .m-feed .phead{ display:flex; align-items:center; gap:5px; font-size:14px; }
.np-app .m-feed .phead .nm{ font-weight:700; }
.np-app .m-feed .phead .vf{ width:14px; height:14px; color:var(--fresh); }
.np-app .m-feed .phead .hd{ color:var(--ink-soft); font-weight:500; }
.np-app .m-feed .ptext{ font-size:14.5px; line-height:1.5; margin:3px 0 0; }
.np-app .m-feed .ptext .tag{ color:var(--green-600); font-weight:600; }
.np-app .m-embed{ margin-top:10px; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.np-app .m-embed .eh{ height:74px; position:relative; display:grid; place-items:center; }
.np-app .m-embed .eh::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(125deg, transparent 0 12px, color-mix(in srgb, var(--acc) 20%, transparent) 12px 14px); }
.np-app .m-embed .eh .mk{ width:34px; color:var(--acc); position:relative; z-index:1; }
.np-app .m-embed .em{ padding:10px 13px; display:flex; align-items:center; justify-content:space-between; }
.np-app .m-embed .em .en{ font-family:var(--font-display); font-weight:600; font-size:15px; }
.np-app .m-embed .em .en .tld{ color:var(--fresh); }
.np-app .m-embed .em .ep{ font-family:var(--font-display); font-weight:600; font-size:13px; background:var(--soft-gray); padding:4px 10px; border-radius:100px; }
.np-app .m-feed .mpost[data-posturl]{ cursor:pointer; }
.np-app .m-feed .m-pimg{ display:block; width:100%; max-height:420px; margin-top:10px; border-radius:14px; object-fit:cover; background:var(--soft-gray); }
.np-app .m-feed .m-pfile,
.np-app .m-feed .m-plink{ margin-top:10px; border:1px solid var(--line); border-radius:14px; padding:11px 13px; display:flex; align-items:center; gap:11px; color:var(--ink); background:color-mix(in srgb, var(--soft-gray) 45%, transparent); text-decoration:none; }
.np-app .m-feed .m-pfile .ft{ width:44px; height:34px; border-radius:8px; display:grid; place-items:center; flex:none; background:var(--green); color:#fff; font-size:10px; font-weight:800; text-transform:uppercase; }
.np-app .m-feed .m-pfile .fn{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; font-weight:650; }
.np-app .m-feed .m-pfile .fa{ color:var(--green-600); font-size:12px; font-weight:700; flex:none; }
.np-app .m-feed .m-plink .li{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:none; background:color-mix(in srgb, var(--lime) 30%, transparent); color:var(--green); }
.np-app .m-feed .m-plink .li svg{ width:17px; height:17px; }
.np-app .m-feed .m-plink .lt{ min-width:0; display:flex; flex-direction:column; }
.np-app .m-feed .m-plink .lt b, .np-app .m-feed .m-plink .lt small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.np-app .m-feed .m-plink .lt b{ font-size:13.5px; }
.np-app .m-feed .m-plink .lt small{ color:var(--ink-soft); font-size:11.5px; }
.np-app .m-acts{ display:flex; align-items:center; justify-content:space-between; max-width:330px; margin-top:9px; color:var(--ink-soft); }
.np-app .m-act{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; }
.np-app .m-act svg{ width:17px; height:17px; }
.np-app .m-act.like.on{ color:#e0556b; }
.np-app .m-act.like.on svg{ fill:#e0556b; }

/* ---- activity ---- */
.np-app .m-act-head{ font-family:var(--font-display); font-weight:600; font-size:16px; padding:14px 18px 8px; }
.np-app .m-notif{ display:flex; align-items:flex-start; gap:11px; padding:13px 18px; border-bottom:1px solid var(--line); }
.np-app .m-notif.unread{ background:color-mix(in srgb, var(--lime) 12%, transparent); }
.np-app .m-notif .nic{ width:24px; height:24px; flex:none; display:grid; place-items:center; margin-top:2px; }
.np-app .m-notif .nic svg{ width:21px; height:21px; }
.np-app .m-notif .nav-av{ width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-weight:600; font-size:14px; }
.np-app .m-notif .nb{ flex:1; min-width:0; }
.np-app .m-notif .nt{ font-size:14px; line-height:1.45; }
.np-app .m-notif .nt b{ font-weight:700; }
.np-app .m-notif .nt .tg{ color:var(--green-600); font-weight:700; }
.np-app .m-notif .nt .tm{ color:var(--ink-soft); font-weight:500; }
.np-app .m-notif .nsnip{ font-size:13.5px; color:var(--ink-soft); margin-top:4px; }

/* ---- insights (market signals hub) ---- */
.np-app .insights{ padding:6px 0 8px; }
.np-app .ins-head{ padding:16px 20px 6px; }
.np-app .ins-head .k{ font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--green-600); }
.np-app .ins-head h1{ font-family:var(--font-display); font-weight:600; font-size:25px; line-height:1.12; letter-spacing:-.02em; margin:4px 0 0; }
.np-app .ins-head p{ font-size:14px; color:var(--ink-soft); margin:5px 0 0; line-height:1.45; }
.np-app .ins-sec{ scroll-margin-top:8px; }
.np-app .ins-sec-head{ display:flex; align-items:center; gap:9px; padding:20px 20px 10px; }
.np-app .ins-sec-head .si{ width:26px; height:26px; border-radius:9px; display:grid; place-items:center; background:var(--green); color:var(--lime); flex:none; }
.np-app .ins-sec-head .si svg{ width:16px; height:16px; }
.np-app .ins-sec-head h3{ font-family:var(--font-display); font-weight:600; font-size:18px; letter-spacing:-.01em; }

/* trend rows with mini bars */
.np-app .trend{ display:flex; align-items:center; gap:13px; padding:13px 20px; border-bottom:1px solid var(--line); }
.np-app .trend .spark{ display:flex; align-items:flex-end; gap:2.5px; width:54px; height:34px; flex:none; }
.np-app .trend .spark i{ flex:1; border-radius:2px 2px 0 0; background:color-mix(in srgb, var(--fresh) 55%, transparent); }
.np-app .trend.dn .spark i{ background:color-mix(in srgb, #e0556b 45%, transparent); }
.np-app .trend .tb{ flex:1; min-width:0; }
.np-app .trend .tn{ font-weight:600; font-size:14.5px; }
.np-app .trend .td{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.np-app .trend .tc{ font-family:var(--font-display); font-weight:600; font-size:16px; flex:none; color:var(--green-600); }
.np-app .trend.dn .tc{ color:#e0556b; }

/* quote / rate rows */
.np-app .qrow{ display:flex; align-items:center; gap:13px; padding:13px 20px; border-bottom:1px solid var(--line); }
.np-app .qrow .qsym{ width:42px; height:42px; border-radius:13px; flex:none; display:grid; place-items:center; font-family:var(--font-display); font-weight:600; font-size:14px; color:#fff; }
.np-app .qrow .qb{ flex:1; min-width:0; }
.np-app .qrow .qn{ font-weight:600; font-size:14.5px; }
.np-app .qrow .ql{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.np-app .qrow .qp{ text-align:right; flex:none; }
.np-app .qrow .qp b{ font-family:var(--font-display); font-weight:600; font-size:15.5px; display:block; }
.np-app .qrow .qp .ch{ font-size:12.5px; font-weight:700; }
.np-app .qrow .qp .ch.up{ color:var(--green-600); }
.np-app .qrow .qp .ch.dn{ color:#e0556b; }

/* news list */
.np-app .nrow{ display:flex; gap:13px; padding:14px 20px; border-bottom:1px solid var(--line); align-items:flex-start; }
.np-app .nrow .nk{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--green-600); flex:none; width:58px; padding-top:2px; }
.np-app .nrow .nbody .nh{ font-weight:600; font-size:14.5px; line-height:1.4; }
.np-app .nrow .nbody .nm{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; }

/* ---- profile ---- */
.np-app .prof-cover{ height:118px; background:var(--green); position:relative; }
.np-app .prof-cover::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(125deg, transparent 0 16px, rgba(200,232,64,.12) 16px 18px); }
.np-app .prof-top{ padding:0 20px; margin-top:-40px; position:relative; }
.np-app .prof-av{ width:84px; height:84px; border-radius:50%; background:var(--fresh); color:var(--green); display:grid; place-items:center; font-family:var(--font-display); font-weight:600; font-size:34px; border:4px solid var(--bg); }
.np-app .prof-name{ font-family:var(--font-display); font-weight:600; font-size:23px; letter-spacing:-.01em; margin-top:10px; }
.np-app .prof-handle{ color:var(--ink-soft); font-size:14px; font-weight:600; }
.np-app .prof-bio{ font-size:14.5px; line-height:1.5; margin:11px 0 0; color:var(--ink); }
.np-app .prof-stats{ display:flex; gap:22px; margin:14px 0 4px; }
.np-app .prof-stats .st b{ font-family:var(--font-display); font-weight:600; font-size:17px; }
.np-app .prof-stats .st span{ color:var(--ink-soft); font-size:13.5px; }
.np-app .prof-actions{ display:flex; gap:10px; padding:14px 20px 4px; }
.np-app .prof-actions .btn{ flex:1; padding:12px; font-size:14.5px; }

.np-app .tile-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:14px 20px 0; }
.np-app .tile{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:15px; box-shadow:var(--shadow-sm); }
.np-app .tile .tk{ font-size:12.5px; color:var(--ink-soft); font-weight:600; }
.np-app .tile .tv{ font-family:var(--font-display); font-weight:600; font-size:24px; margin-top:3px; }
.np-app .tile .tv small{ font-family:var(--font-ui); font-size:13px; color:var(--ink-soft); font-weight:600; }

/* settings rows */
.np-app .m-rows{ padding:8px 12px 0; }
.np-app .m-row{ display:flex; align-items:center; gap:14px; padding:15px 12px; border-bottom:1px solid var(--line); }
.np-app .m-row .ric{ width:24px; height:24px; color:var(--green); flex:none; }
.np-app .m-row .rl{ flex:1; font-weight:600; font-size:15px; }
.np-app .m-row .rv{ color:var(--ink-soft); font-size:13.5px; font-weight:600; }
.np-app .m-row .chev{ width:18px; height:18px; color:var(--ink-soft); }
.np-app .m-toggle{ width:46px; height:27px; border-radius:100px; background:#cbd2c6; position:relative; flex:none; cursor:pointer; transition:background .2s; }
.np-app .m-toggle::after{ content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff; transition:transform .2s var(--ease); }
.np-app .m-toggle.on{ background:var(--fresh); }
.np-app .m-toggle.on::after{ transform:translateX(19px); }
.np-app .m-seg{ display:flex; gap:7px; }
.np-app .m-seg button{ font-weight:700; font-size:12.5px; padding:8px 13px; border-radius:100px; box-shadow:inset 0 0 0 1.5px var(--line); color:var(--ink-soft); }
.np-app .m-seg button.on{ background:var(--green); color:var(--lime); box-shadow:none; }

/* ---- bottom tab bar ---- */
.np-app .tabbar{ position:absolute; inset:auto 0 0 0; z-index:35; height:78px; background:#fff; border-top:1px solid var(--line); box-shadow:0 -8px 24px -16px rgba(20,36,32,.22); display:flex; align-items:flex-start; padding:9px 8px 0; }
.np-app .tabbar .tab{ position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--ink-soft); font-size:10.5px; font-weight:700; padding-top:4px; -webkit-tap-highlight-color:transparent; transition:color .18s var(--ease); }
/* override the leaked desktop community `.tab:hover{background}` — app tabs use the halo below */
.np-app .tabbar .tab,
.np-app .tabbar .tab:hover,
.np-app .tabbar .tab:focus,
.np-app .tabbar .tab:active{ background:transparent; }
.np-app .tabbar .tab svg{ width:25px; height:25px; position:relative; z-index:1; transition:transform .2s var(--ease); }
/* chic hover/focus: soft lime halo behind the icon, never a grey box */
.np-app .tabbar .tab:not(.center)::before{ content:""; position:absolute; top:1px; left:50%; width:50px; height:33px; border-radius:13px; background:color-mix(in srgb, var(--lime) 34%, transparent); transform:translateX(-50%) scale(.55); opacity:0; transition:opacity .2s var(--ease), transform .24s var(--ease); }
.np-app .tabbar .tab:not(.center):hover{ color:var(--green); }
.np-app .tabbar .tab:not(.center):hover::before,
.np-app .tabbar .tab:not(.center):focus-visible::before{ opacity:1; transform:translateX(-50%) scale(1); }
.np-app .tabbar .tab:not(.center):hover svg{ transform:translateY(-1px); }
.np-app .tabbar .tab:not(.center):active svg{ transform:scale(.9); }
.np-app .tabbar .tab:focus-visible{ outline:none; }
.np-app .tabbar .tab.active{ color:var(--green); }
.np-app .tabbar .tab.active svg{ color:var(--green); }
/* center insights / back button */
.np-app .tabbar .tab.center{ flex:none; width:58px; }
.np-app .tabbar .tab.center .pbtn{ width:52px; height:52px; border-radius:18px; background:var(--lime); color:var(--green); display:grid; place-items:center; margin-top:-12px; box-shadow:0 6px 18px -6px color-mix(in srgb, var(--lime) 70%, transparent); transition:border-radius .26s var(--ease), transform .26s var(--ease); }
.np-app .tabbar .tab.center .pbtn svg{ width:26px; height:26px; grid-area:1/1; transition:opacity .2s var(--ease), transform .2s var(--ease); }
.np-app .tabbar .tab.center .pbtn .ci-back{ opacity:0; transform:scale(.6); }
.np-app .tabbar .tab.center .pbtn .ci-chart{ opacity:1; }
/* deep (insights) state: morph to a back affordance */
.np-app.deep .tabbar .tab.center .pbtn{ border-radius:50%; transform:rotate(45deg); }
.np-app.deep .tabbar .tab.center .pbtn svg{ transform:rotate(-45deg); }
.np-app.deep .tabbar .tab.center .pbtn .ci-chart{ opacity:0; transform:rotate(-45deg) scale(.6); }
.np-app.deep .tabbar .tab.center .pbtn .ci-back{ opacity:1; transform:rotate(-45deg) scale(1); }
.np-app .tabbar .tab.center.active .pbtn{ outline:3px solid color-mix(in srgb, var(--green) 22%, transparent); }

/* secondary quick-tools row (slides up above the bar) */
.np-app .quicktools{
  position:absolute; left:0; right:0; bottom:78px; z-index:34;
  display:flex; gap:12px; justify-content:center; padding:12px 16px 16px;
  background:linear-gradient(to top, #fff 64%, transparent);
  transform:translateY(14px); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
.np-app .quicktools.open{ transform:none; opacity:1; visibility:visible; pointer-events:auto; }
.np-app .quicktools .qt{
  width:52px; height:52px; border-radius:16px; flex:none;
  display:grid; place-items:center; color:var(--green);
  background:var(--soft-gray); box-shadow:var(--shadow-sm);
  transition:background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
}
.np-app .quicktools .qt svg{ width:24px; height:24px; }
.np-app .quicktools .qt:active{ transform:scale(.94); }
.np-app .quicktools .qt.on{ background:var(--green); color:var(--lime); }

/* ---- bottom sheet (domain detail / composer) ---- */
.np-app .sheet-scrim{ position:absolute; inset:0; z-index:50; background:rgba(20,36,32,.5); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
.np-app .sheet-scrim.open{ opacity:1; visibility:visible; }
.np-app .sheet{ position:absolute; inset:auto 0 0 0; z-index:51; background:var(--bg); border-radius:30px 30px 0 0; transform:translateY(101%); transition:transform .36s cubic-bezier(.4,0,.2,1); max-height:92%; display:flex; flex-direction:column; }
.np-app .sheet.open{ transform:none; }
.np-app .sheet .grab{ width:42px; height:5px; border-radius:100px; background:#cbd2c6; margin:11px auto 0; flex:none; }
.np-app .sheet-scroll{ overflow-y:auto; padding:6px 22px 26px; }
.np-app .sheet-scroll::-webkit-scrollbar{ width:0; }

.np-app .sd-head{ height:130px; border-radius:24px; position:relative; display:grid; place-items:center; margin:12px 0 16px; }
.np-app .sd-head::before{ content:""; position:absolute; inset:0; border-radius:24px; background:repeating-linear-gradient(125deg, transparent 0 16px, color-mix(in srgb, var(--acc) 18%, transparent) 16px 18px); }
.np-app .sd-head .mk{ width:56px; color:var(--acc); position:relative; z-index:1; }
.np-app .sd-name{ font-family:var(--font-display); font-weight:600; font-size:30px; letter-spacing:-.02em; }
.np-app .sd-name .tld{ color:var(--fresh); }
.np-app .sd-slogan{ color:var(--ink-soft); font-size:15px; margin:5px 0 16px; }
.np-app .sd-block{ margin-top:18px; }
.np-app .sd-block h4{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; margin:0 0 10px; }
.np-app .sd-pal{ display:flex; gap:8px; }
.np-app .sd-pal i{ flex:1; height:46px; border-radius:11px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.np-app .sd-type{ display:flex; gap:10px; }
.np-app .sd-type .tc{ flex:1; background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; }
.np-app .sd-type .tc .aa{ font-size:34px; line-height:1; color:var(--green); }
.np-app .sd-type .tc .nm{ font-size:12.5px; color:var(--ink-soft); font-weight:600; margin-top:8px; }
.np-app .sd-tags{ display:flex; flex-wrap:wrap; gap:7px; }
.np-app .sd-tag{ font-size:13px; font-weight:600; padding:7px 13px; border-radius:100px; background:var(--soft-gray); color:var(--ink); }
.np-app .sd-cta{ position:sticky; bottom:0; background:var(--bg); padding:14px 22px calc(16px + env(safe-area-inset-bottom)); display:flex; gap:10px; border-top:1px solid var(--line); }
.np-app .sd-cta .price{ flex:none; }
.np-app .sd-cta .price b{ font-family:var(--font-display); font-weight:600; font-size:20px; display:block; line-height:1; }
.np-app .sd-cta .price small{ font-size:11px; color:var(--ink-soft); font-weight:600; }
.np-app .sd-cta .btn{ flex:1; }
.np-app .sheet-close{ position:absolute; top:16px; right:16px; z-index:2; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.9); display:grid; place-items:center; color:var(--green); }
.np-app .sheet-close svg{ width:18px; height:18px; }

/* composer sheet */
.np-app .comp-sheet .cs-top{ display:flex; align-items:center; justify-content:space-between; padding:8px 4px 14px; }
.np-app .comp-sheet .cs-top h3{ font-family:var(--font-display); font-weight:600; font-size:18px; }
.np-app .comp-sheet textarea{ width:100%; min-height:120px; border:none; outline:none; resize:none; font-family:inherit; font-size:17px; line-height:1.5; color:var(--ink); background:none; }
.np-app .comp-sheet textarea::placeholder{ color:#9aa79c; }
.np-app .comp-tags{ padding:6px 0 4px; }
.np-app .comp-tags .ct-label{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; }
.np-app .comp-tags .ct-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; }
.np-app .ct-chip{ font-weight:700; font-size:13.5px; padding:8px 14px; border-radius:100px; background:var(--soft-gray); color:var(--green); transition:all .16s var(--ease); }
.np-app .ct-chip:hover{ background:color-mix(in srgb, var(--lime) 40%, transparent); }
.np-app .ct-chip.on{ background:var(--green); color:var(--lime); }
.np-app .comp-row{ display:flex; align-items:center; gap:4px; padding-top:12px; border-top:1px solid var(--line); color:var(--green); }
.np-app .comp-row button{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:var(--green); }
.np-app .comp-row button:hover{ background:color-mix(in srgb, var(--lime) 28%, transparent); }
.np-app .comp-row svg{ width:20px; height:20px; }

.np-app .toast{ position:absolute; left:50%; bottom:96px; transform:translate(-50%, 20px); z-index:60; background:var(--green); color:var(--cream); font-weight:600; font-size:14px; padding:12px 20px; border-radius:100px; box-shadow:var(--shadow); opacity:0; visibility:hidden; transition:all .3s var(--ease); white-space:nowrap; display:flex; align-items:center; gap:9px; }
.np-app .toast.show{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.np-app .toast svg{ width:18px; height:18px; color:var(--lime); }