/* Vegemania Green Life Planner — coherent forest-to-leaf identity.
   Reference: the original "Moj zeleni svijet" banner, kept as a signature gradient.
   Gradients are reserved for meaningful landmarks and selected actions; reading
   surfaces stay pale so the application remains comfortable during daily use. */
:root{
  --vg-deep:#173e32;
  --vg-forest:#215d40;
  --vg-leaf:#2d714d;
  --vg-fresh:#8fc96e;
  --vg-ink:#204532;
  --vg-muted:#5e7666;
  --vg-line:#dce9db;
  --vg-paper:#fff;
  --vg-wash:#eaf5e5;
  --vg-gradient:linear-gradient(125deg,#173e32 0%,#2d714d 58%,#8fc96e 100%);
  --vg-gradient-soft:linear-gradient(125deg,#f3faf0 0%,#d7eccf 63%,#eef8e9 100%);
  --vg-shadow:0 12px 34px #20493213;
}
html{scrollbar-color:#aacba7 #eef7ea}
body{
  background-color:#edf6e9!important;
  background-image:radial-gradient(circle at 90% 5%,#b3ddb08c,transparent 35%),linear-gradient(130deg,#f3f9f0 0%,#e6f3df 48%,#eef7e9 100%)!important;
  background-attachment:fixed;
  color:var(--vg-ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.app{min-width:0}
.main{max-width:1500px}
/* Desktop navigation keeps its airy surface, carrying the same green stops. */
.app .sidebar{
  background:linear-gradient(110deg,#e2f1db 0%,#cfe9ca 60%,#eaf5e5 100%)!important;
  border-color:#c5ddc2;
  box-shadow:0 4px 22px #1b492b13;
}
.brand-symbol{background:#ffffffd8;border-color:#a4cba2;box-shadow:0 3px 12px #2d714d14}
.brand-name{color:#1d4d33;font-weight:800}
.brand-sub{color:#577b60}
.nav button{color:#244e35!important;background:#ffffff9c!important;border:1px solid #cfdfca;transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease}
.nav button .nav-text{color:#244e35!important;font-weight:750}
.nav button:not(.active):is(:hover,:focus-visible){background:#fff!important;color:#173e32!important;box-shadow:0 4px 13px #24553c1c;transform:translateY(-1px)}
.nav button:not(.active):is(:hover,:focus-visible) .nav-text{color:#173e32!important}
.nav button.active,.nav button.active:is(:hover,:focus-visible){background:var(--vg-gradient)!important;border-color:#276546!important;color:#fff!important;box-shadow:0 5px 14px #23543e30;transform:none}
.nav button.active .nav-text,.nav button.active:is(:hover,:focus-visible) .nav-text{color:#fff!important}
.topbar{border-color:#cfe2cb}
.top-small{color:#53755c;letter-spacing:.14em}
.today-chip{background:#fffdf9e8;border-color:#d2e3cd;color:#254b35}
.avatar{background:#e4f3df;color:#215d40}
/* More confident but warm type hierarchy. */
.page-heading h1{font-family:'DM Serif Display',Georgia,serif;color:#183f2d;font-size:clamp(35px,3.9vw,49px);line-height:1.1;letter-spacing:-.03em}
.page-heading .subtext{color:#557160;font-size:13px;line-height:1.65}
.eyebrow{color:#477f54;letter-spacing:.16em;font-weight:850}
.panel-title,.moment-card h3,.feature-panel h3{color:#214f36}
.panel-title{font-size:clamp(22px,2.3vw,26px)}
.panel-kicker,.tiny-meta,.muted{color:#64806b}
.footer{color:#607766;border-top:1px solid #d6e6d1;padding-top:24px}
/* The signature gradient has white type with protected contrast at every stop. */
html[data-cover] .hero,:root .hero,
.explore-banner,.style-welcome,.nutri-banner{
  background:var(--vg-gradient)!important;
  color:#fff!important;
  border:1px solid #316f4a!important;
  box-shadow:0 16px 40px #1a55332e;
}
.hero{min-height:279px;border-radius:25px;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 84% 25%,#d0f5ad3a,transparent 36%);z-index:1}
.hero-content{position:relative;z-index:4}
.hero h2,html[data-cover] .hero h2,:root .hero h2{color:#fff!important;text-shadow:0 2px 8px #092a2016!important;font-size:clamp(36px,4.1vw,53px);line-height:1.09}
.hero h2 em,html[data-cover] .hero h2 em,:root .hero h2 em{color:#e0facd!important}
.hero p,html[data-cover] .hero p,:root .hero p{color:#edf9e9!important;opacity:1!important;font-size:13px;line-height:1.72}
.hero .tiny,html[data-cover] .hero .tiny,:root .hero .tiny{color:#d3efbe!important;opacity:1!important;letter-spacing:.17em}
.hero-art{opacity:.65}
.hero-art .sun{border-color:#d8efbd7d}
.hero-art .sun:after{border-color:#cbeab24e}
.hero-stickers{opacity:.88}
.hero .btn,.hero .btn:is(:hover,:focus-visible),html[data-cover] .hero .btn{background:#fff!important;color:#18452f!important;border-color:#fff!important;box-shadow:0 6px 18px #092f2526;font-weight:850}
.hero .btn:is(:hover,:focus-visible){background:#e6f8df!important;color:#143d2a!important;border-color:#e6f8df!important;transform:translateY(-1px)}
.explore-banner h2,.style-welcome h2,.nutri-banner h2{color:#fff!important;line-height:1.18}
.explore-banner p,.style-welcome p,.nutri-banner p{color:#edf9e9!important;opacity:1!important}
.explore-banner .eyebrow,.style-welcome .eyebrow,.nutri-banner .eyebrow{color:#d4efba!important}
.style-welcome{position:relative;overflow:hidden}
.style-welcome .sticker-chip{opacity:.87}
.vg-brand-palette{display:flex;align-items:center;gap:16px;margin-top:20px;padding:16px;background:#f2f8ee;border:1px solid #cfe5c8;border-radius:18px}
.vg-gradient-swatch{display:block;flex:0 0 164px;height:65px;border-radius:13px;background:var(--vg-gradient);box-shadow:inset 0 1px 1px #ffffff3d,0 5px 16px #245b3825}
.vg-gradient-meta{flex:1;min-width:0;color:#224c35}
.vg-gradient-meta strong{display:block;font-size:15px;line-height:1.4}
.vg-gradient-meta small{display:block;margin-top:6px;color:#607b66;font-size:11px;line-height:1.45}
.vg-palette-details{margin-top:18px;border:1px solid #dfebdc;border-radius:14px;padding:0 16px;background:#fbfdfa}
.vg-palette-details summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;padding:15px 0;color:#28583c;font-size:13px;font-weight:800}
.vg-palette-details summary span{font-size:11px;color:#769478;background:#edf5e8;padding:6px 10px;border-radius:20px}
.vg-palette-details summary span::after{content:'⌄';margin-left:8px;font-size:15px}
.vg-palette-details[open] summary span::after{content:'⌃'}
.vg-palette-details[open]{padding-bottom:18px}
.vg-palette-details summary:is(:hover,:focus-visible){color:#18492f}
.nutri-banner>.vg-plate{background:#ffffffd8;border-radius:50%;padding:12px;box-shadow:0 9px 22px #123e2b28}
/* Subtle illuminated paper is more readable than one saturated card after another. */
.stat,.stat:nth-child(1),.stat:nth-child(2),.stat:nth-child(3),.stat:nth-child(4){
  background:#ffffffed!important;border:1px solid #d9e8d5!important;border-top:3px solid #b9dcb3!important;
  border-radius:19px;box-shadow:var(--vg-shadow);
}
.stat:nth-child(1){background:linear-gradient(125deg,#edf8e7,#fbfef9)!important}
.stat .mini-icon{opacity:.9}
.stat strong{color:#205038}
.stat span{color:#587360}
.panel,.feature-panel,.moment-card,.day-card,.quick,.upgrade-shortcut,
.quick:nth-child(2n),.quick:nth-child(3n),.upgrade-shortcut:nth-child(2),
.upgrade-shortcut:nth-child(3),.upgrade-shortcut:nth-child(4){
  background:#ffffffed!important;border-color:#dce9da!important;box-shadow:var(--vg-shadow);
}
.panel,.feature-panel{border-radius:23px}
.panel-title,.moment-card h3{letter-spacing:-.018em}
.moment-card:first-child{background:#fff!important}
.moment-card.challenge,.moment-card.challenge.is-done{background:var(--vg-gradient-soft)!important;border-color:#c8e2bf!important}
.quick .quick-ico{background:linear-gradient(135deg,#e5f4df,#cde6c7);border:1px solid #d3e8ce}
.quick .arrow{color:#5a9569}
.upgrade-shortcut strong,.quick strong{color:#204e35}
.upgrade-shortcut small,.quick small{color:#5a7361}
.quick:is(:hover,:focus-visible),.upgrade-shortcut:is(:hover,:focus-visible){background:#eff9eb!important;border-color:#a3caa0!important;transform:translateY(-2px);box-shadow:0 12px 28px #235a3621}
.quick:is(:hover,:focus-visible) strong,.upgrade-shortcut:is(:hover,:focus-visible) strong{color:#1d4a33!important}
.quick:is(:hover,:focus-visible) small,.upgrade-shortcut:is(:hover,:focus-visible) small{color:#52705b!important}
.meal-emoji,.cook-mini-icon{background:#e8f4e4}
.day-card.today{border-color:#6aa76a!important;background:#f4fbf0!important}
.day-head{border-color:#e0eedb}
.progress{background:#e5efe1}
.progress>span{background:linear-gradient(90deg,#296b46,#84c66b)}
.divider{background:#dfeade}
.tip{background:#e8f4e3;color:#355b3f}
.nutri-stat,.nutri-stat:nth-child(2n),.nutri-stat:nth-child(3n){background:#f7fbf4!important;border-color:#d7e8d2!important}
/* Clear state color: checked is green, unchecked is paper, both with dark labels. */
.btn{border-color:#cadfca;background:#fff;color:#214e35;font-weight:800;border-radius:12px}
.btn:not(.primary):not(.danger):not(:disabled):is(:hover,:focus-visible){background:#e5f3e0!important;color:#173e32!important;border-color:#8dbe8e!important}
.btn.primary,.btn.primary:is(:hover,:focus-visible),.pdf-button.primary,
.filter-pill.active,.filter-pill.active:is(:hover,:focus-visible),
.explore-tab.active,.explore-tab.active:is(:hover,:focus-visible),
.progress-mode button.active,.progress-mode button.active:is(:hover,:focus-visible){
  background:var(--vg-gradient)!important;color:#fff!important;border:1px solid #2c734d!important;filter:none!important;
}
.btn.primary:is(:hover,:focus-visible),.filter-pill.active:is(:hover,:focus-visible),.explore-tab.active:is(:hover,:focus-visible){box-shadow:0 7px 18px #21603c30;transform:translateY(-1px)}
.btn.soft{background:#e6f2e2;color:#214e35;border-color:#d2e6ce}
.btn.danger{background:#fffaf8;color:#a34e40}
.btn.danger:is(:hover,:focus-visible){background:#fff0e9!important;color:#8e4035!important;border-color:#dfb5aa!important}
.filter-pill:not(.active):is(:hover,:focus-visible),.explore-tab:not(.active):is(:hover,:focus-visible),
.menu-group button:not(.active):is(:hover,:focus-visible),.suggestions button:is(:hover,:focus-visible),
.recipe-options button:is(:hover,:focus-visible){background:#e9f5e6!important;color:#1b4932!important;border-color:#9ac69a!important}
.theme-swatch.active,.theme-swatch.active:is(:hover,:focus-visible),
.style-option.selected,.style-option.selected:is(:hover,:focus-visible),
.mood-button.active,.mood-button.active:is(:hover,:focus-visible){background:#e2f2de!important;border-color:#5f9e63!important;color:#173e32!important}
.theme-swatch strong,.style-option strong,.mood-button small,
.theme-swatch:is(:hover,:focus-visible) strong,.style-option:is(:hover,:focus-visible) strong{color:#214b35!important}
.theme-swatch:is(:hover,:focus-visible),.style-option:is(:hover,:focus-visible),.mood-button:is(:hover,:focus-visible){background:#edf8e9!important;color:#214b35!important;border-color:#92c28f!important}
.style-option.selected strong,.mood-button.active small{color:#173e32!important}
.checkrow input,.nutri-check input,input[type="checkbox"],input[type="radio"]{accent-color:#2d714d}
.dot.checked,.goal-check.done{background:var(--vg-gradient)!important;color:#fff!important;border-color:#2e794c!important}
.field:focus,input:focus-visible,textarea:focus-visible,select:focus-visible{border-color:#76ac73;outline:3px solid #8fd08670;outline-offset:1px}
button:focus-visible,a:focus-visible,[role="button"]:focus-visible{outline:3px solid #9ad17c;outline-offset:3px}
::selection{background:#b5dfac;color:#153c2b}
.notice{background:var(--vg-gradient)!important;color:#fff!important;border-color:#2e754b!important}
@media(min-width:1101px){
  .app .sidebar{padding-block:15px}
  .nav{gap:7px;align-items:center}
  .nav button{min-height:46px;border-radius:13px;padding:10px 12px}
  .main{padding-inline:clamp(28px,3vw,48px)}
  .page{padding-top:33px}
  .page-heading{margin-bottom:26px;align-items:center}
  .hero{padding:37px 44px;min-height:295px}
  .stats{gap:18px;margin-top:23px}
  .dashboard-grid{gap:22px;margin-top:23px}
  .panel{padding:27px}
  .quick-grid{gap:17px}
}
@media(min-width:771px) and (max-width:1100px){
  .main{padding-inline:25px}
  .hero{padding:30px;min-height:270px}
  .hero h2{font-size:clamp(33px,4.3vw,45px)!important}
}
@media(max-width:770px){
  body{background-image:linear-gradient(150deg,#eff8ec,#e2f1de 60%,#f5faf1)!important;background-attachment:scroll}
  html[data-cover] .hero,:root .hero,.explore-banner,.style-welcome,.nutri-banner{background:linear-gradient(112deg,#173e32 0%,#246b48 73%,#6faf59 100%)!important}
  .app .sidebar{background:linear-gradient(112deg,#e1f0da,#d3eacb 60%,#e5f3e2)!important;border-color:#b8d6b4}
  .nav button{border:0;background:transparent!important;color:#285339!important;min-height:60px}
  .nav button .nav-text{color:#285339!important}
  .nav button.active,.nav button.active:is(:hover,:focus-visible){background:var(--vg-gradient)!important;color:#fff!important;border:0!important}
  .nav button.active .nav-text{color:#fff!important}
  .main{padding-inline:14px}
  .page-heading h1{font-size:clamp(29px,8vw,37px)!important}
  .hero{padding:24px!important;min-height:285px!important}
  .hero h2,html[data-cover] .hero h2{font-size:clamp(29px,8vw,38px)!important;max-width:none!important}
  .hero p{font-size:12px!important;line-height:1.65}
  .hero-content{padding-right:32px}
  .hero-stickers{opacity:.65;transform:scale(.6)}
  .stat{padding:16px}
  .panel,.feature-panel{border-radius:19px;padding:19px}
  .nutri-banner{padding:23px}
  .nutri-banner>.vg-plate{width:92px;padding:7px}
  .style-welcome{padding:22px}
  .vg-brand-palette{flex-wrap:wrap;gap:12px;padding:13px}
  .vg-gradient-swatch{flex:1 1 100%;height:55px}
  .vg-brand-palette .btn{flex:1 1 100%}
  .top-actions .btn{color:#214e35}
}
@media(max-width:430px){
  .main{padding-inline:12px}
  .hero{padding:21px!important;min-height:278px!important}
  .hero-content{padding-right:17px}
  .hero-stickers{opacity:.53;right:-9px!important}
  .stats{gap:9px}
  .stat{padding:14px}
  .stat strong{font-size:29px}
  .panel,.feature-panel{padding:16px}
  .btn{white-space:normal;text-align:center}
}
@media(prefers-reduced-motion:reduce){.nav button,.quick,.upgrade-shortcut,.btn{transition:none!important;transform:none!important}}