/* Energy House — design system (approved canvas 2026-09-16)
   Ink background, one lime accent, orange for warnings, red for money owed. Logical properties for RTL. */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Manrope:wght@500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@500;600;700&display=swap");

:root {
  --ink: #0B0D10; --surface: #15181D; --surface-2: #1D2128; --line: #1F242C; --line-2: #2A3038;
  --text: #F3F5F7; --text-2: #C5CBD3; --muted: #9AA3AF; --dim: #7C8592;
  --lime: #C8F542; --lime-2: #E2FF7A; --lime-bg: #1E2E14;
  --orange: #FF9F43; --orange-t: #FFB25C; --orange-bg: #2B1C0E; --orange-line: #5A3A18; --orange-text: #E0B27A;
  --red: #FF5C5C; --red-t: #FF7A7A; --red-bg: #3A1A1A;
  --blue: #6EC7FF; --blue-bg: #10303C; --indigo-bg: #1C2238; --indigo-t: #9DB4FF;
  --display: Sora, Manrope, "Segoe UI", system-ui, sans-serif;
  --body: Manrope, "Segoe UI", system-ui, sans-serif;
  --arabic: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --r-lg: 20px; --r: 14px; --r-sm: 10px; --pad: 20px;
}
* { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--body); line-height: 1.4; }
html[dir="rtl"] body { font-family: var(--arabic); }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .display { font-family: var(--arabic); font-weight: 700; }
h1, h2, h3, .display { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; }
h1 { font-size: 1.75rem; margin: 0 0 16px; line-height: 1.1; }
h2 { font-size: 1.15rem; margin: 0 0 12px; }
h3 { font-size: 1rem; margin: 16px 0 10px; letter-spacing: 0; }
a { color: var(--lime); text-decoration: none; }
a:hover { color: var(--lime-2); }
.muted { color: var(--dim); }
.small { font-size: .85rem; }
.neg { color: var(--red-t); }
.pos { color: var(--lime); }
.warn-text { color: var(--orange-t); }
.inline { display: inline; }
.num, .v, td.num, .kpi .v, .tile .v { font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: end; }
.label { font-size: .72rem; font-weight: 800; color: var(--dim); letter-spacing: .08em; text-transform: uppercase; }
html[dir="rtl"] .label { letter-spacing: 0; font-size: .8rem; }
code { font-family: ui-monospace, Menlo, monospace; font-size: .85em; color: var(--text-2); }
::selection { background: var(--lime); color: var(--ink); }

/* Header */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; height: 64px; padding: 0 var(--pad); background: rgba(11, 13, 16, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
.brand:hover { color: var(--text); }
.brand svg { width: 34px; height: 34px; flex-shrink: 0; }
.brand img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
.nav { display: flex; gap: 4px; margin-inline-start: 6px; }
.nav a { padding: 8px 14px; border-radius: 999px; color: var(--text-2); font-weight: 700; font-size: .9rem; white-space: nowrap; }
.nav a:hover { color: var(--text); background: var(--surface); }
.nav a.on { background: var(--lime); color: var(--ink); }
.tools { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }
.lang { padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text); font-weight: 700; font-size: .85rem; }
.lang:hover { border-color: var(--lime); color: var(--lime); }
.who { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; }
.who .avatar { width: 28px; height: 28px; border-radius: 999px; background: var(--surface-2); display: grid; place-items: center; color: var(--lime); font-size: .75rem; font-weight: 800; }
button.link { background: none; border: 0; color: var(--dim); cursor: pointer; font: inherit; font-weight: 600; padding: 0; }
button.link:hover { color: var(--text); }

.flash { margin: 12px var(--pad) 0; padding: 12px 16px; border-radius: var(--r); background: var(--lime-bg); color: var(--lime); font-weight: 700; border: 1px solid #2E4A1E; }
.flash.warn { background: var(--orange-bg); color: var(--orange-t); border-color: var(--orange-line); }
.main { padding: 24px var(--pad) 48px; max-width: 1400px; margin: 0 auto; }

/* Surfaces */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--pad); margin-bottom: 16px; }
.card.empty { text-align: center; padding: 56px 20px; color: var(--dim); }
.card.lime { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.card.lime .label, .card.lime .muted { color: var(--ink); opacity: .65; }
.card.warn { background: var(--orange-bg); border-color: var(--orange-line); }
.tile { background: var(--ink); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.tile .v { font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
html[dir="rtl"] .tile .v { font-family: var(--display); }
.tile.hl { background: var(--lime-bg); }
.tile.hl .v { color: var(--lime); }
.tile.bad { background: var(--red-bg); }
.tile.bad .v { color: var(--red-t); }
.tile.big .v { font-size: 2.4rem; letter-spacing: -0.02em; line-height: 1; }

/* Forms */
.stack { display: flex; flex-direction: column; gap: 12px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: .78rem; font-weight: 800; color: var(--dim); letter-spacing: .06em; text-transform: uppercase; }
html[dir="rtl"] label { letter-spacing: 0; font-size: .85rem; }
label > input, label > select, label > textarea { text-transform: none; letter-spacing: 0; }
input, select, textarea { font: inherit; font-weight: 600; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--ink); color: var(--text); width: 100%; min-height: 46px; }
input::placeholder, textarea::placeholder { color: var(--dim); font-weight: 500; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--lime); outline-offset: 0; border-color: var(--lime); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239AA3AF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-inline-end: 36px; }
html[dir="rtl"] select { background-position: left 12px center; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; min-height: 0; accent-color: var(--lime); }
table input { padding: 8px 10px; min-width: 80px; min-height: 0; }
table input[type="checkbox"] { width: auto; min-width: 0; }
textarea { line-height: 1.5; }
button, .btn { font: inherit; font-weight: 800; padding: 11px 18px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; text-decoration: none; transition: background .12s, border-color .12s; }
button:hover, .btn:hover { border-color: var(--dim); color: var(--text); }
button.primary, .btn.primary { background: var(--lime); color: var(--ink); border-color: var(--lime); font-family: var(--display); }
button.primary:hover, .btn.primary:hover { background: var(--lime-2); border-color: var(--lime-2); color: var(--ink); }
button.warn, .btn.warn { background: var(--orange); color: var(--ink); border-color: var(--orange); font-family: var(--display); }
button.danger, .btn.danger { background: var(--red-bg); color: var(--red-t); border-color: var(--red-bg); }
button.ghost, .btn.ghost { background: transparent; }
.big { min-height: 56px; padding: 14px 26px; font-size: 1.05rem; border-radius: var(--r); }
.small-btn { min-height: 34px; padding: 6px 12px; font-size: .82rem; }
button:disabled { opacity: .5; cursor: not-allowed; }
.actions-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.radios { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.radios legend { font-size: .78rem; font-weight: 800; color: var(--dim); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; padding: 0; }
.radios label { flex-direction: row; align-items: center; gap: 10px; color: var(--text); text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 600; }
.radios input { width: 20px; }
.error { color: var(--red-t); font-weight: 700; }
.warn-box { background: var(--orange-bg); color: var(--orange-t); border: 1px solid var(--orange-line); padding: 10px 14px; border-radius: var(--r-sm); margin: 0; font-weight: 700; }
.seg { display: flex; padding: 4px; gap: 4px; border-radius: var(--r-sm); background: var(--ink); border: 1px solid var(--line-2); }
.seg label { flex: 1; flex-direction: row; justify-content: center; align-items: center; padding: 9px 8px; border-radius: 7px; color: var(--muted); font-weight: 700; font-size: .9rem; text-transform: none; letter-spacing: 0; cursor: pointer; }
.seg label:has(input:checked) { background: var(--surface-2); color: var(--text); }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; min-height: 0; }
.amount { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px; border-radius: var(--r); background: var(--ink); border: 2px solid var(--lime); }
.amount input { border: 0; background: none; padding: 0; min-height: 0; font-family: var(--display); font-weight: 800; font-size: 1.5rem; }
.amount input:focus { outline: none; }
.amount .unit { color: var(--dim); font-weight: 700; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: .78rem; font-weight: 800; white-space: nowrap; background: var(--surface-2); color: var(--muted); }
.badge.big { font-size: 1rem; padding: 10px 18px; font-family: var(--display); }
html[dir="rtl"] .badge.big { font-family: var(--arabic); }
.badge.active { background: var(--lime-bg); color: var(--lime); }
.badge.expiring { background: #3A2A12; color: var(--orange-t); }
.badge.expired, .badge.none { background: var(--red-bg); color: var(--red-t); }
.badge.frozen { background: var(--blue-bg); color: var(--blue); }
.badge.due { background: var(--red-bg); color: var(--red-t); }
.badge.inactive { background: var(--indigo-bg); color: var(--indigo-t); }
.badge.ok { background: var(--lime-bg); color: var(--lime); }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .78rem; font-weight: 800; vertical-align: middle; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--ink); border: 1px solid var(--line-2); font-size: .82rem; font-weight: 700; }
.chip b { color: var(--lime); }
.avatar-sq { display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); color: var(--text-2); font-family: var(--display); font-weight: 800; overflow: hidden; flex-shrink: 0; }
.avatar-sq img { width: 100%; height: 100%; object-fit: cover; }

/* Login */
.login { max-width: 400px; margin: 6vh auto; text-align: center; padding: 32px 28px; }
.login .logo-big { width: 72px; height: 72px; margin: 0 auto 14px; }
.login h1 { font-size: 1.7rem; margin-bottom: 4px; }
.login .pin-dots { direction: ltr; display: flex; justify-content: center; gap: 18px; margin: 18px 0 22px; }
.login .pin-dots span { width: 16px; height: 16px; border-radius: 999px; border: 2px solid var(--line-2); }
.login .pin-dots span.on { background: var(--lime); border-color: var(--lime); }
.login .keypad { direction: ltr; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.login .keypad button { min-height: 64px; font-family: var(--display); font-size: 1.5rem; font-weight: 700; background: var(--surface-2); border-color: var(--surface-2); }
.login .keypad button.soft { background: transparent; border-color: transparent; color: var(--dim); font-size: .95rem; font-family: var(--body); }
.login input.pin { direction: ltr; text-align: center; font-family: var(--display); font-size: 1.6rem; letter-spacing: .45em; }
.login form { text-align: start; }

/* Reception */
.reception-grid { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 20px; align-items: start; }
.search { display: flex; gap: 10px; }
.search-box { display: flex; align-items: center; gap: 10px; flex: 1; height: 56px; padding: 0 16px; border-radius: var(--r); background: var(--surface); border: 2px solid var(--lime); }
.search-box svg { flex-shrink: 0; color: var(--lime); }
.search-box input { border: 0; background: none; padding: 0; min-height: 0; font-size: 1.1rem; font-weight: 700; }
.search-box input:focus { outline: none; }
.search-box kbd { font-family: inherit; font-size: .75rem; color: var(--dim); padding: 3px 7px; border-radius: 6px; border: 1px solid var(--line-2); }
.search .btn { white-space: nowrap; min-height: 56px; }
.results-head { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 8px; }
.results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.results li a { display: grid; grid-template-columns: 40px 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--text); }
.results li a:hover, .results li a:focus { border-color: var(--lime); outline: none; background: var(--surface-2); }
.results li a.on { border-color: var(--lime); background: var(--surface-2); }
.results .avatar-sq { grid-row: 1 / span 2; width: 40px; height: 40px; font-size: .85rem; }
.results .rname { font-weight: 800; font-size: .95rem; }
.results .rphone { color: var(--muted); font-size: .82rem; grid-column: 2; }
.results .badge { grid-column: 3; grid-row: 1; justify-self: end; }
.results .badge.due { grid-row: 2; }
.results li.muted { padding: 12px 4px; }
.member-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.member-head .avatar-sq { width: 64px; height: 64px; font-size: 1.4rem; border-radius: 18px; }
.member-head .mname { font-size: 1.85rem; margin: 0 0 4px; line-height: 1.1; }
.member-head .status { margin-inline-start: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
html[dir="rtl"] .member-head .status { align-items: flex-start; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 18px; }
@media (min-width: 1100px) { .facts { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.facts .tile dt { font-size: .72rem; font-weight: 800; color: var(--dim); letter-spacing: .08em; text-transform: uppercase; }
html[dir="rtl"] .facts .tile dt { letter-spacing: 0; font-size: .8rem; }
.facts .tile dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
html[dir="rtl"] .facts .tile dd { font-family: var(--arabic); }
.facts .tile dd.neg { color: var(--red-t); }
.facts .tile dd.pos { color: var(--lime); }
.primary-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; align-items: stretch; }
.checkin-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; flex: 1; }
.checkin-form input { flex: 1; min-width: 220px; }
.secondary-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; align-self: center; }
.panel { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 10px; background: var(--surface); }
.panel summary { padding: 14px 18px; cursor: pointer; font-family: var(--display); font-weight: 800; font-size: 1rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
html[dir="rtl"] .panel summary { font-family: var(--arabic); }
.panel summary::-webkit-details-marker { display: none; }
.panel summary::after { content: "+"; color: var(--dim); font-size: 1.2rem; font-weight: 600; }
.panel[open] summary::after { content: "−"; }
.panel[open] summary { border-bottom: 1px solid var(--line); }
.panel form, .panel .panel-body { padding: 16px 18px 18px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.plan-grid label { position: relative; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--r); background: var(--ink); border: 1px solid var(--line-2); color: var(--text-2); cursor: pointer; text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 700; }
.plan-grid label .price { font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: var(--text); }
.plan-grid label:has(input:checked) { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.plan-grid label:has(input:checked) .price { color: var(--ink); }
.plan-grid input { position: absolute; opacity: 0; width: 0; height: 0; min-height: 0; }
.renew-summary { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.renew-summary .remaining { font-family: var(--display); font-weight: 800; font-size: 1.4rem; }

/* Tables */
.tbl { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: .92rem; }
th, td { padding: 10px 10px; text-align: start; vertical-align: middle; }
th { font-size: .72rem; color: var(--dim); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding-top: 0; padding-bottom: 4px; }
html[dir="rtl"] th { letter-spacing: 0; font-size: .8rem; }
tbody tr { background: var(--ink); }
tbody td:first-child { border-start-start-radius: 10px; border-end-start-radius: 10px; }
tbody td:last-child { border-start-end-radius: 10px; border-end-end-radius: 10px; }
tr.bad td { background: var(--orange-bg); }
tr.muted td { color: var(--dim); }
table.compact th, table.compact td { padding: 7px 8px; }
td a { font-weight: 700; color: var(--text); }
td a:hover { color: var(--lime); }
td.diff-cell .badge { min-width: 56px; justify-content: center; }

/* Cash drawer */
.drawer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.drawer .tile { padding: 20px 22px; gap: 8px; border: 1px solid var(--line); background: var(--surface); }
.drawer .tile .v { font-size: 2.4rem; letter-spacing: -0.02em; line-height: 1; }
.drawer .tile.input { border: 2px solid var(--lime); }
.drawer .tile.input .label { color: var(--lime); }
.drawer .tile.input input { border: 0; background: none; padding: 0; min-height: 0; font-family: var(--display); font-weight: 800; font-size: 2.4rem; letter-spacing: -0.02em; line-height: 1; width: 100%; }
.drawer .tile.input input:focus { outline: none; }
.drawer .tile.diff { background: var(--surface); }
.drawer .tile.diff.neg { background: var(--orange-bg); border-color: var(--orange-line); }
.drawer .tile.diff.neg .label, .drawer .tile.diff.neg .v, .drawer .tile.diff.neg .sub { color: var(--orange-t); }
.drawer .tile.diff.pos { background: var(--lime-bg); }
.drawer .tile.diff.pos .v { color: var(--lime); }
.drawer .tile .sub { font-size: .82rem; color: var(--muted); font-weight: 600; }
.close-row { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.close-row input { flex: 1; min-height: 52px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 20px; align-items: start; }
.section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.section-head h2, .section-head h3 { margin: 0; }
.section-head .chips { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.plain { list-style: none; padding: 0; margin: 0; }

/* Worklist */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head h1 { margin: 0; }
.tabs { display: flex; gap: 6px; }
.tabs a { padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text-2); font-weight: 700; font-size: .9rem; }
.tabs a.on { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.tasks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.tasks .task { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 16px; margin: 0; }
.task-main { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.tname { font-weight: 800; color: var(--text); font-size: .98rem; }
.tphone { color: var(--muted); font-weight: 600; }
.task-ctl { display: flex; gap: 8px; }
.task-ctl select { width: auto; min-height: 40px; padding: 8px 32px 8px 10px; }
html[dir="rtl"] .task-ctl select { padding: 8px 10px 8px 32px; }
.task-ctl button { min-height: 40px; padding: 8px 14px; }

/* Owner (phone-first) */
.hero { border-radius: 22px; background: var(--lime); color: var(--ink); padding: 20px 22px 18px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 12px; }
.hero .top-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hero .label { color: var(--ink); opacity: .65; }
.hero .total { display: flex; align-items: baseline; gap: 8px; font-family: var(--display); font-weight: 800; }
.hero .total .v { font-size: 2.75rem; letter-spacing: -0.03em; line-height: 1; }
.hero .total .unit { font-size: 1.1rem; }
.hero .split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hero .split span { display: flex; flex-direction: column; gap: 2px; font-weight: 800; font-size: 1rem; }
.hero .split span small { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; opacity: .65; font-weight: 800; }
html[dir="rtl"] .hero .split span small { letter-spacing: 0; font-size: .78rem; }
.hero .pill { padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--lime); font-size: .72rem; font-weight: 800; }
.kpi-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.kpi .k { font-size: .72rem; font-weight: 800; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
html[dir="rtl"] .kpi .k { letter-spacing: 0; font-size: .8rem; }
.kpi .v { font-family: var(--display); font-weight: 800; font-size: 1.6rem; line-height: 1.1; }
.kpi.warn { background: var(--orange-bg); border-color: var(--orange-line); }
.kpi.warn .k, .kpi.warn .v { color: var(--orange-t); }
.card > details > summary { cursor: pointer; padding: 4px 0; font-weight: 800; list-style: none; display: flex; align-items: center; gap: 8px; }
.card > details > summary::-webkit-details-marker { display: none; }
.card > details > summary::before { content: ""; width: 8px; height: 8px; border-inline-end: 2px solid var(--dim); border-bottom: 2px solid var(--dim); transform: rotate(-45deg); transition: transform .15s; flex-shrink: 0; }
html[dir="rtl"] .card > details > summary::before { transform: rotate(135deg); }
.card > details[open] > summary::before { transform: rotate(45deg); }
.card > details > summary h2 { display: inline; margin: 0; }
.list { list-style: none; margin: 8px 0 0; padding: 0; }
.list li { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 10px 0; border-top: 1px solid var(--line); align-items: center; }
.list li a { font-weight: 800; color: var(--text); }
.list li a:hover { color: var(--lime); }
.list li .small { grid-column: 1; }
.list li > strong, .list li > span:last-child { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-variant-numeric: tabular-nums; }
.list.audit li { grid-template-columns: 36px 1fr; column-gap: 12px; }
.list.audit .icon { grid-row: 1 / span 3; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); align-self: start; }
.list.audit .icon.expired, .list.audit .icon.due { background: var(--red-bg); color: var(--red-t); }
.list.audit .icon.warn { background: var(--orange-bg); color: var(--orange-t); }
.list.audit .icon.frozen { background: var(--blue-bg); color: var(--blue); }
.list.audit .icon.inactive { background: var(--indigo-bg); color: var(--indigo-t); }
.list.audit .what { font-weight: 800; grid-column: 2; }
.list.audit .why { grid-column: 2; color: var(--text-2); }
.list.audit .who-when { grid-column: 2; }
.list.audit .badge { grid-column: 2; justify-self: start; margin-bottom: 2px; }
.more { display: inline-block; padding: 10px 0 2px; font-weight: 800; color: var(--lime); }

/* Settings */
.settings-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.view-settings section.card { scroll-margin-top: 80px; }
.settings-nav a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); font-weight: 700; font-size: .9rem; }
.settings-nav a.on { background: var(--lime); border-color: var(--lime); color: var(--ink); }

/* Receipt link tweak on shift */
.receipt-no { color: var(--lime); font-weight: 700; }

/* Member app shell */
.app-shell { padding-bottom: 84px; }
.app-main { padding: 12px 16px 24px; max-width: 560px; margin: 0 auto; }
.app-head { display: flex; align-items: center; gap: 12px; padding: 10px 0 14px; }
.app-head h1 { margin: 0; font-size: 1.6rem; line-height: 1.05; }
.app-head .lang { margin-inline-start: auto; }
.app-login { margin-top: 4vh; }
.member-hero { display: flex; flex-direction: column; gap: 12px; }
.member-hero .top-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.member-hero .countdown { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.member-hero .countdown .v { font-family: var(--display); font-weight: 800; font-size: 2.6rem; letter-spacing: -0.03em; line-height: 1; }
.member-hero .countdown .unit { font-family: var(--display); font-weight: 700; color: var(--text-2); }
.member-hero .countdown .until { margin-inline-start: auto; }
.member-hero .bar { height: 8px; border-radius: 999px; background: var(--ink); overflow: hidden; }
.member-hero .bar span { display: block; height: 100%; border-radius: 999px; background: var(--lime); }
.member-hero .bar.expiring span { background: var(--orange); }
.member-hero .bar.expired span { background: var(--red); }
.member-hero .bar.frozen span { background: var(--blue); }
.due-box { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--red-bg); color: #FFB3B3; font-weight: 700; }
.due-box b { margin-inline-start: auto; color: var(--red-t); font-family: var(--display); }
.kpi-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi .v.small-v { font-size: 1.05rem; line-height: 1.5; }
.program-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.program-card .title { font-size: 1.35rem; line-height: 1.15; color: inherit; }
.program-card .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card.lime .row .muted { color: var(--ink); opacity: .75; }
.btn.dark { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.empty-program p { margin: 0; }
.notif-row { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); padding: 14px 16px; }
.notif-row .icon { width: 36px; height: 36px; border-radius: 12px; background: var(--lime-bg); color: var(--lime); display: grid; place-items: center; flex-shrink: 0; }
.notif-row .txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.notif-row .txt b { font-size: .95rem; }
.dot { width: 8px; height: 8px; border-radius: 999px; background: var(--lime); flex-shrink: 0; display: inline-block; }
.gym-contact { display: flex; flex-direction: column; gap: 4px; }
.gym-contact form { margin-top: 6px; }
.tabbar { position: fixed; inset-inline: 0; bottom: 0; height: 72px; padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); background: rgba(11, 13, 16, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); z-index: 20; }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--dim); font-size: .7rem; font-weight: 800; position: relative; border-radius: 12px; }
.tabbar a.on { color: var(--lime); }
.tabbar a .dot { position: absolute; top: 6px; right: calc(50% - 16px); }
html[dir="rtl"] .tabbar a .dot { right: auto; left: calc(50% - 16px); }
.day-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.day-tabs a { flex: 1; height: 44px; border-radius: 12px; background: var(--surface); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--muted); }
.day-tabs a.on { background: var(--lime); color: var(--ink); }
.day-title { font-size: 1.1rem; margin: 0 0 12px; }
.exercises { display: flex; flex-direction: column; gap: 10px; }
.exercise { display: flex; gap: 14px; align-items: center; padding: 12px; margin: 0; }
.exercise .thumb { width: 84px; height: 84px; border-radius: 14px; background: #F3F5F7; display: grid; place-items: center; flex-shrink: 0; overflow: hidden; }
.exercise .thumb img { width: 100%; height: 100%; object-fit: cover; }
.exercise .txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.exercise .txt b { font-family: var(--display); font-size: 1rem; }
.code-big { font-size: 2.4rem; letter-spacing: .12em; color: var(--lime); }

/* Photo capture */
.photo-btn { position: relative; border: 0; padding: 0; cursor: pointer; min-height: 0; font: inherit; }
.photo-btn .cam-badge { position: absolute; inset-inline-end: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 999px; background: var(--lime); color: var(--ink); display: grid; place-items: center; border: 2px solid var(--surface); }
.cam-dialog { border: 0; padding: 0; background: transparent; max-width: min(92vw, 520px); width: 100%; }
.cam-dialog::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(4px); }
.cam-body { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 12px; color: var(--text); }
.cam-view { aspect-ratio: 4 / 3; border-radius: var(--r); background: var(--ink); overflow: hidden; display: grid; place-items: center; }
.cam-view video, .cam-view img { width: 100%; height: 100%; object-fit: cover; }

/* Session mode, history, QR, scanner, member card */
.session-ex { display: flex; flex-direction: column; gap: 10px; padding: 14px; margin: 0; }
.session-ex .head { display: flex; gap: 12px; align-items: center; }
.session-ex .head .thumb { width: 64px; height: 64px; border-radius: 12px; background: #F3F5F7; overflow: hidden; flex-shrink: 0; display: grid; place-items: center; }
.session-ex .head .thumb img { width: 100%; height: 100%; object-fit: cover; }
.session-ex .head b { font-family: var(--display); }
.session-ex .last { color: var(--dim); font-size: .8rem; }
.set-row { display: grid; grid-template-columns: 56px 1fr 1fr 48px; gap: 8px; align-items: center; }
.set-row .no { font-weight: 800; color: var(--muted); font-size: .85rem; }
.set-row input { text-align: center; padding: 8px 6px; min-height: 44px; font-family: var(--display); font-weight: 700; }
.set-row .done { width: 44px; height: 44px; border-radius: 999px; border: 2px solid var(--line-2); background: transparent; color: transparent; display: grid; place-items: center; padding: 0; min-height: 0; }
.set-row .done.on { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.set-head { display: grid; grid-template-columns: 56px 1fr 1fr 48px; gap: 8px; font-size: .7rem; font-weight: 800; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.rest-timer { position: fixed; inset-inline: 0; bottom: 72px; margin: 0 auto; width: min(92vw, 400px); border-radius: var(--r); background: var(--orange); color: var(--ink); padding: 12px 16px; display: flex; align-items: center; gap: 12px; font-weight: 800; z-index: 25; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
.rest-timer .v { font-family: var(--display); font-size: 1.6rem; }
.rest-timer button { margin-inline-start: auto; background: var(--ink); color: var(--orange); border-color: var(--ink); min-height: 40px; }
.session-bar { position: sticky; bottom: 84px; display: flex; gap: 10px; }
.session-bar .btn, .session-bar button { flex: 1; }
.hist-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px; margin: 0 0 8px; }
.hist-row b { font-family: var(--display); }
.hist-row .num { font-variant-numeric: tabular-nums; }
.chart { width: 100%; height: auto; display: block; }
.chart text { font-family: var(--body); font-size: 11px; fill: var(--dim); }
.chart .line { fill: none; stroke: var(--lime); stroke-width: 2.5; stroke-linejoin: round; }
.chart .dot { fill: var(--lime); }
.chart .grid { stroke: var(--line-2); stroke-width: 1; }
.qr-wrap { display: grid; place-items: center; gap: 12px; text-align: center; }
.qr-box { background: #fff; padding: 14px; border-radius: 18px; width: min(70vw, 280px); }
.qr-box svg { width: 100%; height: auto; display: block; }
.qr-name { font-family: var(--display); font-weight: 800; font-size: 1.2rem; }
.scan-dialog .cam-view { position: relative; }
.scan-dialog .cam-view::after { content: ""; position: absolute; inset: 14%; border: 3px solid var(--lime); border-radius: 18px; opacity: .8; pointer-events: none; }
.scan-result { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 16px; border-radius: var(--r); }
.scan-result.ok { background: var(--lime-bg); }
.scan-result.bad { background: var(--red-bg); }
.scan-result .avatar-sq { width: 84px; height: 84px; font-size: 1.6rem; border-radius: 22px; }
.scan-result .who { font-family: var(--display); font-weight: 800; font-size: 1.3rem; }
.scan-result.ok .verdict { color: var(--lime); font-weight: 800; font-size: 1.1rem; }
.scan-result.bad .verdict { color: var(--red-t); font-weight: 800; font-size: 1.1rem; }
.scan-result form { width: 100%; display: flex; gap: 8px; }
.scan-result form input { flex: 1; }
.head-actions { display: flex; gap: 8px; align-items: center; }

/* Utilities */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.gap { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.divider { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }

@media (max-width: 960px) {
  .reception-grid, .two-col, .grid-2 { grid-template-columns: minmax(0, 1fr); } /* 1fr = min-content floor: a wide child would stretch the page */
  .reception-grid > *, .two-col > *, .grid-2 > * { min-width: 0; }
  .drawer { grid-template-columns: minmax(0, 1fr); }
  .drawer .tile .v, .drawer .tile.input input { font-size: 2rem; }
  .tasks .task { grid-template-columns: minmax(0, 1fr); }
  .task-ctl { flex-wrap: wrap; }
  .task-ctl select { flex: 1; }
  .brand-name { display: none; }
}
@media (max-width: 600px) {
  html { font-size: 15px; }
  :root { --pad: 14px; }
  .top { height: auto; min-height: 56px; padding: 8px var(--pad); gap: 8px; flex-wrap: wrap; }
  .nav { order: 3; width: 100%; overflow-x: auto; margin: 0; padding-bottom: 2px; }
  .nav a { padding: 7px 12px; font-size: .85rem; }
  .who span:not(.avatar) { display: none; }
  .search-box kbd { display: none; }
  .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 12px 10px; }
  .kpi .v { font-size: 1.35rem; }
  .row2, .row3 { grid-template-columns: 1fr; }
  .member-head { flex-wrap: wrap; }
  .member-head .status { margin-inline-start: 0; align-items: flex-start; width: 100%; }
  .member-head .mname { font-size: 1.4rem; }
  .facts { grid-template-columns: 1fr 1fr; gap: 8px; }
  .primary-actions .big { flex: 1; }
  .secondary-actions { margin-inline-start: 0; width: 100%; }
  .main { padding: 16px var(--pad) 40px; }
  .card { padding: 16px; border-radius: 18px; }
  .hero .total .v { font-size: 2.4rem; }
  h1 { font-size: 1.4rem; }
}
@media print {
  body { background: #fff; color: #000; }
  .top, .flash, .primary-actions, .panel, .search-col, .nav { display: none !important; }
}

/* === programs (coach builder) === */
.pb-headline { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pb-headline h1 { margin: 0; }
.pb-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
a.badge.frozen:hover { color: var(--text); }
.pb-banner { margin: 0 0 16px; }
.pb-narrow { max-width: 760px; }
.pb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.pb-card { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.pb-card.archived { opacity: .65; }
.pb-title { margin: 0; font-size: 1.2rem; line-height: 1.2; }
.pb-title a { color: var(--text); }
.pb-title a:hover { color: var(--lime); }
.pb-desc { margin: 0; min-height: 1.2em; }
.pb-stats { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: .85rem; font-weight: 600; }
.pb-stats b { color: var(--text); font-family: var(--display); font-size: 1.05rem; }
.pb-stats .pos b { color: var(--lime); }
.pb-actions { margin-top: auto; }
.pb-facts { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-bottom: 12px; }
.pb-header-details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pb-header-details > summary::-webkit-details-marker { display: none; }
.pb-header-details > summary h2 { margin: 0; }
.pb-header-details > summary::after { content: "+"; color: var(--dim); font-size: 1.2rem; font-weight: 600; margin-inline-start: auto; }
.pb-header-details[open] > summary::after { content: "−"; }
.pb-header-form { margin-top: 14px; }
.pb-days { display: flex; flex-direction: column; gap: 12px; }
.pb-day { background: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.pb-day-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.pb-day-head .chip { align-self: center; background: var(--surface-2); border-color: var(--surface-2); }
.pb-day-head .chip b { color: var(--lime); }
.pb-day-titles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pb-day-titles input, .pb-ex-fields input, .pb-ex-notes input { min-height: 40px; padding: 8px 10px; background: var(--surface); }
.pb-day-ctl, .pb-ex-ctl { display: flex; gap: 6px; align-items: center; }
.pb-icon { min-height: 36px; width: 36px; padding: 0; border-radius: 10px; font-size: 1.05rem; font-weight: 800; color: var(--text-2); }
.pb-icon.danger { color: var(--red-t); }
.pb-icon:disabled { opacity: .3; }
.pb-ex-list { display: flex; flex-direction: column; gap: 8px; }
.pb-ex { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); }
.pb-ex.flash-in { animation: pb-in .5s ease-out; }
@keyframes pb-in { from { border-color: var(--lime); background: var(--lime-bg); } }
.pb-thumb { width: 56px; height: 56px; border-radius: 12px; background: #F3F5F7; display: grid; place-items: center; overflow: hidden; flex-shrink: 0; color: var(--ink); text-align: center; font-size: .7rem; }
.pb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pb-thumb.big { width: 96px; height: 96px; border-radius: 14px; }
.pb-ex-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pb-ex-name { display: flex; flex-direction: column; gap: 2px; }
.pb-ex-name b { font-family: var(--display); font-size: 1rem; }
html[dir="rtl"] .pb-ex-name b { font-family: var(--arabic); }
.pb-ex-fields { display: grid; grid-template-columns: repeat(3, minmax(80px, 120px)); gap: 8px; }
.pb-ex-fields label, .pb-ex-notes label, .pb-day-titles label { font-size: .68rem; gap: 4px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-ex-fields input[type="number"] { font-family: var(--display); font-weight: 700; text-align: center; }
.pb-ex-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pb-ex-ctl { flex-direction: column; }
.pb-static { display: flex; flex-direction: column; gap: 8px; }
.pb-static li { display: flex; gap: 12px; align-items: center; }
.pb-empty { padding: 8px 4px; }
.pb-savebar { position: sticky; bottom: 0; margin: 14px -20px -20px; padding: 12px 20px; display: flex; align-items: center; gap: 12px; justify-content: flex-end; background: rgba(21, 24, 29, .96); backdrop-filter: blur(8px); border-top: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.pb-savebar.dirty { border-top-color: var(--lime); }
.pb-savebar.dirty #pb-status { color: var(--orange-t); font-weight: 700; }
.pb-toast { position: fixed; bottom: 24px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 40; padding: 12px 20px; border-radius: 999px; background: var(--lime); color: var(--ink); font-weight: 800; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
html[dir="rtl"] .pb-toast { transform: translateX(50%); }
.pb-toast.bad { background: var(--red); color: #fff; }
.pb-dialog { border: 0; padding: 0; background: transparent; width: min(94vw, 640px); max-height: 90vh; }
.pb-dialog::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(4px); }
.pb-dialog-body { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 12px; color: var(--text); max-height: 88vh; }
.pb-picker-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 200px); gap: 8px; }
.pb-picker-list { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
.pb-picker-list li button { width: 100%; justify-content: flex-start; text-align: start; gap: 12px; padding: 8px 10px; background: var(--ink); border-color: var(--line); }
.pb-picker-list li button:hover, .pb-picker-list li button:focus { border-color: var(--lime); }
.pb-pick-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pb-pick-txt b { font-family: var(--display); }
.pb-pick-txt .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-member-search { margin-bottom: 16px; }
.pb-member-search .search-box { height: 50px; }
.pb-member-search button { min-height: 50px; }
.pb-members label { align-items: flex-start; }
.pb-lib-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 220px) auto; gap: 10px; margin-bottom: 8px; }
.pb-lib-filters .search-box { height: 50px; }
.pb-lib { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.pb-lib-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; margin: 0; padding: 14px; }
.pb-lib-main { gap: 8px; }
.pb-lib-en { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pb-lib-en b { font-family: var(--display); font-size: 1rem; }
.pb-weeks { display: flex; flex-direction: column; gap: 8px; }
.pb-weeks li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.pb-weeks .bar { grid-column: 1 / span 2; height: 6px; border-radius: 999px; background: var(--ink); overflow: hidden; }
.pb-weeks .bar i { display: block; height: 100%; background: var(--lime); border-radius: 999px; }
.pb-member > div { min-width: 0; }
@media (max-width: 960px) {
  .pb-ex-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .pb-savebar { margin: 14px -16px -16px; padding: 10px 16px; border-radius: 0 0 18px 18px; }
  .pb-day-head { grid-template-columns: auto minmax(0, 1fr); }
  .pb-day-head .pb-day-ctl { grid-column: 1 / span 2; justify-content: flex-end; }
  .pb-day-titles { grid-template-columns: 1fr; }
  .pb-ex { grid-template-columns: 48px minmax(0, 1fr); }
  .pb-thumb { width: 48px; height: 48px; }
  .pb-ex-ctl { grid-column: 1 / span 2; flex-direction: row; justify-content: flex-end; }
  .pb-ex-notes { grid-template-columns: 1fr; }
  .pb-picker-filters, .pb-lib-filters { grid-template-columns: 1fr; }
  .pb-lib-row { grid-template-columns: 1fr; }
  .pb-thumb.big { width: 72px; height: 72px; }
  .pb-dialog { width: 100vw; max-width: 100vw; max-height: 100vh; margin: 0; }
  .pb-dialog-body { border-radius: 18px 18px 0 0; max-height: 96vh; }
}

/* === classes === */
.cls-daynav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.cls-daynav input[type="date"] { width: auto; min-height: 40px; padding: 6px 12px; }
.cls-daynav .cls-range { margin-inline-start: 6px; }
.cls-inline { flex-direction: row; align-items: center; gap: 8px; }
.cls-inline input { width: auto; min-height: 40px; padding: 6px 12px; }
.cls-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.cls-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 120px auto; gap: 14px; align-items: center; padding: 12px 16px; margin: 0; color: var(--text); }
.cls-row:hover { border-color: var(--lime); color: var(--text); }
.cls-row.cancelled, .cls-row.done { opacity: .6; }
.cls-time { display: flex; flex-direction: column; line-height: 1.1; }
.cls-time b { font-family: var(--display); font-size: 1.1rem; }
.cls-time small { color: var(--dim); font-size: .75rem; }
.cls-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cls-name { font-family: var(--display); font-size: 1rem; }
html[dir="rtl"] .cls-name, html[dir="rtl"] .cls-time b { font-family: var(--arabic); }
.cls-fill { display: flex; flex-direction: column; gap: 5px; font-weight: 700; font-size: .9rem; }
.cls-fill .bar { display: block; height: 6px; border-radius: 999px; background: var(--ink); overflow: hidden; }
.cls-fill .bar i { display: block; height: 100%; background: var(--lime); border-radius: 999px; }
.cls-row.full .cls-fill .bar i, .cls-app-card.full .cls-fill .bar i { background: var(--orange); }
.cls-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
.cls-daycol { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; min-height: 120px; }
.cls-daycol.is-today { border-color: var(--lime); }
.cls-daycol h3 { margin: 0 0 8px; font-size: .85rem; }
.cls-daycol h3 a { color: var(--text-2); }
.cls-daycol.is-today h3 a { color: var(--lime); }
.cls-daycol .cls-row { grid-template-columns: 1fr; gap: 4px; padding: 8px 10px; margin-bottom: 6px; background: var(--ink); border-radius: var(--r-sm); }
.cls-daycol .cls-time { flex-direction: row; gap: 4px; align-items: baseline; }
.cls-daycol .cls-fill { flex-direction: row; align-items: center; }
.cls-daycol .cls-fill .bar { flex: 1; }
.cls-daycol .badge { justify-self: start; }
.cls-session-head .facts { margin-bottom: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cls-session-head .facts .tile .v { font-size: 1rem; }
.cls-search { margin-bottom: 8px; height: 50px; }
.cls-att td:first-child { width: 44px; }
.cls-att tr.st-attended td:first-child { background: var(--lime-bg); }
.cls-att tr.st-no_show td:first-child { background: var(--red-bg); }
.cls-stats-table .cls-fill { min-width: 90px; }
.cls-types input[type="number"] { min-width: 70px; width: 80px; }
.cls-types select { min-width: 130px; padding: 8px 32px 8px 10px; min-height: 0; }
html[dir="rtl"] .cls-types select { padding: 8px 10px 8px 32px; }
.cls-check { justify-content: flex-end; }
.cls-check-box { display: flex; align-items: center; min-height: 46px; }
.cls-slots { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.cls-slots > b { min-width: 120px; }
.cls-slot { gap: 8px; margin: 0; }
.cls-slot button { color: var(--dim); }
.cls-slot button:hover { color: var(--red-t); }
.cls-add-slot { margin-top: 12px; }
/* member app */
.cls-app-warn { color: var(--orange-t); font-weight: 700; }
.cls-app-next { display: flex; flex-direction: column; gap: 10px; }
.cls-app-next .title { font-size: 1.3rem; line-height: 1.15; color: inherit; }
.cls-app-next .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cls-app-day { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cls-app-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.cls-app-card { padding: 14px 16px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cls-app-card.mine { border-color: var(--lime); }
.cls-app-card.full { opacity: .75; }
.cls-app-top { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.cls-app-desc { margin: 0; }
.cls-app-actions { display: flex; gap: 8px; align-items: center; }
.cls-app-actions:empty { display: none; }
.cls-app-actions form { flex: 1; display: flex; }
.cls-app-actions button { flex: 1; }
.cls-app-hist { grid-template-columns: 1fr auto; align-items: center; }
.cls-app-hist .badge { grid-row: 1 / span 2; }
@media (max-width: 960px) {
  .cls-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cls-session-head .facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .cls-row { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .cls-row .cls-fill { grid-column: 2; grid-row: 2; width: 120px; }
  .cls-row .badge { grid-column: 3; grid-row: 1 / span 2; }
  .cls-week { grid-template-columns: 1fr; }
}

/* === member log / QR (core) === */
[hidden] { display: none !important; }
.app-head > div { min-width: 0; }
.app-head > div > .small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { width: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; flex-shrink: 0; }
.set-row.on input { border-color: var(--lime); }
.set-row.saving { opacity: .7; }
.set-row.error input { border-color: var(--red); }
.session-ex .head .txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qr-cta { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; }
.qr-cta .icon { width: 44px; height: 44px; border-radius: 12px; background: var(--lime); color: var(--ink); display: grid; place-items: center; flex-shrink: 0; }
.qr-cta .txt { display: flex; flex-direction: column; gap: 2px; }
.qr-cta .txt b { font-family: var(--display); }
.qr-wrap .qr-box img { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.scan-result .small { color: var(--red-t); }
.scan-result .btn { margin-top: 4px; }
.scan-dialog .cam-body { min-width: min(92vw, 440px); }
table.mini td, table.mini th { padding: 6px 8px; font-size: .88rem; }
/* Offline counter */
.offline-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; margin: 0 0 10px; border-radius: var(--r-sm); background: var(--orange-bg); border: 1px solid var(--orange-line); }
.pill.offline { background: var(--orange); color: var(--ink); font-weight: 800; padding: 3px 10px; border-radius: 999px; font-size: .78rem; }
.results li .inline-checkin { margin-inline-start: auto; }
.results li.queued a { opacity: .7; }
.toast { position: fixed; inset-inline: 0; bottom: 20px; margin: 0 auto; width: max-content; max-width: 90vw; background: var(--surface-2); color: var(--text); border: 1px solid var(--line-2); border-radius: 999px; padding: 10px 18px; font-weight: 700; z-index: 40; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
/* Editions */
.upgrade { max-width: 560px; margin: 40px auto; text-align: center; }
.upgrade h1 { margin: 8px 0 12px; }
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.module-col { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.module-col.on { border-color: var(--lime); }
.module-col b { font-family: var(--display); display: block; margin-bottom: 8px; }
.module-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: .88rem; color: var(--dim); }
.module-col li.have { color: var(--text); }
.module-col li.have::before { content: "✓ "; color: var(--lime); font-weight: 800; }
.tabbar.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .module-grid { grid-template-columns: 1fr; } }
/* Hosting banner (billing) */
.billing-banner { background: var(--orange-bg); color: var(--orange-text, var(--orange-t)); border-bottom: 1px solid var(--orange-line); padding: 10px var(--pad); font-weight: 700; text-align: center; }
.billing-banner.past { background: var(--red-bg); color: var(--red-t); border-color: var(--red); }
/* Staff clock in/out + schedule */
.clock-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); font-size: .82rem; }
.clock-btn.on { background: var(--lime-bg); border-color: var(--lime); color: var(--lime); }
.clock-btn small { opacity: .8; }
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.week-grid .day { display: flex; flex-direction: column; gap: 3px; padding: 8px 6px; border-radius: 12px; background: var(--surface-2); text-align: center; font-size: .8rem; }
.week-grid .day small { text-transform: uppercase; color: var(--dim); font-weight: 800; font-size: .65rem; }
.week-grid .day.off { opacity: .5; }
.week-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px 16px; }
.week-edit label { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; text-transform: none; }
.week-edit label span { font-weight: 800; color: var(--dim); font-size: .75rem; text-transform: uppercase; white-space: nowrap; }
.week-edit input { min-height: 40px; padding: 6px 8px; min-width: 0; width: 100%; box-sizing: border-box; }
.sched summary { display: flex; align-items: center; gap: 12px; }
.sched summary .small { font-weight: 500; }
tr.on td { background: var(--lime-bg); }
@media (max-width: 720px) { .clock-btn span { display: none; } .week-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Expenses / monthly profit */
.month-card { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.month-card .split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.month-card .split span { display: flex; flex-direction: column; gap: 2px; }
.month-card .split small { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); font-weight: 800; }
.month-card .split b { font-family: var(--display); font-size: 1.15rem; }
.month-nav { display: flex; align-items: center; gap: 10px; }
.month-nav b { font-family: var(--display); font-size: 1.1rem; min-width: 70px; text-align: center; }
.kpi.hl { border-color: var(--lime); }
.kpi.warn { border-color: var(--red); }
.chart.bars .rev { fill: var(--lime); }
.chart.bars .exp { fill: var(--orange); }
.chart.bars text.pos { fill: var(--lime); font-weight: 700; }
.chart.bars text.neg { fill: var(--red-t); font-weight: 700; }
button.link.danger { color: var(--red-t); }
/* WhatsApp click-to-chat */
.wa-btn { background: #25D366; border-color: #25D366; color: #06240F; gap: 6px; }
.wa-btn:hover { background: #4AE080; border-color: #4AE080; }
.wa-done { white-space: nowrap; }
.wa-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 8px; }
.wa-more { display: inline-block; }
.wa-more summary { list-style: none; cursor: pointer; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line-2); }
.wa-more summary::-webkit-details-marker { display: none; }
.wa-more .wa-kinds { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 0; }
.wa-more .wa-kinds a { font-size: .8rem; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: var(--surface-2, var(--surface)); border: 1px solid var(--line-2); color: var(--text); }
.wa-tpl { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin: 0; }
.wa-tpl legend { font-family: var(--display); font-weight: 800; padding: 0 6px; }
.wa-tpl label .badge { margin-inline-start: 6px; }

/* Language selector (3+ languages) */
.lang-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--ink); direction: ltr; }
.lang-seg a { padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 800; color: var(--dim); letter-spacing: .04em; }
.lang-seg a.on { background: var(--lime); color: var(--ink); }
.lang-seg a:hover { color: var(--text); }
.lang-seg a.on:hover { color: var(--ink); }
.app-head .lang-seg { margin-inline-start: auto; }
.keypad-lang { display: grid; place-items: center; }
.keypad-lang .lang-seg { border: 0; background: transparent; }

/* Exercise detail screen (member app) */
.ex-hero { margin: 0 0 12px; border-radius: var(--r-lg); overflow: hidden; background: #F3F5F7; aspect-ratio: 1 / 1; display: grid; place-items: center; }
.ex-hero img { width: 100%; height: 100%; object-fit: contain; }
.ex-noimg { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink); }
.ex-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ex-tags .badge { background: var(--surface-2); color: var(--text-2); }
.ex-prescribed { display: flex; flex-direction: column; gap: 10px; }
.ex-nums { display: flex; gap: 10px; }
.ex-nums span { flex: 1; background: var(--surface-2); border-radius: var(--r-sm); padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ex-nums b { font-family: var(--display); font-size: 1.5rem; line-height: 1; }
.ex-nums small { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); font-weight: 800; }
.ex-cue { margin: 6px 0 0; line-height: 1.6; color: var(--text-2); }
.ex-sets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.set-chip { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface-2); min-width: 78px; }
.set-chip small { font-size: .65rem; color: var(--dim); font-weight: 800; }
.set-chip b { font-family: var(--display); }
.set-chip.skipped { opacity: .5; }
.ex-nav { display: flex; gap: 8px; justify-content: space-between; margin: 4px 0 10px; }
.ex-nav .btn { flex: 1; justify-content: center; text-align: center; font-size: .82rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: 32px; }
.ex-credit { text-align: center; margin: 0 0 8px; }
.exercise .chev { margin-inline-start: auto; color: var(--dim); flex-shrink: 0; }
a.card.exercise { text-decoration: none; }
a.card.exercise:active { background: var(--surface-2); }
.session-ex .head .txt b a { color: inherit; }
a.thumb { cursor: pointer; }

/* Staff header on a phone: the nav scrolls sideways instead of widening the page */
@media (max-width: 720px) {
  .search { flex-wrap: wrap; }
  .search .search-box { flex: 1 1 100%; }
  .search > .btn, .search > button { flex: 1 1 auto; justify-content: center; }
  .top { gap: 10px; padding: 0 12px; }
  .nav { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; min-width: 0; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }
  .tools { gap: 8px; }
  .brand-name { display: none; }
  .who span:last-child { display: none; }
}

/* === importer === */
.imp-steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 16px; padding: 0; counter-reset: none; }
.imp-steps li { padding: 6px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--dim); font-weight: 700; font-size: .85rem; }
.imp-steps li.done { color: var(--text-2); border-color: var(--line-2); }
.imp-steps li.on { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.imp-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.imp-kind { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font-weight: 700; }
.imp-kind.on { background: var(--lime-bg); border-color: var(--lime); color: var(--lime); }
.imp-meta { display: block; margin-bottom: 10px; }
.imp-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
label.check { display: flex; flex-direction: row; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--text-2); }
label.check input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; flex-shrink: 0; margin: 0; }
.imp-preview-wrap { max-height: 460px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
table.imp-preview th { position: sticky; top: 0; background: var(--ink); z-index: 1; padding-top: 8px; }
table.imp-preview .imp-src { display: block; font-size: .68rem; color: var(--dim); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
table.imp-preview select.imp-target { min-height: 38px; padding: 6px 8px; font-size: .84rem; }
table.imp-preview td { white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
table.imp-plans .imp-plan-sel { min-width: 200px; }
table.imp-plans .imp-new { display: flex; gap: 6px; }
table.imp-plans .imp-new input { min-height: 38px; padding: 6px 8px; }
.imp-counts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.imp-counts .tile { flex: 1 1 130px; }
.imp-lists { align-items: start; }
.imp-actions { flex-wrap: wrap; }
.imp-legacy { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.imp-legacy summary { cursor: pointer; font-weight: 700; }
.imp-drop { border: 2px dashed var(--line-2); border-radius: var(--r); padding: 28px 20px; text-align: center; color: var(--muted); }
.imp-drop.over { border-color: var(--lime); background: var(--lime-bg); color: var(--text); }
@media (max-width: 720px) { .imp-opts { grid-template-columns: 1fr; } .imp-steps li { font-size: .78rem; padding: 5px 10px; } }