/* ===== تمتين — طبقة الرحلة (addon) ===== */
#tnz-fab {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 9998;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid #c9a227;
  background: linear-gradient(145deg, #0f766e, #0b4f3e);
  color: #f8f5ef;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(11, 79, 62, 0.35);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
#tnz-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(11, 79, 62, 0.4);
}
#tnz-fab:active {
  transform: scale(0.94);
}
#tnz-fab svg {
  width: 30px;
  height: 30px;
}
#tnz-fab .tnz-fab-dot {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #c9a227;
  border: 2px solid #f8f5ef;
  display: none;
}
#tnz-fab.tnz-has-dot .tnz-fab-dot {
  display: block;
}

#tnz-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #f8f5ef;
  display: none;
  flex-direction: column;
  font-family: Tajawal, "Segoe UI", sans-serif;
  color: #2e2620;
}
#tnz-overlay.tnz-open {
  display: flex;
  animation: tnz-fadein 0.22s ease;
}
@keyframes tnz-fadein {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.tnz-head {
  background: linear-gradient(160deg, #0b4f3e, #0f766e);
  color: #f8f5ef;
  padding: 14px 16px 10px;
  flex-shrink: 0;
}
.tnz-head-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tnz-title {
  font-size: 19px;
  font-weight: 800;
  flex: 1;
}
.tnz-close {
  background: rgba(248, 245, 239, 0.15);
  border: none;
  color: #f8f5ef;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
.tnz-close:hover {
  background: rgba(248, 245, 239, 0.3);
}
#tnz-account-slot {
  margin-top: 8px;
}

.tnz-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 12px 8px;
  background: #f1eadb;
  flex-shrink: 0;
  scrollbar-width: none;
}
.tnz-tabs::-webkit-scrollbar {
  display: none;
}
.tnz-tab {
  position: relative;
  flex-shrink: 0;
  border: 1.5px solid #b7dccf;
  background: #f8f5ef;
  color: #0b4f3e;
  border-radius: 999px;
  padding: 6px 13px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.tnz-tab.tnz-on {
  background: #0f766e;
  border-color: #0f766e;
  color: #f8f5ef;
}
.tnz-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 90px;
  -webkit-overflow-scrolling: touch;
}

.tnz-card {
  background: #fff;
  border: 1.5px solid #b7dccf;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(11, 79, 62, 0.06);
}
.tnz-note {
  font-size: 12.5px;
  color: #5e6b62;
  line-height: 1.7;
}
.tnz-h {
  font-size: 15px;
  font-weight: 800;
  color: #0b4f3e;
  margin: 0 0 8px;
}
.tnz-btn {
  font-family: inherit;
  border: none;
  border-radius: 12px;
  background: #0f766e;
  color: #f8f5ef;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 18px;
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.12s;
}
.tnz-btn:hover {
  background: #0b4f3e;
}
.tnz-btn:active {
  transform: scale(0.97);
}
.tnz-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tnz-btn.tnz-ghost {
  background: transparent;
  border: 1.5px solid #0f766e;
  color: #0f766e;
}
.tnz-btn.tnz-ghost:hover {
  background: #e6f4f0;
}
.tnz-btn.tnz-gold {
  background: #c9a227;
  color: #2e2620;
}
.tnz-btn.tnz-gold:hover {
  background: #b08f1f;
}

/* ===== الخريطة ===== */
.tnz-map-leg {
  margin-bottom: 18px;
}
.tnz-map-leghead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.tnz-map-leghead img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #c9a227;
  background: #fff;
}
.tnz-map-legname {
  font-weight: 800;
  font-size: 14px;
  color: #0b4f3e;
}
.tnz-map-legprog {
  font-size: 12px;
  color: #5e6b62;
  font-weight: 700;
}
.tnz-map-canvas {
  position: relative;
  background: linear-gradient(180deg, #f4efe4, #ece5d2);
  border: 1.5px solid #d9cfb4;
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  max-width: 430px;
  margin-inline: auto;
}
.tnz-map-canvas svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.tnz-node {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #b7dccf;
  background: #f8f5ef;
  color: #5e6b62;
  font-size: 11px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.12s;
}
.tnz-node.tnz-pass {
  background: #0f766e;
  border-color: #0b4f3e;
  color: #f8f5ef;
}
.tnz-node.tnz-cur {
  background: #c9a227;
  border-color: #8a6d15;
  color: #2e2620;
  box-shadow: 0 0 0 5px rgba(201, 162, 39, 0.25);
  animation: tnz-pulse 1.6s infinite;
}
.tnz-node.tnz-lock {
  background: #e7dfcd;
  border-color: #d5ccb6;
  color: #b3a98f;
  cursor: not-allowed;
}
.tnz-node:not(.tnz-lock):hover {
  transform: translate(-50%, -50%) scale(1.15);
}
@keyframes tnz-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.3);
  }
  50% {
    box-shadow: 0 0 0 9px rgba(201, 162, 39, 0.12);
  }
}
.tnz-station {
  position: absolute;
  transform: translate(0, -50%);
  background: #0b4f3e;
  color: #f8f5ef;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(11, 79, 62, 0.3);
  z-index: 2;
}
.tnz-station.tnz-st-lock {
  background: #9aa79e;
  opacity: 0.75;
}
.tnz-station .tnz-flag {
  color: #c9a227;
  margin-inline-end: 3px;
}
.tnz-char {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #c9a227;
  background: #fff;
  transform: translate(-50%, -92%);
  z-index: 3;
  box-shadow: 0 4px 10px rgba(11, 79, 62, 0.35);
  animation: tnz-bob 2.2s ease-in-out infinite;
}
@keyframes tnz-bob {
  0%,
  100% {
    transform: translate(-50%, -92%);
  }
  50% {
    transform: translate(-50%, -104%);
  }
}
.tnz-char-sh {
  position: absolute;
  width: 30px;
  height: 8px;
  border-radius: 50%;
  background: rgba(11, 79, 62, 0.18);
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* ===== الحديقة ===== */
.tnz-garden-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.tnz-plot {
  background: linear-gradient(180deg, #fdfbf5, #f3ecdc);
  border: 1.5px solid #ddd2b8;
  border-radius: 14px;
  padding: 8px 4px 6px;
  text-align: center;
}
.tnz-plot svg {
  width: 52px;
  height: 64px;
}
.tnz-plot-day {
  font-size: 10.5px;
  font-weight: 800;
  color: #0b4f3e;
  margin-top: 2px;
}
.tnz-plot-n {
  font-size: 10px;
  color: #5e6b62;
}
.tnz-plot.tnz-today {
  border-color: #c9a227;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.2);
}
.tnz-streak {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1.5px solid #c9a227;
  color: #8a6d15;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 800;
}

/* ===== مراجعة اليوم ===== */
.tnz-rev-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid #b7dccf;
  border-radius: 14px;
  padding: 11px 12px;
  margin-bottom: 9px;
}
.tnz-rev-ref {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: #2e2620;
}
.tnz-rev-ref small {
  display: block;
  font-size: 11px;
  color: #5e6b62;
  font-weight: 400;
}
.tnz-flash {
  animation: tnz-flash 1.4s ease 3;
}
@keyframes tnz-flash {
  0%,
  100% {
    box-shadow: none;
  }
  50% {
    box-shadow: 0 0 0 5px rgba(201, 162, 39, 0.55);
  }
}

/* ===== الأوسمة ===== */
.tnz-badge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.tnz-badge {
  background: #fff;
  border: 1.5px solid #b7dccf;
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
}
.tnz-badge .tnz-medal {
  width: 52px;
  height: 52px;
  margin: 0 auto 7px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: linear-gradient(145deg, #c9a227, #e6c65a);
  box-shadow: 0 3px 8px rgba(201, 162, 39, 0.4);
  color: #fff;
}
.tnz-badge .tnz-bname {
  font-size: 13px;
  font-weight: 800;
  color: #0b4f3e;
}
.tnz-badge .tnz-bdesc {
  font-size: 11px;
  color: #5e6b62;
  margin-top: 2px;
  line-height: 1.5;
}
.tnz-badge.tnz-off .tnz-medal {
  background: #e4ddcb;
  box-shadow: none;
  color: #b0a78e;
}
.tnz-badge.tnz-off .tnz-bname {
  color: #8b8570;
}

/* ===== الفروق الدقيقة ===== */
.tnz-q {
  font-family: "Amiri Quran", Tajawal, serif;
  font-size: 21px;
  line-height: 2.3;
  color: #2e2620;
  background: #fdfbf5;
  border: 1.5px solid #ddd2b8;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
  text-align: center;
}
.tnz-gap {
  display: inline-block;
  min-width: 52px;
  border-bottom: 2.5px dashed #c9a227;
  color: #c9a227;
  text-align: center;
  font-family: Tajawal;
  font-size: 14px;
  font-weight: 800;
  vertical-align: baseline;
}
.tnz-opts {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.tnz-opt {
  flex: 1;
  font-family: "Amiri Quran", serif;
  font-size: 20px;
  padding: 12px 6px;
  border-radius: 12px;
  border: 2px solid #0f766e;
  background: #fff;
  color: #0b4f3e;
  cursor: pointer;
  transition: all 0.13s;
}
.tnz-opt:hover {
  background: #e6f4f0;
}
.tnz-opt.tnz-right {
  background: #0f766e;
  color: #fff;
  border-color: #0b4f3e;
}
.tnz-opt.tnz-wrong {
  background: #fdecea;
  border-color: #9e3b2b;
  color: #9e3b2b;
}
.tnz-opt:disabled {
  cursor: default;
}
.tnz-diff {
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid #b7dccf;
  margin-bottom: 12px;
}
.tnz-diff-row {
  padding: 10px 12px;
  background: #fff;
}
.tnz-diff-row + .tnz-diff-row {
  border-top: 1.5px dashed #b7dccf;
  background: #f8fcf9;
}
.tnz-diff-src {
  font-size: 11.5px;
  font-weight: 800;
  color: #0f766e;
  margin-bottom: 5px;
  font-family: Tajawal;
}
.tnz-diff-txt {
  font-family: "Amiri Quran", serif;
  font-size: 19px;
  line-height: 2.1;
  color: #2e2620;
}
.tnz-diff-txt .tnz-hl {
  background: rgba(201, 162, 39, 0.32);
  border-radius: 6px;
  padding: 1px 4px;
  box-shadow: inset 0 -2px 0 #c9a227;
}
.tnz-diff-txt .tnz-hl2 {
  background: rgba(15, 118, 110, 0.16);
  border-radius: 6px;
  padding: 1px 4px;
  box-shadow: inset 0 -2px 0 #0f766e;
}
.tnz-verdict {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 10px;
}
.tnz-verdict.tnz-vr {
  color: #0b4f3e;
}
.tnz-verdict.tnz-vw {
  color: #9e3b2b;
}

/* ===== توست ===== */
#tnz-toast-wrap {
  position: fixed;
  bottom: 86px;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  padding: 0 16px;
}
.tnz-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0b4f3e;
  color: #f8f5ef;
  border: 1.5px solid #c9a227;
  border-radius: 14px;
  padding: 10px 14px;
  max-width: 340px;
  box-shadow: 0 8px 22px rgba(11, 79, 62, 0.4);
  animation: tnz-toastin 0.3s ease;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;
}
.tnz-toast img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #c9a227;
  flex-shrink: 0;
}
@keyframes tnz-toastin {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ===== حساب المزامنة (يملأه tamteen-sync.js) ===== */
.tnz-acc {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(248, 245, 239, 0.12);
  border: 1px solid rgba(201, 162, 39, 0.55);
  border-radius: 12px;
  padding: 7px 10px;
  font-size: 12px;
}
.tnz-acc .tnz-acc-txt {
  flex: 1;
  line-height: 1.5;
}
.tnz-acc .tnz-acc-status {
  font-size: 10.5px;
  opacity: 0.85;
  font-weight: 400;
}
.tnz-acc button {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  border: none;
  border-radius: 8px;
  padding: 6px 11px;
  cursor: pointer;
  background: #c9a227;
  color: #2e2620;
}
.tnz-acc button.tnz-out {
  background: transparent;
  color: #f8f5ef;
  border: 1px solid rgba(248, 245, 239, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  #tnz-overlay.tnz-open,
  .tnz-node,
  .tnz-char,
  .tnz-toast {
    animation: none !important;
    transition: none !important;
  }
  .tnz-node.tnz-cur {
    animation: none !important;
  }
}

@media (min-width: 720px) {
  .tnz-body > * {
    max-width: 680px;
    margin-inline: auto;
  }
  .tnz-body > .tnz-garden-grid,
  .tnz-body > .tnz-badge-grid {
    margin-inline: auto;
  }
}
.tnz-account {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
  padding: 8px 0;
  color: #fff;
}
.tnz-account .tnz-btn {
  font-size: 12px;
  padding: 7px;
  background: #fff;
  color: #145746;
}
.tnz-medal {
  background: none !important;
  width: 86px !important;
  height: 96px !important;
  margin: 0 auto 8px;
  filter: drop-shadow(0 5px 6px #a67b2233);
}
.tnz-medal svg {
  width: 100%;
  height: 100%;
}
.tnz-badge {
  background: linear-gradient(145deg, #fffefa, #f1f8f4);
  border-color: #c7d9cb;
  padding: 22px 12px;
}
.tnz-badge:not(.tnz-off) {
  box-shadow:
    inset 0 0 0 3px #fff,
    0 4px 18px #0b4f3e0c;
}
.tnz-off .tnz-medal {
  filter: grayscale(1);
  opacity: 0.4;
}
.tnz-bdesc {
  line-height: 1.9 !important;
}
.tnz-tier-3 {
  filter: drop-shadow(0 0 9px #d6ae4466);
}
.tnz-award-wrap {
  position: fixed;
  inset: 0;
  background: #07382bc9;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  direction: rtl;
}
.tnz-award {
  position: relative;
  text-align: center;
  width: min(390px, 100%);
  background: radial-gradient(ellipse at top, #fff2bd, #fffefa 65%);
  border: 1px solid #d9bc65;
  border-radius: 24px;
  padding: 30px 22px;
  box-shadow: 0 20px 80px #0005;
}
.tnz-award-x {
  position: absolute;
  left: 12px;
  top: 12px;
  border: 0;
  background: #15584410;
  color: #155844;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
}
.tnz-award .tnz-h {
  font-size: 25px;
}
.tnz-feedback {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #b4cdc4;
  border-radius: 14px;
  padding: 14px;
  font: inherit;
  resize: vertical;
  background: #fff;
  margin: 10px 0 16px;
}
.tnz-level-summary {
  border: 1px solid #bdcfc4;
  border-radius: 16px;
  background: linear-gradient(120deg, #fffdf0, #eff7f2);
  padding: 16px;
  margin: 16px 0;
  color: #145746;
  font-family: Tajawal;
}
.tnz-level-bar {
  height: 7px;
  border-radius: 10px;
  background: #dae6dc;
  margin-top: 10px;
  overflow: hidden;
}
.tnz-level-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #b99a39, #0d7059);
}

/* ===== ملفي وإنجازاتي (profile) ===== */
.tt-profile-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 300px;
  margin: 10px auto 0;
  padding: 6px 10px;
  border: none;
  border-radius: 12px;
  background: #f8f5ef;
  color: #0b4f3e;
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  text-align: right;
  box-shadow:
    0 2px 0 #8ee3da,
    0 6px 14px -8px rgba(0, 0, 0, 0.35);
  position: relative;
  z-index: 2;
}
.tt-profile-btn:active {
  transform: translateY(1px);
}
.tt-profile-ic {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0f766e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.tt-profile-tx {
  flex: 1;
  display: block;
}
.tt-profile-tx small {
  display: block;
  font-weight: 500;
  font-size: 10px;
  color: #5e6b62;
  margin-top: 1px;
}
.tt-profile-ar {
  font-size: 18px;
  color: #0f766e;
}
.tnz-theme {
  font-size: 17px;
  margin-inline-end: 0;
}
.tnz-idrow {
  display: flex;
  gap: 12px;
  align-items: center;
}
.tnz-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #14b8a6;
  background: #fff;
  flex-shrink: 0;
}
.tnz-idtx {
  flex: 1;
  min-width: 0;
}
.tnz-idname {
  font-size: 18px;
  font-weight: 800;
  color: #0b4f3e;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tnz-pen {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #0f766e;
  background: transparent;
  border: 1.5px solid #8ee3da;
  border-radius: 8px;
  padding: 2px 8px;
  cursor: pointer;
}
.tnz-signp {
  margin: 12px 0 8px;
  font-size: 14px;
}
.tnz-authrow {
  display: flex;
  gap: 8px;
}
.tnz-authrow .tnz-btn {
  flex: 1;
}
.tnz-outbtn {
  margin-top: 10px;
}
.tnz-sec {
  font-size: 14px;
  font-weight: 800;
  color: #0b4f3e;
  margin: 16px 4px 2px;
}
.tnz-entries {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.tnz-entry {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  font-family: inherit;
  text-align: right;
  background: #fff;
  border: 1.5px solid #14b8a6;
  border-radius: 14px;
  padding: 11px 12px;
  cursor: pointer;
  color: #2e2620;
  box-shadow: 0 2px 0 #cdeee9;
  min-height: 54px;
}
.tnz-entry:active {
  transform: translateY(1px);
}
.tnz-entry-ic {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #e3f4f1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
.tnz-entry-tx {
  flex: 1;
  font-size: 15px;
  font-weight: 800;
  color: #0b4f3e;
}
.tnz-entry-tx small {
  display: block;
  font-weight: 500;
  font-size: 12px;
  color: #5e6b62;
  margin-top: 2px;
}
.tnz-entry-ar {
  font-size: 24px;
  font-weight: 700;
  color: #0f766e;
}
.tnz-stage {
  margin: 10px 0;
}
.tnz-stage-t {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: #0b4f3e;
  margin-bottom: 4px;
}
.tnz-back {
  margin-bottom: 10px;
}
.tnz-cert .tnz-btn {
  margin-top: 8px;
}
.tnz-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(7, 56, 43, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.tnz-modal {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  border: 1.5px solid #b7dccf;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  font-family: Tajawal, "Segoe UI", sans-serif;
  direction: rtl;
  color: #2e2620;
}
.tnz-input {
  width: 100%;
  margin-top: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1.5px solid #0b4f3e;
  background: #fff;
  color: #2e2620;
  font-family: inherit;
  font-size: 16px;
}
.tnz-err {
  color: #9e3b2b;
  font-size: 12px;
  min-height: 16px;
  margin: 6px 0 0;
}
.tnz-modal-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.tnz-modal-row .tnz-btn {
  flex: 1;
}

/* ===== الوضع الداكن (data-theme=dark) ===== */
html[data-theme="dark"] {
  color-scheme: dark;
  background: #0b1512;
}
html[data-theme="dark"] body {
  background: #0b1512;
  color: #e6efe9;
}
html[data-theme="dark"] .qq-home,
html[data-theme="dark"] .qq-quiz,
html[data-theme="dark"] .qq-done,
html[data-theme="dark"] .tt-stage-card,
html[data-theme="dark"] .qq-hero,
html[data-theme="dark"] .qq-credit {
  background: #13231e;
  border-color: #2f5247;
  box-shadow: none;
  outline-color: #1f3a31;
}
html[data-theme="dark"] .tt-stage-card.is-locked {
  border-color: #2b4a40;
}
html[data-theme="dark"] .qq-lead,
html[data-theme="dark"] .tt-stage-sub,
html[data-theme="dark"] .qq-hero-sub,
html[data-theme="dark"] .qq-seg-title,
html[data-theme="dark"] .tt-gate-item {
  color: #b6cbc1;
}
html[data-theme="dark"] .qq-label,
html[data-theme="dark"] .qq-loading,
html[data-theme="dark"] .qq-meta,
html[data-theme="dark"] .tt-stage-name,
html[data-theme="dark"] .tt-progress-num,
html[data-theme="dark"] .qq-surah,
html[data-theme="dark"] .qq-hero-title,
html[data-theme="dark"] .tt-progress-name,
html[data-theme="dark"] .tt-fix-ref,
html[data-theme="dark"] .tt-gate-title {
  color: #cfeee6;
}
html[data-theme="dark"] .qq-note,
html[data-theme="dark"] .qq-hint,
html[data-theme="dark"] .qq-or,
html[data-theme="dark"] .qq-opt-num {
  color: #9db5ab;
}
html[data-theme="dark"] .tt-page-title,
html[data-theme="dark"] .tt-foot,
html[data-theme="dark"] .tt-foot-link,
html[data-theme="dark"] .tt-stage-timer,
html[data-theme="dark"] .qq-aya-num,
html[data-theme="dark"] .qq-surah:before,
html[data-theme="dark"] .qq-surah:after,
html[data-theme="dark"] .qq-replay {
  color: #5fd6c5;
}
html[data-theme="dark"] .qq-select,
html[data-theme="dark"] .tt-name-input,
html[data-theme="dark"] .qq-input {
  background: #0f1e1a;
  border-color: #3a6559;
  color: #e6efe9;
}
html[data-theme="dark"] .qq-ayah {
  background: #0f1e1a;
  border-color: #2f5247;
  box-shadow:
    inset 0 0 0 3px #0f1e1a,
    inset 0 0 0 4px #2f5247;
  color: #f3efe3;
}
html[data-theme="dark"] .qq-band {
  background: linear-gradient(180deg, #17352d, #12302a);
  border-color: #2fa597;
}
html[data-theme="dark"] .qq-w.is-active {
  background: #1f4a3f;
}
html[data-theme="dark"] .qq-w.is-answer {
  background: #1c4a38;
  color: #a8f0cf;
}
html[data-theme="dark"] .qq-opt {
  background: #162a24;
  border-color: #3a6559;
  color: #e6efe9;
}
html[data-theme="dark"] .qq-opt:not(:disabled):hover,
html[data-theme="dark"] .qq-opt:not(:disabled):focus-visible {
  background: #1d3a32;
  border-color: #5fd6c5;
}
html[data-theme="dark"] .qq-opt.is-correct {
  background: #14412f;
  border-color: #3fbf8a;
  color: #c7f7dd;
}
html[data-theme="dark"] .qq-opt.is-wrong {
  background: #4a1f1a;
  border-color: #e0715f;
  color: #ffd2c9;
}
html[data-theme="dark"] .qq-error,
html[data-theme="dark"] .qq-verdict.is-bad,
html[data-theme="dark"] .tt-verdict.is-fail,
html[data-theme="dark"] .tt-fix-word {
  color: #ff9d8c;
}
html[data-theme="dark"] .qq-verdict.is-right,
html[data-theme="dark"] .qq-score,
html[data-theme="dark"] .tt-verdict.is-pass {
  color: #7fe3b7;
}
html[data-theme="dark"] .qq-level-btn,
html[data-theme="dark"] .tt-lvl,
html[data-theme="dark"] .tt-chip {
  background: #162a24;
  border-color: #2f5247;
  color: #e6efe9;
}
html[data-theme="dark"] .qq-level-btn.is-active {
  background: #1d3a32;
  border-color: #5fd6c5;
}
html[data-theme="dark"] .tt-lvl.is-locked,
html[data-theme="dark"] .qq-level-btn.is-locked {
  background: repeating-linear-gradient(45deg, #14211d, #14211d 6px, #101b17 6px 12px);
  color: #6f8780;
}
html[data-theme="dark"] .tt-chip.is-on {
  background: #0f766e;
  border-color: #14b8a6;
  color: #fff;
}
html[data-theme="dark"] .qq-seg,
html[data-theme="dark"] .tt-scope,
html[data-theme="dark"] .tt-gate,
html[data-theme="dark"] .tt-locked-note,
html[data-theme="dark"] .tt-resume,
html[data-theme="dark"] .tt-fix-item,
html[data-theme="dark"] .qq-muta-reveal {
  background: #162a24;
  border-color: #2f5247;
  color: #cfeee6;
}
html[data-theme="dark"] .qq-seg-text,
html[data-theme="dark"] .qq-muta-seg {
  color: #f3efe3;
}
html[data-theme="dark"] .qq-muta-hl {
  background: #6a5a1a;
  color: #fff6d0;
}
html[data-theme="dark"] .tt-fb {
  background: linear-gradient(150deg, #14352c, #10302a);
  border-color: #2fa597;
  box-shadow: none;
}
html[data-theme="dark"] .tt-fb-phrase {
  color: #cfeee6;
}
html[data-theme="dark"] .tt-progress {
  border-top-color: #2f5247;
}
html[data-theme="dark"] .tt-progress-bar,
html[data-theme="dark"] .tnz-level-bar {
  background: #223a33;
}
html[data-theme="dark"] .file-button[data-variant="secondary"],
html[data-theme="dark"] .file-button.qq-exit,
html[data-theme="dark"] .file-button.tt-fix-btn {
  background: #1b332c;
  color: #cfeee6;
  border-color: #3a6559;
}
html[data-theme="dark"] .tt-profile-btn {
  background: #13231e;
  color: #cfeee6;
  box-shadow:
    0 2px 0 #1f6a60,
    0 6px 14px -8px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .tt-profile-tx small {
  color: #9db5ab;
}
html[data-theme="dark"] .tt-profile-ar {
  color: #5fd6c5;
}
/* مساحة تمتين */
html[data-theme="dark"] #tnz-overlay {
  background: #0b1512;
  color: #e6efe9;
}
html[data-theme="dark"] .tnz-tabs {
  background: #101d19;
}
html[data-theme="dark"] .tnz-tab {
  background: #13231e;
  border-color: #2f5247;
  color: #cfeee6;
}
html[data-theme="dark"] .tnz-tab.tnz-on {
  background: #0f766e;
  border-color: #14b8a6;
  color: #fff;
}
html[data-theme="dark"] .tnz-card,
html[data-theme="dark"] .tnz-rev-item,
html[data-theme="dark"] .tnz-feedback,
html[data-theme="dark"] .tnz-modal {
  background: #13231e;
  border-color: #2f5247;
  box-shadow: none;
  color: #e6efe9;
}
html[data-theme="dark"] .tnz-note,
html[data-theme="dark"] .tnz-rev-ref small,
html[data-theme="dark"] .tnz-plot-n,
html[data-theme="dark"] .tnz-badge .tnz-bdesc,
html[data-theme="dark"] .tnz-entry-tx small,
html[data-theme="dark"] .tnz-map-legprog {
  color: #9db5ab;
}
html[data-theme="dark"] .tnz-h,
html[data-theme="dark"] .tnz-idname,
html[data-theme="dark"] .tnz-sec,
html[data-theme="dark"] .tnz-stage-t,
html[data-theme="dark"] .tnz-entry-tx,
html[data-theme="dark"] .tnz-badge .tnz-bname,
html[data-theme="dark"] .tnz-plot-day,
html[data-theme="dark"] .tnz-verdict.tnz-vr {
  color: #cfeee6;
}
html[data-theme="dark"] .tnz-rev-ref {
  color: #e6efe9;
}
html[data-theme="dark"] .tnz-btn.tnz-ghost,
html[data-theme="dark"] .tnz-pen {
  color: #5fd6c5;
  border-color: #2fa597;
}
html[data-theme="dark"] .tnz-btn.tnz-ghost:hover {
  background: #17352d;
}
html[data-theme="dark"] .tnz-entry {
  background: #13231e;
  border-color: #2fa597;
  box-shadow: 0 2px 0 #1a4a42;
  color: #e6efe9;
}
html[data-theme="dark"] .tnz-entry-ic {
  background: #17352d;
}
html[data-theme="dark"] .tnz-entry-ar {
  color: #5fd6c5;
}
html[data-theme="dark"] .tnz-avatar {
  background: #0f1e1a;
  border-color: #2fa597;
}
html[data-theme="dark"] .tnz-input {
  background: #0f1e1a;
  border-color: #3a6559;
  color: #e6efe9;
}
html[data-theme="dark"] .tnz-err {
  color: #ff9d8c;
}
html[data-theme="dark"] .tnz-plot {
  background: linear-gradient(180deg, #1c2a22, #17241d);
  border-color: #3b4a35;
}
html[data-theme="dark"] .tnz-plot.tnz-today {
  border-color: #c9a227;
}
html[data-theme="dark"] .tnz-streak {
  background: #1d2a22;
  color: #e6c65a;
}
html[data-theme="dark"] .tnz-badge {
  background: linear-gradient(145deg, #16291f, #12231d);
  border-color: #2f5247;
}
html[data-theme="dark"] .tnz-badge:not(.tnz-off) {
  box-shadow: inset 0 0 0 3px #0f1e1a;
}
html[data-theme="dark"] .tnz-badge.tnz-off .tnz-bname {
  color: #7b8f87;
}
html[data-theme="dark"] .tnz-q {
  background: #162a24;
  border-color: #2f5247;
  color: #e6efe9;
}
html[data-theme="dark"] .tnz-opt {
  background: #162a24;
  border-color: #2fa597;
  color: #cfeee6;
}
html[data-theme="dark"] .tnz-opt:hover {
  background: #1d3a32;
}
html[data-theme="dark"] .tnz-opt.tnz-right {
  background: #0f766e;
  color: #fff;
  border-color: #14b8a6;
}
html[data-theme="dark"] .tnz-opt.tnz-wrong {
  background: #4a1f1a;
  border-color: #e0715f;
  color: #ffd2c9;
}
html[data-theme="dark"] .tnz-diff {
  border-color: #2f5247;
}
html[data-theme="dark"] .tnz-diff-row {
  background: #13231e;
}
html[data-theme="dark"] .tnz-diff-row + .tnz-diff-row {
  background: #162a24;
  border-top-color: #2f5247;
}
html[data-theme="dark"] .tnz-diff-txt {
  color: #f3efe3;
}
html[data-theme="dark"] .tnz-diff-src {
  color: #5fd6c5;
}
html[data-theme="dark"] .tnz-verdict.tnz-vw {
  color: #ff9d8c;
}
html[data-theme="dark"] .tnz-level-summary {
  background: linear-gradient(120deg, #17301f, #13231e);
  border-color: #2f5247;
  color: #cfeee6;
}
html[data-theme="dark"] .tnz-map-canvas {
  background: linear-gradient(180deg, #1c2a22, #17241d);
  border-color: #3b4a35;
}
html[data-theme="dark"] .tnz-modal-wrap {
  background: rgba(0, 0, 0, 0.7);
}
.tnz-avatar-btn {
  position: relative;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  width: 68px;
  height: 68px;
}
.tnz-avedit {
  position: absolute;
  bottom: -2px;
  left: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0f766e;
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
.tnz-avmodal {
  max-height: 88vh;
  overflow-y: auto;
}
.tnz-avgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.tnz-avopt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 2px solid #b7dccf;
  border-radius: 14px;
  background: #fff;
  padding: 8px 4px;
  cursor: pointer;
  font-family: inherit;
  color: #0b4f3e;
  font-size: 12px;
  font-weight: 700;
}
.tnz-avopt img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}
.tnz-avsel {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.25);
}
.tnz-avlock img {
  filter: grayscale(1) brightness(0.7);
  opacity: 0.7;
}
.tnz-avlock {
  color: #6b7f7a;
}
.tnz-avlk {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 14px;
}
html[data-theme="dark"] .tnz-avopt {
  background: #162a24;
  border-color: #2f5247;
  color: #cfeee6;
}
html[data-theme="dark"] .tnz-avsel {
  border-color: #5fd6c5;
  box-shadow: 0 0 0 3px rgba(95, 214, 197, 0.25);
}
html[data-theme="dark"] .tnz-avedit {
  border-color: #13231e;
}
html[data-theme="dark"] .tnz-award .tnz-h {
  color: #0b4f3e;
}
html[data-theme="dark"] .tnz-award .tnz-note {
  color: #5e6b62;
}
body:has(.tt-profile-btn) #tnz-fab {
  display: none;
}
.tnz-entry-ic {
  color: #0f766e;
}
html[data-theme="dark"] .tnz-entry-ic {
  color: #5fd0c3;
}
.tnz-swap {
  margin: 12px 0 8px;
}
.tnz-swap .tnz-pen {
  margin-inline-start: 4px;
}

.tt-profile-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  background: #0f766e;
  flex-shrink: 0;
}

/* انتقالات ناعمة — تدرج ألوان السمة وحركة أيقونة القمر/الشمس وظهور أقسام المساحة */
/* removed: per-element color transitions replaced by a single view-transition reveal */
@keyframes tnz-icspin {
  0% {
    transform: rotate(-100deg) scale(0.5);
    opacity: 0.3;
  }
  100% {
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}
.tnz-theme.tnz-ic-anim {
  animation: tnz-icspin 0.45s ease;
}
.tnz-body.tnz-swap {
  animation: tnz-fadein 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
  html body,
  html body *:not(script):not(style) {
    transition-duration: 0.01s !important;
  }
  .tnz-theme.tnz-ic-anim,
  .tnz-body.tnz-swap {
    animation: none !important;
  }
}
.tt-profile-ic--pending {
  opacity: 0.5;
}

/* تبديل الثيم: كشف دائري واحد متصل من زر القمر/الشمس (View Transitions) */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) {
  z-index: 1;
}
::view-transition-new(root) {
  z-index: 2147483646;
}

.tnz-entry-dot {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #c9a227;
  border: 2px solid #f8f5ef;
  display: none;
}
.tnz-entry.tnz-has-dot .tnz-entry-dot {
  display: block;
}
html[data-theme="dark"] .tnz-entry-dot {
  border-color: #13231e;
}