/* Nova layer — visual refresh over the garden UI. Presentation only: no business IDs change.
   Loaded last; follows the existing theme variables so every palette keeps working. */
:root{
 --nova-radius:16px;
 --nova-grad:linear-gradient(135deg,var(--green) 0%,color-mix(in srgb,var(--green) 55%,var(--deep)) 100%);
 --nova-grad-hero:linear-gradient(120deg,color-mix(in srgb,var(--deep) 92%,#000) 0%,var(--deep) 38%,var(--green) 100%);
 --nova-gold:linear-gradient(135deg,#ffe2a3 0%,var(--accent) 55%,color-mix(in srgb,var(--accent) 70%,#a0521a) 100%);
 --nova-glow:0 10px 30px -10px color-mix(in srgb,var(--green) 55%,transparent);
 --nova-card-shadow:0 1px 2px #1b2a2108,0 8px 24px -12px #1b2a2126;
 --nova-ease:cubic-bezier(.2,.8,.2,1);
}

/* ---------- Page background ---------- */
body.farm-ui{background:
 radial-gradient(1200px 500px at 85% -10%,color-mix(in srgb,var(--tint) 70%,transparent),transparent 60%),
 radial-gradient(900px 500px at -10% 110%,color-mix(in srgb,var(--wash-b) 60%,transparent),transparent 60%),
 var(--paper);background-attachment:fixed}

/* ---------- Sidebar ---------- */
@media(min-width:701px){
 body.farm-ui[data-density] .sidebar{
  background:
   radial-gradient(260px 220px at 0% 0%,color-mix(in srgb,var(--green) 55%,transparent),transparent 70%),
   radial-gradient(240px 260px at 100% 100%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),
   linear-gradient(180deg,var(--deep),color-mix(in srgb,var(--deep) 70%,#000));
  border-right:0;box-shadow:6px 0 30px -18px #000a}
 body.farm-ui[data-density] .sidebar .mark{background:var(--nova-gold);color:var(--deep);box-shadow:0 6px 18px -6px color-mix(in srgb,var(--accent) 80%,transparent)}
}
body.farm-ui[data-density] .sidebar .nav{position:relative;overflow:hidden;transition:background-color .2s,color .2s,transform .25s var(--nova-ease),box-shadow .25s}
body.farm-ui[data-density] .sidebar .nav .ui-icon{transition:transform .35s var(--nova-ease)}
body.farm-ui[data-density] .sidebar .nav:hover{transform:translateX(3px)}
body.farm-ui[data-density] .sidebar .nav:hover .ui-icon{transform:scale(1.15) rotate(-6deg)}
body.farm-ui[data-density] .sidebar .nav.active{
 background:linear-gradient(90deg,#ffffff2b,#ffffff0d);color:#fff;
 box-shadow:inset 3px 0 var(--accent),0 6px 18px -10px #000c}
body.farm-ui[data-density] .sidebar .nav.active .ui-icon{color:var(--accent);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 70%,transparent))}
body.farm-ui .sidebar-garden{backdrop-filter:none;-webkit-backdrop-filter:none}
body.farm-ui .sidebar-bottom .pulse{box-shadow:0 0 0 3px color-mix(in srgb,#e2c484 18%,transparent)}

/* ---------- Top bar: sticky glass ---------- */
.app-topbar{position:sticky;top:var(--garden-top-offset);z-index:35;
 background:color-mix(in srgb,var(--surface) 96%,#fff);backdrop-filter:none;-webkit-backdrop-filter:none;
 border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.profile-box{border-radius:999px!important}
.profile-avatar{background:var(--nova-grad)!important;color:#fff!important}

/* ---------- Hero header ---------- */
body.farm-ui[data-density] .main>header{
 position:relative;isolation:isolate;overflow:hidden;
 padding:22px 26px;margin-bottom:16px;border-radius:calc(var(--nova-radius) + 4px);
 background:var(--nova-grad-hero);color:#fff;box-shadow:0 18px 40px -22px color-mix(in srgb,var(--deep) 90%,transparent)}
body.farm-ui[data-density] .main>header::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:
  radial-gradient(closest-side,color-mix(in srgb,var(--accent) 28%,transparent),transparent) 82% 20%/34% 55% no-repeat,
  radial-gradient(closest-side,#ffffff30,transparent) 18% 80%/30% 50% no-repeat,
  radial-gradient(closest-side,color-mix(in srgb,var(--tint) 45%,transparent),transparent) 55% 110%/45% 60% no-repeat;
}
body.farm-ui[data-density] .main>header::after{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.18;
 background-image:radial-gradient(#fff 1px,transparent 1.4px);background-size:22px 22px;
 mask-image:linear-gradient(90deg,transparent 30%,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 100%)}
body.farm-ui[data-density] .main>header h1{color:#fff;font-size:28px;text-shadow:0 2px 14px #0003}
body.farm-ui[data-density] .main>header .eyebrow{color:color-mix(in srgb,var(--accent) 70%,#fff);letter-spacing:2.5px}
body.farm-ui[data-density] .main>header p,body.farm-ui[data-density] .main>header .muted{color:#ffffffc7}
body.farm-ui[data-density] .main>header .badge{background:#ffffff22;color:#fff;border:1px solid #ffffff33}
body.farm-ui[data-density] .main>header select{background:#ffffffe6}
body.farm-ui[data-density] .main>header .header-right #addTags{
 background:#ffffff1f;color:#fff;border:1px solid #ffffff40;padding:9px 16px;font-size:12px;border-radius:12px}
body.farm-ui[data-density] .main>header .header-right #addTags:hover{background:#ffffff33;border-color:#ffffff80}
body.farm-ui[data-density] .main>header .header-right #refreshCurrent{
 background:var(--nova-gold);color:color-mix(in srgb,var(--deep) 90%,#000);border:0;font-weight:700;padding:9px 18px;font-size:12px;border-radius:12px;
 box-shadow:0 10px 24px -10px color-mix(in srgb,var(--accent) 90%,transparent)}
body.farm-ui[data-density] .main>header .header-right #refreshCurrent:hover{filter:brightness(1.06) saturate(1.1)}
body.farm-ui[data-density] .main>header .header-right #refreshCurrent:disabled{background:#ffffff14;color:#fff;border:1px dashed #ffffff66;box-shadow:none;opacity:1;filter:none;font-variant-numeric:tabular-nums}

/* ---------- Stat cards ---------- */
body.farm-ui[data-density] .stats{gap:14px}
body.farm-ui[data-density] .stats article{
 position:relative;overflow:hidden;border-radius:var(--nova-radius);border:1px solid color-mix(in srgb,var(--line) 80%,transparent);
 background:linear-gradient(180deg,var(--surface),#fff);box-shadow:var(--nova-card-shadow);padding:14px 18px;
 transition:transform .3s var(--nova-ease),box-shadow .3s,border-color .3s}
body.farm-ui[data-density] .stats article::before{
 content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--nova-grad);
 transform:scaleX(.18);transform-origin:left;transition:transform .5s var(--nova-ease)}
body.farm-ui[data-density] .stats article::after{
 content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
 background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--tint) 55%,transparent),transparent 60%)}
body.farm-ui[data-density] .stats article:hover{transform:translateY(-3px);box-shadow:var(--nova-glow);border-color:color-mix(in srgb,var(--green) 35%,var(--line))}
body.farm-ui[data-density] .stats article:hover::before{transform:scaleX(1)}
body.farm-ui[data-density] .stats article:hover::after{opacity:1}
body.farm-ui[data-density] #statistics article{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center}
body.farm-ui[data-density] #statistics article>.stat-icon{grid-column:1;grid-row:1/3;align-self:center}
body.farm-ui[data-density] #statistics article>span{grid-column:2;grid-row:1;font-size:12px;font-weight:600;color:var(--ink)}
body.farm-ui[data-density] #statistics article>.tiny{grid-column:2;grid-row:2;margin:0}
body.farm-ui[data-density] #statistics article>strong{grid-column:3;grid-row:1/3;align-self:center;text-align:right;white-space:nowrap}
body.farm-ui[data-density] .stats strong{font-size:30px;font-variant-numeric:tabular-nums;
 background:linear-gradient(180deg,var(--deep),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
body.farm-ui[data-density] .stats strong small{-webkit-text-fill-color:var(--muted)}
body.farm-ui .stat-icon{
 width:40px!important;height:40px!important;border-radius:12px!important;display:grid!important;place-items:center;
 background:var(--nova-grad)!important;color:#fff!important;box-shadow:0 8px 18px -8px color-mix(in srgb,var(--green) 80%,transparent);
 transition:transform .45s var(--nova-ease);position:relative;z-index:1}
body.farm-ui .stat-icon .ui-icon{color:#fff;stroke:#fff}
body.farm-ui[data-density] .stats article:hover .stat-icon{transform:rotate(-8deg) scale(1.08)}

/* ---------- Panels ---------- */
body.farm-ui[data-density] .panel{border-radius:var(--nova-radius);border-color:color-mix(in srgb,var(--line) 80%,transparent);box-shadow:var(--nova-card-shadow);padding:16px 18px}
body.farm-ui[data-density] .panel h2{letter-spacing:-.2px}
body.farm-ui[data-density] .section-heading h2::before{
 content:"";display:inline-block;width:4px;height:1em;border-radius:4px;margin-right:8px;vertical-align:-2px;background:var(--nova-grad)}

/* ---------- Buttons: shared motion system ---------- */
body.farm-ui :is(.primary,.secondary,.nav,.theme-trigger,.theme-option,.text-button){
 position:relative;overflow:hidden;isolation:isolate;
 transition:background-color .2s,border-color .2s,color .2s,box-shadow .25s,transform .25s var(--nova-ease),filter .2s}
body.farm-ui :is(.primary,.secondary):not(:disabled):hover{transform:translateY(-2px)}
body.farm-ui :is(.primary,.secondary,.nav,.theme-option):not(:disabled):active{transform:translateY(0) scale(.96);transition-duration:.08s}
body.farm-ui .primary{background:var(--nova-action,var(--nova-grad));border:0;box-shadow:0 6px 16px -8px color-mix(in srgb,var(--green) 85%,transparent)}
body.farm-ui .primary:not(:disabled):hover{background:var(--nova-action,var(--nova-grad));box-shadow:var(--nova-glow);filter:brightness(1.03)}
body.farm-ui .secondary:not(:disabled):hover{box-shadow:0 8px 18px -12px color-mix(in srgb,var(--green) 70%,transparent)}
body.farm-ui :is(.primary,.secondary,.theme-trigger):disabled{cursor:not-allowed;filter:grayscale(.3);opacity:.75}
/* CSS-only press feedback: no forced layout, ripple nodes or per-click timers. */

/* Notices */
body.farm-ui[data-density] #notice:not([hidden]){border-radius:12px;border:1px solid color-mix(in srgb,var(--green) 25%,var(--line));
 background:linear-gradient(90deg,color-mix(in srgb,var(--soft) 90%,#fff),var(--surface));box-shadow:inset 4px 0 var(--green),var(--nova-card-shadow);
 padding:10px 14px;color:var(--deep);font-weight:600;animation:novaFade .14s ease-out}

/* Inventory toolbar: pill group */
body.farm-ui[data-density] .visibility-toolbar{gap:6px}
body.farm-ui[data-density] .visibility-toolbar :is(.secondary,select){border-radius:999px;padding-inline:13px}
body.farm-ui[data-density] .filter-panel-actions .text-button,body.farm-ui[data-density] #toggleFilters{border-radius:999px}
body.farm-ui[data-density] #toggleFilters{background:var(--nova-action,var(--nova-grad));color:#fff;border:0;padding-inline:14px}
body.farm-ui[data-density] #toggleFilters:hover{box-shadow:var(--nova-glow);transform:translateY(-1px)}

/* Inputs */
body.farm-ui :is(input,select,textarea){transition:border-color .2s,box-shadow .25s,background-color .2s}
body.farm-ui :is(input,select,textarea):focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 18%,transparent)}
body.farm-ui[data-density] .inventory-search-bar input{border-radius:999px;padding-left:14px}

/* ---------- Item cards ---------- */
body.farm-ui[data-density] #workspace .aggregate-card{
 position:relative;border-radius:8px;background:linear-gradient(180deg,#fff,var(--surface));
 transition:transform .3s var(--nova-ease),box-shadow .3s,border-color .3s}
body.farm-ui[data-density] #workspace .aggregate-card::before{
 content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
 background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--tint) 60%,transparent),transparent 65%)}
body.farm-ui[data-density] #workspace .aggregate-card:hover{transform:translateY(-4px);box-shadow:var(--nova-glow);border-color:color-mix(in srgb,var(--green) 45%,var(--line))}
body.farm-ui[data-density] #workspace .aggregate-card:hover::before{opacity:1}
body.farm-ui[data-density] #workspace .aggregate-card>*{position:relative}
body.farm-ui[data-density] #workspace .aggregate-card img{transition:transform .45s var(--nova-ease);filter:drop-shadow(0 4px 6px #0000001a)}
body.farm-ui[data-density] #workspace .aggregate-card:hover img{transform:translateY(-2px) scale(1.12) rotate(-4deg)}
body.farm-ui[data-density] .aggregate-quantity{font-variant-numeric:tabular-nums;color:var(--deep)}
body.farm-ui .favorite-button{transition:transform .3s var(--nova-ease),color .2s}
body.farm-ui .favorite-button:hover{transform:scale(1.3) rotate(15deg)}
body.farm-ui .favorite-button.favorite{text-shadow:0 0 10px color-mix(in srgb,var(--accent) 80%,transparent)}
/* Approved card entrance: first 24 cards cascade over 414 ms. CSS selectors
   follow keyed DOM order directly, so filtering needs no grid observers/writes. */
body.farm-ui[data-density] #workspace .aggregate-grid>.aggregate-card{animation:novaIn .4s var(--nova-ease) backwards;animation-delay:0s}
body.farm-ui[data-density] #workspace .aggregate-grid>.aggregate-card:nth-child(-n+24){animation-delay:calc(var(--nova-i,0) * 18ms)}
.aggregate-grid>.aggregate-card:nth-child(1){--nova-i:0}
.aggregate-grid>.aggregate-card:nth-child(2){--nova-i:1}
.aggregate-grid>.aggregate-card:nth-child(3){--nova-i:2}
.aggregate-grid>.aggregate-card:nth-child(4){--nova-i:3}
.aggregate-grid>.aggregate-card:nth-child(5){--nova-i:4}
.aggregate-grid>.aggregate-card:nth-child(6){--nova-i:5}
.aggregate-grid>.aggregate-card:nth-child(7){--nova-i:6}
.aggregate-grid>.aggregate-card:nth-child(8){--nova-i:7}
.aggregate-grid>.aggregate-card:nth-child(9){--nova-i:8}
.aggregate-grid>.aggregate-card:nth-child(10){--nova-i:9}
.aggregate-grid>.aggregate-card:nth-child(11){--nova-i:10}
.aggregate-grid>.aggregate-card:nth-child(12){--nova-i:11}
.aggregate-grid>.aggregate-card:nth-child(13){--nova-i:12}
.aggregate-grid>.aggregate-card:nth-child(14){--nova-i:13}
.aggregate-grid>.aggregate-card:nth-child(15){--nova-i:14}
.aggregate-grid>.aggregate-card:nth-child(16){--nova-i:15}
.aggregate-grid>.aggregate-card:nth-child(17){--nova-i:16}
.aggregate-grid>.aggregate-card:nth-child(18){--nova-i:17}
.aggregate-grid>.aggregate-card:nth-child(19){--nova-i:18}
.aggregate-grid>.aggregate-card:nth-child(20){--nova-i:19}
.aggregate-grid>.aggregate-card:nth-child(21){--nova-i:20}
.aggregate-grid>.aggregate-card:nth-child(22){--nova-i:21}
.aggregate-grid>.aggregate-card:nth-child(23){--nova-i:22}
.aggregate-grid>.aggregate-card:nth-child(24){--nova-i:23}

/* Group cards / tables */
body.farm-ui[data-density] .group-card{border-radius:var(--nova-radius);transition:transform .3s var(--nova-ease),box-shadow .3s}
body.farm-ui[data-density] .group-card:hover{transform:translateY(-3px);box-shadow:var(--nova-glow)}
body.farm-ui[data-density] .table-wrap tbody tr{transition:background-color .15s}
body.farm-ui[data-density] .table-wrap tbody tr:hover{background:color-mix(in srgb,var(--soft) 70%,transparent)}

/* Dialogs */
body.farm-ui dialog[open]{animation:novaDialog .16s var(--nova-ease)}
body.farm-ui dialog::backdrop{background:color-mix(in srgb,var(--deep) 48%,transparent);backdrop-filter:none;-webkit-backdrop-filter:none}

/* Login */
body.farm-ui .login-card{border-radius:22px;box-shadow:0 30px 60px -30px color-mix(in srgb,var(--deep) 60%,transparent)}
body.farm-ui .login-card .primary.wide{padding:12px;font-size:14px;border-radius:12px}

/* ---------- Keyframes ---------- */
@keyframes novaFade{from{opacity:0}to{opacity:1}}
@keyframes novaIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes novaDialog{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- Mobile ---------- */
@media(max-width:700px){
 body.farm-ui[data-density] .main>header{padding:16px;border-radius:16px}
 body.farm-ui[data-density] .main>header h1{font-size:22px}
 body.farm-ui[data-density] .stats{gap:8px}
 body.farm-ui[data-density] .stats article{padding:10px 12px}
 body.farm-ui .stat-icon{width:28px!important;height:28px!important;border-radius:8px!important}
 body.farm-ui .stat-icon .ui-icon{width:15px;height:15px}
 body.farm-ui[data-density] #statistics article{grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:8px;row-gap:4px}
 body.farm-ui[data-density] #statistics article>.stat-icon{grid-column:1;grid-row:1}
 body.farm-ui[data-density] #statistics article>strong{grid-column:2;grid-row:1;font-size:20px}
 body.farm-ui[data-density] #statistics article>span{grid-column:1/-1;grid-row:2;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body.farm-ui[data-density] #statistics article>.tiny{grid-column:1/-1;grid-row:3;font-size:9px}
 body.farm-ui[data-density] #workspace .aggregate-card:hover{transform:none}
}

/* ---------- Item cards keep the original garden layout; phones show four per row ---------- */
@media(max-width:700px){
 body.farm-ui[data-density]:not([data-card-details=true]) #workspace .aggregate-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* =====================================================================
   Macaron themes: one soft colour per theme
   Layering comes from lighter/deeper shades of that single colour.
   ===================================================================== */
html[data-theme=sakura]{--c:#FFB3D9;--green:#D45C99;--deep:#7A2E58}
html[data-theme=taro]{--c:#C9B7FF;--green:#7E63D8;--deep:#45357F}
html[data-theme=glacier]{--c:#9EE7FF;--green:#2795BC;--deep:#1C5670}
html[data-theme=lemon]{--c:#FFF2B2;--green:#A88208;--deep:#5E4A10}
html[data-theme=mint]{--c:#9AF0D1;--green:#21997A;--deep:#155C47}
html[data-theme=sky]{--c:#7ED6FF;--green:#2788D0;--deep:#1A4E78}
html[data-theme=apricot]{--c:#FFC36B;--green:#CC7420;--deep:#6E3F10}
html[data-theme=grapefruit]{--c:#FF8FB1;--green:#D2466F;--deep:#7A2440}
html[data-theme=clove]{--c:#EAB7FF;--green:#A05AC6;--deep:#57306E}
html[data-theme=matcha]{--c:#BFE3C0;--green:#4A9356;--deep:#2B5532}
html[data-macaron=true]{
 --c1:var(--c);--c2:color-mix(in srgb,var(--c) 65%,#fff);--c3:color-mix(in srgb,var(--c) 40%,#fff);--c4:color-mix(in srgb,var(--c) 85%,var(--green));
 --accent:var(--c);--ink:color-mix(in srgb,var(--deep) 80%,#1d1d24);
 --paper:color-mix(in srgb,var(--c2) 10%,#fbfaff);
 --surface:#ffffffd9;
 --soft:color-mix(in srgb,var(--c2) 22%,#fff);
 --tint:color-mix(in srgb,var(--c1) 45%,#fff);
 --tile:color-mix(in srgb,var(--c3) 14%,#fff);
 --line:color-mix(in srgb,var(--c2) 35%,#fff);
 --muted:color-mix(in srgb,var(--ink) 58%,#fff);
 --wash-a:var(--c1);--wash-b:var(--c3);--wash-c:var(--c4);
 --nova-grad:linear-gradient(135deg,color-mix(in srgb,var(--green) 85%,var(--c1)),var(--green) 55%,color-mix(in srgb,var(--green) 80%,var(--c3)));
 --nova-action:linear-gradient(135deg,color-mix(in srgb,var(--green) 40%,var(--deep)),var(--deep));
 --nova-glow:0 12px 28px -12px color-mix(in srgb,var(--c2) 90%,transparent);
 --nova-card-shadow:0 1px 0 #fff inset,0 2px 6px color-mix(in srgb,var(--c2) 18%,transparent),0 14px 30px -18px color-mix(in srgb,var(--deep) 30%,transparent);
}
html[data-macaron=true] body.farm-ui{
 color:var(--ink);--muted:color-mix(in srgb,var(--ink) 58%,#fff);
 background:
  radial-gradient(900px 520px at 0% 0%,color-mix(in srgb,var(--c1) 55%,transparent),transparent 62%),
  radial-gradient(900px 600px at 100% 10%,color-mix(in srgb,var(--c3) 50%,transparent),transparent 60%),
  radial-gradient(800px 600px at 60% 110%,color-mix(in srgb,var(--c4) 60%,transparent),transparent 60%),
  radial-gradient(700px 500px at 10% 90%,color-mix(in srgb,var(--c2) 45%,transparent),transparent 60%),
  var(--paper);background-attachment:fixed}
html[data-macaron=true] .app-topbar{background:#fffffff2;border-bottom-color:#ffffffcc}
html[data-macaron=true] body.farm-ui[data-density] :is(.panel,.stats article){
 background:linear-gradient(180deg,#fffffff5,#ffffffe6);border:1px solid #ffffffe6;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-macaron=true] body.farm-ui :is(input,select,textarea){background:#ffffffe6;border-color:color-mix(in srgb,var(--c2) 40%,#fff)}

/* Hero: soft gradient of the theme colour */
html[data-macaron=true] body.farm-ui[data-density] .main>header{
 color:var(--deep);border:1px solid #ffffffcc;
 background:linear-gradient(115deg,color-mix(in srgb,var(--c1) 80%,#fff) 0%,color-mix(in srgb,var(--c2) 80%,#fff) 35%,color-mix(in srgb,var(--c3) 75%,#fff) 70%,color-mix(in srgb,var(--c4) 85%,#fff) 100%);
 box-shadow:0 18px 40px -24px color-mix(in srgb,var(--c2) 100%,transparent),inset 0 1px #fff}
html[data-macaron=true] body.farm-ui[data-density] .main>header::before{
 background:radial-gradient(closest-side,#ffffffb0,transparent) 80% 20%/34% 60% no-repeat,radial-gradient(closest-side,#ffffff80,transparent) 15% 85%/30% 50% no-repeat,radial-gradient(closest-side,color-mix(in srgb,var(--c1) 60%,transparent),transparent) 55% 110%/40% 60% no-repeat}
html[data-macaron=true] body.farm-ui[data-density] .main>header::after{opacity:.5}
html[data-macaron=true] body.farm-ui[data-density] .main>header h1{color:var(--deep);text-shadow:0 2px 0 #ffffff99}
html[data-macaron=true] body.farm-ui[data-density] .main>header :is(p,.muted){color:color-mix(in srgb,var(--deep) 75%,#fff)}
html[data-macaron=true] body.farm-ui[data-density] .main>header .eyebrow{color:var(--green)}
html[data-macaron=true] body.farm-ui[data-density] .main>header .badge{background:#ffffff99;color:var(--deep);border-color:#fff}
html[data-macaron=true] body.farm-ui[data-density] .main>header .header-right #addTags{background:#ffffffb3;color:var(--deep);border-color:#fff}
html[data-macaron=true] body.farm-ui[data-density] .main>header .header-right #addTags:hover{background:#fff}
html[data-macaron=true] body.farm-ui[data-density] .main>header .header-right #refreshCurrent{background:var(--nova-action);color:#fff;box-shadow:0 10px 22px -10px var(--green)}
html[data-macaron=true] body.farm-ui[data-density] .main>header .header-right #refreshCurrent:disabled{background:#ffffff80;color:var(--deep);border-color:color-mix(in srgb,var(--green) 40%,#fff)}

/* Stat cards: three shades of the theme colour */
html[data-macaron=true] body.farm-ui[data-density] #statistics article:nth-of-type(2){--cc:var(--c1)}
html[data-macaron=true] body.farm-ui[data-density] #statistics article:nth-of-type(3){--cc:var(--c2)}
html[data-macaron=true] body.farm-ui[data-density] #statistics article:nth-of-type(4){--cc:var(--c3)}
html[data-macaron=true] body.farm-ui[data-density] #statistics article::before{background:var(--cc,var(--c2));height:4px}
html[data-macaron=true] body.farm-ui .stat-icon{
 background:linear-gradient(145deg,#fff,var(--cc,var(--c2)) 70%)!important;color:var(--deep)!important;
 box-shadow:0 8px 16px -8px var(--cc,var(--c2)),inset 0 1px #fff}
html[data-macaron=true] body.farm-ui .stat-icon .ui-icon{color:var(--deep);stroke:var(--deep)}

/* Layer 3: item cards, all in the theme colour */
html[data-macaron=true] body.farm-ui[data-density] #workspace .aggregate-grid>.aggregate-card{--cc:var(--c1)}
html[data-macaron=true] body.farm-ui[data-density] #workspace .aggregate-card{
 background:
  radial-gradient(120% 70% at 50% 0%,#ffffffd9 0%,transparent 60%),
  linear-gradient(170deg,color-mix(in srgb,var(--cc) 55%,#fff) 0%,color-mix(in srgb,var(--cc) 22%,#fff) 60%,#fff 100%);
 border:1px solid color-mix(in srgb,var(--cc) 65%,#fff);
 box-shadow:inset 0 1px #fff,inset 0 -2px 0 color-mix(in srgb,var(--cc) 35%,transparent),0 6px 14px -10px color-mix(in srgb,var(--cc) 90%,#000)}
html[data-macaron=true] body.farm-ui[data-density] #workspace .aggregate-card:hover{
 border-color:color-mix(in srgb,var(--cc) 80%,var(--deep));box-shadow:inset 0 1px #fff,0 14px 24px -12px color-mix(in srgb,var(--cc) 85%,#000)}
html[data-macaron=true] body.farm-ui[data-density] #workspace .aggregate-card::before{
 background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),#ffffffb3,transparent 65%)}
html[data-macaron=true] body.farm-ui[data-density] #workspace .aggregate-card .item-name{color:color-mix(in srgb,var(--ink) 85%,#fff)}
html[data-macaron=true] body.farm-ui[data-density] .aggregate-quantity{color:var(--deep)}
html[data-macaron=true] body.farm-ui[data-density] #workspace .aggregate-card .compact-stock-status{background:#ffffffb3;border-color:#fff}
html[data-macaron=true] body.farm-ui[data-density] #workspace .aggregate-card:has([data-select-item]:checked){outline:2px solid var(--green);outline-offset:-1px}


/* Deep sidebar tinted with the theme colour (new themes) */
@media(min-width:701px){
 html[data-macaron=true] body.farm-ui[data-density] .sidebar{
  background:
   radial-gradient(260px 220px at 0% 0%,color-mix(in srgb,var(--c1) 45%,transparent),transparent 70%),
   radial-gradient(240px 260px at 100% 100%,color-mix(in srgb,var(--c3,var(--c1)) 30%,transparent),transparent 70%),
   linear-gradient(180deg,var(--deep),color-mix(in srgb,var(--deep) 72%,#000))}
}
html[data-macaron=true] body.farm-ui[data-density] .sidebar .mark{background:linear-gradient(135deg,var(--c1),var(--c2));color:var(--deep)}
html[data-macaron=true] body.farm-ui[data-density] .sidebar .nav.active{box-shadow:inset 3px 0 var(--c1),0 6px 18px -10px #000c}
html[data-macaron=true] body.farm-ui[data-density] .sidebar .nav.active .ui-icon{color:var(--c1);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c1) 70%,transparent))}
html[data-macaron=true] body.farm-ui .sidebar-garden :is(.ui-icon,strong){color:color-mix(in srgb,var(--c1) 60%,#fff)}
html[data-macaron=true] body.farm-ui .sidebar-bottom .pulse{background:var(--c1)}

/* Combination themes: four colours, cards cycle through them */
html[data-theme=aurora][data-macaron=true]{--c:#FFB3D9;--c1:#FFB3D9;--c2:#C9B7FF;--c3:#9EE7FF;--c4:#FFF2B2;--green:#8B6FE0;--deep:#4E3F86}
html[data-theme=sea][data-macaron=true]{--c:#7ED6FF;--c1:#9AF0D1;--c2:#7ED6FF;--c3:#FFC36B;--c4:#FF8FB1;--green:#1E9A97;--deep:#17595F}
html[data-theme=berry][data-macaron=true]{--c:#EAB7FF;--c1:#EAB7FF;--c2:#F7CAD8;--c3:#B9D6FF;--c4:#BFE3C0;--green:#9A6CC9;--deep:#4F3F72}
html[data-theme=glass][data-macaron=true]{--c:#BFD9FF;--c1:#B8F0C8;--c2:#FFD7A8;--c3:#BFD9FF;--c4:#F6B4E7;--green:#4F86C6;--deep:#2F4D6E}
html[data-mix=true] body.farm-ui[data-density] #workspace .aggregate-grid>.aggregate-card:nth-child(8n+1){--cc:var(--c1)}
html[data-mix=true] body.farm-ui[data-density] #workspace .aggregate-grid>.aggregate-card:nth-child(8n+2){--cc:var(--c2)}
html[data-mix=true] body.farm-ui[data-density] #workspace .aggregate-grid>.aggregate-card:nth-child(8n+3){--cc:var(--c3)}
html[data-mix=true] body.farm-ui[data-density] #workspace .aggregate-grid>.aggregate-card:nth-child(8n+4){--cc:var(--c4)}
html[data-mix=true] body.farm-ui[data-density] #workspace .aggregate-grid>.aggregate-card:nth-child(8n+5){--cc:var(--c3)}
html[data-mix=true] body.farm-ui[data-density] #workspace .aggregate-grid>.aggregate-card:nth-child(8n+6){--cc:var(--c4)}
html[data-mix=true] body.farm-ui[data-density] #workspace .aggregate-grid>.aggregate-card:nth-child(8n+7){--cc:var(--c1)}
html[data-mix=true] body.farm-ui[data-density] #workspace .aggregate-grid>.aggregate-card:nth-child(8n+8){--cc:var(--c2)}

/* Theme picker: grouped, one clearly selected option */
body.farm-ui #themeDialog{max-height:min(86vh,720px);overflow:auto}
body.farm-ui .theme-group-title{font-size:12px;font-weight:700;color:var(--deep);margin:14px 2px 8px;display:flex;align-items:center;gap:8px}
body.farm-ui .theme-group-title::after{content:"";flex:1;height:1px;background:var(--line)}
body.farm-ui #themeDialog .theme-options{grid-template-columns:repeat(5,minmax(0,1fr))}
body.farm-ui #themeDialog .theme-option,
body.farm-ui #themeDialog .theme-option:hover{border:1px solid var(--line);box-shadow:none}
body.farm-ui #themeDialog .theme-option:hover{background:var(--soft)}
body.farm-ui #themeDialog .theme-option[aria-pressed=true]{border:2px solid var(--green);background:var(--soft);font-weight:700;color:var(--deep)}
body.farm-ui #themeDialog .theme-option[aria-pressed=true]::before{
 content:"✓";position:absolute;top:4px;right:5px;width:16px;height:16px;border-radius:50%;
 background:var(--deep);color:#fff;font-size:10px;line-height:16px;text-align:center;z-index:1}
@media(max-width:700px){body.farm-ui #themeDialog .theme-options{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Feedback stays short; stagger and spotlight above are the optional flourishes. */
body.farm-ui :is(.primary,.secondary,.nav,.theme-trigger,.theme-option,.text-button),
body.farm-ui[data-density] :is(.stats article,.group-card),
body.farm-ui[data-density] #workspace .aggregate-card{transition-duration:.14s}
body.farm-ui[data-density] .sidebar .nav:hover{transform:translateX(1px)}
body.farm-ui[data-density] .sidebar .nav:hover .ui-icon{transform:scale(1.03)}
body.farm-ui[data-density] .stats article:hover,
body.farm-ui[data-density] .group-card:hover,
body.farm-ui[data-density] #workspace .aggregate-card:hover,
body.farm-ui :is(.primary,.secondary):not(:disabled):hover{transform:translateY(-1px)}
body.farm-ui[data-density] .stats article:hover .stat-icon{transform:scale(1.03)}
body.farm-ui[data-density] #workspace .aggregate-card:hover img{transform:scale(1.04)}
body.farm-ui .favorite-button:hover{transform:scale(1.08)}
body.farm-ui :is(.primary,.secondary,.nav,.theme-option):not(:disabled):active{transform:scale(.985)}
body.farm-ui[data-density] .stats article::before,
body.farm-ui .stat-icon,
body.farm-ui[data-density] #workspace .aggregate-card img,
body.farm-ui .favorite-button{transition-duration:.14s}
@media(max-width:360px){
 body.farm-ui[data-density] #statistics article{padding:9px 8px;grid-template-columns:24px minmax(0,1fr);column-gap:4px}
 body.farm-ui #statistics .stat-icon{width:24px!important;height:24px!important}
 body.farm-ui[data-density] #statistics article>strong{font-size:16px;min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.15}
}
@media(hover:none),(pointer:coarse){
 body.farm-ui :is(.nav,.nav .ui-icon,.stats article,.stat-icon,.primary,.secondary,.theme-option,#toggleFilters,.aggregate-card,.aggregate-card img,.favorite-button,.group-card):hover{transform:none!important}
 body.farm-ui,html[data-macaron=true] body.farm-ui{background-attachment:scroll}
}

/* Pause is account-scoped in garden-ui.js and covers old login decoration too. */
body.farm-ui.motion-paused *,body.farm-ui.motion-paused *::before,body.farm-ui.motion-paused *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
body.farm-ui.motion-paused :is(.nav,.nav .ui-icon,.stats article,.stat-icon,.primary,.secondary,.theme-option,#toggleFilters,.aggregate-card,.aggregate-card img,.favorite-button,.group-card){transform:none!important}
body.farm-ui.motion-paused .stats article::before{transform:scaleX(.18)!important}
@media(prefers-reduced-motion:reduce){
 body.farm-ui *,body.farm-ui *::before,body.farm-ui *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 body.farm-ui :is(.nav,.nav .ui-icon,.stats article,.stat-icon,.primary,.secondary,.theme-option,#toggleFilters,.aggregate-card,.aggregate-card img,.favorite-button,.group-card){transform:none!important}
 body.farm-ui .stats article::before{transform:scaleX(.18)!important}
}