/* =====================================================================
   لاله ۳ — رنگ‌بندی زنده: هر شاخص و هر کاشی رنگ خودش را دارد
   ===================================================================== */
:root {
  --k1: #f7c04a; --k2: #22d3a0; --k3: #38bdf8; --k4: #a78bfa;
  --k5: #f472b6; --k6: #fb923c; --k7: #f87171; --k8: #a3e635;
  --w-bg: #070d12; --w-bg-2: #0d1a22;
  --w-tile: #0f1a20; --w-tile-2: #15232b;
}
:root[data-theme='light'] {
  --k1: #b7791f; --k2: #059669; --k3: #0284c7; --k4: #7c3aed;
  --k5: #db2777; --k6: #ea580c; --k7: #dc2626; --k8: #4d7c0f;
  --w-bg: #f1f2ee; --w-bg-2: #e9eae5;
  --w-tile: #ffffff; --w-tile-2: #f8f8f5;
}

/* پس‌زمینه شفقی */
.wx-app {
  background:
    radial-gradient(50% 45% at 8% 0%, color-mix(in srgb, var(--k3) 13%, transparent), transparent 70%),
    radial-gradient(45% 50% at 95% 100%, color-mix(in srgb, var(--k4) 12%, transparent), transparent 70%),
    radial-gradient(40% 40% at 60% 35%, color-mix(in srgb, var(--k2) 6%, transparent), transparent 70%),
    radial-gradient(120% 90% at 85% -20%, var(--w-bg-2), var(--w-bg) 62%);
}

/* ---------- نوار شاخص رنگی ---------- */
.wx-kpi { gap: 8px; }
.kchip {
  --ac: var(--w-gold);
  display: flex; flex-direction: column; justify-content: space-between; gap: 4px; align-items: stretch;
  padding: 8px 11px 7px; border-radius: 14px; position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--ac) 45%, transparent);
  background:
    radial-gradient(130% 120% at 100% 0%, color-mix(in srgb, var(--ac) 26%, transparent), transparent 62%),
    linear-gradient(165deg, color-mix(in srgb, var(--ac) 9%, var(--w-tile)), var(--w-tile) 70%);
  box-shadow: 0 10px 26px -18px var(--ac), inset 0 1px 0 color-mix(in srgb, var(--ac) 22%, transparent);
}
.kchip::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--ac) 25%, color-mix(in srgb, var(--ac) 50%, #fff) 50%, var(--ac) 75%, transparent); z-index: -1; }
.kchip:hover { border-color: var(--ac); transform: translateY(-2px); box-shadow: 0 0 0 1px var(--ac), 0 14px 30px -14px var(--ac); }
.kc-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.kc-ic { width: 28px; height: 28px; border-radius: 9px; flex: none; color: #0a1114; background: linear-gradient(135deg, color-mix(in srgb, var(--ac) 55%, #fff), var(--ac)); box-shadow: 0 4px 12px -4px var(--ac); }
.kc-ic svg { width: 16px; height: 16px; }
.kc-names { display: grid; min-width: 0; line-height: 1.3; }
.kc-lab { font-size: clamp(10px, 0.64vw, 12.5px); font-weight: 700; color: var(--w-ink); line-height: 1.45; }
.kc-en { font-size: clamp(8px, 0.5vw, 9.5px); font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; color: var(--ac); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; font-family: 'Segoe UI', Tahoma, sans-serif; }
.kc-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; min-width: 0; }
.kc-val { font-size: clamp(17px, 2.5vh, 25px); color: var(--w-ink); text-shadow: 0 0 18px color-mix(in srgb, var(--ac) 45%, transparent); }
.kc-val small { font-size: 0.48em; }
.kc-end { display: grid; justify-items: end; gap: 2px; }

/* ---------- کاشی‌ها با لبه رنگی ---------- */
.wtile {
  --ac: var(--k2);
  border: 1px solid color-mix(in srgb, var(--ac) 32%, transparent);
  background:
    radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--ac) 11%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--ac) 4%, var(--w-tile)), var(--w-tile));
}
.wtile::before { content: ''; position: absolute; inset-inline: 14px; top: 0; height: 2px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, transparent, var(--ac), transparent); opacity: 0.9; pointer-events: none; }
.wrow:nth-child(odd) > .wtile:nth-child(1) { --ac: var(--k2); }
.wrow:nth-child(odd) > .wtile:nth-child(2) { --ac: var(--k3); }
.wrow:nth-child(odd) > .wtile:nth-child(3) { --ac: var(--k4); }
.wrow:nth-child(odd) > .wtile:nth-child(4) { --ac: var(--k1); }
.wrow:nth-child(even) > .wtile:nth-child(1) { --ac: var(--k1); }
.wrow:nth-child(even) > .wtile:nth-child(2) { --ac: var(--k5); }
.wrow:nth-child(even) > .wtile:nth-child(3) { --ac: var(--k6); }
.wrow:nth-child(even) > .wtile:nth-child(4) { --ac: var(--k3); }
.wtile[data-deep]:hover { border-color: var(--ac); box-shadow: 0 0 0 1px var(--ac), 0 16px 34px -20px var(--ac); }
.wtile[data-deep]:focus-visible { outline-color: var(--ac); }
.wt-ic { background: color-mix(in srgb, var(--ac) 20%, transparent); color: var(--ac); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 35%, transparent); }
.wt-more { color: var(--ac); }
.wt-val { color: color-mix(in srgb, var(--ac) 35%, var(--w-ink)); }

/* ---------- صفحه بارگذاری با تصویر هتل ---------- */
.wboot { background: radial-gradient(55% 60% at 50% 55%, #0d1b1e 0%, #091316 55%, #050b0d 100%); }
.wboot-in { height: 100dvh; width: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 0; padding: 4vh 16px 5vh; }
.wb-head { display: grid; justify-items: center; gap: 6px; animation: wbUp 0.7s ease-out both; }
.wb-head img { height: clamp(64px, 10vh, 100px); filter: drop-shadow(0 6px 22px rgba(247, 192, 74, 0.45)); }
.wb-head h1 { font-size: clamp(20px, 3.2vh, 30px); font-weight: 800; color: #fff; letter-spacing: -0.3px; }
.wb-head .wb-en { font: 600 clamp(10px, 1.4vh, 13px) 'Segoe UI', Tahoma, sans-serif; letter-spacing: 4px; color: #f0d3a0; text-transform: uppercase; }
.wb-head .wb-sub { font-size: 13px; color: #9db1ad; }
.wb-photo { height: 100%; max-height: 62vh; min-height: 0; aspect-ratio: 816 / 780; position: relative; isolation: isolate; animation: wbFade 1.1s ease-out 0.15s both; filter: drop-shadow(0 0 40px rgba(247, 192, 74, 0.12)); }
.wb-photo img { width: 100%; height: 100%; object-fit: contain; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(180deg, transparent, #000 18%, #000 72%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(180deg, transparent, #000 18%, #000 72%, transparent); mask-composite: intersect; }
.wb-foot { display: grid; justify-items: center; gap: 10px; animation: wbUp 0.7s ease-out 0.3s both; }
.wboot-bar { width: min(320px, 70vw); height: 4px; }
.wboot-bar i { width: 100%; animation: wbFill 2.2s cubic-bezier(0.4, 0, 0.2, 1) both; transform-origin: right; background: linear-gradient(90deg, var(--k2), var(--k1), #f0d3a0); }
.wb-foot p { font-size: 12.5px; color: #9db1ad; }
@keyframes wbFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wbUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes wbFade { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }

/* صفحه‌های کوچک‌تر: عنوان شاخص در دو خط، بدون بریدگی */
@media (max-width: 1600px) {
  .kc-lab { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
  .kc-en { white-space: normal; letter-spacing: 0.3px; line-height: 1.3; }
  .kc-top { align-items: flex-start; }
}