/* NikoZint app theme: AgentCC light pixel look (19 Oct 2026).
   Drop-in for any NikoZint app: load after the app's own CSS. Fonts are self-hosted in /fonts (no CDN, works in the APK WebView).
   PromptSaver maps its Material --md-* tokens onto the NikoZint palette below. */
@font-face { font-family: 'Pixelify Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/pixelify-sans.woff2') format('woff2'); }
@font-face { font-family: 'Press Start 2P'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/press-start-2p.woff2') format('woff2'); }

:root {
  /* NikoZint palette (same values as AgentCC) */
  --nz-cream: #fffaf3;
  --nz-paper: #ffffff;
  --nz-lav-50: #f6f1ff;
  --nz-lav-100: #ece3ff;
  --nz-lav-200: #dccdfa;
  --nz-lav-300: #c9b6f2;
  --nz-violet: #8e6cd9;
  --nz-violet-dark: #6a4cb8;
  --nz-ink: #3b2d5c;
  --nz-muted: #8a7fa6;
  --nz-gold: #e8c46b;
  --nz-mint: #5cc8a1;
  --nz-red: #e86b7d;
  --nz-px: 3px;
  --nz-font-body: 'Pixelify Sans', system-ui, sans-serif;
  --nz-font-title: 'Press Start 2P', monospace;
  --nz-font-read: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* long text stays easy to read */
  --nz-frame: 0 calc(-1 * var(--nz-px)) 0 0 var(--nz-ink), 0 var(--nz-px) 0 0 var(--nz-ink), calc(-1 * var(--nz-px)) 0 0 0 var(--nz-ink), var(--nz-px) 0 0 0 var(--nz-ink);
  --nz-frame-lift: var(--nz-frame), 0 calc(3 * var(--nz-px)) 0 0 rgba(59, 45, 92, 0.15);

  /* PromptSaver (Material tokens) -> NikoZint */
  --md-primary: var(--nz-violet);
  --md-primary-container: var(--nz-lav-100);
  --md-on-primary: #fff;
  --md-on-primary-container: var(--nz-ink);
  --md-secondary: var(--nz-muted);
  --md-secondary-container: var(--nz-lav-100);
  --md-on-secondary-container: var(--nz-ink);
  --md-background: var(--nz-lav-50);
  --md-surface: var(--nz-paper);
  --md-surface-variant: var(--nz-lav-100);
  --md-surface-container: var(--nz-lav-50);
  --md-surface-container-high: var(--nz-paper);
  --md-on-surface: var(--nz-ink);
  --md-on-surface-variant: var(--nz-muted);
  --md-error: #c2445a;
  --md-error-container: #ffe8ec;
  --md-success: #2f9e78;
  --md-success-container: #e3f7ef;
  --md-outline: var(--nz-lav-200);
  --md-outline-variant: var(--nz-lav-100);
  --chip-blue: var(--nz-lav-100);
  --chip-blue-text: var(--nz-violet-dark);
  --chip-green: #e3f7ef;
  --chip-green-text: #2f7d62;
  --chip-purple: #f3e8fd;
  --chip-purple-text: var(--nz-violet-dark);
  --chip-orange: #fff4d6;
  --chip-orange-text: #9a6a12;
  --font-brand: var(--nz-font-body);
  --font-body: var(--nz-font-body);
  --elevation-1: var(--nz-frame);
  --elevation-2: var(--nz-frame-lift);
  --elevation-3: var(--nz-frame-lift);
  --elevation-4: var(--nz-frame-lift);
  --radius-xs: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-full: 0;
  color-scheme: light;
}

html body {
  font-family: var(--nz-font-body);
  color: var(--nz-ink);
  background-color: var(--nz-lav-50);
  background-image: radial-gradient(var(--nz-lav-200) 1px, transparent 1px), linear-gradient(180deg, var(--nz-cream) 0%, var(--nz-lav-50) 60%, var(--nz-lav-100) 100%);
  background-size: 18px 18px, 100% 100%;
  background-attachment: fixed;
  /* Pixelify's fi/fl ligatures render as one odd glyph */
  font-variant-ligatures: none;
  font-feature-settings: 'liga' 0, 'clig' 0;
}
/* icon fonts NEED ligatures */
.material-symbols-outlined, .material-icons, .material-symbols-rounded {
  font-variant-ligatures: normal !important;
  font-feature-settings: 'liga' 1 !important;
}
button, input, textarea, select { font-family: inherit; }
textarea, .prompt-text-block, .prompt-text, .prompt-preview, [class*='prompt-text'], .auth-input, input[type='email'], input[type='password'] {
  font-family: var(--nz-font-read);
}
::selection { background: var(--nz-lav-200); color: var(--nz-ink); }

/* ---- titles: AgentCC logo style ---- */
.app-title, .login-title, .change-pw-title {
  font-family: var(--nz-font-title) !important;
  font-size: 14px !important;
  letter-spacing: 1px;
  color: var(--nz-violet-dark) !important;
  text-shadow: 2px 2px 0 var(--nz-lav-200);
  line-height: 1.5;
}

/* ---- surfaces get the pixel frame ---- */
.top-app-bar { background: rgba(255, 250, 243, 0.92) !important; backdrop-filter: blur(6px); box-shadow: 0 var(--nz-px) 0 0 var(--nz-ink) !important; }
.bottom-nav, .nav-rail { background: var(--nz-paper) !important; box-shadow: 0 calc(-1 * var(--nz-px)) 0 0 var(--nz-ink) !important; }
.nav-rail { box-shadow: var(--nz-px) 0 0 0 var(--nz-ink) !important; }
.prompt-card, .community-card, [class*='-card']:not(.coin-vault-card *), .dialog-container, .login-card, .user-dropdown, .search-bar {
  border: 0 !important;
  box-shadow: var(--nz-frame-lift) !important;
}
.search-bar { box-shadow: var(--nz-frame) !important; background: var(--nz-paper) !important; }
.dialog-scrim { background: rgba(59, 45, 92, 0.45) !important; }

/* ---- buttons ---- */
.fab {
  background: var(--nz-violet) !important;
  color: #fff !important;
  box-shadow: var(--nz-frame), inset 0 calc(-1 * var(--nz-px)) 0 0 var(--nz-violet-dark), 0 calc(3 * var(--nz-px)) 0 0 rgba(59, 45, 92, 0.2) !important;
}
.fab:active, button:active:not(:disabled) { transform: translateY(2px); }
button[class*='btn-filled'], .btn-primary, .unlock-btn, #authSubmitBtn, #savePromptBtn, .ps-ub-go, #psGuestAskGo {
  background: var(--nz-violet) !important;
  color: #fff !important;
  border-radius: 0 !important;
  box-shadow: var(--nz-frame), inset 0 calc(-1 * var(--nz-px)) 0 0 var(--nz-violet-dark) !important;
}
button[class*='btn-outlined'], .btn-tonal, .btn-secondary {
  border: 0 !important;
  background: var(--nz-paper) !important;
  color: var(--nz-ink) !important;
  box-shadow: var(--nz-frame), inset 0 calc(-1 * var(--nz-px)) 0 0 var(--nz-lav-200) !important;
}
.btn-text { color: var(--nz-violet-dark) !important; }
button:focus-visible, a:focus-visible {
  outline: var(--nz-px) dashed var(--nz-violet) !important;
  outline-offset: 3px;
}

/* ---- chips & nav ---- */
.chip, .filter-chip, [class*='chip']:not(.chip-icon):not([class*='chips']) {
  border-radius: 0 !important;
  box-shadow: 0 0 0 2px var(--nz-ink);
}
.chip.active, .filter-chip.active, .filter-chip.selected, [class*='chip'].active { background: var(--nz-violet) !important; color: #fff !important; }
.nav-item.active .nav-icon, .nav-icon.active, .active > .nav-icon { background: var(--nz-lav-100) !important; box-shadow: 0 0 0 2px var(--nz-ink); }
.coin-pill { box-shadow: 0 0 0 2px var(--nz-ink) !important; background: #fff4d6 !important; }

/* ---- inputs ---- */
input[type='text'], input[type='email'], input[type='password'], input[type='search'], textarea, select, .auth-input, .text-field-wrapper {
  border-radius: 0 !important;
}
.text-field-wrapper, .auth-field input, .auth-input { border-color: var(--nz-ink) !important; }

/* ---- images & avatars ---- */
.user-avatar, .user-dropdown-avatar, .change-photo-preview, [class*='avatar'] img, img[class*='avatar'] { border-radius: 4px !important; box-shadow: 0 0 0 2px var(--nz-ink); }
.prompt-card img, .community-card img { image-rendering: auto; }

/* ---- small extras shared with the AgentCC look ---- */
.snackbar-container > *, .snackbar { border-radius: 0 !important; background: var(--nz-ink) !important; color: #f3eeff !important; box-shadow: var(--nz-frame) !important; }
.ps-ub, #psGuestAsk { border-radius: 0 !important; border: 0 !important; box-shadow: var(--nz-frame-lift) !important; }
.ps-ub-icon { border-radius: 0 !important; box-shadow: 0 0 0 2px var(--nz-ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--nz-lav-300); box-shadow: inset 0 0 0 2px var(--nz-lav-50); }
::-webkit-scrollbar-track { background: transparent; }

input:focus, textarea:focus, select:focus { outline: none !important; }
.search-bar:focus-within, .lc-input:focus, .auth-input:focus, textarea:focus {
  box-shadow: 0 0 0 var(--nz-px) var(--nz-violet) !important;
  border-color: var(--nz-violet) !important;
}

/* ---- let the dot-grid background show (AgentCC) ---- */
.page-layout { background: transparent !important; }
.nav-rail { background: rgba(255, 255, 255, 0.85) !important; }

/* ---- logo tiles: violet pixel tile instead of the blue gradient ---- */
.app-logo, .lc-logo, .login-logo-container, .splash-icon, .change-pw-icon-circle {
  background: var(--nz-violet) !important;
  border-radius: 0 !important;
  animation: none !important;
  box-shadow: var(--nz-frame), inset 0 calc(-1 * var(--nz-px)) 0 0 var(--nz-violet-dark) !important;
}
.app-logo { width: 34px !important; height: 34px !important; margin: var(--nz-px); }

/* ---- login / sign-up ---- */
.login-page { background-color: var(--nz-lav-50) !important; background-image: radial-gradient(var(--nz-lav-200) 1px, transparent 1px), linear-gradient(180deg, var(--nz-cream) 0%, var(--nz-lav-50) 60%, var(--nz-lav-100) 100%) !important; background-size: 18px 18px, 100% 100% !important; }
.login-card.lc-card, .lc-card { border-radius: 0 !important; box-shadow: var(--nz-frame-lift) !important; background: var(--nz-paper) !important; margin: 12px; width: calc(100% - 24px) !important; }
.lc-heading { font-family: var(--nz-font-title) !important; font-size: 1rem !important; color: var(--nz-violet-dark) !important; text-shadow: 2px 2px 0 var(--nz-lav-200); line-height: 1.6 !important; }
.lc-subtext { font-family: var(--nz-font-body) !important; color: var(--nz-muted) !important; }
.lc-field label { font-family: var(--nz-font-body) !important; color: var(--nz-ink) !important; padding-left: 2px !important; text-align: left; }
.lc-input { border-radius: 0 !important; background: var(--nz-lav-50) !important; color: var(--nz-ink) !important; box-shadow: 0 0 0 2px var(--nz-ink) !important; height: 48px !important; }
.lc-input:focus { background: #fff !important; box-shadow: 0 0 0 var(--nz-px) var(--nz-violet) !important; }
.lc-submit { border-radius: 0 !important; font-family: var(--nz-font-body) !important; margin: var(--nz-px); width: calc(100% - 2 * var(--nz-px)) !important; }
.lc-submit-primary { background: var(--nz-violet) !important; color: #fff !important; box-shadow: var(--nz-frame), inset 0 calc(-1 * var(--nz-px)) 0 0 var(--nz-violet-dark) !important; }
.lc-submit-whatsapp { box-shadow: var(--nz-frame), inset 0 calc(-1 * var(--nz-px)) 0 0 #1fa855 !important; }
.lc-social-btn { border-radius: 0 !important; border: 0 !important; background: var(--nz-paper) !important; color: var(--nz-ink) !important; font-family: var(--nz-font-body) !important; box-shadow: var(--nz-frame), inset 0 calc(-1 * var(--nz-px)) 0 0 var(--nz-lav-200) !important; margin: var(--nz-px); width: calc(100% - 2 * var(--nz-px)) !important; }
.lc-toggle, .lc-dev { font-family: var(--nz-font-body) !important; color: var(--nz-muted) !important; }
.lc-toggle a, .lc-dev a, .login-footer a { color: var(--nz-violet-dark) !important; }
.lc-divider::before, .lc-divider::after { background: var(--nz-lav-200) !important; height: 2px !important; }
.lc-bottom-bar, .splash-bottom-bar { display: none !important; }

/* ---- splash (app start) ---- */
.splash-screen { background: linear-gradient(180deg, var(--nz-cream) 0%, var(--nz-lav-50) 60%, var(--nz-lav-100) 100%) !important; color: var(--nz-ink) !important; }
.splash-screen * { color: inherit; }
.splash-btn { border-radius: 0 !important; font-family: var(--nz-font-body) !important; margin: var(--nz-px); }
.splash-btn-primary { background: var(--nz-violet) !important; color: #fff !important; box-shadow: var(--nz-frame), inset 0 calc(-1 * var(--nz-px)) 0 0 var(--nz-violet-dark) !important; }
.splash-btn-secondary { background: var(--nz-paper) !important; color: var(--nz-ink) !important; border: 0 !important; box-shadow: var(--nz-frame) !important; }

/* ---- leftover Material blues ---- */
.btn-filled:hover, .fab:hover, .unlock-btn:hover, .save-community-btn:hover:not(:disabled) { background: var(--nz-violet-dark) !important; }
.btn-outlined:hover, .btn-text:hover, .nav-rail-item:hover { background: var(--nz-lav-50) !important; color: var(--nz-violet-dark) !important; }
.image-upload-area { border-color: var(--nz-lav-300) !important; border-radius: 0 !important; }
.image-upload-area:hover, .image-upload-area.dragover { border-color: var(--nz-violet) !important; background: var(--nz-lav-50) !important; }
.prompt-unlock-overlay { background: rgba(59, 45, 92, 0.55) !important; }
.demo-banner { background: var(--nz-lav-100) !important; color: var(--nz-ink) !important; }
.login-shape-1, .login-shape-2, .login-shape-3, .login-bg-shapes { display: none !important; }
.coin-pill-btn { border-radius: 0 !important; box-shadow: 0 0 0 2px var(--nz-ink) !important; border: 0 !important; }
.vault-topup-btn, .payment-method-btn { border-radius: 0 !important; }
.vault-topup-btn { box-shadow: var(--nz-frame), inset 0 calc(-1 * var(--nz-px)) 0 0 var(--nz-violet-dark) !important; margin: var(--nz-px); }
.nav-badge, .dropdown-badge { border-radius: 0 !important; box-shadow: 0 0 0 2px var(--nz-ink); }

.text-field-wrapper:focus-within { box-shadow: none !important; }
.text-field:focus-within { border-color: var(--nz-violet) !important; box-shadow: 0 0 0 2px var(--nz-violet) !important; }

/* ---- PromptSaver app icon inside the logo tiles (replaces the auto_awesome glyph) ---- */
.app-logo, .lc-logo, .login-logo-container, .splash-icon {
  background: var(--nz-violet) url('/app-logo.png?v=1') center / 100% 100% no-repeat !important;
  image-rendering: pixelated;
}
.app-logo > .material-symbols-outlined, .lc-logo > .material-symbols-outlined, .login-logo-container > .material-symbols-outlined, .splash-icon > .material-symbols-outlined { visibility: hidden; }