/* Base theme copied from master.php and adapted for dynamic index.php */
:root{
  --primary:#2c3e50;
  --accent:#e67e22;
  --bg:#fdfdfd;
  --card-bg:#ffffff;
  --text:#333;
  --muted:#777;
  --border:#eee;
}
    [data-theme="dark"] {
            --primary: #82aaff; --accent: #ffcb6b; --bg: #0f111a; --card: #1a1c25; --text: #006699; --nav-bg: rgba(26,28,37,0.95);
        }


*{box-sizing:border-box;}
body{
  font-family:'Poppins', Arial, sans-serif;
  background-color:var(--bg);
  color:var(--text);
  margin:0;
  padding:20px;
  line-height:1.6;
  scroll-behavior:smooth;
  font-size:16px;
}

a{color:var(--primary);}

.container{
  max-width:1200px;
  margin:0 auto;
  background:var(--card-bg);
  padding:40px;
  border-radius:15px;
  box-shadow:0 10px 40px rgba(0,0,0,0.05);
}

/* Header / top nav */
.site-header{
  text-align:center;
  margin-bottom:30px;
}
.site-header h1{
  margin:0;
  font-size:2.1rem;
  color:var(--primary);
}
.site-header p{
  margin:8px 0 0;
  color:var(--muted);
}

.topnav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin:18px 0 10px;
}
.topnav a{
  text-decoration:none;
  font-weight:600;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
}
.topnav a:hover{
  border-color:rgba(0,0,0,0.15);
}

/* Search */
.search-box{
  margin:18px auto 10px;
  max-width:720px;
}
.search-box form{
  display:flex;
  gap:10px;
}
.search-box input[type="text"]{
  flex:1;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid #ddd;
  font-size:1rem;
  outline:none;
}
.search-box button{
  padding:14px 18px;
  border-radius:12px;
  border:none;
  background:var(--accent);
  color:white;
  font-weight:700;
  cursor:pointer;
  font-size:1rem;
}
.search-box button:hover{filter:brightness(0.98);}

/* Alphabet filter */
.alphabet-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  position:sticky;
  top:0;
  background:white;
  padding:12px 0;
  z-index:100;
  border-bottom:1px solid var(--border);
  margin:14px 0 0;
}
.alphabet-nav a{
  text-decoration:none;
  color:var(--primary);
  font-weight:700;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #ddd;
  background:#fff;
  font-size:14px;
}
.alphabet-nav a:hover{border-color:rgba(0,0,0,0.25);}
.alphabet-nav a.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.alphabet-nav .sep{color:#bbb; padding:6px 4px;}

/* WOTD */
        /* WOTD Hero */
        .wotd-container { background: linear-gradient(135deg, #fffcf9 0%, #fff0e0 100%); border: 2px solid var(--accent); border-radius: 15px; padding: 30px; margin-bottom: 40px; text-align: center; position: relative; }
        .wotd-main { font-size: 2.5em; margin: 10px 0; display: flex; align-items: center; justify-content: center; gap: 20px; }
.devanagari{
  font-size:2rem;
  font-weight:700;
  color:var(--primary);
}
        .audio-btn { background: var(--primary); color: white; border: none; border-radius: 50%; width: 35px; height: 35px; cursor: pointer; }
        .audio-btn:hover { background: var(--accent); }

/* Table */
.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:12px;
}
.vocab-table, table{
  width:100%;
  border-collapse:collapse;
  margin-top:18px;
  overflow:hidden;
  border-radius:12px;
  background:#fff;
}
.vocab-table thead th, table thead th{
  background:var(--primary);
  color:white;
  text-align:left;
  padding:14px 12px;
  font-size:14px;
}
.vocab-table td, table td{
  border-bottom:1px solid #eee;
  padding:12px 12px;
  vertical-align:top;
  font-size:15px;
}
.vocab-table tr:nth-child(even) td, table tr:nth-child(even) td{
  background:rgba(0,0,0,0.015);
}
th a{
  color:white;
  text-decoration:none;
  display:block;
  width:100%;
}
th a:hover{text-decoration:underline;}

/* Pagination */
.pagination{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
  justify-content:center;
}
.pagination a{
  padding:10px 14px;
  border:1px solid #ddd;
  text-decoration:none;
  border-radius:999px;
  color:var(--primary);
  font-weight:600;
}
.pagination a.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

/* Optional: BPM links */
.bpm-link{ text-decoration:none; font-weight:700; color: var(--accent); }
.bpm-link:hover{ text-decoration:underline; }

/* Footer */
footer{
  margin-top:28px;
  text-align:center;
  color:var(--muted);
  border-top:1px solid var(--border);
  padding-top:16px;
}

/* =========================
   Mobile / Responsive Tweaks
   ========================= */

@media (max-width: 900px){
  body{ padding: 14px; }
  .container{
    padding: 18px;
    border-radius: 14px;
  }

  .search-box{ max-width: 100%; }
  .search-box form{ flex-direction: column; }
  .search-box input[type="text"],
  .search-box button{
    width: 100%;
    border-radius: 12px;
  }

  .alphabet-nav{
    position: static;
    padding: 10px 0;
    margin-top: 10px;
  }
}

@media (max-width: 600px){
  body{ padding: 10px; font-size: 17px; }   /* bigger base font */
  .container{
    padding: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.05);
  }

  .site-header h1{ font-size: 1.75rem; }
  .site-header p{ font-size: 1.02rem; }

  .topnav{
    flex-direction: column;
    align-items: stretch;
  }
  .topnav a{
    text-align: center;
    width: 100%;
    padding: 12px 14px;         /* bigger tap target */
    font-size: 1.05rem;
  }

  .search-box input[type="text"]{ font-size: 1.05rem; }
  .search-box button{ font-size: 1.05rem; padding: 14px 18px; }

  .wotd-container{ padding: 14px; }
  .devanagari{ font-size: 1.9rem; }

  .vocab-table{ min-width: 760px; } /* allow scroll on small screens */
  .vocab-table thead th{ font-size: 14px; }
  .vocab-table td{ font-size: 16px; }

  .pagination a{ padding: 10px 14px; font-size: 1.02rem; }
}

/* Improve tap targets */
.topnav a,
.alphabet-nav a,
.pagination a,
.audio-btn,
.search-box button{
  touch-action: manipulation;
}


/* Search clear button */
.search-actions{
  display:flex;
  gap:10px;
  align-items:center;
}
.btn-clear{
  display:inline-block;
  padding:14px 18px;
  border-radius:12px;
  border:1px solid #ddd;
  background:#fff;
  font-weight:700;
  text-decoration:none;
  color:var(--primary);
}
.btn-clear:hover{
  border-color:rgba(0,0,0,0.25);
}

/* Pagination compact helpers */
.pagination .ellipsis{
  display:inline-block;
  padding:10px 6px;
  color:var(--muted);
  font-weight:700;
}
.pagination a.disabled{
  opacity:0.4;
  pointer-events:none;
}

@media (max-width: 900px){
  .search-actions{ flex-direction: column; width:100%; }
  .search-box form{ flex-direction: column; }
  .btn-clear{ width:100%; text-align:center; }
}

.highlight { color: #888; font-size: 0.9em; font-style: italic; }
        /* Dark Mode Toggle */
        .theme-switch { position: fixed; bottom: 30px; right: 30px; background: var(--primary); color: white; border: none; padding: 15px; border-radius: 50%; cursor: pointer; z-index: 1000; }


        /* Grammar Cards */
        .grammar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 50px; }
        .grammar-card { background: #fcfcfc; padding: 20px; border-radius: 12px; border: 1px solid #eee; }
        .math-block { background: #fff; padding: 10px; border: 1px dashed #ccc; margin: 10px 0; font-size: 0.9em; }