:root{
  /* هوية عبق الغيم: فحمي + شامبين. أسماء المتغيرات كما هي حتى لا تنكسر بقية الملفات */
  --ink:#1B1D22; --ink-2:#2D3035; --line:rgba(255,255,255,.10);
  --cyan:#C9A96A;        /* شامبين - اللون الأساسي */
  --magenta:#C4564F;     /* أحمر هادئ - حالة "التسجيل مفتوح" فقط */
  --violet:#8C7343;      /* برونزي */
  --gold-2:#E6D3A8;
  --muted:rgba(255,255,255,.55); --r:22px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1000px 560px at 84% -12%, rgba(201,169,106,.15), transparent 62%),
    radial-gradient(820px 520px at 8% 2%, rgba(201,169,106,.07), transparent 60%),
    var(--ink);
  color:#fff; font-family:'Tajawal',system-ui,sans-serif; min-height:100vh;
}
.num{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
.hidden{display:none!important}

.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:13px;font-weight:500}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.dot.on{background:var(--cyan);box-shadow:0 0 0 4px rgba(201,169,106,.18)}
.dot.rec{background:var(--magenta);box-shadow:0 0 0 4px rgba(196,86,79,.20);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}

.card{border-radius:var(--r);padding:20px;border:1px solid var(--line);background:var(--ink-2);position:relative;overflow:hidden}
.card .top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.card .label{font-size:14px;font-weight:500;opacity:.85}
.card svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;opacity:.55}
.value{font-size:42px;font-weight:600;line-height:1}
.unit{font-size:13px;font-weight:400;opacity:.6;margin-inline-start:8px}
.c-count{background:linear-gradient(135deg,#8C7343,#C9A96A)}
.c-state{background:linear-gradient(135deg,#6B2E2A,#C4564F)}
.c-word{background:linear-gradient(135deg,#433820,#A8894F)}

.panel{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.panel h2{font-size:15px;font-weight:700;margin:0 0 14px;display:flex;align-items:center;gap:8px}
.panel h2 .tag{font-size:11px;font-weight:500;color:var(--muted);background:rgba(255,255,255,.06);
  padding:3px 9px;border-radius:999px}

label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px}
input[type=text]{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:#fff;font-family:inherit;font-size:15px;outline:none}
input[type=text]:focus{border-color:rgba(201,169,106,.6)}

button,.btn{font-family:inherit;font-size:14px;font-weight:700;border-radius:14px;padding:12px 20px;
  cursor:pointer;color:#fff;background:rgba(255,255,255,.09);border:1px solid var(--line);
  transition:.15s;text-decoration:none;display:inline-block}
button:hover:not(:disabled),.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.14)}
button:disabled{opacity:.4;cursor:not-allowed}
button:focus-visible,.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.b-primary{background:linear-gradient(135deg,#B08F52,#E6D3A8);color:#231D10;border-color:transparent}
.b-open{background:linear-gradient(135deg,#6B2E2A,#C4564F);border-color:transparent}
.b-ghost{background:transparent}

.modes{display:inline-flex;flex-wrap:wrap;background:rgba(255,255,255,.06);border:1px solid var(--line);
  border-radius:999px;padding:4px;gap:4px}
.modes button{padding:8px 20px;border-radius:999px;font-size:13px;background:transparent;
  border:none;color:var(--muted)}
.modes button:hover:not(.active){transform:none;background:rgba(255,255,255,.06);color:#fff}
.modes button.active{background:linear-gradient(135deg,#B08F52,#E6D3A8);color:#231D10}

ul{list-style:none;margin:0;padding:0;max-height:290px;overflow-y:auto}
li{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 4px;border-bottom:1px solid var(--line);font-size:14px}
li:last-child{border-bottom:none}
li .t{font-size:12px;color:var(--muted);font-family:'IBM Plex Mono',monospace}
.empty{color:var(--muted);font-size:14px;padding:24px 0;text-align:center}
.rank{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-size:12px;
  font-weight:700;background:rgba(255,255,255,.08)}
.win-row{display:flex;align-items:center;gap:10px}
.note{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.7}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}