/* =====================================================================
   Kuwait KMCC member app - extra themes (Admin › App › App theme).
   A theme is a base style from kmcc.css (html data-skin="a" light or "b" dark)
   plus a colour set chosen with html data-tx="<theme>". The rules below are
   written once with --tx-* variables; each theme only sets the variables.
   ===================================================================== */

/* ---------- colour sets ---------- */
:root[data-tx="emerald"] {
  --tx-fd: "Playfair Display", Georgia, serif; --tx-fb: "Manrope", "Segoe UI", sans-serif;
  --tx-bg: #f3efe4; --tx-surface: #fffdf7; --tx-ink: #10241b; --tx-muted: #5e6a60; --tx-line: #e4dcc6;
  --tx-brand: #0d4d36; --tx-brand-light: #1f7a57; --tx-brand-deep: #06281c; --tx-gold: #e8c879;
  --tx-band: radial-gradient(120% 90% at 100% 0%, rgba(232,200,121,.35), transparent 55%), linear-gradient(160deg, #0d4d36, #06281c);
  --tx-band-ink: #f6e7bd; --tx-band-sub: rgba(246,231,189,.78); --tx-iconbtn: rgba(255,255,255,.12); --tx-iconbtn-line: rgba(232,200,121,.45);
  --tx-ic-bg: #0d4d36; --tx-ic-line: #0d4d36; --tx-ic-fg: #e8c879; --tx-ic-r: 14px; --tx-soft: #efe6cc;
  --tx-btn: linear-gradient(135deg, #0d4d36, #06281c); --tx-btn-ink: #f6e7bd; --tx-fab: linear-gradient(135deg, #e8c879, #b8892d); --tx-fab-ink: #06281c;
}
:root[data-tx="ocean"] {
  --tx-fd: "Plus Jakarta Sans", "Segoe UI", sans-serif; --tx-fb: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --tx-bg: #e6f2f7; --tx-paint: linear-gradient(180deg, #d4eaf4, #eef6f9) fixed, #e6f2f7;
  --tx-surface: rgba(255,255,255,.72); --tx-ink: #0b2a3a; --tx-muted: #4d6878; --tx-line: #cfe3ec;
  --tx-brand: #0a6aa1; --tx-brand-light: #2cc2d6; --tx-brand-deep: #074a72; --tx-gold: #f2d64b;
  --tx-band: linear-gradient(160deg, #0a6aa1, #12a4b8); --tx-band-ink: #ffffff; --tx-band-sub: rgba(255,255,255,.82);
  --tx-iconbtn: rgba(255,255,255,.18); --tx-iconbtn-line: rgba(255,255,255,.4);
  --tx-ic-bg: linear-gradient(135deg, #0a6aa1, #2cc2d6); --tx-ic-line: transparent; --tx-ic-fg: #ffffff; --tx-ic-r: 20px; --tx-soft: rgba(10,106,161,.12);
  --tx-btn: linear-gradient(135deg, #0a6aa1, #12a4b8); --tx-btn-ink: #ffffff; --tx-fab: linear-gradient(135deg, #0a6aa1, #2cc2d6); --tx-fab-ink: #ffffff;
  --tx-blur: blur(14px);
}
:root[data-tx="desert"] {
  --tx-fd: "DM Serif Display", Georgia, serif; --tx-fb: "Manrope", "Segoe UI", sans-serif;
  --tx-bg: #f6efe4; --tx-surface: #fffaf2; --tx-ink: #3a2416; --tx-muted: #7a6553; --tx-line: #eadbc7;
  --tx-brand: #b4532a; --tx-brand-light: #d17a45; --tx-brand-deep: #8e3b1d; --tx-gold: #f2c46b;
  --tx-band: linear-gradient(160deg, #c8763f, #8e3b1d); --tx-band-ink: #fff4e6; --tx-band-sub: rgba(255,244,230,.82);
  --tx-iconbtn: rgba(255,255,255,.14); --tx-iconbtn-line: rgba(255,244,230,.4);
  --tx-ic-bg: #f3dfcb; --tx-ic-line: #ead2b8; --tx-ic-fg: #b4532a; --tx-ic-r: 16px; --tx-soft: #f3dfcb;
  --tx-btn: #8e3b1d; --tx-btn-ink: #fff4e6; --tx-fab: linear-gradient(135deg, #c8763f, #8e3b1d); --tx-fab-ink: #ffffff;
}
:root[data-tx="kerala"] {
  --tx-fd: "Baloo Chettan 2", "Manrope", sans-serif; --tx-fb: "Manrope", "Segoe UI", sans-serif;
  --tx-bg: #eef5e6; --tx-surface: #ffffff; --tx-ink: #173016; --tx-muted: #56704f; --tx-line: #d6e6c8;
  --tx-brand: #2f7d32; --tx-brand-light: #4caf50; --tx-brand-deep: #1f5a22; --tx-gold: #e0a526;
  --tx-band: linear-gradient(160deg, #3f9142, #1f5a22); --tx-band-ink: #ffffff; --tx-band-sub: rgba(255,255,255,.82);
  --tx-iconbtn: rgba(255,255,255,.16); --tx-iconbtn-line: rgba(255,255,255,.4);
  --tx-ic-bg: #dcefd2; --tx-ic-line: #cfe5c2; --tx-ic-fg: #2f7d32; --tx-ic-r: 18px; --tx-soft: #dcefd2;
  --tx-btn: #1f5a22; --tx-btn-ink: #ffffff; --tx-fab: linear-gradient(135deg, #e0a526, #f2c94c); --tx-fab-ink: #3b3110;
}
:root[data-tx="pearl"] {
  --tx-fd: "Inter", "Segoe UI", sans-serif; --tx-fb: "Inter", "Segoe UI", sans-serif;
  --tx-bg: #fafafa; --tx-surface: #ffffff; --tx-ink: #111111; --tx-muted: #5f5f5f; --tx-line: #e8e8e8;
  --tx-brand: #111111; --tx-brand-light: #444444; --tx-brand-deep: #000000; --tx-gold: #d4af37;
  --tx-band: transparent; --tx-band-ink: #111111; --tx-band-sub: #5f5f5f; --tx-iconbtn: #ffffff; --tx-iconbtn-line: #e8e8e8;
  --tx-ic-bg: #f1f1f1; --tx-ic-line: #f1f1f1; --tx-ic-fg: #111111; --tx-ic-r: 10px; --tx-soft: #f1f1f1;
  --tx-btn: #111111; --tx-btn-ink: #ffffff; --tx-fab: #111111; --tx-fab-ink: #ffffff;
}
:root[data-tx="rose"] {
  --tx-fd: "Playfair Display", Georgia, serif; --tx-fb: "Manrope", "Segoe UI", sans-serif;
  --tx-bg: #fbf1ee; --tx-surface: #ffffff; --tx-ink: #3b2326; --tx-muted: #7d6266; --tx-line: #f0dcd6;
  --tx-brand: #a55f52; --tx-brand-light: #d89a8a; --tx-brand-deep: #7d4237; --tx-gold: #e6b8a2;
  --tx-band: linear-gradient(160deg, #d89a8a, #a55f52); --tx-band-ink: #ffffff; --tx-band-sub: rgba(255,255,255,.86);
  --tx-iconbtn: rgba(255,255,255,.18); --tx-iconbtn-line: rgba(255,255,255,.45);
  --tx-ic-bg: #f6e1db; --tx-ic-line: #f0d3ca; --tx-ic-fg: #a55f52; --tx-ic-r: 20px; --tx-soft: #f6e1db;
  --tx-btn: #a55f52; --tx-btn-ink: #ffffff; --tx-fab: linear-gradient(135deg, #d89a8a, #a55f52); --tx-fab-ink: #ffffff;
}
:root[data-tx="national"] {
  --tx-fd: "Sora", "Segoe UI", sans-serif; --tx-fb: "Manrope", "Segoe UI", sans-serif;
  --tx-bg: #f4f7f5; --tx-surface: #ffffff; --tx-ink: #10201a; --tx-muted: #55665c; --tx-line: #e1e7e3;
  --tx-brand: #007a3d; --tx-brand-light: #1fa35c; --tx-brand-deep: #005a2c; --tx-gold: #ce1126;
  --tx-band: linear-gradient(180deg, #000000 0%, #1c1c1c 55%, #007a3d 100%); --tx-band-ink: #ffffff; --tx-band-sub: rgba(255,255,255,.82);
  --tx-iconbtn: rgba(255,255,255,.14); --tx-iconbtn-line: rgba(255,255,255,.35);
  --tx-ic-bg: #007a3d; --tx-ic-line: #007a3d; --tx-ic-fg: #ffffff; --tx-ic-r: 16px; --tx-soft: #e2f3e9;
  --tx-btn: #007a3d; --tx-btn-ink: #ffffff; --tx-fab: #ce1126; --tx-fab-ink: #ffffff;
}
:root[data-tx="neon"] {
  --tx-fd: "Space Grotesk", "Segoe UI", sans-serif; --tx-fb: "Space Grotesk", "Segoe UI", sans-serif;
  --tx-bg: #07090c; --tx-surface: #10141a; --tx-ink: #e9f6f1; --tx-muted: #8fa39b; --tx-line: #1d2a25; --tx-field: #0b0f13;
  --tx-acc: #2ef2a0; --tx-acc-grad: linear-gradient(135deg, #7dffc6, #2ef2a0 55%, #14b37a); --tx-acc-ink: #04130d;
  --tx-acc-soft: rgba(46,242,160,.12); --tx-acc-line: rgba(46,242,160,.4); --tx-brand-light: #7dffc6; --tx-brand-deep: #0b3d2a;
  --tx-card: linear-gradient(150deg, #12201b, #0a0f0d);
  --tx-paint: radial-gradient(100% 40% at 80% 0%, rgba(46,242,160,.14) 0%, #07090c 70%) fixed, #07090c;
  --tx-tabbar: rgba(16,20,26,.94); --tx-tab: #6f7d77;
}
:root[data-tx="ramadan"] {
  --tx-fd: "Amiri", Georgia, serif; --tx-fb: "Manrope", "Segoe UI", sans-serif;
  --tx-bg: #0f1230; --tx-surface: #1a1e47; --tx-ink: #f3eee0; --tx-muted: #b6b3cc; --tx-line: #2a2f63; --tx-field: #141838;
  --tx-acc: #e7c169; --tx-acc-grad: linear-gradient(135deg, #f6e2a6, #e7c169 55%, #b8892d); --tx-acc-ink: #1b1408;
  --tx-acc-soft: rgba(231,193,105,.14); --tx-acc-line: rgba(231,193,105,.45); --tx-brand-light: #f6e2a6; --tx-brand-deep: #2a2f63;
  --tx-card: linear-gradient(150deg, #252a66, #141738);
  --tx-paint: radial-gradient(70% 35% at 85% 0%, rgba(231,193,105,.22) 0%, transparent 70%) fixed, linear-gradient(180deg, #1b1f55, #0f1230) fixed, #0f1230;
  --tx-tabbar: rgba(26,30,71,.94); --tx-tab: #8d8aa8;
}

/* ---------- light themes (on the Clean base) ---------- */
:root[data-skin="a"][data-tx] body.app.real {
  --font-display: var(--tx-fd); --font-body: var(--tx-fb);
  --bg: var(--tx-bg); --surface: var(--tx-surface); --ink: var(--tx-ink); --muted: var(--tx-muted); --line: var(--tx-line);
  --brand: var(--tx-brand); --brand-light: var(--tx-brand-light); --brand-deep: var(--tx-brand-deep); --gold: var(--tx-gold);
  background: var(--tx-paint, var(--tx-bg));
}
:root[data-skin="a"][data-tx] .app.real .band { background: var(--tx-band); color: var(--tx-band-ink); }
:root[data-skin="a"][data-tx] .app.real .home-band { padding-block: 18px 22px; border-radius: 0 0 28px 28px; margin-bottom: 14px; }
:root[data-skin="a"][data-tx] .app.real .page-band { padding-block: 16px 16px; border-radius: 0 0 24px 24px; margin-bottom: 12px; }
:root[data-skin="a"][data-tx] .app.real .hello small, :root[data-skin="a"][data-tx] .app.real .page-top small { color: var(--tx-band-sub); }
:root[data-skin="a"][data-tx] .app.real .hello strong, :root[data-skin="a"][data-tx] .app.real .page-top h1 { color: var(--tx-band-ink); font-family: var(--tx-fd); }
:root[data-skin="a"][data-tx] .app.real .icon-btn { background: var(--tx-iconbtn); border-color: var(--tx-iconbtn-line); color: var(--tx-band-ink); }
:root[data-skin="a"][data-tx] .app.real .topbar .mini-logo { border-color: var(--tx-iconbtn-line); }
:root[data-skin="a"][data-tx] .app.real .tile { color: var(--tx-ink); }
:root[data-skin="a"][data-tx] .app.real .tile .ic { background: var(--tx-ic-bg); border-color: var(--tx-ic-line); color: var(--tx-ic-fg); border-radius: var(--tx-ic-r); }
:root[data-skin="a"][data-tx] .app.real .section-head h3, :root[data-skin="a"][data-tx] .app.real .group-title { font-family: var(--tx-fd); color: var(--tx-ink); }
:root[data-skin="a"][data-tx] .app.real .renew-pill { background: var(--tx-soft); color: var(--tx-brand); }
:root[data-skin="a"][data-tx] .app.real .chip.pay-chip, :root[data-skin="a"][data-tx] .app.real .btn,
:root[data-skin="a"][data-tx] .app.real .seg button.on, :root[data-skin="a"][data-tx] .app.real .seg a.on { background: var(--tx-btn); color: var(--tx-btn-ink); }
:root[data-skin="a"][data-tx] .app.real .tab.fab .bubble { background: var(--tx-fab); color: var(--tx-fab-ink); }
:root[data-skin="a"][data-tx] .app.real a.tab.active, :root[data-skin="a"][data-tx] .app.real .tab.active { color: var(--tx-brand); }
:root[data-skin="a"][data-tx] .app.real .tab.active .ind { background: var(--tx-brand); }
:root[data-skin="a"][data-tx] .app.real .tabbar nav { background: var(--tx-surface); border-color: var(--tx-line); -webkit-backdrop-filter: var(--tx-blur, none); backdrop-filter: var(--tx-blur, none); }
:root[data-skin="a"][data-tx] .app.real .panel, :root[data-skin="a"][data-tx] .app.real .item, :root[data-skin="a"][data-tx] .app.real .wing,
:root[data-skin="a"][data-tx] .app.real .search, :root[data-skin="a"][data-tx] .app.real .seg { background: var(--tx-surface); border-color: var(--tx-line); -webkit-backdrop-filter: var(--tx-blur, none); backdrop-filter: var(--tx-blur, none); }
:root[data-skin="a"][data-tx] .app.real .avatar { background: var(--tx-soft); color: var(--tx-brand); }
:root[data-skin="a"][data-tx] .app.real .setting svg, :root[data-skin="a"][data-tx] .app.real .link { color: var(--tx-brand); }
/* National Day: green, red and black service buttons */
:root[data-tx="national"] .app.real .tile:nth-child(3n+2) .ic { background: #ce1126; border-color: #ce1126; }
:root[data-tx="national"] .app.real .tile:nth-child(3n+3) .ic { background: #111111; border-color: #111111; }

/* light themes: sign-in pages */
:root[data-skin="a"][data-tx] body.auth.real.photo, :root[data-skin="a"][data-tx] .auth.photo .real-hero { background: var(--tx-paint, var(--tx-bg)); }
:root[data-skin="a"][data-tx] body.auth, :root[data-skin="a"][data-tx] .auth .control input { font-family: var(--tx-fb); }
:root[data-skin="a"][data-tx] body.auth .sheet h2 { font-family: var(--tx-fd); color: var(--tx-ink); }
:root[data-skin="a"][data-tx] .auth.photo .control:focus-within { border-color: var(--tx-brand); }
:root[data-skin="a"][data-tx] .auth.photo .btn { background: var(--tx-btn); color: var(--tx-btn-ink); }
:root[data-skin="a"][data-tx] .auth .link { color: var(--tx-brand); }

/* ---------- dark themes (on the Premium base) ---------- */
:root[data-skin="b"][data-tx] body.app.real {
  --font-display: var(--tx-fd); --font-body: var(--tx-fb);
  --bg: var(--tx-bg); --surface: var(--tx-surface); --ink: var(--tx-ink); --muted: var(--tx-muted); --line: var(--tx-line); --field: var(--tx-field);
  --brand: var(--tx-acc); --brand-light: var(--tx-brand-light); --brand-deep: var(--tx-brand-deep); --gold: var(--tx-acc);
  --success-bg: var(--tx-acc-soft); --success: var(--tx-acc);
  background: var(--tx-paint);
}
:root[data-skin="b"][data-tx] .app.real .hello strong, :root[data-skin="b"][data-tx] .app.real .page-top h1 { font-family: var(--tx-fd); font-weight: 700; }
:root[data-skin="b"][data-tx] .app.real .hello small, :root[data-skin="b"][data-tx] .app.real .page-top small { color: var(--tx-muted); }
:root[data-skin="b"][data-tx] .app.real .topbar .mini-logo { box-shadow: 0 0 0 1.5px var(--tx-acc); }
:root[data-skin="b"][data-tx] .app.real .icon-btn { border-color: var(--tx-line); color: var(--tx-acc); }
:root[data-skin="b"][data-tx] .app.real .icon-btn .dot { background: var(--tx-acc); }
:root[data-skin="b"][data-tx] .app.real .face { box-shadow: 0 0 0 1.5px var(--tx-acc), 0 20px 40px -18px rgba(0,0,0,.9); }
:root[data-skin="b"][data-tx] .app.real .section-head h3, :root[data-skin="b"][data-tx] .app.real .group-title { color: var(--tx-muted); }
:root[data-skin="b"][data-tx] .app.real .menu { background: var(--tx-surface); border-color: var(--tx-line); }
:root[data-skin="b"][data-tx] .app.real .tile { color: var(--tx-ink); border-color: var(--tx-line); }
:root[data-skin="b"][data-tx] .app.real .tile .ic { color: var(--tx-acc); }
:root[data-skin="b"][data-tx] .app.real .renew-pill { border-color: var(--tx-acc); color: var(--tx-acc); }
:root[data-skin="b"][data-tx] .app.real .chip { border-color: var(--tx-line); color: var(--tx-ink); }
:root[data-skin="b"][data-tx] .app.real .chip svg { color: var(--tx-acc); }
:root[data-skin="b"][data-tx] .app.real .chip.pay-chip, :root[data-skin="b"][data-tx] .app.real .btn,
:root[data-skin="b"][data-tx] .app.real .seg button.on, :root[data-skin="b"][data-tx] .app.real .seg a.on, :root[data-skin="b"][data-tx] .app.real .mini-btn.solid { background: var(--tx-acc-grad); color: var(--tx-acc-ink); }
:root[data-skin="b"][data-tx] .app.real .chip.pay-chip svg { color: var(--tx-acc-ink); }
:root[data-skin="b"][data-tx] .app.real .menu, :root[data-skin="b"][data-tx] .app.real .panel, :root[data-skin="b"][data-tx] .app.real .item, :root[data-skin="b"][data-tx] .app.real .wing,
:root[data-skin="b"][data-tx] .app.real .tx, :root[data-skin="b"][data-tx] .app.real .due, :root[data-skin="b"][data-tx] .app.real .opt, :root[data-skin="b"][data-tx] .app.real .search,
:root[data-skin="b"][data-tx] .app.real .seg, :root[data-skin="b"][data-tx] .app.real .hero-ev, :root[data-skin="b"][data-tx] .app.real .news-hero { background: var(--tx-surface); border-color: var(--tx-line); color: var(--tx-ink); }
:root[data-skin="b"][data-tx] .app.real .panel.empty { background: transparent; }
:root[data-skin="b"][data-tx] .app.real .avatar, :root[data-skin="b"][data-tx] .app.real .tile .ic.avatar { background: var(--tx-acc-soft); color: var(--tx-acc); }
:root[data-skin="b"][data-tx] .app.real .pay-sum, :root[data-skin="b"][data-tx] .app.real .status-card, :root[data-skin="b"][data-tx] .app.real .camp-hero { background: var(--tx-card); border-color: var(--tx-acc-line); }
:root[data-skin="b"][data-tx] .app.real .chips button.on, :root[data-skin="b"][data-tx] .app.real .chips a.on { background: var(--tx-acc); border-color: var(--tx-acc); color: var(--tx-acc-ink); }
:root[data-skin="b"][data-tx] .app.real .chips button, :root[data-skin="b"][data-tx] .app.real .chips a { border-color: var(--tx-line); color: var(--tx-ink); }
:root[data-skin="b"][data-tx] .app.real .form select, :root[data-skin="b"][data-tx] .app.real .form textarea, :root[data-skin="b"][data-tx] .app.real .search input,
:root[data-skin="b"][data-tx] .app.real .control input { background: var(--tx-field); color: var(--tx-ink); border-color: var(--tx-line); }
:root[data-skin="b"][data-tx] .app.real .rows .r, :root[data-skin="b"][data-tx] .app.real .setting { border-color: var(--tx-line); color: var(--tx-ink); }
:root[data-skin="b"][data-tx] .app.real .setting svg, :root[data-skin="b"][data-tx] .app.real .link { color: var(--tx-acc); }
:root[data-skin="b"][data-tx] .app.real .tabbar nav { background: var(--tx-tabbar); border-color: var(--tx-line); }
:root[data-skin="b"][data-tx] .app.real a.tab, :root[data-skin="b"][data-tx] .app.real .tab { color: var(--tx-tab); }
:root[data-skin="b"][data-tx] .app.real a.tab.active, :root[data-skin="b"][data-tx] .app.real .tab.active, :root[data-skin="b"][data-tx] .app.real .tab.fab { color: var(--tx-acc); }
:root[data-skin="b"][data-tx] .app.real .tab.active .ind { background: var(--tx-acc); }
:root[data-skin="b"][data-tx] .app.real .tab.fab .bubble { background: var(--tx-acc-grad); color: var(--tx-acc-ink); box-shadow: 0 0 0 5px var(--tx-bg); }
:root[data-skin="b"][data-tx] .app.real .toast { background: var(--tx-acc); color: var(--tx-acc-ink); }

/* dark themes: sign-in pages */
:root[data-skin="b"][data-tx] body.auth.real.photo { background: var(--tx-paint); color: var(--tx-ink); font-family: var(--tx-fb); }
:root[data-skin="b"][data-tx] .auth.photo .real-logo { box-shadow: 0 0 0 3px var(--tx-acc), 0 0 0 7px var(--tx-acc-soft); }
:root[data-skin="b"][data-tx] .auth.photo .real-name strong, :root[data-skin="b"][data-tx] body.auth .sheet h2 { font-family: var(--tx-fd); }
:root[data-skin="b"][data-tx] .auth.photo .control:focus-within { border-bottom-color: var(--tx-acc); }
:root[data-skin="b"][data-tx] .auth.real .control > svg, :root[data-skin="b"][data-tx] .auth.real .toggle, :root[data-skin="b"][data-tx] .auth.real .link { color: var(--tx-acc); }
:root[data-skin="b"][data-tx] .auth.photo .btn { background: var(--tx-acc-grad); color: var(--tx-acc-ink); }
:root[data-skin="b"][data-tx] .auth.real .join-link, :root[data-skin="b"][data-tx] .auth .photo-pick { border-color: var(--tx-line); }

/* ---------- the style picker on Profile ---------- */
.skin-pick .skin-def { width: 100%; flex-direction: row; justify-content: space-between; margin-bottom: 8px; padding: 12px 14px; }
.skins { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.skin-opt .sw { height: 40px; }
@media (min-width: 600px) { :root[data-skin="b"][data-tx] { background: var(--tx-bg); } }