/* LoyaltyPro — black + gold. One palette, always dark (luxury look). */
:root{
  --bg:#070707; --bg-deep:#030303; --surface:#131210; --surface-2:#1b1915; --line:#3b3224; --line-soft:#221d14;
  --fg:#f4efe6; --muted:#a39a88; --accent:#d9b25f; --accent-hi:#f3d994; --accent-fg:#1a1204;
  --good:#5bd6a4; --good-bg:#10261c; --bad:#ff9a9a; --bad-bg:#301516; --warn:#ecc96b; --warn-bg:#33290f;
  --font:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --display:"El Messiri","IBM Plex Sans Arabic",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:radial-gradient(1000px 460px at 85% -10%,#2a200c 0%,transparent 62%),var(--bg);background-attachment:fixed;color:var(--fg);font:16px/1.65 var(--font);padding:20px 16px 64px;-webkit-font-smoothing:antialiased}
.wrap{max-width:1040px;margin-inline:auto;display:flex;flex-direction:column;gap:16px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
h1{font-family:var(--display);font-size:1.55rem;font-weight:700;margin:0;letter-spacing:.2px;text-wrap:balance}
h2{font-family:var(--display);font-size:1.15rem;font-weight:600;margin:0 0 12px;color:var(--fg)}
.sub{color:var(--muted);font-size:.85rem}
a{color:var(--accent)}
.panel{background:linear-gradient(180deg,var(--surface),#0c0b09);border:1px solid var(--line);border-radius:12px;padding:18px;overflow-x:auto}
#login{max-width:440px;margin-inline:auto;width:100%;margin-top:12vh}
label{display:block;font-size:.84rem;color:var(--muted);margin-bottom:5px}
input,select,textarea{width:100%;font:inherit;color:var(--fg);background:var(--bg-deep);border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-height:46px;transition:border-color .15s}
input::placeholder,textarea::placeholder{color:#6b6250}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}
input:focus-visible,button:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px}
input[type=checkbox]{accent-color:var(--accent)}
input[type=date],input[type=time]{-webkit-appearance:none;appearance:none;display:block;box-sizing:border-box;width:100%;min-width:0;max-width:100%;height:46px;text-align:start}
input[type=date]::-webkit-date-and-time-value{text-align:start;min-height:1.2em}
button{font:inherit;font-weight:600;border:0;border-radius:8px;padding:10px 18px;min-height:46px;cursor:pointer;color:var(--accent-fg);background:linear-gradient(180deg,var(--accent-hi),var(--accent));box-shadow:0 1px 0 rgba(255,255,255,.25) inset}
button:hover{filter:brightness(1.06)}
button.ghost{background:transparent;color:var(--fg);border:1px solid var(--line);box-shadow:none}
button.ghost:hover{border-color:var(--accent);color:var(--accent-hi);filter:none}
button.small{min-height:34px;padding:4px 12px;font-size:.85rem}
button:disabled{opacity:.45;cursor:not-allowed;filter:none}
.field{margin-bottom:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
/* stats read as one ledger strip separated by hairlines, not a pile of cards */
.grid:has(>.stat){display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.grid:has(>.stat)>.stat{flex:1 1 170px;background:var(--surface);border:0;border-radius:0}
.stat{padding:14px 16px;border:1px solid var(--line);border-radius:10px}
.stat span{display:block;font-size:.8rem;color:var(--muted)}
.stat b{display:block;font-family:var(--display);font-size:clamp(1.25rem,4.6vw,1.7rem);font-weight:700;line-height:1.25;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--accent-hi)}
.tabs{display:flex;gap:4px;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;overscroll-behavior:contain;border-bottom:1px solid var(--line);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:0 0 auto;background:transparent;color:var(--muted);box-shadow:none;border-radius:0;border-bottom:2px solid transparent;padding:10px 14px;min-height:44px;margin-bottom:0}
.tabs button:hover{color:var(--fg);filter:none}
.tabs button[aria-selected=true]{color:var(--accent-hi);border-bottom-color:var(--accent)}
.msg{padding:10px 14px;border-radius:8px;margin-top:12px;border:1px solid transparent}
.msg.err{background:var(--bad-bg);color:var(--bad);border-color:#4a2028}
.msg.ok{background:rgba(217,178,95,.12);color:var(--accent-hi);border-color:rgba(217,178,95,.45);font-weight:600}.msg.ok::before{content:'✓ '}
.msg.warn{background:var(--warn-bg);color:var(--warn);border-color:#4a3c14}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:start;padding:10px 12px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
th{color:var(--muted);font-weight:500;font-size:.8rem;border-bottom-color:var(--line)}
tbody tr:hover td{background:rgba(212,181,114,.04)}
td.num{font-variant-numeric:tabular-nums}
.badge{display:inline-block;padding:1px 11px;border-radius:999px;border:1px solid var(--line);font-size:.78rem;color:var(--accent-hi)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}.row>*{flex:1 1 160px}
.hint{color:var(--muted);font-size:.86rem;margin:4px 0 0}
code.link{display:block;direction:ltr;text-align:left;overflow-wrap:anywhere;background:var(--bg-deep);border:1px solid var(--line);border-radius:8px;padding:10px;color:var(--accent-hi)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (min-width:760px){body{padding-top:32px}.panel{padding:22px}}
button.ghost[aria-pressed=true]{border-color:var(--accent-hi);color:var(--accent-hi)}

.goal{display:flex;justify-content:space-between;gap:12px;margin-top:8px}

header h1::before{content:"";display:inline-block;width:34px;height:28px;background:url(logo-mark.png) center/contain no-repeat;vertical-align:middle;margin-inline-end:10px}
.nomark::before{display:none !important}

html,body{overflow-x:hidden;max-width:100%}