/* Final demo theme — ONE palette for desktop and mobile.
   Light: white surfaces, green actions.  Dark: deep green-black surfaces, bright-green actions.
   No gold/yellow in either mode. Switch with <html data-theme="light|dark"> (see theme.js). */
:root {
  color-scheme: light;
  --bg: #fff;               /* page */
  --surface: #fff;          /* cards, inputs, popovers */
  --soft: #f4faf6;          /* faint green wash: panels, hover */
  --soft2: #e9f5ee;
  --green: #0b7a53;         /* primary: fills, links, active (5.3:1 on white) */
  --green-h: #096a48;
  --green-d: #07583d;       /* text on light-green tint */
  --green-dd: #053d2b;
  --green-l: #e6f4ec;       /* tags, selected chips */
  --green-m: #cfe9db;
  --green-line: #cfe0d6;
  --on-green: #fff;         /* text on a green fill */
  --ink: #10281f;
  --ink2: #33503f;          /* secondary text */
  --muted: #5b7367;
  --faint: #86a093;         /* placeholders, chevrons */
  --roman: #46604f;
  --line: #e1ece5;
  --box: #9cbcab;           /* checkbox outline */
  --mark: #c6ebd6;          /* search-match highlight: green, not yellow */
  --heart: #d6455d;
  --fav-bg: #fdebee;
  --fav-line: #f4c3cc;
  --seg-on: #fff;
  --nav-bg: rgba(255, 255, 255, .9);
  --glow: rgba(11, 122, 83, .13);
  --glow2: rgba(11, 122, 83, .05);
  --ring: rgba(11, 122, 83, .14);
  --logo-a: #12905f;
  --logo-b: #07583d;
  --sh1: rgba(7, 88, 61, .09);
  --sh2: rgba(7, 88, 61, .15);
  --sh3: rgba(7, 88, 61, .22);
  --shadow: 0 10px 30px rgba(7, 88, 61, .10);
  --shadow-lg: 0 18px 50px rgba(7, 88, 61, .16);
  --scan-filter: none;
  --stage: #e8efe9;
  --sb: #111;
  --ui: "Noto Sans Bengali", "Inter", system-ui, sans-serif;
  --head: "Noto Serif Bengali", serif;
  --bn: "Noto Sans Bengali";
  --ro: "Lora";
  --focus: #0b7a53;
  --s: 1;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a1310;
  --surface: #111e19;
  --soft: #0f1b16;
  --soft2: #172a22;
  --green: #34c48a;
  --green-h: #52d6a0;
  --green-d: #8be8bf;
  --green-dd: #d6f8e8;
  --green-l: #14342a;
  --green-m: #215c45;
  --green-line: #27443a;
  --on-green: #04281b;
  --ink: #e7f2ec;
  --ink2: #bfd5c9;
  --muted: #8fa99c;
  --faint: #5f7c6d;
  --roman: #a9c4b6;
  --line: #1d3228;
  --box: #3d6354;
  --mark: #1f6b4d;
  --heart: #ff7d93;
  --fav-bg: #3a1c26;
  --fav-line: #6e2f40;
  --seg-on: #21402f;
  --nav-bg: rgba(10, 19, 16, .88);
  --glow: rgba(52, 196, 138, .15);
  --glow2: rgba(52, 196, 138, .05);
  --ring: rgba(52, 196, 138, .28);
  --logo-a: #6be3ae;
  --logo-b: #2bbf85;
  --sh1: rgba(0, 0, 0, .35);
  --sh2: rgba(0, 0, 0, .5);
  --sh3: rgba(0, 0, 0, .6);
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .6);
  --scan-filter: brightness(.88) contrast(1.02);
  --stage: #050a08;
  --sb: #d6e6dd;
  --focus: #34c48a;
}
body { font-family: var(--ui); color: var(--ink); background: var(--bg); transition: background-color .25s, color .25s; }
mark { background: var(--mark); color: var(--green-dd); }
::placeholder { color: var(--faint); opacity: 1; }

/* wordmark */
.wm { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; color: var(--ink); }
.wm .ur-w { font: 600 34px/1 "Noto Nastaliq Urdu", serif; color: var(--green); padding-top: 8px; }
.wm span { font: 800 17px/1 var(--head); letter-spacing: 0; white-space: nowrap; }

/* shared controls */
.chip { height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--green-line); background: var(--surface); font-size: 14.5px; color: var(--ink); white-space: nowrap; transition: .15s; }
.chip:hover { border-color: var(--green); color: var(--green); background: var(--soft); }
.chip.on { background: var(--green); border-color: var(--green); color: var(--on-green); font-weight: 700; }
.tag { display: inline-block; background: var(--green-l); color: var(--green-d); padding: 2px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.seg { display: inline-flex; background: var(--soft2); border-radius: 11px; padding: 3px; }
.seg button { height: 34px; padding: 0 14px; border-radius: 9px; font-size: 14px; color: var(--ink2); font-weight: 500; }
.seg button.on { background: var(--seg-on); color: var(--green-d); font-weight: 700; box-shadow: 0 1px 4px var(--sh1); }
.btn { height: 46px; padding: 0 22px; border-radius: 12px; background: var(--green); color: var(--on-green); font-weight: 700; font-size: 15px; transition: .15s; }
.btn:hover { background: var(--green-h); }
.btn.o { background: var(--surface); color: var(--green); border: 1.5px solid var(--green); }
.btn.o:hover { background: var(--soft); }
.ico-b { height: 38px; min-width: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; color: var(--ink2); transition: .15s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ico-b:hover { border-color: var(--green); color: var(--green); }
.ico-b.on { background: var(--green-l); border-color: var(--green-m); color: var(--green-d); }
.ico-b.fav.on { background: var(--fav-bg); border-color: var(--fav-line); color: var(--heart); }
.theme-b svg { width: 18px; height: 18px; }
.theme-b .i-sun { display: none; }
:root[data-theme="dark"] .theme-b .i-sun { display: block; }
:root[data-theme="dark"] .theme-b .i-moon { display: none; }

/* soft decorative star pattern (green, very faint) */
.pat { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%230b7a53' stroke-opacity='.11' stroke-width='1'%3E%3Crect x='16' y='16' width='56' height='56'/%3E%3Crect x='16' y='16' width='56' height='56' transform='rotate(45 44 44)'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-theme="dark"] .pat { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%2334c48a' stroke-opacity='.10' stroke-width='1'%3E%3Crect x='16' y='16' width='56' height='56'/%3E%3Crect x='16' y='16' width='56' height='56' transform='rotate(45 44 44)'/%3E%3C/g%3E%3C/svg%3E"); }