:root{
  --green:#063b34;
  --green2:#0b6b5e;
  --green3:#0f7f70;
  --gold:#d8c487;
  --bg:#eef4f0;
  --card:#ffffff;
  --text:#073b35;
  --muted:#667085;
  --red:#c1121f;
  --soft:#f6faf8;
  --line:rgba(6,59,52,.10);
  --shadow:0 14px 34px rgba(0,37,31,.10);
  --radius:24px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Cairo,Tahoma,Arial,sans-serif;
  background:
    radial-gradient(circle at top right,rgba(216,196,135,.20),transparent 34%),
    radial-gradient(circle at 20% 20%,rgba(11,107,94,.08),transparent 30%),
    linear-gradient(180deg,#f8faf8,#eef4f0);
  color:var(--text);
  padding-bottom:96px;
}

.hajin-app{
  width:min(900px,100%);
  margin:0 auto;
  padding:16px;
}

.hero-card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,#063b34,#0b6b5e);
  color:#fff7dc;
  border-radius:30px;
  padding:20px;
  box-shadow:var(--shadow);
  border:1px solid rgba(216,196,135,.38);
}

.hero-pattern{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 12% 0%,rgba(255,255,255,.13),transparent 18%),
    radial-gradient(circle at 88% 95%,rgba(216,196,135,.14),transparent 25%);
  pointer-events:none;
}

.hero-main{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:14px;
}

.hero-logo{
  width:72px;
  height:72px;
  border-radius:24px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(216,196,135,.45);
  box-shadow:0 14px 28px rgba(0,0,0,.16);
}

.hero-logo span{
  font-size:36px;
}

.hero-text h1{
  margin:0;
  font-size:31px;
  font-weight:900;
  letter-spacing:-.5px;
}

.hero-text p{
  margin:5px 0 0;
  color:#efe3bf;
  font-weight:800;
}

.hero-actions{
  position:relative;
  z-index:1;
  margin-top:18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

button{
  font-family:inherit;
}

.hero-actions button{
  border:0;
  border-radius:16px;
  padding:12px 16px;
  font-weight:900;
  cursor:pointer;
  background:var(--gold);
  color:var(--green);
}

.hero-actions .secondary{
  background:rgba(255,255,255,.15);
  color:#fff7dc;
  border:1px solid rgba(216,196,135,.35);
}

.preview-note{
  position:relative;
  z-index:1;
  margin-top:14px;
  border-radius:16px;
  padding:10px 12px;
  background:rgba(255,255,255,.12);
  color:#f8edcf;
  font-size:12px;
  font-weight:900;
}

.home-block{
  margin-top:14px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:15px;
  box-shadow:var(--shadow);
}

.block-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  margin-bottom:13px;
}

.block-head h2{
  margin:0;
  font-size:19px;
  font-weight:900;
}

.block-head p{
  margin:3px 0 0;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}

.weather-card{
  display:grid;
  gap:13px;
}

.weather-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}

.weather-title{
  display:flex;
  gap:10px;
  align-items:center;
}

.weather-icon{
  width:46px;
  height:46px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:#eef7f4;
  font-size:24px;
}

.weather-title h2{
  margin:0;
  font-size:18px;
  font-weight:900;
}

.weather-title p{
  margin:3px 0 0;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.weather-body{
  background:var(--soft);
  border:1px solid rgba(6,59,52,.06);
  border-radius:20px;
  padding:13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.weather-temp{
  font-size:40px;
  font-weight:900;
  color:var(--green2);
  line-height:1;
}

.weather-state b{
  display:block;
  font-size:15px;
}

.weather-state small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-weight:800;
}

.status-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.status-card{
  min-height:124px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:15px;
  box-shadow:var(--shadow);
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.status-card.urgent{
  border-color:rgba(193,18,31,.22);
}

.status-card.deaths{
  background:linear-gradient(180deg,#fff,#fffdf5);
  border-color:rgba(216,196,135,.42);
}

.status-icon{
  width:50px;
  height:50px;
  border-radius:19px;
  display:grid;
  place-items:center;
  font-size:25px;
  flex:0 0 auto;
  background:#eff7f4;
}

.status-card.urgent .status-icon{
  background:#fff0f1;
}

.status-card.deaths .status-icon{
  background:#fff8df;
}

.status-card h2{
  margin:0;
  font-size:18px;
  font-weight:900;
}

.status-card p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  line-height:1.65;
}

.status-card small{
  display:block;
  margin-top:7px;
  color:#7b8494;
  font-weight:800;
}

.section-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}

.section-tile{
  min-height:132px;
  position:relative;
  overflow:hidden;
  display:block;
  text-decoration:none;
  color:var(--text);
  background:linear-gradient(180deg,#fff,#fbfdfc);
  border:1px solid rgba(6,59,52,.09);
  border-radius:22px;
  padding:13px;
  box-shadow:0 8px 22px rgba(0,37,31,.065);
  transition:.18s ease;
}

.section-tile:hover{
  transform:translateY(-1px);
}

.section-tile:active{
  transform:scale(.985);
}

.section-icon{
  width:44px;
  height:44px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:#eff7f4;
  font-size:24px;
  margin-bottom:11px;
}

.section-tile b{
  display:block;
  font-size:15px;
  font-weight:900;
}

.section-tile small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  line-height:1.5;
}

.section-badge{
  position:absolute;
  left:9px;
  top:9px;
  background:linear-gradient(135deg,#e10000,#870000);
  color:#fff;
  border-radius:999px;
  padding:4px 8px;
  font-size:11px;
  font-style:normal;
  font-weight:900;
  box-shadow:0 0 16px rgba(255,0,0,.25);
}

.latest-list{
  display:grid;
  gap:9px;
}

.latest-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px;
  border-radius:18px;
  background:var(--soft);
  border:1px solid rgba(6,59,52,.06);
}

.latest-icon{
  width:38px;
  height:38px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:#fff;
}

.latest-item b{
  display:block;
  font-size:14px;
}

.latest-item small{
  display:block;
  color:var(--muted);
  font-weight:800;
}

.bottom-nav{
  position:fixed;
  bottom:0;
  right:0;
  left:0;
  height:74px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  border-top:1px solid rgba(6,59,52,.10);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  z-index:60;
  box-shadow:0 -8px 22px rgba(0,37,31,.06);
}

.bottom-nav a{
  display:grid;
  place-items:center;
  align-content:center;
  gap:3px;
  color:var(--green);
  text-decoration:none;
  font-weight:900;
}

.nav-icon{
  font-size:21px;
  line-height:1;
}

.bottom-nav b{
  font-size:10px;
}

.bottom-nav .active{
  color:var(--green2);
}

.toast{
  position:fixed;
  right:14px;
  left:14px;
  bottom:90px;
  z-index:100;
  background:var(--green);
  color:#fff7dc;
  border-radius:17px;
  padding:12px;
  text-align:center;
  font-weight:900;
  transform:translateY(20px);
  opacity:0;
  pointer-events:none;
  transition:.2s;
}

.toast.show{
  transform:translateY(0);
  opacity:1;
}

@media(min-width:700px){
  .section-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .status-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:430px){
  .hajin-app{
    padding:12px;
  }

  .hero-card{
    border-radius:26px;
    padding:17px;
  }

  .hero-logo{
    width:62px;
    height:62px;
    border-radius:22px;
  }

  .hero-logo span{
    font-size:31px;
  }

  .hero-text h1{
    font-size:25px;
  }

  .section-grid{
    grid-template-columns:repeat(2,1fr);
    gap:9px;
  }

  .section-tile{
    min-height:122px;
    padding:12px;
  }

  .weather-body{
    align-items:flex-start;
  }
}

/* ===== Home V3 Step 3 Live Readonly ===== */
.home-loading{
  min-height:90px;
  display:grid;
  place-items:center;
  color:var(--muted);
  font-weight:900;
  background:var(--soft);
  border-radius:18px;
  border:1px dashed rgba(6,59,52,.14);
}

.status-card.has-news{
  cursor:pointer;
}

.status-card.urgent.has-news{
  background:linear-gradient(180deg,#fff,#fff6f7);
}

.status-card.deaths.has-news{
  background:linear-gradient(180deg,#fff,#fffaf0);
}

.status-card.has-news h2{
  color:var(--green);
}

.status-card.urgent.has-news h2{
  color:#a50f1b;
}

.status-news-title{
  display:block;
  margin-top:7px;
  font-weight:900;
  color:var(--text);
  line-height:1.6;
}

.status-news-meta{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.section-tile.empty-section{
  opacity:.86;
}

.section-tile.empty-section .section-icon{
  filter:grayscale(.1);
}

.section-count-note{
  position:absolute;
  left:9px;
  bottom:9px;
  color:var(--muted);
  font-size:10px;
  font-weight:900;
}

.latest-empty{
  padding:14px;
  border-radius:18px;
  background:var(--soft);
  color:var(--muted);
  font-weight:900;
  text-align:center;
}

.latest-item{
  cursor:pointer;
}

.latest-item:hover{
  background:#eef7f4;
}

.live-mini-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#eef7f4;
  color:var(--green);
  padding:4px 8px;
  font-size:11px;
  font-weight:900;
  margin-inline-start:6px;
}

@media(max-width:430px){
  .section-count-note{
    position:static;
    display:block;
    margin-top:8px;
  }
}

/* ===== Home V3 Preview Reset Read Button ===== */
.hero-actions .danger-soft{
  background:rgba(193,18,31,.14) !important;
  color:#fff7dc !important;
  border:1px solid rgba(255,255,255,.25) !important;
}

.hero-actions .danger-soft:hover,
.hero-actions .danger-soft:active{
  background:rgba(193,18,31,.24) !important;
}

/* ===== Home V3 Cards Polish v7 ===== */
.section-grid{
  align-items:stretch;
}

.section-tile{
  display:flex !important;
  flex-direction:column;
  justify-content:flex-start;
}

.section-tile b{
  margin-top:2px;
}

.section-tile small{
  min-height:18px;
}

.section-count-note{
  margin-top:auto;
  align-self:flex-start;
  position:static !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#f3f7f5;
  color:#667085;
  border:1px solid rgba(6,59,52,.07);
  border-radius:999px;
  padding:4px 8px;
  font-size:10px;
  font-weight:900;
}

.section-badge{
  animation:hajinBadgePulse 1.8s ease-in-out infinite;
}

@keyframes hajinBadgePulse{
  0%,100%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.04);
  }
}

/* آخر بطاقة إذا كانت وحيدة لا تظهر بشكل ضائع */
.section-tile:last-child:nth-child(3n + 1){
  grid-column:span 1;
}

@media(max-width:699px){
  .section-tile:last-child:nth-child(2n + 1){
    grid-column:1/-1;
    min-height:110px;
  }
}

@media(max-width:430px){
  .section-count-note{
    margin-top:8px;
    font-size:10px;
  }
}

/* ===== Home V3 Final Preview Polish ===== */
body.final-preview .preview-note{
  background:rgba(255,255,255,.10);
}

body.final-preview #resetReadBtn{
  display:none !important;
}

/* ===== Home V3 Dynamic Weather By Time ===== */
.weather-dynamic{
  overflow:hidden;
  position:relative;
  transition:.25s ease;
}

.weather-dynamic:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.75;
}

.weather-dynamic > *{
  position:relative;
  z-index:1;
}

.weather-morning{
  background:
    radial-gradient(circle at 15% 15%, rgba(255,214,125,.38), transparent 30%),
    linear-gradient(135deg,#ffffff,#f7fff9) !important;
}

.weather-day{
  background:
    radial-gradient(circle at 12% 18%, rgba(255,218,117,.35), transparent 28%),
    linear-gradient(135deg,#ffffff,#f5fbff) !important;
}

.weather-sunset{
  background:
    radial-gradient(circle at 12% 18%, rgba(216,196,135,.42), transparent 30%),
    linear-gradient(135deg,#fffaf0,#ffffff) !important;
}

.weather-night{
  background:
    radial-gradient(circle at 12% 18%, rgba(216,196,135,.20), transparent 30%),
    linear-gradient(135deg,#f9fbff,#eef4f0) !important;
}

.weather-live-dot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:5px 9px;
  background:#eef7f4;
  color:#063b34;
  font-size:11px;
  font-weight:900;
  border:1px solid rgba(6,59,52,.08);
}

.weather-live-dot:before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#0bba70;
  margin-left:6px;
  box-shadow:0 0 0 4px rgba(11,186,112,.12);
}

.weather-chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.weather-chips span{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:7px 10px;
  background:#ffffff;
  color:#063b34;
  border:1px solid rgba(6,59,52,.08);
  font-size:12px;
  font-weight:900;
  box-shadow:0 6px 16px rgba(0,37,31,.05);
}

.weather-night .weather-icon{
  background:#eef2ff;
}

.weather-sunset .weather-icon{
  background:#fff4d8;
}

.weather-day .weather-icon{
  background:#fff8df;
}

.weather-morning .weather-icon{
  background:#eef7f4;
}

@media(max-width:430px){
  .weather-top{
    align-items:flex-start;
  }

  .weather-live-dot{
    font-size:10px;
    padding:4px 8px;
  }

  .weather-chips span{
    font-size:11px;
    padding:6px 9px;
  }
}

/* ===== Home V3 Live Weather Hajin ===== */
.weather-live-dot{
  min-width:62px;
}

.weather-live-dot:not(:empty){
  animation:weatherLiveSoft 2.4s ease-in-out infinite;
}

@keyframes weatherLiveSoft{
  0%,100%{
    box-shadow:0 0 0 0 rgba(11,186,112,.12);
  }
  50%{
    box-shadow:0 0 0 6px rgba(11,186,112,.08);
  }
}

.weather-temp{
  direction:ltr;
}

.weather-chips span{
  direction:rtl;
}

/* ===== Home V3 Official Card Preview ===== */
.section-tile[data-section="official"],
.section-tile.official-tile{
  background:
    radial-gradient(circle at 14% 18%, rgba(216,196,135,.20), transparent 30%),
    linear-gradient(145deg,#ffffff,#f8fbfa);
  border:1px solid rgba(6,59,52,.12);
}

.official-mini-list{
  display:grid;
  gap:6px;
  margin-top:10px;
  margin-bottom:8px;
}

.official-mini-list span{
  display:block;
  background:#f3f7f5;
  border:1px solid rgba(6,59,52,.07);
  color:#063b34;
  border-radius:12px;
  padding:7px 9px;
  font-size:11px;
  font-weight:900;
  line-height:1.55;
  max-height:44px;
  overflow:hidden;
}

@media(max-width:520px){
  .official-mini-list span{
    font-size:10.5px;
    padding:7px 8px;
  }
}

/* ===== Home V3 Full Safe Polish ===== */

body{
  background:
    radial-gradient(circle at top right, rgba(216,196,135,.18), transparent 34%),
    linear-gradient(180deg,#f6faf8,#eef5f1);
}

.sections-grid,
#sectionsGrid{
  gap:16px !important;
}

.section-tile{
  position:relative;
  overflow:hidden;
  border-radius:26px !important;
  border:1px solid rgba(6,59,52,.10) !important;
  background:linear-gradient(145deg,#ffffff,#f8fbfa) !important;
  box-shadow:0 14px 34px rgba(0,35,30,.075) !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.section-tile:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(0,35,30,.12) !important;
  border-color:rgba(216,196,135,.55) !important;
}

.section-tile:before{
  content:"";
  position:absolute;
  inset:auto -40px -50px auto;
  width:120px;
  height:120px;
  border-radius:50%;
  background:rgba(216,196,135,.13);
  pointer-events:none;
}

.section-tile h3,
.section-tile .title,
.section-tile b{
  color:#063b34 !important;
  font-weight:900 !important;
  line-height:1.55;
}

.section-tile[data-section="official"]{
  background:
    radial-gradient(circle at 12% 18%, rgba(216,196,135,.24), transparent 32%),
    linear-gradient(145deg,#ffffff,#f5faf7) !important;
  border:1px solid rgba(216,196,135,.45) !important;
}

.section-tile[data-section="official"]:after{
  content:"رسمي";
  position:absolute;
  top:14px;
  left:14px;
  background:#063b34;
  color:#d8c487;
  border-radius:999px;
  padding:6px 10px;
  font-size:11px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(6,59,52,.18);
}

.section-count-note,
.badge,
.count-badge{
  border-radius:999px !important;
  font-weight:900 !important;
}

.news-card,
.latest-card,
.home-latest,
.latest-news,
#latestNews{
  border-radius:22px !important;
}

@media(max-width:760px){
  .sections-grid,
  #sectionsGrid{
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
  }

  .section-tile{
    border-radius:22px !important;
    min-height:150px;
  }
}

@media(max-width:480px){
  .sections-grid,
  #sectionsGrid{
    grid-template-columns:1fr !important;
  }

  .section-tile{
    min-height:auto;
  }

  .section-tile[data-section="official"]:after{
    top:10px;
    left:10px;
    font-size:10px;
  }
}

/* ===== Mixed Latest V3 ===== */
.mixed-latest-v3{
  max-width:1120px;
  margin:22px auto;
  padding:0 12px;
}

.mixed-latest-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.mixed-kicker{
  display:inline-flex;
  background:#063b34;
  color:#d8c487;
  border-radius:999px;
  padding:6px 10px;
  font-size:11px;
  font-weight:900;
  margin-bottom:8px;
}

.mixed-latest-head h2{
  margin:0;
  color:#063b34;
  font-size:22px;
  font-weight:900;
}

.mixed-latest-head p{
  margin:4px 0 0;
  color:#667085;
  font-size:13px;
  font-weight:800;
}

.mixed-all-link{
  text-decoration:none;
  background:#fff;
  color:#063b34;
  border:1px solid rgba(6,59,52,.12);
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  box-shadow:0 8px 22px rgba(0,35,30,.06);
  white-space:nowrap;
}

.mixed-latest-list{
  display:grid;
  gap:10px;
}

.mixed-news-item{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:12px;
  text-decoration:none;
  background:linear-gradient(145deg,#ffffff,#f8fbfa);
  border:1px solid rgba(6,59,52,.09);
  border-radius:22px;
  padding:13px;
  box-shadow:0 10px 26px rgba(0,35,30,.055);
  transition:transform .16s ease, box-shadow .16s ease;
}

.mixed-news-item:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,35,30,.10);
}

.mixed-news-item.is-official{
  border-color:rgba(216,196,135,.50);
  background:
    radial-gradient(circle at 8% 20%, rgba(216,196,135,.18), transparent 28%),
    linear-gradient(145deg,#ffffff,#f8fbfa);
}

.mixed-rank{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  background:#063b34;
  color:#d8c487;
  border-radius:15px;
  font-weight:900;
}

.mixed-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:6px;
}

.mixed-meta span{
  background:#eef7f4;
  color:#063b34;
  border-radius:999px;
  padding:4px 8px;
  font-size:10.5px;
  font-weight:900;
}

.mixed-news-item.is-official .mixed-meta span:first-child{
  background:#063b34;
  color:#d8c487;
}

.mixed-body h3{
  margin:0;
  color:#063b34;
  font-size:15px;
  font-weight:900;
  line-height:1.65;
}

.mixed-body p{
  margin:5px 0 0;
  color:#667085;
  font-size:12px;
  line-height:1.6;
  font-weight:700;
}

.mixed-loading,
.mixed-empty{
  background:#fff;
  border:1px solid rgba(6,59,52,.08);
  border-radius:20px;
  padding:18px;
  color:#667085;
  font-weight:900;
  text-align:center;
}

@media(max-width:560px){
  .mixed-latest-head{
    align-items:stretch;
    flex-direction:column;
  }

  .mixed-all-link{
    text-align:center;
  }

  .mixed-news-item{
    grid-template-columns:34px 1fr;
    border-radius:18px;
    padding:11px;
  }

  .mixed-rank{
    width:34px;
    height:34px;
    border-radius:12px;
    font-size:12px;
  }

  .mixed-body h3{
    font-size:13.5px;
  }

  .mixed-body p{
    display:none;
  }
}