/* bot-panel bridge («بخش») + منو hub — styles for this area only.
   Animations touch transform/opacity only; no backdrop-filter; shadows are static. */

/* ------------------------------------------------------------------ shared head icon plate */
.pnl-ic {
  width: 50px; height: 50px; flex: 0 0 auto; border-radius: 16px; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 28%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 70%), linear-gradient(180deg, rgb(var(--sk-2a3b5e, 42, 59, 94)), rgb(var(--sk-141e33, 20, 30, 51)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -3px 0 rgba(var(--sk-000000, 0, 0, 0), 0.3), 0 5px 12px rgba(var(--sk-000000, 0, 0, 0), 0.4);
}
.scr-head .pnl-ic .ic { width: 36px; height: 36px; }

/* ------------------------------------------------------------------ panel page */
.pnl { position: relative; }
.pnl-progress {
  position: sticky; top: -16px; z-index: 3; height: 3px; margin: -16px -14px 13px; overflow: hidden;
  opacity: 0; transition: opacity 0.2s ease; pointer-events: none;
}
.pnl-progress i {
  display: block; width: 40%; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-hi), transparent);
  transform: translateX(160%);
}
.pnl.loading .pnl-progress { opacity: 1; }
.pnl.loading .pnl-progress i { animation: pnlSweep 0.9s linear infinite; }
@keyframes pnlSweep { from { transform: translateX(160%); } to { transform: translateX(-260%); } }
.pnl-page { transition: opacity 0.22s ease; }
.pnl.loading .pnl-page { opacity: 0.55; }
.pnl.loading .pnl-btns, .pnl.loading .pnl-input { pointer-events: none; }
.pnl-page.in-fwd { animation: pnlInF 0.38s var(--ease-out) both; }
.pnl-page.in-back { animation: pnlInB 0.38s var(--ease-out) both; }
@keyframes pnlInF { from { opacity: 0; transform: translateX(-22px); } }
@keyframes pnlInB { from { opacity: 0; transform: translateX(22px); } }

.pnl-head { margin-bottom: 14px; }
.pnl-head h2 { font-size: 20px; overflow-wrap: anywhere; }

.pnl-card { padding: 16px 16px 15px; overflow: hidden; }
.pnl-img {
  display: block; width: calc(100% + 32px); max-width: none; margin: -16px -16px 14px; height: auto;
  border-bottom: 1px solid rgba(var(--sk-ffd68c, 255, 214, 140), 0.18); background: rgb(var(--sk-0a1322, 10, 19, 34));
}
.pnl-body {
  font-size: 14.5px; line-height: 1.95; color: var(--text); overflow-wrap: anywhere;
  -webkit-user-select: text; user-select: text;
}
.pnl-body p { margin: 0 0 10px; }
.pnl-body p:last-child { margin-bottom: 0; }
.pnl-body b, .pnl-body strong { font-weight: 800; color: #fff; }
.pnl-body i, .pnl-body em { color: var(--text-2); }
.pnl-body u { text-decoration-color: rgba(var(--sk-f5c152, 245, 193, 82), 0.6); text-underline-offset: 3px; }
.pnl-body s { color: var(--text-3); }
.pnl-body code {
  font-family: inherit; font-size: 13px; padding: 1px 7px; border-radius: 7px; direction: ltr; unicode-bidi: isolate;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--gold-hi);
}
.pnl-body pre {
  margin: 10px 0; padding: 10px 12px; border-radius: 12px; white-space: pre-wrap; font-family: inherit; font-size: 13px;
  line-height: 1.8; background: rgba(var(--sk-000000, 0, 0, 0), 0.32); box-shadow: inset 0 1px 4px rgba(var(--sk-000000, 0, 0, 0), 0.5);
}
.pnl-body pre code { padding: 0; border: 0; background: none; color: inherit; direction: inherit; }
.pnl-body blockquote {
  margin: 10px 0; padding: 6px 12px 6px 4px; border-right: 3px solid var(--gold); border-radius: 4px;
  background: rgba(var(--sk-f5c152, 245, 193, 82), 0.06); color: var(--text-2);
}
.pnl-body hr { border: 0; height: 1px; margin: 12px 0; background: linear-gradient(90deg, transparent, rgba(var(--sk-ffd68c, 255, 214, 140), 0.3), transparent); }
.pnl-body .tg-spoiler { border-radius: 5px; color: transparent; background: rgba(255, 255, 255, 0.22); cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease; }
.pnl-body .tg-spoiler.on { color: inherit; background: rgba(255, 255, 255, 0.06); }
.pnl-body details { margin: 4px 0; }
.pnl-body summary {
  cursor: pointer; list-style: none; font-weight: 800; color: var(--gold-hi); margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.pnl-body summary::-webkit-details-marker { display: none; }
.pnl-body summary::before { content: ""; width: 7px; height: 7px; border: solid var(--gold); border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -3px; transition: transform 0.2s ease; }
.pnl-body details:not([open]) summary::before { transform: rotate(135deg); margin-top: 0; }
.ptable-wrap { overflow-x: auto; margin: 10px -4px 4px; padding: 0 4px 2px; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
.ptable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 1.6; }
.ptable th {
  padding: 7px 9px; text-align: right; font-weight: 800; font-size: 12px; color: rgb(var(--sk-3b2004, 59, 32, 4)); white-space: nowrap;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
}
.ptable th:first-child { border-radius: 0 10px 10px 0; }
.ptable th:last-child { border-radius: 10px 0 0 10px; }
.ptable td { padding: 7px 9px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); vertical-align: top; }
.ptable tr:nth-child(odd) td { background: rgba(255, 255, 255, 0.025); }
.ptable tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------------ input */
.pnl-input { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.pnl-input label { font-size: 13px; font-weight: 800; color: var(--gold-hi); }
.pnl-field { display: flex; gap: 8px; align-items: stretch; }
.pnl-field input {
  flex: 1 1 auto; min-width: 0; height: 50px; padding: 0 14px; border-radius: 14px; font: 700 16px "Vazirmatn", Tahoma, sans-serif;
  color: var(--text); background: rgba(var(--sk-000000, 0, 0, 0), 0.38); border: 1.5px solid rgba(var(--sk-ffd68c, 255, 214, 140), 0.25);
  box-shadow: inset 0 2px 6px rgba(var(--sk-000000, 0, 0, 0), 0.5); outline: none; -webkit-user-select: text; user-select: text;
  transition: border-color 0.2s ease;
}
.pnl-field input:focus { border-color: var(--gold); }
.pnl-field .btn { flex: 0 0 auto; min-height: 50px; }

/* ------------------------------------------------------------------ buttons */
.pnl-btns { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }
.pnl-row { display: flex; gap: 10px; }
.pnl-row > .btn {
  flex: 1 1 0; min-width: 0; min-height: 50px; padding: 8px 12px; white-space: normal; line-height: 1.4;
  font-size: 14.5px; text-align: center;
}
.pnl-row.n3 > .btn, .pnl-row.n4 > .btn { font-size: 13px; padding: 8px 6px; }
.pnl-row > .btn .ic { flex: 0 0 auto; }
/* the bot's "primary" is blue (the app's own .btn.primary stays gold elsewhere) */
.btn.pbtn.primary { --f1: rgb(var(--sk-86cbff, 134, 203, 255)); --f2: rgb(var(--sk-2f7fe4, 47, 127, 228)); --edge: rgb(var(--sk-133f86, 19, 63, 134)); --fg: #fff; text-shadow: 0 1px 1px rgba(var(--sk-000000, 0, 0, 0), 0.35); }
.btn.pbtn.primary.busy::after { border-color: rgba(255, 255, 255, 0.35); border-top-color: #fff; }
.pnl-nav-row { display: flex; gap: 10px; margin-top: 20px; }
.pnl-nav-row .btn { flex: 1 1 0; }
.pnl-empty { text-align: center; }
.pnl-empty .ic-lg { margin: 4px auto 6px; display: block; }
.skel.skel-btn { height: 50px; border-radius: 14px; margin: 0; }

/* ------------------------------------------------------------------ hub («منو») */
.hub-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.hub-hero .medal { width: 58px; height: 58px; font-size: 30px; }
.hub-hero .sub { margin-top: 2px; line-height: 1.6; }
.hub-onb { margin-bottom: 4px; }
.hub-group .sec-title .ic { width: 24px; height: 24px; }
.hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }

.mt {
  --tint: rgba(var(--sk-f5c152, 245, 193, 82), 0.34); --edge: rgb(var(--sk-0a111f, 10, 17, 31));
  position: relative; display: block; height: 108px; padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-user-select: none; user-select: none; isolation: isolate;
}
/* the slab under the face: static, so pressing moves only the face */
.mt::before {
  content: ""; position: absolute; inset: 7px 0 0; border-radius: 19px; z-index: -1;
  background: var(--edge); box-shadow: 0 10px 18px rgba(var(--sk-000000, 0, 0, 0), 0.42);
}
.mt-face {
  position: absolute; inset: 0 0 7px; border-radius: 19px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 8px 6px 6px;
  background:
    radial-gradient(110% 85% at 50% -8%, var(--tint), transparent 68%),
    linear-gradient(180deg, rgb(var(--sk-2a3a5c, 42, 58, 92)), rgb(var(--sk-162139, 22, 33, 57)) 82%);
  border: 1px solid rgba(255, 255, 255, 0.07); border-top-color: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 0 rgba(var(--sk-000000, 0, 0, 0), 0.28);
  transition: transform 0.08s ease;
}
.mt-face::after {
  content: ""; position: absolute; left: 8px; right: 8px; top: 3px; height: 36%; border-radius: 16px 16px 30px 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); pointer-events: none;
}
.mt:active .mt-face { transform: translateY(6px); }
.mt-ic { display: grid; place-items: center; }
.mt-ic .ic { width: 44px; height: 44px; filter: drop-shadow(0 3px 3px rgba(var(--sk-000000, 0, 0, 0), 0.35)); }
.mt-l {
  font-size: 12.5px; font-weight: 800; line-height: 1.35; color: var(--text); text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%;
}
.mt.native .mt-face { border-color: rgba(var(--sk-ffd68c, 255, 214, 140), 0.35); border-top-color: rgba(var(--sk-ffecb4, 255, 236, 180), 0.6); }
.mt-star {
  position: absolute; top: 7px; left: 8px; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgb(var(--sk-fff6c8, 255, 246, 200)), var(--gold) 60%, var(--gold-lo));
  box-shadow: 0 0 8px rgba(var(--sk-f5c152, 245, 193, 82), 0.7);
}
.mt:active .mt-star { transform: translateY(6px); }
.mt.mt-skel { pointer-events: none; }
.mt.mt-skel::after {
  content: ""; position: absolute; inset: 0 0 7px; border-radius: 19px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  background-size: 200% 100%; animation: skel 1.1s linear infinite;
}
.g-nation .mt { --tint: rgba(var(--sk-f5c152, 245, 193, 82), 0.36); }
.g-army .mt { --tint: rgba(255, 93, 82, 0.36); }
.g-diplomacy .mt { --tint: rgba(var(--sk-4ea9ff, 78, 169, 255), 0.4); }
.g-world .mt { --tint: rgba(61, 220, 125, 0.32); }
.g-settings .mt { --tint: rgba(172, 124, 255, 0.36); }

@media (max-width: 340px) {
  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 560px) {
  .hub-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .pnl-page.in-fwd, .pnl-page.in-back { animation: none; }
  .mt-face, .mt-star { transition: none; }
}