/* ================================================================
NI Indexer Panel — "Aurora" theme
Modern indigo/violet brand system on a deep space-navy base.
Redesign pass: palette, type system, elevation, motion & micro-
interactions. Purely cosmetic — no layout/structural rule below
was altered, so existing responsive behaviour is fully preserved.
================================================================ */
/* Brand typeface: Sora for display/headings (geometric, confident,
built for SaaS branding) + Inter for body/UI (extremely legible
at small dashboard sizes). Loaded via +
in (see NI_SEO::font_tags(), hooked
on wp_head) rather than @import here — @import forces a slow
serial waterfall (fetch this file → discover the @import → fetch
Google's CSS → fetch the font files) before any text can render;
linking directly in lets the browser start all of that in
parallel as soon as is parsed. Same families/weights, just
faster delivery. */
/* ================================================================
Root-level design tokens
================================================================
These mirror .ni-panel's / .ni-public's own token declarations
below verbatim (same values) — kept as a single source of truth
here for the dashboard/site chrome, but ALSO declared on :root.
Reason: JS-injected UI (the submit confirmation modal, and any
future toast/overlay) is appended straight to document.body via
appendChild, landing as a SIBLING of .ni-panel/.ni-public rather
than a descendant — CSS custom properties only cascade to
descendants, so anything body-level couldn't see --ni-card,
--ni-border, etc. and rendered with a transparent background and
unstyled buttons. Declaring the tokens on :root as well means
every element in the document can resolve them regardless of
where it sits in the tree, while .ni-panel/.ni-public re-asserting
the identical values below is a no-op that changes nothing for
already-correctly-nested content. */
:root {
--ni-bg: #080b14;
--ni-panel: #0d1420;
--ni-card: #111a2c;
--ni-card-2: #141d31;
--ni-border: #222c46;
--ni-text: #f3f5fb;
--ni-muted: #8b93ad;
--ni-accent: #6d5efc;
--ni-accent-2: #a855f7;
--ni-green: #2dd4a7;
--ni-red: #f96d6d;
--ni-radius: 14px;
--ni-accent-rgb: 109, 94, 252;
--ni-accent-2-rgb: 168, 85, 247;
--ni-green-rgb: 45, 212, 167;
--ni-red-rgb: 249, 109, 109;
--ni-font-display: 'Sora', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
--ni-font-body: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
--ni-shadow-sm: 0 2px 10px -4px rgba(2, 4, 10, .5);
--ni-shadow-md: 0 14px 34px -18px rgba(2, 4, 10, .65);
--ni-shadow-glow: 0 10px 28px -10px rgba(var(--ni-accent-rgb), .45);
--ni-gradient-brand: linear-gradient(135deg, var(--ni-accent), var(--ni-accent-2));
--ni-data-blue: #5b9dff;
--ni-data-purple: #b585ff;
--ni-tag-red-text: #ff8f8a;
--ni-motion-fast: 120ms;
--ni-motion-base: 180ms;
--ni-instant: #f0a020;
--ni-instant-2: #f7c948;
--ni-instant-rgb: 240, 160, 32;
--ni-instant-text: #ffb84d;
--ni-instant-ink: #241600;
--ni-gradient-instant: linear-gradient(135deg, var(--ni-instant), var(--ni-instant-2));
--ni-whatsapp: #25D366;
--ni-whatsapp-rgb: 37, 211, 102;
--ni-telegram: #29A9EA;
--ni-telegram-rgb: 41, 169, 234;
--ni-normal-rgb: 26, 86, 219;
--ni-normal-text: #6ea8fe;
--ni-warning: #f2a93b;
--ni-warning-rgb: 240, 169, 59;
}
.ni-panel {
--ni-bg: #080b14;
--ni-panel: #0d1420;
--ni-card: #111a2c;
--ni-card-2: #141d31;
--ni-border: #222c46;
--ni-text: #f3f5fb;
--ni-muted: #8b93ad;
--ni-accent: #6d5efc;
--ni-accent-2: #a855f7;
--ni-green: #2dd4a7;
--ni-red: #f96d6d;
--ni-radius: 14px;
/* rgb triplets for use inside rgba() glows/tints */
--ni-accent-rgb: 109, 94, 252;
--ni-accent-2-rgb: 168, 85, 247;
--ni-green-rgb: 45, 212, 167;
--ni-red-rgb: 249, 109, 109;
/* type system */
--ni-font-display: 'Sora', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
--ni-font-body: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
/* shared elevation + motion tokens */
--ni-shadow-sm: 0 2px 10px -4px rgba(2, 4, 10, .5);
--ni-shadow-md: 0 14px 34px -18px rgba(2, 4, 10, .65);
--ni-shadow-glow: 0 10px 28px -10px rgba(var(--ni-accent-rgb), .45);
--ni-gradient-brand: linear-gradient(135deg, var(--ni-accent), var(--ni-accent-2));
display: flex;
flex-wrap: wrap;
align-items: stretch;
min-height: 640px;
width: 100%;
max-width: 100%;
background:
radial-gradient(ellipse 120% 60% at 15% -10%, rgba(var(--ni-accent-rgb), .10), transparent 55%),
radial-gradient(ellipse 90% 50% at 100% 0%, rgba(var(--ni-accent-2-rgb), .07), transparent 55%),
var(--ni-bg);
color: var(--ni-text);
font-family: var(--ni-font-body);
font-size: 14px;
line-height: 1.5;
letter-spacing: -.005em;
border-radius: var(--ni-radius);
border: 1px solid var(--ni-border);
box-shadow: var(--ni-shadow-md);
overflow: hidden;
/* No viewport-width "breakout" trick here on purpose — many themes
(especially block/FSE themes) set overflow:hidden/clip on their
content wrapper, which silently chops off a 100vw negative-margin
breakout. Instead this uses intrinsic, container-based responsive
layout (flex-wrap + auto-fit grids below) so it always fits
whatever width the theme actually gives it — narrow or wide,
with or without an overflow-clipping ancestor. */
}
.ni-panel * { box-sizing: border-box; }
.ni-panel img { max-width: 100%; }
.ni-panel h1, .ni-panel h2, .ni-panel h3,
.ni-public h1, .ni-public h2, .ni-public h3 { font-family: var(--ni-font-display); letter-spacing: -.01em; }
/* ---- Custom scrollbars (Firefox + WebKit) for every internally
scrolling region: tables, mobile drawer, long lists ---- */
.ni-panel, .ni-public { scrollbar-width: thin; scrollbar-color: var(--ni-accent) var(--ni-card); }
.ni-panel ::-webkit-scrollbar, .ni-public ::-webkit-scrollbar { width: 9px; height: 9px; }
.ni-panel ::-webkit-scrollbar-track, .ni-public ::-webkit-scrollbar-track { background: var(--ni-card); }
.ni-panel ::-webkit-scrollbar-thumb, .ni-public ::-webkit-scrollbar-thumb { background: linear-gradient(var(--ni-accent), var(--ni-accent-2)); border-radius: 20px; border: 2px solid var(--ni-card); }
.ni-panel ::-webkit-scrollbar-thumb:hover, .ni-public ::-webkit-scrollbar-thumb:hover { background: var(--ni-accent-2); }
.ni-table-wrap { scroll-behavior: smooth; }
html:has(.ni-public) { scroll-behavior: smooth; }
/* Sidebar */
.ni-sidebar { flex: 1 1 230px; max-width: 230px; background: var(--ni-panel); border-right: 1px solid var(--ni-border); display: flex; flex-direction: column; padding: 20px 14px; }
.ni-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; text-decoration: none; color: var(--ni-text); min-width: 0; }
.ni-brand-mark { font-size: 20px; flex-shrink: 0; filter: drop-shadow(0 0 10px rgba(var(--ni-accent-rgb), .55)); }
.ni-brand-name { font-family: var(--ni-font-display); font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.ni-brand-sub { font-size: 11px; color: var(--ni-muted); }
/* Site logo image — used in the sidebar, mobile topbar, public header,
and public footer so the brand mark is identical everywhere. Sized
per context; width is always auto so the logo's own aspect ratio
(never stretched/distorted) is preserved at every size. */
.ni-logo-img { display: block; height: 30px; width: auto; max-width: 100%; }
.ni-public-logo .ni-logo-img { height: 34px; }
.ni-public-footer .ni-logo-img { height: 28px; }
.ni-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ni-nav a { position: relative; color: var(--ni-text); text-decoration: none; padding: 8px 10px; border-radius: 8px; font-size: 13px; display: flex; align-items: center; gap: 10px; transition: background var(--ni-motion-base, .18s) ease, color var(--ni-motion-base, .18s) ease, padding-left var(--ni-motion-base, .18s) ease; }
.ni-nav a:hover { background: rgba(255,255,255,.05); padding-left: 13px; }
.ni-nav a.active { background: linear-gradient(90deg, rgba(var(--ni-accent-rgb), .16), rgba(var(--ni-accent-rgb), .04)); color: var(--ni-accent); font-weight: 600; }
.ni-nav a.active::before { content: ''; position: absolute; left: -14px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 0 4px 4px 0; background: var(--ni-gradient-brand); box-shadow: 0 0 10px rgba(var(--ni-accent-rgb), .7); }
.ni-nav-icon { width: 18px; text-align: center; flex-shrink: 0; }
/* Defensive override: some themes ship a global `a:hover{color:...}` /
`a:visited{color:...}` rule that (depending on load order) can win
against a plain single-class selector and make the label blend
into the hover background. Scoping through .ni-panel and forcing
the color keeps sidebar links legible no matter what the active
theme's stylesheet does. */
.ni-panel .ni-nav a,
.ni-panel .ni-nav a:hover,
.ni-panel .ni-nav a:focus,
.ni-panel .ni-nav a:visited,
.ni-panel .ni-nav a span { color: var(--ni-text) !important; text-decoration: none !important; }
.ni-panel .ni-nav a.active,
.ni-panel .ni-nav a.active:hover,
.ni-panel .ni-nav a.active:visited,
.ni-panel .ni-nav a.active span { color: var(--ni-accent) !important; }
.ni-panel .ni-nav-icon svg { color: inherit; }
.ni-sidebar-user { display: flex; align-items: center; gap: 10px; padding: 10px; margin-top: 12px; border-top: 1px solid var(--ni-border); min-width: 0; }
.ni-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ni-gradient-brand); color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; box-shadow: 0 4px 12px -4px rgba(var(--ni-accent-rgb), .6); }
.ni-user-name { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.ni-user-sub { font-size: 11px; color: var(--ni-muted); }
.ni-logout { color: var(--ni-accent-2); font-size: 12px; text-decoration: none; padding: 8px; display: block; border-radius: 6px; transition: background .15s ease, color .15s ease; }
.ni-logout:hover { background: rgba(var(--ni-red-rgb), .1); color: var(--ni-red); }
/* Main content — the important part: min-width:0 lets a flex child
actually shrink below its content's natural width instead of
forcing the whole row (and the sidebar next to it) to overflow. */
.ni-main { flex: 999 1 320px; min-width: 0; max-width: 100%; padding: 24px 28px; overflow-x: hidden; }
.ni-topbar { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.ni-topbar h1 { font-family: var(--ni-font-display); font-weight: 700; font-size: 22px; margin: 0 0 4px; overflow-wrap: anywhere; letter-spacing: -.015em; }
.ni-muted { color: var(--ni-muted); font-size: 13px; }
.ni-green { color: var(--ni-green); }
/* Buttons */
.ni-btn { background: var(--ni-card); border: 1px solid var(--ni-border); color: var(--ni-text); padding: 9px 16px; border-radius: 9px; font-size: 13px; font-weight: 600; letter-spacing: -.005em; cursor: pointer; text-decoration: none; display: inline-block; }
.ni-btn-primary { position: relative; background: var(--ni-gradient-brand); color: #ffffff; border: none; overflow: hidden; box-shadow: var(--ni-shadow-glow); }
.ni-btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%); transform: translateX(-120%); transition: transform .55s ease; }
.ni-btn-primary:hover::before { transform: translateX(120%); }
.ni-btn-block { width: 100%; margin-top: 14px; text-align: center; }
.ni-btn:disabled { opacity: .6; cursor: default; }
/* Stat grid — auto-fit/minmax reflows based on the REAL available
width of whatever container the theme gives us, so it can never
overflow/get clipped the way a fixed repeat(6,1fr) can. */
.ni-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 20px; }
.ni-stats-grid-4 { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.ni-stat { background: linear-gradient(160deg, var(--ni-card-2), var(--ni-card)); border: 1px solid var(--ni-border); border-radius: var(--ni-radius); padding: 16px; min-width: 0; overflow: hidden; }
.ni-stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; font-size: 15px; margin-bottom: 10px; background: rgba(var(--ni-accent-rgb), .14); color: var(--ni-accent); opacity: 1; }
.ni-stat-value { font-family: var(--ni-font-display); font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.ni-stat-label { font-size: 10px; font-weight: 600; letter-spacing: .07em; color: var(--ni-muted); margin-top: 2px; text-transform: uppercase; }
/* Cards */
.ni-card { background: var(--ni-card); border: 1px solid var(--ni-border); border-radius: var(--ni-radius); padding: 18px; margin-bottom: 18px; }
.ni-card-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--ni-font-display); font-weight: 600; margin-bottom: 14px; }
.ni-card-head a { color: var(--ni-accent); font-size: 12px; text-decoration: none; font-family: var(--ni-font-body); font-weight: 600; }
.ni-two-col { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 18px; align-items: start; }
/* True 50/50 split — for content where both sides are equally important
(the Dashboard's Normal/Instant weekly charts) as opposed to
.ni-two-col's intentional 2:1 main-content/sidebar ratio used
elsewhere (e.g. Submit URLs' form + balance card). */
.ni-two-col-equal { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
/* Form controls */
.ni-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .05em; color: var(--ni-muted); margin: 12px 0 6px; text-transform: uppercase; }
.ni-input, .ni-textarea { width: 100%; background: var(--ni-bg); border: 1px solid var(--ni-border); color: var(--ni-text); border-radius: 9px; padding: 10px 12px; font-size: 13px; font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
@media (max-width: 768px) {
/* iOS Safari auto-zooms the whole page in when a tapped input's
computed font-size is under 16px — harmless on desktop, but on
phones it makes every text field feel broken (the page visibly
jumps/zooms on focus). 16px here only, so the compact 13px
density is untouched on desktop where this doesn't happen. */
.ni-input, .ni-textarea, select.ni-input { font-size: 16px; }
}
.ni-input:hover, .ni-textarea:hover { border-color: rgba(var(--ni-accent-rgb), .45); }
.ni-input::placeholder, .ni-textarea::placeholder { color: var(--ni-muted); opacity: .7; }
.ni-textarea { min-height: 90px; resize: vertical; }
.ni-textarea-lg { min-height: 160px; }
.ni-row-between { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 12px; flex-wrap: wrap; }
.ni-toggle { font-size: 12px; color: var(--ni-muted); display: flex; align-items: center; gap: 6px; }
/* Switch */
/* Badges/tags */
.ni-badges { display: flex; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.ni-badge { font-size: 11px; padding: 4px 10px; border-radius: 20px; font-weight: 700; letter-spacing: .01em; }
.ni-badge-orange { background: rgba(109,94,252,.15); color: var(--ni-accent); }
.ni-tag { font-size: 11px; padding: 3px 9px; border-radius: 20px; font-weight: 700; }
.ni-tag-green { background: rgba(45,212,167,.15); color: var(--ni-green); }
.ni-tag-red { background: rgba(249,109,109,.15); color: var(--ni-red); }
.ni-tag-gray { background: rgba(255,255,255,.06); color: var(--ni-muted); }
/* Table — always wrapped so wide data (long URLs, dates) scrolls
horizontally within its own card instead of pushing the whole
dashboard wider than its container. */
.ni-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ni-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 12.5px; }
.ni-table th { text-align: left; color: var(--ni-muted); font-weight: 700; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid var(--ni-border); white-space: nowrap; }
.ni-table td { padding: 12px 10px; border-bottom: 1px solid var(--ni-border); word-break: break-all; }
.ni-filters { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.ni-filters .ni-input { width: auto; flex: 1; min-width: 160px; }
/* Plans */
.ni-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.ni-tab { background: var(--ni-card); border: 1px solid var(--ni-border); color: var(--ni-muted); padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .18s ease; }
.ni-tab:hover { color: var(--ni-text); border-color: rgba(var(--ni-accent-rgb), .4); }
.ni-tab.active { background: var(--ni-gradient-brand); border-color: transparent; color: #fff; box-shadow: 0 6px 16px -6px rgba(var(--ni-accent-rgb), .55); }
.ni-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.ni-plan-card { background: var(--ni-card); border: 1px solid var(--ni-border); border-radius: var(--ni-radius); padding: 16px; text-align: center; }
.ni-plan-name { font-size: 11px; color: var(--ni-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ni-plan-credits { font-family: var(--ni-font-display); font-size: 22px; font-weight: 700; margin: 6px 0 2px; }
.ni-plan-price { font-size: 18px; font-weight: 700; color: var(--ni-accent); margin: 10px 0; }
.ni-big-number { font-family: var(--ni-font-display); font-size: 26px; font-weight: 700; color: var(--ni-accent); }
/* Payments/tickets/notifications */
.ni-payment-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--ni-border); gap: 12px; }
.ni-ticket { padding: 10px 0; border-bottom: 1px solid var(--ni-border); }
.ni-ticket-thread { margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.ni-ticket-reply { font-size: 12.5px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.04); }
.ni-ticket-reply-admin { background: rgba(109,94,252,.10); }
.ni-ticket-reply-user { background: rgba(255,255,255,.04); }
.ni-notification { padding: 12px 0; border-bottom: 1px solid var(--ni-border); font-size: 13px; }
.ni-notification.unread { border-left: 3px solid var(--ni-accent); padding-left: 10px; }
/* Alerts */
.ni-alert { margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-size: 12.5px; }
.ni-alert-success { background: rgba(45,212,167,.12); color: var(--ni-green); border: 1px solid rgba(45,212,167,.3); }
.ni-alert-error { background: rgba(249,109,109,.12); color: var(--ni-red); border: 1px solid rgba(249,109,109,.3); }
.ni-alert-warning { background: rgba(var(--ni-warning-rgb),.12); color: var(--ni-warning); border: 1px solid rgba(var(--ni-warning-rgb),.3); }
.ni-alert-info { background: rgba(109,94,252,.12); color: var(--ni-accent); border: 1px solid rgba(109,94,252,.3); }
.ni-login-gate { padding: 0; }
.ni-login-gate-inner { padding: 40px; text-align: center; }
/* ---- Chart (Last 7 Days) ---- */
.ni-chart-wrap { width: 100%; }
.ni-chart-svg { width: 100%; height: 200px; display: block; overflow: visible; }
.ni-chart-fill-top { stop-color: var(--ni-accent-2); stop-opacity: .38; }
.ni-chart-fill-bottom { stop-color: var(--ni-accent); stop-opacity: 0; }
.ni-chart-area { fill: url(#niChartFill); stroke: none; }
.ni-chart-line { fill: none; stroke: var(--ni-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ni-chart-dot { fill: var(--ni-card); stroke: var(--ni-accent); stroke-width: 2; transition: r .15s; }
.ni-chart-dot:hover { r: 6; fill: var(--ni-accent-2); }
.ni-chart-value { font-family: var(--ni-font-display); fill: var(--ni-text); font-size: 11px; font-weight: 700; }
.ni-chart-daylabel { fill: var(--ni-muted); font-size: 11px; }
/* ---- Recent Submissions (batch grouped) ---- */
.ni-recent-list { display: flex; flex-direction: column; }
.ni-recent-row, .ni-recent-batch-head { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--ni-border); width: 100%; background: none; border-left: none; border-right: none; border-top: none; color: var(--ni-text); font-family: inherit; font-size: inherit; text-align: left; cursor: default; }
.ni-recent-batch-head { cursor: pointer; }
.ni-recent-batch-head:hover { background: rgba(255,255,255,.03); }
.ni-recent-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ni-recent-url { font-size: 13px; overflow-wrap: anywhere; }
.ni-recent-project { font-size: 11px; color: var(--ni-muted); }
.ni-recent-count { font-size: 11px; color: var(--ni-accent); font-weight: 600; }
.ni-recent-meta { font-size: 12px; color: var(--ni-muted); white-space: nowrap; }
.ni-recent-chevron { display: inline-block; color: var(--ni-accent); transition: transform .15s; margin-right: 4px; }
.ni-recent-batch-head.open .ni-recent-chevron { transform: rotate(90deg); }
.ni-recent-batch-body { display: none; flex-direction: column; padding: 4px 4px 8px 30px; background: rgba(255,255,255,.02); border-bottom: 1px solid var(--ni-border); }
.ni-recent-batch-body.open { display: flex; }
.ni-recent-sub-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 12px; border-bottom: 1px dashed var(--ni-border); }
.ni-recent-sub-row:last-child { border-bottom: none; }
.ni-recent-sub-url { overflow-wrap: anywhere; flex: 1; min-width: 0; }
@media (max-width: 620px) {
.ni-recent-row, .ni-recent-batch-head { grid-template-columns: 1fr auto; row-gap: 4px; }
}
/* ---- Pager ---- */
.ni-pager { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; align-items: center; }
.ni-page-btn { background: var(--ni-card); border: 1px solid var(--ni-border); color: var(--ni-text); padding: 6px 11px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s ease; text-decoration: none; display: inline-block; }
.ni-page-btn:hover { border-color: rgba(var(--ni-accent-rgb), .45); color: var(--ni-text); }
.ni-page-btn:hover:not([disabled]) { border-color: var(--ni-accent); color: var(--ni-accent); }
.ni-page-btn.active { background: rgba(109,94,252,.14); border-color: var(--ni-accent); color: var(--ni-accent); font-weight: 700; }
.ni-page-btn[disabled] { opacity: .4; cursor: default; }
.ni-page-ellipsis { color: var(--ni-muted); padding: 0 2px; }
/* ---- Misc utility ---- */
.ni-text-error { color: var(--ni-red); }
.ni-tag-purple { background: rgba(181,133,255,.15); color: var(--ni-data-purple); }
.ni-tag-orange { background: rgba(var(--ni-warning-rgb),.15); color: var(--ni-warning); }
/* ---- Input with icon (Profile / Auth / Support forms) ---- */
.ni-input-icon { position: relative; display: flex; align-items: center; }
.ni-input-icon-glyph { position: absolute; left: 12px; font-size: 13px; opacity: .75; pointer-events: none; }
.ni-input-icon .ni-input { padding-left: 34px; }
/* ---- Profile page ---- */
.ni-profile-banner { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, rgba(109,94,252,.14), rgba(168,85,247,.06)); border: 1px solid var(--ni-border); border-radius: var(--ni-radius); padding: 18px 20px; margin-bottom: 18px; flex-wrap: wrap; }
.ni-profile-banner-avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--ni-accent), var(--ni-accent-2)); color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; flex-shrink: 0; }
.ni-profile-banner-info { flex: 1; min-width: 160px; }
.ni-profile-banner-name { font-family: var(--ni-font-display); font-size: 17px; font-weight: 700; }
.ni-profile-banner-email { font-size: 12.5px; color: var(--ni-muted); }
.ni-profile-banner-credits { text-align: right; }
.ni-profile-banner-credits-val { display: block; font-family: var(--ni-font-display); font-size: 22px; font-weight: 700; color: var(--ni-accent); }
.ni-profile-banner-credits-label { font-size: 11px; color: var(--ni-muted); text-transform: uppercase; letter-spacing: .05em; }
.ni-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ni-info-tile { display: flex; align-items: center; gap: 10px; background: var(--ni-bg); border: 1px solid var(--ni-border); border-radius: 10px; padding: 12px; transition: border-color .15s ease, transform .15s ease; }
.ni-info-tile:hover { border-color: rgba(var(--ni-accent-rgb), .4); transform: translateY(-1px); }
.ni-info-tile-icon { font-size: 18px; }
.ni-info-tile-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--ni-muted); font-weight: 600; }
.ni-info-tile-value { font-size: 13px; font-weight: 600; }
/* ---- Support ticket priority segmented control ---- */
.ni-priority-group { display: flex; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.ni-priority-opt { flex: 1; min-width: 90px; }
.ni-priority-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.ni-priority-opt span { display: block; text-align: center; padding: 9px 6px; border-radius: 8px; border: 1px solid var(--ni-border); background: var(--ni-bg); font-size: 12.5px; cursor: pointer; transition: all .15s; }
.ni-priority-opt input:checked + span { border-color: var(--ni-accent); background: rgba(109,94,252,.12); color: var(--ni-accent); font-weight: 600; }
.ni-priority-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.ni-priority-dot-low { background: var(--ni-green); }
.ni-priority-dot-normal { background: var(--ni-accent); }
.ni-priority-dot-high { background: var(--ni-red); }
.ni-contact-card .ni-textarea { min-height: 120px; }
/* ---- Password strength hint (pure CSS bar, no extra JS dependency) ---- */
.ni-pw-strength { height: 4px; border-radius: 4px; background: var(--ni-border); margin-top: 6px; overflow: hidden; }
.ni-pw-strength-bar { height: 100%; width: 0%; border-radius: 4px; transition: width var(--ni-motion-base) ease, background var(--ni-motion-base) ease; }
.ni-pw-strength-bar[data-level="weak"] { background: var(--ni-red); width: 33%; }
.ni-pw-strength-bar[data-level="fair"] { background: var(--ni-accent); width: 66%; }
.ni-pw-strength-bar[data-level="strong"] { background: var(--ni-green); width: 100%; }
/* ---- Save-confirmation micro-interaction (button briefly shows a check state) ---- */
.ni-btn-saved { background: var(--ni-green) !important; color: #0d2b20 !important; border-color: var(--ni-green) !important; }
@media (max-width: 860px) {
.ni-sidebar { flex: 1 1 100%; max-width: 100%; flex-direction: row; flex-wrap: wrap; padding: 14px; }
.ni-brand { margin-bottom: 10px; flex: 1 1 100%; }
.ni-nav { flex-direction: row; flex-wrap: wrap; flex: 1 1 100%; }
.ni-sidebar-user { flex: 1 1 100%; margin-top: 8px; border-top: 1px solid var(--ni-border); }
.ni-two-col { grid-template-columns: 1fr; }
.ni-two-col-equal { grid-template-columns: 1fr; }
.ni-main { padding: 18px 16px; }
}
@media (max-width: 480px) {
.ni-stats-grid, .ni-stats-grid-4 { grid-template-columns: 1fr; }
.ni-filters .ni-input { min-width: 0; flex-basis: 100%; }
}
/* ================================================================
Public site (homepage, login, register) — same dark/orange theme
as the logged-in panel, but full-width instead of the boxed
dashboard shell.
================================================================ */
.ni-public {
--ni-bg: #080b14;
--ni-panel: #0d1420;
--ni-card: #111a2c;
--ni-border: #222c46;
--ni-text: #f3f5fb;
--ni-muted: #8b93ad;
--ni-accent: #6d5efc;
--ni-accent-2: #a855f7;
--ni-green: #2dd4a7;
--ni-red: #f96d6d;
--ni-radius: 14px;
background: var(--ni-bg);
color: var(--ni-text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
line-height: 1.5;
letter-spacing: -.005em;
width: 100%;
max-width: 100%;
/* No 100vw breakout here — many themes (block/FSE themes especially)
clip overflow on their content wrapper, which silently chops off
that trick. Instead every section below manages its own width via
.ni-section-inner, so this component looks right at whatever
width the theme's container actually provides. */
}
.ni-public * { box-sizing: border-box; }
.ni-public img { max-width: 100%; }
.ni-section-inner { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
/* Header */
.ni-public-header { border-bottom: 1px solid var(--ni-border); background: rgba(13,20,32,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 10; }
.ni-public-header-inner { max-width: 1080px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ni-public-logo { display: flex; align-items: center; gap: 8px; color: var(--ni-text); text-decoration: none; font-family: var(--ni-font-display); font-weight: 700; font-size: 16px; }
.ni-public-nav { display: flex; gap: 22px; }
.ni-public-nav a { color: var(--ni-muted); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.ni-public-nav a:hover { color: var(--ni-text); }
.ni-public-actions { display: flex; gap: 10px; }
/* Hero */
.ni-hero { padding: 80px 24px 60px; text-align: center; background: radial-gradient(ellipse at top, rgba(var(--ni-accent-rgb),.10), transparent 60%); }
.ni-hero-inner { max-width: 720px; margin: 0 auto; }
.ni-hero-badge { display: inline-block; background: rgba(var(--ni-accent-rgb),.12); color: var(--ni-accent); border: 1px solid rgba(var(--ni-accent-rgb),.3); padding: 6px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; margin-bottom: 20px; }
.ni-hero h1 { font-family: var(--ni-font-display); font-weight: 800; font-size: 42px; line-height: 1.14; letter-spacing: -.02em; margin: 0 0 16px; }
.ni-hero-sub { color: var(--ni-muted); font-size: 16.5px; line-height: 1.6; margin-bottom: 28px; }
.ni-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; }
.ni-btn-lg { padding: 13px 26px; font-size: 14.5px; }
.ni-hero-stats { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; }
.ni-hero-stats div { display: flex; flex-direction: column; }
.ni-hero-stats strong { font-family: var(--ni-font-display); font-size: 23px; color: var(--ni-accent); }
.ni-hero-stats span { font-size: 12px; color: var(--ni-muted); margin-top: 2px; font-weight: 600; }
/* Features */
.ni-features { padding: 60px 0; border-top: 1px solid var(--ni-border); }
.ni-features h2, .ni-pricing h2 { font-family: var(--ni-font-display); font-weight: 700; letter-spacing: -.01em; text-align: center; font-size: 29px; margin-bottom: 36px; }
.ni-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.ni-feature-card { background: var(--ni-card); border: 1px solid var(--ni-border); border-radius: var(--ni-radius); padding: 22px; }
.ni-feature-icon { font-size: 22px; margin-bottom: 10px; }
.ni-feature-card h3 { font-family: var(--ni-font-display); font-size: 15.5px; margin: 0 0 8px; }
.ni-feature-card p { font-size: 13.5px; color: var(--ni-muted); line-height: 1.5; margin: 0; }
/* Pricing preview */
.ni-pricing { padding: 60px 0 80px; border-top: 1px solid var(--ni-border); }
.ni-center { text-align: center; margin-bottom: 30px; }
.ni-pricing-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; }
.ni-pricing-group-title { text-align: center; font-family: var(--ni-font-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; margin: 0 0 18px; }
/* How it works */
.ni-steps { padding: 60px 0; border-top: 1px solid var(--ni-border); }
.ni-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; counter-reset: ni-step; }
.ni-step-card { background: var(--ni-card); border: 1px solid var(--ni-border); border-radius: var(--ni-radius); padding: 22px; position: relative; }
.ni-step-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ni-gradient-brand); color: #fff; font-family: var(--ni-font-display); font-weight: 700; font-size: 13px; margin-bottom: 12px; }
.ni-step-card h3 { font-family: var(--ni-font-display); font-size: 15.5px; margin: 0 0 8px; }
.ni-step-card p { font-size: 13.5px; color: var(--ni-muted); line-height: 1.5; margin: 0; }
/* FAQ */
.ni-faq { padding: 60px 0 80px; border-top: 1px solid var(--ni-border); max-width: 760px; margin: 0 auto; }
.ni-faq-item { border-bottom: 1px solid var(--ni-border); }
.ni-faq-item summary { cursor: pointer; padding: 18px 4px; font-family: var(--ni-font-display); font-size: 15px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.ni-faq-item summary::-webkit-details-marker { display: none; }
.ni-faq-item summary::after { content: '+'; color: var(--ni-accent); font-size: 20px; transition: transform .2s ease; }
.ni-faq-item[open] summary::after { content: '\2212'; }
.ni-faq-item p { color: var(--ni-muted); font-size: 13.5px; line-height: 1.6; margin: 0 4px 18px; }
/* Testimonials */
.ni-testimonials { padding: 60px 0 80px; border-top: 1px solid var(--ni-border); }
.ni-testimonials h2 { font-family: var(--ni-font-display); font-weight: 700; letter-spacing: -.01em; text-align: center; font-size: 29px; margin-bottom: 36px; }
.ni-testimonial-carousel { max-width: 680px; margin: 0 auto; display: flex; align-items: center; gap: 14px; }
.ni-testimonial-nav { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--ni-card); border: 1px solid var(--ni-border); color: var(--ni-text); font-size: 19px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .18s, color .18s, transform .15s; }
.ni-testimonial-nav:hover { border-color: rgba(var(--ni-accent-rgb),.5); color: var(--ni-accent); transform: translateY(-1px); }
/* All cards occupy the same grid cell so the container's height is
always the tallest card automatically — no JS height math needed,
and there's no layout jump when a shorter quote fades in. */
.ni-testimonial-track { flex: 1; min-width: 0; display: grid; }
.ni-testimonial-card { grid-area: 1 / 1; background: var(--ni-card); border: 1px solid var(--ni-border); border-radius: var(--ni-radius); padding: 30px 28px 24px; text-align: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s ease; margin: 0; }
.ni-testimonial-card.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.ni-testimonial-quote-mark { font-family: Georgia, 'Times New Roman', serif; font-size: 42px; line-height: 1; color: var(--ni-accent); opacity: .55; margin-bottom: 4px; }
.ni-testimonial-card blockquote { margin: 0 0 18px; }
.ni-testimonial-card blockquote p { font-size: 14.5px; line-height: 1.65; color: var(--ni-text); margin: 0; }
.ni-testimonial-card figcaption { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ni-testimonial-avatar { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--ni-gradient-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--ni-font-display); font-weight: 700; font-size: 13px; }
.ni-testimonial-who { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.ni-testimonial-name { font-family: var(--ni-font-display); font-weight: 700; font-size: 13.5px; }
.ni-testimonial-country { font-size: 12px; color: var(--ni-muted); }
.ni-testimonial-dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.ni-testimonial-dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: none; background: var(--ni-border); cursor: pointer; transition: background .18s, transform .18s; }
.ni-testimonial-dot:hover { background: rgba(var(--ni-accent-rgb),.6); }
.ni-testimonial-dot.is-active { background: var(--ni-gradient-brand); transform: scale(1.25); }
@media (max-width: 560px) {
.ni-testimonial-carousel { gap: 8px; }
.ni-testimonial-nav { width: 30px; height: 30px; font-size: 16px; }
.ni-testimonial-card { padding: 24px 18px 20px; }
.ni-testimonial-who { text-align: left; }
}
/* Final CTA */
.ni-final-cta { padding: 70px 24px; text-align: center; border-top: 1px solid var(--ni-border); background: radial-gradient(ellipse at bottom, rgba(var(--ni-accent-rgb),.10), transparent 60%); }
.ni-final-cta h2 { font-family: var(--ni-font-display); font-weight: 700; font-size: 27px; margin: 0 0 10px; }
.ni-final-cta p { color: var(--ni-muted); margin-bottom: 24px; }
/* Public footer */
.ni-public-footer { border-top: 1px solid var(--ni-border); padding: 24px 0; }
/* Auth pages (login / register) */
.ni-auth-wrap { display: flex; justify-content: center; padding: 60px 24px 90px; }
.ni-auth-card { width: 100%; max-width: 400px; background: var(--ni-card); border: 1px solid var(--ni-border); border-radius: var(--ni-radius); padding: 32px; }
.ni-auth-card h1 { font-family: var(--ni-font-display); font-weight: 700; font-size: 22px; margin: 0 0 4px; }
.ni-auth-card form { margin-top: 18px; }
.ni-auth-switch { text-align: center; font-size: 13px; color: var(--ni-muted); margin-top: 20px; }
.ni-auth-switch a { color: var(--ni-accent); text-decoration: none; font-weight: 700; }
/* Premium auth card variant — used by Login / Create Account */
.ni-auth-card-v2 { position: relative; overflow: hidden; box-shadow: 0 20px 60px -20px rgba(0,0,0,.5); background: linear-gradient(165deg, var(--ni-card) 60%, rgba(109,94,252,.05)); }
.ni-auth-card-v2::before { content: ''; position: absolute; top: -60px; right: -60px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(109,94,252,.25), transparent 70%); pointer-events: none; }
.ni-auth-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--ni-accent), var(--ni-accent-2)); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px; box-shadow: 0 8px 24px -8px rgba(109,94,252,.6); }
.ni-btn-glow { position: relative; transition: transform .15s, box-shadow .15s; box-shadow: 0 6px 20px -6px rgba(109,94,252,.55); }
.ni-btn-glow:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -6px rgba(109,94,252,.7); }
@media (max-width: 720px) {
.ni-hero { padding: 56px 20px 44px; }
.ni-hero h1 { font-size: 28px; }
.ni-hero-sub { font-size: 14.5px; }
.ni-features-grid { grid-template-columns: 1fr; }
.ni-hero-stats { gap: 28px; }
.ni-public-nav { order: 3; width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
.ni-hero-actions .ni-btn { width: 100%; }
.ni-auth-card { padding: 22px; }
.ni-hero-stats { gap: 18px 28px; }
}
/* ================================================================
Homepage modernization — hero motion, elevated feature cards,
highlighted pricing plan, connected steps, richer FAQ, footer grid.
================================================================ */
.ni-public-header-inner { transition: box-shadow .2s; }
.ni-public-logo { transition: opacity .15s; }
.ni-public-logo:hover { opacity: .82; }
.ni-public-nav a { position: relative; transition: color .15s; }
.ni-public-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--ni-accent); transform: scaleX(0); transition: transform .18s; }
.ni-public-nav a:hover::after { transform: scaleX(1); }
.ni-btn { transition: transform .15s, box-shadow .15s, border-color .15s; }
.ni-btn:hover { transform: translateY(-1px); }
.ni-btn-primary:hover { box-shadow: 0 8px 22px -8px rgba(109,94,252,.6); }
@keyframes ni-hero-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.ni-hero { position: relative; }
.ni-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(109,94,252,.14), transparent 70%); animation: ni-hero-glow 6s ease-in-out infinite; pointer-events: none; }
.ni-hero-inner { position: relative; z-index: 1; }
.ni-hero-badge { animation: ni-hero-glow 4s ease-in-out infinite; }
.ni-hero h1 { background: linear-gradient(135deg, var(--ni-text) 40%, var(--ni-accent)); -webkit-background-clip: text; background-clip: text; }
.ni-hero-stats strong { text-shadow: 0 0 24px rgba(109,94,252,.35); }
.ni-feature-card { transition: transform .18s, border-color .18s, box-shadow .18s; }
.ni-feature-card:hover { transform: translateY(-4px); border-color: rgba(109,94,252,.4); box-shadow: 0 14px 30px -14px rgba(0,0,0,.5); }
.ni-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(109,94,252,.12); color: var(--ni-accent); }
.ni-plan-card { transition: transform .18s, border-color .18s, box-shadow .18s; position: relative; }
.ni-plan-card:hover { transform: translateY(-3px); border-color: rgba(109,94,252,.35); }
.ni-plan-card-popular { border-color: var(--ni-accent); background: linear-gradient(165deg, var(--ni-card) 55%, rgba(109,94,252,.08)); box-shadow: 0 16px 34px -16px rgba(109,94,252,.35); }
.ni-plan-ribbon { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--ni-accent), var(--ni-accent-2)); color: #ffffff; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 4px 12px; border-radius: 20px; white-space: nowrap; box-shadow: 0 4px 14px -4px rgba(109,94,252,.6); }
.ni-pricing-tabs .ni-tab { transition: all .15s; }
.ni-steps-grid { position: relative; }
.ni-step-card { transition: transform .18s, border-color .18s; }
.ni-step-card:hover { transform: translateY(-3px); border-color: rgba(109,94,252,.35); }
.ni-step-num { box-shadow: 0 0 0 4px rgba(109,94,252,.08); }
@media (min-width: 860px) {
.ni-steps-grid { counter-reset: none; }
.ni-steps-grid::before { content: ''; position: absolute; top: 34px; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, transparent, rgba(109,94,252,.35), transparent); z-index: 0; }
.ni-step-card { position: relative; z-index: 1; }
}
.ni-faq-item { transition: background .15s; border-radius: 8px; }
.ni-faq-item summary { transition: color .15s; }
.ni-faq-item:hover summary { color: var(--ni-accent); }
.ni-faq-item[open] { background: rgba(255,255,255,.02); }
.ni-final-cta h2 { background: linear-gradient(135deg, var(--ni-text), var(--ni-accent)); -webkit-background-clip: text; background-clip: text; }
/* Footer grid */
.ni-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; padding: 40px 24px 24px; }
.ni-footer-brand { display: flex; flex-direction: column; gap: 4px; }
.ni-footer-col-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ni-text); margin-bottom: 10px; }
.ni-footer-col { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.ni-footer-col a { color: var(--ni-muted); text-decoration: none; }
.ni-footer-col a:hover { color: var(--ni-accent); }
.ni-footer-bottom { border-top: 1px solid var(--ni-border); padding: 16px 24px 0; margin-top: 8px; font-size: 12.5px; color: var(--ni-muted); }
.ni-public-footer { padding: 0 0 24px; }
@media (max-width: 720px) {
.ni-footer-grid { grid-template-columns: 1fr; padding: 32px 20px 16px; }
}
/* Global session-expiry banner (see assets/js/panel.js handleSessionExpired) */
.ni-session-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999999;
background: #dc4a4a;
color: #fff;
text-align: center;
font-size: 14px;
font-weight: 600;
padding: 12px 16px;
box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
/* Submit URLs — bulk file upload (CSV / TXT / Excel) */
.ni-file-upload-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 16px; }
.ni-file-upload-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ni-file-upload-status { font-size: 13px; }
.ni-file-upload-status.ni-text-error { color: var(--ni-red); }
.ni-file-upload-status.ni-text-success { color: var(--ni-green); }
/* ================================================================
Redesign pass — shared component upgrades, trust-layer visuals,
mobile drawer nav, skeleton loaders, accessibility fixes.
Additive only: every rule below extends what's already above,
nothing existing is removed or overridden destructively.
================================================================ */
/* ---- New tokens (evolve, don't replace) ---- */
.ni-panel, .ni-public {
--ni-data-blue: #5b9dff;
--ni-data-purple: #b585ff;
--ni-tag-red-text: #ff8f8a; /* badge/tag context only — base --ni-red stays for icons/borders/large text */
--ni-motion-fast: 120ms;
--ni-motion-base: 180ms;
/* Instant Indexing's brand accent — warm amber, deliberately far from
the cool indigo/violet used for Normal everywhere else, so the two
modes stay instantly (no pun intended) distinguishable at a glance
across badges, buttons, charts and stat cards without needing a
label. Kept as tokens (not hardcoded hex) so retheming only needs
to happen once, here. */
--ni-instant: #f0a020;
--ni-instant-2: #f7c948;
--ni-instant-rgb: 240, 160, 32;
--ni-instant-text: #ffb84d; /* lighter variant for small text-on-tint (badges) — same contrast fix as --ni-tag-red-text above */
--ni-instant-ink: #241600; /* dark text used ON solid amber surfaces (buttons) */
--ni-gradient-instant: linear-gradient(135deg, var(--ni-instant), var(--ni-instant-2));
/* Third-party brand colors — used only for the "talk to us to pay"
WhatsApp/Telegram buttons (Buy Credits page + post-order screen).
Deliberately the real WhatsApp/Telegram brand colors, not the
site's own accent, so these buttons read as "opens WhatsApp/
Telegram" at a glance rather than looking like another in-app
action. */
--ni-whatsapp: #25D366;
--ni-whatsapp-rgb: 37, 211, 102;
--ni-telegram: #29A9EA;
--ni-telegram-rgb: 41, 169, 234;
/* Normal Indexing's own accent (cool blue) — the counterpart to
--ni-instant's warm amber, same text-on-tint pattern: the -rgb
triplet for translucent badge/card backgrounds, -text for the
readable brighter variant used as actual text color on those
tinted backgrounds. */
--ni-normal-rgb: 26, 86, 219;
--ni-normal-text: #6ea8fe;
/* Shared "warning/trial" amber — semantically distinct from
--ni-instant even though both are warm tones: this one means
"heads up" (low balance, trial credits), not "this is the
Instant Indexing brand color". */
--ni-warning: #f2a93b;
--ni-warning-rgb: 240, 169, 59;
/* shared with .ni-panel's own declaration so .ni-public (which is a
separate root, not nested inside .ni-panel) gets the same brand
tokens on the homepage / login / register screens */
--ni-card-2: #141d31;
--ni-accent-rgb: 109, 94, 252;
--ni-accent-2-rgb: 168, 85, 247;
--ni-green-rgb: 45, 212, 167;
--ni-red-rgb: 249, 109, 109;
--ni-font-display: 'Sora', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
--ni-font-body: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
--ni-shadow-sm: 0 2px 10px -4px rgba(2, 4, 10, .5);
--ni-shadow-md: 0 14px 34px -18px rgba(2, 4, 10, .65);
--ni-shadow-glow: 0 10px 28px -10px rgba(var(--ni-accent-rgb), .45);
--ni-gradient-brand: linear-gradient(135deg, var(--ni-accent), var(--ni-accent-2));
}
.ni-public { font-family: var(--ni-font-body); }
/* ---- Accessibility fix: red badge text was failing contrast at 11px on its own tint background ---- */
.ni-tag-red { color: var(--ni-tag-red-text); }
/* ---- Accessibility fix: focus ring was ~1.7:1, invisible — now a solid border swap + a stronger glow ---- */
.ni-input:focus, .ni-textarea:focus, select.ni-input:focus {
outline: none;
border-color: var(--ni-accent);
box-shadow: 0 0 0 3px rgba(109,94,252, .55);
}
.ni-panel a:focus-visible, .ni-public a:focus-visible,
.ni-btn:focus-visible, button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(109,94,252, .55);
border-radius: 6px;
}
/* ---- Cards: rest → hover elevation (previously flat, only plan/feature cards had this) ---- */
.ni-card {
transition: transform var(--ni-motion-base) ease, border-color var(--ni-motion-base) ease, box-shadow var(--ni-motion-base) ease;
}
.ni-card:hover {
border-color: rgba(109,94,252, .22);
box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .55);
}
/* ---- Stat cards: previously dead, no hover at all ---- */
.ni-stat {
transition: transform var(--ni-motion-base) ease, border-color var(--ni-motion-base) ease, box-shadow var(--ni-motion-base) ease;
position: relative;
}
.ni-stat:hover {
transform: translateY(-3px);
border-color: rgba(109,94,252, .3);
box-shadow: 0 14px 26px -16px rgba(0, 0, 0, .5);
}
/* ---- Table rows: hover highlight so the row is visually scannable ---- */
.ni-table tbody tr {
transition: background var(--ni-motion-fast) ease;
}
.ni-table tbody tr:hover {
background: rgba(255, 255, 255, .035);
}
/* ---- Button variants: secondary / ghost / destructive ---- */
.ni-btn-secondary { background: transparent; border: 1px solid var(--ni-accent); color: var(--ni-accent); }
.ni-btn-secondary:hover { background: rgba(109,94,252, .1); }
/* ---- Badges/pills: consistent 999px shape + status-color law
(green = success/active/secure, amber = pending/waiting, red =
failed/rejected, blue = info/instant — never reused for anything else) ---- */
.ni-badge, .ni-tag { border-radius: 999px; }
.ni-tag-refund { background: rgba(45,212,167, .15); color: var(--ni-green); font-weight: 700; }
/* ---- Empty states ---- */
.ni-empty { text-align: center; padding: 44px 20px; color: var(--ni-muted); }
.ni-empty-icon { width: 42px; height: 42px; margin: 0 auto 12px; opacity: .55; color: var(--ni-accent); }
.ni-empty p { margin: 0 0 14px; font-size: 13.5px; }
.ni-empty strong { color: var(--ni-text); }
/* ---- Skeleton loaders (replace literal "Loading…" text) ---- */
@keyframes ni-skeleton-shimmer {
0% { background-position: -200px 0; }
100% { background-position: calc(200px + 100%) 0; }
}
.ni-skel {
display: block;
border-radius: 6px;
background: linear-gradient(90deg, rgba(255,255,255,.045) 25%, rgba(255,255,255,.09) 37%, rgba(255,255,255,.045) 63%);
background-size: 400px 100%;
animation: ni-skeleton-shimmer 1.4s ease-in-out infinite;
}
.ni-skel-row { height: 44px; margin-bottom: 8px; }
.ni-skel-stat { height: 76px; border-radius: var(--ni-radius); }
/* ---- Trust layer: order reference chip, refund tag, running-balance emphasis ---- */
.ni-order-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--ni-border); border-radius: 6px; padding: 3px 8px; }
.ni-trust-line { font-size: 12px; color: var(--ni-muted); display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.ni-trust-line svg { color: var(--ni-green); flex-shrink: 0; }
/* ---- Mobile topbar + hamburger + slide-in drawer nav ---- */
.ni-mobile-topbar { display: none; }
.ni-hamburger-btn {
display: none;
flex-direction: column;
justify-content: center;
gap: 4px;
width: 44px;
height: 44px;
background: var(--ni-card);
border: 1px solid var(--ni-border);
border-radius: 8px;
cursor: pointer;
padding: 0;
flex-shrink: 0;
}
.ni-hamburger-btn span { display: block; width: 18px; height: 2px; margin: 0 auto; background: var(--ni-text); border-radius: 2px; transition: transform var(--ni-motion-base) ease, opacity var(--ni-motion-fast) ease; }
.ni-drawer-overlay { display: none; }
@media (max-width: 860px) {
.ni-mobile-topbar { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; background: var(--ni-panel); border-bottom: 1px solid var(--ni-border); }
.ni-mobile-topbar .ni-brand { margin: 0; }
.ni-mobile-topbar .ni-logo-img { height: 24px; }
.ni-hamburger-btn { display: flex; }
/* Sidebar becomes an off-canvas drawer instead of the old wrapping-row nav */
.ni-sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000; width: 260px; max-width: 82vw; flex: none; transform: translateX(-100%); transition: transform var(--ni-motion-base) ease; box-shadow: 20px 0 50px -20px rgba(0,0,0,.6); flex-direction: column; flex-wrap: nowrap; }
.ni-sidebar .ni-brand { flex: none; }
.ni-sidebar .ni-nav { flex-direction: column; flex-wrap: nowrap; }
.ni-sidebar-open .ni-sidebar { transform: translateX(0); }
.ni-drawer-overlay { display: block; position: fixed; inset: 0; background: rgba(4, 8, 18, .55); opacity: 0; pointer-events: none; transition: opacity var(--ni-motion-base) ease; z-index: 999; }
.ni-sidebar-open .ni-drawer-overlay { opacity: 1; pointer-events: auto; }
.ni-sidebar-open .ni-hamburger-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ni-sidebar-open .ni-hamburger-btn span:nth-child(2) { opacity: 0; }
.ni-sidebar-open .ni-hamburger-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}
/* ================================================================
Aurora polish pass — brand accent bars, entrance motion, glass
surfaces, chip icons. Additive only; nothing above is removed.
Entrance animation uses fill-mode:backwards (not both/forwards)
specifically so it never fights the transform-based :hover
states already defined on .ni-stat / .ni-feature-card /
.ni-step-card / .ni-plan-card once the one-time load-in finishes.
================================================================ */
@keyframes ni-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.ni-card, .ni-stat { position: relative; overflow: hidden; }
.ni-card::before, .ni-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--ni-gradient-brand); opacity: .5; }
.ni-stat, .ni-card, .ni-feature-card, .ni-step-card, .ni-plan-card, .ni-auth-card, .ni-blog-card {
animation: ni-fade-up .5s cubic-bezier(.2,.7,.3,1) backwards;
}
.ni-stats-grid > .ni-stat:nth-child(2), .ni-features-grid > .ni-feature-card:nth-child(2), .ni-steps-grid > .ni-step-card:nth-child(2), .ni-plan-grid > .ni-plan-card:nth-child(2), .ni-main > .ni-card:nth-of-type(2), .ni-blog-grid > .ni-blog-card:nth-child(2) { animation-delay: .05s; }
.ni-stats-grid > .ni-stat:nth-child(3), .ni-features-grid > .ni-feature-card:nth-child(3), .ni-steps-grid > .ni-step-card:nth-child(3), .ni-plan-grid > .ni-plan-card:nth-child(3), .ni-main > .ni-card:nth-of-type(3), .ni-blog-grid > .ni-blog-card:nth-child(3) { animation-delay: .10s; }
.ni-stats-grid > .ni-stat:nth-child(4), .ni-features-grid > .ni-feature-card:nth-child(4), .ni-steps-grid > .ni-step-card:nth-child(4), .ni-plan-grid > .ni-plan-card:nth-child(4), .ni-main > .ni-card:nth-of-type(4), .ni-blog-grid > .ni-blog-card:nth-child(4) { animation-delay: .15s; }
.ni-stats-grid > .ni-stat:nth-child(5), .ni-features-grid > .ni-feature-card:nth-child(5), .ni-plan-grid > .ni-plan-card:nth-child(5), .ni-blog-grid > .ni-blog-card:nth-child(5) { animation-delay: .20s; }
.ni-stats-grid > .ni-stat:nth-child(6), .ni-features-grid > .ni-feature-card:nth-child(6), .ni-plan-grid > .ni-plan-card:nth-child(6), .ni-blog-grid > .ni-blog-card:nth-child(6) { animation-delay: .25s; }
/* ---- Glass surfaces for chrome that stays on screen while content scrolls ---- */
.ni-sidebar, .ni-mobile-topbar { background: rgba(13,20,32,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* ---- Empty-state icon gets a soft brand chip instead of a flat glyph ---- */
.ni-empty-icon { display: flex; align-items: center; justify-content: center; background: rgba(var(--ni-accent-rgb), .1); border-radius: 50%; opacity: 1; }
/* ================================================================
Blog, article & 404 — reuse the same ni-public design tokens/
type system as the homepage so these new pages feel native to
the rest of the branded site, not bolted on.
================================================================ */
/* ---- Blog listing grid ---- */
.ni-blog-list { padding: 20px 0 70px; }
.ni-blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.ni-blog-card { display: flex; flex-direction: column; background: var(--ni-card); border: 1px solid var(--ni-border); border-radius: var(--ni-radius); overflow: hidden; text-decoration: none; color: var(--ni-text); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.ni-blog-card:hover { transform: translateY(-4px); border-color: rgba(var(--ni-accent-rgb), .4); box-shadow: var(--ni-shadow-md); }
.ni-blog-thumb { aspect-ratio: 16/9; background: linear-gradient(135deg, rgba(var(--ni-accent-rgb),.16), rgba(var(--ni-accent-2-rgb),.10)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ni-blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ni-blog-thumb-fallback { font-size: 34px; opacity: .7; }
.ni-blog-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ni-blog-meta { font-size: 11.5px; color: var(--ni-muted); font-weight: 600; display: flex; gap: 6px; }
.ni-blog-card-body h3 { font-family: var(--ni-font-display); font-size: 16.5px; margin: 0; line-height: 1.35; }
.ni-blog-excerpt { font-size: 13.5px; color: var(--ni-muted); line-height: 1.55; margin: 0; flex: 1; }
.ni-blog-readmore { font-size: 12.5px; font-weight: 700; color: var(--ni-accent); margin-top: 4px; }
.ni-blog-pager { justify-content: center; margin-top: 36px; }
/* ---- Single article ---- */
.ni-article { padding: 44px 0 24px; }
.ni-article-inner { max-width: 760px; }
.ni-article-back { display: inline-block; color: var(--ni-accent); text-decoration: none; font-size: 13px; font-weight: 700; margin-bottom: 22px; }
.ni-article-back:hover { text-decoration: underline; }
.ni-article-meta { font-size: 12.5px; color: var(--ni-muted); font-weight: 600; display: flex; gap: 6px; margin-bottom: 10px; }
.ni-article-title { font-family: var(--ni-font-display); font-weight: 800; font-size: 32px; line-height: 1.2; letter-spacing: -.015em; margin: 0 0 24px; }
.ni-article-cover { border-radius: var(--ni-radius); overflow: hidden; margin-bottom: 28px; border: 1px solid var(--ni-border); }
.ni-article-cover img { width: 100%; display: block; }
/* Prose typography for arbitrary post content (the_content()) */
.ni-article-content { font-size: 15.5px; line-height: 1.75; color: var(--ni-text); }
.ni-article-content > * + * { margin-top: 1.1em; }
.ni-article-content h2 { font-family: var(--ni-font-display); font-size: 23px; font-weight: 700; letter-spacing: -.01em; margin-top: 1.8em; }
.ni-article-content h3 { font-family: var(--ni-font-display); font-size: 19px; font-weight: 700; margin-top: 1.6em; }
.ni-article-content h4 { font-weight: 700; font-size: 16px; margin-top: 1.4em; }
.ni-article-content p { color: var(--ni-text); }
.ni-article-content a { color: var(--ni-accent); text-decoration: underline; text-decoration-color: rgba(var(--ni-accent-rgb),.4); text-underline-offset: 2px; }
.ni-article-content a:hover { text-decoration-color: var(--ni-accent); }
.ni-article-content ul, .ni-article-content ol { padding-left: 1.4em; color: var(--ni-text); }
.ni-article-content li + li { margin-top: .4em; }
.ni-article-content blockquote { margin: 0; padding: 4px 20px; border-left: 3px solid var(--ni-accent); background: rgba(var(--ni-accent-rgb), .06); border-radius: 0 10px 10px 0; color: var(--ni-muted); font-style: italic; }
.ni-article-content img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--ni-border); }
.ni-article-content figcaption { font-size: 12.5px; color: var(--ni-muted); text-align: center; margin-top: 6px; }
.ni-article-content code { background: var(--ni-bg); border: 1px solid var(--ni-border); border-radius: 5px; padding: 2px 6px; font-size: .88em; font-family: 'SFMono-Regular', Consolas, Menlo, monospace; }
.ni-article-content pre { background: var(--ni-bg); border: 1px solid var(--ni-border); border-radius: 10px; padding: 16px 18px; overflow-x: auto; }
.ni-article-content pre code { background: none; border: none; padding: 0; }
.ni-article-content hr { border: none; border-top: 1px solid var(--ni-border); }
.ni-article-content table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; font-size: 14px; }
.ni-article-content th, .ni-article-content td { border: 1px solid var(--ni-border); padding: 8px 10px; text-align: left; }
.ni-article-content th { background: var(--ni-card); font-weight: 700; }
.ni-article-pages { margin-top: 24px; font-size: 13px; color: var(--ni-muted); }
/* ---- 404 ---- */
.ni-404-wrap { max-width: 640px; margin: 0 auto; padding: 90px 24px 100px; text-align: center; }
.ni-404-code { font-family: var(--ni-font-display); font-weight: 800; font-size: 92px; line-height: 1; letter-spacing: -.03em; background: var(--ni-gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 8px; }
.ni-404-wrap h1 { font-family: var(--ni-font-display); font-size: 26px; font-weight: 700; margin: 0 0 10px; }
@media (max-width: 480px) {
.ni-404-wrap { padding: 56px 20px 64px; }
.ni-404-code { font-size: 64px; }
.ni-404-wrap h1 { font-size: 21px; }
}
/* ---- Motion respect: users who've asked for reduced motion get it, everywhere ---- */
@media (prefers-reduced-motion: reduce) {
.ni-panel *, .ni-public * {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
/* ===== Normal / Instant dual credit pools — sidebar, badges, buttons ===== */
.ni-user-balances { display: flex; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.ni-badge-mode-normal { background: rgba(var(--ni-normal-rgb),.15); color: var(--ni-normal-text); }
.ni-badge-mode-instant { background: rgba(var(--ni-instant-rgb), .16); color: var(--ni-instant-text); }
.ni-nav-instant { position: relative; }
.ni-nav-offbadge { margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(var(--ni-red-rgb), .18); color: var(--ni-red); padding: 2px 6px; border-radius: 999px; }
.ni-nav-disabled { opacity: .55; }
.ni-btn-instant { position: relative; background: var(--ni-gradient-instant); color: var(--ni-instant-ink); border: none; font-weight: 700; box-shadow: 0 10px 28px -10px rgba(var(--ni-instant-rgb), .5); }
.ni-btn-instant:hover { filter: brightness(1.06); }
.ni-btn-instant:disabled { filter: grayscale(.5); }
/* Two-row dashboard stat sections (Normal / Instant) */
.ni-section-title { font-family: var(--ni-font-display); font-size: 15px; font-weight: 700; margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
.ni-stats-grid-normal .ni-stat { border-color: rgba(var(--ni-normal-rgb), .3); }
.ni-stats-grid-instant .ni-stat { border-color: rgba(var(--ni-instant-rgb), .35); }
.ni-stat-instant .ni-stat-icon { background: rgba(var(--ni-instant-rgb), .16); color: var(--ni-instant-text); }
.ni-stat-instant .ni-stat-value { color: var(--ni-instant-text); }
.ni-stat-normal .ni-stat-icon { background: rgba(var(--ni-normal-rgb),.14); color: var(--ni-normal-text); }
.ni-stat-normal .ni-stat-value { color: var(--ni-normal-text); }
.ni-stats-grid-2 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
/* Quick Submit — two clearly separate mode buttons instead of one toggle */
.ni-quick-submit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
@media (max-width: 640px) { .ni-quick-submit-row { grid-template-columns: 1fr; } }
/* Split 7-day charts — same SVG structure/classes as the original
single chart; the .ni-chart-instant wrapper class (added in JS,
see renderTrendChart's `variant` param) just overrides stroke/fill
color so Normal and Instant are visually distinguishable even
though both charts render the same gradient id. */
.ni-chart-instant .ni-chart-line { stroke: var(--ni-instant); }
.ni-chart-instant .ni-chart-dot { stroke: var(--ni-instant); }
.ni-chart-instant .ni-chart-fill-top { stop-color: var(--ni-instant-2); }
.ni-chart-instant .ni-chart-fill-bottom { stop-color: var(--ni-instant); }
/* Mode-locked Submit page */
.ni-mode-balance { color: inherit; }
.ni-instant-down-card { text-align: center; padding: 48px 24px; }
.ni-instant-down-icon { font-size: 48px; margin-bottom: 10px; filter: drop-shadow(0 0 16px rgba(var(--ni-instant-rgb), .55)); }
.ni-instant-down-card h2 { font-family: var(--ni-font-display); margin: 6px 0; }
.ni-instant-down-card .ni-btn { margin-top: 16px; }
/* Buy Credits — dual balance chips + Instant plan card accent */
.ni-buy-balances { display: flex; gap: 8px; }
.ni-plan-card-instant { border-color: rgba(var(--ni-instant-rgb), .4); }
.ni-plan-card-instant .ni-plan-price { color: var(--ni-instant-text); }
/* Confirmation popup shown before every submission (req: quick-submit
confirm alert; Instant requires an explicit tick before Confirm
enables). Plain overlay + centered card — no dependency on any
modal library. */
.ni-modal-overlay { position: fixed; inset: 0; background: rgba(6,10,20,.66); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 16px; }
.ni-modal { background: var(--ni-card); border: 1px solid var(--ni-border); border-radius: var(--ni-radius); padding: 26px; max-width: 380px; width: 100%; text-align: center; box-shadow: 0 24px 60px -20px rgba(0,0,0,.55); animation: ni-modal-in .18s ease; }
.ni-modal:focus { outline: none; } /* programmatic focus target for assistive tech only (tabindex="-1") — real focus rings still show on the buttons/checkbox inside, via the global :focus-visible rule */
@keyframes ni-modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.ni-modal-icon { font-size: 32px; margin-bottom: 6px; }
.ni-modal h3 { font-family: var(--ni-font-display); margin: 4px 0 6px; }
.ni-modal-instant .ni-modal-icon { filter: drop-shadow(0 0 14px rgba(var(--ni-instant-rgb), .6)); }
.ni-modal-tick { display: flex; align-items: center; gap: 8px; text-align: left; font-size: 12.5px; background: rgba(var(--ni-instant-rgb), .1); border: 1px solid rgba(var(--ni-instant-rgb), .35); border-radius: 8px; padding: 10px 12px; margin: 14px 0 4px; cursor: pointer; }
.ni-modal-tick input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--ni-instant); }
.ni-modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.ni-modal-actions .ni-btn { flex: 1; margin-top: 0; }
.ni-modal-actions .ni-btn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 640px) {
.ni-buy-balances { flex-wrap: wrap; }
}
/* ===== "Talk to us to pay" — WhatsApp / Telegram (no payment gateway yet) ===== */
.ni-btn-whatsapp, .ni-btn-telegram {
color: #fff;
border: none;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 9px;
}
.ni-btn-email {
display: inline-flex;
align-items: center;
gap: 9px;
}
.ni-btn-whatsapp { background: var(--ni-whatsapp); box-shadow: 0 10px 24px -10px rgba(var(--ni-whatsapp-rgb), .45); }
.ni-btn-whatsapp:hover { filter: brightness(1.08); box-shadow: 0 12px 28px -8px rgba(var(--ni-whatsapp-rgb), .55); color: #fff; }
.ni-btn-telegram { background: var(--ni-telegram); box-shadow: 0 10px 24px -10px rgba(var(--ni-telegram-rgb), .45); }
.ni-btn-telegram:hover { filter: brightness(1.08); box-shadow: 0 12px 28px -8px rgba(var(--ni-telegram-rgb), .55); color: #fff; }
/* Buy Credits page banner */
.ni-contact-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
background: linear-gradient(135deg, rgba(var(--ni-whatsapp-rgb), .1), rgba(var(--ni-telegram-rgb), .1));
border: 1px solid var(--ni-border);
border-radius: var(--ni-radius);
padding: 18px 22px;
margin: 14px 0 20px;
}
.ni-contact-banner-text { display: flex; flex-direction: column; gap: 3px; max-width: 480px; }
.ni-contact-banner-text strong { font-family: var(--ni-font-display); font-size: 15px; letter-spacing: -.01em; }
.ni-contact-banner .ni-contact-btn-row { flex-shrink: 0; margin: 0; }
.ni-contact-banner .ni-contact-btn-row .ni-btn { padding: 11px 20px; }
/* Post-order "How to pay" card + Buy Credits banner + Indexing page balance card */
.ni-contact-btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; }
.ni-contact-btn-row .ni-btn { margin-top: 0; }
.ni-contact-btn-row-stack { flex-direction: column; }
.ni-contact-btn-row-stack .ni-btn { justify-content: center; }
@media (max-width: 560px) {
.ni-contact-banner { flex-direction: column; align-items: stretch; text-align: center; }
.ni-contact-banner-text { max-width: none; align-items: center; }
.ni-contact-banner .ni-contact-btn-row { justify-content: center; }
.ni-contact-btn-row .ni-btn { flex: 1 1 auto; justify-content: center; }
}
/* Buy Credits — Normal and Instant plans both shown on the same page,
one section below the other, with no tab/click needed to switch
between them. */
.ni-plan-section { margin-bottom: 30px; }
.ni-plan-section:last-of-type { margin-bottom: 20px; }
.ni-plan-section-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ni-plan-section-title { font-family: var(--ni-font-display); font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
@media (max-width: 480px) {
.ni-plan-section-head { flex-direction: column; gap: 2px; }
}