/* ============================================================
   takk.pics — Hönnunarkerfi
   ============================================================ */

:root {
  --bg-deep:   #0a0e1a;
  --bg-panel:  #0f1420;
  --bg-card:   #121826;
  --bg-hover:  #1a2233;
  --line:      #1f2937;
  --line-soft: #16202f;
  --white:     #ffffff;
  --white-dim: rgba(255,255,255,.72);
  --white-mut: rgba(255,255,255,.48);
  --white-fnt: rgba(255,255,255,.28);
  --accent:    #7dd3fc;
  --radius:    18px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --shadow:    0 18px 50px -20px rgba(0,0,0,.9);
  --font-scale: 1;
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  background:
    radial-gradient(circle at 20% 0%, #131a2b 0%, transparent 45%),
    radial-gradient(circle at 80% 100%, #101827 0%, transparent 45%),
    var(--bg-deep);
  color: var(--white);
  min-height: 100vh;
  font-size: calc(1rem * var(--font-scale));
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding: 1.5rem 1rem 5rem;
}

.container { max-width: 1180px; margin: 0 auto; }

/* ============ الشريط العلوي ============ */
.topbar {
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:1rem;
  padding:1.1rem 1.4rem;
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-card));
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom:1.6rem;
  position:sticky; top:.8rem; z-index:50;
  backdrop-filter: blur(8px);
}

.brand { display:flex; align-items:baseline; gap:.7rem; }

.brand-logo {
  font-size:1.7rem; font-weight:800; letter-spacing:-.5px;
  background: linear-gradient(90deg,#ffffff,#9fb3d1);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

.brand-sub {
  font-size:.72rem; color:var(--white-mut);
  letter-spacing:2px; text-transform:uppercase;
}

.clock-box { text-align:right; line-height:1.25; }
.clock-time {
  font-size:1.35rem; font-weight:700;
  font-variant-numeric: tabular-nums; letter-spacing:1px;
}
.clock-date { font-size:.78rem; color:var(--white-dim); }
.clock-created { font-size:.68rem; color:var(--white-fnt); margin-top:.15rem; }

.toolbar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }

.tbtn {
  background: var(--bg-card); color: var(--white-dim);
  border:1px solid var(--line);
  padding:.45rem .85rem; border-radius:999px;
  font-size:.78rem; cursor:pointer;
  transition: all .2s ease;
  display:inline-flex; align-items:center; gap:.35rem;
  text-decoration:none; font-family:inherit;
}
.tbtn:hover, .tbtn:focus-visible {
  background: var(--bg-hover); color: var(--white);
  border-color: rgba(255,255,255,.3); outline:none;
}
.tbtn:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.18); }

/* ============ مجموعات اللغة (قديمة، للتوافق) ============ */
.lang-group { margin-bottom:2.2rem; }
.lang-header {
  display:flex; align-items:center; gap:.7rem;
  margin-bottom:1rem; padding:0 .3rem;
}
.lang-flag { font-size:1.4rem; }
.lang-name { font-size:1.05rem; font-weight:700; letter-spacing:.5px; }
.lang-line {
  flex:1; height:1px;
  background: linear-gradient(90deg, rgba(255,255,255,.18), transparent);
}

/* ============ شبكة البراويز ============ */
.grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:1.1rem;
}

/* ============ حالات ============ */
.state-box {
  text-align:center; padding:3rem 1rem;
  color:var(--white-mut); font-size:.9rem;
}
.spinner {
  width:38px; height:38px;
  border:2px solid var(--line); border-top-color: var(--white);
  border-radius:50%; margin:0 auto .9rem;
  animation: spin .8s linear infinite;
}

/* ============================================================
   🌍 برواز الطقس (10.json)
   ============================================================ */
.weather-box {
  margin-bottom:2.4rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.04), transparent 45%),
    linear-gradient(160deg, var(--bg-panel), var(--bg-card));
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  animation: cardIn .6s ease both;
}

.weather-head {
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:.8rem;
  padding:1.2rem 1.4rem;
  border-bottom:1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}

.weather-title {
  display:flex; align-items:center; gap:.6rem;
  font-size:1.05rem; font-weight:700; letter-spacing:.3px;
}
.weather-title .wt-emoji { font-size:1.3rem; }
.weather-title .wt-count {
  font-size:.7rem; font-weight:400; color:var(--white-fnt);
  background: rgba(255,255,255,.05);
  padding:.15rem .55rem; border-radius:999px;
  border:1px solid var(--line-soft); margin-left:.3rem;
}
.weather-tools { display:flex; gap:.5rem; flex-wrap:wrap; }

.region-filters {
  display:flex; flex-wrap:wrap; gap:.45rem;
  padding:.9rem 1.4rem;
  border-bottom:1px solid var(--line-soft);
  background: rgba(255,255,255,.01);
}

.region-btn {
  background: var(--bg-card); color: var(--white-mut);
  border:1px solid var(--line);
  padding:.35rem .85rem; border-radius:999px;
  font-size:.73rem; cursor:pointer;
  transition: all .2s ease; font-family:inherit;
  display:inline-flex; align-items:center; gap:.3rem;
}
.region-btn:hover, .region-btn:focus-visible {
  color:var(--white); border-color: rgba(255,255,255,.28); outline:none;
}
.region-btn.active {
  background: var(--white); color: var(--bg-deep);
  border-color: var(--white); font-weight:700;
}
.region-btn:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.18); }

.cities-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:.9rem; padding:1.3rem 1.4rem 1.5rem;
}

.city-card {
  background: var(--bg-card);
  border:1px solid var(--line);
  border-radius: var(--radius-sm);
  display:flex; flex-direction:column;
  transition: all .25s ease;
  position:relative; overflow:hidden;
  animation: cardIn .45s ease both;
}
.city-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  opacity:0; transition: opacity .25s; z-index:3;
}
.city-card:hover {
  border-color: rgba(255,255,255,.24);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.9);
}
.city-card:hover::before { opacity:1; }

.city-image {
  height: 110px;
  background-size: cover; background-position: center;
  background-color: var(--bg-panel);
  position: relative; overflow: hidden; flex-shrink: 0;
}
.city-image::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,14,26,.05) 0%, rgba(10,14,26,.65) 100%);
}
.city-image.no-image {
  background: linear-gradient(135deg, #1a2233, #0f1420);
  display:flex; align-items:center; justify-content:center;
  font-size:2rem;
}
.city-image.no-image::after { background: none; }
.city-image.no-image .placeholder-icon {
  position:relative; z-index:1; opacity:.35; filter: grayscale(1);
}

.city-body {
  padding: 1rem 1.05rem;
  display:flex; flex-direction:column; gap:.7rem; flex:1;
}
.city-head {
  display:flex; align-items:flex-start;
  justify-content:space-between; gap:.5rem;
}
.city-name-block {
  display:flex; flex-direction:column; gap:.1rem; min-width:0;
}
.city-name {
  font-size:.95rem; font-weight:700; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.city-country { font-size:.68rem; color:var(--white-mut); letter-spacing:.3px; }
.city-temp {
  display:flex; align-items:baseline; gap:.3rem;
  font-variant-numeric: tabular-nums; flex-shrink:0;
}
.city-temp .val { font-size:1.45rem; font-weight:800; line-height:1; letter-spacing:-.5px; }
.city-temp .unit { font-size:.75rem; color:var(--white-mut); }

.city-sky {
  display:flex; align-items:center; gap:.4rem;
  font-size:.8rem; color:var(--white-dim);
  padding:.35rem .55rem;
  background: rgba(255,255,255,.04);
  border-radius:8px;
  border:1px solid var(--line-soft);
}
.city-sky .sky-emoji { font-size:.95rem; }

.city-details {
  display:grid; grid-template-columns: 1fr 1fr;
  gap:.3rem .5rem; font-size:.68rem; color:var(--white-mut);
  padding-top:.5rem; border-top:1px dashed var(--line-soft);
}
.city-details span {
  display:flex; align-items:center; gap:.28rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.city-details .dt-emoji { opacity:.75; }

/* ============================================================
   🏙️ برواز المدن الموسع (11.json)
   ============================================================ */
.cities-rich-box {
  margin-bottom:2.4rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.05), transparent 50%),
    linear-gradient(160deg, var(--bg-panel), var(--bg-card));
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  animation: cardIn .65s ease both;
}

.rich-head {
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:.8rem;
  padding:1.2rem 1.4rem;
  border-bottom:1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}
.rich-title {
  display:flex; align-items:center; gap:.6rem;
  font-size:1.05rem; font-weight:700; letter-spacing:.3px;
}
.rich-title .rt-emoji { font-size:1.3rem; }
.rich-title .rt-count {
  font-size:.7rem; font-weight:400; color:var(--white-fnt);
  background: rgba(255,255,255,.05);
  padding:.15rem .55rem; border-radius:999px;
  border:1px solid var(--line-soft); margin-left:.3rem;
}
.rich-tools { display:flex; gap:.5rem; flex-wrap:wrap; }

.rich-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:1.1rem; padding:1.3rem 1.4rem 1.6rem;
}

.rich-card {
  background: var(--bg-card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition: all .3s ease; position:relative;
  animation: cardIn .5s ease both;
}
.rich-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 50px -22px rgba(0,0,0,1);
  border-color: rgba(255,255,255,.22);
}

.rich-image {
  height: 150px;
  background-size: cover; background-position: center;
  background-color: var(--bg-panel);
  position:relative; overflow:hidden; flex-shrink:0;
}
.rich-image::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,14,26,.15) 0%, rgba(10,14,26,.85) 100%);
}
.rich-image.no-image {
  background: linear-gradient(135deg, #1a2233, #0f1420), var(--bg-panel);
  display:flex; align-items:center; justify-content:center;
  font-size:2.4rem; opacity:.9;
}
.rich-image.no-image::after {
  background: linear-gradient(180deg, transparent 0%, rgba(10,14,26,.6) 100%);
}
.rich-image.no-image .placeholder-icon {
  position:relative; z-index:1; opacity:.4; filter: grayscale(1);
}

.rich-overlay {
  position:absolute; bottom:.6rem; left:.8rem; right:.8rem;
  z-index:2; display:flex; align-items:flex-end;
  justify-content:space-between; gap:.5rem;
}
.rich-city-name {
  font-size:1.05rem; font-weight:800; line-height:1.2;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.rich-country {
  font-size:.68rem; color:var(--white-dim);
  text-shadow: 0 1px 4px rgba(0,0,0,.8); margin-top:.1rem;
}
.rich-temp-badge {
  background: rgba(10,14,26,.75);
  backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.2);
  padding:.25rem .6rem; border-radius:999px;
  font-size:.85rem; font-weight:700;
  font-variant-numeric: tabular-nums;
  flex-shrink:0; white-space:nowrap;
}

.rich-body {
  padding:.9rem 1rem 1rem;
  display:flex; flex-direction:column; gap:.7rem; flex:1;
}
.rich-sky {
  display:flex; align-items:center; gap:.4rem;
  font-size:.8rem; color:var(--white-dim);
  padding:.35rem .55rem;
  background: rgba(255,255,255,.04);
  border-radius:8px; border:1px solid var(--line-soft);
}
.rich-stats {
  display:grid; grid-template-columns: 1fr 1fr;
  gap:.35rem .6rem; font-size:.72rem; color:var(--white-mut);
}
.rich-stats span {
  display:flex; align-items:center; gap:.3rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rich-stats .rs-emoji { opacity:.75; flex-shrink:0; }
.rich-population { font-weight:600; color:var(--white-dim); }

.rich-actions { display:flex; gap:.5rem; padding-top:.3rem; margin-top:auto; }
.rich-link {
  flex:1; background: var(--bg-card); color: var(--white-dim);
  border:1px solid var(--line);
  padding:.45rem; border-radius: var(--radius-sm);
  font-size:.73rem; cursor:pointer;
  transition: all .2s ease;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.3rem; text-decoration:none; font-family:inherit;
}
.rich-link:hover, .rich-link:focus-visible {
  background: var(--bg-hover); color:var(--white);
  border-color: rgba(255,255,255,.3); outline:none;
}
.rich-link:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.18); }

/* ============================================================
   📄 قسم Gögn — العارض العام (1-9.json)
   ============================================================ */
.events-section { margin-bottom:2.4rem; }

.events-title {
  display:flex; align-items:center; gap:.6rem;
  font-size:1.15rem; font-weight:700; letter-spacing:.3px;
  margin-bottom:1.4rem; padding:0 .3rem;
}
.events-title .et-emoji { font-size:1.3rem; }
.events-title .et-line {
  flex:1; height:1px;
  background: linear-gradient(90deg, rgba(255,255,255,.2), transparent);
}

/* شبكة ملفات JSON العامة */
.json-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap:1.2rem;
}

.json-card {
  background: linear-gradient(160deg, var(--bg-card), var(--bg-panel));
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition: all .3s ease;
  animation: cardIn .5s ease both;
}
.json-card:hover {
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 22px 55px -25px rgba(0,0,0,1);
}

/* رأس البطاقة */
.json-card-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; padding:.9rem 1.1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent);
  border-bottom:1px solid var(--line-soft);
}
.json-card-file {
  display:flex; align-items:center; gap:.5rem;
  font-size:.85rem; font-weight:700; letter-spacing:.5px;
  color:var(--white-dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  min-width:0;
}
.json-card-file .jcf-icon { font-size:1rem; flex-shrink:0; }
.json-card-lang {
  font-size:1.05rem; flex-shrink:0;
  padding:.15rem .45rem;
  background: rgba(255,255,255,.05);
  border-radius:999px;
  border:1px solid var(--line-soft);
}

/* شريط badges للحقول الوصفية */
.json-badges {
  display:flex; flex-wrap:wrap; gap:.35rem;
  padding:.75rem 1.1rem;
  border-bottom:1px dashed var(--line-soft);
}
.json-badge {
  font-size:.68rem;
  padding:.22rem .6rem;
  border-radius:999px;
  background: rgba(255,255,255,.05);
  color:var(--white-dim);
  border:1px solid var(--line-soft);
  display:inline-flex; align-items:center; gap:.3rem;
  max-width:100%; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}

/* جسم البطاقة */
.json-card-body {
  padding:.9rem 1.1rem 1.1rem;
  display:flex; flex-direction:column; gap:.9rem;
  flex:1;
}

/* قسم المصفوفة */
.json-section {
  border:1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  overflow:hidden;
  background: rgba(0,0,0,.15);
}
.json-section-head {
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem .8rem;
  background: rgba(255,255,255,.03);
  border-bottom:1px solid var(--line-soft);
  cursor:pointer;
  user-select:none;
  transition: background .2s;
  font-size:.78rem; font-weight:700;
  color:var(--white-dim);
  letter-spacing:.3px;
}
.json-section-head:hover { background: rgba(255,255,255,.06); }
.json-section-head:focus-visible {
  outline:none;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.2);
}
.json-section-toggle {
  font-size:.7rem;
  transition: transform .25s ease;
  display:inline-block;
}
.json-section.open .json-section-toggle { transform: rotate(90deg); }
.json-section-count {
  font-size:.66rem; font-weight:400;
  color:var(--white-fnt);
  background: rgba(255,255,255,.05);
  padding:.05rem .45rem;
  border-radius:999px;
  margin-left:auto;
}
.json-section-body {
  display:none;
  padding:.7rem .8rem;
  display:none;
  flex-direction:column; gap:.6rem;
}
.json-section.open .json-section-body { display:flex; }

/* بطاقة العنصر داخل المصفوفة */
.json-item {
  background: var(--bg-card);
  border:1px solid var(--line);
  border-radius: var(--radius-xs);
  padding:.75rem .85rem;
  display:flex; flex-direction:column; gap:.5rem;
  transition: border-color .2s;
}
.json-item:hover { border-color: rgba(255,255,255,.15); }
.json-item.highlight {
  border-color: rgba(125,211,252,.35);
  background: linear-gradient(160deg, var(--bg-card), rgba(125,211,252,.04));
}

/* عنوان العنصر */
.json-item-title {
  display:flex; align-items:flex-start; gap:.5rem;
  font-size:.9rem; font-weight:700;
  color:var(--white);
  line-height:1.35;
}
.json-item-title .jit-emoji { font-size:1.1rem; flex-shrink:0; }
.json-item-title .jit-text {
  flex:1; min-width:0;
  word-break: break-word;
}
.json-item-star {
  font-size:.85rem; flex-shrink:0;
  color:#fbbf24;
}

/* صفوف الحقل/القيمة */
.json-fields {
  display:flex; flex-direction:column; gap:.3rem;
}
.json-field {
  display:flex; gap:.5rem;
  font-size:.76rem; line-height:1.5;
  padding:.15rem 0;
  border-bottom:1px dashed rgba(255,255,255,.04);
}
.json-field:last-child { border-bottom:none; }
.json-field-key {
  color:var(--white-mut);
  flex-shrink:0;
  min-width:90px;
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.2px;
  padding-top:.1rem;
}
.json-field-val {
  color:var(--white-dim);
  flex:1; min-width:0;
  word-break: break-word;
}

/* روابط */
.json-link {
  color: var(--accent);
  text-decoration:none;
  border-bottom:1px dotted rgba(125,211,252,.4);
  transition: color .2s;
}
.json-link:hover { color:#fff; border-bottom-color:#fff; }

/* صور */
.json-image {
  display:block;
  max-width:180px; max-height:120px;
  width:auto; height:auto;
  border-radius: var(--radius-xs);
  border:1px solid var(--line);
  margin-top:.25rem;
  object-fit:cover;
}
.json-image-fallback {
  font-size:.7rem; color:var(--white-fnt);
  padding:.3rem .5rem;
  border:1px dashed var(--line);
  border-radius: var(--radius-xs);
  display:inline-block;
}

/* قيم مصفوفة بسيطة (شرائح) */
.json-chips {
  display:flex; flex-wrap:wrap; gap:.3rem;
  margin-top:.2rem;
}
.json-chip {
  font-size:.66rem;
  padding:.12rem .5rem;
  border-radius:999px;
  background: rgba(125,211,252,.08);
  color: var(--accent);
  border:1px solid rgba(125,211,252,.22);
}

/* كائن متداخل */
.json-nested {
  border:1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  padding:.5rem .65rem;
  background: rgba(255,255,255,.02);
  margin-top:.3rem;
}
.json-nested-title {
  font-size:.68rem;
  font-weight:700;
  color:var(--white-mut);
  letter-spacing:.5px;
  text-transform:uppercase;
  margin-bottom:.35rem;
}

/* قيم */
.json-bool-true  { color:#4ade80; font-weight:700; }
.json-bool-false { color:#f87171; font-weight:700; }
.json-null       { color:var(--white-fnt); font-style:italic; }
.json-number     { color:#fbbf24; font-weight:600; font-variant-numeric: tabular-nums; }
.json-date       { color:var(--accent); font-variant-numeric: tabular-nums; }

/* ============================================================
   ✨ المميزات
   ============================================================ */
.features {
  margin-top:2.4rem; padding:1.2rem 1.4rem;
  background: var(--bg-panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  font-size:.72rem; color:var(--white-mut); line-height:1.9;
}
.features h3 {
  font-size:.78rem; font-weight:700;
  color:var(--white-dim);
  margin-bottom:.6rem; letter-spacing:1px;
  text-transform:uppercase;
}
.features ul {
  list-style:none; display:flex; flex-wrap:wrap;
  gap:.3rem 1.4rem;
}
.features li::before {
  content:'✦'; margin-right:.4rem; color:var(--white-fnt);
}

/* ============ التواصل ============ */
.contact-box {
  margin-top:1.4rem; padding:1.4rem 1.5rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.05), transparent 50%),
    linear-gradient(160deg, var(--bg-card), var(--bg-panel));
  border:1px solid var(--line);
  border-radius: var(--radius);
  text-align:center;
  box-shadow: var(--shadow);
}
.contact-title {
  font-size:.95rem; font-weight:700;
  letter-spacing:.5px; margin-bottom:.6rem;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.contact-text { font-size:.78rem; color:var(--white-mut); margin-bottom:.8rem; }
.contact-email {
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--bg-card);
  border:1px solid rgba(255,255,255,.2);
  padding:.6rem 1.2rem; border-radius:999px;
  color:var(--white); text-decoration:none;
  font-size:.82rem; font-weight:600;
  letter-spacing:.3px; transition: all .25s ease;
  word-break: break-all;
}
.contact-email:hover, .contact-email:focus-visible {
  background: var(--bg-hover);
  border-color: var(--white); outline:none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.15);
}

/* ============ الصورة ============ */
.photo-box {
  margin-top:1.4rem;
  background: var(--bg-panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  animation: cardIn .6s ease both;
}
.photo-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; padding:.9rem 1.2rem;
  border-bottom:1px solid var(--line-soft);
}
.photo-title {
  display:flex; align-items:center; gap:.5rem;
  font-size:.9rem; font-weight:700; letter-spacing:.3px;
}
.photo-body {
  background: var(--bg-card);
  display:flex; align-items:center; justify-content:center;
  min-height: 200px; position:relative;
}
.photo-body img {
  display:block; width:100%; height:auto;
  max-height: 520px; object-fit: cover;
}
.photo-body.img-fallback {
  padding:3rem 1rem; color:var(--white-fnt);
  font-size:.85rem; text-align:center;
  flex-direction:column; gap:.6rem;
}
.photo-body.img-fallback .pf-icon { font-size:2rem; opacity:.4; }

/* ============ الهدية ============ */
.gift-box {
  margin-top:1.4rem; padding:1.6rem 1.5rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(160deg, var(--bg-card), var(--bg-panel));
  border:1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  position:relative; text-align:center;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03), var(--shadow);
}
.gift-box::before {
  content:'🎀'; position:absolute;
  top:-14px; left:50%; transform:translateX(-50%);
  font-size:1.5rem; background: var(--bg-deep); padding:0 .5rem;
}
.gift-title {
  font-size:1rem; font-weight:700;
  letter-spacing:.5px; margin-bottom:.5rem;
}
.gift-text {
  font-size:.82rem; color:var(--white-dim);
  max-width:640px; margin:0 auto; line-height:1.85;
}
.gift-flags {
  margin-top:.9rem; font-size:1.3rem; letter-spacing:.5rem;
}

/* ============ التذييل ============ */
footer {
  text-align:center; margin-top:1.8rem;
  font-size:.7rem; color:var(--white-fnt); letter-spacing:1px;
}
footer a {
  color:var(--white-mut); text-decoration:none;
  border-bottom:1px dotted var(--white-fnt);
}
footer a:hover { color:var(--white); }

/* ============================================================
   🎯 الأسهم العائمة (ثنائية: أعلى + أسفل)
   ============================================================ */
.float-nav {
  position:fixed;
  bottom:1.4rem; right:1.4rem;
  display:flex; flex-direction:column; gap:.5rem;
  z-index:60;
}
.float-btn {
  width:52px; height:52px;
  border-radius:50%;
  background: var(--bg-panel);
  border:1px solid rgba(255,255,255,.25);
  color:var(--white);
  font-size:1.3rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transform:translateY(12px);
  transition: all .3s ease;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.9);
}
.float-btn.show {
  opacity:1; visibility:visible; transform:translateY(0);
}
.float-btn:hover, .float-btn:focus-visible {
  background: var(--bg-hover);
  border-color: var(--white);
  outline:none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}

/* ============ Toast ============ */
.toast {
  position:fixed; bottom:1.5rem; left:50%;
  transform:translate(-50%, 20px);
  background: var(--bg-hover); color:var(--white);
  padding:.7rem 1.3rem; border-radius:999px;
  font-size:.8rem;
  border:1px solid rgba(255,255,255,.2);
  opacity:0; visibility:hidden;
  transition: all .3s ease; z-index:100;
  box-shadow: var(--shadow);
}
.toast.show {
  opacity:1; visibility:visible;
  transform:translate(-50%, 0);
}

/* ============ الحركات ============ */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes cardIn {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============ الجوال ============ */
@media (max-width: 640px) {
  body { padding:1rem .7rem 4.5rem; }
  .topbar { position:static; padding:1rem; }
  .clock-box { text-align:left; }
  .grid { grid-template-columns:1fr; }
  .json-grid { grid-template-columns:1fr; }
  .cities-grid { grid-template-columns:1fr 1fr; gap:.6rem; padding:1rem; }
  .city-name { font-size:.85rem; }
  .city-temp .val { font-size:1.2rem; }
  .city-details { font-size:.62rem; }
  .city-image { height:90px; }
  .rich-grid { grid-template-columns:1fr; gap:.9rem; padding:1rem; }
  .rich-image { height:180px; }
  .float-btn { width:46px; height:46px; font-size:1.15rem; }
  .float-nav { bottom:1rem; right:1rem; }
  .brand-logo { font-size:1.4rem; }
  .json-field-key { min-width:70px; font-size:.65rem; }
}

@media (max-width: 380px) {
  .cities-grid { grid-template-columns:1fr; }
  .city-image { height:140px; }
}