/* ===== Sunlight theme – soft yellow light background, dark readable text, gently animated =====
   Layered over app.css: change the look here without touching the layout rules. */
:root{
  --bg:#fffdf3;--bg-soft:#fffae6;--bg-tint:#fff6d1;
  --ink:#2b2205;--ink-2:#3b300c;--muted:#6f6340;--faint:#a39567;
  --line:#f3e9c3;--line-2:#eadc9f;
  --brand:#a16207;--brand-deep:#7a4b00;--brand-soft:#fff6cf;   /* deep gold: links and accents stay readable */
  --orange:#c2570c;--orange-soft:#fff3dc;--violet:#7c3aed;--violet-soft:#f3edff;
  --green:#15803d;--green-soft:#e6f8ec;--red:#c81e36;--red-soft:#fde9ec;
  --ink-on-sun:#2b2205;                                          /* text on yellow surfaces */
  --sun:linear-gradient(135deg,#fff3a6 0%,#ffe066 55%,#ffd23f 100%);
  --sun-soft:linear-gradient(135deg,#fffbe3 0%,#fff4c2 100%);
  --radius:18px;--radius-sm:12px;
  --shadow-sm:0 1px 2px #5c4a0010,0 6px 18px -8px #b4890026;
  --shadow:0 2px 6px #5c4a000f,0 22px 44px -22px #b489004d;
  --ease:cubic-bezier(.2,.8,.2,1);
}
body{background:
  radial-gradient(1100px 520px at 105% -12%,#fff1a8 0%,#fff1a800 62%),
  radial-gradient(900px 480px at -12% 108%,#fff4cf 0%,#fff4cf00 58%),
  linear-gradient(180deg,#fffdf3 0%,#fff8dc 100%);background-attachment:fixed;color:var(--ink)}
::selection{background:#ffe680}

/* ---------- shell ---------- */
.side{background:linear-gradient(180deg,#fffef6 0%,#fff7d6 100%)!important;border-right:1px solid var(--line)}
.logo{background:var(--sun)!important;color:var(--ink-on-sun)!important;box-shadow:0 6px 16px -6px #d4a10088}
.nav a{border-radius:12px;transition:background .2s var(--ease),color .2s,transform .2s var(--ease)}
.nav a:hover{background:#fff4c4;transform:translateX(2px)}
.nav a.active{background:var(--sun);color:var(--ink-on-sun);font-weight:700;box-shadow:0 8px 18px -12px #c9960099}
.nav a.active svg{opacity:1}
.nav .badge{background:var(--ink);color:#fff}
.topbar{background:transparent;border-bottom:0}
.topbar .title{color:var(--ink)}
#view{background:transparent}

/* ---------- surfaces ---------- */
.card{border-radius:var(--radius);border:1px solid #f4ebc8;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.card:hover{box-shadow:var(--shadow)}
a.card:hover,.card.lift:hover,.plan:hover,.stat:hover{transform:translateY(-3px)}
.card-h h3,.card>h3:first-child{display:flex;align-items:center;gap:8px}
.list-item{border-bottom-color:#f6efd2;transition:background .15s}
a.list-item:hover{background:#fffae2;text-decoration:none;border-radius:10px}
.note{background:var(--sun-soft);border:1px solid #f7e6a3;border-radius:14px;color:var(--ink)}
.banner{border-bottom:0;margin:10px 24px 0;border-radius:14px;box-shadow:var(--shadow-sm)}
.banner.info{background:var(--sun-soft);color:var(--ink)}
.banner.warn{background:#fff3cf;color:#5c4100}
.banner.bad{background:#fde9ec;color:#8f1727}

/* stats: big dark numbers on soft pastel cards */
.stat{position:relative;overflow:hidden}
.stat .v{color:var(--ink);font-size:32px}
.grid > .stat:nth-child(4n+3) .v{color:#14532d}
.grid > .stat:nth-child(4n+4) .v{color:#1e3a8a}
.stat::after{content:"";position:absolute;right:-28px;top:-28px;width:90px;height:90px;border-radius:50%;background:#ffe066;opacity:.25}
.grid.g4 > .card.stat{border:0}
.grid.g4 > .card.stat:nth-child(4n+1){background:linear-gradient(160deg,#fffbe0,#fff1a8)}
.grid.g4 > .card.stat:nth-child(4n+2){background:linear-gradient(160deg,#fff8ec,#ffecc4)}
.grid.g4 > .card.stat:nth-child(4n+3){background:linear-gradient(160deg,#f2fbf3,#dcf5e3)}
.grid.g4 > .card.stat:nth-child(4n+4){background:linear-gradient(160deg,#f2f7ff,#deebff)}
.meter{background:#fff8d9;border-color:#f3e6b0}
.meter i{background:linear-gradient(90deg,#ffd23f,#f5b800);transition:width .9s var(--ease)}

/* "What your AI did this month": a sunlight banner with dark text */
.sunrise-card{background:var(--sun)!important;border:0!important;color:var(--ink-on-sun);box-shadow:0 24px 50px -26px #c9960099!important}
.sunrise-card h3{color:var(--ink-on-sun);font-size:17px}
.res-tiles{gap:12px}
.res-tile{display:flex;align-items:center;gap:10px;background:#ffffff8c;border:1px solid #ffffffb3;border-radius:14px;padding:10px 12px;transition:transform .2s var(--ease),background .2s}
.res-tile:hover{transform:translateY(-2px);background:#ffffffc7}
.res-ic{font-size:24px;width:40px;height:40px;display:grid;place-items:center;background:#fff;border-radius:12px;box-shadow:0 6px 14px -8px #8a6a0066;flex:none}
.res-tile .big-num{font-size:22px;font-weight:800;line-height:1.1;color:var(--ink-on-sun)}
.res-k{font-size:12px;color:#5c4f22}

/* ---------- controls ---------- */
.btn{border-radius:12px;border-color:var(--line-2);transition:transform .15s var(--ease),box-shadow .2s,background .2s}
.btn:hover{background:#fff8d6;transform:translateY(-1px)}
.btn.primary{background:var(--sun);border:1px solid #f2cf4a;color:var(--ink-on-sun);font-weight:700;box-shadow:0 8px 20px -12px #c99600aa}
.btn.primary:hover{background:var(--sun);filter:brightness(1.03);box-shadow:0 12px 26px -12px #c99600cc}
.btn.wa{background:linear-gradient(135deg,#25d366,#128c7e);border:0;box-shadow:0 8px 20px -10px #128c7ecc}
input,select,textarea{border-radius:12px!important;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:#f2cf4a!important;box-shadow:0 0 0 4px #ffe68066!important;outline:0}
.pill.blue{background:#fff6cf;color:#6b4e00;border-color:#f3e2a0}
.pill.orange{background:#fff1d6;color:#7a4300;border-color:#f6dca6}
.pill.violet{background:#f3edff;color:#5b21b6;border-color:#e2d6fe}
.chip-btn,.filters button{transition:transform .15s var(--ease),background .2s}
.filters button.on,.chip.on{background:var(--sun)!important;color:var(--ink-on-sun)!important;border-color:#f2cf4a!important;font-weight:700}
.toggle input:checked+.sw{background:#f5c400!important}

/* ask bar */
.ask-bar{background:#fff!important;border:2px solid #ffe680!important;box-shadow:0 14px 34px -24px #c99600aa}
.ask-bar .ask-ic{color:#b98900!important}

/* ---------- public pages ---------- */
.pub{background:transparent}
.hero{background:transparent}
.hero h1 em{color:#a16207;background:linear-gradient(transparent 62%,#ffe066 62%);padding:0 4px}
.plan.best{border:2px solid #f2cf4a;box-shadow:0 22px 50px -26px #c99600aa}
.plan .price{color:var(--ink)}
.auth-box{border-radius:22px;box-shadow:var(--shadow)}
.feat .ic{background:var(--sun-soft)!important;color:#7a5600!important}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.96);opacity:0}100%{transform:none;opacity:1}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 #22c55e66}50%{box-shadow:0 0 0 6px #22c55e00}}
@keyframes sheen{from{background-position:-200% 0}to{background-position:200% 0}}
#view > *{animation:rise .5s var(--ease) both}
#view > *:nth-child(2){animation-delay:.05s}#view > *:nth-child(3){animation-delay:.1s}
#view > *:nth-child(4){animation-delay:.15s}#view > *:nth-child(5){animation-delay:.2s}#view > *:nth-child(n+6){animation-delay:.25s}
.grid > .card{animation:pop .45s var(--ease) both}
.grid > .card:nth-child(2){animation-delay:.06s}.grid > .card:nth-child(3){animation-delay:.12s}.grid > .card:nth-child(4){animation-delay:.18s}
.modal{animation:pop .25s var(--ease) both}
.toast{animation:rise .3s var(--ease) both}
.dot.on{animation:glow 2s infinite}
.btn.primary{background-size:200% 100%}
.btn.primary:hover{animation:sheen 1.2s linear}

/* ---------- fewer words: help text folds behind a small ⓘ ---------- */
.tip{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-left:6px;border-radius:50%;border:0;background:#fff3b8;color:#6b4e00;font:700 12px var(--font);cursor:pointer;vertical-align:middle;transition:transform .2s var(--ease),background .2s}
.tip:hover{transform:scale(1.12);background:#ffe680}
.tip-text{display:none;margin-top:6px;padding:8px 12px;border-radius:12px;background:#fffbe6;border:1px solid #f6e7a8;color:var(--muted);font-size:12.5px;animation:rise .25s var(--ease) both}
.tip-text.open{display:block}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}