/* Róka téma: a nyitókép stílusa (washi papír, hatszögrács, vermilion pecsét, arany érmék, tus színű szöveg).
   Csak :root[data-theme="roka"] alatt él; az olvashatóság miatt a kártyák egyszínűek, a minta csak a háttérben van. */
:root[data-theme="roka"] {
  --bg: #F3EAD6;
  --surface: #FBF5E8;
  --text: #2B1D1A;
  --muted: #74594B;
  --border: #E3D3B0;
  --accent: #3C6A48;      /* fenyőzöld: pozitív összeg, haladás */
  --accent-soft: #E1EAD6;
  --danger: #B02E1F;
  --danger-soft: #F7DDD3;
  --warn: #946000;
  --bar: #D7E2CB;
  --brand: #C8402B;       /* vermilion: gombok, aktív fül, pecsét */
  --brand-soft: #F6E0D4;
  --gold: #E0A82E;
  --radius: 14px;
  color-scheme: light;
}
:root[data-theme="roka"] body {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104'%3E%3Cpath d='M0,0 L30,52 L60,0 M0,104 L30,52 L60,104 M30,52 L30,17.3 M30,52 L0,69.3 M30,52 L60,69.3 M0,0 V104 M60,0 V104 M0,0 L30,17.3 L60,0 M0,104 L30,86.7 L60,104 M30,52 L30,86.7 M30,52 L0,34.7 M30,52 L60,34.7' fill='none' stroke='%23E3D3B0' stroke-width='1.4' opacity='.55'/%3E%3C/svg%3E");
  background-attachment: fixed;
}
:root[data-theme="roka"] h1, :root[data-theme="roka"] h2, :root[data-theme="roka"] h3, :root[data-theme="roka"] .section-title,
:root[data-theme="roka"] .mix-total, :root[data-theme="roka"] .balance-stat .value, :root[data-theme="roka"] .mc-big {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic UI", system-ui, sans-serif;
}

/* Fejléc: Keret felirat a 金 pecséttel */
:root[data-theme="roka"] .topbar { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); border-bottom-color: var(--border); }
:root[data-theme="roka"] .topbar h1 { display: inline-flex; align-items: center; gap: 7px; letter-spacing: .04em; }
:root[data-theme="roka"] .topbar h1::after {
  content: "金"; width: 22px; height: 22px; border-radius: 4px; background: var(--brand); color: var(--surface);
  display: grid; place-items: center; font: 600 14px/1 "Yu Mincho", "Hiragino Mincho ProN", serif; transform: rotate(-4deg);
}
:root[data-theme="roka"] .month-nav button, :root[data-theme="roka"] .bell { background: var(--surface); }

/* Kártyák és dobozok: krémpapír, finom vonallal és árnyékkal */
:root[data-theme="roka"] section.card, :root[data-theme="roka"] .stat, :root[data-theme="roka"] .env, :root[data-theme="roka"] .mc-det {
  box-shadow: 0 1px 0 var(--border), 0 6px 16px -12px rgba(90, 50, 20, .35);
}
:root[data-theme="roka"] .card h2 { align-items: center; }
:root[data-theme="roka"] section.card > h2:first-child { position: relative; padding-left: 11px; }
:root[data-theme="roka"] section.card > h2:first-child::before {
  content: ""; position: absolute; left: 0; top: .15em; bottom: .15em; width: 4px; border-radius: 2px; background: var(--brand);
}
:root[data-theme="roka"] .tp-mix { border-color: color-mix(in srgb, var(--brand) 25%, var(--border)); background: var(--surface); }

/* Borítékok: felül a kategória színcsíkja, a kockák helyett érmék */
:root[data-theme="roka"] .env { border-radius: 12px; box-shadow: inset 0 3px 0 color-mix(in srgb, var(--c) 75%, transparent), 0 1px 0 var(--border), 0 6px 16px -12px rgba(90, 50, 20, .35); }
:root[data-theme="roka"] .env.over { box-shadow: inset 0 3px 0 var(--danger), 0 1px 0 var(--border); }
:root[data-theme="roka"] .env .cells i, :root[data-theme="roka"] .tp-mix .cells i, :root[data-theme="roka"] .sq { border-radius: 50%; }

/* Ikonok: kerek, érme-szerű keret, kicsit vastagabb vonal */
:root[data-theme="roka"] .ico { stroke-width: 2; }
:root[data-theme="roka"] .cicon { border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 35%, transparent); }
:root[data-theme="roka"] .cicon.none { box-shadow: none; }
:root[data-theme="roka"] .goal-ico { border-radius: 50%; background: color-mix(in srgb, var(--gold) 22%, var(--surface)); color: #8A5A0E; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 60%, transparent); }

/* Gombok, fülsor, lapok: vermilion */
:root[data-theme="roka"] .btn { border-radius: 10px; background: var(--surface); }
:root[data-theme="roka"] .btn.primary { background: var(--brand); border-color: var(--brand); color: #FFF8EE; }
:root[data-theme="roka"] .btn.danger { color: var(--danger); }
:root[data-theme="roka"] .fab { background: var(--brand); color: #FFF8EE; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--gold), 0 6px 16px rgba(90, 40, 20, .3); }
:root[data-theme="roka"] .tabbar { background: var(--surface); }
:root[data-theme="roka"] .tabbar button.active { color: var(--brand); position: relative; }
:root[data-theme="roka"] .tabbar button.active::after { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand); }
:root[data-theme="roka"] .sheet-panel { background: var(--surface); }
:root[data-theme="roka"] .sheet-panel button { background: var(--bg); }
:root[data-theme="roka"] .sheet-panel button .sheet-ico { color: var(--brand); }
:root[data-theme="roka"] .sheet-panel button.active { border-color: var(--brand); background: var(--brand-soft); }
:root[data-theme="roka"] .tp-dots i.on { background: var(--brand); }
:root[data-theme="roka"] .bell.active { border-color: var(--brand); color: var(--brand); }
:root[data-theme="roka"] .bell .badge { background: var(--brand); }
:root[data-theme="roka"] .linkbtn { color: var(--brand); }
:root[data-theme="roka"] .theme-opt.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
:root[data-theme="roka"] .seg label:has(input:checked), :root[data-theme="roka"] .chips label:has(input:checked) { background: var(--brand-soft); color: #8E2A1A; border-color: var(--brand); }

/* Mezők, párbeszédablak */
:root[data-theme="roka"] label.field > input, :root[data-theme="roka"] label.field > select { background: #FFFDF8; }
:root[data-theme="roka"] dialog { box-shadow: 0 20px 50px -20px rgba(60, 30, 10, .45); }
:root[data-theme="roka"] dialog::backdrop { background: rgba(43, 29, 26, .45); }
:root[data-theme="roka"] .toast { background: var(--text); color: var(--surface); }
/* a Kiadás doboz kijelölése narancs (a piros túllépésnek tűnne) */
:root[data-theme="roka"] .stat-tap.on { border-color: #D9822B; box-shadow: inset 0 0 0 1px #D9822B; }
:root[data-theme="roka"] .top-seg button.on { background: var(--brand-soft); color: #8E2A1A; }
:root[data-theme="roka"] .badge.soft { background: var(--surface); color: var(--muted); }
:root[data-theme="roka"] .occ-btn.active { border-color: var(--brand); color: var(--brand); }
@media (max-width: 380px) {
  :root[data-theme="roka"] .topbar h1 { font-size: 16px; gap: 5px; letter-spacing: .02em; }
  :root[data-theme="roka"] .topbar h1::after { width: 18px; height: 18px; font-size: 12px; }
}

/* ---------- Róka éj: sötét változat (holdas ég, indigó, arany felhőszél, narancs róka) ---------- */
:root[data-theme="roka"][data-roka="ej"] {
  --bg: #161B3D;
  --surface: #20275A;
  --text: #F6EEDD;
  --muted: #B3B6D6;
  --border: #353E78;
  --accent: #7FCB9C;      /* pozitív összeg, haladás */
  --accent-soft: #24414A;
  --danger: #FF8D76;
  --danger-soft: #4A2A3A;
  --warn: #F5C03E;
  --bar: #2E5A55;
  --brand: #EE7A2F;       /* róka-narancs */
  --brand-soft: #4A3240;
  --gold: #F5C03E;
  color-scheme: dark;
}
:root[data-theme="roka"][data-roka="ej"] body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='%23FFE7A8'%3E%3Ccircle cx='20' cy='30' r='1.1' opacity='.45'/%3E%3Ccircle cx='130' cy='14' r='.8' opacity='.3'/%3E%3Ccircle cx='210' cy='70' r='1.2' opacity='.4'/%3E%3Ccircle cx='70' cy='110' r='.7' opacity='.25'/%3E%3Ccircle cx='170' cy='150' r='1' opacity='.35'/%3E%3Ccircle cx='35' cy='200' r='.8' opacity='.3'/%3E%3Ccircle cx='110' cy='220' r='1.2' opacity='.4'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(#121735, #1E2656);
  background-attachment: fixed;
}
:root[data-theme="roka"][data-roka="ej"] section.card, :root[data-theme="roka"][data-roka="ej"] .stat, :root[data-theme="roka"][data-roka="ej"] .mc-det {
  box-shadow: 0 1px 0 rgba(245, 192, 62, .18), 0 8px 20px -12px rgba(0, 0, 0, .6);
}
:root[data-theme="roka"][data-roka="ej"] .env { box-shadow: inset 0 3px 0 color-mix(in srgb, var(--c) 85%, transparent), 0 8px 20px -12px rgba(0, 0, 0, .6); }
:root[data-theme="roka"][data-roka="ej"] .env.over { box-shadow: inset 0 3px 0 var(--danger); }
:root[data-theme="roka"][data-roka="ej"] .topbar h1::after { background: #D6283F; color: #FFF4E2; }
:root[data-theme="roka"][data-roka="ej"] .btn.primary, :root[data-theme="roka"][data-roka="ej"] .fab { color: #1B1530; }
:root[data-theme="roka"][data-roka="ej"] .fab { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--gold), 0 6px 16px rgba(0, 0, 0, .5); }
:root[data-theme="roka"][data-roka="ej"] .seg label:has(input:checked), :root[data-theme="roka"][data-roka="ej"] .chips label:has(input:checked),
:root[data-theme="roka"][data-roka="ej"] .top-seg button.on { color: #FFB27A; }
:root[data-theme="roka"][data-roka="ej"] .goal-ico { color: var(--gold); }
:root[data-theme="roka"][data-roka="ej"] label.field > input, :root[data-theme="roka"][data-roka="ej"] label.field > select { background: #171D45; }
:root[data-theme="roka"][data-roka="ej"] dialog::backdrop { background: rgba(5, 8, 25, .6); }
:root[data-theme="roka"][data-roka="ej"] .stat-tap.on { border-color: #F5A23E; box-shadow: inset 0 0 0 1px #F5A23E; }
:root[data-theme="roka"][data-roka="ej"] .cicon { background: color-mix(in srgb, var(--c) 22%, transparent); color: color-mix(in srgb, var(--c) 60%, #fff); }
:root[data-theme="roka"][data-roka="ej"] .env-spent { color: color-mix(in srgb, var(--c) 55%, #fff); }
:root[data-theme="roka"][data-roka="ej"] .bv-check { color: #1B1530; }