/* Kuwait KMCC member app styles (from the approved HTML prototype) */
  /* Layout: one phone-width column. Green brand band on top with a white card overlapping it,
     on both the login screen and the member home screen; fixed bottom bar on home. */
  :root {
    --bg: #edf3ef;
    --surface: #ffffff;
    --ink: #13261c;
    --muted: #5a6d62;
    --line: #d5e0d9;
    --field: #f5f8f6;
    --brand: #0f8a5c;
    --brand-light: #2bbd87;
    --brand-deep: #075239;
    --gold: #f2d64b;
    --teal: #3e7b8c;
    --on-brand: #f4faf6;
    --danger: #b3261e;
    --danger-bg: #fbeceb;
    --success: #0e7a4c;
    --success-bg: #e6f4ec;
    --shadow: 0 18px 40px -18px rgba(7, 82, 57, .35);
    --nav-bg: rgba(255, 255, 255, .92);
    /* the ID card keeps the printed card's colours in both themes */
    --card-ink: #12392a;
    --card-label: #0f7a52;
    --card-bg: #f3fbf7;
    --card-bar: #232323;
    --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
    --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-arabic: "Noto Kufi Arabic", "Geeza Pro", "Segoe UI", sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0b1511; --surface: #14211a; --ink: #e6efe9; --muted: #9db0a5; --line: #26372e;
      --field: #0f1b15; --brand: #22a874; --brand-light: #39c992; --brand-deep: #0a3b28; --gold: #f2d64b;
      --teal: #6fb0c2; --on-brand: #f4faf6;
      --danger: #f08a82; --danger-bg: #3a1a18; --success: #5fd39b; --success-bg: #14301f;
      --shadow: 0 18px 40px -18px rgba(0, 0, 0, .7);
      --nav-bg: rgba(20, 33, 26, .92);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #0b1511; --surface: #14211a; --ink: #e6efe9; --muted: #9db0a5; --line: #26372e;
    --field: #0f1b15; --brand: #22a874; --brand-light: #39c992; --brand-deep: #0a3b28; --gold: #f2d64b;
    --teal: #6fb0c2; --on-brand: #f4faf6;
    --danger: #f08a82; --danger-bg: #3a1a18; --success: #5fd39b; --success-bg: #14301f;
    --shadow: 0 18px 40px -18px rgba(0, 0, 0, .7);
    --nav-bg: rgba(20, 33, 26, .92);
    color-scheme: dark;
  }

  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html, body { min-height: 100%; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
  }
  button { font: inherit; color: inherit; }
  .gutter {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .col { max-width: 460px; margin: 0 auto; }

  /* ---------- Brand band (shared) ---------- */
  .band {
    background:
      radial-gradient(120% 90% at 100% 0%, rgba(242, 214, 75, .22), transparent 55%),
      linear-gradient(160deg, var(--brand-light) 0%, var(--brand) 45%, var(--brand-deep) 100%);
    color: var(--on-brand);
    position: relative;
    overflow: hidden;
  }
  .band::after {
    content: "";
    position: absolute; inset: 0;
    background-image:
      linear-gradient(45deg, rgba(255,255,255,.07) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.07) 75%),
      linear-gradient(45deg, rgba(255,255,255,.07) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.07) 75%);
    background-size: 28px 28px;
    background-position: 0 0, 14px 14px;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
    pointer-events: none;
  }
  .band > * { position: relative; z-index: 1; }

  /* ---------- Login ---------- */
  .login-band { padding-block: 36px 100px; }
  .login-band .col { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
  .logo-tile {
    background: #ffffff;
    border-radius: 22px;
    padding: 12px 14px;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45);
    border-bottom: 3px solid var(--gold);
  }
  .logo-tile img { display: block; width: 132px; height: auto; }
  .login-band h1 {
    margin: 6px 0 0;
    font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.2;
    text-wrap: balance;
  }
  .login-band .ar { font-family: var(--font-arabic); font-size: 14px; opacity: .9; margin: 0; }

  .sheet {
    max-width: 460px; margin: -64px auto 0;
    background: var(--surface);
    border-radius: 22px;
    box-shadow: var(--shadow);
    padding: 28px 22px 24px;
    position: relative; z-index: 2;
  }
  .sheet h2 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 600; font-size: 20px; }
  .sheet .sub { margin: 0 0 22px; color: var(--muted); font-size: 14px; }

  /* ASP.NET wraps every page in one <form>; keep it a plain block so it adds no gaps */
  form { display: block; margin: 0; }
  .aspNetHidden { display: none; }
  .field { display: flex; flex-direction: column; gap: 6px; }
  .field label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .control {
    display: flex; align-items: center; gap: 10px;
    background: var(--field);
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 0 14px;
    transition: border-color .15s, box-shadow .15s;
  }
  .control:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
  .control.invalid { border-color: var(--danger); }
  .control svg { flex: none; width: 20px; height: 20px; color: var(--muted); }
  .control input {
    flex: 1; min-width: 0;
    border: 0; outline: 0; background: transparent; color: var(--ink);
    font: inherit; font-size: 16px; /* 16px stops iOS zooming on focus */
    padding: 14px 0;
  }
  .control input::placeholder { color: var(--muted); opacity: .7; }
  .toggle { border: 0; background: transparent; color: var(--brand); font-size: 13px; font-weight: 700; cursor: pointer; padding: 8px 2px; }
  :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }
  .check { display: flex; align-items: center; gap: 8px; color: var(--muted); cursor: pointer; }
  .check input { width: 18px; height: 18px; accent-color: var(--brand); margin: 0; }
  .link { color: var(--brand); font-weight: 600; text-decoration: none; }

  .alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; }
  .alert svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
  .alert.error { background: var(--danger-bg); color: var(--danger); }

  .btn {
    display: flex; justify-content: center; align-items: center; gap: 10px;
    width: 100%; border: 0; border-radius: 14px;
    background: linear-gradient(160deg, var(--brand-light), var(--brand) 40%, var(--brand-deep));
    color: var(--on-brand);
    font-family: var(--font-display); font-weight: 600; font-size: 16px;
    padding: 15px 18px; cursor: pointer;
    transition: transform .1s, filter .15s;
  }
  .btn:hover { filter: brightness(1.06); }
  .btn:active { transform: scale(.985); }
  .btn[disabled] { opacity: .75; cursor: progress; }
  .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .demo { margin-top: 20px; padding: 12px 14px; border: 1.5px dashed var(--line); border-radius: 12px; font-size: 13px; color: var(--muted); }
  .demo strong { color: var(--ink); }
  .demo code { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 13px; color: var(--ink); background: var(--field); padding: 1px 6px; border-radius: 6px; }

  .welcome { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-block: 8px; }
  .tick { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--success-bg); color: var(--success); animation: pop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
  .tick svg { width: 36px; height: 36px; }
  .welcome h2 { font-size: 24px; margin: 4px 0 0; }
  .welcome p { margin: 0; color: var(--muted); max-width: 30ch; }
  .welcome .btn { margin-top: 10px; }
  @keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  .shake { animation: shake .4s; }
  @keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
  .foot { text-align: center; color: var(--muted); font-size: 12px; margin: 18px 0 0; }
  .login-wrap { padding-block: 0 32px; }

  /* ---------- Home ---------- */
  .home { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .home-band { padding-block: 14px 110px; }
  .topbar { display: flex; align-items: center; gap: 12px; }
  .topbar .mini-logo { background: #ffffff; border-radius: 12px; padding: 5px 7px; flex: none; }
  .topbar .mini-logo img { display: block; width: 44px; height: auto; }
  .hello { flex: 1; min-width: 0; }
  .hello small { display: block; font-size: 12px; opacity: .85; letter-spacing: .02em; }
  .hello strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .icon-btn {
    flex: none; width: 42px; height: 42px; border-radius: 14px;
    display: grid; place-items: center; position: relative;
    border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .16); color: var(--on-brand);
  }
  .icon-btn svg { width: 22px; height: 22px; }
  .icon-btn .dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--brand); }

  .home-main { margin-top: -96px; position: relative; z-index: 2; display: flex; flex-direction: column; gap: 16px; }

  /* ID card with flip: compact, about 260px tall on a phone */
  .idcard-wrap { display: flex; flex-direction: column; gap: 8px; }
  .idcard { perspective: 1400px; cursor: pointer; border: 0; padding: 0; background: none; text-align: left; width: 100%; border-radius: 18px; }
  .idcard-inner {
    display: grid;
    transition: transform .7s cubic-bezier(.3, .7, .2, 1);
    transform-style: preserve-3d;
  }
  .idcard.flipped .idcard-inner { transform: rotateY(180deg); }
  .face {
    grid-area: 1 / 1;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    background:
      linear-gradient(135deg, transparent 86%, rgba(43, 189, 135, .55) 86%, rgba(15, 138, 92, .9) 100%),
      var(--card-bg);
    color: var(--card-ink);
    border-radius: 18px;
    border: 1px solid #cfe8dc;
    box-shadow: 0 24px 50px -22px rgba(4, 50, 34, .55);
    padding: 10px;
    display: flex; flex-direction: column; gap: 8px;
    overflow: hidden;
    position: relative;
  }
  .face.back { transform: rotateY(180deg); justify-content: space-between; }
  .card-head { display: flex; align-items: stretch; gap: 0; }
  .card-head .lg { flex: none; width: 50px; background: #ffffff; border: 1px solid #d9e3de; border-radius: 10px; display: grid; place-items: center; position: relative; z-index: 1; }
  .card-head .lg img { width: 42px; height: auto; display: block; }
  .card-head .titles { flex: 1; min-width: 0; margin-left: -6px; display: flex; flex-direction: column; border-radius: 0 10px 10px 0; overflow: hidden; }
  .card-head .ar {
    background: linear-gradient(90deg, #2bbd87, #0a6e4b); color: #ffffff;
    font-family: var(--font-arabic); font-size: 10.5px; line-height: 1.6; text-align: center;
    padding: 2px 6px 2px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .card-head .bar {
    background: var(--card-bar); color: #ffffff;
    font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
    padding: 4px 12px 4px 16px;
  }
  .who { display: flex; gap: 10px; align-items: center; }
  .who .photo { flex: none; width: 58px; border-radius: 8px; border: 2px solid #ffffff; box-shadow: 0 0 0 1px #cfe8dc; overflow: hidden; }
  .who .photo img { display: block; width: 100%; height: auto; }
  .who .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
  .who .name { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; line-height: 1.25; text-transform: uppercase; overflow-wrap: anywhere; }
  .pill-gold { background: var(--gold); color: #1f1f1f; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; white-space: nowrap; }
  .pill-gold b { letter-spacing: .04em; margin-left: 4px; font-variant-numeric: tabular-nums; }
  .qr { flex: none; width: 62px; height: 62px; padding: 3px; background: #ffffff; border: 1px solid #cfe8dc; border-radius: 8px; display: grid; place-items: center; }
  .qr canvas, .qr img { width: 54px !important; height: 54px !important; display: block; }
  .details { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; position: relative; z-index: 1; }
  .details div { min-width: 0; }
  .details dt { color: var(--card-label); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; }
  .details dd { margin: 0; font-size: 12.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
  .validity {
    background: linear-gradient(90deg, #0b4d36, #0f8a5c);
    color: #ffffff; border-radius: 10px; padding: 5px 12px;
    display: flex; justify-content: center; gap: 12px;
    font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .04em;
    position: relative; z-index: 1;
  }
  .validity span { opacity: .8; font-weight: 500; }
  .back p { margin: 0; font-size: 10.5px; line-height: 1.45; text-align: center; color: #33473d; }
  .sponsors { display: flex; justify-content: center; gap: 10px; }
  .sponsors img { height: 34px; width: auto; border-radius: 5px; display: block; }
  .office { text-align: center; font-size: 10.5px; line-height: 1.45; color: #33473d; position: relative; z-index: 1; }
  .office b { color: var(--card-label); display: block; font-family: var(--font-display); font-size: 11px; }

  .card-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .chip.pay-chip { background: linear-gradient(160deg, var(--brand-light), var(--brand)); color: #ffffff; border-color: transparent; position: relative; }
  .chip.pay-chip svg { color: #ffffff; }
  .due-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-left: 2px; }
  /* payments */
  .pay-sum { border-radius: 20px; padding: 16px; color: #ffffff; background: linear-gradient(140deg, #232323, #0b4d36 70%, #0f8a5c); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }
  .pay-sum .big { font-family: var(--font-display); font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
  .pay-sum .lbl { font-size: 12px; opacity: .8; letter-spacing: .04em; }
  .pay-sum .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pay-sum .split div { background: rgba(255,255,255,.1); border-radius: 12px; padding: 8px 10px; }
  .pay-sum .split b { display: block; font-family: var(--font-display); font-size: 15px; font-variant-numeric: tabular-nums; }
  .due { display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1.5px solid var(--gold); border-radius: 16px; padding: 12px; }
  .due .body { flex: 1; min-width: 0; }
  .due strong { display: block; font-size: 14.5px; }
  .due small { color: var(--muted); font-size: 12.5px; }
  .amt { font-family: var(--font-display); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .tx { display: block; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 16px; padding: 12px; cursor: pointer; }
  .tx .top { display: flex; gap: 12px; align-items: center; }
  .tx .body { flex: 1; min-width: 0; }
  .tx strong { display: block; font-size: 14.5px; }
  .tx small { color: var(--muted); font-size: 12.5px; }
  .receipt { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
  .receipt span { color: var(--muted); }
  .receipt b { text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .chip {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
    border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  }
  .chip svg { width: 15px; height: 15px; color: var(--brand); }

  /* Quick menu */
  .section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
  .section-head h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 17px; }
  .section-head a { font-size: 13px; }
  .menu {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
    background: var(--surface); border-radius: 22px; padding: 12px 8px;
    box-shadow: 0 10px 30px -20px rgba(7, 82, 57, .35);
  }
  .tile {
    border: 0; background: transparent; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 4px 2px; border-radius: 14px;
    font-size: 12px; font-weight: 700; color: var(--ink); text-align: center; line-height: 1.2;
    transition: transform .12s;
  }
  .tile:active { transform: scale(.94); }
  .tile .ic {
    width: 46px; height: 46px; border-radius: 15px;
    display: grid; place-items: center;
    background: var(--tint-bg); color: var(--tint);
  }
  .tile .ic svg { width: 24px; height: 24px; }
  .t-green  { --tint: #0f8a5c; --tint-bg: #e3f5ec; }
  .t-teal   { --tint: #2f6f80; --tint-bg: #e1eff3; }
  .t-gold   { --tint: #9a7400; --tint-bg: #fbf2cc; }
  .t-coral  { --tint: #c2492f; --tint-bg: #fbe6df; }
  .t-indigo { --tint: #4a55a8; --tint-bg: #e7e9f8; }
  .t-plum   { --tint: #8a3f86; --tint-bg: #f4e4f2; }
  .t-sky    { --tint: #1f74b8; --tint-bg: #e0eefa; }
  .t-slate  { --tint: #3f5560; --tint-bg: #e5ecef; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .avatar[class*="t-"], :root:not([data-theme="light"]) [class*="t-"] > .avatar { background: color-mix(in srgb, var(--tint) 22%, transparent); color: color-mix(in srgb, var(--tint) 45%, #ffffff); }
    :root:not([data-theme="light"]) .tile .ic { background: color-mix(in srgb, var(--tint) 22%, transparent); color: color-mix(in srgb, var(--tint) 45%, #ffffff); }
  }
  :root[data-theme="dark"] .avatar[class*="t-"], :root[data-theme="dark"] [class*="t-"] > .avatar { background: color-mix(in srgb, var(--tint) 22%, transparent); color: color-mix(in srgb, var(--tint) 45%, #ffffff); }
  :root[data-theme="dark"] .tile .ic { background: color-mix(in srgb, var(--tint) 22%, transparent); color: color-mix(in srgb, var(--tint) 45%, #ffffff); }

  /* ---------- Inner pages ---------- */
  .page-band { padding-block: 14px 66px; }
  .page-top { display: flex; align-items: center; gap: 12px; }
  .page-top .titles { flex: 1; min-width: 0; }
  .page-top h1 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.2; }
  .page-top small { display: block; font-size: 12.5px; opacity: .85; }
  .sample-tag { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); border-radius: 6px; padding: 3px 7px; white-space: nowrap; }
  .page-main { margin-top: -50px; position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; }
  .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px; }
  .panel.raised { border: 0; box-shadow: var(--shadow); }
  .panel h3, .group-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
  .group-title { margin: 4px 2px -4px; color: var(--muted); font-size: 12px; font-family: var(--font-body); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .muted { color: var(--muted); }

  .seg { display: flex; gap: 6px; background: var(--surface); padding: 5px; border-radius: 14px; box-shadow: var(--shadow); }
  .seg button, .seg a { flex: 1; border: 0; background: transparent; border-radius: 10px; padding: 9px 6px; font-size: 13.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
  .seg button.on, .seg a.on { background: linear-gradient(160deg, var(--brand-light), var(--brand)); color: #ffffff; }
  .chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chips button, .chips a { flex: none; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
  .chips button.on, .chips a.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .search { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 14px; padding: 0 14px; box-shadow: var(--shadow); }
  .search svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
  .search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; padding: 13px 0; }

  .stack { display: flex; flex-direction: column; gap: 10px; }
  .item { display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px; }
  .item .body { flex: 1; min-width: 0; }
  .item strong { display: block; font-size: 14.5px; line-height: 1.3; }
  .item small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
  .avatar { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; background: var(--tint-bg, var(--success-bg)); color: var(--tint, var(--success)); }
  .avatar svg { width: 22px; height: 22px; }
  .mini-btn { flex: none; border: 1.5px solid var(--line); background: var(--surface); color: var(--brand); border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 800; cursor: pointer; }
  .mini-btn.solid { background: var(--brand); border-color: var(--brand); color: #ffffff; }
  .mini-btn.done { background: var(--success-bg); border-color: transparent; color: var(--success); }
  .meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; font-size: 12px; color: var(--muted); }
  .meta span { display: inline-flex; align-items: center; gap: 4px; }
  .meta svg { width: 14px; height: 14px; }
  .pill { display: inline-block; font-size: 11px; font-weight: 800; border-radius: 6px; padding: 2px 7px; background: var(--success-bg); color: var(--success); }

  /* event hero */
  .hero-ev { border-radius: 20px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
  .hero-ev .art {
    height: 112px; position: relative; color: #ffffff; padding: 14px;
    background:
      radial-gradient(90% 120% at 100% 0%, rgba(242, 214, 75, .45), transparent 60%),
      linear-gradient(135deg, #0a6e4b, #2bbd87);
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  .hero-ev .art::after { content: ""; position: absolute; right: 18px; top: 18px; width: 46px; height: 46px; border: 3px solid rgba(255,255,255,.5); border-radius: 10px; transform: rotate(45deg); }
  .hero-ev .art b { font-family: var(--font-display); font-size: 19px; line-height: 1.2; position: relative; z-index: 1; }
  .hero-ev .art span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
  .hero-ev .info { padding: 12px 14px 14px; display: flex; align-items: center; gap: 12px; }
  .hero-ev .info .body { flex: 1; min-width: 0; }
  .date { flex: none; width: 50px; text-align: center; border-radius: 12px; padding: 6px 0; background: var(--success-bg); color: var(--success); font-family: var(--font-display); line-height: 1.1; }
  .date b { display: block; font-size: 18px; }
  .date span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

  /* wings grid */
  .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wing { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer; color: var(--ink); }
  .wing strong { font-size: 14px; line-height: 1.25; }
  .wing small { color: var(--muted); font-size: 12px; line-height: 1.4; }
  .wing .count { font-size: 11.5px; font-weight: 800; color: var(--tint); }

  /* sponsors */
  .sponsor-big { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
  .sponsor-big img { width: 100%; max-width: 280px; height: auto; border-radius: 12px; display: block; }
  .slot { border: 2px dashed var(--line); border-radius: 14px; min-height: 76px; display: grid; place-items: center; color: var(--muted); font-size: 12.5px; font-weight: 700; text-align: center; padding: 8px; }

  /* welfare */
  .status-card { border-radius: 20px; padding: 16px; color: #ffffff; background: linear-gradient(140deg, #0a6e4b, #0f8a5c 55%, #2bbd87); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }
  .status-card .row1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .status-card .ok { background: var(--gold); color: #1f1f1f; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
  .status-card .nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .status-card .nums div { background: rgba(255,255,255,.14); border-radius: 12px; padding: 8px 10px; }
  .status-card .nums b { display: block; font-family: var(--font-display); font-size: 16px; font-variant-numeric: tabular-nums; }
  .status-card .nums span { font-size: 11px; opacity: .85; }
  .benefit { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
  .benefit svg { flex: none; width: 18px; height: 18px; color: var(--success); margin-top: 2px; }
  .form { display: flex; flex-direction: column; gap: 12px; }
  .form select, .form textarea { width: 100%; border: 1.5px solid var(--line); background: var(--field); color: var(--ink); border-radius: 12px; padding: 12px; font: inherit; font-size: 16px; }
  .form textarea { min-height: 84px; resize: vertical; }
  .form label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
  .note-ok { background: var(--success-bg); color: var(--success); border-radius: 12px; padding: 12px; font-size: 13.5px; font-weight: 700; }

  /* news */
  .news-hero { border-radius: 20px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); text-align: left; border: 0; padding: 0; cursor: pointer; color: var(--ink); width: 100%; }
  .news-hero .art { height: 130px; background: linear-gradient(135deg, var(--teal), #0a6e4b); position: relative; }
  .news-hero .art::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(45deg, rgba(255,255,255,.08) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.08) 75%), linear-gradient(45deg, rgba(255,255,255,.08) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.08) 75%); background-size: 24px 24px; background-position: 0 0, 12px 12px; }
  .news-hero .txt { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
  .news-hero .pill { align-self: flex-start; }
  .news-hero b { font-family: var(--font-display); font-size: 16px; line-height: 1.3; }
  .thumb { flex: none; width: 64px; height: 64px; border-radius: 12px; background: linear-gradient(135deg, var(--tint), color-mix(in srgb, var(--tint) 55%, #ffffff)); }
  .article p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; }

  /* profile */
  .profile-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
  .profile-head img { width: 84px; height: 84px; object-fit: cover; object-position: top; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--brand); }
  .profile-head strong { font-family: var(--font-display); font-size: 17px; text-transform: uppercase; }
  .rows { display: flex; flex-direction: column; }
  .rows .r { display: flex; justify-content: space-between; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
  .rows .r:last-child { border-bottom: 0; }
  .rows .r span { color: var(--muted); }
  .rows .r b { text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
  .setting { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; color: var(--ink); padding: 12px 2px; border-bottom: 1px solid var(--line); font-size: 14.5px; font-weight: 600; cursor: pointer; text-align: left; }
  .setting:last-child { border-bottom: 0; }
  .setting svg { width: 20px; height: 20px; color: var(--brand); flex: none; }
  .setting .grow { flex: 1; }
  .setting .val { color: var(--muted); font-size: 13px; font-weight: 600; }
  .switch { width: 44px; height: 26px; border-radius: 999px; background: var(--line); position: relative; flex: none; transition: background .2s; }
  .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #ffffff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
  .switch.on { background: var(--brand); }
  .switch.on::after { transform: translateX(18px); }
  .btn-danger { width: 100%; border: 1.5px solid var(--danger); background: transparent; color: var(--danger); border-radius: 14px; padding: 13px; font-family: var(--font-display); font-weight: 600; font-size: 15px; cursor: pointer; }

  /* notifications */
  .item.unread { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
  .item .unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); flex: none; }

  /* ---------- Membership campaign ---------- */
  .renew-pill { border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; background: var(--gold); color: #1f1f1f; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 800; }
  .renew-pill svg { width: 15px; height: 15px; }
  .renew-pill.done { background: var(--success-bg); color: var(--success); }
  .camp-hero { border-radius: 20px; padding: 16px; color: #ffffff; background: radial-gradient(100% 120% at 100% 0%, rgba(242, 214, 75, .35), transparent 55%), linear-gradient(140deg, #0b4d36, #0f8a5c 60%, #2bbd87); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
  .camp-hero .eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
  .camp-hero h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.2; text-wrap: balance; }
  .camp-hero p { margin: 0; font-size: 13.5px; opacity: .92; }
  .countdown { display: flex; gap: 8px; }
  .countdown div { background: rgba(255,255,255,.14); border-radius: 12px; padding: 7px 12px; }
  .countdown b { display: block; font-family: var(--font-display); font-size: 18px; font-variant-numeric: tabular-nums; }
  .countdown span { font-size: 11px; opacity: .85; }
  .steps { display: flex; gap: 6px; }
  .steps div { flex: 1; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); padding-top: 8px; border-top: 3px solid var(--line); }
  .steps div.on { color: var(--brand); border-color: var(--brand); }
  .opt { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; background: var(--surface); }
  .opt.sel { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
  .opt input { width: 20px; height: 20px; accent-color: var(--brand); margin: 0; flex: none; }
  .opt .body { flex: 1; min-width: 0; }
  .opt strong { display: block; font-size: 14.5px; }
  .opt small { color: var(--muted); font-size: 12.5px; }
  .total-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 2px; font-size: 14px; }
  .panel.total-row { padding: 12px 14px; }
  .total-row b { font-family: var(--font-display); font-size: 20px; font-variant-numeric: tabular-nums; }
  .join-link { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
  .join-form { display: flex; flex-direction: column; gap: 14px; }
  .join-form .control select { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; padding: 14px 0; }
  .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .photo-pick { display: flex; align-items: center; gap: 12px; border: 1.5px dashed var(--line); border-radius: 14px; padding: 10px 12px; cursor: pointer; color: var(--muted); font-size: 13.5px; font-weight: 600; }
  .photo-pick .ph { width: 52px; height: 60px; border-radius: 8px; background: var(--field); display: grid; place-items: center; overflow: hidden; flex: none; }
  .photo-pick .ph img { width: 100%; height: 100%; object-fit: cover; }
  .photo-pick input { display: none; }

  /* expired membership */
  .idcard.expired .face.front::before {
    content: "EXPIRED"; position: absolute; top: 50%; left: 50%; z-index: 3;
    transform: translate(-50%, -50%) rotate(-12deg);
    border: 3px solid #c62828; color: #c62828; background: rgba(255, 255, 255, .72);
    font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: .22em;
    padding: 4px 16px; border-radius: 10px;
  }
  .idcard.expired .photo img { filter: grayscale(1); }
  .idcard.expired .validity { background: linear-gradient(90deg, #7f1d1d, #c62828); }
  .exp-banner { display: flex; align-items: center; gap: 10px; background: var(--danger-bg); color: var(--danger); border: 1.5px solid color-mix(in srgb, var(--danger) 45%, transparent); border-radius: 14px; padding: 8px 10px 8px 12px; margin-bottom: 8px; font-size: 12.5px; font-weight: 700; line-height: 1.35; }
  .exp-banner span { flex: 1; min-width: 0; }
  .exp-banner button, .exp-banner a { text-decoration: none; flex: none; border: 0; border-radius: 10px; background: var(--danger); color: #ffffff; font-weight: 800; font-size: 12.5px; padding: 8px 12px; cursor: pointer; }
  .tile.locked { opacity: .55; }
  .tile.locked .ic { filter: grayscale(1); position: relative; }
  .tile.locked .ic::after {
    content: ""; position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; border-radius: 50%;
    background: #3b4a42 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / 12px no-repeat;
    border: 2px solid var(--surface);
  }
  .tab.locked { opacity: .4; }

  /* approval / payment trail */
  .trail { display: flex; flex-direction: column; gap: 0; margin: 4px 0 0; padding: 0; list-style: none; }
  .trail li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; position: relative; padding-bottom: 14px; }
  .trail li:last-child { padding-bottom: 0; }
  .trail li::before { content: ""; position: absolute; left: 12px; top: 24px; bottom: 0; width: 2px; background: var(--line); }
  .trail li:last-child::before { display: none; }
  .trail li.done::before { background: var(--brand); }
  .trail .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--field); border: 2px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 800; position: relative; z-index: 1; }
  .trail li.done .dot { background: var(--brand); border-color: var(--brand); color: #ffffff; }
  .trail li.now .dot { background: var(--gold); border-color: var(--gold); color: #1f1f1f; }
  .trail .dot svg { width: 14px; height: 14px; }
  .trail strong { display: block; font-size: 13.5px; line-height: 1.3; }
  .trail small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
  .trail li.now small.state { color: #9a7400; font-weight: 700; }
  .tag-c { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-radius: 6px; padding: 2px 6px; margin-left: 6px; vertical-align: 1px; }
  .tag-c.req { background: var(--danger-bg); color: var(--danger); }
  .tag-c.opt { background: var(--field); color: var(--muted); border: 1px solid var(--line); }
  .demo-btn { align-self: center; border: 1.5px dashed var(--line); background: transparent; color: var(--muted); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
  .st { font-size: 11px; font-weight: 800; border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
  .st.ok { background: var(--success-bg); color: var(--success); }
  .st.wait { background: #fbf2cc; color: #7a5c00; }

  /* Bottom bar */
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
  }
  .tabbar nav {
    pointer-events: auto;
    max-width: 460px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    background: var(--nav-bg);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .35);
    padding: 8px 6px;
  }
  .tab {
    border: 0; background: transparent; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 0; color: var(--muted); font-size: 11px; font-weight: 700;
  }
  .tab svg { width: 23px; height: 23px; }
  .tab.active { color: var(--brand); }
  .tab.active svg { transform: translateY(-1px); }
  .tab .ind { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
  .tab.active .ind { background: var(--brand); }
  .tab.fab { margin-top: -30px; }
  .tab.fab .bubble {
    width: 60px; height: 60px; border-radius: 20px;
    display: grid; place-items: center;
    background: linear-gradient(160deg, var(--brand-light), var(--brand) 45%, var(--brand-deep));
    color: #ffffff;
    box-shadow: 0 12px 24px -10px rgba(7, 82, 57, .8), 0 0 0 5px var(--bg);
    transform: rotate(45deg);
  }
  .tab.fab .bubble svg { transform: rotate(-45deg); width: 26px; height: 26px; }
  .tab.fab { color: var(--ink); }

  .toast {
    position: fixed; left: 50%; bottom: calc(104px + env(safe-area-inset-bottom, 0px)); z-index: 30;
    transform: translate(-50%, 12px); opacity: 0;
    background: var(--ink); color: var(--bg);
    padding: 10px 16px; border-radius: 12px; font-size: 13.5px; font-weight: 600;
    max-width: calc(100% - 32px); text-align: center;
    transition: opacity .2s, transform .2s; pointer-events: none;
  }
  .toast.show { opacity: 1; transform: translate(-50%, 0); }

  @media (min-width: 600px) {
    .menu { padding: 20px 14px; }
  }
  /* short phones (iPhone SE size): tighten so the home page still fits one screen */
  @media (max-height: 700px) {
    .home-band { padding-block: 10px 106px; }
    .home-main { gap: 10px; }
    .section-head { margin-bottom: 4px; }
    .section-head h3 { font-size: 15px; }
    .menu { padding: 8px 6px; gap: 4px; }
    .tile { gap: 4px; padding: 2px; }
    .tile .ic { width: 42px; height: 42px; }
    .home { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }

  /* ---------- Web Forms additions ---------- */
  html, body { overflow-x: hidden; }
  a.tile, a.tab, a.wing, a.setting, a.chip, a.btn { text-decoration: none; }
  a.tab { color: var(--muted); }
  a.tab.active { color: var(--brand); }
  .field-error { color: var(--danger); font-size: 13px; font-weight: 600; }
  .page-msg { border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 600; }
  .page-msg.ok { background: var(--success-bg); color: var(--success); }
  .page-msg.err { background: var(--danger-bg); color: var(--danger); }
  .empty { color: var(--muted); text-align: center; padding: 18px; }
  .tx-more { margin-top: 10px; }
  .tx[data-expand] { cursor: pointer; }
  .inline-form { display: flex; flex-direction: column; gap: 12px; }
  .form textarea, .form select, .form input[type=text] { width: 100%; }
  .seg a, .chips a { text-decoration: none; text-align: center; }
  a.mini-btn, a.item { text-decoration: none; }
  a.btn, a.btn-danger { display: block; text-align: center; text-decoration: none; }
  a.setting:last-child { border-bottom: 0; }
  a.renew-pill, a.meta, a.pay-chip { text-decoration: none; }
  a.meta { color: var(--muted); }

  /* ---------- Polish (customer review) ---------- */
  /* more room above the bottom bar so the last item is never tucked under it */
  .home { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
  /* keep the "My Card" label clear of the rotated button */
  .tab.fab .bubble { margin-bottom: 10px; }
  /* friendly empty states with an icon instead of a bare line of text */
  .panel.empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 30px 18px; text-align: center; color: var(--muted); font-weight: 600; font-size: 14px;
    border-style: dashed; background: color-mix(in srgb, var(--surface) 70%, transparent);
  }
  .panel.empty::before {
    content: ""; width: 54px; height: 54px; border-radius: 18px;
    background: var(--success-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f8a5c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center / 26px no-repeat;
  }
  .page-main > .panel.empty { box-shadow: var(--shadow); border: 0; background: var(--surface); }
  /* welfare summary: keep figures on one line, status as a pill */
  .status-card .nums b { white-space: nowrap; font-size: 15px; }
  .status-card .row1 > span:not(.ok) { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
  /* long member names on the home greeting wrap to two lines instead of being cut */
  .hello strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }

  /* =====================================================================
     "Emerald & Gold" premium theme (overrides the base palette above)
     Deep emerald header, ivory background, glass cards, gold accents.
     ===================================================================== */
  :root {
    --bg: #f5f2ea;
    --surface: #ffffff;
    --ink: #0c1f18;
    --muted: #5d6c64;
    --line: #e6e0d2;
    --field: #faf8f2;
    --brand: #0b7353;
    --brand-light: #17a57b;
    --brand-deep: #032a1e;
    --gold: #e2bc5c;
    --gold-light: #f6dc8f;
    --gold-deep: #b4862c;
    --teal: #0f766e;
    --on-brand: #fbf8ef;
    --glass: rgba(255, 255, 255, .78);
    --glass-line: rgba(255, 255, 255, .7);
    --shadow: 0 22px 44px -24px rgba(3, 42, 30, .45);
    --nav-bg: rgba(4, 38, 27, .92);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #06120d; --surface: #0f1e18; --line: #1f3229; --field: #0b1913;
      --glass: rgba(18, 36, 28, .78); --glass-line: rgba(255, 255, 255, .06);
      --gold: #e2bc5c; --gold-light: #f6dc8f; --gold-deep: #b4862c;
      --nav-bg: rgba(2, 20, 14, .94);
    }
  }
  :root[data-theme="dark"] {
    --bg: #06120d; --surface: #0f1e18; --line: #1f3229; --field: #0b1913;
    --glass: rgba(18, 36, 28, .78); --glass-line: rgba(255, 255, 255, .06);
    --nav-bg: rgba(2, 20, 14, .94);
  }

  body {
    background:
      radial-gradient(80% 50% at 100% 0%, rgba(226, 188, 92, .10), transparent 60%),
      var(--bg);
    background-attachment: fixed;
  }

  /* Header band: deep emerald with a soft gold glow and a fine gold pattern */
  .band {
    background:
      radial-gradient(70% 90% at 95% 0%, rgba(246, 220, 143, .30), transparent 60%),
      radial-gradient(60% 80% at 0% 100%, rgba(23, 165, 123, .35), transparent 65%),
      linear-gradient(160deg, #0d4a37 0%, #063325 50%, #021a12 100%);
  }
  .band::after {
    background-image:
      linear-gradient(45deg, rgba(226,188,92,.09) 25%, transparent 25%, transparent 75%, rgba(226,188,92,.09) 75%),
      linear-gradient(45deg, rgba(226,188,92,.09) 25%, transparent 25%, transparent 75%, rgba(226,188,92,.09) 75%);
  }
  .band::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 1;
    background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .7;
  }
  .login-band h1, .page-top h1 { letter-spacing: -.01em; }
  .login-band h1 { background: linear-gradient(180deg, #ffffff, var(--gold-light)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .login-band .ar, .hello small { color: var(--gold-light); opacity: 1; }
  .logo-tile { border-bottom: 0; box-shadow: 0 0 0 3px rgba(226,188,92,.55), 0 18px 40px -14px rgba(0,0,0,.6); }
  .topbar .mini-logo { box-shadow: 0 0 0 2px rgba(226,188,92,.6); }
  .icon-btn { background: rgba(255,255,255,.10); border: 1px solid rgba(226,188,92,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .icon-btn .dot { box-shadow: 0 0 0 2px #063325; }

  /* Glass cards */
  .sheet, .menu, .panel, .item, .wing, .tx, .due, .opt, .search, .seg, .hero-ev, .news-hero {
    background: var(--glass);
    -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid var(--glass-line);
    box-shadow: var(--shadow);
  }
  .sheet { border-top: 3px solid var(--gold); }
  .item, .wing, .tx { box-shadow: 0 12px 28px -22px rgba(3, 42, 30, .5); }
  .panel.empty { border: 1px dashed var(--line); }
  .group-title, .section-head h3 { color: var(--brand-deep); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .group-title, :root:not([data-theme="light"]) .section-head h3 { color: var(--gold-light); } }

  /* Buttons: emerald with a gold edge; gold for highlights */
  .btn {
    background: linear-gradient(150deg, #17a57b 0%, #0b7353 45%, #043a29 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 1px rgba(226,188,92,.45), 0 14px 26px -14px rgba(3,42,30,.8);
    letter-spacing: .01em;
  }
  .renew-pill, .pill-gold, .status-card .ok {
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-deep));
    color: #2a1d00;
    box-shadow: 0 6px 14px -8px rgba(180,134,44,.9);
  }
  .chip.pay-chip { background: linear-gradient(150deg, #17a57b, #0b7353 55%, #043a29); box-shadow: 0 0 0 1px rgba(226,188,92,.45); }
  .seg button.on, .seg a.on { background: linear-gradient(150deg, #17a57b, #0b7353 55%, #043a29); box-shadow: inset 0 -2px 0 var(--gold); }
  .chips button.on, .chips a.on { background: linear-gradient(135deg, #0d4a37, #032a1e); border-color: var(--gold); color: var(--gold-light); }
  .steps div.on { border-color: var(--gold); color: var(--brand); }
  .link { color: var(--brand); }
  .control:focus-within { border-color: var(--gold-deep); box-shadow: 0 0 0 4px rgba(226,188,92,.25); }
  .check input, .opt input { accent-color: var(--brand); }
  .opt.sel { border-color: var(--gold-deep); background: color-mix(in srgb, var(--gold) 10%, var(--surface)); }

  /* Hero summary cards */
  .pay-sum, .status-card, .camp-hero {
    background:
      radial-gradient(80% 100% at 100% 0%, rgba(246, 220, 143, .30), transparent 55%),
      linear-gradient(150deg, #0d4a37, #063325 55%, #021a12);
    border: 1px solid rgba(226,188,92,.35);
  }

  /* Service tiles: soft jewel tones with a gentle lift */
  .menu { padding: 14px 8px; }
  .tile .ic { box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 8px 16px -12px var(--tint); }
  .t-green  { --tint: #0b7353; --tint-bg: linear-gradient(145deg, #e3f6ee, #c9ecdc); }
  .t-teal   { --tint: #0f766e; --tint-bg: linear-gradient(145deg, #e0f4f2, #c6e8e4); }
  .t-gold   { --tint: #9a6b0a; --tint-bg: linear-gradient(145deg, #fdf3d6, #f5e1a6); }
  .t-coral  { --tint: #b9452c; --tint-bg: linear-gradient(145deg, #fde9e2, #f7d1c4); }
  .t-indigo { --tint: #3f4aa3; --tint-bg: linear-gradient(145deg, #eceefc, #d6daf6); }
  .t-plum   { --tint: #873a83; --tint-bg: linear-gradient(145deg, #f7e9f5, #ecd1e8); }
  .t-sky    { --tint: #1769a8; --tint-bg: linear-gradient(145deg, #e3f0fb, #cbe2f6); }
  .t-slate  { --tint: #34505c; --tint-bg: linear-gradient(145deg, #e9eff1, #d3dfe3); }

  /* Bottom bar: dark emerald glass, gold for the active tab and the card button */
  .tabbar nav { border: 1px solid rgba(226,188,92,.35); box-shadow: 0 18px 40px -16px rgba(2, 26, 18, .7); }
  a.tab, .tab { color: rgba(251, 248, 239, .62); }
  a.tab.active, .tab.active { color: var(--gold-light); }
  .tab.active .ind { background: var(--gold); }
  .tab.fab, a.tab.fab { color: var(--gold-light); }
  .tab.fab .bubble {
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 45%, var(--gold-deep));
    color: #2a1d00;
    box-shadow: 0 14px 26px -10px rgba(180,134,44,.9), 0 0 0 5px var(--bg);
  }
  .toast { background: #032a1e; color: var(--gold-light); border: 1px solid rgba(226,188,92,.4); }
  /* cards that overlap the dark header stay solid so they read cleanly */
  .sheet, .page-main > .panel:first-child, .seg, .search { background: var(--surface); }

  /* =====================================================================
     Sign-in / Join / Track screens ("auth"): full-screen soft gradient,
     floating blobs, round logo with a glowing ring, floating glass card,
     pill-shaped inputs and button.
     ===================================================================== */
  body.auth {
    --auth-font: "Poppins", "Segoe UI", system-ui, sans-serif;
    min-height: 100vh; min-height: 100dvh;
    font-family: var(--auth-font);
    background: linear-gradient(165deg, #0a5c43 0%, #063a2b 45%, #021a12 100%);
    color: var(--ink);
    overflow-x: hidden;
  }
  .auth-bg { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
  .auth-bg .blob { position: absolute; border-radius: 50%; filter: blur(48px); opacity: .7; animation: drift 14s ease-in-out infinite alternate; }
  .auth-bg .b1 { width: 320px; height: 320px; left: -110px; top: -90px; background: radial-gradient(circle, #2fd39a, transparent 70%); }
  .auth-bg .b2 { width: 300px; height: 300px; right: -120px; top: 120px; background: radial-gradient(circle, #f2cf6b, transparent 70%); opacity: .45; animation-duration: 18s; }
  .auth-bg .b3 { width: 360px; height: 360px; left: 10%; bottom: -170px; background: radial-gradient(circle, #19b3a6, transparent 70%); opacity: .5; animation-duration: 22s; }
  .auth-bg .spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #f6dc8f; box-shadow: 0 0 12px 3px rgba(246,220,143,.7); animation: twinkle 3.2s ease-in-out infinite; }
  .auth-bg .s1 { left: 14%; top: 12%; }
  .auth-bg .s2 { right: 18%; top: 22%; animation-delay: 1.1s; width: 4px; height: 4px; }
  .auth-bg .s3 { right: 30%; top: 6%; animation-delay: 2.2s; width: 5px; height: 5px; }
  @keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(30px, 40px) scale(1.12); } }
  @keyframes twinkle { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.2); } }

  .auth form#form1 { position: relative; z-index: 1; }
  .auth-wrap {
    max-width: 440px; margin: 0 auto;
    padding: max(28px, env(safe-area-inset-top, 0px)) 18px max(24px, env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; align-items: stretch; gap: 18px;
  }
  .auth-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; color: #fdfaf1; animation: authRise .5s cubic-bezier(.2,.9,.3,1) both; }
  .auth-logo {
    width: 112px; height: 112px; border-radius: 50%; background: #ffffff;
    display: grid; place-items: center; position: relative;
    box-shadow: 0 0 0 6px rgba(255,255,255,.12), 0 0 0 7px rgba(246,220,143,.55), 0 20px 40px -12px rgba(0,0,0,.6);
    animation: float 5s ease-in-out infinite;
  }
  .auth-logo::after {
    content: ""; position: absolute; inset: -14px; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 70%, rgba(246,220,143,.95) 85%, transparent 100%);
    -webkit-mask: radial-gradient(circle, transparent 66px, #000 67px, #000 69px, transparent 70px);
            mask: radial-gradient(circle, transparent 66px, #000 67px, #000 69px, transparent 70px);
    animation: spin 6s linear infinite;
  }
  .auth-logo img { width: 84px; height: auto; display: block; }
  .auth-chip {
    margin-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    padding: 4px 12px; border-radius: 999px; color: #f6dc8f;
    background: rgba(246,220,143,.12); border: 1px solid rgba(246,220,143,.4);
  }
  .auth-hero h1 { margin: 0; font-family: var(--auth-font); font-weight: 700; font-size: 30px; line-height: 1.1; letter-spacing: -.02em; }
  .auth-hero h1 span { background: linear-gradient(90deg, #f6dc8f, #e2bc5c); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .auth-hero .ar { margin: 0; font-family: var(--font-arabic); font-size: 13px; color: rgba(253,250,241,.75); }

  .auth-card.sheet {
    margin: 0; max-width: none;
    background: rgba(255,255,255,.95);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.6); border-top: 0;
    border-radius: 30px; padding: 28px 22px 24px;
    box-shadow: 0 30px 60px -24px rgba(0,0,0,.65), inset 0 1px 0 #fff;
    animation: authRise .55s .05s cubic-bezier(.2,.9,.3,1) both;
  }
  .auth .sheet h2 { font-family: var(--auth-font); font-weight: 700; font-size: 24px; letter-spacing: -.01em; color: #06291d; }
  .auth .sheet h2::after { content: ""; display: block; width: 36px; height: 4px; border-radius: 4px; margin-top: 8px; background: linear-gradient(90deg, #17a57b, #e2bc5c); }
  .auth .sheet .sub { font-size: 13.5px; margin-bottom: 20px; }
  .auth .field label { font-family: var(--auth-font); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; text-transform: none; color: #3d5248; padding-left: 14px; }
  .auth .control {
    border-radius: 999px; border: 1.5px solid #e3ece7; background: #f4f8f6;
    padding: 0 8px 0 18px; gap: 10px;
    transition: border-color .2s, box-shadow .2s, background .2s, transform .2s;
  }
  .auth .control:has(> svg) { padding-left: 6px; }
  .auth .control > svg {
    width: 38px; height: 38px; padding: 9px; border-radius: 50%;
    background: linear-gradient(145deg, #e0f5ec, #c8ecdc); color: #0b7353; margin: 5px 0;
  }
  .auth .control:focus-within { background: #fff; border-color: #17a57b; box-shadow: 0 0 0 5px rgba(23,165,123,.15); transform: translateY(-1px); }
  .auth .control input, .auth .control select { font-family: var(--auth-font); font-size: 15.5px; padding: 13px 0; }
  .auth .control.invalid { border-color: var(--danger); background: #fff6f5; }
  .auth .toggle { background: #e6f4ec; color: #0b7353; border-radius: 999px; padding: 7px 12px; font-size: 12px; font-family: var(--auth-font); font-weight: 600; }
  .auth .check { font-size: 13.5px; }
  .auth .check input { accent-color: #0b7353; }
  .auth .link { color: #0b7353; font-weight: 600; }
  .auth .btn {
    border-radius: 999px; padding: 16px 20px; font-family: var(--auth-font); font-weight: 600; font-size: 16px; letter-spacing: .02em;
    background: linear-gradient(120deg, #1cc08e, #0b7353 50%, #075a41);
    background-size: 200% 100%; background-position: 0% 0%;
    box-shadow: 0 16px 30px -14px rgba(11,115,83,.9), inset 0 1px 0 rgba(255,255,255,.3);
    transition: background-position .4s, transform .12s, box-shadow .2s;
  }
  .auth .btn:hover { background-position: 100% 0%; }
  .auth .alert, .auth .page-msg { border-radius: 16px; }
  .auth .join-link { font-size: 13.5px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed #dde7e1; }
  .auth .photo-pick { border-radius: 18px; }
  .auth .welcome h2::after { margin-inline: auto; }
  .auth .tick { background: linear-gradient(145deg, #e0f5ec, #c8ecdc); box-shadow: 0 0 0 8px rgba(23,165,123,.12); }
  .auth-foot { margin: 0; text-align: center; font-size: 12px; color: rgba(253,250,241,.6); }
  .auth .toast { background: #032a1e; color: #f6dc8f; }
  @keyframes authRise { from { transform: translateY(14px); } to { transform: none; } }
  @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  @media (max-height: 700px) {
    .auth-wrap { padding-top: 18px; gap: 12px; }
    .auth-logo { width: 88px; height: 88px; }
    .auth-logo img { width: 66px; }
    .auth-logo::after { inset: -10px; -webkit-mask: radial-gradient(circle, transparent 52px, #000 53px, #000 55px, transparent 56px); mask: radial-gradient(circle, transparent 52px, #000 53px, #000 55px, transparent 56px); }
    .auth-hero h1 { font-size: 25px; }
  }

  /* =====================================================================
     "Realistic" sign-in style (body.auth.real): calm, production-app look.
     Dusk sky with the Kuwait City skyline, crisp white card, standard inputs.
     Overrides the playful auth styles above.
     ===================================================================== */
  body.auth.real {
    --auth-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-family: var(--auth-font);
    background: #f3f5f4;
    color: #13221b;
  }
  .real-hero {
    position: relative; overflow: hidden;
    padding: max(22px, env(safe-area-inset-top, 0px)) 20px 0;
    height: 250px;
    background:
      radial-gradient(120% 80% at 75% 105%, rgba(240, 186, 102, .55), transparent 55%),
      linear-gradient(180deg, #062c20 0%, #0b4634 45%, #3f6b4f 78%, #b98c55 100%);
    color: #ffffff;
  }
  .real-hero .skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 120px; display: block; }
  .real-brand { position: relative; z-index: 1; max-width: 440px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
  .real-logo { flex: none; width: 52px; height: 52px; border-radius: 12px; background: #ffffff; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
  .real-logo img { width: 42px; height: auto; display: block; }
  .real-name strong { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
  .real-name span { display: block; font-size: 13px; color: rgba(255,255,255,.78); font-weight: 500; }
  .real-ar { position: relative; z-index: 1; max-width: 440px; margin: 10px auto 0; font-family: var(--font-arabic); font-size: 12.5px; color: rgba(255,255,255,.7); text-align: left; }

  .real-main { position: relative; z-index: 2; max-width: 440px; margin: -36px auto 0; padding: 0 16px max(20px, env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 16px; }
  .auth.real .auth-card.sheet {
    animation: none; background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 1px solid #e3e8e5; border-radius: 16px; padding: 24px 20px 20px;
    box-shadow: 0 10px 30px -12px rgba(6, 44, 32, .25);
  }
  .auth.real .sheet h2 { font-family: var(--auth-font); font-size: 22px; font-weight: 700; color: #0d1f17; letter-spacing: -.015em; }
  .auth.real .sheet h2::after { display: none; }
  .auth.real .sheet .sub { color: #5d6b64; font-size: 14px; margin-bottom: 20px; }
  .auth.real .field label { padding-left: 0; font-size: 13px; font-weight: 600; color: #2b3a33; text-transform: none; letter-spacing: 0; }
  .auth.real .control {
    border-radius: 10px; border: 1px solid #cfd8d3; background: #ffffff; padding: 0 12px; gap: 10px; transform: none;
  }
  .auth.real .control:has(> svg) { padding-left: 12px; }
  .auth.real .control > svg { width: 20px; height: 20px; padding: 0; margin: 0; background: none; color: #7a8a82; border-radius: 0; }
  .auth.real .control:focus-within { border-color: #0b7353; box-shadow: 0 0 0 3px rgba(11,115,83,.15); transform: none; }
  .auth.real .control input, .auth.real .control select { font-family: var(--auth-font); font-size: 16px; padding: 13px 0; color: #13221b; }
  .auth.real .toggle { background: none; padding: 8px 2px; color: #0b7353; font-size: 13px; font-weight: 600; border-radius: 0; }
  .auth.real .link { color: #0b7353; font-weight: 600; }
  .auth.real .check { color: #3d4b44; font-size: 14px; }
  .auth.real .btn {
    border-radius: 10px; padding: 14px 18px; font-family: var(--auth-font); font-weight: 600; font-size: 16px; letter-spacing: 0;
    background: #0b7353; background-size: auto; box-shadow: 0 1px 2px rgba(0,0,0,.08); transition: background .15s;
  }
  .auth.real .btn:hover { background: #095f45; }
  .auth.real .btn:active { background: #074b37; }
  .auth.real .join-link { border-top: 1px solid #edf1ef; color: #5d6b64; font-size: 14px; }
  .auth.real .alert, .auth.real .page-msg { border-radius: 10px; }
  .auth.real .photo-pick { border-radius: 10px; }
  .auth.real .tick { box-shadow: none; }
  .real-foot { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 12px; color: #7a8781; }
  .auth.real .toast { background: #13221b; color: #ffffff; border: 0; }
  @media (max-height: 700px) { .real-hero { height: 210px; } }
  .real-hero { height: 290px; }
  .real-hero .skyline { height: 150px; bottom: 30px; }
  .real-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32px; background: #021a12; }
  .real-main { margin-top: -44px; }
  @media (max-height: 700px) { .real-hero { height: 240px; } .real-hero .skyline { height: 120px; } }

  /* =====================================================================
     "Photo hero" sign-in (body.auth.real.photo): a full-width photo fills
     the top of the screen with the logo over it, and the fields sit on a
     white bottom sheet with rounded top corners (Uber / Airbnb style).
     Drop a photo at images/login-hero.jpg; until then a drawn dusk skyline
     is shown. Remove the "photo" class in Public.master to go back.
     ===================================================================== */
  body.auth.real.photo { background: #ffffff; }
  .auth.photo .real-hero {
    height: 46vh; min-height: 300px; max-height: 440px;
    padding: 0;
    background:
      linear-gradient(180deg, rgba(2, 20, 14, .55) 0%, rgba(2, 20, 14, .05) 40%, rgba(2, 20, 14, .65) 100%),
      url("../images/login-hero.jpg") center 40% / cover no-repeat,
      radial-gradient(120% 70% at 70% 100%, rgba(240, 186, 102, .75), transparent 60%),
      linear-gradient(180deg, #08281e 0%, #134b3a 40%, #6b7d58 75%, #d39c5c 100%);
  }
  .auth.photo .real-hero::after { display: none; }
  .auth.photo .real-hero .skyline { height: 46%; bottom: 0; }
  .auth.photo.has-photo .real-hero .skyline { display: none; }
  .auth.photo .real-brand {
    position: absolute; z-index: 2; left: 0; right: 0; top: 50%; transform: translateY(-62%);
    flex-direction: column; text-align: center; gap: 10px; padding: 0 20px;
  }
  .auth.photo .real-logo { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
  .auth.photo .real-logo img { width: 68px; }
  .auth.photo .real-name strong { font-size: 26px; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
  .auth.photo .real-name span { font-size: 14px; color: rgba(255,255,255,.9); text-shadow: 0 1px 8px rgba(0,0,0,.5); }
  .auth.photo .real-ar { display: none; }

  .auth.photo .real-main {
    max-width: none; margin: -28px 0 0; padding: 0;
    background: #ffffff; border-radius: 28px 28px 0 0;
    box-shadow: 0 -12px 30px -18px rgba(0,0,0,.45);
    min-height: calc(54vh + 28px);
  }
  .auth.photo .real-main::before {
    content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: #dfe5e2; margin: 10px auto 0;
  }
  .auth.photo .auth-card.sheet {
    max-width: 440px; margin: 0 auto; width: 100%;
    border: 0; box-shadow: none; border-radius: 0; padding: 18px 22px 8px;
  }
  .auth.photo .sheet h2 { font-size: 24px; }
  .auth.photo .control { background: #f5f7f6; border-color: #e3e9e6; border-radius: 12px; }
  .auth.photo .control:focus-within { background: #ffffff; }
  .auth.photo .btn { border-radius: 12px; padding: 15px 18px; }
  .auth.photo .real-foot { max-width: 440px; margin: 0 auto; padding: 4px 22px max(22px, env(safe-area-inset-bottom, 0px)); }
  @media (min-width: 600px) {
    .auth.photo .real-main { max-width: 480px; margin: -28px auto 0; }
  }

  /* =====================================================================
     "Realistic" member screens (body.app.real), matching the sign-in page:
     dusk skyline header, plain light background, solid white cards,
     one consistent icon colour, calm white bottom bar.
     Remove the "real" class in Site.master to go back to Emerald & Gold.
     ===================================================================== */
  body.app.real {
    --font-display: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --bg: #f2f4f3; --surface: #ffffff; --ink: #13221b; --muted: #5f6d66; --line: #e2e8e5; --field: #f5f7f6;
    --brand: #0b7353; --brand-light: #12906a; --brand-deep: #074b37;
    --shadow: 0 8px 24px -14px rgba(6, 44, 32, .28);
    --nav-bg: #ffffff;
    background: var(--bg);
    font-family: var(--font-body);
    color: var(--ink);
  }

  /* Header: dusk sky with the Kuwait City skyline along the bottom */
  .app.real .band {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%2304241a' opacity='.5'%3E%3Crect x='0' y='52' width='26' height='38'/%3E%3Crect x='28' y='42' width='18' height='48'/%3E%3Crect x='150' y='46' width='20' height='44'/%3E%3Crect x='172' y='36' width='14' height='54'/%3E%3Crect x='250' y='40' width='22' height='50'/%3E%3Crect x='274' y='52' width='16' height='38'/%3E%3Crect x='330' y='44' width='20' height='46'/%3E%3Crect x='352' y='56' width='24' height='34'/%3E%3Crect x='378' y='48' width='22' height='42'/%3E%3C/g%3E%3Cg fill='%23021a12' opacity='.85'%3E%3Crect x='95' y='8' width='3' height='82'/%3E%3Ccircle cx='96.5' cy='34' r='9'/%3E%3Ccircle cx='96.5' cy='19' r='5.5'/%3E%3Crect x='110' y='28' width='2.4' height='62'/%3E%3Ccircle cx='111.2' cy='44' r='7'/%3E%3Cpolygon points='214,90 214,22 218,13 222,22 222,90'/%3E%3Crect x='217.3' y='0' width='1.4' height='15'/%3E%3Cellipse cx='218' cy='20' rx='6' ry='4.2'/%3E%3Crect x='0' y='78' width='400' height='12'/%3E%3Crect x='60' y='70' width='30' height='10'/%3E%3Crect x='132' y='66' width='18' height='14'/%3E%3Crect x='228' y='64' width='20' height='16'/%3E%3Crect x='292' y='68' width='34' height='12'/%3E%3C/g%3E%3C/svg%3E") left bottom / 100% 90px no-repeat,
      radial-gradient(120% 80% at 75% 110%, rgba(240, 186, 102, .55), transparent 55%),
      linear-gradient(180deg, #062c20 0%, #0b4634 50%, #3f6b4f 82%, #9c7d4f 100%);
  }
  .app.real .band::after, .app.real .band::before { display: none; }
  .app.real .home-band { padding-block: 14px 118px; }
  .app.real .page-band { padding-block: 14px 74px; }
  .app.real .hello small { color: rgba(255,255,255,.75); }
  .app.real .hello strong, .app.real .page-top h1 { font-weight: 700; letter-spacing: -.01em; }
  .app.real .topbar .mini-logo { box-shadow: 0 2px 8px rgba(0,0,0,.25); border-radius: 10px; }
  .app.real .icon-btn { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .app.real .icon-btn .dot { background: #f5b83d; box-shadow: 0 0 0 2px #0b4634; }

  /* ID card: keep the printed card, add a cleaner shadow */
  .app.real .face { box-shadow: 0 16px 34px -18px rgba(2, 26, 18, .6); }
  .app.real .pill-gold { background: #f2d64b; box-shadow: none; color: #1f1f1f; }

  /* Cards and panels: solid white, thin border, light shadow */
  .app.real .menu, .app.real .panel, .app.real .item, .app.real .wing, .app.real .tx, .app.real .due,
  .app.real .opt, .app.real .search, .app.real .seg, .app.real .hero-ev, .app.real .news-hero {
    background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .app.real .item, .app.real .wing, .app.real .tx { box-shadow: 0 1px 2px rgba(6,44,32,.05); }
  .app.real .menu { border-radius: 16px; padding: 14px 8px; }
  .app.real .panel, .app.real .item, .app.real .wing, .app.real .tx { border-radius: 14px; }
  .app.real .panel.empty { border: 1px dashed #d3dcd7; box-shadow: none; }
  .app.real .group-title, .app.real .section-head h3 { color: var(--ink); font-family: var(--font-display); }
  .app.real .section-head h3 { font-size: 16px; font-weight: 700; }

  /* Service tiles: one icon style for every service */
  .app.real .tile { font-weight: 600; font-size: 12px; color: #2a3a32; }
  .app.real .tile .ic { width: 48px; height: 48px; border-radius: 14px; background: #edf5f1; color: #0b7353; box-shadow: none; }
  .app.real .tile .ic svg { width: 23px; height: 23px; }
  .app.real .avatar { background: #edf5f1; color: #0b7353; border-radius: 12px; }
  .app.real .wing .count { color: #0b7353; }

  /* Buttons and chips: solid brand green, no gradients */
  .app.real .btn { background: #0b7353; border-radius: 12px; box-shadow: none; font-family: var(--font-display); }
  .app.real .btn:hover { filter: none; background: #095f45; }
  .app.real .chip.pay-chip { background: #0b7353; box-shadow: none; }
  .app.real .chip { border-color: #d7e0db; }
  .app.real .renew-pill { background: #fff4d9; color: #7a5600; border: 1px solid #f0d79b; box-shadow: none; }
  .app.real .renew-pill.done { background: var(--success-bg); color: var(--success); border-color: transparent; }
  .app.real .seg button.on, .app.real .seg a.on { background: #0b7353; box-shadow: none; }
  .app.real .chips button.on, .app.real .chips a.on { background: #13221b; border-color: #13221b; color: #ffffff; }
  .app.real .steps div.on { border-color: #0b7353; }
  .app.real .opt.sel { border-color: #0b7353; background: #f1f8f4; }
  .app.real .control:focus-within { border-color: #0b7353; box-shadow: 0 0 0 3px rgba(11,115,83,.15); }

  /* Summary cards: flat dark emerald */
  .app.real .pay-sum, .app.real .status-card, .app.real .camp-hero {
    background: linear-gradient(150deg, #0d4a37, #073426); border: 0; box-shadow: var(--shadow);
  }
  .app.real .status-card .ok { background: #f2d64b; color: #1f1f1f; box-shadow: none; }

  /* Bottom bar: white, with a round green card button */
  .app.real .tabbar nav { background: #ffffff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 8px 28px -12px rgba(6,44,32,.35); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .app.real a.tab, .app.real .tab { color: #7a8781; font-weight: 600; }
  .app.real a.tab.active, .app.real .tab.active { color: #0b7353; }
  .app.real .tab.active .ind { background: #0b7353; }
  .app.real .tab.fab, .app.real a.tab.fab { color: #13221b; }
  .app.real .tab.fab .bubble {
    width: 56px; height: 56px; border-radius: 50%; transform: none; margin-bottom: 4px;
    background: #0b7353; color: #ffffff;
    box-shadow: 0 8px 18px -8px rgba(11,115,83,.9), 0 0 0 5px var(--bg);
  }
  .app.real .tab.fab .bubble svg { transform: none; }
  .app.real .toast { background: #13221b; color: #ffffff; border: 0; }
  /* inner pages: plain dusk gradient (the skyline only shows on Home, where there is room for it) */
  .app.real .page-band { background: radial-gradient(120% 90% at 80% 120%, rgba(240,186,102,.4), transparent 55%), linear-gradient(180deg, #062c20 0%, #0b4634 70%, #285a43 100%); }

  /* =====================================================================
     Member-selectable app styles: <html data-skin="a|b|c">
       a = Clean (white, one KMCC green)      - default
       b = Premium (dark, emerald and gold)
       c = Colourful (green gradient, a colour per service)
     The choice is saved on the phone (localStorage "kmccSkin") by the
     pickers on Profile and on the sign-in pages (Scripts/kmcc.js).
     ===================================================================== */

  /* ---------- pickers ---------- */
  .skin-pick h3 { margin: 0 0 2px; }
  .skin-pick p { margin: 0 0 12px; font-size: 13px; }
  .skins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .skin-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; text-align: center; }
  .skin-opt b { font-size: 13px; }
  .skin-opt small { font-size: 11px; color: var(--muted); line-height: 1.3; }
  .skin-opt.on { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
  .sw { width: 100%; height: 46px; border-radius: 10px; display: block; border: 1px solid rgba(0,0,0,.08); }
  .sw-a { background: linear-gradient(#f6f7f5 0 55%, #0b6e4f 55% 100%); }
  .sw-b { background: linear-gradient(135deg, #0a0e0c 0 55%, #cfae62 55% 70%, #0f5c43 70%); }
  .sw-c { background: linear-gradient(135deg, #00a86b, #00c2a8 50%, #ffc83d 50% 70%, #ff6b6b 70%); }
  .skin-dots { display: flex; justify-content: center; gap: 10px; margin-bottom: 6px; }
  .skin-dots button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(127,127,127,.35); cursor: pointer; padding: 0; }
  .skin-dots button[data-skin-set="a"] { background: linear-gradient(135deg, #ffffff 50%, #0b6e4f 50%); }
  .skin-dots button[data-skin-set="b"] { background: linear-gradient(135deg, #0a0e0c 50%, #cfae62 50%); }
  .skin-dots button[data-skin-set="c"] { background: linear-gradient(135deg, #00c2a8 50%, #ffc83d 50%); }
  .skin-dots button.on { border-color: currentColor; transform: scale(1.12); }

  /* =========================== A: Clean =========================== */
  :root[data-skin="a"] body.app.real {
    --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    --bg: #f6f7f5; --ink: #101413; --muted: #6b736e; --line: #e6e9e7; --brand: #0b6e4f;
  }
  :root[data-skin="a"] .app.real .band { background: transparent; color: #101413; }
  :root[data-skin="a"] .app.real .home-band { padding-block: 16px 14px; }
  :root[data-skin="a"] .app.real .page-band { padding-block: 16px 10px; }
  :root[data-skin="a"] .app.real .home-main, :root[data-skin="a"] .app.real .page-main { margin-top: 0; }
  :root[data-skin="a"] .app.real .hello small, :root[data-skin="a"] .app.real .page-top small { color: #6b736e; opacity: 1; }
  :root[data-skin="a"] .app.real .hello strong, :root[data-skin="a"] .app.real .page-top h1 { color: #101413; font-weight: 800; letter-spacing: -.02em; }
  :root[data-skin="a"] .app.real .topbar .mini-logo { border: 1px solid #e6e9e7; box-shadow: none; }
  :root[data-skin="a"] .app.real .icon-btn { background: #ffffff; border: 1px solid #e6e9e7; color: #101413; border-radius: 50%; }
  :root[data-skin="a"] .app.real .icon-btn .dot { background: #e5484d; box-shadow: 0 0 0 2px #ffffff; }
  :root[data-skin="a"] .app.real .menu { background: transparent; border: 0; box-shadow: none; padding: 4px 0; gap: 14px 8px; }
  :root[data-skin="a"] .app.real .tile { font-weight: 600; font-size: 12.5px; color: #101413; }
  :root[data-skin="a"] .app.real .tile .ic { width: 58px; height: 58px; border-radius: 18px; background: #ffffff; border: 1px solid #e6e9e7; color: #0b6e4f; }
  :root[data-skin="a"] .app.real .section-head h3 { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
  :root[data-skin="a"] .app.real .renew-pill { background: #e4f2ec; color: #0b6e4f; border: 0; }
  :root[data-skin="a"] .app.real .chip.pay-chip, :root[data-skin="a"] .app.real .btn { background: #101413; border-radius: 16px; }
  :root[data-skin="a"] .app.real .chip.pay-chip { border-radius: 999px; }
  :root[data-skin="a"] .app.real .pay-sum, :root[data-skin="a"] .app.real .status-card, :root[data-skin="a"] .app.real .camp-hero {
    background: radial-gradient(60% 80% at 100% 0%, rgba(255,255,255,.10), transparent 60%), #0b6e4f; border-radius: 24px;
  }
  :root[data-skin="a"] .app.real .seg button.on, :root[data-skin="a"] .app.real .seg a.on { background: #101413; }
  :root[data-skin="a"] .app.real .tab.fab .bubble { background: #0b6e4f; }
  :root[data-skin="a"] .app.real a.tab.active, :root[data-skin="a"] .app.real .tab.active { color: #101413; }
  :root[data-skin="a"] .app.real .tab.active .ind { background: #101413; }

  /* A: sign-in */
  :root[data-skin="a"] body.auth.real.photo { background: #f6f7f5; }
  :root[data-skin="a"] .auth.photo .real-hero { background: #f6f7f5; height: auto; min-height: 0; max-height: none; padding: max(44px, env(safe-area-inset-top, 0px)) 24px 0; }
  :root[data-skin="a"] .auth.photo .real-hero .skyline { display: none; }
  :root[data-skin="a"] .auth.photo .real-brand { position: static; transform: none; flex-direction: row; text-align: left; padding: 0; max-width: 440px; }
  :root[data-skin="a"] .auth.photo .real-logo { width: 48px; height: 48px; border-radius: 12px; border: 1px solid #e6e9e7; box-shadow: none; }
  :root[data-skin="a"] .auth.photo .real-logo img { width: 38px; }
  :root[data-skin="a"] .auth.photo .real-name strong { font-size: 16px; color: #101413; text-shadow: none; }
  :root[data-skin="a"] .auth.photo .real-name span { font-size: 13px; color: #6b736e; text-shadow: none; }
  :root[data-skin="a"] .auth.photo .real-main { background: transparent; box-shadow: none; margin-top: 0; min-height: 0; border-radius: 0; }
  :root[data-skin="a"] .auth.photo .real-main::before { display: none; }
  :root[data-skin="a"] .auth.photo .auth-card.sheet { background: transparent; padding: 34px 24px 8px; }
  :root[data-skin="a"] body.auth .sheet h2 { font-family: "Plus Jakarta Sans", sans-serif; font-size: 36px; font-weight: 800; letter-spacing: -.035em; color: #101413; }
  :root[data-skin="a"] body.auth, :root[data-skin="a"] .auth .control input { font-family: "Plus Jakarta Sans", sans-serif; }
  :root[data-skin="a"] .auth.photo .control { background: #ffffff; border: 1.5px solid #e6e9e7; border-radius: 16px; }
  :root[data-skin="a"] .auth.photo .control:focus-within { border-color: #101413; box-shadow: none; }
  :root[data-skin="a"] .auth.photo .btn { background: #101413; border-radius: 18px; padding: 17px; }
  :root[data-skin="a"] .auth .link { color: #0b6e4f; }

  /* =========================== B: Premium dark =========================== */
  :root[data-skin="b"] body.app.real {
    --font-display: "Manrope", "Segoe UI", system-ui, sans-serif;
    --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
    --bg: #0a0e0c; --surface: #121815; --ink: #f1ede2; --muted: #8f9a93; --line: #24302a; --field: #0e1411;
    --brand: #cfae62; --success-bg: rgba(207,174,98,.12); --success: #f2dc9b;
    --shadow: 0 16px 36px -18px rgba(0,0,0,.8);
    background: radial-gradient(100% 40% at 80% 0%, #10372a 0%, #0a0e0c 70%) fixed, #0a0e0c;
    color-scheme: dark;
  }
  :root[data-skin="b"] .app.real .band { background: transparent; }
  :root[data-skin="b"] .app.real .hello small { color: #8f9a93; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; font-size: 11px; }
  :root[data-skin="b"] .app.real .hello strong, :root[data-skin="b"] .app.real .page-top h1 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 27px; letter-spacing: 0; line-height: 1.1; }
  :root[data-skin="b"] .app.real .page-top small { color: #8f9a93; }
  :root[data-skin="b"] .app.real .topbar .mini-logo { background: #fbf8ef; box-shadow: 0 0 0 1.5px #cfae62; }
  :root[data-skin="b"] .app.real .icon-btn { background: transparent; border: 1px solid #24302a; color: #cfae62; border-radius: 50%; }
  :root[data-skin="b"] .app.real .icon-btn .dot { background: #cfae62; box-shadow: none; }
  :root[data-skin="b"] .app.real .face { box-shadow: 0 0 0 1.5px #cfae62, 0 20px 40px -18px rgba(0,0,0,.9); }
  :root[data-skin="b"] .app.real .section-head h3, :root[data-skin="b"] .app.real .group-title { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: #8f9a93; font-weight: 800; }
  :root[data-skin="b"] .app.real .menu { background: #121815; border: 1px solid #24302a; border-radius: 18px; padding: 0; gap: 0; overflow: hidden; box-shadow: none; }
  :root[data-skin="b"] .app.real .tile { padding: 16px 2px 14px; border-radius: 0; color: #d9d4c7; font-weight: 600; border-right: 1px solid #24302a; border-bottom: 1px solid #24302a; }
  :root[data-skin="b"] .app.real .tile:nth-child(4n) { border-right: 0; }
  :root[data-skin="b"] .app.real .tile:nth-child(n+5) { border-bottom: 0; }
  :root[data-skin="b"] .app.real .tile .ic { background: none; color: #cfae62; width: 32px; height: 32px; }
  :root[data-skin="b"] .app.real .tile .ic svg { width: 26px; height: 26px; }
  :root[data-skin="b"] .app.real .renew-pill { background: transparent; border: 1px solid #cfae62; color: #cfae62; }
  :root[data-skin="b"] .app.real .chip { background: transparent; border-color: #24302a; color: #f1ede2; }
  :root[data-skin="b"] .app.real .chip svg { color: #cfae62; }
  :root[data-skin="b"] .app.real .chip.pay-chip, :root[data-skin="b"] .app.real .btn,
  :root[data-skin="b"] .app.real .seg button.on, :root[data-skin="b"] .app.real .seg a.on, :root[data-skin="b"] .app.real .mini-btn.solid {
    background: linear-gradient(135deg, #f2dc9b, #cfae62 55%, #a8843c); color: #1b1408; border-color: transparent;
  }
  :root[data-skin="b"] .app.real .chip.pay-chip svg { color: #1b1408; }
  :root[data-skin="b"] .app.real .btn { text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
  :root[data-skin="b"] .app.real .menu, :root[data-skin="b"] .app.real .panel, :root[data-skin="b"] .app.real .item, :root[data-skin="b"] .app.real .wing,
  :root[data-skin="b"] .app.real .tx, :root[data-skin="b"] .app.real .due, :root[data-skin="b"] .app.real .opt, :root[data-skin="b"] .app.real .search,
  :root[data-skin="b"] .app.real .seg, :root[data-skin="b"] .app.real .hero-ev, :root[data-skin="b"] .app.real .news-hero { background: #121815; border-color: #24302a; color: #f1ede2; }
  :root[data-skin="b"] .app.real .panel.empty { background: transparent; }
  :root[data-skin="b"] .app.real .avatar, :root[data-skin="b"] .app.real .tile .ic.avatar { background: rgba(207,174,98,.12); color: #cfae62; }
  :root[data-skin="b"] .app.real .pay-sum, :root[data-skin="b"] .app.real .status-card, :root[data-skin="b"] .app.real .camp-hero {
    background: linear-gradient(150deg, #0f2a20 0%, #0a1410 60%, #101510 100%); border: 1px solid rgba(207,174,98,.45);
  }
  :root[data-skin="b"] .app.real .chips button.on, :root[data-skin="b"] .app.real .chips a.on { background: #cfae62; border-color: #cfae62; color: #1b1408; }
  :root[data-skin="b"] .app.real .chips button, :root[data-skin="b"] .app.real .chips a { background: transparent; border-color: #24302a; color: #f1ede2; }
  :root[data-skin="b"] .app.real .form select, :root[data-skin="b"] .app.real .form textarea, :root[data-skin="b"] .app.real .search input,
  :root[data-skin="b"] .app.real .control input { background: #0e1411; color: #f1ede2; border-color: #24302a; }
  :root[data-skin="b"] .app.real .rows .r, :root[data-skin="b"] .app.real .setting { border-color: #24302a; color: #f1ede2; }
  :root[data-skin="b"] .app.real .setting svg, :root[data-skin="b"] .app.real .link { color: #cfae62; }
  :root[data-skin="b"] .app.real .tabbar nav { background: rgba(18,24,21,.94); border-color: #24302a; box-shadow: 0 14px 34px -14px rgba(0,0,0,.9); }
  :root[data-skin="b"] .app.real a.tab, :root[data-skin="b"] .app.real .tab { color: #6d7871; }
  :root[data-skin="b"] .app.real a.tab.active, :root[data-skin="b"] .app.real .tab.active, :root[data-skin="b"] .app.real .tab.fab { color: #cfae62; }
  :root[data-skin="b"] .app.real .tab.active .ind { background: #cfae62; }
  :root[data-skin="b"] .app.real .tab.fab .bubble { border-radius: 16px; background: linear-gradient(135deg, #f2dc9b, #cfae62); color: #1b1408; box-shadow: 0 0 0 5px #0a0e0c; }
  :root[data-skin="b"] .app.real .toast { background: #cfae62; color: #1b1408; }

  /* B: sign-in */
  :root[data-skin="b"] body.auth.real.photo { background: radial-gradient(120% 60% at 50% 0%, #133a2c 0%, #0a0e0c 62%) fixed, #0a0e0c; color: #f1ede2; font-family: "Manrope", sans-serif; }
  :root[data-skin="b"] .auth.photo .real-hero { background: transparent; height: auto; min-height: 0; max-height: none; padding: max(56px, env(safe-area-inset-top, 0px)) 24px 0; }
  :root[data-skin="b"] .auth.photo .real-hero .skyline { display: none; }
  :root[data-skin="b"] .auth.photo .real-brand { position: static; transform: none; }
  :root[data-skin="b"] .auth.photo .real-logo { width: 92px; height: 92px; border-radius: 50%; background: #fbf8ef; box-shadow: 0 0 0 3px #cfae62, 0 0 0 7px rgba(207,174,98,.18); }
  :root[data-skin="b"] .auth.photo .real-logo img { width: 70px; }
  :root[data-skin="b"] .auth.photo .real-name strong { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 42px; letter-spacing: 0; text-shadow: none; }
  :root[data-skin="b"] .auth.photo .real-name span { color: #8f9a93; text-shadow: none; }
  :root[data-skin="b"] .auth.photo .real-ar { display: block; text-align: center; color: #6f7a73; }
  :root[data-skin="b"] .auth.photo .real-main { background: transparent; box-shadow: none; margin-top: 0; min-height: 0; border-radius: 0; }
  :root[data-skin="b"] .auth.photo .real-main::before { display: none; }
  :root[data-skin="b"] .auth.photo .auth-card.sheet { background: transparent; padding: 22px 26px 8px; }
  :root[data-skin="b"] body.auth .sheet h2 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 30px; color: #f1ede2; }
  :root[data-skin="b"] body.auth .sheet .sub, :root[data-skin="b"] body.auth .field label, :root[data-skin="b"] body.auth .check, :root[data-skin="b"] .auth.real .join-link { color: #8f9a93; }
  :root[data-skin="b"] .auth.photo .control { background: transparent; border: 0; border-bottom: 1px solid #24302a; border-radius: 0; padding-left: 0 !important; }
  :root[data-skin="b"] .auth.photo .control:focus-within { border-bottom-color: #cfae62; box-shadow: none; background: transparent; }
  :root[data-skin="b"] .auth.real .control > svg { color: #cfae62; }
  :root[data-skin="b"] .auth.real .control input, :root[data-skin="b"] .auth.real .control select { color: #f1ede2; font-family: "Manrope", sans-serif; background: transparent; }
  :root[data-skin="b"] .auth.real .control select option { color: #101413; }
  :root[data-skin="b"] .auth.real .toggle { color: #cfae62; text-transform: uppercase; letter-spacing: .08em; }
  :root[data-skin="b"] .auth.real .link { color: #cfae62; }
  :root[data-skin="b"] .auth.photo .btn { background: linear-gradient(135deg, #f2dc9b, #cfae62 55%, #a8843c); color: #1b1408; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; border-radius: 14px; }
  :root[data-skin="b"] .auth.real .join-link { border-color: #24302a; }
  :root[data-skin="b"] .auth .photo-pick { border-color: #24302a; color: #8f9a93; }
  :root[data-skin="b"] .auth .photo-pick .ph { background: #121815; }
  :root[data-skin="b"] .real-foot { color: #6f7a73; }

  /* =========================== C: Colourful =========================== */
  :root[data-skin="c"] body.app.real {
    --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
    --font-body: "Outfit", "Segoe UI", system-ui, sans-serif;
    --bg: #f4f6fb; --ink: #14161f; --muted: #6a7080; --line: #e6e9f0; --brand: #00a86b;
  }
  :root[data-skin="c"] .app.real .band { background: linear-gradient(150deg, #00a86b 0%, #00c2a8 60%, #39d0d8 100%); }
  :root[data-skin="c"] .app.real .band::after {
    display: block; content: ""; position: absolute; inset: auto; width: 160px; height: 160px; border-radius: 50%;
    right: -50px; top: -40px; background: #ffc83d; opacity: .9; -webkit-mask-image: none; mask-image: none; z-index: 0;
  }
  :root[data-skin="c"] .app.real .band::before {
    display: block; content: ""; position: absolute; width: 70px; height: 70px; border-radius: 50%; left: auto; right: 110px; top: 36px; bottom: auto;
    background: #ff6b6b; opacity: .85; z-index: 0;
  }
  :root[data-skin="c"] .app.real .icon-btn { background: rgba(255,255,255,.24); border: 0; border-radius: 14px; }
  :root[data-skin="c"] .app.real .icon-btn .dot { background: #ff4d4f; box-shadow: 0 0 0 2px #ffffff; }
  :root[data-skin="c"] .app.real .hello strong, :root[data-skin="c"] .app.real .page-top h1 { font-weight: 700; }
  :root[data-skin="c"] .app.real .menu { background: transparent; border: 0; box-shadow: none; padding: 0; gap: 10px; }
  :root[data-skin="c"] .app.real .tile { background: #ffffff; border-radius: 20px; padding: 14px 4px 10px; font-weight: 600; font-size: 12.5px; box-shadow: 0 6px 16px -12px rgba(20,22,31,.35); }
  :root[data-skin="c"] .app.real .tile .ic { width: 46px; height: 46px; border-radius: 15px; color: #ffffff; }
  :root[data-skin="c"] .app.real .tile:nth-child(8n+1) .ic { background: linear-gradient(135deg, #00b67a, #00d6a3); }
  :root[data-skin="c"] .app.real .tile:nth-child(8n+2) .ic { background: linear-gradient(135deg, #3d7bff, #61a8ff); }
  :root[data-skin="c"] .app.real .tile:nth-child(8n+3) .ic { background: linear-gradient(135deg, #ffb300, #ffd25e); }
  :root[data-skin="c"] .app.real .tile:nth-child(8n+4) .ic { background: linear-gradient(135deg, #ff5a5f, #ff8a65); }
  :root[data-skin="c"] .app.real .tile:nth-child(8n+5) .ic { background: linear-gradient(135deg, #8a5cf6, #b38cff); }
  :root[data-skin="c"] .app.real .tile:nth-child(8n+6) .ic { background: linear-gradient(135deg, #ff7a1a, #ffa94d); }
  :root[data-skin="c"] .app.real .tile:nth-child(8n+7) .ic { background: linear-gradient(135deg, #e5407a, #ff7aa8); }
  :root[data-skin="c"] .app.real .tile:nth-child(8n+8) .ic { background: linear-gradient(135deg, #1aa6c9, #4fd1e6); }
  :root[data-skin="c"] .app.real .section-head h3 { font-size: 19px; font-weight: 700; }
  :root[data-skin="c"] .app.real .renew-pill { background: #e8fff4; color: #00a86b; border: 0; }
  :root[data-skin="c"] .app.real .chip.pay-chip, :root[data-skin="c"] .app.real .btn,
  :root[data-skin="c"] .app.real .seg button.on, :root[data-skin="c"] .app.real .seg a.on { background: linear-gradient(90deg, #00a86b, #00c2a8); box-shadow: 0 10px 20px -12px rgba(0,168,107,.8); }
  :root[data-skin="c"] .app.real .btn { border-radius: 18px; }
  :root[data-skin="c"] .app.real .panel, :root[data-skin="c"] .app.real .item, :root[data-skin="c"] .app.real .wing { border-radius: 20px; border-color: transparent; }
  :root[data-skin="c"] .app.real .avatar { background: #e8fff4; color: #00a86b; }
  :root[data-skin="c"] .app.real .pay-sum, :root[data-skin="c"] .app.real .status-card, :root[data-skin="c"] .app.real .camp-hero { background: #14161f; border-radius: 22px; }
  :root[data-skin="c"] .app.real a.tab.active, :root[data-skin="c"] .app.real .tab.active { color: #00a86b; }
  :root[data-skin="c"] .app.real .tab.active .ind { background: #00a86b; }
  :root[data-skin="c"] .app.real .tab.fab .bubble { border-radius: 20px; background: linear-gradient(135deg, #ff7a1a, #ffb300); box-shadow: 0 10px 20px -8px rgba(255,122,26,.7), 0 0 0 5px #f4f6fb; }

  /* C: sign-in */
  :root[data-skin="c"] body.auth.real.photo { font-family: "Outfit", sans-serif; }
  :root[data-skin="c"] .auth.photo .real-hero {
    background: linear-gradient(150deg, #00a86b 0%, #00c2a8 60%, #39d0d8 100%);
    height: 360px; min-height: 0; max-height: none; padding: max(56px, env(safe-area-inset-top, 0px)) 26px 0;
  }
  :root[data-skin="c"] .auth.photo .real-hero .skyline { display: none; }
  :root[data-skin="c"] .auth.photo .real-hero::before, :root[data-skin="c"] .auth.photo .real-hero::after { content: ""; display: block; position: absolute; border-radius: 50%; z-index: 0; }
  :root[data-skin="c"] .auth.photo .real-hero::before { width: 180px; height: 180px; right: -40px; top: 40px; background: #ffc83d; box-shadow: -110px 140px 0 -30px #ff6b6b; }
  :root[data-skin="c"] .auth.photo .real-hero::after { width: 70px; height: 70px; right: 20px; top: 230px; left: auto; bottom: auto; background: #7fd858; }
  :root[data-skin="c"] .auth.photo .real-brand { position: relative; transform: none; top: auto; flex-direction: column; align-items: flex-start; text-align: left; padding: 0; }
  :root[data-skin="c"] .auth.photo .real-logo { width: 72px; height: 64px; border-radius: 20px; }
  :root[data-skin="c"] .auth.photo .real-logo img { width: 58px; }
  :root[data-skin="c"] .auth.photo .real-name strong { font-family: "Outfit", sans-serif; font-size: 38px; font-weight: 800; line-height: 1.02; letter-spacing: -.02em; max-width: 220px; margin-top: 18px; text-shadow: none; }
  :root[data-skin="c"] .auth.photo .real-name span { font-size: 15px; text-shadow: none; }
  :root[data-skin="c"] .auth.photo .real-main { margin-top: -40px; border-radius: 32px 32px 0 0; }
  :root[data-skin="c"] .auth.photo .real-main::before { display: none; }
  :root[data-skin="c"] .auth.photo .auth-card.sheet { padding-top: 28px; }
  :root[data-skin="c"] body.auth .sheet h2 { font-family: "Outfit", sans-serif; font-weight: 700; }
  :root[data-skin="c"] .auth.photo .control { background: #f4f6fb; border: 0; border-radius: 18px; }
  :root[data-skin="c"] .auth.photo .control:focus-within { background: #ffffff; box-shadow: inset 0 0 0 2px #00a86b; }
  :root[data-skin="c"] .auth.real .control > svg { color: #00a86b; }
  :root[data-skin="c"] .auth.real .control input { font-family: "Outfit", sans-serif; }
  :root[data-skin="c"] .auth.photo .btn { background: linear-gradient(90deg, #00a86b, #00c2a8); border-radius: 18px; box-shadow: 0 12px 24px -12px rgba(0,168,107,.8); font-family: "Outfit", sans-serif; font-size: 18px; }
  :root[data-skin="c"] .auth.real .link { color: #00a86b; }
  :root[data-skin="c"] .auth.real .join-link a.link:first-child { color: #ff6b3d; }

  /* ---------- PC / tablet: always show the app as a phone-width column ---------- */
  @media (min-width: 600px) {
    html { background: #dde3e0; }
    :root[data-skin="b"] { background: #161b18; }
    body {
      max-width: 430px; margin: 0 auto; min-height: 100vh; position: relative;
      box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 20px 60px -10px rgba(0,0,0,.25);
    }
    body.app.real, body.auth.real.photo { background-attachment: scroll; }
    .tabbar { left: 50%; right: auto; width: 430px; transform: translateX(-50%); }
    .auth-bg { left: 50%; right: auto; width: 430px; transform: translateX(-50%); }
    .auth.photo .real-main { max-width: none; margin-left: 0; margin-right: 0; }
  }

  /* ---------- Home: 5 columns once there are more than 8 services (keeps Home on one screen) ---------- */
  .menu:has(> .tile:nth-child(9)) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 4px; }
  :root[data-skin] .app.real .menu:has(> .tile:nth-child(9)) .tile { font-size: 11.5px; padding-inline: 0; }
  :root[data-skin] .app.real .menu:has(> .tile:nth-child(9)) .tile .ic { width: 46px; height: 46px; border-radius: 15px; }
  :root[data-skin="b"] .app.real .menu:has(> .tile:nth-child(9)) .tile .ic { width: 30px; height: 30px; }
  :root[data-skin="b"] .app.real .menu:has(> .tile:nth-child(9)) { gap: 0; }
  :root[data-skin="b"] .app.real .menu:has(> .tile:nth-child(9)) .tile { border-right: 1px solid #24302a; border-bottom: 1px solid #24302a; }
  :root[data-skin="b"] .app.real .menu:has(> .tile:nth-child(9)) .tile:nth-child(5n) { border-right: 0; }
  :root[data-skin="b"] .app.real .menu:has(> .tile:nth-child(9)) .tile:nth-child(n+6) { border-bottom: 0; }
  :root[data-skin="c"] .app.real .menu:has(> .tile:nth-child(9)) { gap: 8px; }
  :root[data-skin="c"] .app.real .menu:has(> .tile:nth-child(9)) .tile { padding: 10px 0 8px; border-radius: 16px; }
  :root[data-skin="c"] .app.real .menu:has(> .tile:nth-child(9)) .tile .ic { width: 40px; height: 40px; border-radius: 13px; }
  :root[data-skin="c"] .app.real .tile:nth-child(9) .ic { background: linear-gradient(135deg, #ff4d6d, #ff8fa3); }
  :root[data-skin="c"] .app.real .tile:nth-child(10) .ic { background: linear-gradient(135deg, #0f9d58, #34c38f); }

  /* ---------- Offers ---------- */
  .chips a { flex: none; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; text-decoration: none; }
  .offer { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px; color: var(--ink); text-decoration: none; }
  .offer .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .offer strong { font-size: 14.5px; line-height: 1.3; }
  .offer small { color: var(--muted); font-size: 12px; }
  .offer-logo { flex: none; width: 56px; height: 56px; border-radius: 14px; background: #ffffff; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
  .offer-logo img { width: 100%; height: 100%; object-fit: contain; }
  .offer-badge { flex: none; max-width: 92px; text-align: center; background: #fff2d4; color: #7a4f00; border-radius: 10px; padding: 6px 8px; font-size: 12.5px; font-weight: 800; line-height: 1.2; }
  :root[data-skin="b"] .app.real .offer { background: #121815; border-color: #24302a; }
  :root[data-skin="b"] .app.real .offer-badge { background: linear-gradient(135deg, #f2dc9b, #cfae62); color: #1b1408; }
  :root[data-skin="c"] .app.real .offer { border: 0; border-radius: 20px; box-shadow: 0 6px 16px -12px rgba(20,22,31,.35); }
  :root[data-skin="c"] .app.real .offer-badge { background: linear-gradient(135deg, #ff7a1a, #ffb300); color: #ffffff; }

  .counter { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
  .counter-offer { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
  .counter-offer .body { flex: 1; min-width: 0; }
  .counter-offer small { display: block; color: var(--muted); font-size: 12px; }
  .counter-offer strong { font-size: 14.5px; line-height: 1.3; }
  .counter-member { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; }
  .counter-member img { width: 58px; height: 68px; object-fit: cover; border-radius: 10px; border: 2px solid var(--line); }
  .counter-member strong { display: block; font-size: 15px; line-height: 1.25; text-transform: uppercase; }
  .counter-member span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
  .counter-member .st { display: inline-block; margin-top: 6px; }
  .counter-qr { background: #ffffff; padding: 10px; border-radius: 14px; border: 1px solid var(--line); }
  .counter-qr img, .counter-qr canvas { display: block; }
  .counter-hint { margin: 0; font-size: 13px; color: var(--muted); max-width: 30ch; }
  .counter-clock { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; background: var(--success-bg); color: var(--success); border-radius: 999px; padding: 6px 14px; }

  /* ---------- Verify (public, partner staff) ---------- */
  .verify { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 6px 0; }
  .verify h2 { margin: 6px 0 0; font-size: 20px; text-transform: uppercase; }
  .verify h2::after { display: none !important; }
  .verify p { margin: 0; color: var(--muted); font-size: 14px; }
  .verify-photo { width: 104px; height: 124px; object-fit: cover; border-radius: 14px; border: 3px solid #ffffff; box-shadow: 0 0 0 2px currentColor; }
  .verify.good { color: #0b7353; } .verify.bad { color: #c62828; }
  .verify-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; padding: 10px 18px; border-radius: 999px; background: currentColor; margin: 6px 0; }
  .verify-status span, .verify-status svg { color: #ffffff; }
  .verify-status svg { width: 22px; height: 22px; }
  .verify-id { color: var(--ink) !important; }
  .verify-time { font-size: 12px !important; }
  .verify .tick { color: #c62828; background: #fdecea; }

  /* ---------- Prayer ---------- */
  .prayer-hero .pr-place { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; opacity: .9; }
  .prayer-hero .pr-place svg { width: 16px; height: 16px; }
  .pr-label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; font-weight: 700; }
  .pr-next { font-size: 26px; font-weight: 800; line-height: 1.2; }
  .pr-next b { font-weight: 800; opacity: .9; }
  .pr-count { font-size: 14px; opacity: .85; font-variant-numeric: tabular-nums; }
  .pr-date { font-size: 12.5px; opacity: .75; }
  .pr-list { padding-block: 4px; }
  .pr-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line); font-size: 15px; }
  .pr-row:last-child { border-bottom: 0; }
  .pr-row b { font-variant-numeric: tabular-nums; }
  .pr-row.minor { color: var(--muted); font-size: 13.5px; }
  .pr-row.past { color: var(--muted); }
  .pr-row.next { background: var(--success-bg); color: var(--success); margin: 2px -8px; padding: 12px; border-radius: 12px; border-bottom-color: transparent; font-weight: 700; }
  .qibla { display: flex; align-items: center; gap: 14px; }
  .qibla-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
  .qibla-text h3 { margin: 0; }
  .qibla-text p { margin: 0; font-size: 13px; }
  .qibla-note { font-size: 12px !important; }
  .dial { flex: none; position: relative; width: 148px; height: 148px; border-radius: 50%; border: 2px solid var(--line); background: radial-gradient(circle, var(--surface) 55%, var(--field) 100%); transition: transform .2s linear; }
  .dial span { position: absolute; font-size: 11px; font-weight: 800; color: var(--muted); }
  .dial .n { top: 6px; left: 50%; transform: translateX(-50%); color: #c62828; } .dial .s { bottom: 6px; left: 50%; transform: translateX(-50%); }
  .dial .e { right: 8px; top: 50%; transform: translateY(-50%); } .dial .w { left: 8px; top: 50%; transform: translateY(-50%); }
  .dial .needle { position: absolute; inset: 0; }
  .dial .needle i { position: absolute; left: 50%; top: 20px; bottom: 50%; width: 4px; margin-left: -2px; border-radius: 4px; background: var(--brand); }
  .dial .needle i::before { content: ""; position: absolute; left: 50%; top: -8px; margin-left: -7px; border: 7px solid transparent; border-bottom: 10px solid var(--brand); border-top: 0; }
  .dial .kaaba { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; background: #1b1b1b; border-top: 3px solid #d4af37; border-radius: 2px; }
  .dial.aligned { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent); }
  .pr-table-wrap { padding: 4px 6px; overflow-x: auto; }
  .pr-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
  .pr-table th { text-align: left; color: var(--muted); font-weight: 700; font-size: 11px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
  .pr-table td { padding: 8px 4px; border-bottom: 1px solid var(--line); white-space: nowrap; }
  .pr-table tr:last-child td { border-bottom: 0; }
  .pr-table tr.on td { color: var(--brand); font-weight: 700; }

  :root[data-skin] body.auth .sheet .verify h2 { font-size: 22px; letter-spacing: -.01em; line-height: 1.2; }

  /* same 5-column layout without :has(), for older phone browsers (Home adds cols-5 when there are more than 8 services) */
  .menu.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 4px; }
  :root[data-skin] .app.real .menu.cols-5 .tile { font-size: 11.5px; padding-inline: 0; }
  :root[data-skin] .app.real .menu.cols-5 .tile .ic { width: 46px; height: 46px; border-radius: 15px; }
  :root[data-skin="b"] .app.real .menu.cols-5 .tile .ic { width: 30px; height: 30px; }
  :root[data-skin="b"] .app.real .menu.cols-5 { gap: 0; }
  :root[data-skin="b"] .app.real .menu.cols-5 .tile { border-right: 1px solid #24302a; border-bottom: 1px solid #24302a; }
  :root[data-skin="b"] .app.real .menu.cols-5 .tile:nth-child(5n) { border-right: 0; }
  :root[data-skin="b"] .app.real .menu.cols-5 .tile:nth-child(n+6) { border-bottom: 0; }
  :root[data-skin="c"] .app.real .menu.cols-5 { gap: 8px; }
  :root[data-skin="c"] .app.real .menu.cols-5 .tile { padding: 10px 0 8px; border-radius: 16px; }
  :root[data-skin="c"] .app.real .menu.cols-5 .tile .ic { width: 40px; height: 40px; border-radius: 13px; }

  /* ---------- Sponsor loyalty cards (Loyalty.aspx) ---------- */
  .lcard {
    position: relative; overflow: hidden; cursor: pointer; color: #ffffff; border-radius: 20px; padding: 16px;
    background: radial-gradient(90% 120% at 100% 0%, rgba(255,255,255,.18), transparent 55%), linear-gradient(135deg, var(--c1), var(--c2));
    box-shadow: 0 18px 34px -18px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 10px;
  }
  .lcard::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.07); pointer-events: none; }
  .lc-top { display: flex; align-items: center; gap: 10px; }
  .lc-logo { flex: none; width: 40px; height: 40px; border-radius: 10px; background: #ffffff; display: grid; place-items: center; overflow: hidden; }
  .lc-logo img { width: 100%; height: 100%; object-fit: contain; }
  .lc-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  .lc-name b { font-size: 15px; } .lc-name small { font-size: 12px; opacity: .8; }
  .lc-kmcc { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .14em; padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); }
  .lc-points b { font-size: 28px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin-right: 6px; }
  .lc-points span { font-size: 13px; opacity: .85; }
  .lc-number { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 15px; letter-spacing: .12em; opacity: .95; }
  .lc-code { display: none; background: #ffffff; border-radius: 12px; padding: 12px; justify-content: center; position: relative; z-index: 1; }
  .lc-code svg { width: 100%; max-width: 300px; height: 70px; }
  .lc-code img, .lc-code canvas { display: block; }
  .lcard.open .lc-code { display: flex; }
  .lc-hint { font-size: 11.5px; opacity: .75; }
  .lcard.open .lc-hint { display: none; }
  .lc-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 4px; margin-top: -4px; font-size: 13px; }
  .lc-add { display: flex; flex-direction: column; gap: 10px; border-left: 4px solid var(--c1) !important; }
  .lc-add-head { display: flex; align-items: center; gap: 10px; }
  .lc-add-head .lc-logo { border: 1px solid var(--line); }
  .lc-add-head b { display: block; font-size: 15px; } .lc-add-head small { display: block; font-size: 12px; }
  .lc-add p { margin: 0; font-size: 13px; }
  .lc-or { text-align: center; font-size: 12px; color: var(--muted); }
  .lc-form { display: flex; gap: 8px; align-items: stretch; }
  .lc-form .control { flex: 1; min-width: 0; }
  .lc-form .control input { padding: 11px 0; }
  .lc-form .mini-btn { padding-inline: 14px; }
  .control input { width: 100%; }

  /* ---------- Chat ---------- */
  .tab { position: relative; }
  .tab-badge { position: absolute; top: 0; left: 50%; margin-left: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e5484d; color: #ffffff; font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--nav-bg, #ffffff); }
  .chat-new { display: flex; gap: 8px; align-items: center; padding: 8px; }
  .chat-new .control { flex: 1; min-width: 0; border-radius: 12px; }
  .chat-new .control input { padding: 10px 0; font-size: 15px; }
  .chat-row .avatar { font-size: 14px; }
  .chat-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-row.unread strong { font-weight: 800; }
  .chat-row.unread small { color: var(--ink); }
  .chat-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .chat-meta small { font-size: 11.5px; color: var(--muted); }
  .chat-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: #ffffff; font-size: 11.5px; line-height: 20px; text-align: center; }
  :root[data-skin="b"] .app.real .chat-count { color: #1b1408; }

  .chat-main { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .chat-tools { display: flex; justify-content: flex-end; }
  .chat-log { display: flex; flex-direction: column; gap: 6px; }
  .chat-empty { text-align: center; color: var(--muted); font-size: 13.5px; padding: 26px 18px; background: var(--surface); border: 1px dashed var(--line); border-radius: 16px; }
  .chat-day { align-self: center; font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; margin: 8px 0 2px; }
  .msg { max-width: 82%; align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; padding: 8px 12px 6px; cursor: pointer; }
  .msg.mine { align-self: flex-end; background: var(--brand); border-color: transparent; color: #ffffff; border-radius: 16px 16px 4px 16px; }
  :root[data-skin="b"] .app.real .msg.mine { background: linear-gradient(135deg, #f2dc9b, #cfae62); color: #1b1408; }
  :root[data-skin="c"] .app.real .msg.mine { background: linear-gradient(135deg, #00a86b, #00c2a8); }
  .msg .who { font-size: 12px; font-weight: 800; color: var(--brand); margin-bottom: 2px; }
  .msg.staff .who { color: #b06d00; }
  .staff-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: #fff2d4; color: #7a4f00; border-radius: 5px; padding: 1px 5px; vertical-align: 1px; }
  .msg .text { font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
  .msg .time { font-size: 10.5px; opacity: .65; text-align: right; margin-top: 2px; }
  .msg.deleted { cursor: default; opacity: .7; }
  .msg.deleted .text { font-style: italic; }
  .msg-actions { display: flex; gap: 6px; align-self: flex-start; margin: -2px 0 4px; }
  .msg-actions.mine { align-self: flex-end; }
  .msg-actions button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; }

  .chat-compose {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    display: flex; align-items: flex-end; gap: 8px;
    padding: 10px max(12px, env(safe-area-inset-left, 0px)) calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -18px rgba(0,0,0,.35);
  }
  .chat-compose textarea { flex: 1; min-width: 0; resize: none; border: 1.5px solid var(--line); background: var(--field); color: var(--ink); border-radius: 20px; padding: 10px 14px; font: inherit; font-size: 16px; line-height: 1.35; max-height: 120px; }
  .chat-compose textarea:focus { outline: 0; border-color: var(--brand); }
  .chat-compose button { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--brand); color: #ffffff; display: grid; place-items: center; cursor: pointer; }
  :root[data-skin="b"] .app.real .chat-compose button { background: linear-gradient(135deg, #f2dc9b, #cfae62); color: #1b1408; }
  :root[data-skin="c"] .app.real .chat-compose button { background: linear-gradient(135deg, #00a86b, #00c2a8); }
  .chat-compose button svg { width: 21px; height: 21px; }
  .chat-compose button[disabled] { opacity: .6; }
  .chat-readonly { flex: 1; text-align: center; color: var(--muted); font-size: 13.5px; padding: 10px; }
  @media (min-width: 600px) { .chat-compose { left: 50%; right: auto; width: 430px; transform: translateX(-50%); } }

  a.item { color: var(--ink); }

  /* ---------- KMCC pop-up (kmccConfirm / kmccAlert in kmcc.js) ---------- */
  .kdlg { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px;
    background: rgba(4, 22, 15, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .18s; }
  .kdlg.show { opacity: 1; }
  .kdlg-box { width: 100%; max-width: 340px; background: var(--surface, #fff); color: var(--ink, #13221b); border-radius: 24px;
    padding: 46px 20px 18px; text-align: center; position: relative; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5);
    transform: translateY(14px) scale(.97); transition: transform .2s cubic-bezier(.2,.9,.3,1); border-top: 4px solid var(--brand, #0b7353); }
  .kdlg.show .kdlg-box { transform: none; }
  .kdlg-logo { position: absolute; left: 50%; top: -34px; width: 68px; height: 68px; margin-left: -34px; border-radius: 50%; background: #fff;
    display: grid; place-items: center; box-shadow: 0 0 0 4px var(--surface, #fff), 0 8px 20px -6px rgba(0,0,0,.35); overflow: hidden; }
  .kdlg-logo img { width: 54px; height: auto; display: block; }
  .kdlg-title { font-weight: 800; font-size: 17px; margin-bottom: 4px; }
  .kdlg-msg { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--ink, #13221b); }
  .kdlg-btns { display: flex; gap: 10px; }
  .kdlg-btns button { flex: 1; border: 0; border-radius: 14px; padding: 13px 10px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
  .kdlg-cancel { background: var(--field, #f2f5f3); color: var(--ink, #13221b); border: 1px solid var(--line, #e2e8e5) !important; }
  .kdlg-ok { background: var(--brand, #0b7353); color: #fff; }
  .kdlg-ok.danger { background: #c62828; }
  :root[data-skin="b"] .kdlg-box { border-top-color: #cfae62; }
  :root[data-skin="b"] .kdlg-ok:not(.danger) { background: linear-gradient(135deg, #f2dc9b, #cfae62); color: #1b1408; }
  :root[data-skin="c"] .kdlg-ok:not(.danger) { background: linear-gradient(90deg, #00a86b, #00c2a8); }
  :root[data-skin="c"] .kdlg-box { border-top-color: #00c2a8; }

  /* ---------- Voice messages ---------- */
  .chat-compose { position: fixed; }
  .chat-compose [hidden] { display: none !important; }
  .chat-compose .mic { background: var(--field); color: var(--brand); border: 1.5px solid var(--line); }
  :root[data-skin] .app.real .chat-compose .mic { background: var(--field); color: var(--brand); }
  :root[data-skin="b"] .app.real .chat-compose .mic { color: #cfae62; }
  .rec-bar { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); }
  .rec-bar .rec-cancel { background: transparent !important; color: #c62828 !important; border: 1.5px solid #f2c4c4 !important; }
  .rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #e5484d; animation: recblink 1s infinite; }
  .rec-time { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 40px; }
  .rec-label { flex: 1; color: var(--muted); font-size: 13.5px; }
  @keyframes recblink { 50% { opacity: .25; } }

  .voice { display: flex; align-items: center; gap: 10px; min-width: 200px; padding: 2px 0; }
  .vplay { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; position: relative;
    background: var(--brand); }
  .vplay::before { content: ""; position: absolute; left: 14px; top: 11px; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
  .voice.on .vplay::before { left: 12px; top: 11px; width: 4px; height: 14px; border: 0; background: #fff; box-shadow: 7px 0 0 #fff; }
  .msg.mine .vplay { background: #ffffff; }
  .msg.mine .vplay::before { border-left-color: var(--brand); }
  .msg.mine .voice.on .vplay::before { background: var(--brand); box-shadow: 7px 0 0 var(--brand); }
  .vbar { flex: 1; height: 4px; border-radius: 4px; background: rgba(127,127,127,.3); overflow: hidden; }
  .vbar i { display: block; height: 100%; width: 0; background: currentColor; transition: width .2s linear; }
  .vtime { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .8; min-width: 30px; text-align: right; }
  :root[data-skin="b"] .app.real .msg.mine .vplay::before { border-left-color: #1b1408; }
  :root[data-skin="b"] .app.real .msg:not(.mine) .vplay { background: #cfae62; }

  /* Qibla dial: KMCC logo in the centre (kept upright while the dial turns) */
  .dial { width: 164px; height: 164px; }
  .dial .needle i { top: 18px; }
  .dial-logo { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
    background: #ffffff; display: grid; place-items: center; overflow: hidden; z-index: 2;
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line), 0 6px 14px -6px rgba(0,0,0,.35); transition: transform .2s linear; }
  .dial-logo img { width: 46px; height: auto; display: block; }
  #btnCompass.on { border-color: var(--brand); color: var(--brand); }

  .lc-pending .lc-logo { width: 46px; height: 46px; border: 1px solid var(--line); }
  .lc-pending small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .lc-pending .pill { flex: none; background: var(--field); color: var(--muted); }

  /* ---------- Home: buttons per row (AppSettings) ---------- */
  .menu.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .menu.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .menu.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  /* ---------- Home banners (admin: Home banners) ---------- */
  .banners { position: relative; }
  .banner-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 16px; }
  .banner-track::-webkit-scrollbar { display: none; }
  .banner {
    flex: 0 0 100%; scroll-snap-align: start; height: 86px; border-radius: 16px; position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 10px; padding: 0 16px; color: #ffffff; text-decoration: none;
    background: radial-gradient(90% 140% at 100% 0%, rgba(255,255,255,.18), transparent 60%), linear-gradient(135deg, var(--b1), var(--b2));
    background-size: cover; background-position: center;
  }
  .banner.has-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.05) 75%); }
  .banner > * { position: relative; }
  .banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .banner-text b { font-size: 16px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
  .banner-text small { font-size: 12.5px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .banner-go { flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; }
  .banner-go svg { width: 16px; height: 16px; }
  .banner-dots { position: absolute; left: 0; right: 0; bottom: 7px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
  .banner-dots i { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.5); transition: width .2s; pointer-events: auto; cursor: pointer; }
  .banner-dots i.on { width: 16px; background: #ffffff; }
  @media (max-height: 700px) { .banner { height: 72px; } }

  /* ---------- My Card: the ID card alone, full screen ---------- */
  body.app.real.mycard-page { margin: 0; min-height: 100vh; overflow: hidden; max-width: none !important; box-shadow: none !important;
    background: radial-gradient(90% 60% at 50% 0%, #0f4a36 0%, #04170f 70%) fixed, #04170f !important; }
  :root[data-skin="b"] body.app.real.mycard-page { background: radial-gradient(90% 60% at 50% 0%, #10372a 0%, #050806 70%) fixed, #050806 !important; }
  :root[data-skin="c"] body.app.real.mycard-page { background: linear-gradient(160deg, #00a86b, #00788f) fixed !important; }
  .mycard-stage { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden; }
  .mycard-fit { width: 360px; transform-origin: center center; transition: transform .25s ease; will-change: transform; }
  .mycard-fit .idcard { width: 100%; }
  .mycard-fit .face { box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); }
  .mycard-close { position: absolute; z-index: 3; top: max(14px, env(safe-area-inset-top, 0px)); left: 14px; width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center; color: #ffffff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); }
  .mycard-close svg { width: 22px; height: 22px; }
  .mycard-hint { position: absolute; z-index: 3; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom, 0px)); margin: 0; text-align: center;
    color: rgba(255,255,255,.75); font-size: 13.5px; font-weight: 600; }
  body.upright .mycard-close { top: auto; bottom: max(14px, env(safe-area-inset-bottom, 0px)); left: auto; right: 14px; transform: rotate(90deg); }
  body.upright .mycard-hint { left: -114px; right: auto; bottom: 50%; width: 260px; transform: rotate(90deg); }

  .sponsor-open { cursor: pointer; }
  .sponsor-actions { display: flex; gap: 8px; justify-content: center; }
  .sponsor-actions:empty { display: none; }

  /* ---------- News: real pictures (work in Android web views too) and the full story ---------- */
  a.news-hero { display: block; text-decoration: none; color: var(--ink); }
  .news-hero .art { height: auto; aspect-ratio: 16 / 9; overflow: hidden; }
  .news-hero .art img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
  .news-preview { font-size: 13.5px; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .news-row .thumb { overflow: hidden; }
  .news-row .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .news-story { padding: 0; overflow: hidden; }
  .news-story-img { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: cover; }
  .news-story-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
  .news-story-body h2 { margin: 2px 0 0; font-size: 20px; line-height: 1.35; }
  .news-story-body .pill { align-self: flex-start; }
  .news-story .article { margin-top: 6px; overflow-wrap: anywhere; }
  .news-story .article p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.75; }

/* sponsor promotional pictures (admin: Sponsor promotions) */
.promo-strip { display: flex; gap: 10px; width: calc(100% + 28px); margin: 4px -14px -4px; padding: 2px 14px 6px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; text-align: left; }
.promo-strip::-webkit-scrollbar { display: none; }
.promo { flex: 0 0 86%; margin: 0; scroll-snap-align: center; border-radius: 14px; overflow: hidden; background: var(--surface-2, #f1f4f2); box-shadow: 0 2px 10px rgba(0,0,0,.08); position: relative; }
.promo-strip.single .promo { flex-basis: 100%; }
.sponsor-big .promo img { width: 100%; max-width: none; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 0; }
.promo figcaption { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px 10px; }
.promo figcaption b { font-size: 14px; line-height: 1.25; }
.promo figcaption small { font-size: 12px; opacity: .7; }
.sponsor-open.flash { animation: sponsorFlash 1.6s ease-out 1; }
@keyframes sponsorFlash { 0%, 40% { box-shadow: 0 0 0 3px var(--gold, #d4a017); } 100% { box-shadow: none; } }

/* ---------- Committee page: Stylish (photos in rows) / Classic (list) ---------- */
.cm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cm-title { min-width: 0; display: flex; flex-direction: column; }
.cm-title b { font-family: var(--font-display); font-size: 16px; line-height: 1.25; }
.cm-title small { color: var(--muted); font-size: 12px; }
.cm-view { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 3px; gap: 2px; }
.cm-view button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 99px; cursor: pointer; }
.cm-view button.on { background: var(--brand); color: #fff; }
:root[data-cm-view="stylish"] .cm-classic, :root[data-cm-view="classic"] .cm-stylish { display: none; }
:root:not([data-cm-view]) .cm-classic { display: none; }
.cm-stylish { display: flex; flex-direction: column; gap: 12px; }
.cm-rowlabel { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 4px 2px 0; }
.cm-row { display: grid; gap: 10px; }
.cm-row.n1 { grid-template-columns: 1fr; } .cm-row.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cm-row.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cm-row.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cm-row.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cm-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 12px 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; box-shadow: 0 6px 18px -12px rgba(7, 82, 57, .45); }
.cm-photo { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; flex: none;
  background: linear-gradient(150deg, var(--brand-light), var(--brand-deep)); color: #fff; border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--gold); }
.cm-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.cm-photo i { font-style: normal; font-weight: 800; font-size: 18px; }
.cm-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; }
.cm-text b { font-size: 12.5px; line-height: 1.2; overflow-wrap: anywhere; }
.cm-text small { font-size: 11px; line-height: 1.2; color: var(--brand); font-weight: 700; }
.cm-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.cm-btn { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; flex: none; }
.cm-btn svg { width: 16px; height: 16px; }
.cm-btn.call { background: var(--field); color: var(--brand); border: 1px solid var(--line); }
.cm-btn.wa { background: #1fae5b; color: #fff; }
.cm-btn.chat { background: color-mix(in srgb, var(--gold) 35%, var(--surface)); color: var(--ink); }
.cm-you { font-size: 11px; font-weight: 700; color: var(--muted); padding: 6px 0; }
/* first line: one big card with photo on the left */
.cm-row.n1 .cm-card { display: grid; grid-template-columns: auto minmax(0, 1fr); text-align: left; justify-items: start; align-items: center; gap: 4px 14px; padding: 14px;
  background: linear-gradient(135deg, var(--surface) 55%, color-mix(in srgb, var(--gold) 22%, var(--surface))); }
.cm-row.n1 .cm-photo { width: 84px; height: 84px; grid-row: span 2; }
.cm-row.n1 .cm-photo i { font-size: 24px; }
.cm-row.n1 .cm-text b { font-size: 16px; } .cm-row.n1 .cm-text small { font-size: 12.5px; }
.cm-row.n1 .cm-acts { justify-content: flex-start; }
.cm-row.n1 .cm-btn { width: auto; height: 32px; border-radius: 99px; padding: 0 12px; font-size: 12px; font-weight: 700; }
.cm-row.n2 .cm-photo { width: 74px; height: 74px; }
.cm-row.n4 .cm-card, .cm-row.n5 .cm-card { padding: 10px 4px 8px; border-radius: 14px; }
.cm-row.n4 .cm-photo { width: 50px; height: 50px; } .cm-row.n5 .cm-photo { width: 44px; height: 44px; box-shadow: 0 0 0 1.5px var(--gold); }
.cm-row.n4 .cm-photo i, .cm-row.n5 .cm-photo i { font-size: 14px; }
.cm-row.n4 .cm-text b, .cm-row.n5 .cm-text b { font-size: 10.5px; } .cm-row.n4 .cm-text small, .cm-row.n5 .cm-text small { font-size: 9.5px; }
.cm-row.n4 .cm-acts, .cm-row.n5 .cm-acts { gap: 3px; }
.cm-row.n4 .cm-btn, .cm-row.n5 .cm-btn { width: 24px; height: 24px; } .cm-row.n4 .cm-btn svg, .cm-row.n5 .cm-btn svg { width: 13px; height: 13px; }
/* classic list: photo avatar and the three buttons */
.cm-classic .avatar { position: relative; overflow: hidden; }
.cm-classic .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.cm-classic .avatar i { font-style: normal; }
.cm-classic .item .cm-acts { flex-wrap: nowrap; gap: 5px; }

/* ---------- registration / profile form in steps (Join, Profile details) ---------- */
.mf-step { display: flex; flex-direction: column; gap: 14px; }
.mf-step h3 { margin: 0; display: flex; flex-direction: column; gap: 2px; font-family: var(--font-display); font-size: 18px; }
.mf-step h3 span { font-family: var(--font-body); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.mf-note { margin: -6px 0 0; font-size: 13px; }
.mf .req, .field .req { color: var(--danger); font-style: normal; }
.control textarea, .control select { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; padding: 13px 0; resize: vertical; }
.control textarea { min-height: 72px; line-height: 1.45; }
.control input[type="date"] { min-height: 48px; }
.control.readonly { background: transparent; border-style: dashed; padding: 13px 14px; justify-content: space-between; color: var(--ink); }
.control.readonly span { overflow-wrap: anywhere; white-space: pre-line; }
.control.readonly svg { width: 16px; height: 16px; opacity: .55; }
.field .hint { color: var(--muted); font-size: 12px; padding-left: 4px; }
.auth .field .hint { padding-left: 14px; }
.auth .control textarea { font-family: var(--auth-font); font-size: 15.5px; }
.auth .control:has(textarea) { border-radius: 20px; }
.same-addr { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); padding-left: 4px; cursor: pointer; }
.mf-dots { margin-bottom: 2px; }
.mf-dots div { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-dots div.now { color: var(--ink); }
.mf-nav { display: flex; gap: 10px; }
.mf-nav .btn { flex: 1; }
.mf-nav .btn[hidden] { display: none; }
.btn.ghost { background: transparent; color: var(--brand); border: 1.5px solid var(--line); box-shadow: none; }
.auth .btn.ghost { background: #fff; color: #0b7353; border: 1.5px solid #d7e6de; }
.photo-pick.invalid { border-color: var(--danger); }
.mf-section { display: flex; flex-direction: column; gap: 14px; }
.mf-section + .mf-section { padding-top: 6px; }
.mf-photo-panel { display: flex; align-items: center; gap: 14px; }
.mf-photo { width: 76px; height: 92px; border-radius: 12px; overflow: hidden; flex: none; background: var(--field); box-shadow: 0 0 0 2px var(--gold); }
.mf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mf-photo-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; align-items: flex-start; }
.mf-photo-text small { color: var(--muted); font-size: 12px; }
.mf-photo-btn { cursor: pointer; margin-top: 4px; }
.page-msg.ok { background: var(--success-bg); color: var(--success); }

/* ---------- Prayer: KMCC logo on top and the share picture ---------- */
.pr-brand { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.16); }
.pr-logo { width: 46px; height: 46px; border-radius: 13px; background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; box-shadow: 0 0 0 2px var(--gold); }
.pr-logo img { width: 40px; height: 40px; object-fit: contain; }
.pr-brand-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.pr-brand-text b { font-family: var(--font-display); font-size: 16px; }
.pr-brand-text small { font-size: 12px; opacity: .8; }
.pr-share { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 9px 14px; background: var(--gold); color: #2a2000; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.pr-share svg { width: 16px; height: 16px; }
.pr-sheet { position: fixed; inset: 0; z-index: 80; background: rgba(4, 20, 13, .62); display: grid; place-items: end center; padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.pr-sheet[hidden] { display: none; }
.pr-sheet-box { width: 100%; max-width: 440px; max-height: 100%; overflow-y: auto; background: var(--surface); color: var(--ink); border-radius: 24px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.pr-sheet-box h3 { margin: 0; font-family: var(--font-display); font-size: 17px; }
.pr-sheet-box img { width: 100%; max-height: 52vh; object-fit: contain; border-radius: 14px; background: var(--field); }
.pr-sheet-actions { display: flex; flex-direction: column; gap: 8px; }
.pr-sheet-actions .chip { align-self: center; }
.pr-sheet-actions .btn svg { width: 18px; height: 18px; }
.pr-sheet-actions .btn.pr-wa, :root[data-skin] .app.real .pr-sheet-actions .btn.pr-wa { background: #1fae5b !important; color: #fff !important; border: 0; text-decoration: none; text-align: center; }

/* ---------- Prayer reminders ---------- */
.pr-remind { display: flex; flex-direction: column; gap: 12px; }
.pr-remind-head { display: flex; align-items: center; gap: 12px; }
.pr-remind-head .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pr-remind-head small { color: var(--muted); font-size: 12px; }
.pr-remind-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--success-bg); color: var(--brand); display: grid; place-items: center; flex: none; }
.pr-remind-ic svg { width: 20px; height: 20px; }
.pr-remind .pr-switch { position: relative; width: 48px; height: 28px; flex: none; }
.pr-remind .pr-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.pr-remind .pr-switch .track { position: absolute; inset: 0; border-radius: 99px; background: var(--line); transition: background .2s; }
.pr-remind .pr-switch .track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.pr-remind .pr-switch input:checked + .track { background: var(--brand); }
.pr-remind .pr-switch input:checked + .track::after { transform: translateX(20px); }
.pr-remind .pr-switch input:focus-visible + .track { outline: 2px solid var(--gold); outline-offset: 2px; }
.pr-remind-body { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.pr-remind-body[hidden] { display: none; }
.pr-remind-label { font-size: 12px; font-weight: 700; color: var(--muted); }
.pr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-chip { border: 1.5px solid var(--line); background: var(--field); color: var(--muted); border-radius: 99px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pr-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pr-remind-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.pr-remind-row label { font-weight: 600; }
.pr-remind-row select { border: 1.5px solid var(--line); background: var(--field); color: var(--ink); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 14px; }
.pr-remind-row.check input { width: 20px; height: 20px; accent-color: var(--brand); }
.pr-remind-next { font-size: 12.5px; color: var(--brand); font-weight: 700; }
.pr-remind .chip { align-self: flex-start; }

/* ---------- chat: pictures, audio files, member groups, mute ---------- */
.chat-tools { flex-wrap: wrap; gap: 8px; align-items: center; }
.chat-about { flex: 1 1 100%; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.chat-compose .attach, :root[data-skin] .app.real .chat-compose .attach { background: transparent; color: var(--brand); border: 0; width: 38px; }
.chat-compose .attach svg { width: 23px; height: 23px; }
.chat-img { display: block; width: 240px; max-width: 100%; height: auto; border-radius: 12px; background: var(--field); cursor: zoom-in; object-fit: cover; margin-top: 2px; }
.msg .chat-img + .text { margin-top: 6px; }
.audio-file { display: flex; flex-direction: column; gap: 1px; padding: 2px 2px 4px; max-width: 230px; }
.audio-file .af-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-file .af-name::before { content: "\266B  "; color: var(--brand); }
.audio-file small { font-size: 11px; color: var(--muted); }
.attach-sheet { position: fixed; inset: 0; z-index: 70; background: rgba(4,20,13,.5); display: flex; align-items: flex-end; justify-content: center; }
.attach-sheet[hidden] { display: none; }
.attach-box { width: 100%; max-width: 430px; background: var(--surface); color: var(--ink); border-radius: 22px 22px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px; }
.attach-box b { font-family: var(--font-display); font-size: 16px; }
.attach-box small { color: var(--muted); font-size: 12px; text-align: center; }
.attach-box .chip { align-self: center; }
.attach-opts { display: flex; justify-content: space-around; gap: 10px; }
.attach-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.attach-opt span { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; color: #fff; }
.attach-opt span svg { width: 26px; height: 26px; }
.img-viewer { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.92); display: grid; place-items: center; padding: 16px; }
.img-viewer[hidden] { display: none; }
.img-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.img-close { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 18px; cursor: pointer; }
.grp-av { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font-weight: 800; border-radius: inherit; }

/* ---------- Quiz, Voting, Meetings ---------- */
.act-card { display: flex; flex-direction: column; gap: 8px; color: inherit; text-decoration: none; }
.act-card.hot { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: 0 10px 26px -18px rgba(7, 82, 57, .6); }
.act-card h3 { margin: 0; font-family: var(--font-display); font-size: 17px; line-height: 1.3; }
.act-card p { margin: 0; }
.act-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.act-row small { color: var(--muted); font-size: 12px; }
.act-pill { font-size: 11.5px; font-weight: 800; border-radius: 99px; padding: 4px 10px; background: var(--field); color: var(--muted); white-space: nowrap; }
.act-pill.open { background: var(--success-bg); color: var(--success); }
.act-pill.soon { background: color-mix(in srgb, var(--gold) 30%, var(--surface)); color: var(--ink); }
.act-pill.gold { background: var(--gold); color: #2a2000; }
.act-meta { font-size: 13px; color: var(--muted); }
.act-done { font-size: 13.5px; color: var(--brand); font-weight: 700; }
.act-winners { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.act-winners p { font-size: 13.5px; line-height: 1.5; }
.act-board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.act-board li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.act-board .medal { width: 24px; text-align: center; font-weight: 800; }
.act-board .n { flex: 1; min-width: 0; font-weight: 700; }
.act-board small { color: var(--muted); font-variant-numeric: tabular-nums; }
.act-hero { display: flex; flex-direction: column; gap: 8px; }
.act-hero h2 { margin: 0; font-family: var(--font-display); font-size: 21px; line-height: 1.25; }
.act-hero small { opacity: .85; }
.act-hero .act-row small { color: inherit; }

.quiz-play { display: flex; flex-direction: column; gap: 10px; background: radial-gradient(120% 100% at 100% 0%, var(--brand-light), var(--brand-deep) 70%); color: #fff; border: 0; }
.quiz-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; opacity: .9; font-variant-numeric: tabular-nums; }
.quiz-timer { height: 6px; border-radius: 99px; background: rgba(255,255,255,.25); overflow: hidden; }
.quiz-timer i { display: block; height: 100%; width: 100%; background: var(--gold); transition: width 1s linear; }
.quiz-q { margin: 0; font-family: var(--font-display); font-size: 19px; line-height: 1.35; }
.quiz-opt { text-align: left; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 16px; padding: 15px 14px; font: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer; }
.quiz-opt:disabled { cursor: default; }
.quiz-opt.right { border-color: var(--success); background: var(--success-bg); color: var(--success); }
.quiz-opt.wrong { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.quiz-result { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 10px 0; }
.quiz-result .big { font-size: 46px; } .quiz-result b { font-family: var(--font-display); font-size: 30px; } .quiz-result small { opacity: .8; }

.vote-opt { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; padding: 12px; cursor: pointer; }
.vote-opt input { position: absolute; opacity: 0; pointer-events: none; }
.vote-opt.sel { border-color: var(--brand); background: var(--success-bg); }
.vote-opt .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vote-opt .t small { color: var(--muted); font-size: 12px; }
.vote-opt .tick-c { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.vote-opt.sel .tick-c { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 4px var(--surface); }
.vote-opt:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.vote-av { position: relative; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(150deg, var(--brand-light), var(--brand-deep)); color: #fff; font-weight: 800; flex: none; box-shadow: 0 0 0 2px var(--gold); }
.vote-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.vote-av i { font-style: normal; }
.vr-row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-top: 8px; }
.vr-bar { height: 10px; border-radius: 99px; background: var(--field); overflow: hidden; margin-top: 4px; }
.vr-bar i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }

.meet-in { display: flex; align-items: center; gap: 12px; background: var(--success-bg); border-color: transparent; color: var(--success); }
.meet-in.sorry { background: var(--field); color: var(--muted); }
.meet-in svg { width: 26px; height: 26px; flex: none; }
.meet-in span { display: flex; flex-direction: column; } .meet-in small { opacity: .8; }
.meet-code { display: flex; gap: 10px; }
.meet-code .control { flex: 1; }
.meet-code input { letter-spacing: .4em; font-weight: 800; text-align: center; }
.meet-code .btn { flex: none; width: auto; padding-inline: 20px; }
.meet-text { line-height: 1.6; font-size: 14.5px; }
.meet-tasks { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.meet-tasks li small { display: block; color: var(--muted); font-size: 12px; }
.meet-tasks li.done b { text-decoration: line-through; opacity: .7; }
.scan-sheet { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.85); display: grid; place-items: center; padding: 16px; }
.scan-sheet[hidden] { display: none; }
.scan-box { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; align-items: center; color: #fff; text-align: center; }
.scan-view { position: relative; width: 100%; aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: #000; }
.scan-view video { width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; inset: 18%; border: 3px solid var(--gold); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); }

/* the quiz card and ghost buttons keep their look in every app style */
.panel.quiz-play, :root[data-skin] .app.real .panel.quiz-play { background: radial-gradient(120% 100% at 100% 0%, #18a06c, #075239 70%) !important; color: #fff !important; border: 0 !important; }
.quiz-play .quiz-q { color: #fff; }
.page-main .btn.ghost, :root[data-skin] .app.real .page-main .btn.ghost { background: var(--surface) !important; color: var(--brand) !important; border: 1.5px solid var(--line) !important; box-shadow: none !important; }

/* ---------- Wing page ---------- */
.wing-hero { background: linear-gradient(135deg, var(--tint, var(--brand)), #073d2a) !important; color: #fff !important; display: flex; flex-direction: column; gap: 8px; }
.wing-hero h2 { margin: 0; font-family: var(--font-display); font-size: 22px; }
.wing-hero p { margin: 0; opacity: .9; font-size: 13.5px; line-height: 1.45; }
.wing-hero small { opacity: .8; font-size: 12px; }
.wing-hero-ic { width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.18); display: grid; place-items: center; }
.wing-hero-ic svg { width: 26px; height: 26px; }
.wing-join { border: 0; border-radius: 99px; padding: 9px 16px; background: #fff; color: #073d2a; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.wing-ev { padding: 0; overflow: hidden; }
.wing-ev-img { display: block; width: 100%; aspect-ratio: 2.4 / 1; object-fit: cover; }
.wing-ev-body { display: flex; align-items: center; gap: 12px; padding: 12px; }
.wing-ev-body .body { flex: 1; min-width: 0; }
.wing-ev-body .date { width: 48px; flex: none; text-align: center; border-radius: 12px; background: var(--field); padding: 6px 0; display: flex; flex-direction: column; }
.wing-ev-body .date b { font-size: 18px; } .wing-ev-body .date span { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.wing-ev.past { opacity: .75; }

.login-checks { display: flex; flex-direction: column; gap: 6px; }