/* ========== Base ========== */
:root{
  --bg: #ffffff;
  --surface: #ffffff;
  --muted: #6b7280;
  --text: #0f172a;

  --green-50: #f1fbf6;
  --green-100:#dcfce7;
  --green-200:#bbf7d0;
  --green-600:#16a34a;

  --pink-50:#fff1f2;
  --pink-100:#ffe4e6;
  --pink-200:#fecdd3;
  --pink-600:#e11d48;

  --border:#e5e7eb;
  --shadow: 0 10px 30px rgba(15,23,42,.10);
  --radius: 18px;
  --radius-sm: 12px;
  --container: 1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: "Tajawal", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  background: linear-gradient(180deg, var(--green-50), #fff 35%, var(--pink-50));
  color:var(--text);
  direction: rtl;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
code,kbd,pre{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.container{
  width:min(var(--container), calc(100% - 32px));
  margin-inline:auto;
}

/* ========== Header / Nav ========== */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.75);
  border-bottom: 1px solid var(--border);
}

.header-top{
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.header-bottom{
  background: rgba(255,255,255,.88);
}

.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.nav-top{
  padding: 12px 0;
}

.nav-bottom{
  padding: 8px 0;
  position: relative;
}

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.brand .logo{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--green-200), var(--pink-200));
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
}

.brand .title{
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand .title b{
  font-size: 14px;
}

.brand .title span{
  font-size: 12px;
  color: var(--muted);
}

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

.searchbox{
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  background: #fff;
  min-width: 320px;
}

.searchbox input{
  border: 0;
  outline: 0;
  width: 100%;
  font-size: 14px;
  background: transparent;
  font-family: "Tajawal", sans-serif;
}

.btn{
  border: 1px solid var(--border);
  background: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
}

.btn.primary{
  border-color: rgba(22,163,74,.25);
  background: linear-gradient(135deg, rgba(22,163,74,.12), rgba(225,29,72,.10));
}

.btn:hover{
  filter: brightness(0.98);
}

.navlinks{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

.navlinks a,
.dropdown-toggle{
  padding: 10px 12px;
  border-radius: 999px;
  color: #111827;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.navlinks a:hover,
.dropdown-toggle:hover{
  background: rgba(22,163,74,.08);
  border-color: rgba(22,163,74,.18);
}

.navlinks a.active{
  background: rgba(225,29,72,.08);
  border-color: rgba(225,29,72,.18);
}

.dropdown{
  position: relative;
}

.dropdown-menu{
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 2px; /* very small gap */
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 8px;
  display: none;
  min-width: 190px;
  z-index: 100;
}

.dropdown-menu a{
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 5px;
}

.dropdown:hover .dropdown-menu{
  display: block;
}

.burger{
  display: none;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}

/* desktop */
@media (min-width: 851px){
  .burger{
    display: none;
  }

  .header-bottom{
    display: block;
  }

  .navlinks{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
  }
}

/* mobile */
@media (max-width: 850px){


  .nav-top{
    padding: 12px 0;
    min-height: 84px;
  }

  .burger{
    display: inline-flex;
    order: 1;
  }

  .brand{
    order: 2;
    margin-inline-start: auto;
  }

  .navtools{
    display: none;
  }

  .navlinks{
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 16px;
    right: 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    z-index: 1000;
  }

  .navlinks.open{
    display: flex;
  }

  .navlinks a,
  .dropdown-toggle{
    width: 100%;
    text-align: center;
    padding: 14px 12px;
    border-radius: 14px;
  }

  .dropdown{
    width: 100%;
  }

  .dropdown-menu{
    position: static;
    display: block;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 4px 0 0;
    min-width: auto;
  }

  .dropdown-menu a{
    background: #fafafa;
    margin-top: 4px;
    border-radius: 12px;
  }
}

/* ========== Layout ========== */
.hero{
  margin-top: 20px;
  background: radial-gradient(circle at 15% 25%, rgba(22,163,74,.16), transparent 40%),
              radial-gradient(circle at 85% 20%, rgba(225,29,72,.14), transparent 40%),
              linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
  border: 1px solid var(--border);
  border-radius: 28px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.hero-inner{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  padding: 26px;
  align-items:center;
}
.hero h1{
  margin: 0 0 8px;
  font-size: clamp(22px, 3vw, 34px);
}
.hero p{
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.9;
}
.hero-actions{display:flex; gap: 10px; flex-wrap:wrap}
.hero-illustration{
  align-self:stretch;
  display:grid;
  place-items:center;
  padding: 10px;
}
.hero-illustration .card{
  width: 100%;
  max-width: 360px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.85);
  padding: 16px;
  box-shadow: var(--shadow);
}

@media(max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
}

/* ========== Cards / Sections ========== */
.section{
  margin: 22px 0 10px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
}
.section h2{
  margin:0;
  font-size: 20px;
}
.section .hint{
  color: var(--muted);
  font-size: 13px;
}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.card{
  grid-column: span 4;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.88);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card .card-body{padding: 14px}


.card h3{margin: 0 0 8px; font-size: 30px}

.card p{margin: 0; color: var(--muted); line-height: 1.8; font-size:18px}
.card .tagrow{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.tag{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: #111827;
}
.tag.green{border-color: rgba(22,163,74,.22); background: rgba(22,163,74,.08)}
.tag.pink{border-color: rgba(225,29,72,.22); background: rgba(225,29,72,.08)}
.card .actions{display:flex; justify-content:space-between; align-items:center; padding: 12px 14px; border-top:1px solid var(--border)}
.link{
  font-weight:700;
  color: #0f172a;
}
.link:hover{color: var(--green-600)}

@media(max-width: 1024px){
  .card{grid-column: span 6}
}
@media(max-width: 620px){
  .card{grid-column: span 12}
}

/* ========== Page Title Bar ========== */
.pagehead{
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(255,255,255,.85);
  box-shadow: var(--shadow);
}
.pagehead h1{margin:0 0 6px; font-size: 22px}
.pagehead p{margin:0; color:var(--muted); line-height:1.8}

/* ========== Filters / Lists ========== */
.toolbar{
  margin: 14px 0;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}
.select, .input{
  border:1px solid var(--border);
  background:#fff;
  border-radius: 999px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}

/* Custom arrow for <select> (RTL) */
select.select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7280' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 18px 18px;

  /* في RTL السهم يكون يسار */
  background-position: 14px 50%;

  /* خلي مساحة كافية للسهم على اليسار */
  padding-left: 44px;
}



.input{min-width: 240px;}

/* ========== Detail Layout ========== */
.detail{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr .45fr;
  gap: 14px;
}
.panel{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel .panel-head{
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
}
.panel .panel-body{padding: 14px 16px}
.kv{
  display:grid;
  grid-template-columns: 130px 1fr;
  gap: 10px;
  margin: 10px 0;
}
.kv b{color:#111827}
.muted{color:var(--muted)}
.hr{height:1px; background: var(--border); margin: 12px 0}

.example{
  border: 1px dashed rgba(225,29,72,.35);
  background: rgba(225,29,72,.06);
  border-radius: 14px;
  padding: 12px;
  margin: 10px 0;
  line-height: 1.95;
}
.example .jp{
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 18px;
  direction:ltr;
  text-align:left;
}
.example .kana{
  color: #334155;
  direction:ltr;
  text-align:left;
  font-family: "Noto Sans JP", system-ui, sans-serif;
}
.example .ar{color:#0f172a;
font-size: 18px;}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background:#fff;
  font-size: 12px;
}

@media(max-width: 980px){
  .detail{grid-template-columns: 1fr}
}

/* ========== Footer ========== */
.footer{
  margin-top: 26px;
  padding: 20px 0;
  color: var(--muted);
  font-size: 13px;
  text-align:center;
}




/* ====== Word image (above word) ====== */
.word-image img{
  width: 100%;
  height: 260px;
  max-height: 260px;
  object-position: center;
object-fit: contain;
  display: block;
border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #fff;
  margin-bottom: 14px;
}

/* ====== Kanji title with side image ====== */
.kanji-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.kanji-title{
  margin:0 0 6px;
  font-family:"Noto Sans JP", sans-serif;
  font-size: 48px;
  direction:ltr;
  text-align:left;
}

.kanji-side-image{
  width:120px;
  height:120px;
  object-fit:contain;
  border-radius:14px;
  border:1px solid #e5e7eb;
  background:#fff;

}

#content > div:nth-child(1) > div{
  text-align: left;
}

#head > div > div > p{
  margin-right: 16px;
  font-size: 18px;
}

@media (max-width: 520px){
  .kanji-header{
    flex-direction: row !important;
    align-items: flex-start;
    justify-content: space-between;
  }

  .kanji-side-image{
    width:110px;
    height:110px;
    order: 1;
    flex-shrink: 0;
  }

  .kanji-title{
    order: 2;
  }
}


/* ===== On/Kun Popup ===== */
.no-scroll{ overflow:hidden; }

.popup{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
}

.popup-box{
  width: min(520px, 100%);
  background: #fff;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  padding: 18px 18px 14px;
  line-height: 1.85;
}

.popup-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 6px;
}

.popup-x{
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 10px;
  padding: 6px 10px;
  cursor:pointer;
}

.popup-hr{
  border:0;
  border-top:1px solid #e5e7eb;
  margin: 12px 0;
}

.popup-section{ margin: 10px 0; }
.popup-example{ margin-top: 6px; }

.jp{
  font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  direction:ltr;
  text-align:left;
}

.popup-tip{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.popup-actions{
  display:flex;
  justify-content:flex-end;
  margin-top: 12px;
}

.popup .btn{
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  cursor:pointer;
}

.hidden{ display:none; }


/* ===== Numbers Page ===== */
.num-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.num-big{
  font-size:44px;
  font-weight:800;
  line-height:1;
}
.num-kanji{
  font-size:34px;
  font-weight:800;
  line-height:1.2;
}
.num-img{
  width:110px;
  height:110px;
  object-fit:contain;
  border-radius:14px;
  border:1px solid #e5e7eb;
  background:#fff;
}
.tip{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  background:#f8fafc;
  border-radius:14px;
  line-height:1.8;
}
.ex{
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  margin-top:10px;
}
.jp{
  font-family:"Noto Sans JP", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  direction:ltr;
  text-align:left;
}

/* ===== Numbers (better cards) ===== */
.num-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  box-shadow: 0 8px 30px rgba(0,0,0,.05);
  overflow:hidden;
  padding:14px;
}

.num-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.num-main{ min-width: 0; }

.num-line{
  display:flex;
  align-items:baseline;
  gap:10px;
}

.num-digit{
  font-size:54px;
  font-weight:900;
  line-height:1;
}

.num-kanji{
  font-size:38px;
  font-weight:800;
  line-height:1.1;
}

.num-kana{
  margin-top:6px;
  font-size:15px;
}

.num-meaning{
  margin-top:4px;
  font-size:16px;
  font-weight:600;
}

.num-media{
  width:110px;
  height:110px;
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#f8fafc;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  overflow:hidden;
}

.num-media img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.num-tip{
  margin-top:12px;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  background:#f8fafc;
  border-radius:14px;
  line-height:1.8;
}

.num-section{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #eef2f7;
}

.num-sec-title{
  font-weight:800;
  margin-bottom:8px;
}

.num-rows .row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}

.pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
  font-weight:700;
}

.num-examples .ex{
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  margin-top:10px;
}

@media (max-width: 520px){
  .num-top{ flex-direction:column; }
  .num-media{ width:100%; height:140px; }
}

/* ===== Numbers page grid (fix skinny cards) ===== */
.numbers-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  margin-top: 14px;
  padding: 12px;
}




/* Make home section cards equal height */
.grid{
  align-items: stretch;
}

.grid .card{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.grid .card .card-body{
  flex: 1;
}

.grid .card .actions{
  margin-top: auto;
}

.grid .card-body p{
  min-height: 60px;
}

.card{
  transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover{
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.tag[data-action="onkunguide"]{
  cursor: help;
}

.tag[data-action="onkunguide"]:hover{
  background: #e9f6ed;
  border-color: #7ecb9a;
}

/* ===== Search results look ===== */
.search-results .card h3{
  font-size: 25px;
  margin: 0 0 8px;
  line-height: 1.35;
}

.search-results .card p{
  margin: 0 0 10px;
  color: #6b7280;
}

.search-results .tagrow{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}




.search-results .actions .link{
  font-weight: 800;
}

/* Search / cards with thumbnail */
.card-row{
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.card-main{
  flex: 1;
  min-width: 0;
}

/* container of the image */
.card-thumb{
  width:150px;
  height:120px;

  border-radius:18px;
  border:1px solid #e6e6ef;

  /* background:#f8f9fb; */

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
  padding:12px;
}

/* the image itself */
.card-thumb img{
  max-width:100%;
  max-height:100%;

  width:auto;
  height:auto;

  object-fit: contain;
  object-position: center;
display:block;
}

/* default: cover (great for vocab photos) */
.card-thumb.fit-cover img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
display: block;
}

/* contain: best for kanji/numbers (show full symbol) */
.card-thumb.fit-contain{
  padding: 10px;
}

.card-thumb.fit-contain img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* mobile */
@media (max-width: 700px){
  .card-thumb{ width: 120px; height: 100px; }
}

.card-row{
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.card-main{
  flex: 1;
  min-width: 0;
}

/* Responsive */
@media (max-width: 700px){
  .card-thumb{ width: 120px; height: 100px; padding: 8px; }
}


.detail-media{
  width: 100%;
  max-height: 360px;
  border-radius: 18px;
  border: 1px solid #e6e6ef;
  background: #fff;
  overflow: hidden;
}

.detail-media img{
  width: 100%;
  height: 360px;
  object-fit: contain; /* التفاصيل: يعرض الصورة كاملة بدون قص */
  display: block;
}


.card-title{
  display:flex;
  flex-direction:column;
  gap:4px;
  line-height:1.1;
}

.card-title .word{
  font-size:26px;
  font-weight:800;
}

.card-title .reading{
  font-size:17px;
  color:#6b7280;
}

/* title of cards */
.card-title{
  line-height:1.1;
}

/* first line (emoji + word) */
.card-title .word{
  display:flex;
  align-items:center;
  gap:6px;

  font-size:26px;
  font-weight:800;
}

/* emoji size */
.card-title .word .emoji{
  font-size:22px;
}

/* reading (hiragana) */
.card-title .reading{
  display:block;
  margin-top:3px;

  font-size:16px;
  color:#6b7280;
}

/* grammar cards should stay normal */
.card-title:not(:has(.reading)){
  font-size:20px;
  font-weight:700;
}

/* search result layout */
.card-row{
  display:flex;
  gap:16px;
  align-items:flex-start;
}

.card-thumb{
  width:130px;     /* أصغر شوي */
  height:130px;    /* أطول شوي */
  flex:0 0 130px;  /* يمنعها تتمدد */
}

.card-main{
  flex:1;
  min-width:0;
}

/* keep word on one line when possible */
.card-title .word{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===== Grammar titles only ===== */
.page-grammar .g-title{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
}

.page-grammar .g-ar{
  font-weight:800;
  font-size:22px;
  text-align:center;
}

.page-grammar .g-jp{
  direction:ltr;
  unicode-bidi:isolate;
  font-size:20px;
  font-weight:600;
  letter-spacing:1px;
  text-align:center;
}

/* ===== Restore non-grammar pages ===== */
body:not(.page-grammar) .g-title{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  text-align:right;
}

body:not(.page-grammar) .g-ar{
  text-align:right;
}

body:not(.page-grammar) .g-jp{
  text-align:right;
  direction:ltr;
  unicode-bidi:isolate;
}






.numbers-sections{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.sec-btn{
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  cursor: pointer;
}

.sec-btn.active{
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
@media(max-width:900px){
  .numbers-sections{ grid-template-columns: 1fr; }
}


/* HUB cards (5 sections) */
.hub{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 18px;
}

.hub-card{
  text-align: start;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;

  /* make it feel like square-ish card */
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.hub-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}

.hub-card.active{
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

.hub-top{
  display: flex;
  gap: 12px;
  align-items: center;
}

.hub-emoji{
  font-size: 28px;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.04);
}

.hub-title h3{
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

.hub-title p{
  margin: 4px 0 0;
  font-size: 12px;
  opacity: .75;
}

.hub-tags{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hub-tags .tag{
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  white-space: nowrap;
}



/* Responsive */
@media (max-width: 1100px){
  .hub{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px){
  .hub{ grid-template-columns: 1fr; }
  .hub-card{ min-height: auto; }
}






.pagehead{
  margin-bottom: 14px !important;
}

.hub{
  margin-top: 10px !important;
  margin-bottom: 14px !important;
}


/* Section cards titles */
.hub-title h3{
  font-family: "Tajawal", sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin: 0;
  color: #0f172a;
}

.hub-title p{
  font-family: "Tajawal", sans-serif;
  font-size: 13px;
  margin-top: 4px;
  color: #64748b;
}

.hub-card.active{
  border: 2px solid #86b39a;
  background: #f7faf8;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  transform: translateY(-3px);
}

.hub-card.active::before{
  content:"";
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:5px;
  border-radius:10px 0 0 10px;
  background:#86b39a;
}

.hub-card{
  position: relative;
}

.hub-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
}



#sectionQ{
  display: none;
}

#sectionToolbar[hidden] { display: none !important; }
#sectionToolbar:not([hidden]) { display: flex; gap: 12px; align-items: center; }


/* ===== Numbers Hub ===== */
.hub{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0 22px;
}

@media (max-width: 900px){
  .hub{
    grid-template-columns: 1fr;
  }
}

.hub-card{
  position: relative;
  width: 100%;
  min-height: 170px;
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 24px;
  background: #fff;
  text-align: start;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.hub-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.hub-card.active{
  border: 2px solid #8fb398;
  background: #f8fcf8;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.hub-card.active::before{
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: #8fb398;
  border-radius: 10px 0 0 10px;
}

.hub-top{
  display: flex;
  align-items: center;
  gap: 14px;
}

.hub-emoji{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #f6f6f6;
  font-size: 30px;
  flex-shrink: 0;
}

.hub-title h3{
  margin: 0;
  font-family: "Tajawal", sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #111827;
}

.hub-title p{
  margin: 6px 0 0;
  font-family: "Tajawal", sans-serif;
  font-size: 13px;
  color: #6b7280;
}

.hub-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
    font-family: "Tajawal", sans-serif;

}



/* تحسين مسافة toolbar داخل numbers panel */
#numbersPanel .toolbar{
  margin: 12px;
  margin-bottom: 18px;
}

/* placeholders */
.section-placeholder{
  margin-top: 18px;
}

.placeholder-card{
  border-radius: 24px;
}


.section-card .num-digit{
  font-size: 24px;
  line-height: 1.4;
}

.section-card .num-kanji{
  font-size: 18px;
}

.section-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.section-card .num-tip{
  line-height: 1.9;
}

.panel .toolbar{
  margin-bottom: 18px;
}

.panel .numbers-grid{
  margin-top: 0;
}


.section-panel{
  margin-top: 18px;
}

.section-head{
  margin: 18px 0;
}

.section-head h2{
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 800;
}

.counter-hero{
  background: linear-gradient(135deg, #f8fcf8, #fff);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.counter-hero h3{
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 800;
}

.counter-hero-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.counter-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.counter-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 24px;
  padding: 18px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  box-shadow: 0 10px 24px rgba(15,23,42,.04);
}

.counter-media{
  width: 88px;
  height: 88px;
  border-radius: 22px;
  background: #f8fafc;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}

.counter-media img{
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.counter-title-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.counter-main h3{
  margin: 0;
  font-size: 24px;
  font-weight: 800;
}

.counter-main p{
  margin: 8px 0;
  color: #475569;
  line-height: 1.8;
}

.counter-mini-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
}

.mini-tag{
  padding: 5px 10px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid rgba(15,23,42,.08);
  font-size: 12px;
}

.counter-example{
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px dashed rgba(15,23,42,.08);
}

.mini-info-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.mini-info-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 8px 22px rgba(15,23,42,.04);
}

.mini-info-icon{
  font-size: 24px;
  margin-bottom: 8px;
}

.mini-info-card h3{
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 800;
}

.table-card,
.calendar-card,
.example-box{
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: 0 10px 24px rgba(15,23,42,.04);
}

.study-table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
}

.study-table th,
.study-table td{
  padding: 12px 10px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  text-align: start;
}

.study-table th{
  font-weight: 800;
  background: #f8fafc;
}

.study-table tr:last-child td{
  border-bottom: 0;
}

.calendar-head{
  margin-bottom: 16px;
}

.days-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.day-box{
  background: #f8fafc;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 92px;
  justify-content: space-between;
}

.day-box.highlight{
  border-color: #8fb398;
  background: #f8fcf8;
  box-shadow: 0 6px 16px rgba(143,179,152,.15);
}

.day-num{
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
}

.example-box h3,
.table-card h3,
.calendar-card h3{
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 800;
}

.example-box hr{
  margin: 16px 0;
  border: 0;
  border-top: 1px solid rgba(15,23,42,.08);
}

@media (max-width: 900px){
  .counter-hero{
    flex-direction: column;
    align-items: flex-start;
  }

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

  .mini-info-grid{
    grid-template-columns: 1fr 1fr;
  }

  .days-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.section-panel{
  margin-top: 18px;
}

.section-head{
  margin-bottom: 18px;
}

.section-head h2{
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 800;
}

.table-note{
  margin: 0 0 14px;
  color: #64748b;
  line-height: 1.9;
}

.counter-hero{
  background: linear-gradient(135deg, #f8fcf8, #fff);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.counter-hero h3{
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 800;
}

.counter-hero-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.counter-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.counter-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 24px;
  padding: 18px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  box-shadow: 0 10px 24px rgba(15,23,42,.04);
}

.counter-media{
  width: 88px;
  height: 88px;
  border-radius: 22px;
  background: #f8fafc;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}

.counter-media img{
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.counter-title-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.counter-main h3{
  margin: 0;
  font-size: 24px;
  font-weight: 800;
}

.counter-main p{
  margin: 8px 0;
  color: #475569;
  line-height: 1.8;
}

.counter-note{
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px dashed rgba(15,23,42,.08);
  line-height: 1.8;
}

.counter-example{
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px dashed rgba(15,23,42,.08);
}

.mini-info-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.mini-info-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 8px 22px rgba(15,23,42,.04);
}

.mini-info-icon{
  font-size: 24px;
  margin-bottom: 8px;
}

.mini-info-card h3{
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 800;
}

.table-card,
.calendar-card,
.example-box{
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: 0 10px 24px rgba(15,23,42,.04);
}

.study-table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
}

.study-table th,
.study-table td{
  padding: 12px 10px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  text-align: start;
  vertical-align: top;
}

.study-table th{
  font-weight: 800;
  background: #f8fafc;
}

.study-table tr:last-child td{
  border-bottom: 0;
}

.calendar-head{
  margin-bottom: 16px;
}

.days-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.day-box{
  background: #f8fafc;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 92px;
  justify-content: space-between;
}

.day-box.highlight{
  border-color: #8fb398;
  background: #f8fcf8;
  box-shadow: 0 6px 16px rgba(143,179,152,.15);
}

.day-num{
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
}

.example-box h3,
.table-card h3,
.calendar-card h3{
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 800;
}

.example-box hr{
  margin: 16px 0;
  border: 0;
  border-top: 1px solid rgba(15,23,42,.08);
}

.study-list{
  margin: 0;
  padding-inline-start: 18px;
  line-height: 2;
}

@media (max-width: 900px){
  .counter-hero{
    flex-direction: column;
    align-items: flex-start;
  }

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

  .mini-info-grid{
    grid-template-columns: 1fr 1fr;
  }

  .days-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


.counter-hero-badges.under-text{
  margin-top: 14px;
}

.counters-table th,
.counters-table td{
  vertical-align: middle;
}

.counters-table td .jp{
  line-height: 1.7;
}

.counters-table td .muted{
  margin-top: 4px;
  display: block;
}

.counter-note{
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px dashed rgba(15,23,42,.08);
  line-height: 1.9;
}


/* Center the first two columns only */
.counters-table th:nth-child(1),
.counters-table td:nth-child(1),
.counters-table th:nth-child(2),
.counters-table td:nth-child(2) {
  text-align: center !important;
}

#countersPanel .toolbar,
#timePanel .toolbar,
#datesPanel .toolbar,
#periodPanel .toolbar{
  display: inline;
}





/* Add side space inside all 4 sections */
#countersPanel,
#timePanel,
#datesPanel,
#periodPanel {
  padding: 32px !important;
}


#countersPanel > div.example-box{
  margin: 18px 0;
}


/* Time section top cards */
.time-mini-card .time-mini-line{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  margin-bottom: 10px;
}

.time-mini-card .mini-info-icon{
  margin-bottom: 0;
  font-size: 24px;
  flex-shrink: 0;
}

.time-mini-card h3{
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
}

.time-mini-card .jp{
  font-size: 20px;
  white-space: nowrap;
}


.time-mini-card p{
  margin: 0;
  line-height: 1.8;
}

/* Center only Japanese + Reading columns in Time tables */
#timePanel .study-table th:nth-child(2),
#timePanel .study-table td:nth-child(2),
#timePanel .study-table th:nth-child(3),
#timePanel .study-table td:nth-child(3){
  text-align: center !important;
}
/* Dates section top cards */
.dates-mini-card .dates-mini-line{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  margin-bottom: 10px;
}

.dates-mini-card .mini-info-icon{
  margin-bottom: 0;
  font-size: 24px;
  flex-shrink: 0;
}

.dates-mini-card h3{
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  white-space: nowrap;
}

.dates-mini-card .jp{
  font-size: 20px;
  white-space: nowrap;
}

.dates-mini-card p{
  margin: 0;
  line-height: 1.8;
}

/* Center only Japanese + Reading columns in Dates tables */
#datesPanel .study-table th:nth-child(2),
#datesPanel .study-table td:nth-child(2),
#datesPanel .study-table th:nth-child(3),
#datesPanel .study-table td:nth-child(3){
  text-align: center !important;
}

/* Better spacing for dates calendar */
#datesPanel .days-grid{
  margin-top: 10px;
}

#datesPanel .day-box{
  align-items: center;
  text-align: center;
}

#datesPanel .day-box .jp{
  line-height: 1.7;
  font-size: 18px;
}

/* Special readings more visible */
#datesPanel .day-box.highlight{
  border-width: 2px;
}

/* Top cards responsive */
.dates-top-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px){
  .dates-top-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Arabic titles inside mini cards */
.mini-info-card h3{
  font-weight: 500;
}

.dates-pattern{
  font-size: 20px;
  margin-top: 6px;
  margin-bottom: 6px;
  text-align: center;
}


/* Period top cards: icon + Arabic + Japanese in one line */
.period-mini-line{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  margin-bottom: 10px;
}

.period-mini-line .mini-info-icon{
  margin-bottom: 0;
  font-size: 24px;
  flex-shrink: 0;
}

.period-mini-line h3{
  margin: 0;
  font-size: 20px;
  white-space: nowrap;
}

.period-mini-line .jp{
  font-size: 20px;
  white-space: nowrap;
}

/* Center only Japanese + Reading columns in Period tables */
#periodPanel .study-table th:nth-child(2),
#periodPanel .study-table td:nth-child(2),
#periodPanel .study-table th:nth-child(3),
#periodPanel .study-table td:nth-child(3){
  text-align: center !important;
}

/* note box for rules */

.note-box{
  margin-top: 18px;
  padding: 16px 18px;
  background: #f8fafc;
  border: 1px dashed rgba(15,23,42,.15);
  border-radius: 16px;
  line-height: 1.9;
}

.note-box strong{
  display:block;
  margin-bottom:6px;
  font-size: 20px;
}

.note-box .rule{
  margin:8px 0;
  font-size:18px;
  font-weight:600;
  text-align:center;
}

.note-box .example{
  margin-top:6px;
}

#periodPanel > div:nth-child(6){
  margin-top: 16px;
}

/* Section search bars */
.section-searchbar{
  margin: 8px 0 20px;
  display: flex;
  justify-content: center;
}

.search-field-wrap{
  width: min(100%, 460px);
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 999px;
  padding: 10px 16px;
  box-shadow: 0 8px 20px rgba(15,23,42,.04);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.search-field-wrap:focus-within{
  border-color: #8fb398;
  box-shadow: 0 10px 24px rgba(143,179,152,.18);
  transform: translateY(-1px);
}

.search-icon{
  font-size: 18px;
  line-height: 1;
  opacity: .75;
  flex-shrink: 0;
}

.section-search-input{
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 100%;
  /* padding: 0 !important; */
  font-size: 17px;
  color: #0f172a;
  padding-top: 0;
  padding-bottom: 0;
}

.section-search-input::placeholder{
  color: #94a3b8;
  font-size: 16px;
}


/* =========================
   Numbers page sub-sections only
   ========================= */

#numbersPanel,
#countersPanel,
#timePanel,
#datesPanel,
#periodPanel{
  display: none;
}

#numbersPanel.open,
#countersPanel.open,
#timePanel.open,
#datesPanel.open,
#periodPanel.open{
  display: block;
}

/* =========================
   Detail pages panels must stay visible
   ========================= */

.detail > .panel,
.detail article.panel,
.detail aside.panel{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
}

/* =========================
   Improve vocab / kanji card text
   ========================= */

/* container for japanese text */
.card-title-main{
  display:block;
  font-family:"Noto Sans JP","Tajawal",sans-serif;
  font-size:34px;
  line-height:1.2;
  margin-bottom:4px;
  letter-spacing:0.02em;
}

/* hiragana line */
.card-title-sub{
  display:block;
  font-family:"Noto Sans JP","Tajawal",sans-serif;
  font-size:20px;
  line-height:1.4;


  /* spacing between kana characters */
  letter-spacing:0.05em;

  color:var(--pink-600);
  margin-bottom: 18px;
}

/* ensure vertical stacking */
.card-main{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

/* spacing before meaning */
.card-desc{
  margin-top:4px;
  margin-bottom:16px;
  font-size:16px;
  color:#475569;
}

/* improve tags spacing */
.card-main .tagrow{
  margin-top:10px;
  gap:10px;
}

/* responsive improvement */
@media (max-width:900px){

  .card-title-main{
    font-size:28px;
  }

  .card-title-sub{
    font-size:18px;
  }

}


.card .card-desc{
  font-size:18px;
}


/* =========================
   Clear tap/expand hint for small screens
   ========================= */

.hub-action-hint{
  display: none;
}

@media (max-width: 1024px){
  .hub-action-hint{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(15,23,42,.08);
    color: #64748b;
    font-size: 13px;
  }

  .hub-hint-arrow{
    font-size: 18px;
    line-height: 1;
    transition: transform .2s ease;
  }

  .hub-card.active .hub-hint-text{
    color: #365314;
    font-weight: 600;
  }

  .hub-card.active .hub-hint-text::before{
    content: "المحتوى ظاهر أسفل";
  }

  .hub-card.active .hub-hint-text{
    font-size: 0;
  }

  .hub-card.active .hub-hint-arrow{
    transform: rotate(180deg);
    color: #365314;
  }
}





/* =========================
   Mobile section-focus mode
   ========================= */

.mobile-back-wrap{
  margin: 12px 0 18px;
}

.mobile-back-btn{
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  color: #0f172a;
  border-radius: 999px;
  padding: 10px 16px;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15,23,42,.05);
}

@media (max-width: 900px){

  /* normal mobile layout */
  .hub{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* when one section is opened on mobile */
  body.mobile-section-open .hub-card{
    display: none;
  }

  body.mobile-section-open .hub-card.active{
    display: block;
  }

  body.mobile-section-open .hub{
    grid-template-columns: 1fr;
  }

  body.mobile-section-open .hub-card.active{
    margin-bottom: 12px;
  }
}


/* =========================
   Fix Time + Period header cards on iPhone / small screens
   ========================= */

@media (max-width: 600px){

  .time-top-grid,
  .period-top-grid{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .time-mini-card,
  .period-mini-card{
    padding: 14px 16px !important;
  }

  /* first line: icon + arabic title only */
  .time-mini-line,
  .period-mini-line{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    margin-bottom: 8px;
  }

  .time-mini-line .mini-info-icon,
  .period-mini-line .mini-info-icon{
    flex-shrink: 0;
    font-size: 22px;
  }

  .time-mini-line h3,
  .period-mini-line h3{
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    white-space: normal;
  }

  /* japanese part goes on new line */
  .time-mini-line .jp,
  .period-mini-line .jp{
    display: block;
    width: 100%;
    margin-top: 6px;
    margin-inline-start: 32px;
    font-size: 18px;
    line-height: 1.4;
    color: #64748b;
    white-space: normal;
  }

  .time-mini-card p,
  .period-mini-card p{
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
  }
}

/* =====================================
   Small screens fixes for Numbers pages
   ===================================== */
@media (max-width: 600px){

  /* 1) Make Japanese reading stay in one line inside tables */
  .study-table td.jp,
  .study-table th.jp,
  .study-table td:nth-child(2),
  .study-table td:nth-child(3),
  .study-table th:nth-child(2),
  .study-table th:nth-child(3){
    white-space: nowrap;
    word-break: normal !important;
    overflow-wrap: normal !important;
    font-size: 15px;
    line-height: 1.6;
  }

  /* if table is tight, make it scroll horizontally instead of breaking words */
  .table-card{
    overflow-x: auto;
  }

  .study-table{
    min-width: 520px;
  }

  /* 2) Example box: each example on separate line clearly */
  .example-box .jp,
  .note-box .jp{
    display: block;
    white-space: normal;
    line-height: 1.9;
    margin-bottom: 6px;
  }

  .example-box .example,
  .note-box .example{
    display: block;
    margin-top: 8px;
    line-height: 1.9;
  }

  /* if you have inline examples separated by commas, make spans stack nicely */
  .example-box span,
  .note-box span{
    line-height: 1.9;
  }

  /* 3) Dates top cards same style as time / period */
  .dates-top-grid{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .dates-mini-card{
    padding: 14px 16px !important;
  }

  .dates-mini-line{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
  }

  .dates-mini-line .mini-info-icon{
    flex-shrink: 0;
    font-size: 22px;
    margin-bottom: 0;
  }

  .dates-mini-line h3{
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    white-space: normal;
    font-weight: 600;
  }

  .dates-mini-line .jp{
    display: block;
    width: 100%;
    margin-top: 6px;
    margin-inline-start: 32px;
    font-size: 18px;
    line-height: 1.4;
    color: #64748b;
    white-space: normal;
  }

  .dates-mini-card p{
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
  }
}


.tag.blue{
  border-color: rgba(59,130,246,.22);
  background: rgba(59,130,246,.08);
}

.level-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.level-tags .tag{
  font-size: 11px;
  padding: 6px 10px;
}

/* JLPT levels */

.tag.level-n5{
  background:#e8f7e9;
  color:#2e7d32;
  border:1px solid #b8e0bb;
}

.tag.level-n4{
  background:#e7f1ff;
  color:#1e5bb8;
  border:1px solid #b9d3ff;
}

.tag.level-n3{
  background:#fff3e0;
  color:#c77700;
  border:1px solid #ffd9a8;
}

.tag.level-n2{
  background:#f3e8ff;
  color:#6b3fa0;
  border:1px solid #d9c3ff;
}

.tag.level-n1{
  background:#ffe9ec;
  color:#c62839;
  border:1px solid #ffc2c8;
}

.tag.yellow-orange{
  background: #FFF3E0;
  color: #C77700;
  border: 1px solid #FFD9A8;
}


/* keep homepage level tags stable */
.card .tagrow{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.card .level-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  clear: both;
}

.card .level-tags .tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
}

/* fix hint line + arrow position inside numbers cards */
.hub-action-hint{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  width: 100%;
  margin-top: 14px;
  padding-top: 12px;

  border-top: 1px dashed rgba(15,23,42,.10);
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
  box-sizing: border-box;
}

.hub-hint-text{
  flex: 1;
  text-align: right;
}

.hub-hint-arrow{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  margin: 0;
  transform: translateY(1px);
}

/* mobile cards */
@media (max-width: 900px){
  .hub-card{
    display: flex;
    flex-direction: column;
  }

  .hub-tags{
    margin-bottom: 12px;
  }

  .hub-action-hint{
    margin-top: auto;
  }
}

/* fix hint line + arrow position inside numbers cards */
.hub-action-hint{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  width: 100%;
  margin-top: 14px;
  padding-top: 12px;

  border-top: 1px dashed rgba(15,23,42,.10);
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
  box-sizing: border-box;

}

.hub-hint-text{
  flex: 1;
  text-align: right;
}

.hub-hint-arrow{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  margin: 0;
  transform: translateY(1px);
}




.day-box{
  text-align: center;
  overflow: hidden;
}

.day-box .jp{
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-break: strict !important;

  font-size: clamp(11px, 3.4vw, 18px) !important;
  line-height: 1.4;
  letter-spacing: 0;
  display: block;
  max-width: 100%;
}

@media (max-width: 600px){
  .day-box .jp{
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict !important;
    font-size: 13px !important;
    line-height: 1.35;
    display: block;
    max-width: 100%;
  }

  .day-box .jp.long-reading{
    font-size: 12px !important;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 1024px){
  .day-box .jp{
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict !important;
    font-size: 16px !important;
    line-height: 1.35;
    display: block;
    max-width: 100%;
  }

  .day-box .jp.long-reading{
    font-size: 14px !important;
    letter-spacing: -0.02em;
  }
}


.search-field-wrap{
  display: flex;
  align-items: center;
}

.search-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

@media (max-width: 1024px){
  .search-icon{
    margin-top: 3px;
    font-size: 20px;
    padding: 6px;
  }
}



.search-field-wrap{
  margin-bottom: 60px;
}

.study-list{
  list-style: none;
  padding: 0;
  margin-top: 14px;
}

.study-list li{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  line-height:1.6;
}


@media (max-width: 600px){
  .example-box .study-list{
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
  }

  .example-box .study-list li{
    position: relative;
    display: block;
    margin-bottom: 14px;
    padding-right: 22px; /* space for bullet on the right */
    line-height: 1.9;
    text-align: right;
  }

  .example-box .study-list li::before{
    content: "•";
    position: absolute;
    right: 0;
    top: 0.15em;
    line-height: 1;
    color: #64748b;
    font-size: 25px;
  }

  .example-box .study-list .jp{
    white-space: nowrap;
    display: inline;
  }
}

@media (max-width: 600px){

  .counter-grid .counter-card{
    display: block !important;
  }

  .counter-grid .counter-card > .counter-media{
    float: right;
    width: 88px !important;
    height: 88px !important;
    margin: 0 0 12px 12px !important;
    display: grid !important;
    place-items: center !important;
  }

  .counter-grid .counter-card > .counter-media img{
    width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
  }

  .counter-grid .counter-card > .counter-main{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* النص العلوي يلتف بجانب الصورة */
  .counter-grid .counter-card > .counter-main > p:first-of-type{
    margin-top: 8px;
  }

  /* الصناديق الرمادية تبدأ بعد الصورة وتأخذ العرض الكامل */
  .counter-grid .counter-card .counter-note,
  .counter-grid .counter-card .counter-example{
    clear: both;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 0 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 600px){
  .counter-card .counter-main > p:first-of-type{
    margin-bottom: 24px !important;
    display: block !important;
  }
}


/* ===== Counters section fix for phone screens ===== */
@media (max-width: 768px){

  /* card layout */
  .counter-grid .counter-card{
    display: block !important;
  }

  /* keep image on the right at the top only */
  .counter-grid .counter-card > .counter-media{
    float: right !important;
    width: 88px !important;
    height: 88px !important;
    margin: 0 0 14px 14px !important;
    display: grid !important;
    place-items: center !important;
  }

  .counter-grid .counter-card > .counter-media img{
    width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* main text area takes full width */
  .counter-grid .counter-card > .counter-main{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* first description under title */
  .counter-grid .counter-card > .counter-main > p{
    margin: 10px 0 18px 0 !important;
    line-height: 1.8 !important;
  }

  /* gray info boxes must span full card width under floated image */
  .counter-grid .counter-card .counter-note,
  .counter-grid .counter-card .counter-example{
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 0 0 !important;
    box-sizing: border-box !important;
  }

  /* quick notes box */
  #countersPanel .example-box{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* quick notes list */
  #countersPanel .study-list{
    list-style: none !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
  }

  #countersPanel .study-list li{
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 14px 0 !important;
    padding-right: 22px !important;
    line-height: 1.9 !important;
    text-align: right !important;
  }

  #countersPanel .study-list li::before{
    content: "•" !important;
    position: absolute !important;
    right: 0 !important;
    top: 0.15em !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: #64748b !important;
  }

  #countersPanel .study-list li .jp{
    display: inline !important;
    white-space: nowrap !important;
  }
}

/* quick notes bullets - default for all screens */
#countersPanel .study-list{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

#countersPanel .study-list li{
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 14px 0;
  padding-right: 22px;
  line-height: 1.9;
  text-align: right;
}

#countersPanel .study-list{
  list-style: disc;
  padding-right: 22px;
}

#countersPanel .study-list li{
  display: list-item;
}

#countersPanel .study-list li .jp{
  display: inline;
  white-space: nowrap;
}

/* time cards titles fix for phone */
@media (max-width: 600px){

  .time-mini-line h3{
    white-space: nowrap;
    font-size: clamp(16px, 4vw, 20px);
  }

    #timePanel .example-box > p:first-of-type{
    display: block !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  #timePanel .example-box > p:first-of-type .jp{
    display: inline !important;
    white-space: nowrap !important;
  }

  

}

@media (max-width: 400px){
  .days-grid .day-box .jp{
    font-size: 12px !important;
  }
  .days-grid .day-box .jp.long-reading{
    font-size: 10px !important;
  }
  body > header > div > nav > div.navtools > a{
    text-align: center;
    font-size: 14px;
  }
}



@media (max-width:700px){

  #datesPanel > div.example-box.searchable-item > p{
  background:#eaf7ee;          /* light green background */
  border:2px dashed #5e9f63;    /* darker green border */
  border-radius:14px;
  padding:18px;
  margin:18px 0;
 }

  #equal{
    text-align: center ;
    display: block;
  }

#datesPanel > div.example-box.searchable-item > p > span:nth-child(1), #datesPanel > div.example-box.searchable-item > p > span:nth-child(3){
  text-align: center;
}



/* fix notes layout in phone */
#periodPanel > div.note-box.searchable-item > p{

 display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:6px;
  text-align:center;
}

/* keep ranges like 2–10 together */
#datesPanel .example-box p span{
  white-space:nowrap;
}

#periodPanel > div.note-box.searchable-item > p:nth-child(3){
  margin-bottom: 0;
}

#periodPanel > div.note-box.searchable-item > div.jp.rule{
margin-top: 0;
margin-bottom: 20px;
}  

#periodPanel > div:nth-child(6) > p > span{
  white-space: nowrap;
}

}


#content > div:nth-child(1) > div{
  text-align: right;
}

#content > div:nth-child(1) > div{
  text-align: left;
}






/* =========================
   Grammar cards titles
   ========================= */

/* card content wrapper */
#list > article > div.card-body > div > div{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}



/* inner title wrapper */
#list > article > div.card-body > div > div > h3 > span{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

/* Arabic title */
#list > article > div.card-body > div > div > h3 > span > span.g-ar{
  font-weight: 800;
  line-height: 1.25;
  color: #0f172a;
  text-align: center;
  margin: 0;
  font-size: 1.5rem;
}

#list > article > div.card-body > div > div > h3 > span > span.g-jp{
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  color: #64748b;
  text-align: center;
  margin: 0;
  direction: ltr;
  unicode-bidi: isolate;
  min-height: 28px; /* يحجز مكان حتى لو العنوان الياباني غير موجود */
  display: flex;
  align-items: center;
  justify-content: center;
}

#list > article > div.card-body > div > div > h3 > span > span.g-jp:empty{
  visibility: hidden; /* يخفي النص لكن يبقي مكانه */
}

/* =========================
   Summary text
   ========================= */

/* adjust this selector if your summary is not the first p */
#list > article > div.card-body > div > div > p{
  text-align: right;
  margin: 0 0 14px 0;
  min-height: 60px;
  line-height: 1.8;
  color: #6b7280;
  padding: 0 10px;
}

/* =========================
   Tags row
   ========================= */

/* common tags container possibilities */
#list > article .tags,
#list > article .chips,
#list > article .badges,
#list > article .meta-tags{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 42px;
}

/* if tags are direct buttons/spans inside a wrapper */
#list > article .tags > *,
#list > article .chips > *,
#list > article .badges > *,
#list > article .meta-tags > *{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =========================
   Optional: keep action/footer aligned
   ========================= */

#list > article{
  display: flex;
  flex-direction: column;
}

#list > article > div.card-body{
  height: 100%;
}

#list > article > div.card-body > div{
  height: 100%;
}


#content > div:nth-child(1) > div{
  text-align: right;
}





/* ===== Grammar detail page fixes ===== */
.pagehead.grammar-detail-head{
  text-align: center;
}

.grammar-header-wrap{
  text-align: center;
}

.grammar-title-ar{
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.25;
  color: #0f172a;
}

.grammar-title-jp{
  margin-top: 10px;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  color: #64748b;
}

.grammar-summary{
  margin-top: 14px;
  text-align: center;
}

.jp-inline{
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

.tips-box{
  margin-top: 12px;
  margin-bottom: 18px;
  padding: 14px 16px;
  background: #eef9f1;
  border: 1px solid #cfe8d4;
  border-radius: 14px;
}

.tips-title{
  font-weight: 800;
  color: #166534;
  margin-bottom: 10px;
}

.tips-list{
  margin: 0;
  padding-inline-start: 18px;
  line-height: 1.9;
}

.tips-list li{
  color: #14532d;
}


/* isolate japanese text inside arabic layout */
.jp-text{
  direction:ltr;
  unicode-bidi:isolate;
  display:inline-block;
  font-family:"Noto Sans JP", "Hiragino Kaku Gothic Pro", sans-serif;
}

/* japanese example sentences */
.jp-example{
  direction:ltr;
  unicode-bidi:isolate;
  text-align:left;
  display:inline-block;
}

/* fix japanese dot position */
.jp-example::after{
  unicode-bidi:isolate;
}


#content > div:nth-child(3) > div{
  text-align: right;
}




/* title block */

/* ===== Grammar cards only ===== */
.page-grammar #list article h3{
  text-align: center !important;
}

.page-grammar #list article h3 > span{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.page-grammar #list article h3 .g-ar{
  text-align: center !important;
}

.page-grammar #list article h3 .g-jp{
  text-align: center !important;
  direction: ltr;
  unicode-bidi: isolate;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-grammar #list article h3 .g-jp:empty{
  visibility: hidden;
}

/* ===== Restore other pages ===== */
body:not(.page-grammar) #list article h3{
  text-align: right !important;
}

body:not(.page-grammar) #list article h3 > span{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
}

body:not(.page-grammar) #list article h3 .g-ar,
body:not(.page-grammar) #list article h3 .g-jp{
  text-align: right !important;
}




.page-grammar .g-title{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:10px !important;
  text-align:center !important;
}

.page-grammar .g-ar{
  text-align:center !important;
}

.page-grammar .g-jp{
  text-align:center !important;
  direction:ltr !important;
  unicode-bidi:isolate !important;
}

body:not(.page-grammar) .g-title{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:6px !important;
  text-align:right !important;
}

body:not(.page-grammar) .g-ar,
body:not(.page-grammar) .g-jp{
  text-align:right !important;
}



/* ===== Force grammar card titles only ===== */
.page-grammar #list article h3{
  width: 100% !important;
  margin: 0 0 12px 0 !important;
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
}

.page-grammar #list article h3 .g-title{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}

.page-grammar #list article h3 .g-ar,
.page-grammar #list article h3 .g-jp{
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

.page-grammar #list article h3 .g-jp{
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

/* ===== Keep other pages right-aligned ===== */
body:not(.page-grammar) #list article h3{
  text-align: right !important;
  display: block !important;
}

body:not(.page-grammar) #list article h3 .g-title{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: right !important;
  width: 100% !important;
}

body:not(.page-grammar) #list article h3 .g-ar,
body:not(.page-grammar) #list article h3 .g-jp{
  display: block !important;
  width: 100% !important;
  text-align: right !important;
}



#list > article > div.card-body > div > div.card-main > h3{
  font-size: 1.5rem;
}


/* =========================
   Japanese text in ALL cards
   never split into two lines
   ========================= */

/* Japanese title / reading lines in cards */
#list article .g-jp,
#list article .reading,
#list article .kana,
#list article .title-jp,
#list article .jp-word,
#list article .jp-reading {
  display: inline-block !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-break: strict !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  letter-spacing: 0 !important;
}



/* Grammar cards: keep Japanese centered */
.page-grammar #list article .g-jp,
.page-grammar #list article .title-jp {
  display: block !important;
  text-align: center !important;
  margin-inline: auto !important;
}

/* Non-grammar cards: keep Japanese on the right side */
body:not(.page-grammar) #list article .g-jp,
body:not(.page-grammar) #list article .reading,
body:not(.page-grammar) #list article .kana,
body:not(.page-grammar) #list article .title-jp,
body:not(.page-grammar) #list article .jp-word,
body:not(.page-grammar) #list article .jp-reading {
  display: block !important;
  text-align: right !important;
  margin-left: auto !important;
}

/* Give the text area permission to shrink correctly */
#list article .card-body,
#list article .card-body > div,
#list article .card-body > div > div,
#list article .g-title {
  min-width: 0 !important;
}




/* =========================
   1) Any Japanese text inside card summaries
   ========================= */
#list article p,
#list article .summary,
#list article .card-summary,
#list article .muted{
  overflow-wrap: normal;
  word-break: normal;
}

#list article p .jp-inline,
#list article .summary .jp-inline,
#list article .card-summary .jp-inline,
#list article .muted .jp-inline{
  display: inline-block !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-break: strict !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

/* =========================
   2) Japanese main words in vocab / kanji cards
   ========================= */
#list article h3,
#list article .title,
#list article .word-title,
#list article .kanji-title{
  min-width: 0 !important;
}

#list article h3,
#list article .title,
#list article .word-title,
#list article .kanji-title,
#list article .word,
#list article .kanji,
#list article .reading,
#list article .kana{
  overflow: visible !important;
}

#list article .word,
#list article .kanji,
#list article .reading,
#list article .kana{
  display: inline-block !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-break: strict !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  max-width: 100% !important;
}

/* main Japanese word */
#list article .word,
#list article .kanji{
  font-size: clamp(1rem, 3vw, 2.2rem) !important;
  line-height: 1.1 !important;
}

/* reading */
#list article .reading,
#list article .kana{
  font-size: clamp(0.9rem, 2.2vw, 1.5rem) !important;
  line-height: 1.15 !important;
}

/* keep grammar card titles centered only */
.page-grammar #list article .g-title,
.page-grammar #list article h3{
  text-align: center !important;
}

/* keep vocab/kanji/etc right aligned */
body:not(.page-grammar) #list article h3,
body:not(.page-grammar) #list article .title,
body:not(.page-grammar) #list article .word-title,
body:not(.page-grammar) #list article .kanji-title{
  text-align: right !important;
}





/* =========================
   Fix Japanese words in cards
   ========================= */

/* main Japanese word (vocab + kanji) */
#list article .card-title-main{
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: strict;
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  max-width: 100%;
}

/* reading */
#list article .card-title-sub{
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: strict;
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  max-width: 100%;
}

/* allow text column to shrink correctly */
#list article .card-body > div:first-child > div:last-child{
  min-width: 0;
}

/* summary text in grammar cards */
#list article .card-desc{
  line-height: 1.6;
}

#list article .jp-inline{
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: strict;
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}






/* allow wide cards */


/* @media(max-width: 1400px){
  .card{grid-column: span 6}
} */


/*check the following sizes line!!*/

 @media(max-width: 850px){
  .card{grid-column: span 6}
} 

 @media(max-width:600px){
  .card{grid-column: span 12}
} 




@media (max-width: 400px){

  .card-title-main{
    font-size: 18px !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
  }

  .card-title-sub{
    font-size: 14px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
  }

   .card-row img{
    width: 60px;
    height: 60px;
  }


}




/* =====================================================
   FINAL GRAMMAR TITLE FIX
   Keeps Arabic title natural and Japanese token at the end
   without changing the data structure.
   ===================================================== */
.page-grammar .card-title-main{
  direction: rtl !important;
  unicode-bidi: plaintext !important;
  text-align: center !important;
  width: 100% !important;
  display: block !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.25 !important;
}

.page-grammar .card-title-sub{
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: center !important;
  width: 100% !important;
  display: block !important;
}

.page-grammar .card-main{
  align-items: center !important;
  text-align: center !important;

}
/* 
.page-grammar .card-desc{
  text-align: center !important;
} */

/* .page-grammar .tagrow{
  justify-content: center !important;
} */




/* =========================================
   VOCAB CARDS ON DESKTOP:
   image on top, full width
   ========================================= */
/* @media (min-width: 1024px){ */

  .page-vocab .card-row{
    display:flex !important;
    flex-direction:column-reverse !important;
    align-items:center !important;
    gap:18px !important;
    width:100% !important;
  }

  .page-vocab .card-thumb{
    width:100% !important;
    height:220px !important;
    flex:0 0 auto !important;
    margin:0 auto !important;
    border-radius:22px !important;
    padding:16px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .page-vocab .card-thumb img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    display:block !important;
  }

  .page-vocab .card-main{
    width:100% !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
  }

  .page-vocab .card-title-main{
    width:100% !important;
    text-align:center !important;
  }

  .page-vocab .card-title-sub{
    width:100% !important;
    text-align:center !important;
  }

  .page-vocab .card-desc{
    width:100% !important;
    text-align:center !important;
  }

  /* .page-vocab .tagrow{
    width:100% !important;
    justify-content:center !important;
  } */
/* } */








/* fix arabic + japanese mixed text */
.card-desc{
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: center;
  line-height: 1.8;
}

.jp-inline{
  direction: ltr;
  unicode-bidi: isolate;
  font-family: "Noto Sans JP", sans-serif;
}



.page-vocab #list > article > div.card-body > div > div.card-main > h3{
  text-align: center !important;
}


/* ===== Grammar cards: align tags and add more space under JP subtitle ===== */

/* make the inner content fill the card height */
.page-grammar #list > article > .card-body{
  display: flex;
}

.page-grammar #list > article > .card-body > .card-row{
  width: 100%;
}

.page-grammar #list > article .card-main{
  min-height: 100%;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}


/* keep summary block consistent */
.page-grammar .card-desc{
  width: 100% !important;
  margin-bottom: 18px !important;
}













body > main > section.hero > div > div.hero-illustration > div > h3{
  font-weight:800;
font-size: 30px; 
 letter-spacing:0.5px;


  display: inline-block;
  line-height: 1.3;
  padding-top: 8px;
  transform: translateY(2px);

  /* اختياري لتحسين التدرج */
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

  background:linear-gradient(
    270deg,
    #22c55e,
    #f59e0b,
    #ec4899,
    #6366f1,
    #22c55e
  );

  background-size:400% 400%;

  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  animation:gradientFlow 14s ease infinite;

  text-shadow:
    0 0 10px rgba(34,197,94,0.12),
    0 0 20px rgba(236,72,153,0.10);
}

@keyframes gradientFlow{
  0%{
    background-position:0% 50%;
  }
  50%{
    background-position:100% 50%;
  }
  100%{
    background-position:0% 50%;
  }

}


#list > article > div.card-body > div > div > p{
  font-size: 22px;
}



.tag-filter {
  position: relative;
  min-width: 150px;
}

.tag-filter-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}

.tag-filter-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 100%;
  min-width: 220px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  padding: 12px;
  z-index: 50;
}

.tag-filter-menu.hidden {
  display: none;
}

.tag-filter-menu .tag-filter-search{
  width: 180px !important;
  min-width: 0 !important;
  display: block;
  margin: 0 auto 12px auto;
  padding: 8px 12px !important;
  font-size: 14px;
}

.tag-filter-options {
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;

  padding-left: 12px;
}

.tag-option {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: right;
  cursor: pointer;
}

.tag-option:hover,
.tag-option.active {
  background: #f7f8fc;
  border-color: #cfd6e4;
}
















#count{
  padding: 8px 14px;
    display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  margin: 8px 14px 20px 0;
  border: 1px solid #d9dde7;
  border-radius: 999px;
  background: #f8fafb;
  color: #5f6b7a;
  font-size: 15px;
  font-weight: 400;
  width: fit-content;
}







#content > div:nth-child(1) > div{
  text-align: left;
}

















.usage-list{
  margin:10px 0 0;
  line-height:1.9;
}

.formation-box{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:10px;
}

.formation-item{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:14px 16px;
}

.formation-main{
  direction:ltr;
  text-align:center;
  unicode-bidi:isolate;
  font-family:"Noto Sans JP", sans-serif;
  font-size:1.5rem;
  line-height:2;
  font-weight:700;
  color:#163b6b;
}

.formation-sub{
  margin-top:6px;
  font-size:1rem;
  color:#64748b;
  line-height:1.8;
  text-align: center;
  font-weight: 500;
}

.formation-variants{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.formation-variant{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:10px 12px;
}

.variant-number{
  width:28px;
  height:28px;
  border-radius:50%;
  background:#0ea5e9;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  flex-shrink:0;
}

.variant-content{
  flex:1;
}

.formation-steps{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.formation-step{
  display:flex;
  gap:14px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:14px;
}

.step-number{
  width:32px;
  height:32px;
  border-radius:50%;
  background:#0ea5e9;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  flex-shrink:0;
}

.step-content{
  flex:1;
}

.step-type{
  font-weight:700;
  color:#b91c1c;
}

.step-type-ar{
  margin-right:6px;
  color:#334155;
}

.step-rule{
  direction:ltr;
  text-align:left;
  font-family:"Noto Sans JP", sans-serif;
  font-size:1.15rem;
  color:#1e3a8a;
  margin-top:6px;
  line-height:1.9;
}

.step-rule-ar{
  margin-top:4px;
  color:#64748b;
  line-height:1.8;
}

.g-label{
  background:#fff4d6;
  color:#92400e;
  padding:2px 8px;
  border-radius:10px;
  font-weight:700;
}

.g-particle{
  color:#0f766e;
  font-weight:800;
}

.g-arrow{
  color:#b45309;
  padding:0 6px;
  font-weight:800;
}

.g-jp{
  color:#1e3a8a;
  font-weight:700;
}

.jp-inline{
  direction:ltr;
  unicode-bidi:isolate;
  display:inline-block;
}

.jp-example{
  direction:ltr;
  unicode-bidi:isolate;
  display:inline-block;
  font-family:"Noto Sans JP", sans-serif;
}




/* code for the steps number beside line */

.formation-variants{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.formation-variant{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px 18px;
}

.variant-content{
  width:100%;
}

.variant-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.variant-number{
  width:34px;
  height:34px;
  border-radius:50%;
  background:#60a5fa;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  flex-shrink:0;
}

.variant-label{
  font-size:1rem;
  font-weight:700;
  color:#64748b;
  white-space:nowrap;
}

.formation-meaning{
  margin-top:8px;
  font-size:1rem;
  color:#0f172a;
  background:#fff7ed;
  border:1px solid #fed7aa;
  border-radius:12px;
  padding:8px 12px;
  line-height:1.8;
}




/* all in the same line steps */

.formation-variants{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.formation-variant{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px 18px;
  display:block; /* مهم جدًا */
}

.variant-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-direction: row-reverse;
  gap:16px;
}

.variant-jp{
  direction:ltr;
  text-align:left;
  unicode-bidi:isolate;
  font-family:"Noto Sans JP", sans-serif;
  font-size:1.35rem;
  font-weight:700;
  color:#1e3a8a;
  flex-shrink:0;
}

.variant-right{
  display:flex;
  align-items:center;
  gap:10px;
  direction:rtl;
}

.variant-number{
  width:38px;
  height:38px;
  border-radius:50%;
  background:#7da2e3;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  flex-shrink:0;
}

.variant-label{
  font-size:1.05rem;
  font-weight:700;
  color:#64748b;
  white-space:nowrap;
}

.formation-meaning{
  margin-top:14px;
  display:block; /* مهم جدًا */
  width:100%;
  max-width:100%;
  background:#fff7ed;
  border:1px solid #f1c58a;
  border-radius:12px;
  padding:10px 14px;
  font-size:1rem;
  line-height:1.8;
}




.grammar-plus{
  color:#e67e22;      /* orange */
  font-weight:700;
  padding:0 4px;
}











.grammar-term{
  display:inline-block;
  position:relative;
  line-height:1;
  padding-top:14px; /* space for Arabic label */
}

.grammar-term-ar{
  position:absolute;
  top:-8px;
  left:50%;
  transform:translateX(-50%);
  font-size:15px;
  color:#7c8798;
  white-space:nowrap;
}

.grammar-term-en{
  font-weight:700;
  color:#1e3a8a;
}


/* panel short */

body > main > section{
  align-items: start;
}

body > main > section > aside{
  height: fit-content;
}



.answer-box{
border:2px dashed #7cc58b;
background:#f3fbf5;
}






.qa-box{
  border: 1px dashed #bfd7f5;
  background: #f4f8ff;
}

.qa-part{
  padding: 2px 0;
}

.qa-label{
  font-size: 16px;
  font-weight: 700;
  color:#e67e22;      /* orange */
  margin-bottom: 8px;
}

.qa-divider{
  border-top: 1px dashed #d7e3f7;
  margin: 14px 0;
}







.grammar-term{
  display:inline-block;
  position:relative;
  line-height:1;
  padding-top:14px;
  margin:0 2px;
}

.grammar-term-ar{
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  font-size:15px;
  color:#7c8798;
  white-space:nowrap;
}

.grammar-term-en{
  font-weight:700;
  color:#1e3a8a;
}

.grammar-plus{
  color:#d97706;
  font-weight:800;
  padding:0 4px;
}




.jp-inline-word{
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  font-family: "Noto Sans JP", sans-serif;
  margin-inline: 0.28em;
}




/* fixing the table jp examples and the direction kana adding style */


.formation-table-wrap{
  overflow-x:auto;
  margin-top:10px;
}

.formation-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.formation-table th{
  text-align:right;
  border-bottom:1px solid #e5e7eb;
  padding:12px 14px;
  font-weight:800;
  vertical-align:top;
  text-wrap: nowrap;
}

.formation-table td{
  border-bottom:1px solid #f1f5f9;
  padding:14px;
  vertical-align:top;
  line-height:1.8;
}

/* .formation-table th:nth-child(1),
.formation-table td:nth-child(1){
  width:16%;
}

.formation-table th:nth-child(2),
.formation-table td:nth-child(2){
  width:44%;
}

.formation-table th:nth-child(3),
.formation-table td:nth-child(3){
  width:40%;
} */

.formation-example-cell{
  text-align:center;
}

.jp-example{
  direction:ltr;
  text-align:left;
  display:inline-block;
  line-height:1.75;
  font-family:"Noto Sans JP", sans-serif;
  font-size:1rem;
}

.jp-example .kana{
  display:block;
  margin-top:4px;
  font-size:0.84em;
  color:#7c8798;
  line-height:1.55;
}


.formation-table th:nth-child(2),
.formation-table td:nth-child(2){
  text-align: left;
  padding-left: 16px;
}













/* =========================
   Verb Types Page
========================= */


/* 
.verb-types-page{
  padding-bottom: 48px;
} */

.verb-hero .hero-card{
  background: linear-gradient(135deg, #fffdf8 0%, #f7f3ff 100%);
  border: 1px solid #ece7f7;
  border-radius: 28px;
  padding: 28px 24px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  margin-top: 30px;
}

.verb-hero .hero-badge{
  display: inline-block;
  background: #eef2ff;
  color: #4338ca;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.verb-hero h1{
  margin: 0 0 10px;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.2;
}

.verb-hero p{
  margin: 0;
  color: #475569;
  font-size: 17px;
  line-height: 1.9;
}

.verb-layout{
  display: grid;
  gap: 24px;
  margin-top: 26px;
}

.verb-intro-card,
.verb-warning-card,
.verb-compare-card,
.verb-practice-card,
.verb-table-card,
.verb-group-card{
  background: #fff;
  border: 1px solid #eaeef5;
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.verb-intro-jp{
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 12px;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
  color: #1e293b;
}

.verb-intro-card p{
  margin: 0 0 10px;
  color: #475569;
  line-height: 1.95;
}

.verb-groups-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;

  
}

@media (max-width: 1100px){
  .verb-groups-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px){
  .verb-groups-grid{
    grid-template-columns: 1fr;
  }
}

.verb-group-card{
  overflow: hidden;
}

.verb-group-card.ichidan{
  background: linear-gradient(180deg, #fff 0%, #f8fffb 100%);
}

.verb-group-card.godan{
  background: linear-gradient(180deg, #fff 0%, #fffaf5 100%);
}

.verb-group-top h2{
  margin-top: 10px;
  font-size: 26px;
}

.verb-group-jp{
  margin-top: 8px;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
  font-size: 21px;
  font-weight: 800;
  color: #0f172a;
}

.verb-group-summary{
  margin: 12px 0 0;
  color: #475569;
  line-height: 1.9;
  margin-top: 25px;

  display: none;
}

.verb-badge{
  display: inline-block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #0f766e;
  background: #ecfeff;
  border: 1px solid #bae6fd;
  padding: 6px 10px;
  border-radius: 999px;
}

.verb-group-section{
  margin-top: 18px;
}

.verb-group-section h3,
.verb-warning-card h2,
.verb-compare-card h2,
.verb-practice-card h2,
.verb-table-card h3{
  margin: 0 0 10px;
  font-size: 20px;
  color: #0f172a;
}

.verb-bullet-list{
  margin: 0;
  padding-right: 18px;
  line-height: 1.95;
}

.verb-bullet-list li{
  margin-bottom: 8px;
  color: #334155;
}

.verb-mini-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.verb-mini-example{
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 14px 12px;
}

.verb-mini-jp{
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
  font-size: 22px;
  font-weight: 800;
  color: #111827;
}

.verb-mini-kana{
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
  color: #64748b;
  margin-top: 4px;
  font-size: 15px;
}

.verb-mini-ar{
  margin-top: 8px;
  color: #334155;
  line-height: 1.7;
  font-size: 14px;
}

.verb-warning-card{
  border-color: #fde68a;
  background: linear-gradient(180deg, #fffef7 0%, #fffbeb 100%);
}

.verb-tables-stack{
  display: grid;
  gap: 18px;
}

.verb-table-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.verb-table-jp{
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
  font-size: 18px;
  font-weight: 800;
  color: #475569;
}

.verb-type-tag{
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #334155;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
}

.verb-table-wrap{
  overflow-x: auto;
}

.verb-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.verb-table th,
.verb-table td{
  border-bottom: 1px solid #edf2f7;
  padding: 12px 10px;
  text-align: right;
  vertical-align: middle;
}

.verb-table th{
  background: #f8fafc;
  color: #0f172a;
  font-weight: 800;
}

.verb-table td.jp-cell,
.verb-table td.kana-cell{
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

.verb-table td.jp-cell{
  font-weight: 800;
  color: #111827;
}

.verb-table td.kana-cell{
  color: #64748b;
}

.verb-compare-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.verb-compare-item{
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 16px;
  background: #f8fafc;
}

.verb-compare-type{
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 6px;
  color: #0f172a;
}

.verb-compare-rule{
  color: #475569;
  line-height: 1.8;
}

.verb-practice-list{
  display: grid;
  gap: 12px;
}

.verb-practice-item{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px;
  line-height: 1.9;
}

.verb-practice-number{
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 999px;
  background: #ede9fe;
  color: #5b21b6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
}

@media (max-width: 980px){
  .verb-groups-grid,
  .verb-compare-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 850px){
  .verb-hero .hero-card{
    padding: 22px 18px;
    border-radius: 22px;
  }

  .verb-intro-card,
  .verb-warning-card,
  .verb-compare-card,
  .verb-practice-card,
  .verb-table-card,
  .verb-group-card{
    padding: 18px;
    border-radius: 20px;
  }

  .verb-table{
    min-width: 620px;
  }
}



/* ===== Verb Types page: note-style tables ===== */

.verb-table-desc{
  margin: 8px 0 18px;
  color: #475569;
  line-height: 1.95;
}

.verb-vowel-block{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #edf2f7;
}

.verb-vowel-block:first-of-type{
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.verb-vowel-label{
  font-weight: 800;
  margin-bottom: 10px;
  color: #0f172a;
  font-size: 18px;
}

.verb-vowel-table th,
.verb-vowel-table td{
  text-align: center !important;
  vertical-align: middle;
}

.verb-vowel-table th{
  font-size: 18px;
  font-weight: 800;
}

.verb-vowel-table td{
  font-size: 18px;
  line-height: 1.8;
  min-width: 90px;
}

.verb-form-meanings{
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.verb-form-meaning-item{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.verb-form-name{
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
  font-weight: 800;
  color: #111827;
}

.verb-form-ar{
  color: #475569;
  line-height: 1.8;
}

.verb-table-notes{
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  background: #fffdf8;
  border: 1px dashed #e9d8a6;
}

.verb-table-notes h4{
  margin: 0 0 10px;
  font-size: 17px;
  color: #0f172a;
}

@media (max-width: 720px){
  .verb-form-meaning-item{
    grid-template-columns: 1fr;
  }

  .verb-form-name{
    text-align: right;
    direction: ltr;
    unicode-bidi: isolate;
  }

  .verb-vowel-table td,
  .verb-vowel-table th{
    font-size: 16px;
    min-width: 72px;
  }
}






/* ===== Verb Types page: note-style tables ===== */

.verb-table-desc{
  margin: 8px 0 18px;
  color: #475569;
  line-height: 1.95;
}

.verb-vowel-block{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #edf2f7;
}

.verb-vowel-block:first-of-type{
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.verb-vowel-label{
  font-weight: 800;
  margin-bottom: 10px;
  color: #0f172a;
  font-size: 18px;
}

.verb-vowel-table th,
.verb-vowel-table td{
  text-align: center !important;
  vertical-align: middle;
}

.verb-vowel-table th{
  font-size: 18px;
  font-weight: 800;
}

.verb-vowel-table td{
  font-size: 18px;
  line-height: 1.8;
  min-width: 90px;
}

.verb-form-meanings{
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.verb-form-meaning-item{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.verb-form-name{
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
  font-weight: 800;
  color: #111827;
}

.verb-form-ar{
  color: #475569;
  line-height: 1.8;
}

.verb-table-notes{
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  background: #fffdf8;
  border: 1px dashed #e9d8a6;
}

.verb-table-notes h4{
  margin: 0 0 10px;
  font-size: 17px;
  color: #0f172a;
}

@media (max-width: 720px){
  .verb-form-meaning-item{
    grid-template-columns: 1fr;
  }

  .verb-form-name{
    text-align: right;
    direction: ltr;
    unicode-bidi: isolate;
  }

  .verb-vowel-table td,
  .verb-vowel-table th{
    font-size: 16px;
    min-width: 72px;
  }
}



.verb-base{
  color: #111827;
}

.verb-ending{
  color: #e92d2d;
  font-weight: 600;
}





.verb-vowel-table{
  direction: ltr;
}

.verb-vowel-table th,
.verb-vowel-table td{
  direction: ltr;
}







.verb-vowel-table{
  direction: ltr;
}

.verb-vowel-table th,
.verb-vowel-table td{
  direction: ltr;
  text-align: center !important;
  vertical-align: top;
}

.verb-vowel-table th{
  font-size: 22px;
  font-weight: 600;
}

.verb-vowel-table td{
  min-width: 120px;
  padding: 16px 10px;
}

.verb-kind-cell{
  font-weight: 600;
  color: #0f172a;
  background: #f8fafc;
}

.verb-cell-jp{
  direction: ltr;
  unicode-bidi: isolate;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: #111827;
  line-height: 1.5;
}

.verb-cell-ar{
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.8;
  color: #475569;
  direction: rtl;
  text-align: center;
}

.verb-base{
  color: #111827;
}

.verb-ending{
  color: #e11d48;
  font-weight: 600;
}

.verb-table-desc{
  margin: 8px 0 18px;
  color: #475569;
  line-height: 1.95;
}

.verb-vowel-block{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #edf2f7;
}

.verb-vowel-block:first-of-type{
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.verb-vowel-label{
  font-weight: 600;
  margin-bottom: 10px;
  color: #0f172a;
  font-size: 18px;
}

@media (max-width: 720px){
  .verb-vowel-table td,
  .verb-vowel-table th{
    font-size: 16px;
    min-width: 72px;
  }

  .verb-cell-jp{
    font-size: 18px;
  }

  .verb-cell-ar{
    font-size: 13px;
  }
}



.verb-base{
  color: #111827;
}

.verb-changed{
  color: #2563eb;
  font-weight: 600;
}

.verb-ending{
  color: #e11d48;
  font-weight: 600;
}







.verb-group-jp, .verb-intro-jp{
  display: none;
}


/* bullet points for the intro */
.intro-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.intro-list li{
  position: relative;
  padding-right: 20px;
  margin-bottom: 12px;
  line-height: 1.9;
  color: #475569;
}

.intro-list li::before{
  content: "•";
  position: absolute;
  right: 0;
  color: #6366f1;
  font-weight: bold;
}




/*titles style*/
.verb-group-top h2{
  font-size: 28px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 8px;
  position: relative;
  display: block;
}

.verb-group-top h2::after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -6px;
  width: 60px;
  height: 4px;
  background: linear-gradient(to left, #6366f1, #a78bfa);
  border-radius: 6px;
}



.verb-group-section{
  margin-top: 30px;
}




.steps-list{
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

.steps-list li{
  counter-increment: step;
  position: relative;
  padding-right: 38px;
  margin: 14px 0 ;
  line-height: 1.9;
  color: #475569;
}

.steps-list li::before{
  content: counter(step);
  position: absolute;
  right: 0;
  top: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(to left, #6366f1, #a78bfa);
  color: white;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.steps-list li:hover::before{
  transform: scale(1.1);
}


/**/

.verb-group-card{
  height: 100%;
  display: flex;
  flex-direction: column;
}

@media (max-width: 1023px){
  .js-eq-top,
  .js-eq-know,
  .js-eq-change,
  .js-eq-examples{
    min-height: auto !important;
  }
}



.note-verbs-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.note-verb{
  background: #f3f0ff;
  border-radius: 14px;
  padding: 8px 12px;
  text-align: center;
  min-width: 80px;
}

.note-verb span{
  display: block;
  font-weight: bold;
  color: #6c5ce7;
  font-size: 16px;
}

.note-verb small{
  display: block;
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}

.no-bullet{
  list-style: none;
  margin-right: 0;
  padding-right: 0;
}









.variant-ichidan {
  background: #fdf4ff; ; /* بنفسجي فاتح */
}

.variant-godan {
  background: #f0f9ff; /* أزرق فاتح */
}




.verb-block-title{
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.verb-badge{
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.badge-suru{
  background: #e0f2fe;
  color: #0369a1;
}

.badge-kuru{
  background: #f3e8ff;
  color: #7c3aed;
}



.verb-vowel-label-wrap{
  margin-bottom: 14px;
  text-align: right;
}

.verb-vowel-label-main{
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  color: #0f172a;
}

.verb-vowel-label-sub{
  margin-top: 6px;
  font-size: 18px;
  color: #64748b;
}

.verb-vowel-label-main.suru, .verb-vowel-label-main.kuru{
  color: #2563eb;
}




/*unified font size*/
/* ===== Verbs page type scale ===== */

.verb-table-card{
  padding: 28px 34px;
}

/* عنوان الكارد الرئيسي */
.verb-table-head h3{
  font-size: 30px;
  line-height: 1.35;
  font-weight: 600;
  margin: 0;
  color: #0f172a;
  margin-bottom: 18px;
}

/* الياباني تحت العنوان */
.verb-table-jp{
  margin-top: 10px;
  margin-bottom: 14px;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 600;
  color: #525e79;
  letter-spacing: 0.01em;
}

/* وصف الكارد */
.verb-table-desc{
  margin: 18px 0 22px;
  font-size: 17px;
  line-height: 2;
  font-weight: 400;
  color: #475569;
}

/* badge الجانبي مثل overview / godan example */
.verb-type-tag{
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
}

/* عنوان كل block مثل: أصل الفعل / الصيغ الأساسية / تغيير آخر حرف */
.verb-vowel-label,
.verb-table-notes h4{
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
  margin-bottom: 12px;
  color: #0f172a;
}

/* عناوين أعمدة الجداول */
.verb-vowel-table th{
  font-size: 22px;
  line-height: 1.4;
  font-weight: 600;
  padding: 16px 12px;
}

/* النص الياباني داخل الخلايا */
.verb-cell-jp{
  font-size: 20px;
  line-height: 1.6;
  font-weight: 600;
  color: #0f172a;
}

/* النص العربي داخل الخلايا */
.verb-cell-ar{
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.9;
  font-weight: 400;
  color: #64748b;
}

/* الجداول الصغيرة مثل أصل الفعل */
.verb-kind-cell{
  font-size: 16px;
  font-weight: 600;
}


/* عنوان する / くる أو أي label فوق البلوك */
.verb-vowel-label-wrap{
  margin-bottom: 14px;
  text-align: right;
}

.verb-vowel-label-main{
  font-size: 24px;
  line-height: 1.35;
  font-weight: 600;
  color: #0f172a;
}

.verb-vowel-label-sub{
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.8;
  font-weight: 500;
  color: #64748b;
}

/* notes box */
.verb-table-notes{
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: 18px;
}

.verb-table-notes .verb-bullet-list li{
  font-size: 15px;
  line-height: 1.95;
  color: #475569;
}

/* مسافات بين blocks */
.verb-vowel-block{
  margin-top: 20px;
  padding-top: 20px;
}

/* responsive */
@media (max-width: 900px){
  .verb-table-card{
    padding: 22px 20px;
  }

  .verb-table-head h3{
    font-size: 24px;
  }

  .verb-table-jp{
    font-size: 20px;
  }

  .verb-table-desc{
    font-size: 15px;
  }

  .verb-vowel-label,
  .verb-table-notes h4{
    font-size: 17px;
  }

  .verb-vowel-table th{
    font-size: 16px;
  }

  .verb-cell-jp{
    font-size: 16px;
  }

  .verb-cell-ar{
    font-size: 13px;
  }

  .verb-vowel-label-main{
    font-size: 21px;
  }

  .verb-vowel-label-sub{
    font-size: 14px;
  }
}

/*Practice section style*/






.verb-practice-list{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.verb-practice-item{
  display: grid;
  grid-template-columns: 72px minmax(420px, 1.8fr) 180px minmax(220px, 1fr);
  align-items: center;
  gap: 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 28px;
  padding: 20px 24px;
}

.verb-practice-number-side{
  display: flex;
  justify-content: center;
  align-items: center;
}

.verb-practice-question-side{
  display: flex;
  flex-direction: row-reverse; /* الرقم يمين والسؤال بجانبه */
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
}

.verb-practice-question{
  flex: 1;
  min-width: 0;
  font-size: 18px;
  line-height: 1.8;
  color: #0f172a;
  text-align: right;
}

.verb-practice-number{
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f3e8ff;
  color: #6d28d9;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.verb-practice-button-side{
  display: flex;
  justify-content: center;
  align-items: center;
}

.verb-answer-toggle{
  border: 0;
  background: #eef2ff;
  color: #4338ca;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  min-width: 140px;
}

.verb-practice-answer-side{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-width: 0;
}

.verb-practice-answer{
  font-size: 17px;
  line-height: 1.8;
  color: #334155;
  font-weight: 700;
  text-align: left;
}

.verb-practice-answer[hidden]{
  display: none !important;
}

@media (max-width: 1023px){
  .verb-practice-item{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .verb-practice-number-side{
    justify-content: flex-start;
  }

  .verb-practice-question-side{
    justify-content: flex-start;
  }

  .verb-practice-button-side{
    justify-content: flex-start;
  }

  .verb-practice-answer-side{
    justify-content: flex-start;
  }

  .verb-practice-question,
  .verb-practice-answer{
    text-align: right;
  }
}






/* =========================
   Verbs page responsive fix
   ========================= */

/* تحسين عام للصفحة */
.verb-page,
.verbs-page,
.page-verbs {
  overflow-x: hidden;
}

.verb-intro-card,
.verb-group-card,
.verb-table-card,
.verb-warning-card,
.verb-compare-card,
.verb-practice-card {
  max-width: 100%;
  box-sizing: border-box;
}

/* الصور/الجداول لا تكسر الصفحة */
.verb-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.verb-table {
  min-width: 720px;
}

/* ===== 1) شاشات متوسطة كبيرة ===== */
@media (max-width: 1023px){
  .verb-intro-card,
  .verb-warning-card,
  .verb-table-card,
  .verb-compare-card,
  .verb-practice-card {
    padding: 24px 20px;
  }

  .verb-groups-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px;
  }

  .verb-group-card {
    min-height: auto;
  }

  .verb-group-title {
    font-size: 26px;
  }

  .verb-group-jp {
    font-size: 22px;
  }

  .verb-table-head h3 {
    font-size: 26px;
  }

  .verb-table-jp {
    font-size: 22px;
  }

  .verb-practice-item {
    grid-template-columns: 64px minmax(280px, 1.6fr) 160px minmax(180px, 1fr) !important;
    gap: 16px;
  }
}

/* ===== 2) تابلت / لابتوب صغير ===== */
@media (max-width: 992px) {
  .verb-intro-card {
    padding: 22px 18px;
    text-align: right;
  }

  .verb-intro-card h2 {
    font-size: 34px;
    line-height: 1.35;
  }

  .verb-intro-jp {
    font-size: 22px;
  }

  .intro-list li {
    font-size: 16px;
    line-height: 1.9;
  }

  .verb-groups-grid {
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  .verb-group-card {
    padding: 22px 18px;
  }

  .verb-group-top,
  .js-eq-top,
  .js-eq-know,
  .js-eq-change,
  .js-eq-examples {
    min-height: auto !important;
  }

  .verb-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .verb-table-card {
    padding: 22px 18px;
  }

  .verb-table-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .verb-type-tag {
    align-self: flex-start;
  }

  .verb-table-head h3 {
    font-size: 24px;
  }

  .verb-table-jp {
    font-size: 20px;
  }

  .verb-vowel-label,
  .verb-table-notes h4 {
    font-size: 18px;
  }

  .verb-practice-item {
    grid-template-columns: 1fr !important;
    align-items: stretch;
    gap: 12px;
    padding: 18px 16px;
  }

  .verb-practice-number-side,
  .verb-practice-question-side,
  .verb-practice-button-side,
  .verb-practice-answer-side {
    justify-content: flex-start !important;
  }

  .verb-practice-question-side {
    display: flex;
    flex-direction: row-reverse;
    gap: 12px;
  }

  .verb-practice-question,
  .verb-practice-answer {
    text-align: right;
  }
}

/* ===== 3) موبايل ===== */
@media (max-width: 768px) {
  .verb-intro-card,
  .verb-warning-card,
  .verb-table-card,
  .verb-compare-card,
  .verb-practice-card {
    border-radius: 22px;
    padding: 18px 14px;
  }

  .verb-intro-card h2 {
    font-size: 28px;
  }

  .verb-intro-jp {
    font-size: 19px;
  }

  .intro-list li {
    font-size: 15px;
    line-height: 1.85;
    padding-right: 16px;
  }

  .verb-group-title {
    font-size: 24px;
  }

  .verb-group-jp {
    font-size: 20px;
  }

  .verb-group-summary,
  .verb-bullet-list li,
  .steps-list li {
    font-size: 15px;
    line-height: 1.9;
  }



  .verb-mini-example {
    min-height: auto;
  }

  .verb-table {
    min-width: 620px;
  }

  .verb-vowel-table th {
    font-size: 16px;
    padding: 14px 10px;
  }

  .verb-cell-jp {
    font-size: 16px;
  }

  .verb-cell-ar {
    font-size: 13px;
    line-height: 1.8;
  }

  .verb-practice-question {
    font-size: 16px;
    line-height: 1.85;
  }

  .verb-answer-toggle {
    min-width: 120px;
    font-size: 13px;
    padding: 9px 14px;
  }
}

/* ===== 4) موبايل صغير جدًا ===== */
@media (max-width: 480px) {
  .verb-intro-card h2 {
    font-size: 24px;
  }

  .verb-group-title,
  .verb-table-head h3 {
    font-size: 21px;
  }

  .verb-table-jp,
  .verb-group-jp {
    font-size: 18px;
  }

  .verb-practice-number {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }

  .verb-type-tag,
  .verb-badge {
    font-size: 12px;
    padding: 6px 12px;
  }

  .verb-table {
    min-width: 560px;
  }
  .verb-practice-question-side{
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.verb-practice-item{
  align-items: center;
}
}





/* ===== Fix horizontal overflow on verbs page ===== */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* أي حاوية رئيسية في الصفحة */
main,
.page-shell,
.page-content,
.verbs-page,
.verb-page {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* كل الكروت والسكاشن */
.verb-intro-card,
.verb-warning-card,
.verb-table-card,
.verb-compare-card,
.verb-practice-card,
.verb-group-card {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

/* مهم جدًا داخل grid/flex حتى ما يدفع العرض */
.verb-intro-card,
.verb-warning-card,
.verb-table-card,
.verb-compare-card,
.verb-practice-card,
.verb-group-card,
.verb-table-head,
.verb-practice-item,
.verb-practice-question-side,
.verb-practice-answer-side,
.verb-practice-button-side {
  min-width: 0;
}

/* الهيرو / المقدمة */
.verb-intro-card {
  margin-inline: auto;
}

/* الجداول: اسمحي للجدول نفسه بالتمرير الداخلي فقط، وليس الصفحة كلها */
.verb-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.verb-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  table-layout: fixed;
}

/* الشبكات */
.verb-groups-grid,
.verb-mini-grid,
.verb-compare-grid,
.verb-practice-list,
.verb-tables-stack {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* ===== Tablet ===== */
@media (max-width: 992px) {
  .verb-intro-card,
  .verb-warning-card,
  .verb-table-card,
  .verb-compare-card,
  .verb-practice-card,
  .verb-group-card {
    padding: 20px 16px;
  }

  .verb-groups-grid {
    grid-template-columns: 1fr !important;
  }

  .verb-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .verb-table-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .verb-intro-card,
  .verb-warning-card,
  .verb-table-card,
  .verb-compare-card,
  .verb-practice-card,
  .verb-group-card {
    padding: 16px 14px;
    border-radius: 22px;
  }

  .verb-intro-card h2,
  .verb-table-head h3,
  .verb-group-title {
    font-size: 24px;
    line-height: 1.35;
  }

  .verb-intro-jp,
  .verb-table-jp,
  .verb-group-jp {
    font-size: 18px;
  }



  .verb-table {
    min-width: 520px;
  }
}

/* ===== Small mobile ===== */
@media (max-width: 480px) {
  .verb-table {
    min-width: 480px;
  }

  .verb-intro-card h2,
  .verb-table-head h3,
  .verb-group-title {
    font-size: 21px;
  }
}




@media (min-width: 1024px) {
.verb-groups-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.verb-mini-jp {
  font-size: clamp(20px, 1vw, 22px);
}
}






/* =====================================================
   FINAL OVERRIDE — VERB PRACTICE LAYOUT
   Keep desktop/tablet layout until 1024px,
   stack only at 1023px and below.
   Put this at the VERY END of styles.css
   ===================================================== */

/* Desktop + tablet wide (1024px and above) */
@media (min-width: 1024px){
  .verb-practice-list{
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  .verb-practice-item{
    display: grid !important;
    grid-template-columns: 72px minmax(420px, 1.8fr) 180px minmax(220px, 1fr) !important;
    align-items: center !important;
    gap: 20px !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 28px !important;
    padding: 20px 24px !important;
  }

  .verb-practice-number-side{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .verb-practice-question-side{
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  .verb-practice-button-side{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .verb-practice-answer-side{
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  .verb-practice-number{
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;
    background: #f3e8ff !important;
    color: #6d28d9 !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .verb-practice-question{
    font-size: 18px !important;
    line-height: 1.8 !important;
    text-align: right !important;
    min-width: 0 !important;
  }

  .verb-answer-toggle{
    min-width: 140px !important;
    white-space: nowrap !important;
  }

  .verb-practice-answer{
    text-align: left !important;
    white-space: nowrap !important;
  }
}

/* Mobile only (1023px and below) */
@media (max-width: 1023px){
  .verb-practice-list{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .verb-practice-item{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 28px !important;
    padding: 18px 16px !important;
  }

  .verb-practice-question-row{
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .verb-practice-number-side{
    width: auto !important;
    flex: 0 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .verb-practice-number{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex: 0 0 40px !important;
  }

  .verb-practice-question-side{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .verb-practice-question{
    width: 100% !important;
    font-size: 16px !important;
    line-height: 1.85 !important;
    text-align: right !important;
  }

  .verb-practice-button-side{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 4px !important;
  }

  .verb-practice-answer-side{
    width: 100% !important;
    text-align: right !important;
  }

  .verb-practice-answer{
    text-align: right !important;
    white-space: normal !important;
  }
}






/* ===== VERBS PAGE WIDTH FIX ===== */
.verb-types-page,
.verb-types-page .container,
.verb-layout,
.verb-layout > *,
.verb-groups-grid,
.verb-groups-grid > *,
.verb-table-card,
.verb-compare-card,
.verb-practice-card,
.verb-warning-card,
.verb-intro-card,
.verb-group-card {
  min-width: 0;
  max-width: 100%;
}

.verb-types-page .container{
  width: min(var(--container), calc(100% - 32px));
  margin-inline: auto;
  overflow-x: clip;
}

.verb-layout{
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.verb-layout > *{
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.verb-groups-grid{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.verb-groups-grid > *{
  min-width: 0;
  width: auto;
  max-width: 100%;
}

.verb-group-card,
.verb-table-card,
.verb-compare-card,
.verb-practice-card,
.verb-warning-card,
.verb-intro-card{
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* extra safety for content inside cards */
.verb-group-card *,
.verb-table-card *,
.verb-compare-card *,
.verb-practice-card *,
.verb-warning-card *,
.verb-intro-card *{
  min-width: 0;
}

/* keep tablet behavior clear */
@media (max-width: 1023px){
  .verb-groups-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px){
  .verb-groups-grid{
    grid-template-columns: 1fr;
  }
}




/* ===== FINAL MOBILE FIX FOR VERB TABLES ===== */
@media (max-width: 768px){

  .verb-table-wrap{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .verb-table,
  .verb-vowel-table{
    width: 100% !important;
    min-width: 520px !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  .verb-table th,
  .verb-table td,
  .verb-vowel-table th,
  .verb-vowel-table td{
    width: 20% !important;
    min-width: 0 !important;
    padding: 10px 4px !important;
    text-align: center !important;
    vertical-align: top !important;
  }

  .verb-table th,
  .verb-vowel-table th{
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  /* الياباني داخل أي خلية */
  .verb-table td .verb-cell-jp,
  .verb-vowel-table td .verb-cell-jp,
  .verb-table td .verb-base,
  .verb-table td .verb-ending,
  .verb-table td .verb-changed,
  .verb-vowel-table td .verb-base,
  .verb-vowel-table td .verb-ending,
  .verb-vowel-table td .verb-changed{
    display: inline !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
  }

  .verb-table td .verb-cell-jp,
  .verb-vowel-table td .verb-cell-jp{
    direction: ltr !important;
    unicode-bidi: isolate !important;
    white-space: normal !important;
    word-break: keep-all !important;
  }

  /* العربي داخل أي خلية */
  .verb-table td .verb-cell-ar,
  .verb-vowel-table td .verb-cell-ar,
  .verb-table td small,
  .verb-vowel-table td small,
  .verb-table td div:not(.verb-cell-jp),
  .verb-vowel-table td div:not(.verb-cell-jp){
    font-size: 11px !important;
    line-height: 1.45 !important;
  }
}

@media (max-width: 480px){

  .verb-table,
  .verb-vowel-table{
    min-width: 460px !important;
  }

  .verb-table th,
  .verb-table td,
  .verb-vowel-table th,
  .verb-vowel-table td{
    padding: 8px 3px !important;
  }

  .verb-table th,
  .verb-vowel-table th{
    font-size: 14px !important;
  }

  .verb-table td .verb-cell-jp,
  .verb-vowel-table td .verb-cell-jp,
  .verb-table td .verb-base,
  .verb-table td .verb-ending,
  .verb-table td .verb-changed,
  .verb-vowel-table td .verb-base,
  .verb-vowel-table td .verb-ending,
  .verb-vowel-table td .verb-changed{
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  .verb-table td .verb-cell-ar,
  .verb-vowel-table td .verb-cell-ar,
  .verb-table td small,
  .verb-vowel-table td small,
  .verb-table td div:not(.verb-cell-jp),
  .verb-vowel-table td div:not(.verb-cell-jp){
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

}



/* Center answers on small screens */
@media (max-width: 768px){
  
  .verb-practice-answer{
    text-align: center !important;
    margin-inline: auto;
  }

}





/*Scroll up button*/
html{
  scroll-behavior: smooth;
}

/* ===== Scroll To Top Button ===== */

.scroll-top-btn{
  position: fixed;
  left: 20px; /* changed to LEFT */
  bottom: 20px;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: #7c6cf2;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(124, 108, 242, 0.25);

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 999;

  /* hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);

  transition: 
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease,
    background 0.25s ease;
}

/* when visible */
.scroll-top-btn.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* hover effect */
.scroll-top-btn:hover{
  background: #6757e6;
  transform: translateY(0) scale(1.08);
}

/* mobile */
@media (max-width: 768px){
  .scroll-top-btn{
    left: 18px; /* LEFT for mobile */
    bottom: 18px;
    width: 46px;
    height: 46px;
    font-size: 18px;
  }
}





/* ===== Keep Japanese verb forms as one full word in tables ===== */
.verb-vowel-table td .verb-cell-jp,
.verb-table td .verb-cell-jp,
.verb-vowel-table td .verb-base,
.verb-vowel-table td .verb-ending,
.verb-vowel-table td .verb-changed,
.verb-table td .verb-base,
.verb-table td .verb-ending,
.verb-table td .verb-changed,
.verb-vowel-table td .verb-stem,
.verb-table td .verb-stem,
.verb-vowel-table td .verb-form-jp,
.verb-table td .verb-form-jp {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-break: strict !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  display: inline-block !important;
  max-width: none !important;
  letter-spacing: 0 !important;
}

/* if the Japanese word is made of multiple spans, keep them attached */
.verb-vowel-table td .verb-cell-jp,
.verb-table td .verb-cell-jp {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 0 !important;
}




/* ===== Start Here Section ===== */

.start-here{
  margin: 30px 0;
  }

.start-here-card{
  background: linear-gradient(135deg, #f8f6ff, #ffffff);
  border: 2px solid #efeaff;
  border-radius: 20px;
  padding: 22px 28px;
  text-align: center;
  transition: 0.3s;
}

.start-here-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(124,108,242,0.15);
}

.start-here-content h2{
  font-size: 26px;
  margin-bottom: 10px;
}

.start-here-content p{
  color: #666;
  margin-bottom: 18px;
}

.start-here-tags{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.start-here-tags span{
  background: #f1efff;
  color: #7c6cf2;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
}

.start-here-btn{
  display: inline-block;
  background: #7c6cf2;
  color: #fff;
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.25s;
}

.start-here-btn:hover{
  background: #6757e6;
}

/* mobile */
@media (max-width: 768px){
  .start-here-card{
    padding: 18px;
  }

  .start-here-content h2{
    font-size: 22px;
  }
}




/*Basic page*/

.basics-page{
  padding: 32px 0 56px;
}

.basics-hero{
  text-align: center;
  margin-bottom: 28px;
  padding: 32px 20px;
  background: linear-gradient(135deg, #faf8ff, #ffffff);
  border: 1px solid #ece7ff;
  border-radius: 24px;
}

.page-badge{
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f1edff;
  color: #7c6cf2;
  font-size: 14px;
  margin-bottom: 12px;
}

.basics-hero h1{
  margin: 0 0 12px;
  font-size: 38px;
}

.basics-hero p{
  margin: 0 auto;
  max-width: 760px;
  color: #667085;
  line-height: 1.9;
}

.basics-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.basics-card{
  background: #fff;
  border: 1px solid #ebe7f5;
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.04);
}

a.basics-card.main-card{

  border: 2px solid #7c6cf276;
  box-shadow: 0 10px 30px rgba(124,108,242,0.15);
}

a.basics-card.main-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(124,108,242,0.15);
  transition: 0.3s ease;
}

.basics-card h3{
  margin: 0 0 10px;
  font-size: 28px;
}

.basics-card p{
  margin: 0 0 16px;
  color: #667085;
  line-height: 1.9;
}

.basics-card a{
  color: #7c6cf2;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 900px){
  .basics-grid{
    grid-template-columns: 1fr;
  }

  .basics-hero h1{
    font-size: 30px;
  }
}


.basics-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.basics-card{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: 260px;
  padding: 28px;
  background: #fff;
  border: 1px solid #ebe7f5;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.04);

  text-decoration: none;
  color: inherit;

  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.basics-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(16, 24, 40, 0.08);
  border-color: #dcd3ff;
}

.basics-card h3{
  margin: 0 0 14px;
  font-size: 32px;
  line-height: 1.3;
  color: #101828;
}

.basics-card p{
  margin: 0;
  color: #667085;
  line-height: 1.9;
  font-size: 18px;
}

.basics-link{
  display: inline-block;
  margin-top: 22px;
  color: #7c6cf2;
  font-weight: 700;
  font-size: 18px;
}

@media (max-width: 900px){
  .basics-grid{
    grid-template-columns: 1fr;
  }

  .basics-card{
    min-height: 220px;
    padding: 22px;
  }

  .basics-card h3{
    font-size: 28px;
  }

  .basics-card p{
    font-size: 17px;
  }
}

.featured-card-title{
  display: inline-flex;
  gap: 10px;
  margin: 0;
}

.card-highlight{
  line-height: 1;
  flex-shrink: 0;
    transform: translateY(2px);
      font-size: 16px;
  color: #c7c0fa;
  margin-right: 6px;
}

/* =========================================================
   ADJECTIVES PAGE — final balanced version
   Put this at the VERY END of styles.css
   ========================================================= */

:root{
  --adj-bg-soft: #fcfbff;
  --adj-border: #ece7ff;
  --adj-border-strong: #ddd2ff;
  --adj-purple: #7c6cf2;
  --adj-purple-soft: #f1edff;
  --adj-text: #0f172a;
  --adj-text-soft: #667085;
  --adj-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);

  --adj-na-accent: #fdfaff;
  --adj-i-accent: #fafdff;
  --adj-na-border: #e3d5ff;
  --adj-i-border: #d7ebff;
  --adj-special-bg: #fff9fb;
  --adj-special-border: #f1d6e2;
  --adj-special-text: #b5476b;
  --adj-i-ending: #ff6b6b;
}

/* page */
.adjectives-page{
  padding: 28px 0 48px;
  font-family: "Tajawal", sans-serif;
  padding-bottom: 0;
}

.adjectives-page *,
.adjectives-page *::before,
.adjectives-page *::after{
  box-sizing: border-box;
}

.adjectives-page h1,
.adjectives-page h2,
.adjectives-page h3,
.adjectives-page h4{
  margin: 0;
  color: var(--adj-text);
  font-family: "Tajawal", sans-serif;
}

.adjectives-page p{
  margin: 0;
  color: var(--adj-text-soft);
  line-height: 1.9;
  font-family: "Tajawal", sans-serif;
}

.adjectives-page .jp,
.adjectives-page .jp-inline,
.adjectives-page .adj-chip.jp,
.adjectives-page .adj-example-small .jp,
.adjectives-page .adj-example-jp,
.adjectives-page .answer .jp,
.adjectives-page .q-text .jp{
  font-family: "Noto Sans JP", sans-serif;
  direction: ltr;
  unicode-bidi: isolate;
}

/* badge */
.adj-page-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--adj-purple-soft);
  color: var(--adj-purple);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 14px;
}

/* hero */
.adj-hero{
  text-align: center;
  padding: 32px 24px;
  background: linear-gradient(135deg, #faf8ff, #ffffff);
  border: 1px solid var(--adj-border);
  border-radius: 28px;
  margin-bottom: 24px;
  box-shadow: var(--adj-shadow);
}

.adj-hero h1{
  font-size: 38px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 14px;
}

.adj-hero p{
  max-width: 860px;
  margin-inline: auto;
  font-size: 18px;
  line-height: 1.9;
}

/* section cards */
.adj-section-card,
.adj-special-case-card,
.adj-practice-section{
  background: #fff;
  border: 1px solid var(--adj-border);
  border-radius: 26px;
  padding: 26px;
  margin-bottom: 24px;
  box-shadow: var(--adj-shadow);
}

.adj-section-title-wrap{
  margin-bottom: 20px;
}

.adj-section-title-wrap h2,
.adj-special-head h2,
.adj-practice-section h2{
  font-size: 28px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 6px;
}

.adj-section-title-wrap p,
.adj-practice-section > p{
  font-size: 16px;
  color: var(--adj-text-soft);
}

/* grids */
.adj-types-grid,
.adj-conjugation-grid,
.adj-usage-grid{
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.adj-example-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.adj-special-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* cards */
.adj-type-card,
.adj-conjugation-card,
.adj-usage-card{
  border-radius: 22px;
  padding: 22px;
  border: 1px solid var(--adj-border);
  background: var(--adj-bg-soft);
}

.adj-example-card{
  border-radius: 20px;
  padding: 18px 20px;
  border: 1px solid var(--adj-border);
  background: #fff;
}

.adj-na-card{
  background: linear-gradient(180deg, var(--adj-na-accent), #ffffff);
  border-color: var(--adj-na-border);
}

.adj-i-card{
  background: linear-gradient(180deg, var(--adj-i-accent), #ffffff);
  border-color: var(--adj-i-border);
}

/* type section */
.adj-type-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--adj-purple-soft);
  color: var(--adj-purple);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 16px;
}

.adj-type-card h3,
.adj-conjugation-card h3,
.adj-usage-card h3{
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 12px;
  line-height: 1.35;
}

.adj-type-desc{
  font-size: 17px;
  line-height: 1.95;
  margin-bottom: 12px;
}

/* ===== FORM LABEL (present / negative / past) ===== */

.form-label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* Present */
.form-label.present{
  background: #eef2ff;
  color: #4f46e5;
}

/* Negative */
.form-label.negative{
  background: #fff1f2;
  color: #e11d48;
}

/* Past */
.form-label.past{
  background: #f0fdf4;
  color: #16a34a;
}


.form-label.past-negative{
  background-color: #fdfdf0;
    color: #a39516;

}


.form-card h3{
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
}

/* ربط اللون بالنوع */
.form-card.present {
  color: #4f46e5;
}

.form-card.negative {
  color: #e11d48;
}

.form-card.past {
  color: #16a34a;
}


.form-card.past-negative{
    color: #a39516;
}


.adj-i-ending{
  color: var(--adj-i-ending);
  font-weight: 800;
}

.adj-chip-list{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.adj-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #f4f1ff;
  color: var(--adj-purple);
  font-size: 17px;
  font-weight: 700;
  border: 1px solid #ece4ff;
}

/* special section */
.adj-special-case-card{
  background: linear-gradient(135deg, var(--adj-special-bg), #ffffff);
  border: 1px solid var(--adj-special-border);
}

.adj-special-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.adj-special-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #ffeaf2;
  color: #c1477a;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}

.adj-special-text.strong{
  font-size: 18px;
  font-weight: 700;
  color: var(--adj-special-text);
  margin-bottom: 8px;
}

.adj-special-sub{
  font-size: 16px;
  line-height: 1.95;
  color: var(--adj-text-soft);
}

.adj-special-item{
  background: #fff;
  border: 1px solid var(--adj-special-border);
  border-radius: 18px;
  padding: 16px;
  text-align: center;
}

.adj-special-item small{
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: var(--adj-text-soft);
}

/* conjugation */
.adj-card-top{
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--adj-border-strong);
}

.adj-card-top p{
  font-size: 16px;
}

.adj-form-list{
  display: grid;
  gap: 14px;
}

.adj-form-item{
  background: #fff;
  border: 1px solid var(--adj-border);
  border-radius: 18px;
  padding: 16px;
}

.adj-form-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.adj-form-item h4{
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
}

.adj-form-tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f8f6ff;
  color: #8d7ef5;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.adj-steps{
  margin: 10px 0 12px;
  padding-right: 18px;
}

.adj-steps li{
  font-size: 16px;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--adj-text);
}

.adj-example-small{
  font-size: 15px;
  color: var(--adj-text-soft);
  padding: 10px 12px;
  background: #faf9ff;
  border-radius: 14px;
  border: 1px dashed #e7e0ff;
}

/* usage */
.adj-usage-card{
  min-height: 220px;
}

.adj-usage-box{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.adj-usage-line{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 16px;
  color: var(--adj-text);
}

.adj-usage-line.result{
  font-weight: 700;
  color: var(--adj-purple);
  padding-top: 6px;
  border-top: 1px dashed var(--adj-border-strong);
  margin-top: 4px;
}

.adj-ar-desc{
  font-size: 16px;
  margin-top: 6px;
}

/* examples */
.adj-example-card.new{
  padding: 20px;
  border-radius: 18px;
  background: #fafaff;
}

.adj-example-jp{
  font-size: 19px;
  font-weight: 700;
  color: #1d2939;
  line-height: 1.8;
  text-align: left;
}

.adj-divider{
  height: 1px;
  background: #ece7ff;
  margin: 10px 0;
}

.adj-example-ar.big{
  font-size: 17px;
  font-weight: 600;
  color: var(--adj-text);
}

/* =========================================================
   PRACTICE — matched closer to verb types page
   ========================================================= */

.adj-practice-list{
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.adj-question-card{
  display: grid;
  grid-template-columns: 56px minmax(260px, 1.5fr) 170px minmax(180px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 20px 18px;
  border: 1px solid #e2e8f0;
  border-radius: 28px;
  background: #fff;
}

.q-number{
  grid-column: 1;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: #f3e8ff;
  color: #6d28d9;
  font-weight: 800;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
}

.q-text{
  grid-column: 2;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--adj-text-soft);
  line-height: 1.8;
  text-align: right;
  min-width: 0;
}

.show-answer-btn{
  grid-column: 3;
  min-width: 140px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: #efecfb;
  color: #4f46d8;
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-family: "Tajawal", sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.show-answer-btn:hover{
  background: #e3def8;
  transform: translateY(-1px);
}

.answer{
  grid-column: 4;
  display: none;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--adj-text-soft) !important;
  line-height: 1.8;
  text-align: left;
  white-space: nowrap;
  min-width: 0;
}

.answer.show{
  display: block;
}

/* keep na on right, i on left */
.adj-types-grid > .adj-na-card,
.adj-conjugation-grid > .adj-na-card,
.adj-usage-grid > .adj-na-card{
  order: 1;
}

.adj-types-grid > .adj-i-card,
.adj-conjugation-grid > .adj-i-card,
.adj-usage-grid > .adj-i-card{
  order: 2;
}




/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px){
  .adj-hero h1{
    font-size: 34px;
  }

  .adj-hero p{
    font-size: 17px;
  }

  .adj-section-title-wrap h2,
  .adj-special-head h2,
  .adj-practice-section h2{
    font-size: 25px;
  }

  .adj-type-card h3,
  .adj-conjugation-card h3,
  .adj-usage-card h3{
    font-size: 22px;
  }

  .adj-question-card{
    grid-template-columns: 52px minmax(220px, 1.5fr) 150px minmax(150px, 1fr);
    gap: 16px;
  }

  .q-text,
  .answer{
    font-size: 17px;
  }

  .show-answer-btn{
    min-width: 130px;
    font-size: 15px;
  }
}

@media (max-width: 900px){
  .adj-types-grid,
  .adj-conjugation-grid,
  .adj-usage-grid,
  .adj-special-grid,
  .adj-example-grid{
    grid-template-columns: 1fr;
  }

  .adj-hero h1{
    font-size: 30px;
  }

  .adj-hero p{
    font-size: 16px;
  }

  .adj-section-title-wrap h2,
  .adj-special-head h2,
  .adj-practice-section h2{
    font-size: 23px;
  }

  .adj-type-card h3,
  .adj-conjugation-card h3,
  .adj-usage-card h3{
    font-size: 20px;
  }

  .adj-type-desc,
  .adj-card-top p,
  .adj-ar-desc,
  .adj-special-sub,
  .adj-example-ar.big,
  .adj-section-title-wrap p{
    font-size: 15px;
  }

  .adj-special-text.strong{
    font-size: 17px;
  }

  .adj-steps li{
    font-size: 15px;
  }

  .adj-example-jp{
    font-size: 18px;
    white-space: normal;
  }

  .adj-question-card{
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 18px 16px;
  }

  .q-number{
    grid-column: auto;
    justify-self: end;
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 20px;
  }

  .q-text{
    grid-column: auto;
    font-size: 16px;
    text-align: right;
  }

  .show-answer-btn{
    grid-column: auto;
    justify-self: center;
    min-width: 140px;
    font-size: 15px;
  }

  .answer{
    grid-column: auto;
    text-align: right;
    font-size: 16px;
    white-space: normal;
  }
}

@media (max-width: 640px){
  .adjectives-page{
    padding: 20px 0 36px;
  }

  .adj-hero,
  .adj-section-card,
  .adj-special-case-card,
  .adj-practice-section{
    padding: 18px;
    border-radius: 22px;
  }

  .adj-type-card,
  .adj-conjugation-card,
  .adj-usage-card,
  .adj-example-card,
  .adj-special-item{
    padding: 15px;
    border-radius: 18px;
  }

  .adj-hero h1{
    font-size: 26px;
  }

  .adj-hero p{
    font-size: 15px;
  }

  .adj-section-title-wrap h2,
  .adj-special-head h2,
  .adj-practice-section h2{
    font-size: 21px;
  }

  .adj-type-card h3,
  .adj-conjugation-card h3,
  .adj-usage-card h3{
    font-size: 18px;
  }

  .adj-type-desc,
  .adj-card-top p,
  .adj-ar-desc,
  .adj-special-sub,
  .adj-example-ar.big,
  .adj-section-title-wrap p{
    font-size: 14px;
  }

  .adj-chip{
    font-size: 15px;
    min-height: 36px;
    padding: 6px 12px;
  }

  .adj-form-head{
    flex-direction: column;
    align-items: flex-start;
  }

  .adj-form-item h4{
    font-size: 17px;
  }

  .adj-steps{
    padding-right: 18px;
  }

  .adj-steps li{
    font-size: 14px;
  }

  .adj-example-small{
    font-size: 13px;
  }

  .adj-example-jp{
    font-size: 16px;
  }

  .q-text{
    font-size: 15px;
  }

  .show-answer-btn{
    font-size: 14px;
    padding: 10px 16px;
  }

  .answer{
    font-size: 15px;
  }
}










/* =========================================================
   VERB TYPES PRACTICE — FINAL
   Match adjectives layout, but respect current verb HTML
   Put this at the VERY END of styles.css
   ========================================================= */

.verb-practice-list{
  display: grid !important;
  gap: 16px !important;
  margin-top: 18px !important;
}

.verb-practice-item{
  display: grid !important;
  grid-template-columns: 56px minmax(260px, 1.5fr) 170px minmax(180px, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 20px 18px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 28px !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.03) !important;
}

/* الرقم */
.verb-practice-number-side{
  grid-column: 1 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: auto !important;
}

.verb-practice-number{
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  flex: 0 0 44px !important;
  border-radius: 50% !important;
  background: #f3e8ff !important;
  color: #6d28d9 !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* السؤال */
.verb-practice-question-side{
  grid-column: 2 !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  width: auto !important;
}

/* إذا فيه wrapper داخلي للسؤال */
.verb-practice-question-row{
  display: contents !important;
}

.verb-practice-question{
  width: 100% !important;
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--adj-text-soft) !important;
  line-height: 1.8 !important;
  text-align: right !important;
  min-width: 0 !important;
}

/* الزر */
.verb-practice-button-side{
  grid-column: 3 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 !important;
}

.verb-answer-toggle{
  min-width: 140px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  background: #efecfb !important;
  color: #4f46d8 !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-family: "Tajawal", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background .2s ease, transform .2s ease !important;
}

.verb-answer-toggle:hover{
  background: #e3def8 !important;
  transform: translateY(-1px) !important;
}

/* الجواب */
.verb-practice-answer-side{
  grid-column: 4 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  text-align: left !important;
}

.verb-practice-answer{
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--adj-text-soft) !important;
  line-height: 1.8 !important;
  text-align: left !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}

/* دعم الطريقتين: hidden أو show */
.verb-practice-answer[hidden]{
  display: none !important;
}

.verb-practice-answer.show{
  display: block !important;
}

/* لو السكربت يزيل hidden فقط، نخلي العنصر يرجع طبيعي */
.verb-practice-answer:not([hidden]){
  display: block !important;
}

/* tablet */
@media (max-width: 1100px){
  .verb-practice-item{
    grid-template-columns: 52px minmax(220px, 1.5fr) 150px minmax(150px, 1fr) !important;
    gap: 16px !important;
  }

  .verb-practice-question,
  .verb-practice-answer{
    font-size: 17px !important;
  }

  .verb-answer-toggle{
    min-width: 130px !important;
    font-size: 15px !important;
  }

  .verb-practice-number{
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    font-size: 20px !important;
  }
}

/* mobile */
@media (max-width: 768px){
  .verb-practice-item{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 18px 16px !important;
  }

  .verb-practice-number-side{
    grid-column: auto !important;
    justify-content: flex-end !important;
  }

  .verb-practice-question-side{
    grid-column: auto !important;
  }

  .verb-practice-button-side{
    grid-column: auto !important;
    justify-content: center !important;
  }

  .verb-practice-answer-side{
    grid-column: auto !important;
    justify-content: flex-start !important;
  }

  .verb-practice-question{
    font-size: 16px !important;
    text-align: right !important;
  }

  .verb-practice-answer{
    font-size: 16px !important;
    text-align: right !important;
    white-space: normal !important;
  }

  .verb-answer-toggle{
    min-width: 140px !important;
    font-size: 15px !important;
  }

  .verb-practice-number{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    font-size: 20px !important;
  }
}

@media (max-width: 480px){
  .verb-practice-question{
    font-size: 15px !important;
  }

  .verb-practice-answer{
    font-size: 15px !important;
  }

  .verb-answer-toggle{
    font-size: 14px !important;
    padding: 10px 16px !important;
  }
}



/* ===== Center verb types practice below 1024px ===== */
@media (max-width: 1023px){

  .verb-practice-item{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 18px 16px !important;
    text-align: center !important;
  }

  .verb-practice-number-side{
    grid-column: auto !important;
    justify-content: center !important;
  }

  .verb-practice-question-side{
    grid-column: auto !important;
    justify-content: center !important;
    display: flex !important;
  }

  .verb-practice-button-side{
    grid-column: auto !important;
    justify-content: center !important;
  }

  .verb-practice-answer-side{
    grid-column: auto !important;
    justify-content: center !important;
    display: flex !important;
  }

  .verb-practice-number{
    justify-self: center !important;
    margin: 0 auto !important;
  }

  .verb-practice-question{
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .verb-answer-toggle{
    align-self: center !important;
    margin: 0 auto !important;
  }

  .verb-practice-answer{
    text-align: center !important;
    white-space: normal !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}





.adj-chip-list-meaning{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
  justify-content: center;
}

.adj-chip-card{
  min-width: 150px;
  padding: 12px 16px;
  border-radius: 20px;
  background: #f7f4ff;
  border: 1px solid #e8e0ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

.adj-chip-word{
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #7c6cf2;
  line-height: 1.4;
}

.adj-chip-meaning{
  font-size: 14px;
  font-weight: 600;
  color: #667085;
  line-height: 1.
}





/* ===== Special note: いい adjective ===== */

.adj-ii-note-card{
  background: linear-gradient(135deg, #fffdf8, #ffffff);
  border: 1px solid #f3dfb3;
  border-radius: 26px;
  padding: 26px;
  margin-bottom: 24px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.adj-ii-head{
  margin-bottom: 16px;
}

.adj-ii-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff2cc;
  color: #a16207;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}

.adj-ii-head h2{
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
}

.adj-ii-intro{
  font-size: 17px;
  line-height: 2;
  color: #667085;
  margin-bottom: 10px;
}

.adj-ii-flow{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 18px 0 22px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #fffaf0;
  border: 1px dashed #f3dfb3;
}

.adj-ii-step{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #f3dfb3;
  color: #a16207;
  font-size: 18px;
  font-weight: 700;
}

.adj-ii-arrow{
  font-size: 15px;
  font-weight: 700;
  color: #a16207;
}

.adj-ii-forms{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.adj-ii-form-card{
  background: #fff;
  border: 1px solid #f1e4c4;
  border-radius: 20px;
  padding: 18px;
}

.adj-ii-form-card h3{
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
  color: #0f172a;
}

.adj-ii-jp{
  font-size: 22px;
  font-weight: 700;
  color: #a16207;
  margin-bottom: 8px;
  text-align: left;
}

.adj-ii-ar{
  font-size: 15px;
  color: #667085;
  line-height: 1.8;
}

.adj-ii-summary{
  background: #fff;
  border: 1px solid #f1e4c4;
  border-radius: 20px;
  padding: 18px;
}

.adj-ii-summary h3{
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
}

.adj-ii-summary ul{
  margin: 0;
  padding-right: 18px;
}

.adj-ii-summary li{
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 6px;
  color: #0f172a;
}

@media (max-width: 900px){
  .adj-ii-forms{
    grid-template-columns: 1fr;
  }

  .adj-ii-head h2{
    font-size: 24px;
  }

  .adj-ii-intro{
    font-size: 16px;
  }

  .adj-ii-jp{
    font-size: 20px;
  }
}

@media (max-width: 640px){
  .adj-ii-note-card{
    padding: 18px;
    border-radius: 20px;
  }

  .adj-ii-head h2{
    font-size: 21px;
  }

  .adj-ii-intro,
  .adj-ii-summary li,
  .adj-ii-ar{
    font-size: 14px;
  }

  .adj-ii-jp{
    font-size: 18px;
  }

  .adj-ii-flow{
    padding: 12px;
  }
}



.formula-list .jp-inline{
  font-family: "Noto Sans JP", sans-serif;
  direction: ltr;
  unicode-bidi: isolate;
}

.formula-list small{
  font-size: 13px;
  font-weight: 700;
  color: #7c6cf2;
  margin-right: 6px;
}


.formula-list{
  list-style: none;
  padding: 0;
  margin: 10px 0 12px;
  display: grid;
  gap: 8px;
}

.formula-list li{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  font-size: 18px;
  line-height: 1.9;
}

.formula-label{
  font-family: "Tajawal", sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #7c6cf2;
  white-space: nowrap;
}

.formula-pattern{
  font-family: "Tajawal", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

.formula-pattern .jp-inline,
.formula-pattern .jp-part{
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
}

.adj-example-line{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #faf9ff;
  border: 1px dashed #e7e0ff;
}

.adj-example-tag{
  font-family: "Tajawal", sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #7c6cf2;
  white-space: nowrap;
}

.adj-example-flow{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex: 1;
  direction: ltr;
}

.adj-example-from,
.adj-example-to{
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #475467;
  line-height: 1.6;
}

.adj-example-to{
  color: #1d2939;
}

.adj-example-arrow{
  font-size: 28px;
  font-weight: 900;
  color: #9b8cff;
  line-height: 1;
}

@media (max-width: 640px){
  .formula-list li{
    font-size: 15px;
    gap: 10px;
  }

  .formula-label{
    font-size: 12px;
  }

  .adj-example-line{
    flex-direction: column;
    align-items: flex-start;
  }

  .adj-example-flow{
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .adj-example-from,
  .adj-example-to{
    font-size: 17px;
  }
}













/* تحسين صندوق المثال */

.adj-example-line{
  background: #fcfbff; /* أخف */
  border: 1px dashed #e3dcff;
  padding: 12px 14px;
  border-radius: 14px;
}

/* كلمة "مثال" */
.adj-example-tag{
  color: #8b7cf6;
  font-size: 12px;
}

/* النص كله */
.adj-example-flow{
  gap: 10px;
}

/* الأصل */
.adj-example-from{
  color: #98a2b3; /* رمادي هادئ */
  font-weight: 600;
}


/* الناتج (الأهم) */
.adj-example-to{
  color: #475467; /* رمادي غامق خفيف */
  font-weight: 700;
}

/* تحسين سطرين (لو فيه line break) */
.adj-example-to br{
  line-height: 1.6;
}





/* updated noun with adj sectoin */

.na-highlight{
  color: #7c6cf2;
  font-weight: 800;
}

.adj-usage-box{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.adj-usage-line{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.adj-usage-label{
  min-width: 78px;
  font-weight: 700;
  color: #667085;
}

.adj-usage-jp-wrap{
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.adj-usage-jp-wrap .jp,
.adj-usage-line.result .jp{
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 700;
  direction: ltr;
  unicode-bidi: isolate;
}

.adj-usage-meaning{
  font-size: 15px;
  color: #667085;
}

.adj-usage-line.result{
  padding-top: 8px;
  border-top: 1px dashed #ddd2ff;
  margin-top: 4px;
}

.adj-usage-rule{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.adj-usage-rule-label{
  font-weight: 700;
  color: #667085;
}

.adj-usage-rule-text{
  font-size: 16px;
  font-weight: 700;
  color: #1d2939;
}

.adj-usage-rule-text .jp-inline{
  font-family: "Noto Sans JP", sans-serif;
}

@media (max-width: 640px){
  .adj-usage-line{
    align-items: flex-start;
  }

  .adj-usage-jp-wrap{
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .adj-usage-jp-wrap .jp,
  .adj-usage-line.result .jp{
    font-size: 16px;
  }

  .adj-usage-meaning,
  .adj-usage-rule-text{
    font-size: 14px;
  }

  .adj-usage-rule{
    flex-direction: column;
    align-items: flex-start;
  }
}


.na-highlight{
  color: #e9a12b;
  font-weight: 800;
}





/* ===== Center practice ONLY on small screens ===== */
@media (max-width: 1023px){

  .adj-question-card{
    text-align: center;
  }

  .adj-question-top{
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .q-number{
    text-align: center;
  }

  .q-text{
    text-align: center;
  }

  .show-answer-btn{
    align-self: center;
  }

  .answer{
    text-align: center;
    margin: 0 auto;
  }

}



/* ===== Fix adjectives practice text wrapping without changing design ===== */

.adj-question-card{
  min-width: 0 !important;
  overflow: visible !important;
}

.q-text{
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-break: auto !important;
}

.q-text .jp,
.q-text .jp-inline{
  display: inline !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

/* when practice becomes centered on screens below 1024px */
@media (max-width: 1023px){
  .adj-question-card{
    min-width: 0 !important;
    overflow: visible !important;
  }



  .q-text{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

}



  .answer{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
  }


/* توسيط رقم السؤال */
.q-number{
  margin: 0 auto;
}





/*Header for burger menu*/


@media (max-width: 850px){
  .header-top{
    position: relative;
    border-bottom: 1px solid rgba(0,0,0,0.04);
  }

  /* لا نخفيه نهائيًا، فقط نجعله بلا ارتفاع */
  .header-bottom{
    display: block !important;
    height: 0;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .nav-bottom{
    padding: 0;
    min-height: 0;
    position: static;
  }

  .nav-top{
    min-height: 84px;
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* الشعار يمين */
  .brand{
    order: 1;
    margin: 0;
  }

  /* البيرغر يسار */
  .burger{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    order: 2;
    margin: 0;
  }

  .navtools{
    display: none !important;
  }

  #navlinks{
    display: none;
    position: fixed;
    top: 88px;
    left: 16px;
    right: 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    z-index: 1000;
  }

  #navlinks.open{
    display: flex !important;
  }

  #navlinks a,
  #navlinks .dropdown-toggle{
    width: 100%;
    text-align: center;
    padding: 14px 12px;
    border-radius: 14px;
  }

  #navlinks .dropdown{
    width: 100%;
  }

  #navlinks .dropdown-menu{
    position: static;
    display: block;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 4px 0 0;
    min-width: auto;
  }

  #navlinks .dropdown-menu a{
    background: #fafafa;
    margin-top: 4px;
    border-radius: 12px;
  }
}



@media (max-width: 850px){
  .mobile-more{
    margin-top: 4px;
    border-top: 1px dashed #e5e7eb;
    padding-top: 10px;
  }

  .mobile-more summary{
    list-style: none;
  }

  .mobile-more summary::-webkit-details-marker{
    display: none;
  }

  .mobile-more-toggle{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 12px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: transparent;
    color: #111827;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
  }

  .mobile-more-toggle:hover{
    background: rgba(22,163,74,.08);
    border-color: rgba(22,163,74,.18);
  }

  .mobile-more-arrow{
    font-size: 14px;
    transition: transform .2s ease;
  }

  .mobile-more .mobile-more-menu{
    margin-top: 8px;
    padding-top: 2px;
  }

  .mobile-more[open] .mobile-more-menu{
    display: block !important;
  }

  .mobile-more[open] .mobile-more-arrow{
    transform: rotate(180deg);
  }

  .mobile-more-menu a{
    display: block;
    text-align: center;
    padding: 12px;
    margin-top: 6px;
    border-radius: 12px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    color: #667085;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
  }

  .mobile-more-menu a:hover{
    background: rgba(22,163,74,.08);
    border-color: rgba(22,163,74,.18);
    color: #111827;
  }
}







@media (max-width: 850px){
  /* القائمة الرئيسية */
  #navlinks{
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 16px;
    right: 16px;
    width: auto;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    z-index: 1000;
  }

  #navlinks.open{
    display: flex !important;
  }

  /* البحث */
  .mobile-menu-search{
    display: flex !important;
    width: 100%;
    min-width: 0;
    margin: 0 0 8px 0;
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: #fff;
  }

  .mobile-menu-search input{
    font-size: 14px;
  }

  /* الروابط الأساسية */
  #navlinks > a{
    width: 100%;
    text-align: center;
    padding: 14px 12px;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    background: transparent;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
  }

  #navlinks > a:hover{
    background: rgba(22,163,74,.08);
    border-color: rgba(22,163,74,.18);
  }

  #navlinks > a.active{
    background: rgba(225,29,72,.08);
    border-color: rgba(225,29,72,.18);
  }

  /* قسم المزيد */
  .mobile-more{
    margin-top: 4px;
    border-top: 1px dashed #e5e7eb;
    padding-top: 10px;
  }

  .mobile-more summary{
    list-style: none;
  }

  .mobile-more summary::-webkit-details-marker{
    display: none;
  }

  .mobile-more-toggle{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 12px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: transparent;
    color: #111827;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
  }

  .mobile-more-toggle:hover{
    background: rgba(22,163,74,.08);
    border-color: rgba(22,163,74,.18);
  }

  .mobile-more-arrow{
    font-size: 14px;
    transition: transform .2s ease;
  }

  .mobile-more[open] .mobile-more-arrow{
    transform: rotate(180deg);
  }

  .mobile-more-menu{
    margin-top: 8px;
    padding-top: 2px;
  }

  .mobile-submenu-title{
    font-size: 13px;
    font-weight: 700;
    color: #98a2b3;
    text-align: center;
    margin-bottom: 6px;
  }

  .mobile-more-menu a{
    display: block;
    text-align: center;
    padding: 12px;
    margin-top: 6px;
    border-radius: 12px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    color: #667085;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
  }

  .mobile-more-menu a:hover{
    background: rgba(22,163,74,.08);
    border-color: rgba(22,163,74,.18);
    color: #111827;
  }
}

@media (min-width: 851px){
  .mobile-menu-search,
  .mobile-more{
    display: none !important;
  }
}

.mobile-more-menu{
  display: none;
}

.mobile-more.open .mobile-more-menu{
  display: block;
}

.mobile-more-arrow{
  transition: transform .2s ease;
}

.mobile-more.open .mobile-more-arrow{
  transform: rotate(180deg);
}



.dropdown{
  position: relative;
}

/* invisible bridge to keep hover alive */
.dropdown::after{
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  height: 10px;
}



/* desktop/mobile more separation */
.desktop-more{
  display: inline-block;
}

.mobile-more{
  display: none;
}

.mobile-more-menu{
  display: none;
}

.mobile-more.open .mobile-more-menu{
  display: block;
}

.mobile-more-arrow{
  transition: transform .2s ease;
}

.mobile-more.open .mobile-more-arrow{
  transform: rotate(180deg);
}

@media (max-width: 850px){
  .desktop-more{
    display: none !important;
  }

  .mobile-more{
    display: block !important;
    width: 100%;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
  }

  .mobile-more-toggle{
    width: 100%;
    padding: 14px 12px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .mobile-more-toggle:hover{
    background: rgba(22,163,74,.08);
    border-color: rgba(22,163,74,.18);
  }

  .mobile-more-menu a{
    display: block;
    text-align: center;
    padding: 12px;
    margin-top: 6px;
    border-radius: 12px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    color: #667085;
  }

  .mobile-more-menu a:hover{
    background: rgba(22,163,74,.08);
    border-color: rgba(22,163,74,.18);
    color: #111827;
  }
}



/* =========================
   TE FORM PAGE
========================= */

.te-use-link{
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  color: #6b8f71; /* نفس الأخضر عندك */
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s;
}

.te-use-link:hover{
  color: #4f7c5d;
}

.use-arrow{
  margin-right: 5px;
  font-size: 18px;
  font-weight: 900;
}
/* =========================
   TE FORM PAGE
   Match verb-types + adjectives language
========================= */

.teform-page{
  padding-bottom: 48px;
}

.teform-hero .hero-card{
  background: linear-gradient(135deg, #fffdf8 0%, #f7f3ff 100%);
  border: 1px solid #ece7f7;
  border-radius: 28px;
  padding: 30px 24px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  margin-top: 30px;
  text-align: center;
}

.teform-hero .hero-badge{
  display: inline-block;
  background: #eef2ff;
  color: #4338ca;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.teform-hero h1{
  margin: 0 0 12px;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.2;
}

.teform-hero p{
  margin: 0 auto;
  max-width: 900px;
  color: #475569;
  font-size: 18px;
  line-height: 1.9;
}

.teform-layout{
  display: grid;
  gap: 24px;
  margin-top: 26px;
}

.te-card{
  background: #fff;
  border: 1px solid #eaeef5;
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.te-section-title-wrap{
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.te-section-title-wrap h2{
  margin: 0;
  font-size: 34px;
  line-height: 1.3;
}

.te-section-title-wrap p{
  margin: 0;
  color: #64748b;
  line-height: 1.9;
  font-size: 17px;
}

.te-uses-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.te-use-card{
  border: 1px solid #ece7f7;
  border-radius: 20px;
  padding: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
}

.te-use-card h3{
  margin: 0 0 8px;
  font-size: 28px;
}

.te-use-formula{
  font-size: 22px;
  font-weight: 700;
  color: #4338ca;
  margin-bottom: 10px;
}

.te-use-desc{
  color: #64748b;
  line-height: 1.9;
}

.te-mini-example{
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  background: #fafafa;
  border: 1px dashed #e6dfff;
}

.te-mini-example p{
  margin: 0;
}

.te-mini-example .jp{
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 6px;
}

.te-rule-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.te-rule-item{
  border: 1px solid #eaeef5;
  border-radius: 22px;
  padding: 18px;
  background: #fff;
}

.rule-soft-purple{ background: linear-gradient(180deg, #fff 0%, #fcfbff 100%); border-color: #e8ddff; }
.rule-soft-green{ background: linear-gradient(180deg, #fff 0%, #f8fffb 100%); border-color: #d9efe2; }
.rule-soft-blue{ background: linear-gradient(180deg, #fff 0%, #f8fbff 100%); border-color: #dbeafe; }
.rule-soft-orange{ background: linear-gradient(180deg, #fff 0%, #fffaf5 100%); border-color: #fde7d4; }
.rule-soft-pink{ background: linear-gradient(180deg, #fff 0%, #fff8fb 100%); border-color: #f7d8e6; }
.rule-soft-lilac{ background: linear-gradient(180deg, #fff 0%, #fbf9ff 100%); border-color: #e9defd; }

.te-rule-head{
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.te-rule-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f1edff;
  color: #7c6cf2;
  font-size: 13px;
  font-weight: 700;
}

.te-rule-head h3{
  margin: 0;
  font-size: 26px;
  line-height: 1.55;
}

.te-steps{
  margin: 0;
  padding-right: 20px;
  display: grid;
  gap: 6px;
}

.te-steps li{
  font-size: 18px;
  color: #334155;
  line-height: 1.9;
}

.te-rule-example{
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  background: #fafafa;
  border: 1px dashed #e5e7eb;
  display: grid;
  gap: 8px;
  direction: ltr;
}

.te-rule-example p{
  margin: 0;
  color: #64748b;
  line-height: 1.9;
}

.te-rule-example .jp{
  color: #111827;
  font-weight: 700;
}

.te-special-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.te-special-item{
  border: 1px solid #eaeef5;
  border-radius: 20px;
  padding: 20px;
  background: #fff;
  text-align: center;
}

.te-special-warning{
  background: linear-gradient(180deg, #fff 0%, #fff9fb 100%);
  border-color: #f3d8e3;
}

.te-special-label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f1edff;
  color: #7c6cf2;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
}

.te-special-label.warning{
  background: #fff1f2;
  color: #e11d48;
}

.te-special-flow{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 30px;
  font-weight: 800;
  direction: ltr;
}

.te-arrow{
  color: #8b82f7;
  font-size: 24px;
}

.te-special-item p{
  margin: 12px 0 0;
  color: #64748b;
}

.te-double-grid{
  display: grid;
  /* grid-template-columns: repeat(2, minmax(0, 1fr)); */
  gap: 18px;
}

.te-request-formula{
  font-size: 30px;
  font-weight: 800;
  text-align: center;
  margin: 0 0 14px;
  color: #4338ca;
}

.te-practice-section{
  border-color: #e3d5ff;
}

.teform-page .jp,
.teform-page .jp-inline,
.teform-page .answer .jp,
.teform-page .q-text .jp{
  font-family: "Noto Sans JP", sans-serif;
  direction: ltr;
  unicode-bidi: isolate;
}

@media (max-width: 1024px){
  .te-uses-grid,
  .te-rule-grid,
  .te-special-grid,
  .te-double-grid{
    grid-template-columns: 1fr;
  }

  .teform-hero h1{
    font-size: 34px;
  }

  .te-section-title-wrap h2{
    font-size: 26px;
  }

  .te-rule-head h3,
  .te-use-card h3{
    font-size: 22px;
  }
}

@media (max-width: 640px){
  .teform-hero .hero-card,
  .te-card{
    padding: 18px;
    border-radius: 22px;
  }

  .teform-hero p,
  .te-section-title-wrap p,
  .te-steps li,
  .te-rule-example p{
    font-size: 15px;
  }
}







.te-type-intro-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:18px;
  margin-bottom:18px;
}

.te-type-intro-card{
  border: 1px solid #eaeef5;
  border-radius: 20px;
  padding: 18px;
  background: linear-gradient(180deg, #fff 0%, #fcfbff 100%);
}

.te-type-intro-card h3{
  margin: 0 0 8px;
  font-size: 28px;
}

.te-type-intro-card p{
  margin: 0;
  color: #64748b;
  line-height: 1.9;
}




.te-old {
  position: relative;
}

.te-old::after {
  content: "✕";
  position: absolute;
  inset: 0;
  color: rgba(239, 68, 68, 0.6); /* أحمر فاتح */
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: 20px;
}


.te-new{
  color: #7c6cf2;
  font-weight: 800;
}

.te-ta-explain{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:18px;
}

.te-ta-mini-card{
  border: 1px solid #eaeef5;
  border-radius: 18px;
  padding: 18px;
  background: linear-gradient(180deg, #fff 0%, #fcfbff 100%);
}

.te-ta-mini-card h3{
  margin:0 0 8px;
  font-size: 24px;
}

.te-ta-formula{
  margin:0 0 14px;
  font-size: 24px;
  font-weight: 800;
  color:#4338ca;
}

@media (max-width: 1024px){
  .te-type-intro-grid,
  .te-ta-explain{
    grid-template-columns: 1fr;
  }
}


.answer{
  display:none;
}

.answer.visible{
  display:block;
}









.te-main-columns{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.te-column{
  display: grid;
  gap: 18px;
}

.te-example-row{
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  align-items: start;
  justify-content: start;
  direction: ltr;
  text-align: left;
  padding: 2px 0;
}

.te-example-side{
  display: grid;
  gap: 2px;
  justify-items: center;
}

.te-meaning{
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.6;
}

.te-rule-example{
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
  background: #fafafa;
  border: 1px dashed #e5e7eb;
  display: grid;
  gap: 16px;
}

.te-arrow{
  justify-self: center;
  margin-inline: 2px;
}

@media (max-width: 1024px){
  .te-main-columns{
    grid-template-columns: 1fr;
  }
}


.te-godan-column > .te-type-intro-card,
.te-ichidan-column > .te-type-intro-card{
  min-height: 220px; /* عدّلي الرقم حسب الشكل المناسب */
}

.te-special-flow-meaning{
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  align-items: center;
  justify-content: center;
  direction: ltr;
  text-align: left;
}

.te-special-side{
  display: grid;
  gap: 2px;
  justify-items: center;
}

.te-special-side .te-meaning{
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.6;
}







.ar-label{
  direction: rtl;
}

.jp-line-date{
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}






/* =========================
   Inner Pages - Shared
========================= */

.inner-page {
  min-height: 100vh;
}

.page-hero {
  padding: 80px 20px 34px;
  text-align: center;
}

.page-hero-soft {
  position: relative;
}

.page-hero-soft::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(255, 182, 193, 0.10), transparent 28%),
    radial-gradient(circle at top right, rgba(173, 216, 230, 0.12), transparent 30%);
  pointer-events: none;
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.hero-badge {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  color: #1d2340;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 700;
}

.page-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.2;
  color: #141936;
}

.hero-lead {
  max-width: 820px;
  margin: 0 auto;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: 2;
  color: #2b3150;
}

.page-section {
  padding: 26px 20px 70px;
}

.cards-grid {
  display: grid;
  gap: 24px;
}

.cards-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.cards-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.cards-grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.info-card,
.material-card,
.resource-card {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(6px);
  border-radius: 28px;
  padding: 28px 24px;
  box-shadow: 0 14px 35px rgba(0,0,0,0.06);
  border: 1px solid rgba(255,255,255,0.65);
}

.hover-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hover-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(0,0,0,0.09);
}

.card-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #fff, #f2eeee);
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  font-size: 22px;
  margin-bottom: 18px;
  color: #1b2040;
  font-weight: 800;
}

.info-card h2,
.material-card h2,
.resource-card h2,
.learning-path h2,
.mission-box h2,
.encourage-box h3 {
  margin: 0 0 14px;
  color: #141936;
  line-height: 1.4;
}

.info-card p,
.material-card p,
.resource-card p,
.mission-box p,
.encourage-box p,
.note-box p,
.contact-note p {
  line-height: 2;
  color: #2d3452;
  margin: 0;
  font-size: 18px;
}

.clean-list {
  margin: 0;
  padding-right: 20px;
  line-height: 2;
  color: #2d3452;
}

.mission-box,
.note-box,
.encourage-box,
.learning-path {
  background: rgba(255,255,255,0.82);
  border-radius: 28px;
  padding: 24px 24px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.05);
  margin-bottom: 28px;
}

.soft-box {
  margin-top: 28px;
}

.learning-path {
  text-align: center;
}

.learning-path p {
  margin-bottom: 16px;
  color: #3a4264;
  text-align: right;
}

.path-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.step {
  background: #f3eeee;
  color: #2a2f4a;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid #e7dede;
  box-shadow: none;
}

.materials-grid .featured-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,246,248,0.95) 100%);
  border: 1px solid rgba(243, 189, 201, 0.35);
}

/* .resource-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.resource-links a {
  text-decoration: none;
  color: #1a2140;
  background: #f5f2f2;
  padding: 10px 14px;
  border-radius: 14px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.resource-links a:hover {
  background: #ece6e6;
  transform: translateX(-2px);
}

.resource-card small {
  display: block;
  margin-top: 16px;
  color: #59607e;
  line-height: 1.8;
} */

.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.2fr;
  gap: 24px;
}

.contact-form .form-group {
  margin-bottom: 18px;
}

.contact-form label {
  display: block;
  margin-bottom: 8px;
  color: #141936;
  font-weight: 700;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid #ddd6d6;
  border-radius: 16px;
  padding: 14px 16px;
  font: inherit;
  background: #fff;
  color: #1e2340;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #c9b6ba;
  box-shadow: 0 0 0 4px rgba(201, 182, 186, 0.14);
}

.contact-note {
  margin-top: 20px;
  padding: 16px;
  background: #f6f2f2;
  border-radius: 18px;
}

.coming-soon-badge {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #f2eded;
  color: #1c2340;
  font-weight: 700;
}

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 20px;
  border-radius: 16px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.btn-primary {
  background: #20264a;
  color: #fff;
  box-shadow: 0 8px 18px rgba(32, 38, 74, 0.12);
}

.btn-secondary {
  background: #f2ecec;
  color: #1b2140;
}

.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-2px);
}

.btn-full {
  width: 100%;
}

.footer-inner {
  text-align: center;
  padding: 16px 0;
}

/* Responsive */
@media (max-width: 980px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .page-hero {
    padding-top: 64px;
  }

  .info-card,
  .material-card,
  .resource-card,
  .mission-box,
  .note-box,
  .encourage-box,
  .learning-path {
    border-radius: 22px;
    padding: 22px 18px;
  }

  .path-steps {
    gap: 10px;
  }

  .step {
    width: 100%;
    text-align: center;
  }
}


.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.card-header h2 {
  margin: 0;
}


.material-card {
  display: flex;
  flex-direction: column;
}

.material-card p {
  flex-grow: 1;
}


.material-card a,
.material-card .coming-soon-badge {
  margin-top: 20px;
}






.path-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 18px;
  margin-bottom: 25px;
}

.step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f5efef;
  color: #2a2f4a;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid #e7dede;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  border-radius: 50%; /* دائرة */

  background: #d6d9e8; /* لون هادئ */
  color: #1e2545;

  font-size: 14px;
  font-weight: 800;

  flex-shrink: 0;
}




.learning-order {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: 10px;
  column-gap: 12px;

  font-size: 15px;
  color: #4a506d;
  margin-bottom: 40px;
}

/* "ابدأ بـ:" */
.order-label {
  font-weight: 600;
  opacity: 0.7;
  margin-left: 6px;
}

/* العناصر */
.order-item {
  font-weight: 600;
  color: #2b3150;
  transition: 0.2s;
}

/* العنصر الحالي */
.order-item.active {
  color: #1f254a;
  font-weight: 800;

  background: #f3eeee;
  padding: 4px 10px;
  border-radius: 10px;
}

/* الأسهم ✨ */
.order-arrow {
  font-size: 14px;          /* أصغر */
  color: #b8b2b2;           /* لون هادئ */
  margin: 0 2px;
  transform: translateY(-1px); /* ضبط بصري */
}

/* hover خفيف */
.order-item:hover {
  color: #1d2245;
}



body > main > section.page-section > div > div > h2{
  margin-bottom: 50px;
}




.hide{
display: none;}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.card-header h2 {
  margin: 0;
}




.resource-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.resource-card .card-header {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.resource-card .card-header h2 {
  margin: 0;
}

.resource-card > p {
  min-height: 88px;
  line-height: 1.9;
  margin: 0 0 16px;
}

.resource-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0;
}

.resource-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 14px;
}

.resource-card small {
  margin-top: 18px;
  display: block;
  min-height: 52px;
  line-height: 1.8;
}


/*Contact page form enhance*/

.contact-side-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.side-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 999px;
  background: #f4efef;
  color: #20264a;
  font-size: 14px;
  font-weight: 700;
}

.side-intro {
  line-height: 2;
  color: #3b4262;
  margin: 0;
}

.contact-help-list {
  margin: 0;
  padding-right: 18px;
  line-height: 2.1;
  color: #2d3452;
}

.contact-help-list li {
  margin-bottom: 6px;
}

.contact-tip-box {
  padding: 18px;
  border-radius: 20px;
  background: #f7f3f3;
  border: 1px solid #eee3e3;
}

.contact-tip-box h3 {
  margin: 0 0 10px;
  color: #1d2342;
  font-size: 1.1rem;
}

.contact-tip-box p {
  margin: 0;
  line-height: 1.9;
  color: #4a516f;
}

.contact-mini-note {
  padding: 16px 18px;
  border-radius: 18px;
  background: #fbf8f8;
  border: 1px dashed #e5dcdc;
}

.contact-mini-note strong {
  display: block;
  margin-bottom: 8px;
  color: #1d2342;
}

.contact-mini-note p {
  margin: 0;
  line-height: 1.9;
  color: #4a516f;
}

.form-status {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.8;
}

.form-status.success {
  color: #1f6b3b;
}

.form-status.error {
  color: #a23a3a;
}











.form-status {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.8;
  font-weight: 500;
  display: none; /* مخفي بالبداية */
}

/* نجاح */
.form-status.success {
  display: block;
  background: #e8f8f0;
  color: #1f6b3b;
  border: 1px solid #b7e4c7;
  margin-top: 15px;
}

/* خطأ */
.form-status.error {
  display: block;
  background: #fdecec;
  color: #a23a3a;
  border: 1px solid #f5c2c2;
  margin-top: 15px;
}










/* ===== About Page Enhancements ===== */

.cards-grid-about {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.about-highlight {
  background: rgba(255,255,255,0.9);
  border-radius: 28px;
  padding: 26px 28px;
  box-shadow: 0 14px 35px rgba(0,0,0,0.05);
  margin-bottom: 24px;
}

.about-highlight p {
  margin: 0;
  line-height: 2;
  color: #2d3452;
  font-size: 18px;
}

.about-card {
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

.about-card p,
.about-card .clean-list {
  line-height: 2;
  color: #2d3452;
  font-size: 18px;
}

.about-card .clean-list {
  margin: 0;
}

.about-cta-box {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-direction: column;
}

.about-cta-text {
  flex: 1;
}

body > main > section.page-section > div > div.encourage-box.about-cta-box > div > div{
justify-content: center;}  

.about-cta-text h3 {
  margin: 0 0 10px;
}

.about-cta-text p {
  margin: 0;
  line-height: 2;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.card-header h2 {
  margin: 0;
  line-height: 1.4;
}

.card-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: #f4efef;
  color: #1f254a;
  box-shadow: none;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .cards-grid-about {
    grid-template-columns: 1fr;
  }

  .about-cta-box {
    flex-direction: column;
    align-items: flex-start;
  }
}











/* ===== Materials page responsive fix ===== */

@media (max-width: 768px) {
  .page-section{
    padding: 0;
  }
  .learning-path {
    padding: 20px 16px;
    margin-bottom: 18px;
    border-radius: 22px;
  }

  .learning-path h2 {
    font-size: 1.8rem;
    line-height: 1.4;
    margin-bottom: 10px;
  }

  .learning-path p {
    font-size: 1rem;
    line-height: 1.9;
    margin-bottom: 14px;
    text-align: center;
  }

  .learning-order {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 1rem;
  }

  .order-label {
    margin: 0 0 6px;
    font-size: 0.95rem;
  }

  .order-item {
    font-size: 1.05rem;
    line-height: 1.6;
  }

  .order-item.active {
    padding: 6px 14px;
    border-radius: 12px;
  }

  .order-arrow {
    transform: rotate(-90deg);
    font-size: 14px;
    line-height: 1;
    margin: 0;
    opacity: 0.55;
  }

  .materials-grid {
    gap: 18px;
    margin-top: 18px;
  }

  .material-card {
    min-height: auto;
    padding: 22px 18px;
    border-radius: 24px;
  }

  .featured-card {
    min-height: auto;
  }

  .card-header {
    gap: 10px;
    margin-bottom: 12px;
  }

  .card-header h2 {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  .card-icon {
    width: 42px;
    height: 42px;
    font-size: 18px;
    border-radius: 12px;
  }

  .material-card p {
    font-size: 1rem;
    line-height: 2;
    margin-bottom: 18px;
  }

  .material-card .btn-primary,
  .material-card .btn-secondary,
  .material-card .coming-soon-badge {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-self: stretch;
    justify-content: center;
  }

  .material-card .btn-primary,
  .material-card .btn-secondary {
    min-height: 48px;
    border-radius: 18px;
    padding: 12px 16px;
    font-size: 1rem;
  }

  .coming-soon-badge {
    text-align: center;
  }

  .encourage-box {
    padding: 20px 18px;
    border-radius: 22px;
  }

  .encourage-box h3 {
    /* font-size: 1.35rem; */
    line-height: 1.4;
  }

  .encourage-box p {
    font-size: 1rem;
    line-height: 1.9;
  }

  .resource-card > p {
    min-height: 0;
}

body > main > section.page-section > div > div > h2{
  margin-bottom: 10px;
}

body > main > section.page-section > div > div > p{
  margin-bottom: 30px;
}
}


body > main > section.page-section > div > div > p{
  text-align: center;
}


/*tips image*/
.tip-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.tip-header h3,
.tip-header h2 {
  margin: 0;
  line-height: 1.4;
}

.tip-icon-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}



@media (max-width: 768px) {
  .about-cta-box {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .about-cta-box .btn-primary {
    width: 100%;
    min-width: 0;
  }

  .tip-header {
    justify-content: center;
  }
}



.tip-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.tip-header h3 {
  margin: 0;
  line-height: 1.4;
}

.tip-icon-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .tip-header {
    justify-content: center;
    text-align: center;
  }
  body > main > section.page-section > div > div > p{
text-align: center;

}  
}




/* =====================================================
   HIRAGANA PAGE
===================================================== */

.page-hiragana{
  background:
    radial-gradient(circle at top right, rgba(244, 114, 182, 0.08), transparent 24%),
    radial-gradient(circle at top left, rgba(167, 139, 250, 0.08), transparent 28%),
    linear-gradient(180deg, #f7fbf9, #fff 35%, #fff9fb);
}

.hira-page{
  padding-bottom: 48px;
}

.hira-hero .hero-card{
  background: linear-gradient(135deg, #fffdf8 0%, #f7f3ff 100%);
  border: 1px solid #ece7f7;
  border-radius: 28px;
  padding: 30px 24px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  margin-top: 30px;
  text-align: center;
}

.hira-hero .hero-badge{
  display: inline-block;
  background: #eef2ff;
  color: #4338ca;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.hira-hero h1{
  margin: 0 0 12px;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.2;
}

.hira-hero p{
  margin: 0 auto;
  max-width: 920px;
  color: #475569;
  font-size: 18px;
  line-height: 1.9;
}

.hira-hero-stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.hira-stat{
  background: rgba(255,255,255,.82);
  border: 1px solid #ebe7f5;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.hira-stat strong{
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: #1f2937;
}

.hira-stat span{
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 14px;
}

.hira-layout{
  display: grid;
  gap: 24px;
  margin-top: 26px;
}

.hira-section-card{
  background: #fff;
  border: 1px solid #eaeef5;
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.hira-section-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.hira-section-head h2{
  margin: 0 0 8px;
  font-size: clamp(24px, 3vw, 34px);
}

.hira-section-head p{
  margin: 0;
  color: #64748b;
  line-height: 1.9;
  font-size: 16px;
}

.hira-section-badge{
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: #eef2ff;
  color: #4338ca;
}

.hira-section-badge.soft-purple{
  background: #f5f3ff;
  color: #6d28d9;
}

.hira-section-badge.soft-pink{
  background: #fff1f2;
  color: #be185d;
}

.hira-section-badge.soft-green{
  background: #ecfdf5;
  color: #047857;
}

/* top info cards */
.hira-info-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.hira-info-box,
.hira-similar-box,
.study-note-card{
  border: 1px solid #ebe7f5;
  border-radius: 22px;
  padding: 18px;
  background: linear-gradient(180deg, #ffffff, #fcfbff);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.card-header{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.card-icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #faf7ff;
  border: 1px solid #e8dcfa;
  color: #6d28d9;
  font-size: 24px;
  font-weight: 800;
  flex-shrink: 0;
}

.card-header h3{
  margin: 0;
  font-size: 18px;
}

.hira-info-box p,
.hira-similar-box p,
.study-note-card p{
  margin: 0;
  color: #64748b;
  line-height: 1.9;
}

/* main table */
.hira-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.hira-grid-table,
.hira-grid-compact{
  direction: ltr;
}

.hira-card{
  position: relative;
  border: 1px solid #ebe7f5;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(139, 92, 246, 0.10), transparent 38%),
    linear-gradient(180deg, #ffffff, #fcfbff);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  padding: 14px 12px;
  min-height: 160px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hira-card:hover,
.kana-mini-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
  border-color: #d8cff3;
}

.hira-card::before{
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, #c084fc, #f9a8d4);
  opacity: .95;
}

.hira-card-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  direction: ltr;
}

.hira-play-btn{
  width: 38px;
  height: 38px;
  border: 1px solid #e9def8;
  background: #fff;
  border-radius: 14px;
  cursor: pointer;
  font-size: 16px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
  flex-shrink: 0;
}

.hira-play-btn:hover{
  background: #faf7ff;
}

.hira-char{
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(42px, 4vw, 62px);
  font-weight: 800;
  line-height: 1;
  color: #1f2937;
  direction: ltr;
  text-align: right;
  flex: 1;
}

.hira-romaji{
  margin-top: 10px;
  font-size: 26px;
  font-weight: 800;
  color: #5b3df5;
  direction: ltr;
  text-align: left;
}

.hira-empty{
  min-height: 160px;
  background: transparent;
  border: none;
  box-shadow: none;
  pointer-events: none;
}

/* second section switch */
.kana-mobile-switch{
  display: inline-flex;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #ebe7f5;
  padding: 6px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.kana-switch-btn{
  border: none;
  background: transparent;
  padding: 10px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  color: #64748b;
}

.kana-switch-btn.active{
  background: #fff;
  color: #5b3df5;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.kana-panel{
  display: none;
}

.kana-panel.active{
  display: block;
}

/* mini cards with sound */
.kana-mini-card{
  position: relative;
  border: 1px solid #ebe7f5;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #fcfbff);
  min-height: 118px;
  padding: 16px 10px 12px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.kana-mini-card .jp{
  font-family: "Noto Sans JP", sans-serif;
  font-size: 34px;
  line-height: 1;
  color: #1f2937;
}

.kana-mini-card small{
  font-size: 21px;
  color: #5b3df5;
  font-weight: 800;
}

.mini-sound-btn{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid #e8dcfa;
  background: rgba(255,255,255,.95);
  font-size: 14px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}

/* similar letters */
.hira-similar-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* notes section */
.hira-notes-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.study-note-example{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #faf7ff;
  border: 1px solid #ece7f7;
  color: #1f2937;
  line-height: 1.8;
}

.study-note-list{
  margin: 0;
  padding-inline-start: 18px;
  color: #64748b;
  line-height: 2;
}

.study-note-list li{
  margin-bottom: 4px;
}

/* practice section */
.tip-header{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.tip-header h3{
  margin: 0;
  font-size: 20px;
}

.tip-icon{
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: #faf7ff;
  border: 1px solid #e8dcfa;
  border-radius: 14px;
  font-size: 20px;
}

.hira-practice-list{
  display: grid;
  gap: 14px;
}

.practice-row{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 18px 20px;
  border-radius: 20px;
  background: linear-gradient(180deg, #fcfbff, #faf7ff);
  border: 1px solid #e9e1fa;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.03);
}

.practice-row strong{
  min-width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #f3e8ff;
  color: #6d28d9;
  font-size: 18px;
  font-weight: 800;
}

.note-box{
  border: 1px solid #ebe7f5;
  border-radius: 22px;
  padding: 18px;
  background: linear-gradient(180deg, #ffffff, #fcfbff);
}

.note-box p{
  margin: 0;
  color: #64748b;
  line-height: 1.9;
}

.jp-inline{
  font-family: "Noto Sans JP", sans-serif;
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* simple modal */
.kana-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.kana-modal.hidden{
  display: none;
}

.kana-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(4px);
}

.kana-modal-card.kana-modal-simple{
  position: relative;
  width: min(920px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  margin: 12px auto;
  background: #fff;
  border-radius: 28px;
  border: 1px solid #ebe7f5;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.20);
  padding: 24px;
}

.kana-modal-close{
  position: absolute;
  top: 16px;
  left: 16px;
  width: 48px;
  height: 48px;
  border-radius: 18px;
  border: 1px solid #e6def8;
  background: #fff;
  cursor: pointer;
  font-size: 22px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.kana-modal-simple-head{
  display: flex;
  justify-content: flex-end;
  margin-bottom: 18px;
}

.kana-modal-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: #eef2ff;
  color: #5b3df5;
  font-size: 16px;
  font-weight: 800;
}

.kana-modal-simple-body{
  display: grid;
  gap: 22px;
}

.kana-modal-main-info{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.kana-modal-char{
  margin: 0;
  font-size: clamp(72px, 8vw, 120px);
  font-weight: 800;
  line-height: 1;
  color: #0f172a;
}

.kana-modal-main-meta{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.kana-meta-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  min-height: 78px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #faf7ff;
  border: 1px solid #e9def8;
  color: #6d28d9;
  font-weight: 800;
  font-size: 22px;
  direction: ltr;
}

.kana-play-big{
  border: 1px solid #cfe2cf;
  background: #f4faf4;
  color: #0f172a;
  padding: 16px 24px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.kana-modal-figure{
  border: 1px solid #ebe7f5;
  border-radius: 28px;
  background: #fbfaff;
  min-height: 420px;
  padding: 24px;
  display: grid;
  place-items: center;
}

.kana-modal-figure img{
  max-width: 100%;
  max-height: 360px;
  object-fit: contain;
}

.kana-modal-simple-note{
  margin: 0;
  padding: 18px 20px;
  border-radius: 20px;
  border: 1px dashed #ddd1f7;
  background: #faf7ff;
  color: #64748b;
  font-size: 18px;
  line-height: 1.9;
  text-align: right;
}

body.modal-open{
  overflow: hidden;
}

/* responsive but keep 5-column table on small screens */
@media (max-width: 1100px){
  .hira-info-grid,
  .hira-similar-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px){
  .hira-hero-stats{
    grid-template-columns: 1fr;
  }

  .hira-section-head{
    flex-direction: column;
  }

  .hira-info-grid,
  .hira-similar-grid,
  .hira-notes-grid{
    grid-template-columns: 1fr;
  }

  .hira-grid-table{
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
  }

  .hira-grid-compact{
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
  }

  .hira-card{
    min-height: 122px;
    padding: 10px 8px;
    border-radius: 18px;
  }

  .hira-empty{
    min-height: 122px;
  }

  .hira-play-btn{
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 13px;
  }

  .hira-char{
    font-size: 32px;
  }

  .hira-romaji{
    font-size: 18px;
    margin-top: 6px;
  }

  .kana-mini-card{
    min-height: 96px;
    padding: 12px 8px 10px;
    border-radius: 16px;
  }

  .kana-mini-card .jp{
    font-size: 24px;
  }

  .kana-mini-card small{
    font-size: 16px;
  }

  .mini-sound-btn{
    width: 24px;
    height: 24px;
    font-size: 11px;
    top: 8px;
    left: 8px;
  }

  .kana-mobile-switch{
    width: 100%;
    display: flex;
  }

  .kana-switch-btn{
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    font-size: 14px;
  }
}

@media (max-width: 520px){
  .hira-section-card{
    padding: 14px;
    border-radius: 18px;
  }

  .hira-grid-table,
  .hira-grid-compact{
    gap: 8px;
  }

  .hira-card{
    min-height: 96px;
    padding: 8px 6px;
    border-radius: 16px;
  }

  .hira-empty{
    min-height: 96px;
  }

  .hira-char{
    font-size: 24px;
  }

  .hira-romaji{
    font-size: 14px;
    margin-top: 4px;
  }

  .hira-play-btn{
    width: 24px;
    height: 24px;
    font-size: 11px;
    border-radius: 8px;
  }

  .hira-card::before{
    width: 4px;
  }

  .kana-mini-card{
    min-height: 78px;
    padding: 10px 6px 8px;
    border-radius: 14px;
  }

  .kana-mini-card .jp{
    font-size: 18px;
  }

  .kana-mini-card small{
    font-size: 13px;
  }

  .mini-sound-btn{
    width: 20px;
    height: 20px;
    font-size: 9px;
    border-radius: 7px;
    top: 6px;
    left: 6px;
  }

  .kana-modal-card.kana-modal-simple{
    padding: 18px;
    border-radius: 22px;
  }

  .kana-modal-close{
    width: 42px;
    height: 42px;
    font-size: 20px;
  }

  .kana-modal-main-info{
    flex-direction: column;
    align-items: flex-start;
  }

  .kana-modal-char{
    font-size: 72px;
  }

  .kana-meta-pill{
    min-width: 64px;
    min-height: 64px;
    font-size: 20px;
  }

  .kana-play-big{
    padding: 12px 18px;
    font-size: 16px;
  }

  .kana-modal-figure{
    min-height: 260px;
    padding: 18px;
  }

  .kana-modal-figure img{
    max-height: 220px;
  }

  .kana-modal-simple-note{
    font-size: 16px;
    padding: 16px 18px;
  }
}


/* =========================================
   GIF ONLY MODAL - TIGHT LAYOUT
========================================= */

.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.kana-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.kana-modal.hidden{
  display: none;
}

.kana-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(4px);
}

.kana-gif-modal{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;

  display: inline-block;
  width: fit-content;
  height: fit-content;

  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.kana-gif-image{
  display: block;
  width: auto;
  height: auto;
  max-width: min(88vw, 720px);
  max-height: 82vh;
  object-fit: contain;
  background: transparent;
  border: none;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
}

.kana-gif-close{
  position: absolute;
  top: -18px;
  right: -18px;
  width: 54px;
  height: 54px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: #000;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.24);
  z-index: 5;
}

body.modal-open{
  overflow: hidden;
}

@media (max-width: 700px){
  .kana-gif-image{
    max-width: 94vw;
    max-height: 74vh;
  }

  .kana-gif-close{
    top: -12px;
    right: -12px;
    width: 44px;
    height: 44px;
    font-size: 20px;
    border-width: 2px;
  }
}



.kana-mini-card {
  pointer-events: none;
}

.kana-mini-card .mini-sound-btn {
  pointer-events: auto;
}





.next-step-box {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed #e5e7eb;

  display: flex;
  flex-direction: column;
  align-items: center; /* 🔥 هذا المهم */
  text-align: center;  /* 🔥 وهذا */
  gap: 16px;
}

.next-step-text {
  font-size: 15px;
  color: #555;
  line-height: 1.8;
  max-width: 600px; /* 🔥 يخلي النص جميل ومقروء */
}

.next-step-text span {
  color: #7c5cff;
  font-weight: 600;
}

.next-step-btn {
  padding: 12px 24px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s ease;
  box-shadow: 0 6px 18px rgba(124, 92, 255, 0.25);
}

.next-step-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(124, 92, 255, 0.35);
}


@media (max-width: 768px) {
  .next-step-box {
    flex-direction: column;
    align-items: flex-start;
  }

  .next-step-btn {
    width: 100%;
    text-align: center;
  }
}

.next-step-btn {
  animation: floatBtn 2.5s ease-in-out infinite;
}

@keyframes floatBtn {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}






/* =========================================
   KATAKANA PAGE - match hiragana structure
========================================= */

.page-katakana{
  background:
    radial-gradient(circle at top right, rgba(129, 140, 248, 0.09), transparent 24%),
    radial-gradient(circle at top left, rgba(236, 72, 153, 0.06), transparent 28%),
    linear-gradient(180deg, #f7fbff, #fff 35%, #fff9fb);
}

.page-katakana .kata-hero .hero-badge{
  background: #eef2ff;
  color: #4f46e5;
}

/* make katakana cards inherit hiragana card look */
.page-katakana .kata-card{
  position: relative;
  border: 1px solid #ebe7f5;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(139, 92, 246, 0.10), transparent 38%),
    linear-gradient(180deg, #ffffff, #fcfbff);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  padding: 14px 12px;
  min-height: 160px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.page-katakana .kata-card:hover,
.page-katakana .kata-mini-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
  border-color: #d8cff3;
}

.page-katakana .kata-card::before{
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, #818cf8, #ec4899);
  opacity: .95;
}

.page-katakana .kata-card-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  direction: ltr;
}

.page-katakana .kata-play-btn{
  width: 38px;
  height: 38px;
  border: 1px solid #e9def8;
  background: #fff;
  border-radius: 14px;
  cursor: pointer;
  font-size: 16px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
  flex-shrink: 0;
}

.page-katakana .kata-char{
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(42px, 4vw, 62px);
  font-weight: 800;
  line-height: 1;
  color: #1f2937;
  direction: ltr;
  text-align: right;
  flex: 1;
}

.page-katakana .kata-romaji{
  margin-top: 10px;
  font-size: 26px;
  font-weight: 800;
  color: #5b3df5;
  direction: ltr;
  text-align: left;
}

/* second section */
.page-katakana .kata-switch-btn{
  border: none;
  background: transparent;
  padding: 10px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  color: #64748b;
}

.page-katakana .kata-switch-btn.active{
  background: #fff;
  color: #5b3df5;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.page-katakana .kata-panel{
  display: none;
}

.page-katakana .kata-panel.active{
  display: block;
}

.page-katakana .kata-mini-card{
  position: relative;
  border: 1px solid #ebe7f5;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #fcfbff);
  min-height: 118px;
  padding: 16px 10px 12px;
  cursor: default;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.page-katakana .kata-mini-card .jp{
  font-family: "Noto Sans JP", sans-serif;
  font-size: 34px;
  line-height: 1;
  color: #1f2937;
}

.page-katakana .kata-mini-card small{
  font-size: 21px;
  color: #5b3df5;
  font-weight: 800;
}

/* disable card click, keep sound button */
.page-katakana .kata-mini-card{
  pointer-events: none;
}

.page-katakana .kata-mini-card .mini-sound-btn{
  pointer-events: auto;
}

.page-katakana .kata-mini-card:hover{
  transform: none;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.page-katakana .next-step-box{
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed #e5e7eb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
}

.page-katakana .next-step-text{
  font-size: 16px;
  color: #64748b;
  line-height: 1.9;
  max-width: 700px;
  margin: 0;
}

.page-katakana .next-step-text span{
  color: #7c5cff;
  font-weight: 700;
}

.page-katakana .next-step-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s ease;
  box-shadow: 0 8px 22px rgba(124, 92, 255, 0.25);
}

.page-katakana .next-step-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(124, 92, 255, 0.35);
}

@media (max-width: 900px){
  .page-katakana .kata-card{
    min-height: 122px;
    padding: 10px 8px;
    border-radius: 18px;
  }

  .page-katakana .kata-char{
    font-size: 32px;
  }

  .page-katakana .kata-romaji{
    font-size: 18px;
    margin-top: 6px;
  }

  .page-katakana .kata-play-btn{
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 13px;
  }

  .page-katakana .kata-mini-card{
    min-height: 96px;
    padding: 12px 8px 10px;
    border-radius: 16px;
  }

  .page-katakana .kata-mini-card .jp{
    font-size: 24px;
  }

  .page-katakana .kata-mini-card small{
    font-size: 16px;
  }
}

@media (max-width: 520px){
  .page-katakana .kata-card{
    min-height: 96px;
    padding: 8px 6px;
    border-radius: 16px;
  }

  .page-katakana .kata-char{
    font-size: 24px;
  }

  .page-katakana .kata-romaji{
    font-size: 14px;
    margin-top: 4px;
  }

  .page-katakana .kata-play-btn{
    width: 24px;
    height: 24px;
    font-size: 11px;
    border-radius: 8px;
  }

  .page-katakana .kata-card::before{
    width: 4px;
  }

  .page-katakana .kata-mini-card{
    min-height: 78px;
    padding: 10px 6px 8px;
    border-radius: 14px;
  }

  .page-katakana .kata-mini-card .jp{
    font-size: 18px;
  }

  .page-katakana .kata-mini-card small{
    font-size: 13px;
  }
}

/* =========================
   KATAKANA PANELS FIX
   put this at the VERY END
========================= */

.hira-panel{
  display: none !important;
}

.hira-panel.active{
  display: block !important;
}







/* =========================
   SVG WRITING MODAL
========================= */

.svg-modal{
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.svg-viewer{
  display: grid;
  place-items: center;
  min-width: 280px;
  min-height: 280px;
  max-width: min(88vw, 720px);
  max-height: 82vh;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
  padding: 16px;
  overflow: hidden;
}

.svg-viewer svg{
  width: min(78vw, 520px);
  height: auto;
  max-height: 72vh;
  display: block;
}

.svg-viewer svg path,
.svg-viewer svg line,
.svg-viewer svg polyline,
.svg-viewer svg polygon,
.svg-viewer svg circle,
.svg-viewer svg ellipse{
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawStroke 1.4s ease forwards;
}

@keyframes drawStroke{
  to{
    stroke-dashoffset: 0;
  }
}

@media (max-width: 600px){
  .svg-viewer{
    min-width: 220px;
    min-height: 220px;
    padding: 10px;
    border-radius: 16px;
  }

  .svg-viewer svg{
    width: min(88vw, 360px);
    max-height: 60vh;
  }
}


body > main > section.container.hira-layout > section:nth-child(5) > div.hira-notes-grid > article:nth-child(3) > div.card-header > div,
body > main > section.container.hira-layout > section:nth-child(6) > div.hira-notes-grid > article:nth-child(3) > div.card-header > div{
  font-size: 16px;
}




.compact-rule-note{
  margin: 18px 0 20px;
  border: 1px solid #ebe7f5;
  border-radius: 24px;
  padding: 20px;
  background: linear-gradient(180deg, #ffffff, #fcfbff);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.compact-rule-note .card-header{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.compact-rule-note .card-header h3{
  margin: 0;
  font-size: 24px;
  line-height: 1.5;
}

.rule-intro{
  margin: 0 0 18px;
  color: #64748b;
  font-size: 17px;
  line-height: 2;
}

.rule-compare-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.rule-compare-card{
  border: 1px solid #ebe7f5;
  border-radius: 20px;
  padding: 16px;
  background: #fff;
}

.rule-compare-card.good{
  background: linear-gradient(180deg, #faf8ff, #ffffff);
  border-color: #ddd2fb;
}

.rule-compare-card.plain{
  background: linear-gradient(180deg, #fbfbfb, #ffffff);
}

.rule-compare-card h4{
  margin: 0 0 10px;
  font-size: 17px;
  color: #1f2937;
}

.rule-big-example{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #f8f7fc;
  margin-bottom: 10px;
}

.rule-big-example .jp-inline{
  font-size: 30px;
  font-weight: 700;
}

.rule-big-example strong{
  font-size: 24px;
  color: #5b3df5;
}

.rule-compare-card p{
  margin: 0;
  color: #64748b;
  line-height: 1.8;
}

.rule-mini-note{
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #f9fafb;
  border: 1px dashed #d9dbe7;
  color: #475569;
  line-height: 1.9;
}

.rule-examples-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.rule-example-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #faf8ff;
  border: 1px solid #e6ddfb;
  color: #1f2937;
}

.rule-example-pill .jp-inline{
  font-size: 22px;
  font-weight: 700;
}

.rule-example-pill strong{
  color: #5b3df5;
}

.rule-final-tip{
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #7c2d12;
  line-height: 1.9;
}

@media (max-width: 768px){
  .rule-compare-grid{
    grid-template-columns: 1fr;
  }

  .compact-rule-note .card-header h3{
    font-size: 20px;
  }

  .rule-intro{
    font-size: 16px;
  }

  .rule-big-example{
    flex-direction: column;
    align-items: flex-start;
  }

  .rule-big-example strong{
    font-size: 22px;
  }
}




.hero-highlight{
  margin-top: 12px;
  font-size: 28px;
  letter-spacing: 10px;
  color: #7c5cff;
  opacity: 0.8;
}






/*Updated resources page*/

.resources-section{
  margin-top: 40px;
}

.section-heading{
  text-align: center;
  margin-bottom: 24px;
}

.section-badge{
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: #f5f3ff;
  color: #6d28d9;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}

.section-heading h2{
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.3;
}

.section-heading p{
  margin: 0;
  color: #64748b;
  font-size: 16px;
  line-height: 1.9;
}

.resources-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.resource-card{
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 26px;
  border-radius: 28px;
  border: 1px solid #ece7f7;
  background: linear-gradient(180deg, #ffffff, #fcfbff);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}

.resource-top{
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  gap: 14px;
  margin-bottom: 18px;
}

.resource-top h3{
  margin: 0;
  font-size: 22px;
}

.resource-icon{
  width: 62px;
  height: 62px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: #faf8ff;
  border: 1px solid #e8dcfa;
  flex-shrink: 0;
}

.resource-desc{
  margin: 0 0 20px;
  color: #64748b;
  font-size: 16px;
  line-height: 2;
}

.resource-links{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.resource-links a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 18px;
  background: #f8f7fc;
  color: #374151;
  text-decoration: none;
  font-size: 15px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.resource-links a:hover{
  transform: translateY(-2px);
  background: #f3f0fb;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.resource-links span{
  font-size: 11px;
  font-weight: 700;
  color: #6d28d9;
  background: #ede9fe;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.resource-footer{
  margin-top: auto;
  padding-top: 18px;
  color: #64748b;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 1024px){
  .resources-grid{
    grid-template-columns: 1fr;
  }
}









/* =========================
   EXERCISES PAGE
========================= */

.page-exercises{
  background:
    radial-gradient(circle at top right, rgba(129, 140, 248, 0.08), transparent 22%),
    radial-gradient(circle at top left, rgba(236, 72, 153, 0.05), transparent 28%),
    linear-gradient(180deg, #f8fbff, #fff 35%, #fff9fb);
}

.exercises-hero .hero-badge{
  background: #eef2ff;
  color: #4f46e5;
}

.exercises-layout{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.exercises-toolbar-card{
  border: 1px solid #ece7f7;
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff, #fcfbff);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
  padding: 24px;
}

.exercises-toolbar-top h2{
  margin: 10px 0 8px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.3;
}

.exercises-toolbar-top p{
  margin: 0;
  color: #64748b;
  line-height: 1.9;
}

.section-badge{
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: #f5f3ff;
  color: #6d28d9;
  font-size: 13px;
  font-weight: 700;
}

.exercise-filters{
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 24px;
}

.filter-group{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-label{
  font-size: 14px;
  font-weight: 700;
  color: #475569;
}

.filter-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-chip{
  border: 1px solid #e7def7;
  background: #fff;
  color: #475569;
  padding: 10px 16px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s ease;
}

.filter-chip:hover{
  background: #faf8ff;
  border-color: #d9cff3;
}

.filter-chip.active{
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(124, 92, 255, 0.25);
}

.exercise-results-bar{
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed #e5e7eb;
}

.exercise-results-bar p{
  margin: 0;
  color: #64748b;
  font-weight: 500;
}

.exercise-files-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.exercise-file-card{
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 24px;
  border-radius: 28px;
  border: 1px solid #ece7f7;
  background: linear-gradient(180deg, #ffffff, #fcfbff);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}

.file-card-top{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

.file-icon{
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: #faf8ff;
  border: 1px solid #e8dcfa;
  flex-shrink: 0;
}

.file-meta-head{
  flex: 1;
}

.file-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.file-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.file-badge.type{
  background: #f5f3ff;
  color: #6d28d9;
}

.file-badge.level{
  background: #ecfeff;
  color: #0f766e;
}

.exercise-file-card h3{
  margin: 0;
  font-size: 22px;
  line-height: 1.5;
}

.file-description{
  margin: 0 0 16px;
  color: #64748b;
  line-height: 1.9;
  font-size: 15px;
}

.file-info-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.file-info-row span{
  padding: 7px 12px;
  border-radius: 999px;
  background: #f8f7fc;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
}

.file-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.file-tag{
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 12px;
  font-weight: 700;
}

.file-actions{
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
}

.file-btn{
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 16px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 14px;
  transition: 0.2s ease;
}

.file-btn.primary{
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff;
  box-shadow: 0 8px 20px rgba(124, 92, 255, 0.25);
}

.file-btn.primary:hover{
  transform: translateY(-2px);
}

.file-btn.secondary{
  background: #f8f7fc;
  color: #374151;
  border: 1px solid #e7def7;
}

.file-btn.secondary:hover{
  background: #f3f0fb;
}

.exercise-empty-state{
width: 100%;
}

.exercise-empty-state.hidden{
  display: none;
}

.empty-card{
  border: 1px dashed #ddd6fe;
  border-radius: 24px;
  background: #fff;
  padding: 34px 20px;
  text-align: center;
}

.empty-icon{
  font-size: 42px;
  margin-bottom: 12px;
}

.empty-card h3{
  margin: 0 0 8px;
  font-size: 24px;
}

.empty-card p{
  margin: 0;
  color: #64748b;
  line-height: 1.9;
}

@media (max-width: 1024px){
  .exercise-files-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
  .exercise-files-grid{
    grid-template-columns: 1fr;
  }

  .file-actions{
    flex-direction: column;
  }

  .exercises-toolbar-card,
  .exercise-file-card{
    padding: 18px;
  }
}




/* ===== Exercises page layout fix ===== */

.exercises-page .container,
.page-exercises .container {
  max-width: 1280px;
}

.exercises-hero .hero-card{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  padding: 34px 28px;
}

.exercises-hero .hero-card h1{
  margin: 10px 0 14px;
  font-size: clamp(30px, 5vw, 50px);
  line-height: 1.2;
}

.exercises-hero .hero-card p{
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  font-size: 18px;
  line-height: 2;
}

.exercises-layout{
  max-width: 1100px;
  margin: 0 auto;
}

.exercises-toolbar-card{
  width: 100%;
  margin-top: 35px;
}

.exercises-toolbar-top{
  text-align: center;
}

.exercises-toolbar-top h2{
  margin: 12px 0 10px;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.25;
}

.exercises-toolbar-top p{
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.exercise-results-bar{
  text-align: center;
}

@media (max-width: 768px){
  .exercises-hero .hero-card{
    padding: 24px 18px;
  }

  .exercises-hero .hero-card h1{
    font-size: clamp(32px, 9vw, 46px);
  }

  .exercises-hero .hero-card p{
    font-size: 16px;
  }

  .exercises-toolbar-top h2{
    font-size: clamp(26px, 8vw, 38px);
  }
}





.exercises-toolbar-card{
  border: 1px solid #ece7f7;
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff, #fcfbff);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
  padding: 28px 24px;
}

.exercise-filters-header{
  text-align: center;
  margin-bottom: 22px;
}

.exercises-toolbar-top p{
  margin-bottom: 40px;
}

.exercise-filters-header h2{
  margin: 0 0 8px;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.3;
}

.exercise-filters-header p{
  margin: 0;
  color: #64748b;
  font-size: 15px;
  line-height: 1.8;
}

.exercise-filters-wrap{
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.filter-group{
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.filter-label{
  font-size: 15px;
  font-weight: 800;
  color: #334155;
}

.filter-chips{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.filter-chip{
  border: 1px solid #e7def7;
  background: #fff;
  color: #475569;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.22s ease;
  min-width: 84px;

  margin-bottom: 20px;
}

.filter-chip:hover{
  background: #faf8ff;
  border-color: #d9cff3;
  transform: translateY(-1px);
}

.filter-chip.active{
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(124, 92, 255, 0.25);
}

.exercise-results-bar{
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed #e5e7eb;
  text-align: center;
}

.exercise-results-bar p{
  margin: 0;
  color: #64748b;
  font-size: 15px;
  font-weight: 600;
}

@media (max-width: 768px){
  .exercises-toolbar-card{
    padding: 22px 16px;
  }

  .exercise-filters-wrap{
    max-width: 100%;
  }

  .exercise-filters-header h2{
    font-size: 24px;
  }

  .filter-chip{
    min-width: auto;
    padding: 10px 14px;
    font-size: 14px;
  }
}

.filter-label{
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
}

.exercise-filters-wrap{
  gap: 26px;
}

.exercise-results-bar{
  border-top: 1px dashed #e9e6f5;
}




/* =========================
   Home sections: center the second row (last 2 cards)
   ========================= */

.search-results{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.search-results > .card{
  grid-column: span 4;
}

/* 4th card = start from col 3, 5th card = start from col 7
   This makes the second row visually centered */
.search-results > .card.center-row:nth-last-child(2){
  grid-column: 3 / span 4;
}

.search-results > .card.center-row:nth-last-child(1){
  grid-column: 7 / span 4;
}

/* Tablet */
@media (max-width: 1024px){
  .search-results > .card{
    grid-column: span 6;
  }

  /* cancel custom centering on tablet */
  .search-results > .card.center-row:nth-last-child(2),
  .search-results > .card.center-row:nth-last-child(1){
    grid-column: span 6;
  }
}

/* Mobile */
@media (max-width: 620px){
  .search-results > .card{
    grid-column: span 12;
  }

  .search-results > .card.center-row:nth-last-child(2),
  .search-results > .card.center-row:nth-last-child(1){
    grid-column: span 12;
  }
}

img{
  pointer-events: none;
}


.brand {
    user-select: none;          /* Standard syntax */
    -webkit-user-select: none;  /* Chrome, Safari, Opera */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* Internet Explorer/Edge */
}