/* =========================================================
   NIMBU — PREMIUM UI SYSTEM
   Themes: Default / Snow / Aurora / Sunset
   Compatible with existing NIMBU HTML and JavaScript
   ========================================================= */

/* ---------- THEME VARIABLES ---------- */

:root {
  color-scheme: dark;
  --bg: #0b0c16;
  --panel: #141626;
  --line: #292b45;
  --text: #f2f2ff;
  --muted: #a4a7c5;
  --accent: #8985ff;
  --accent2: #c2a3ff;
  --on: #0e0f1a;
  --r: 18px;

  --surface: rgba(255,255,255,.035);
  --surface-hover: rgba(255,255,255,.065);
  --shadow: 0 14px 42px rgba(0,0,0,.20);
  --shadow-hover: 0 22px 55px rgba(0,0,0,.29);
  --glow: 0 0 28px color-mix(in srgb, var(--accent) 15%, transparent);
  --focus: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
  --speed: .24s;
}

[data-theme="snow"] {
  color-scheme: light;
  --bg: #f5f6fb;
  --panel: #ffffff;
  --line: #e1e4ee;
  --text: #191b29;
  --muted: #656b7e;
  --accent: #4358df;
  --accent2: #7584ff;
  --on: #ffffff;

  --surface: rgba(36,45,90,.025);
  --surface-hover: rgba(36,45,90,.055);
  --shadow: 0 12px 36px rgba(32,42,85,.07);
  --shadow-hover: 0 20px 45px rgba(32,42,85,.13);
}

[data-theme="aurora"] {
  color-scheme: dark;
  --bg: #061124;
  --panel: #0c1c35;
  --line: #1b3658;
  --text: #e9f6ff;
  --muted: #96b2d2;
  --accent: #36d9e8;
  --accent2: #a095ff;
  --on: #04101f;

  --surface: rgba(54,217,232,.035);
  --surface-hover: rgba(54,217,232,.075);
  --shadow: 0 14px 42px rgba(0,0,0,.24);
  --shadow-hover: 0 22px 55px rgba(0,0,0,.34);
}

[data-theme="sunset"] {
  color-scheme: light;
  --bg: #fff6eb;
  --panel: #fffdf9;
  --line: #f0dfca;
  --text: #302017;
  --muted: #806653;
  --accent: #e85c42;
  --accent2: #f0a12c;
  --on: #ffffff;

  --surface: rgba(124,65,24,.025);
  --surface-hover: rgba(124,65,24,.055);
  --shadow: 0 12px 36px rgba(118,68,32,.07);
  --shadow-hover: 0 20px 45px rgba(118,68,32,.13);
}

/* ---------- RESET & GLOBAL ---------- */

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(
      ellipse at 50% -18%,
      color-mix(in srgb, var(--accent) 10%, transparent),
      transparent 55%
    ),
    var(--bg);
  color: var(--text);
  font: 16px/1.65 "Avenir Next", "Segoe UI", system-ui, sans-serif;
  letter-spacing: -.012em;
  -webkit-font-smoothing: antialiased;
  transition: background .3s ease, color .3s ease;
}

::selection {
  background: var(--accent);
  color: var(--on);
}

a {
  color: var(--accent);
  text-underline-offset: 4px;
  transition: color var(--speed) ease;
}

a:hover {
  color: var(--accent2);
}

:focus-visible {
  outline: 3px solid var(--accent2);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 8px;
  top: 8px;
  background: var(--panel);
  padding: 10px 14px;
  z-index: 99;
  border-radius: 10px;
}

img, svg {
  max-width: 100%;
}

button, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

/* ---------- TOP NAVIGATION ---------- */

.top {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  padding: 13px clamp(14px, 4vw, 34px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 5px 24px rgba(0,0,0,.035);
}

.logo {
  font: 800 1.65rem/1.2 Georgia, serif;
  letter-spacing: -.04em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--speed), transform var(--speed);
}

.logo:hover {
  color: var(--accent);
  transform: translateY(-1px);
}

.top nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  flex: 1;
  align-items: center;
}

.top nav a {
  position: relative;
  color: var(--muted);
  text-decoration: none;
  padding: 8px 10px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  font-size: .94rem;
  font-weight: 550;
  transition:
    color var(--speed),
    background var(--speed),
    transform var(--speed);
}

.top nav a:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.top nav a:active {
  transform: scale(.97);
}

.themebox {
  font-size: .85rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

/* ---------- INPUTS & BUTTONS ---------- */

select,
input,
textarea,
button,
.btn {
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  min-height: 44px;
  transition:
    background var(--speed),
    border-color var(--speed),
    box-shadow var(--speed),
    transform var(--speed);
}

input,
select,
textarea {
  width: 100%;
  max-width: 100%;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: .78;
}

input:hover,
select:hover,
textarea:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus);
}

button,
.btn {
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 600;
  line-height: 1.35;
}

button:hover,
.btn:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

button:active,
.btn:active {
  transform: translateY(0) scale(.98);
}

button:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.primary {
  background: var(--accent);
  color: var(--on);
  border-color: var(--accent);
  font-weight: 750;
  box-shadow: 0 5px 18px
    color-mix(in srgb, var(--accent) 18%, transparent);
}

.primary:hover {
  background: var(--accent2);
  border-color: var(--accent2);
  color: var(--on);
  box-shadow: var(--glow);
}

.small {
  min-height: 38px;
  padding: 7px 11px;
  font-size: .9rem;
  border-radius: 10px;
}

/* ---------- MAIN LAYOUT ---------- */

main {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(18px, 4vw, 36px) clamp(14px, 4vw, 28px) 54px;
  outline: none;
  animation: nimbuEnter .5s ease both;
}

.hero {
  padding: clamp(25px, 6vw, 62px) 0 20px;
  position: relative;
}

.hero h1 {
  font: 800 clamp(2.15rem, 7vw, 4.3rem)/1.08 Georgia, serif;
  letter-spacing: -.055em;
  margin: 0 0 18px;
  max-width: 14em;
  text-wrap: balance;
}

.hero p {
  color: var(--muted);
  max-width: 40em;
  font-size: clamp(1rem, 2.4vw, 1.13rem);
  line-height: 1.8;
  margin: 0;
}

h2 {
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  line-height: 1.3;
  letter-spacing: -.025em;
  margin: 36px 0 16px;
  font-weight: 750;
}

/* ---------- SEARCH ---------- */

.searchrow {
  display: flex;
  gap: 10px;
  margin: 24px 0 12px;
  align-items: stretch;
}

.searchrow input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding-left: 17px;
  border-radius: 15px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.searchrow button {
  min-height: 52px;
  border-radius: 15px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 12px 0;
}

.chip {
  border-radius: 999px;
  font-size: .9rem;
  min-height: 37px;
  padding: 6px 15px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  transition:
    color var(--speed),
    background var(--speed),
    border-color var(--speed),
    transform var(--speed);
}

.chip:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--surface-hover);
  transform: translateY(-2px);
}

.chip:active {
  transform: scale(.97);
}

/* ---------- TOOL GRID & CARDS ---------- */

.grid {
  display: grid;
  gap: 17px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  align-items: stretch;
}

.card {
  position: relative;
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  background:
    linear-gradient(
      145deg,
      var(--surface-hover),
      transparent 60%
    ),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 19px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  box-shadow: var(--shadow);
  transition:
    transform .28s cubic-bezier(.2,.7,.2,1),
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease;
  animation: cardEnter .45s ease both;
}

.card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 14%;
  right: 14%;
  height: 1px;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent),
    transparent
  );
  transition: opacity .25s ease;
}

.card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
  box-shadow: var(--shadow-hover);
}

.card:hover::before {
  opacity: 1;
}

.card h3 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.card .row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
  padding-top: 10px;
  align-items: center;
}

.card .row button,
.card .row .btn {
  max-width: 100%;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .78rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px 9px;
  color: var(--muted);
  background: var(--surface);
  line-height: 1.5;
}

.badge.price {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  color: var(--accent);
}

/* ---------- FILTERS ---------- */

.filters {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 155px), 1fr));
  margin: 17px 0;
}

.filters input,
.filters select {
  min-width: 0;
  border-radius: 12px;
}

/* ---------- NOTES & EMPTY STATES ---------- */

.note {
  border-left: 4px solid var(--accent2);
  background: var(--panel);
  padding: 13px 16px;
  border-radius: 0 13px 13px 0;
  color: var(--muted);
  font-size: .93rem;
  box-shadow: var(--shadow);
}

.empty {
  text-align: center;
  padding: 52px 16px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--r);
  background: var(--surface);
}

/* ---------- TEXTAREA & TABLES ---------- */

textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  line-height: 1.7;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  display: block;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
}

th,
td {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 11px 13px;
  text-align: left;
  vertical-align: top;
  min-width: 140px;
}

th {
  font-weight: 750;
  background: var(--surface-hover);
}

tr:last-child td {
  border-bottom: 0;
}

th:last-child,
td:last-child {
  border-right: 0;
}

/* ---------- CHAT ---------- */

.chat {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 18px 0;
}

.msg {
  max-width: min(88%, 700px);
  padding: 12px 16px;
  border-radius: 18px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  animation: messageEnter .25s ease both;
  line-height: 1.7;
}

.msg.u {
  align-self: flex-end;
  background: var(--accent);
  color: var(--on);
  border-bottom-right-radius: 5px;
}

.msg.a {
  align-self: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
  box-shadow: var(--shadow);
}

/* ---------- FOOTER ---------- */

footer {
  border-top: 1px solid var(--line);
  padding: 25px 16px;
  color: var(--muted);
  font-size: .88rem;
  max-width: 1120px;
  margin: auto;
  text-align: center;
  line-height: 1.8;
}

.credit {
  text-align: center;
  opacity: .8;
  font-size: 14px;
  margin-top: 8px;
}

/* ---------- TOAST ---------- */

#toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 100;
  max-width: calc(100vw - 28px);
  transform: translate(-50%, 90px);
  opacity: 0;
  background: var(--accent);
  color: var(--on);
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 750;
  font-size: .92rem;
  text-align: center;
  box-shadow: var(--shadow-hover);
  transition:
    transform .3s cubic-bezier(.2,.7,.2,1),
    opacity .3s ease;
  pointer-events: none;
}

#toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* ---------- ANIMATIONS ---------- */

@keyframes nimbuEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes messageEnter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- TABLET ---------- */

@media (min-width: 700px) {
  .hero {
    padding-top: 48px;
  }

  .grid {
    gap: 20px;
  }

  .card {
    padding: 22px;
  }
}

/* ---------- MOBILE ---------- */

@media (max-width: 600px) {
  .top {
    gap: 8px 12px;
    padding: 11px 14px;
  }

  .logo {
    font-size: 1.45rem;
  }

  .top nav {
    order: 3;
    flex-basis: 100%;
    gap: 3px 7px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .top nav::-webkit-scrollbar {
    display: none;
  }

  .top nav a {
    flex-shrink: 0;
    padding: 8px 9px;
    font-size: .88rem;
  }

  .themebox {
    margin-left: auto;
  }

  main {
    padding-top: 18px;
  }

  .hero {
    padding-top: 28px;
  }

  .hero h1 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .searchrow {
    gap: 7px;
  }

  .searchrow input {
    padding: 10px 12px;
  }

  .searchrow button {
    padding: 9px 12px;
  }

  .grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
  }

  .card {
    padding: 17px;
    border-radius: 16px;
  }

  .card:hover {
    transform: translateY(-2px);
  }

  .msg {
    max-width: 94%;
  }
}

@media (max-width: 360px) {
  body {
    font-size: 15px;
  }

  .top {
    padding-left: 10px;
    padding-right: 10px;
  }

  main {
    padding-left: 12px;
    padding-right: 12px;
  }

  .themebox {
    font-size: .78rem;
  }

  .searchrow button {
    padding: 8px;
    font-size: .9rem;
  }

  .card .row {
    gap: 6px;
  }
}

/* ---------- ACCESSIBILITY ---------- */

@media (hover: none) {
  .card:hover {
    transform: none;
  }

  button:hover,
  .btn:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
/* =========================================
NIMBU — ANIMATED LOGIN EXPERIENCE
Works with welcome.html
========================================= */

body:has(#signin),
body:has(#welcome) {
position: relative;
isolation: isolate;
overflow-x: hidden;
}

/* Animated aurora background */
body:has(#signin)::before,
body:has(#welcome)::before {
content: "";
position: fixed;
inset: -30%;
z-index: -2;
pointer-events: none;
background:
radial-gradient(ellipse at 25% 35%,
rgba(137, 117, 255, .24), transparent 35%),
radial-gradient(ellipse at 75% 30%,
rgba(62, 209, 255, .15), transparent 32%),
radial-gradient(ellipse at 60% 80%,
rgba(187, 93, 255, .18), transparent 35%);
filter: blur(35px);
animation: nimbuAurora 14s ease-in-out infinite alternate;
}

/* Floating glowing orbs */
body:has(#signin)::after,
body:has(#welcome)::after {
content: "";
position: fixed;
width: 240px;
height: 240px;
top: 12%;
right: -80px;
z-index: -1;
pointer-events: none;
border-radius: 50%;
background: rgba(137, 117, 255, .12);
filter: blur(35px);
animation: nimbuFloat 8s ease-in-out infinite;
}

/* Login form entrance */
#signin,
#welcome {
animation: nimbuLoginEnter .8s cubic-bezier(.2,.8,.2,1) both;
}

/* Inputs */
#signin input,
#welcome input {
transition:
border-color .25s ease,
box-shadow .25s ease,
transform .25s ease;
}

#signin input:focus,
#welcome input:focus {
transform: translateY(-1px);
box-shadow:
0 0 0 4px rgba(137,117,255,.13),
0 0 24px rgba(137,117,255,.10);
}

/* Animated login buttons */
#signin button,
#welcome button {
position: relative;
overflow: hidden;
transition:
transform .2s ease,
box-shadow .25s ease,
filter .25s ease;
}

#signin button:hover,
#welcome button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(137,117,255,.20);
filter: brightness(1.08);
}

#signin button:active,
#welcome button:active {
transform: scale(.97);
}

/* Gentle glow around form containers */
#signin,
#welcome {
border-radius: 22px;
transition: box-shadow .3s ease, border-color .3s ease;
}

#signin:hover,
#welcome:hover {
box-shadow: 0 18px 55px rgba(0,0,0,.15);
}

/* Keyframes */
@keyframes nimbuAurora {
0% {
transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1);
}
50% {
transform: translate3d(3%, 2%, 0) rotate(8deg) scale(1.08);
}
100% {
transform: translate3d(-2%, 4%, 0) rotate(-5deg) scale(1.02);
}
}

@keyframes nimbuFloat {
0%, 100% {
transform: translate(0, 0) scale(1);
}
50% {
transform: translate(-45px, 65px) scale(1.2);
}
}

@keyframes nimbuLoginEnter {
from {
opacity: 0;
transform: translateY(22px) scale(.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}

/* Respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
body:has(#signin)::before,
body:has(#welcome)::before,
body:has(#signin)::after,
body:has(#welcome)::after,
#signin,
#welcome {
animation: none !important;
}
}
/* ===== NIMBU: logos, motion, search suggestions, stats ===== */

/* scroll-reveal cards */
#app .card.reveal{opacity:0;animation:none}
#app .card.reveal.in{opacity:1;animation:revealUp .55s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:var(--d,0ms)}
#app .card.reveal.in.instant{animation:none}
@keyframes revealUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* page entrance (plays once per page) */
#app.enter > h1,#app.enter > h2{animation:nimbuEnter .5s ease both}
#app.enter .hero h1{animation:nimbuEnter .6s ease both}
#app.enter .hero p{animation:nimbuEnter .6s .08s ease both}
#app.enter .hero .searchrow{animation:nimbuEnter .6s .16s ease both}
#app.enter .hero .chips{animation:nimbuEnter .6s .24s ease both}
#app.enter .stats{animation:nimbuEnter .6s .32s ease both}

/* animated headline */
.hero h1 .grad{background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:200% center}}

/* logos */
.cardhead{display:flex;align-items:center;gap:12px}
.dhead{display:flex;align-items:center;gap:14px}
.cmphead{display:flex;align-items:center;gap:10px}
.tlogo{position:relative;flex:none;width:44px;height:44px;border-radius:12px;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-hover);border:1px solid var(--line);transition:transform var(--speed) ease}
.tlogo.lg{width:60px;height:60px;border-radius:16px}
.tlogo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:7px;background:#fff}
.tlogo-fallback{font-weight:800;font-size:1.15rem;color:var(--accent)}
.card:hover .tlogo{transform:scale(1.08) rotate(-3deg)}

/* search box + live suggestions */
.searchrow .sbox{position:relative;flex:1;min-width:0}
.sugg{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-hover);overflow:hidden}
.sugg[hidden]{display:none}
.sugg a{display:flex;align-items:center;gap:10px;padding:10px 12px;color:var(--text);text-decoration:none}
.sugg a:hover{background:var(--surface-hover)}
.sugg a .tlogo{width:34px;height:34px;border-radius:10px}
.sugg a span:last-child{display:flex;flex-direction:column;line-height:1.3}
.sugg small{color:var(--muted)}
.sugg-empty{padding:12px 14px;color:var(--muted);font-size:.9rem}

/* stats strip */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:22px 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;text-align:center;box-shadow:var(--shadow)}
.stat b{display:block;font:800 1.9rem/1.1 Georgia,serif;color:var(--accent)}
.stat span{color:var(--muted);font-size:.85rem}

/* misc */
.cnt{margin-left:4px;font-size:.78rem;opacity:.7}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
#totop{position:fixed;right:16px;bottom:max(18px,env(safe-area-inset-bottom));z-index:60;width:46px;height:46px;min-height:46px;padding:0;border-radius:50%;opacity:0;transform:translateY(12px);pointer-events:none;background:var(--accent);color:var(--on);border-color:var(--accent);box-shadow:var(--shadow-hover)}
#totop.show{opacity:1;transform:none;pointer-events:auto}
/* ===== NIMBU: audiences, wizard, toolkit, collections, safety, forms ===== */
.aud-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));margin:14px 0}
.aud{display:flex;flex-direction:column;gap:6px;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);color:var(--text);text-decoration:none;box-shadow:var(--shadow);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.aud:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow-hover);color:var(--text)}
.aud .ai{font-size:1.8rem;line-height:1}
.aud small{color:var(--muted);line-height:1.5}
#app.enter .aud{animation:cardEnter .45s ease both}
.audbar{margin:8px 0 26px}
.step{font-weight:750;margin:18px 0 4px}
.optrow{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.opt{border-radius:999px;min-height:40px;padding:6px 15px;background:var(--surface);color:var(--muted)}
.opt[aria-pressed="true"]{background:var(--accent);color:var(--on);border-color:var(--accent);font-weight:750}
.tkbox{width:100%;min-height:220px}
.fgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));margin:12px 0}
.fgrid label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--muted)}
.checklist{list-style:none;padding:0;margin:14px 0;display:grid;gap:10px}
.checklist label{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;cursor:pointer;line-height:1.5}
.checklist input{width:20px;height:20px;min-height:0;margin-top:3px;flex:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formstatus{min-height:22px;margin-top:10px}
.safety{margin:14px 0}
@media print{.top,footer,#toast,#totop,.noprint{display:none!important}}
/* ===== NIMBU Pro ===== */
a.opt{display:inline-flex;align-items:center;text-decoration:none}
.mini{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--text);text-decoration:none;font-weight:700}
.mini .tlogo{width:32px;height:32px;border-radius:50%}
.stack,.steps{list-style:none;margin:16px 0;padding:0;display:grid;gap:12px}
.stack li{display:grid;gap:6px;justify-items:start;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.role{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.stack small{color:var(--muted);line-height:1.5}
.steps li{display:flex;gap:14px;align-items:flex-start;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.num{flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--on);display:flex;align-items:center;justify-content:center;font-weight:800}
.steps p{margin:8px 0}
.prompt{white-space:pre-wrap;background:var(--surface-hover);border:1px solid var(--line);border-radius:12px;padding:12px;margin:8px 0;font:inherit;font-size:.92rem}
#cardbox canvas{display:block;width:100%;max-width:420px;height:auto;margin:14px 0;border-radius:18px;box-shadow:var(--shadow-hover)}
.trow{display:grid;gap:10px;padding:14px;margin:10px 0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.trow .th{display:flex;align-items:center;gap:10px;font-weight:700}
.trow label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--muted)}
.totals{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0}
.totals .stat{flex:1;min-width:140px}
.codeout{width:100%;min-height:90px;font-family:ui-monospace,Menlo,monospace;font-size:.85rem}
.power{margin:8px 0 26px}
#pal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.55);display:flex;align-items:flex-start;justify-content:center;padding:max(60px,env(safe-area-inset-top)) 14px 14px}
#pal[hidden]{display:none}
.pbox{width:100%;max-width:560px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:var(--shadow-hover)}
.pbox input{width:100%}
#pres{display:grid;margin-top:8px;max-height:50vh;overflow:auto}
#pres a{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;color:var(--text);text-decoration:none}
#pres a.on,#pres a:hover{background:var(--surface-hover)}
#pres small{color:var(--muted)}
.phint{display:block;margin-top:8px;font-size:.8rem;color:var(--muted)}
/* ===== NIMBU APP MODE (only when installed as an app) ===== */
#tabbar,#sheet{display:none}
html.is-app{overscroll-behavior-y:none}
html.is-app *{-webkit-tap-highlight-color:transparent}
html.is-app body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
html.is-app header.top{display:flex;align-items:center;gap:10px;padding:10px 14px}
html.is-app header.top nav,html.is-app header.top .themebox,html.is-app .skip{display:none}
html.is-app header.top > button[data-px="lang"]{margin-left:auto}
html.is-app header.top button{min-height:40px}
html.is-app #appback{font-size:1.3rem;min-width:40px;padding:0}
html.is-app #appback[hidden]{display:none}
html.is-app .hero h1{font-size:clamp(2.1rem,9.5vw,2.8rem)}
html.is-app .card:hover{transform:none}
html.is-app .card:active{transform:scale(.985)}
html.is-app .btn:active,html.is-app button:active{transform:scale(.97)}
html.is-app header.top,html.is-app #tabbar,html.is-app .btn,html.is-app button{-webkit-user-select:none;user-select:none}
html.is-app footer{padding-bottom:24px}
html.is-app #totop{bottom:calc(86px + env(safe-area-inset-bottom))}
html.is-app #toast{bottom:calc(94px + env(safe-area-inset-bottom))}
html.is-app.sheet-open{overflow:hidden}

html.is-app #tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--panel);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -6px 24px rgba(0,0,0,.12)}
html.is-app #tabbar a,html.is-app #tabbar button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;min-height:52px;border:0;border-radius:14px;background:none;box-shadow:none;color:var(--muted);text-decoration:none;font:inherit;font-size:.72rem;font-weight:700}
html.is-app #tabbar i{font-style:normal;font-size:1.35rem;line-height:1}
html.is-app #tabbar [aria-current="page"]{color:var(--accent);background:var(--surface-hover)}

html.is-app #sheet{display:block;position:fixed;inset:0;z-index:120}
html.is-app #sheet[hidden]{display:none}
html.is-app .sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.5)}
html.is-app .sheet-box{position:absolute;left:0;right:0;bottom:0;max-height:82vh;overflow:auto;background:var(--panel);border-radius:24px 24px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom));animation:sheetUp .28s ease both}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
html.is-app .grab{width:44px;height:5px;border-radius:99px;background:var(--line);margin:4px auto 14px}
html.is-app .sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
html.is-app .sgrid a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border-radius:16px;background:var(--surface-hover);color:var(--text);text-decoration:none;font-size:.82rem;font-weight:700;text-align:center}
html.is-app .sgrid i{font-style:normal;font-size:1.6rem}
html.is-app .srow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
html.is-app .srow label{display:flex;align-items:center;gap:8px;color:var(--muted)}
/* ===== NIMBU APP MODE v2: drawer, sections, no zoom ===== */
html.is-app,html.is-app body{touch-action:pan-x pan-y;-webkit-text-size-adjust:100%}
html.is-app input,html.is-app select,html.is-app textarea{font-size:16px}
html.is-app.menu-open{overflow:hidden}

html.is-app #menuBtn,html.is-app #appback{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:42px;padding:0;font-size:1.35rem;border-radius:12px}
html.is-app #menuBtn[hidden],html.is-app #appback[hidden]{display:none}

/* drawer */
#drawer{display:none}
html.is-app #drawer{display:block;position:fixed;inset:0;z-index:130}
html.is-app #drawer[hidden]{display:none}
.drawer-bg{position:absolute;inset:0;background:rgba(0,0,0,.5);animation:amFade .2s ease both}
.drawer-box{position:absolute;top:0;bottom:0;left:0;width:min(84vw,340px);overflow:auto;background:var(--panel);padding:max(14px,env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom));box-shadow:var(--shadow-hover);animation:amDrawer .26s cubic-bezier(.2,.8,.2,1) both}
@keyframes amDrawer{from{transform:translateX(-100%)}to{transform:none}}
@keyframes amFade{from{opacity:0}to{opacity:1}}
.d-head{display:flex;align-items:center;justify-content:space-between;font:800 1.35rem Georgia,serif;margin-bottom:6px}
.d-sec{margin:16px 0 4px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800}
.drawer-box a{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:12px;color:var(--text);text-decoration:none;font-weight:650}
.drawer-box a:active,.drawer-box a[aria-current="page"]{background:var(--surface-hover);color:var(--accent)}
.drawer-box a i{font-style:normal;width:26px;text-align:center;font-size:1.15rem}
.d-foot{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.d-foot label{display:flex;align-items:center;gap:8px;color:var(--muted);width:100%}

/* sectioned home page */
html.is-app #app.is-home .hero > p{display:none}
html.is-app #app.is-home .stats{grid-template-columns:repeat(2,1fr)}
html.is-app #app.is-home h2{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:30px 0 12px;padding-top:18px;border-top:1px solid var(--line);font-size:1.15rem}
html.is-app #app.is-home .seeall{font-size:.85rem;font-weight:700;text-decoration:none;color:var(--accent);white-space:nowrap}
html.is-app #app.is-home .aud-grid,html.is-app #app.is-home .chips{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;gap:12px;padding-bottom:6px;margin-right:-14px;scrollbar-width:none}
html.is-app #app.is-home .aud-grid::-webkit-scrollbar,html.is-app #app.is-home .chips::-webkit-scrollbar{display:none}
html.is-app #app.is-home .aud{flex:0 0 68%;max-width:270px;scroll-snap-align:start}
html.is-app #app.is-home .chips > *{flex:0 0 auto;scroll-snap-align:start}
/* ===== NIMBU APP MODE v3: splash, bigger type, app home ===== */
#splash{display:none}
html.is-app #splash{display:flex;position:fixed;inset:0;z-index:9999;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;color:#fff;background:radial-gradient(circle at 50% 38%,#3a2f10 0,#14152a 45%,#0a0b16 100%);transition:opacity .4s ease,transform .4s ease}
html.is-app #splash.out{opacity:0;transform:scale(1.04);pointer-events:none}
html.splash-on{overflow:hidden}
.sp-svg{width:min(74vw,320px);height:auto;overflow:visible}
.sp-lemon{transform-origin:120px 110px;animation:spPop .55s cubic-bezier(.2,.9,.3,1.25) both}
.sp-half{transform-origin:120px 110px}
.sp-top{animation:spTop .5s 1.02s cubic-bezier(.2,.8,.2,1) both}
.sp-bot{animation:spBot .5s 1.02s cubic-bezier(.2,.8,.2,1) both}
.sp-face{opacity:0;animation:spFace .35s 1.05s ease both}
.sp-knife{opacity:0;animation:spKnife .85s .45s linear both}
.sp-cut{stroke-dasharray:176;stroke-dashoffset:176;animation:spCut .39s .63s linear forwards,spGone .2s 1.02s ease forwards}
.sp-drop{opacity:0;animation:spDrop .9s var(--d,1.05s) ease-out both}
.sp-word{font:800 3.1rem/1 Georgia,serif;letter-spacing:-.04em;animation:spRise .6s 1.3s ease both}
.sp-tag{font:700 .72rem/1 system-ui,sans-serif;letter-spacing:.32em;color:#c9ccea;animation:spRise .6s 1.55s ease both}
.sp-bar{position:absolute;left:50%;bottom:max(34px,env(safe-area-inset-bottom));width:120px;height:3px;margin-left:-60px;border-radius:9px;background:rgba(255,255,255,.14);overflow:hidden}
.sp-bar::after{content:"";display:block;height:100%;background:#FFB800;transform:translateX(-100%);animation:spBar 2.5s linear forwards}
@keyframes spPop{from{opacity:0;transform:scale(.5) rotate(-14deg)}to{opacity:1;transform:none}}
@keyframes spTop{to{transform:translateY(-16px) rotate(-4deg)}}
@keyframes spBot{to{transform:translateY(16px) rotate(4deg)}}
@keyframes spFace{from{opacity:0}to{opacity:1}}
@keyframes spKnife{0%{opacity:0;transform:translateX(-40px)}10%{opacity:1;transform:translateX(0)}80%{opacity:1;transform:translateX(280px)}100%{opacity:0;transform:translateX(330px)}}
@keyframes spCut{to{stroke-dashoffset:0}}
@keyframes spGone{to{opacity:0}}
@keyframes spDrop{0%{opacity:0;transform:translate(0,0) scale(.6)}30%{opacity:1;transform:translate(var(--dx,0),-30px) scale(1)}100%{opacity:0;transform:translate(calc(var(--dx,0)*1.7),22px) scale(.8)}}
@keyframes spRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes spBar{to{transform:translateX(0)}}

/* bigger text and touch targets (48px+ with 10px+ gaps) */
html.is-app body{font-size:17px;line-height:1.6;padding-bottom:calc(92px + env(safe-area-inset-bottom))}
html.is-app main{padding:18px 16px 28px}
html.is-app h1{font-size:clamp(1.7rem,7.5vw,2.1rem);line-height:1.2}
html.is-app h2{font-size:1.35rem}
html.is-app p{font-size:1.02rem}
html.is-app button,html.is-app .btn,html.is-app select,html.is-app input,html.is-app textarea{min-height:52px;font-size:1.02rem}
html.is-app .small{min-height:48px;padding:8px 14px;font-size:.98rem}
html.is-app .chip{min-height:48px;padding:8px 18px;font-size:1rem}
html.is-app .chips{gap:10px}
html.is-app .card{padding:20px;gap:12px}
html.is-app .card h3{font-size:1.25rem}
html.is-app .card p{font-size:1.02rem;line-height:1.65}
html.is-app .card .row{gap:10px}
html.is-app .badge{font-size:.85rem;padding:4px 10px}
html.is-app header.top{min-height:62px}
html.is-app header.top button{min-width:48px;min-height:48px}
html.is-app .logo{font-size:1.6rem}
html.is-app #tabbar a,html.is-app #tabbar button{min-height:62px;font-size:.8rem}
html.is-app #tabbar i{font-size:1.6rem}
html.is-app .drawer-box a{min-height:56px;font-size:1.06rem}
html.is-app .d-foot button,html.is-app .d-foot select{min-height:52px}

/* app home */
html.is-app .am-hero{padding:6px 0 4px}
html.is-app .am-greet{margin:0;color:var(--muted);font-weight:700}
html.is-app .am-hero h1{margin:4px 0 16px;font-family:Georgia,serif;letter-spacing:-.03em}
.am-search{display:flex;gap:10px}
.am-search input{flex:1;min-width:0;min-height:56px;border-radius:16px;font-size:1.05rem}
.am-search button{min-width:60px;min-height:56px;border-radius:16px;font-size:1.3rem}
html.is-app .chips.scroll{flex-wrap:nowrap;overflow-x:auto;margin:14px -16px 0;padding:0 16px 6px;scrollbar-width:none}
.chips.scroll::-webkit-scrollbar{display:none}
.chips.scroll>*{flex:0 0 auto}
html.is-app #app.is-home h2.sec{margin:28px 0 12px;padding:0;border:0;font-size:1.3rem}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:104px;padding:16px;border-radius:20px;background:var(--panel);border:1px solid var(--line);color:var(--text);text-decoration:none;box-shadow:var(--shadow);transition:transform .15s ease}
.tile:active{transform:scale(.97)}
.tile .ai{font-size:2rem;line-height:1}
.tile b{font-size:1.08rem}
.hrow{display:flex;gap:12px;overflow-x:auto;margin:0 -16px;padding:2px 16px 8px;scroll-snap-type:x proximity;scrollbar-width:none}
.hrow::-webkit-scrollbar{display:none}
.atile{flex:0 0 150px;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:18px;background:var(--panel);border:1px solid var(--line);color:var(--text);text-decoration:none;box-shadow:var(--shadow)}
.atile b{font-size:1.02rem;line-height:1.3}
.atile small{color:var(--muted)}
.atile .tlogo{width:48px;height:48px;border-radius:14px}
.arows{display:grid;gap:10px}
.arow{display:flex;align-items:center;gap:14px;min-height:72px;padding:14px 16px;border-radius:18px;background:var(--panel);border:1px solid var(--line);color:var(--text);text-decoration:none}
.arow:active{background:var(--surface-hover)}
.arow .ai{font-size:1.7rem;width:40px;text-align:center}
.arow .at{flex:1;display:flex;flex-direction:column}
.arow .at b{font-size:1.08rem}
.arow .at small{color:var(--muted);font-size:.92rem}
.arow>i{font-style:normal;font-size:1.6rem;color:var(--muted)}

/* =====================================
   NIMBU — MOBILE TEXT CONSISTENCY FIX
   ===================================== */

/* Keep sizing predictable */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Consistent default typography */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Make form controls inherit the app's font */
button,
input,
select,
textarea {
  font: inherit;
  -webkit-text-size-adjust: 100%;
}

/* Prevent unexpected text resizing in cards */
.card,
.tool-card,
.quick-card {
  -webkit-text-size-adjust: 100%;
}

/* Improve mobile readability */
@media screen and (max-width: 480px) {
  body {
    font-size: 16px;
  }

  h1 {
    font-size: clamp(1.6rem, 5.5vw, 2rem);
  }

  h2 {
    font-size: clamp(1.25rem, 4.5vw, 1.5rem);
  }

  h3 {
    font-size: clamp(1.05rem, 4vw, 1.2rem);
  }

  button,
  input,
  select,
  textarea {
    font-size: 16px;
  }
}