/* ============================================
   MODERN SARKARI RESULT FULL STYLESHEET
   ============================================ */

/* RESET */
*,
*::before,
*::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

:root{

  /* COLORS */
  --primary:#2563eb;
  --primary-dark:#1e3a8a;
  --accent:#f59e0b;
  --red:#ef4444;
  --green:#16a34a;

  --bg:#f8fafc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;

  /* UI */
  --radius:14px;
  --radius-sm:10px;

  /* SHADOWS */
  --shadow-sm:0 2px 10px rgba(0,0,0,.06);
  --shadow-md:0 10px 30px rgba(0,0,0,.10);
}

body{
  font-family:'Inter','Poppins',sans-serif;
  font-size:14px;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

/* LINKS */
a{
  color:var(--primary);
  text-decoration:none;
  transition:.2s;
}

a:hover{
  color:var(--red);
}

/* =========================
   TOP BAR
========================= */
.top-bar{
  background:var(--red);
  color:#fff;
  font-size:12px;
  padding:6px 0;
}

.top-bar-inner{
  max-width:1100px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  padding:0 10px;
}

/* =========================
   HEADER
========================= */
header{
  background:linear-gradient(135deg,var(--primary-dark),var(--primary));
  padding:15px 0;
  box-shadow:var(--shadow-md);
}

.header-inner{
  max-width:1100px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px;
}

.logo-text h1{
  font-size:24px;
  color:#fff;
  font-weight:800;
}

.logo-text p{
  color:#e5e7eb;
  font-size:12px;
}

.whatsapp-btn{
  background:#25d366;
  color:#fff;
  padding:8px 14px;
  border-radius:10px;
  font-weight:700;
}

/* =========================
   NAVBAR
========================= */
nav{
  background:#fff;
  box-shadow:var(--shadow-sm);
}

nav ul{
  display:flex;
  list-style:none;
  flex-wrap:wrap;
  max-width:1100px;
  margin:auto;
}

nav ul li a{
  display:block;
  padding:12px 16px;
  font-weight:600;
  color:#334155;
}

nav ul li a:hover{
  background:#eff6ff;
  color:var(--primary);
}

/* =========================
   TICKER
========================= */
.ticker-wrap{
  background:#fff3cd;
  border-bottom:2px solid #facc15;
  display:flex;
  height:32px;
  overflow:hidden;
}

.ticker-label{
  background:var(--red);
  color:#fff;
  padding:0 12px;
  display:flex;
  align-items:center;
  font-size:12px;
  font-weight:700;
}

.ticker-content{
  display:flex;
  white-space:nowrap;
  animation:scroll 40s linear infinite;
}

@keyframes scroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

/* =========================
   CONTAINER
========================= */
.container{
  max-width:1100px;
  margin:auto;
  padding:15px;
}

/* =========================
   HERO SECTION
========================= */
.hero-section{
  background:linear-gradient(135deg,var(--primary-dark),var(--primary));
  color:#fff;
  padding:40px 20px;
  border-radius:18px;
  text-align:center;
  box-shadow:var(--shadow-md);
}

.hero-section h1{
  font-size:30px;
  font-weight:800;
}

.hero-section p{
  opacity:.9;
  margin-top:6px;
}

/* SEARCH */
.search-box{
  margin-top:20px;
  display:flex;
  gap:10px;
  justify-content:center;
}

.search-box input{
  width:60%;
  padding:14px;
  border:none;
  border-radius:12px;
  outline:none;
}

.search-box button{
  padding:14px 20px;
  background:var(--accent);
  border:none;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
}

/* =========================
   STATS
========================= */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:20px 0;
}

.stat-card{
  background:#fff;
  padding:16px;
  border-radius:16px;
  text-align:center;
  box-shadow:var(--shadow-sm);
  transition:.3s;
}

.stat-card:hover{
  transform:translateY(-5px);
}

.stat-card .num{
  font-size:26px;
  font-weight:800;
  color:var(--primary);
}

.stat-card .label{
  color:var(--muted);
}

/* =========================
   FEATURED
========================= */
.featured-banner{
  background:linear-gradient(135deg,#1e3a8a,#2563eb);
  color:#fff;
  padding:20px;
  border-radius:18px;
}

.featured-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;
  margin-top:12px;
}

.feature-card{
  background:rgba(255,255,255,0.1);
  padding:14px;
  border-radius:12px;
}

/* =========================
   QUICK LINKS
========================= */
.quick-links-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;
}

.ql-btn{
  background:#fff;
  padding:14px;
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  font-weight:600;
  text-align:center;
  transition:.3s;
}

.ql-btn:hover{
  background:var(--primary);
  color:#fff;
  transform:translateY(-4px);
}

/* =========================
   MAIN GRID
========================= */
.main-grid{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:15px;
}

/* =========================
   BOXES
========================= */
.section-box,
.sidebar-box{
  background:#fff;
  border-radius:16px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  margin-bottom:15px;
}

.section-title{
  padding:14px 16px;
  font-size:16px;
  font-weight:700;
  border-bottom:1px solid var(--border);
  display:flex;
  justify-content:space-between;
}

/* =========================
   LIST ITEMS
========================= */
.entry-list li{
  list-style:none;
  padding:14px 16px;
  border-bottom:1px solid #f1f5f9;
  display:flex;
  justify-content:space-between;
  transition:.2s;
}

.entry-list li:hover{
  background:#f8fafc;
  transform:translateX(4px);
}

/* =========================
   BADGES
========================= */
.badge{
  font-size:11px;
  padding:4px 10px;
  border-radius:999px;
  font-weight:700;
}

.badge.hot{
  background:var(--red);
  color:#fff;
}

.badge.new{
  background:var(--accent);
}

/* =========================
   SIDEBAR
========================= */
.sidebar-box ul li a{
  display:block;
  padding:10px 14px;
  border-bottom:1px solid #f1f5f9;
}

.sidebar-box ul li a:hover{
  background:#f1f5ff;
}

/* AD BOX */
.ad-box{
  background:#fff;
  border:2px dashed #cbd5e1;
  padding:25px;
  text-align:center;
  border-radius:14px;
  color:#94a3b8;
}

/* =========================
   POST PAGE
========================= */
.post-detail{
  background:#fff;
  padding:16px;
  border-radius:16px;
  box-shadow:var(--shadow-sm);
}

.post-detail h1{
  font-size:20px;
  margin-bottom:10px;
}

/* =========================
   BUTTONS
========================= */
.btn{
  padding:10px 18px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-weight:700;
}

.btn-primary{
  background:var(--primary);
  color:#fff;
}

.btn-success{
  background:var(--green);
  color:#fff;
}

.btn-danger{
  background:var(--red);
  color:#fff;
}

/* =========================
   FOOTER
========================= */
footer{
  background:#0f172a;
  color:#cbd5e1;
  margin-top:20px;
  padding:30px 0;
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:992px){

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

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

  .search-box input{
    width:100%;
  }
}

@media(max-width:576px){

  .hero-section h1{
    font-size:22px;
  }

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

  .search-box{
    flex-direction:column;
  }

  .search-box button{
    width:100%;
  }
}

/* =========================
   GLOBAL HEADER SYSTEM (MODERN)
========================= */

:root{
  --primary:#2563eb;
  --primary-dark:#1e3a8a;
  --accent:#f59e0b;
  --red:#ef4444;
  --text:#0f172a;
  --bg:#f8fafc;
}

/* RESET SAFETY */
body{
  margin:0;
  font-family:'Inter', sans-serif;
  background:var(--bg);
}

/* =========================
   TOP BAR (RESPONSIVE CLEAN)
========================= */

.top-bar{
  background:var(--red);
  color:#fff;
  font-size:12px;
  padding:6px 10px;
}

.top-bar-inner{
  max-width:1100px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.top-bar a{
  color:#fff;
  font-weight:600;
  text-decoration:none;
}

/* =========================
   MAIN HEADER
========================= */

.main-header{
  background:linear-gradient(135deg,var(--primary-dark),var(--primary));
  padding:10px 0;
  position:sticky;
  top:0;
  z-index:999;
  box-shadow:0 6px 20px rgba(0,0,0,.15);
}

.header-inner{
  max-width:1100px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  gap:10px;
}

/* =========================
   LOGO AREA (FIXED RESPONSIVE)
========================= */

.logo-area{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  text-decoration:none;
}

.logo-img{
  width:42px;
  height:42px;
  object-fit:contain;
  border-radius:10px;
  background:#fff;
  padding:3px;
  flex-shrink:0;
}

.logo-icon{
  width:42px;
  height:42px;
  background:#fff;
  color:var(--primary-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  border-radius:10px;
  flex-shrink:0;
}

/* TEXT */
.logo-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.logo-text h1{
  font-size:18px;
  font-weight:800;
  color:#fff;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:180px;
}

.logo-text p{
  font-size:11px;
  color:#e5e7eb;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:180px;
}

/* =========================
   RIGHT ACTIONS
========================= */

.header-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

/* WHATSAPP */
.whatsapp-btn{
  background:#25d366;
  color:#fff;
  padding:6px 10px;
  border-radius:8px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

/* MENU BUTTON */
.nav-toggle{
  display:none;
  background:#fff;
  border:none;
  padding:6px 10px;
  border-radius:8px;
  font-size:18px;
  cursor:pointer;
}

/* =========================
   NAVIGATION
========================= */

nav{
  background:#fff;
  border-bottom:1px solid #e2e8f0;
}

.nav-inner{
  max-width:1100px;
  margin:auto;
  padding:0 10px;
}

#navMenu{
  display:flex;
  list-style:none;
  gap:0;
  flex-wrap:wrap;
}

#navMenu li a{
  display:block;
  padding:10px 12px;
  font-size:13px;
  font-weight:600;
  color:#334155;
  text-decoration:none;
  border-radius:6px;
}

#navMenu li a:hover{
  background:#eff6ff;
  color:var(--primary);
}

/* =========================
   TICKER (BREAKING NEWS)
========================= */

.ticker-wrap{
  display:flex;
  align-items:center;
  background:#fff1f2;
  border-bottom:2px solid var(--red);
  height:36px;
  overflow:hidden;
}

.ticker-label{
  background:var(--red);
  color:#fff;
  padding:0 10px;
  font-size:12px;
  font-weight:700;
  display:flex;
  align-items:center;
  white-space:nowrap;
}

.ticker-track{
  flex:1;
  overflow:hidden;
}

.ticker-content{
  display:flex;
  white-space:nowrap;
  animation:scroll 35s linear infinite;
}

.ticker-content a{
  margin-right:40px;
  font-size:12px;
  font-weight:600;
  color:#b91c1c;
  text-decoration:none;
}

@keyframes scroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

/* =========================
   MOBILE RESPONSIVE
========================= */

@media(max-width:768px){

  .logo-text h1{
    font-size:14px;
    max-width:120px;
  }

  .logo-text p{
    display:none;
  }

  .logo-img,
  .logo-icon{
    width:36px;
    height:36px;
  }

  .whatsapp-btn{
    display:none; /* clean mobile UI */
  }

  .nav-toggle{
    display:block;
  }

  #navMenu{
    display:none;
    flex-direction:column;
    width:100%;
    background:#fff;
  }

  #navMenu.open{
    display:flex;
  }

  #navMenu li a{
    padding:12px;
    border-bottom:1px solid #f1f5f9;
  }
}

@media(max-width:480px){

  .logo-text h1{
    max-width:100px;
    font-size:13px;
  }
}

/* =========================
   MODERN FOOTER (2025 STYLE)
========================= */

.main-footer{
  background:linear-gradient(135deg,#0f172a,#1e293b);
  color:#cbd5e1;
  margin-top:30px;
}

/* INNER */
.footer-inner{
  max-width:1100px;
  margin:auto;
  padding:40px 15px 20px;
}

/* GRID */
.footer-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
}

/* TITLE */
.footer-col h4{
  color:#fff;
  font-size:15px;
  margin-bottom:12px;
  position:relative;
  padding-bottom:6px;
}

.footer-col h4::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:40px;
  height:2px;
  background:#f59e0b;
}

/* TEXT */
.footer-col p{
  font-size:13px;
  line-height:1.6;
  color:#94a3b8;
}

/* LIST */
.footer-col ul{
  list-style:none;
}

.footer-col ul li{
  margin-bottom:8px;
}

.footer-col ul li a{
  color:#cbd5e1;
  font-size:13px;
  text-decoration:none;
  transition:.2s;
}

.footer-col ul li a:hover{
  color:#f59e0b;
  padding-left:6px;
}

/* BOTTOM */
.footer-bottom{
  margin-top:25px;
  padding-top:15px;
  border-top:1px solid #334155;
  text-align:center;
}

.footer-bottom p{
  font-size:12px;
  color:#94a3b8;
}

.footer-bottom span{
  display:block;
  margin-top:5px;
  font-size:11px;
  color:#64748b;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

  .footer-grid{
    grid-template-columns:1fr;
    text-align:left;
  }

  .footer-col h4::after{
    left:0;
  }
}

/* =========================
   CATEGORY PAGE MODERN UI
========================= */

.category-page{
  margin-top:15px;
}

/* HEADER BOX */
.category-header{
  background:linear-gradient(135deg,#1e3a8a,#2563eb);
  color:#fff;
  padding:16px;
  border-radius:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  box-shadow:0 10px 25px rgba(0,0,0,.1);
}

.cat-title{
  font-size:18px;
  font-weight:800;
}

.cat-count{
  font-size:12px;
  background:rgba(255,255,255,.2);
  padding:4px 10px;
  border-radius:999px;
}

/* LIST ITEMS */
.modern-list .post-item{
  padding:14px 16px;
  border-bottom:1px solid #f1f5f9;
  transition:.2s;
}

.modern-list .post-item:hover{
  background:#f8fafc;
  transform:translateX(4px);
}

/* TITLE */
.post-title{
  display:block;
  font-size:13.5px;
  font-weight:600;
  color:#1e293b;
  margin-bottom:6px;
}

.post-title:hover{
  color:#2563eb;
}

/* META */
.post-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11.5px;
  color:#64748b;
}

/* BADGES */
.badges{
  display:flex;
  gap:6px;
}

/* EMPTY */
.empty-state{
  padding:20px;
  text-align:center;
  color:#94a3b8;
}

/* PAGINATION IMPROVED */
.pagination{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:15px;
}

.pagination a,
.pagination span{
  padding:6px 12px;
  border-radius:8px;
  font-size:12px;
  border:1px solid #e2e8f0;
}

.pagination a:hover{
  background:#2563eb;
  color:#fff;
}

.pagination .current{
  background:#2563eb;
  color:#fff;
}

/* =========================
   AUTH PAGE MODERN UI
========================= */

.auth-page{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:70vh;
  padding:20px;
}

/* CARD */
.auth-card{
  width:100%;
  max-width:420px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 15px 40px rgba(0,0,0,.1);
  padding:25px;
  animation:fadeIn .3s ease-in-out;
}

/* HEADER */
.auth-header{
  text-align:center;
  margin-bottom:15px;
}

.auth-header h2{
  font-size:20px;
  font-weight:800;
  color:#1e3a8a;
}

.auth-header p{
  font-size:12px;
  color:#64748b;
  margin-top:4px;
}

/* FORM */
.auth-form .form-group{
  margin-bottom:14px;
}

.auth-form input{
  width:100%;
  padding:12px;
  border:1px solid #e2e8f0;
  border-radius:10px;
  font-size:13px;
  transition:.2s;
}

.auth-form input:focus{
  border-color:#2563eb;
  outline:none;
  box-shadow:0 0 0 3px rgba(37,99,235,.1);
}

/* BUTTON */
.btn-block{
  width:100%;
}

/* FOOTER */
.auth-footer{
  text-align:center;
  margin-top:15px;
  font-size:12px;
}

.auth-footer a{
  color:#2563eb;
  font-weight:600;
  text-decoration:none;
}

.admin-note{
  display:block;
  margin-top:6px;
  font-size:11px;
  color:#94a3b8;
}

/* ANIMATION */
@keyframes fadeIn{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}

/* MOBILE */
@media(max-width:480px){
  .auth-card{
    padding:18px;
  }

  .auth-header h2{
    font-size:18px;
  }
}

/* =========================
   PROFILE DASHBOARD UI
========================= */

.profile-page{
  margin-top:15px;
}

/* PROFILE CARD */
.profile-card{
  background:#fff;
  border-radius:16px;
  padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  margin-bottom:12px;
}

/* HEADER */
.profile-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:15px;
}

/* AVATAR */
.avatar{
  width:55px;
  height:55px;
  border-radius:50%;
  background:linear-gradient(135deg,#2563eb,#1e3a8a);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:800;
}

/* INFO */
.profile-info-box h3{
  font-size:15px;
  font-weight:700;
  color:#1e293b;
}

.profile-info-box p{
  font-size:12px;
  color:#64748b;
}

/* FORM */
.profile-form .form-group{
  margin-bottom:12px;
}

.profile-form label{
  font-size:12px;
  font-weight:600;
  color:#334155;
  display:block;
  margin-bottom:4px;
}

.profile-form input{
  width:100%;
  padding:10px 12px;
  border:1px solid #e2e8f0;
  border-radius:10px;
  font-size:13px;
  transition:.2s;
}

.profile-form input:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.1);
  outline:none;
}

/* READONLY INPUT */
.profile-form input[readonly]{
  background:#f1f5f9;
  color:#64748b;
}

/* BOOKMARK COUNT */
.count{
  background:#2563eb;
  color:#fff;
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
}

/* BOOKMARK ITEM */
.modern-list .bookmark-item{
  padding:12px 14px;
  transition:.2s;
}

.modern-list .bookmark-item:hover{
  background:#f8fafc;
  transform:translateX(3px);
}

/* EMPTY */
.empty-state{
  padding:18px;
  text-align:center;
  color:#94a3b8;
}

/* MOBILE */
@media(max-width:768px){
  .profile-header{
    flex-direction:column;
    text-align:center;
  }

  .avatar{
    width:60px;
    height:60px;
  }
}

/* =========================
   MODERN ADMIN DASHBOARD
========================= */

.admin-dashboard{
  display:flex;
  flex-direction:column;
  gap:15px;
}

/* STATS */
.modern-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.stat-card{
  background:#fff;
  padding:14px;
  border-radius:14px;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  transition:.2s;
}

.stat-card:hover{
  transform:translateY(-3px);
}

.stat-card .icon{
  font-size:22px;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:#f1f5f9;
}

.stat-card .num{
  font-size:18px;
  font-weight:800;
  color:#0f172a;
}

.stat-card .label{
  font-size:12px;
  color:#64748b;
}

/* COLORS */
.stat-card.posts .icon{background:#e0f2fe;}
.stat-card.users .icon{background:#fee2e2;}
.stat-card.views .icon{background:#fef3c7;}
.stat-card.bookmarks .icon{background:#dcfce7;}

/* CARD */
.card{
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  overflow:hidden;
}

/* HEADER */
.card-header{
  padding:12px 14px;
  background:linear-gradient(90deg,#1e3a8a,#2563eb);
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:700;
}

/* ADD BUTTON */
.btn-add{
  background:#f59e0b;
  color:#fff;
  padding:6px 12px;
  border-radius:8px;
  font-size:12px;
  text-decoration:none;
}

/* TABLE */
.table-wrap{
  overflow-x:auto;
}

.modern-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.modern-table th{
  background:#f8fafc;
  text-align:left;
  padding:10px;
  font-size:12px;
  color:#475569;
}

.modern-table td{
  padding:10px;
  border-bottom:1px solid #f1f5f9;
}

.modern-table tr:hover{
  background:#f8fafc;
}

/* TITLE */
.modern-table .title a{
  color:#1e3a8a;
  font-weight:600;
  text-decoration:none;
}

.modern-table .title a:hover{
  color:#2563eb;
}

/* ACTION BUTTONS */
.actions a{
  padding:4px 8px;
  border-radius:6px;
  font-size:11px;
  font-weight:700;
  text-decoration:none;
  margin-right:4px;
}

.actions .edit{
  background:#f59e0b;
  color:#fff;
}

.actions .delete{
  background:#ef4444;
  color:#fff;
}

/* RESPONSIVE */
@media(max-width:900px){
  .modern-stats{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:500px){
  .modern-stats{
    grid-template-columns:1fr;
  }
}

/* =========================
   MODERN SEARCH PAGE
========================= */

.search-page{
  margin-top:15px;
}

/* HEADER */
.search-header{
  background:#fff;
  padding:12px;
  border-radius:14px;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
  margin-bottom:12px;
}

.search-form{
  display:flex;
  gap:8px;
}

.search-form input{
  flex:1;
  padding:12px;
  border:1px solid #e2e8f0;
  border-radius:10px;
  font-size:13px;
}

.search-form input:focus{
  border-color:#2563eb;
  outline:none;
  box-shadow:0 0 0 3px rgba(37,99,235,.1);
}

.search-form button{
  background:#2563eb;
  color:#fff;
  border:none;
  padding:0 18px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
}

/* TITLE */
.section-title .query{
  font-size:12px;
  color:#cbd5e1;
  margin-left:6px;
}

.section-title .count{
  background:#f59e0b;
  color:#fff;
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
}

/* RESULTS */
.search-results{
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* CARD */
.search-card{
  background:#f8fafc;
  padding:12px;
  border-radius:12px;
  transition:.2s;
  border:1px solid #eef2f7;
}

.search-card:hover{
  background:#fff;
  transform:translateX(4px);
  box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.search-card .title{
  font-size:13.5px;
  font-weight:600;
  color:#1e3a8a;
  text-decoration:none;
  display:block;
  margin-bottom:6px;
}

.search-card .title:hover{
  color:#2563eb;
}

/* META */
.search-card .meta{
  font-size:11.5px;
  color:#64748b;
  display:flex;
  justify-content:space-between;
}

/* EMPTY */
.empty-state{
  padding:20px;
  text-align:center;
  color:#94a3b8;
}

/* MOBILE */
@media(max-width:600px){
  .search-form{
    flex-direction:column;
  }

  .search-form button{
    width:100%;
    padding:10px;
  }

  .search-card .meta{
    flex-direction:column;
    gap:4px;
  }
}

/* =========================
   MODERN ADMIN SIDEBAR
========================= */

.admin-sidebar{
  width:240px;
  min-height:100vh;
  background:linear-gradient(180deg,#0f172a,#1e293b);
  color:#cbd5e1;
  position:sticky;
  top:0;
}

/* BRAND */
.admin-sidebar .brand{
  padding:18px;
  font-size:16px;
  font-weight:800;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;
  gap:8px;
  align-items:center;
}

/* MENU */
.admin-sidebar ul{
  list-style:none;
  padding:10px;
}

/* ITEM */
.admin-sidebar ul li{
  margin-bottom:6px;
}

/* LINK */
.admin-sidebar ul li a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  color:#cbd5e1;
  text-decoration:none;
  font-size:13px;
  transition:.2s;
}

/* HOVER */
.admin-sidebar ul li a:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
  transform:translateX(3px);
}

/* ACTIVE */
.admin-sidebar ul li.active a{
  background:linear-gradient(90deg,#2563eb,#1e3a8a);
  color:#fff;
  font-weight:700;
  box-shadow:0 8px 20px rgba(37,99,235,.3);
}

/* DIVIDER */
.admin-sidebar .divider{
  height:1px;
  background:rgba(255,255,255,.08);
  margin:10px 0;
}

/* MOBILE */
@media(max-width:768px){
  .admin-sidebar{
    width:100%;
    min-height:auto;
    position:relative;
  }

  .admin-sidebar ul{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }

  .admin-sidebar ul li a{
    font-size:12px;
    padding:8px 10px;
  }
}

/* =========================
   ADMIN FULL DASHBOARD UI
========================= */

body{
  background:#f4f6fb;
}

/* WRAPPER */
.admin-wrap{
  display:flex;
  min-height:100vh;
}

/* MAIN */
.admin-main{
  flex:1;
  display:flex;
  flex-direction:column;
}

/* TOPBAR */
.admin-topbar{
  background:#fff;
  padding:14px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #eee;
}

.topbar-right{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:13px;
}

.logout-btn{
  background:#ef4444;
  color:#fff;
  padding:6px 12px;
  border-radius:8px;
  text-decoration:none;
  font-size:12px;
}

/* CONTENT */
.admin-content{
  padding:16px;
}

/* STATS */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:18px;
}

.stat-card{
  background:#fff;
  padding:14px;
  border-radius:14px;
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid #eee;
  transition:.2s;
}

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

.stat-card .icon{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  font-size:18px;
}

/* COLORS */
.blue .icon{background:#dbeafe;}
.red .icon{background:#fee2e2;}
.yellow .icon{background:#fef3c7;}
.green .icon{background:#dcfce7;}

.stat-card .num{
  font-size:20px;
  font-weight:800;
}

.stat-card .label{
  font-size:12px;
  color:#666;
}

/* CARD */
.card-box{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  border:1px solid #eee;
}

.card-header{
  background:#003580;
  color:#fff;
  padding:12px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:700;
}

.add-btn{
  background:#f59e0b;
  color:#fff;
  padding:5px 10px;
  border-radius:8px;
  font-size:12px;
  text-decoration:none;
}

/* TABLE */
.data-table{
  width:100%;
  border-collapse:collapse;
}

.data-table th{
  background:#f8fafc;
  padding:10px;
  font-size:12px;
  text-align:left;
}

.data-table td{
  padding:10px;
  font-size:12.5px;
  border-bottom:1px solid #eee;
}

.data-table tr:hover{
  background:#f9fafb;
}

/* BUTTONS */
.edit{
  background:#f59e0b;
  color:#fff;
  padding:3px 8px;
  border-radius:5px;
  font-size:11px;
  text-decoration:none;
}

.delete{
  background:#ef4444;
  color:#fff;
  padding:3px 8px;
  border-radius:5px;
  font-size:11px;
  text-decoration:none;
  margin-left:5px;
}

/* RESPONSIVE */
@media(max-width:900px){
  .stats-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

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

  .admin-wrap{
    flex-direction:column;
  }
}

/* ===========================
   RESET + ROOT
=========================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root{
  --primary:#003580;
  --primary-light:#0057b8;
  --accent:#e8a000;
  --red:#c00;
  --green:#006400;
  --bg:#f4f6f9;
  --border:#ddd;
  --text:#222;
  --radius:6px;
}

body{
  font-family:'Inter','Noto Sans',sans-serif;
  font-size:14px;
  background:var(--bg);
  color:var(--text);
}

a{ color:var(--primary); text-decoration:none; }
a:hover{ color:var(--red); }

/* ===========================
   TOP BAR
=========================== */
.top-bar{
  background:var(--red);
  color:#fff;
  font-size:12px;
  padding:5px 0;
}

.top-bar-inner{
  max-width:1100px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  padding:0 12px;
  gap:10px;
}

/* ===========================
   HEADER (FIXED + RESPONSIVE)
=========================== */
header{
  background:linear-gradient(180deg,var(--primary),var(--primary-light));
  padding:10px 0;
}

.header-inner{
  max-width:1100px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  gap:10px;
}

/* LOGO FIX */
.logo-area{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
}

.logo-img,
.logo-icon{
  width:48px;
  height:48px;
  border-radius:8px;
  background:#fff;
  flex-shrink:0;
}

.logo-img{
  object-fit:contain;
  padding:4px;
}

.logo-text{
  min-width:0;
}

.logo-text h1{
  font-size:18px;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.logo-text p{
  font-size:11px;
  color:#e6e6e6;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* WHATSAPP + MENU */
.header-right{
  display:flex;
  align-items:center;
  gap:8px;
}

.whatsapp-btn{
  background:#25d366;
  color:#fff;
  padding:6px 10px;
  border-radius:5px;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}

/* ===========================
   NAV
=========================== */
nav{
  background:var(--accent);
}

.nav-inner{
  max-width:1100px;
  margin:auto;
  padding:0 12px;
}

nav ul{
  display:flex;
  flex-wrap:wrap;
  list-style:none;
}

nav ul li a{
  display:block;
  padding:10px 12px;
  font-weight:600;
  color:#fff;
}

nav ul li a:hover{
  background:#c07000;
}

/* MOBILE NAV */
.nav-toggle{
  display:none;
  background:#c07000;
  color:#fff;
  border:none;
  padding:6px 10px;
  border-radius:4px;
}

/* ===========================
   CONTAINER
=========================== */
.container{
  max-width:1100px;
  margin:auto;
  padding:10px 12px;
}

/* ===========================
   GRID
=========================== */
.main-grid{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:12px;
}

/* ===========================
   SECTION BOX
=========================== */
.section-box{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}

.section-title{
  background:linear-gradient(90deg,var(--primary),var(--primary-light));
  color:#fff;
  padding:10px;
  font-weight:700;
}

/* ===========================
   LIST
=========================== */
.entry-list li{
  padding:8px 10px;
  border-bottom:1px solid #eee;
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.entry-list li:hover{
  background:#f9f9f9;
}

/* ===========================
   BADGES
=========================== */
.badge{
  font-size:10px;
  padding:2px 6px;
  border-radius:3px;
  color:#fff;
}

.badge.new{background:#f1c40f;color:#000;}
.badge.hot{background:#e74c3c;}
.badge.out{background:#27ae60;}
.badge.soon{background:#3498db;}

/* ===========================
   SEARCH
=========================== */
.search-box{
  display:flex;
  gap:6px;
  background:#fff;
  padding:10px;
  border:1px solid var(--border);
  border-radius:var(--radius);
}

.search-box input{
  flex:1;
  padding:8px;
  border:1px solid #ccc;
  border-radius:4px;
}

/* ===========================
   FORMS
=========================== */
.form-page,
.admin-form{
  background:#fff;
  padding:18px;
  border-radius:var(--radius);
  border:1px solid var(--border);
}

.form-group{
  margin-bottom:12px;
}

.form-group input,
.form-group textarea,
.form-group select{
  width:100%;
  padding:8px;
  border:1px solid #ccc;
  border-radius:4px;
}

/* ===========================
   BUTTONS
=========================== */
.btn{
  padding:8px 14px;
  border:none;
  border-radius:4px;
  cursor:pointer;
  font-weight:600;
}

.btn-primary{background:var(--primary);color:#fff;}
.btn-danger{background:var(--red);color:#fff;}
.btn-success{background:var(--green);color:#fff;}

/* ===========================
   TABLE RESPONSIVE FIX
=========================== */
.data-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
}

.data-table th{
  background:var(--primary);
  color:#fff;
  padding:10px;
  font-size:12px;
}

.data-table td{
  padding:10px;
  border-bottom:1px solid #eee;
}

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

/* ===========================
   ADMIN
=========================== */
.admin-wrap{
  display:flex;
  min-height:100vh;
}

.admin-sidebar{
  width:220px;
  background:#111827;
  color:#fff;
}

.admin-sidebar ul li a{
  display:block;
  padding:10px;
  color:#ddd;
}

.admin-main{
  flex:1;
}

.admin-topbar{
  background:#fff;
  padding:12px;
  border-bottom:1px solid #ddd;
}

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

.stat-card{
  background:#fff;
  padding:14px;
  border-radius:6px;
  border-left:4px solid var(--primary);
}

/* ===========================
   FOOTER
=========================== */
footer{
  background:#111827;
  color:#ccc;
  margin-top:20px;
}

.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:20px;
}

/* ===========================
   RESPONSIVE FIX
=========================== */
@media(max-width:768px){

  .header-inner{
    flex-wrap:wrap;
  }

  .logo-text h1{
    font-size:15px;
  }

  nav ul{
    display:none;
    flex-direction:column;
  }

  nav ul.open{
    display:flex;
  }

  .nav-toggle{
    display:block;
  }

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

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

  .admin-wrap{
    flex-direction:column;
  }

  .admin-sidebar{
    width:100%;
  }

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

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