/* ==========================================================================
   Telkini v131 — لوحة الحساب + زر الحساب لمشتركي Pro
   ========================================================================== */
.tk-dash {
  --d-ink: #0f172a; --d-muted: #64748b; --d-line: #e2e8f0; --d-card: #fff;
  --c0: #f1f5f9; --c0-line: #e7ebf0;
  max-width: 76rem; margin: 0 auto; padding: 28px 16px 8px; font-family: Cairo, Inter, sans-serif; color: var(--d-ink);
}
.tk-dash[hidden] { display: none; }
/* v132: من له حساب يرى اللوحة بدل واجهة الترحيب */
html.tk-acct #home-hero { display: none; }
html.tk-acct #home-view > main { padding-top: 0; }
html.tk-acct #home-view > main > #home-hero + section { margin-top: 48px; }
html.dark .tk-dash { --d-ink: #f1f5f9; --d-muted: #94a3b8; --d-line: #1f2a3c; --d-card: #0f172a; --c0: #1e293b; --c0-line: #27354a; }

.tk-d-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.tk-d-hello { min-width: 0; }
.tk-d-hello h2 { margin: 0; font: 800 clamp(26px, 3.2vw, 36px)/1.15 Inter, Cairo, sans-serif; letter-spacing: -.02em; color: var(--d-ink); }
.tk-d-hello p { margin: 6px 0 0; text-align: left; font: 500 14px/1.6 Cairo, sans-serif; color: var(--d-muted); }
.tk-d-hello p b { font-weight: 800; color: var(--d-ink); }

.tk-d-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.tk-d-stat { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--d-card); border: 1px solid var(--d-line); border-radius: 18px; box-shadow: 0 1px 3px rgba(15, 23, 42, .04); min-width: 0; }
.tk-d-stat.is-link { cursor: pointer; transition: border-color .15s, transform .15s; }
.tk-d-stat.is-link:hover { border-color: #16a34a; transform: translateY(-1px); }
.tk-d-stat:focus-visible { outline: 2px solid #16a34a; outline-offset: 2px; }
.tk-d-stat-txt { display: flex; flex-direction: column; min-width: 0; text-align: right; }
.tk-d-stat-txt > small { font: 600 10.5px/1.4 Cairo, sans-serif; color: var(--d-muted); }
.tk-d-stat-txt > b { font: 800 16.5px/1.35 Cairo, Inter, sans-serif; color: var(--d-ink); white-space: nowrap; }
.tk-d-stat-txt > b.is-empty { color: #15803d; }
html.dark .tk-d-stat-txt > b.is-empty { color: #4ade80; }
.tk-d-stat-txt small small, .tk-d-stat-txt b small { font: 700 12px Cairo, sans-serif; color: var(--d-muted); }
.tk-d-num { font: 800 20px/1 Inter, sans-serif; }
#tk-d-level { font-family: Inter, Cairo, sans-serif; font-size: 20px; }
button.tk-d-stat { font: inherit; color: inherit; text-align: right; }

/* ---------- v133: نوافذ البطاقات (موعد الامتحان، المستوى، المجموعة) ---------- */
.tk-dm { position: fixed; inset: 0; z-index: 9980; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.tk-dm[hidden] { display: none; }
html.tk-dm-open, html.tk-dm-open body { overflow: hidden; }
.tk-dm-panel {
  --m-ink: #0f172a; --m-muted: #64748b; --m-line: #e2e8f0; --m-bg: #fff; --m-tint: #f8fafc; --m-a: #3b82f6; --m-b: #2563eb;
  position: relative; width: min(400px, 100%); max-height: 92vh; overflow-y: auto; box-sizing: border-box; padding: 32px 24px 24px;
  display: flex; flex-direction: column; align-items: stretch; gap: 12px; text-align: center;
  background: linear-gradient(180deg, var(--m-tint), var(--m-bg) 130px); color: var(--m-ink);
  border-radius: 28px; box-shadow: 0 24px 60px -18px rgba(15, 23, 42, .5); font-family: Cairo, Tajawal, sans-serif;
  animation: tk-dm-in .22s cubic-bezier(.22, 1.2, .36, 1) both;
}
@keyframes tk-dm-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.tk-dm-red { --m-tint: #fff5ec; --m-a: #f87171; --m-b: #ef4444; }
.tk-dm-blue { --m-tint: #eff6ff; --m-a: #60a5fa; --m-b: #3b82f6; }
.tk-dm-green { --m-tint: #ecfdf3; --m-a: #4ade80; --m-b: #22c55e; }
html.dark .tk-dm-panel { --m-ink: #f1f5f9; --m-muted: #94a3b8; --m-line: #27354a; --m-bg: #0f172a; }
html.dark .tk-dm-red { --m-tint: #2a1a16; } html.dark .tk-dm-blue { --m-tint: #14233f; } html.dark .tk-dm-green { --m-tint: #10291d; }
.tk-dm-x { position: absolute; top: 16px; left: 16px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(148, 163, 184, .18); color: var(--m-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s; }
.tk-dm-x:hover { background: rgba(148, 163, 184, .32); color: var(--m-ink); }
.tk-dm-tile { align-self: center; width: 64px; height: 64px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(145deg, var(--m-a), var(--m-b)); box-shadow: 0 12px 22px -10px var(--m-b); }
.tk-dm-panel h3 { margin: 6px 0 0; font: 800 21px/1.35 Cairo, sans-serif; color: var(--m-ink); }
.tk-dm-sub { margin: -6px 0 8px; font: 500 13px/1.7 Cairo, sans-serif; color: var(--m-muted); }
.tk-dm-field { display: flex; flex-direction: column; gap: 6px; text-align: right; }
.tk-dm-field > span { font: 700 13px Cairo, sans-serif; color: var(--m-ink); }
.tk-dm-input { width: 100%; box-sizing: border-box; height: 46px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--m-line); background: var(--m-bg); color: var(--m-ink); font: 600 14.5px Inter, Cairo, sans-serif; outline: none; color-scheme: light; }
html.dark .tk-dm-input { color-scheme: dark; }
.tk-dm-input:focus { border-color: var(--m-b); box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-b) 18%, transparent); }
.tk-dm-save, .tk-dm-join { display: flex; align-items: center; height: 48px; border: 0; border-radius: 14px; color: #fff; font: 800 14px Cairo, sans-serif; cursor: pointer; text-decoration: none; transition: filter .15s, transform .1s; }
.tk-dm-save { justify-content: center; gap: 8px; background: var(--m-b); box-shadow: 0 10px 20px -12px var(--m-b); }
.tk-dm-save:hover:not([disabled]), .tk-dm-join:hover { filter: brightness(.95); }
.tk-dm-save:active:not([disabled]), .tk-dm-join:active { transform: scale(.985); }
.tk-dm-save[disabled] { background: #e5e7eb; color: #94a3b8; box-shadow: none; cursor: not-allowed; }
html.dark .tk-dm-save[disabled] { background: #1e293b; color: #64748b; }
.tk-dm-levels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tk-dm-level { height: 60px; border-radius: 14px; border: 1px solid var(--m-line); background: var(--m-bg); color: var(--m-ink); font: 800 17px Inter, sans-serif; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.tk-dm-level:hover { border-color: var(--m-b); }
.tk-dm-level.is-on { background: var(--m-b); border-color: var(--m-b); color: #fff; box-shadow: 0 10px 20px -12px var(--m-b); }
.tk-dm-join { justify-content: space-between; padding: 0 18px; }
.tk-dm-whatsapp { background: #25d366; color: #fff; }
.tk-dm-telegram { background: #26a5e3; }
.tk-dm-link { align-self: center; border: 0; background: none; padding: 2px 8px; color: var(--m-muted); font: 700 12.5px Cairo, sans-serif; text-decoration: underline; cursor: pointer; }
.tk-dm-msg { margin: 0; font: 700 12.5px/1.6 Cairo, sans-serif; color: #dc2626; }
.tk-dm-msg:empty { display: none; }
html.dark .tk-dm-msg { color: #fca5a5; }
.tk-dm-x:focus-visible, .tk-dm-save:focus-visible, .tk-dm-join:focus-visible, .tk-dm-level:focus-visible, .tk-dm-link:focus-visible { outline: 2px solid var(--m-b); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tk-dm-panel { animation: none; } }

.tk-d-tile { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.tk-d-tile.is-sm { width: 32px; height: 32px; border-radius: 10px; }
.tk-d-blue { background: #eff6ff; color: #2563eb; }
.tk-d-green { background: #dcfce7; color: #16a34a; }
.tk-d-orange { background: #fff4e6; color: #f97316; }
.tk-d-rose { background: #ffe4e6; color: #e11d48; }
html.dark .tk-d-blue { background: rgba(37, 99, 235, .18); color: #93c5fd; }
html.dark .tk-d-green { background: rgba(22, 163, 74, .18); color: #4ade80; }
html.dark .tk-d-orange { background: rgba(249, 115, 22, .16); color: #fdba74; }
html.dark .tk-d-rose { background: rgba(225, 29, 72, .16); color: #fda4af; }

.tk-d-card { background: var(--d-card); border: 1px solid var(--d-line); border-radius: 22px; padding: 22px 26px; box-shadow: 0 1px 3px rgba(15, 23, 42, .04); }
.tk-d-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tk-d-year { display: flex; align-items: center; gap: 10px; }
.tk-d-year b { font: 800 17px Inter, sans-serif; color: var(--d-ink); }
.tk-d-legend { display: flex; align-items: center; gap: 5px; font: 600 11.5px Inter, Cairo, sans-serif; color: var(--d-muted); }
.tk-d-legend .tk-c { width: 13px; height: 13px; display: inline-block; flex-shrink: 0; }
.tk-d-leg-today { margin-inline-start: 10px; }

.tk-d-scroll { overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.tk-d-map { display: grid; grid-template-rows: 20px repeat(7, auto); gap: 4px; min-width: 760px; }
.tk-d-mon { grid-row: 1; font: 700 11.5px Inter, sans-serif; color: var(--d-muted); white-space: nowrap; align-self: center; }
.tk-c { display: block; aspect-ratio: 1; border-radius: 4px; background: var(--c0); box-shadow: inset 0 0 0 1px var(--c0-line); font-style: normal; }
.tk-c.l1 { background: #bbf7d0; box-shadow: none; }
.tk-c.l2 { background: #4ade80; box-shadow: none; }
.tk-c.l3 { background: #16a34a; box-shadow: none; }
html.dark .tk-c.l1 { background: #14532d; }
html.dark .tk-c.l2 { background: #16a34a; }
html.dark .tk-c.l3 { background: #4ade80; }
.tk-c.is-today { box-shadow: inset 0 0 0 1.5px #475569; }
html.dark .tk-c.is-today { box-shadow: inset 0 0 0 1.5px #e2e8f0; }

@media (max-width: 860px) {
  .tk-d-top { flex-direction: column; align-items: stretch; }
  .tk-d-stats { display: grid; grid-template-columns: 1fr 1fr; }
  .tk-d-stat { justify-content: space-between; }
}
@media (max-width: 640px) {
  .tk-dash { padding-top: 18px; }
  .tk-d-card { padding: 16px; border-radius: 18px; }
  .tk-d-stat { padding: 10px; gap: 8px; }
  .tk-d-stat-txt { flex: 1; }
  .tk-d-stat-txt > b { font-size: 13.5px; white-space: normal; overflow-wrap: anywhere; }
  .tk-d-tile { width: 34px; height: 34px; }
  .tk-d-legend { flex-wrap: wrap; }
  .tk-d-legend span { white-space: nowrap; }
}
@media (max-width: 330px) { .tk-d-stats { grid-template-columns: 1fr; } }

/* ---------- زر الحساب لمشتركي Pro (التاج + الاسم + Pro + السهم) ---------- */
.tk-nav-crown, .tk-nav-pro, .tk-nav-chev { display: none; flex-shrink: 0; }
#user-nav-controls #btn-user-menu.tk-pro {
  direction: ltr; gap: 8px; padding: 6px 12px !important; align-items: center;
  background: linear-gradient(135deg, #fffaf3, #fff3e2) !important; border: 1.5px solid #fbbf77 !important;
  box-shadow: 0 4px 14px -6px rgba(234, 88, 12, .45) !important;
}
#user-nav-controls #btn-user-menu.tk-pro:hover { background: linear-gradient(135deg, #fff7ec, #ffead0) !important; border-color: #f59e0b !important; }
html.dark #user-nav-controls #btn-user-menu.tk-pro { background: linear-gradient(135deg, #2a1c0c, #33210c) !important; border-color: #b4691e !important; }
#user-nav-controls #btn-user-menu.tk-pro > #nav-user-avatar, #user-nav-controls #btn-user-menu.tk-pro > #nav-user-crown { display: none !important; }
#user-nav-controls #btn-user-menu.tk-pro > .tk-nav-crown { display: block !important; color: #ea8a0c; width: 20px; height: 20px; }
#user-nav-controls #btn-user-menu.tk-pro > .tk-nav-chev { display: block !important; color: #78716c; width: 16px; height: 16px; transition: transform .2s; }
#user-nav-controls #btn-user-menu.tk-pro > .tk-nav-pro {
  display: inline-flex !important; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
  background: linear-gradient(135deg, #fbbf24, #f97316); color: #fff; font: 800 11px Inter, sans-serif;
}
#user-nav-controls #btn-user-menu.tk-pro > #nav-user-name {
  color: #9a5310 !important; font: 800 13px Inter, Cairo, sans-serif !important; text-transform: uppercase; letter-spacing: .02em; max-width: 120px; background: none !important; -webkit-text-fill-color: currentColor;
}
html.dark #user-nav-controls #btn-user-menu.tk-pro > #nav-user-name { color: #fdba74 !important; }
html.dark #user-nav-controls #btn-user-menu.tk-pro > .tk-nav-chev { color: #d6d3d1; }
@media (max-width: 480px) {
  #user-nav-controls #btn-user-menu.tk-pro { padding: 4px 7px !important; gap: 5px; }
  #user-nav-controls #btn-user-menu.tk-pro > .tk-nav-chev { display: none !important; }
}

/* ---------- v133: زر الحساب المجاني (أيقونة المستخدم الخضراء + الاسم + Free + السهم) ----------
   نفس بنية زر Pro: الاسم يتغير تلقائياً (أي اسم، أي طول) والأيقونة تبقى ثابتة ومحاذاة في الوسط. */
.tk-nav-user, .tk-nav-free { display: none; flex-shrink: 0; }
#user-nav-controls #btn-user-menu.tk-free {
  direction: ltr; gap: 9px; padding: 6px 12px 6px 14px !important; align-items: center;
  background: #fff !important; border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 12px -8px rgba(15, 23, 42, .18) !important;
}
#user-nav-controls #btn-user-menu.tk-free:hover { background: #f9fafb !important; border-color: #d1d5db !important; }
html.dark #user-nav-controls #btn-user-menu.tk-free { background: #1e293b !important; border-color: #334155 !important; }
html.dark #user-nav-controls #btn-user-menu.tk-free:hover { background: #243247 !important; }
#user-nav-controls #btn-user-menu.tk-free > #nav-user-avatar,
#user-nav-controls #btn-user-menu.tk-free > #nav-user-crown { display: none !important; }
#user-nav-controls #btn-user-menu.tk-free > .tk-nav-user { display: block !important; color: #16a34a; width: 18px; height: 18px; }
html.dark #user-nav-controls #btn-user-menu.tk-free > .tk-nav-user { color: #4ade80; }
#user-nav-controls #btn-user-menu.tk-free > #nav-user-name {
  font: 700 13px Inter, Cairo, sans-serif !important; text-transform: uppercase; letter-spacing: .02em; max-width: 120px; line-height: 20px;
}
/* الاسم العادي (غير الطاقم): رمادي داكن — أسماء الطاقم تحتفظ بلمعانها الأصلي */
#user-nav-controls #btn-user-menu.tk-free:not(.tk-staff) > #nav-user-name {
  color: #374151 !important; background: none !important; -webkit-text-fill-color: currentColor;
}
#user-nav-controls #btn-user-menu.tk-staff > #nav-user-name { font-weight: 800 !important; }

html.dark #user-nav-controls #btn-user-menu.tk-free:not(.tk-staff) > #nav-user-name { color: #e5e7eb !important; }
#user-nav-controls #btn-user-menu.tk-free > .tk-nav-free {
  display: inline-flex !important; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px;
  background: #f3f4f6; border: 1px solid #e5e7eb; color: #6b7280; font: 700 10.5px Inter, sans-serif;
}
html.dark #user-nav-controls #btn-user-menu.tk-free > .tk-nav-free { background: #334155; border-color: #475569; color: #cbd5e1; }
#user-nav-controls #btn-user-menu.tk-free > .tk-nav-chev { display: block !important; color: #9ca3af; width: 16px; height: 16px; transition: transform .2s; }
/* الطاقم ليس حساباً مجانياً: لا شارة Free */
#user-nav-controls #btn-user-menu.tk-free.tk-staff > .tk-nav-free { display: none !important; }
@media (max-width: 480px) {
  #user-nav-controls #btn-user-menu.tk-free { padding: 4px 8px !important; gap: 6px; }
  #user-nav-controls #btn-user-menu.tk-free > .tk-nav-chev { display: none !important; }
  #user-nav-controls #btn-user-menu.tk-free > #nav-user-name { max-width: 84px; }
}

/* ---------- v133: نفس الأيقونة بجانب أي اسم في أي مكان من الموقع ----------
   <span class="tk-user-tag"><svg ...أيقونة المستخدم...></svg><span class="tk-user-tag-name">الاسم</span></span> */
.tk-user-tag { display: inline-flex; align-items: center; gap: .45em; max-width: 100%; vertical-align: middle; line-height: 1.2; }
.tk-user-tag > svg { flex-shrink: 0; width: 1.25em; height: 1.25em; color: #16a34a; }
html.dark .tk-user-tag > svg { color: #4ade80; }
.tk-user-tag-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- v139: حركة مربعات خريطة النشاط ---------- */
.tk-d-map .tk-c {
  animation: tkCellIn .5s cubic-bezier(.2, .9, .3, 1.25) backwards;
  animation-delay: var(--d, 0ms);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  will-change: transform;
}
/* الأيام النشطة تظهر بقفزة أوضح */
.tk-d-map .tk-c.l1, .tk-d-map .tk-c.l2, .tk-d-map .tk-c.l3 { animation-name: tkCellPop; animation-duration: .65s; }
@keyframes tkCellIn { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: none; } }
@keyframes tkCellPop {
  0% { opacity: 0; transform: scale(.3); }
  60% { opacity: 1; transform: scale(1.25); }
  100% { transform: none; }
}
/* اليوم الحالي: حلقة تتنفس بهدوء (بعد انتهاء الموجة) */
.tk-d-map .tk-c.is-today { position: relative; z-index: 1; }
.tk-d-map .tk-c.is-today::after {
  content: ""; position: absolute; inset: -3px; border-radius: 6px; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, .45);
  animation: tkTodayPulse 2.4s ease-out 1.2s infinite;
}
html.dark .tk-d-map .tk-c.is-today::after { box-shadow: 0 0 0 0 rgba(74, 222, 128, .45); }
@keyframes tkTodayPulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); } 70%, 100% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); } }
/* تمرير الفأرة: المربع يكبر قليلاً مع ظل */
@media (hover: hover) {
  .tk-d-map .tk-c:hover { transform: scale(1.35); z-index: 2; position: relative; filter: saturate(1.15);
    box-shadow: 0 4px 10px -3px rgba(15, 23, 42, .35), inset 0 0 0 1px rgba(255, 255, 255, .25); }
  html.dark .tk-d-map .tk-c:hover { box-shadow: 0 4px 12px -3px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .15); }
}
@media (prefers-reduced-motion: reduce) {
  .tk-d-map .tk-c, .tk-d-map .tk-c.is-today::after { animation: none !important; transition: none; }
}