:root{
--red:#D71A22;           /* AajTak-style red */
--yellow:#FFD60A;        /* accent */
--blue:#3B82F6;          /* secondary */
--bg:#FFFDF9;            /* cream background */
--text:#1A1A1A;          /* body text */
--muted:#6B7280;         /* meta text */
--card:#FFFFFF;
--radius:16px;
--shadow:0 8px 28px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue","Noto Sans",sans-serif;}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;border-radius:12px}
.container{width:min(1200px, 92%);margin-inline:auto}

/* Utility */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-radius:999px;font-weight:600}
.btn-primary{background:var(--red);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{background:linear-gradient(90deg,var(--red),var(--yellow))}
.btn-outline{border:2px solid var(--blue);color:var(--blue)}
.chip{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.35rem .75rem;font-size:.75rem;font-weight:600;background:#fff;border:1px solid #eee}
.pill{display:inline-block;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:.35rem .6rem;background:rgba(215,26,34,.08);color:var(--red);font-weight:700}
.muted{color:var(--muted)}
.meta{display:flex;gap:.75rem;align-items:center;color:var(--muted);font-size:.9rem;flex-wrap:wrap;}
.line{height:1px;background:#eee}

/* Top utility bar */
.topbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:2px solid #d71a22;}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-left:150px;}
.ticker{display:flex;align-items:center;gap:.75rem}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 6px rgba(215,26,34,.15);}
.ticker-label{font-size:.75rem;font-weight:800;color:#fff;background:var(--red);padding:.25rem .5rem;border-radius:6px}
.ticker-rail{overflow:hidden;max-width:60ch;font-size:.9rem}
.ticker-track{white-space:nowrap;animation:ticker 18s linear infinite}
div#today {font-size: 13px;}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-100%)} }

/* Main header */
.header{position:sticky;top:40px;z-index:99;background:#fff;border-bottom:1px solid #f0f0f0;padding: 8px 0;}

.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0}
.brand{display:flex;align-items:center;gap:.75rem}
/*.logo{width:36px;height:36px;border-radius:10px;background:var(--red);position:relative;box-shadow:var(--shadow)}*/
.logo::before{content:"";position:absolute;inset:8px 10px auto 10px;border-radius:8px 8px 14px 14px;background:#fff}
.brand-title{font-family:Poppins,Inter,sans-serif;font-weight:700;letter-spacing:.2px}
.navlinks{display:flex;gap:1rem;flex-wrap:wrap}
.navlinks a{padding:.5rem .75rem;border-radius:999px;    font-size: 13px;
    font-weight: bold;}
.navlinks a.active, .navlinks a:hover{color:var(--red)}
.nav-cta{display:flex;align-items:center;gap:.5rem}
.search{display:flex;align-items:center;margin: 6px 0;}
.container.nav {padding: 0;position:relative;}
/* Hero */
.hero{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin:20px 0 12px}
.logo {position: absolute;top: -48px;}
.logo img {max-width: 120px;}

.filtebx{display: flex;  align-items: center;  justify-content: space-between;  gap: 12px;  flex-wrap: wrap;}

@media (max-width:575px){
.search{flex-direction: column;align-items: start;}
.filtebx{display:block;}


div#today {        position: fixed;
        top:0px;
        z-index: 999;
        left: 50%;
        padding: 0;
        border-radius: 5px;
        font-size: 11px;
        font-weight: 500;
        transform: translateX(-50%);
    }
.topbar {
        border-bottom: none;
    }
.header{z-index:9;}
.topbar .filter-bx{display:block!important;}
.topbar .filter-bx{position: absolute;
    top: 54px;
    left: 0;
    background: #d71a22;
    width: 100%;}
    .topbar .filter-bx input {
    margin-left: 10px;
    background: transparent;
    padding: 3px 10px;
    border: 2px solid #fff !important;
    max-width: 150px;
    border-radius:7px;
}
.topbar .filter-bx input::placeholder {
    color: #fff;
}
}

@media (max-width:640px){.header{top:42px}}
@media (max-width:900px){.hero{grid-template-columns:1fr}}
.lead{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);margin-bottom:15px;}
.lead img{aspect-ratio:16/9;object-fit:cover}
.lead h1{font-family:Poppins,Inter,sans-serif;font-size:1.9rem;margin:.5rem 0 0}
.side{display:grid;gap:16px}
.scard{display:grid;grid-template-columns:160px 1fr;gap:22px;height: 140px;background:#fff;width:450px;border-radius:14px;padding:12px;box-shadow:var(--shadow)}
.scard img{aspect-ratio:1/1;object-fit:cover;width:200px; height:120px;}
.scard h4{margin:.1rem 0;font-size:1.02rem}

/* Quick bites */
.bites{display:flex;gap:10px;overflow-x:auto;padding:10px 0 20px}
.bites .chip{white-space:nowrap}

/* Sections */
.section{margin:28px 0}
.section h2{display:flex;align-items:center;gap:.5rem;font-family:Poppins,Inter,sans-serif}
.section h2 .bar{width:6px;height:18px;border-radius:4px;background:linear-gradient(180deg,var(--red),var(--yellow))}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:991px){.grid-3{grid-template-columns:1fr 1fr;}}
@media (max-width:780px){.grid-3{grid-template-columns:1fr;} 
}

.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card .body{padding:14px;height:100%;}
.card h3{margin:6px 0 8px}

/* Tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.tabs button{border:none;background:#fff;border:1px solid #eee;padding:.5rem .85rem;border-radius:999px;font-weight:700;cursor:pointer}
.tabs button.active{background:rgba(215,26,34,.08);color:var(--red);border-color:rgba(215,26,34,.15)}
.tabpanel{display:none}
.tabpanel.active{display:block}

/* Opinion */
.split{display:grid;grid-template-columns:2fr 1fr;gap:22px}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.op-card{display:grid;grid-template-columns:72px 1fr;gap:14px;background:#fff;border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--yellow))}

/* Newsletter */
.cta{background:linear-gradient(180deg,#fff,rgba(255,214,10,.15));border:1px dashed rgba(215,26,34,.25);padding:22px;border-radius:18px;display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:center}
@media (max-width:900px){.cta{grid-template-columns:1fr}}
.cta form{display:flex;gap:10px}
.cta input{flex:1;border:1px solid #e7e7e7;border-radius:999px;padding:.85rem 1rem}

/* Feed */
.feed{display:grid;gap:16px}
.feed-item{display:grid;grid-template-columns:220px 1fr;gap:16px;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:20px}
@media (max-width:720px){.feed-item{grid-template-columns:1fr}}

/* Footer */
footer{margin-top:40px;background:#111;color:#eee}
.footer-inner{padding:34px 0;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:20px}
@media (max-width:900px){.footer-inner{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.footer-inner{grid-template-columns:1fr}
.scard {
    display: flex;
    flex-direction: column;
    height: auto;
    width: auto;
}
.scard img {
    width: 100%;
    height: 160px;
    /*object-fit: cover;*/
}
.cta form{flex-wrap:wrap;}
}
footer a{color:#ddd}
.copyright{background:#0c0c0c;color:#aaa;font-size:.9rem}

/* ---------- Article Detail Page ---------- */

/* Reading progress bar */
.progress-wrap {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 100%;
background: var(--red);
transform-origin: left;
transform: scaleX(0);
transition: transform 0.15s linear;
z-index: 100;
}

/* Breadcrumbs */
.breadcrumbs {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.9rem;
color: var(--muted);
    flex-wrap: wrap;
}
.breadcrumbs a:hover {
color: var(--red);

}

/* Article layout */
.article-layout img {
border-radius: var(--radius);
}
.article-layout .headline {
font-family: Poppins, Inter, sans-serif;
font-size: 2rem;
margin: 0.4rem 0 0.6rem;
}
.article-layout .dek {
font-size: 1.05rem;
color: var(--muted);
margin-bottom: 1.2rem;
}

/* Hero image and caption */
.hero-cap {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
color: var(--muted);
margin-top: 0.3rem;
}

/* Key points box */
.keypoints {
background: #fff;
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 1rem 1.25rem;
margin: 1.5rem 0;
}
.keypoints h4 {
margin: 0 0 0.5rem;
font-family: Poppins, Inter, sans-serif;
}
.keypoints ul {
padding-left: 1.2rem;
margin: 0;
color: var(--text);
line-height: 1.6;
}

/* Sticky share buttons */
.share-sticky {
position: sticky;
top: 120px;
float: left;
display: flex;
flex-direction: column;
gap: 8px;
margin-right: 16px;
}
.share-btn {
width: 36px;
height: 36px;
display: grid;
place-items: center;
background: #fff;
border: 1px solid #eee;
border-radius: 50%;
font-size: 1rem;
box-shadow: var(--shadow);
cursor: pointer;
}
.share-btn:hover {
background: var(--red);
color: #fff;
}

/* Article body */
.body {
background: #fff;
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 1.2rem 1.5rem;
line-height: 1.7;
}
.body .dropcap::first-letter {
float: left;
font-size: 3.2rem;
line-height: 1;
font-weight: 700;
margin-right: 8px;
color: var(--red);
}
.inline-ad {
border: 1px dashed #ccc;
border-radius: var(--radius);
text-align: center;
color: var(--muted);
font-size: 0.9rem;
padding: 1.2rem;
margin: 1.5rem 0;
}
.pull {
background: rgba(215, 26, 34, 0.08);
border-left: 4px solid var(--red);
padding: 0.8rem 1rem;
border-radius: 0 var(--radius) var(--radius) 0;
margin: 1.5rem 0;
font-style: italic;
}

/* Tags */
.tags {
margin: 1.5rem 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}

/* Author box */
.author-box {
display: flex;
gap: 14px;
align-items: center;
background: #fff;
box-shadow: var(--shadow);
border-radius: var(--radius);
padding: 1rem 1.2rem;
margin: 2rem 0;
}

/* Related stories */
.related {
margin: 2rem 0;
}
.related .mini {
display: flex;
gap: 12px;
align-items: center;
background: #fff;
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 10px;
}
.related .mini img {
width: 90px;
height: 90px;
object-fit: cover;
}

/* Next / Previous nav */
.nextprev {
display: flex;
flex-direction: column;
gap: 8px;
margin: 2rem 0;
}
.nextprev .np {
color: var(--blue);
font-weight: 600;
}
.nextprev .np:hover {
text-decoration: underline;
}

/* Sidebar widgets */
.widget {
background: #fff;
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 1rem;
}
.widget h4 {
margin-top: 0;
font-family: Poppins, Inter, sans-serif;
}
.widget .mini {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 10px;
margin: 5px 0;
border-bottom:1px solid #ddd;
padding: 9px 0;
}
a.mini p.muted {
    margin-bottom: 0;
}
.widget .mini img {
width: 64px;
height: 64px;
object-fit: cover;
border-radius: 8px;
}

/* Newsletter */
.newsletter {
background: linear-gradient(180deg, #fff, rgba(255, 214, 10, 0.15));
border: 1px dashed rgba(215, 26, 34, 0.25);
border-radius: var(--radius);
padding: 1rem;
box-shadow: var(--shadow);
}
.newsletter input {
width: 100%;
border: 1px solid #e7e7e7;
border-radius: 999px;
padding: 0.7rem 1rem;
margin-bottom: 8px;
}

/* Comments */
.comments {
background: #fff;
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 1rem 1.2rem;
margin: 2rem 0;
}
.comments .cmt {
display: flex;
gap: 12px;
margin-bottom: 12px;
}
button#menuToggle {
    display: none;
}
article.card img {
    height: 220px;
    width: 100%;
    object-fit: cover;
}

/* Responsive layout */
@media (max-width:991px) {
.article-layout {grid-template-columns: 1fr!important;}
button#menuToggle {
    display:block;
    padding:0;
}

.topbar  {
    display: none;
}

.logo{top:0; }  .header{top:0;}
 nav.navbar {
    position: absolute;
    right:5px;
    background: transparent;
    padding:0;
}   
 .logo{position:relative;}
 .nav-cta{margin-right:42px;}
 .logo img {
    max-width:75px;
}

.share-sticky {
display: none;
}
/* ====== Base Navigation ====== */
.navbar {
  padding: 10px 20px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar .logo {
  font-size: 20px;
  font-weight: bold;
  color: #222;
  text-decoration: none;
}

.navlinks {
  display: flex;
  gap: 15px;
}

.navlinks a {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 5px;
}

.navlinks a:hover,
.navlinks a.active {
  background-color: #f3f3f3;
}

/* ====== Mobile Styles ====== */
.menu-toggle {
  display: none;
  font-size:30px;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--red);
}

/*@media (max-width: 768px) {*/
  .navlinks {
    display: none;
    position: absolute;
    top:53px;

    right: 0;
    flex-direction: column;
    background: #fff;
    border-top: 1px solid #ddd;
    padding: 15px 0;
  }

  .navlinks.show {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }

  .navlinks a {
    padding: 10px 20px;
    border-radius: 0;
    border-bottom: 1px solid #eee;
  }

  .navlinks a:last-child {
    border-bottom: none;
  }
  .hero{display:block;

}
/* ---------- Author Profile Additions ---------- */
.breadcrumbs { display:flex; align-items:center; gap:6px; font-size:.9rem; color:var(--muted); }
.breadcrumbs a:hover { color: var(--red); }

.author-hero {
display:grid;
grid-template-columns: 1.8fr 1fr;
gap: 20px;
background:#fff;
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 18px;
margin: 18px 0;
}}

div#feed .feed-item img {
    height: 220px;
    width: 100%;
    /* object-fit: cover; */
    margin-bottom:20px;
}
div#feed .pill {
    margin-bottom: 5px;
}
form.search input[type="text"]{max-width:190px;}
form.search input[type="text"], select {
    border: 1px solid #ddd;
    padding: 7px 12px;
    border-radius: 7px;
}
form.search button.btn.btn-outline {
    border-radius: 7px;
    padding: 7px 14px;
    background: var(--red);
    color: #fff;
    border: beige;
}

@media screen and (min-width:576px) and (max-width:991px){.topbar{display:none;}}
@media screen and (min-width:901px) and (max-width:1399px){.ticker-rail{display:none;}}

@media screen and (min-width:901px){.feed{grid-template-columns: 1fr 1fr;}.feed-item{grid-template-columns:1fr}}

@media (min-width:721px){.feed{grid-template-columns: 1fr 1fr;}.feed-item{display:block;}}
@media (min-width:1200px){.feed{grid-template-columns: 1fr 1fr 1fr;}.feed-item{display:block;}}

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

.author-left { display:flex; gap:14px; align-items:flex-start; }
.author-avatar { width:90px; height:90px; border-radius:50%; }
.author-name { margin:0 0 6px; font-family:Poppins, Inter, sans-serif; }
.author-bio { margin:.2rem 0 .5rem; }
.author-social { display:flex; gap:8px; flex-wrap:wrap; }

.author-right { display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
@media (max-width: 900px){ .author-right{ align-items:flex-start; } }

.author-stats { display:flex; gap:18px; }
.author-stats .stat { display:flex; flex-direction:column; align-items:center; background:#fff; border:1px solid #eee; border-radius:12px; padding:8px 12px; }
.author-stats .stat strong { font-size:1.1rem; }
.author-stats .stat span { font-size:.8rem; color:var(--muted); }

.author-toolbar {
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
margin: 12px 0 16px;
}
.author-filter { display:flex; gap:10px; }
.author-filter select {
border:1px solid #eee; border-radius:999px; padding:.5rem .9rem; background:#fff;
}

/* Reuse your existing .tabs & .tabpanel rules */
.tabpanel { display:none; }
.tabpanel.active { display:block; }

/* Pagination */
.pagination {
display:flex; align-items:center; justify-content:center;
gap:12px; margin:18px 0 28px;
}
/* ============ LOGIN PAGE ============ */

.auth-wrapper {
width: min(420px, 92%);
margin: 60px auto;
}

.auth-card {
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 28px 24px;
}

.auth-card h1 {
font-family: Poppins, Inter, sans-serif;
margin: 0 0 6px;
font-size: 1.7rem;
}

.auth-sub {
margin: 0 0 18px;
font-size: .95rem;
color: var(--muted);
}

.auth-body form {
display: grid;
gap: 14px;
}

.auth-body label {
display: block;
font-size: .92rem;
font-weight: 600;
margin-bottom: 4px;
}

.auth-body input {
width: 100%;
border: 1px solid #e8e8e8;
padding: .75rem .9rem;
border-radius: 10px;
font-size: .95rem;
transition: .2s;
background: #fff;
}

.auth-body input:focus {
border-color: var(--red);
box-shadow: 0 0 0 3px rgba(215, 26, 34, .15);
outline: none;
}

.auth-error,
.auth-success {
padding: .65rem .9rem;
border-radius: 10px;
font-size: .9rem;
margin: 8px 0;
}

.auth-error {
background: #ffecec;
border: 1px solid #e8b4b4;
color: #8b1d1d;
}

.auth-success {
background: #eaffea;
border: 1px solid #b6e3b6;
color: #256b25;
}

/* Submit Row */
.auth-submit-row {
display: flex;
justify-content: space-between;
align-items: center;
}

.auth-submit-row a {
color: var(--muted);
font-size: .9rem;
}

.auth-submit-row a:hover {
color: var(--red);
}

/* Button override (optional if using .btn-primary already) */
.auth-login-btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
padding: .75rem 1rem;
border-radius: 999px;
background: var(--red);
color: #fff;
border: none;
cursor: pointer;
box-shadow: var(--shadow);
transition: .3s;
}

.auth-login-btn:hover {
background: linear-gradient(90deg, var(--red), var(--yellow));
}

/* Logout Chip */
.auth-logout {
margin-top: 16px;
text-align: center;
}

/* Forgot Link */
.forgot-link {
font-size: 0.9rem;
color: var(--muted);
margin-left: 12px;
}

.forgot-link:hover {
color: var(--red);
}

/* Small screen fixes */
@media(max-width: 480px) {
.auth-card {
padding: 22px 18px;
}
.auth-submit-row {
flex-direction: column;
gap: 10px;
}
}
/* Reading progress bar */
.progress-wrap {
position: fixed; left: 0; top: 0; height: 3px; width: 100%;
background: linear-gradient(90deg, var(--red), var(--yellow));
transform: scaleX(0); transform-origin: left center; z-index: 100;
}

/* Sticky share rail (desktop) */
.share-sticky {
position: sticky; top: 110px;
display: flex; flex-direction: column; gap: 8px;
}
.share-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%;
background: #fff; border: 1px solid #eee; box-shadow: var(--shadow);
}

/* Article bits */
.meta-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.headline { font-family: Poppins,Inter,sans-serif; margin:.3rem 0 .2rem; font-size:2rem; }
.dek { color: var(--muted); margin: 0 0 .8rem; }
.hero img { aspect-ratio: 16/9; object-fit: cover; border-radius: 12px; }
.hero-cap { display:flex; gap:12px; color: var(--muted); font-size:.9rem; margin:.3rem 0 1rem; }
.keypoints { background:#fff; border:1px dashed rgba(215,26,34,.25); border-radius:14px; padding:12px; margin:12px 0; }
.keypoints h4 { margin:0 0 .3rem }
.pull { background:#fff; border-left:4px solid var(--red); padding:12px; border-radius:12px; margin:12px 0; }
.tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.author-box { display:grid; grid-template-columns:72px 1fr; gap:14px; background:#fff; padding:14px; border-radius:14px; box-shadow: var(--shadow); margin-top:16px; }
.related .mini { display:grid; grid-template-columns:90px 1fr; gap:10px; background:#fff; padding:10px; border-radius:12px; box-shadow:var(--shadow); }
.nextprev { display:flex; justify-content:space-between; gap:10px; margin:14px 0; }
.comments .cmt { display:grid; grid-template-columns:48px 1fr; gap:10px; padding:10px; background:#fff; border-radius:12px; box-shadow:var(--shadow); }
/* Summernote skin to match your theme */
.note-editor.note-frame {
border: 1px solid #e2e2e2;
border-radius: 10px;
box-shadow: var(--shadow);
background: #fff;
}
.note-toolbar { border-bottom: 1px solid #f0f0f0; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.note-statusbar { border-top: 1px solid #f0f0f0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.note-editor .note-editable { min-height: 260px; }

/* Inputs consistent with your post-form styles */
.post-form label { font-weight: 600; font-size: .92rem; display: flex; flex-direction: column; gap: 4px; }
.post-form input, .post-form select, .post-form textarea {
border: 1px solid #ddd; border-radius: 10px; padding: .65rem .75rem; width: 100%; font-size: .92rem; background:#fff;
}
.post-form input:focus, .post-form select:focus, .post-form textarea:focus { outline: none; border-color: var(--red); }


/* ===== Admin » Media Library (scoped) ===== */
.media-page h2 { margin: 0 0 10px; font-family: Poppins, Inter, sans-serif; }

.media-page .lead,
.media-page .card {
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--shadow);
}

.media-page .upload-wrap {
padding: 16px;
margin: 12px 0;
}

.media-page .form-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 10px;
align-items: end;
}
@media (max-width: 900px) {
.media-page .form-grid { grid-template-columns: 1fr; }
}

.media-page label {
font-weight: 600;
font-size: .92rem;
display: flex;
flex-direction: column;
gap: 6px;
}

.media-page input[type="text"],
.media-page input[type="file"] {
border: 1px solid #e2e2e2;
border-radius: 10px;
padding: .65rem .75rem;
background: #fff;
font-size: .92rem;
}
.media-page input[type="file"] { padding: .55rem .75rem; }
.media-page input:focus { outline: none; border-color: var(--red); }

/* Flash + error */
.media-page .text-danger { color: var(--red); margin-top: 6px; }

/* Search row */
.media-page .search-row {
display: flex;
gap: 8px;
align-items: center;
margin: 8px 0;
}
.media-page .search-row input[type="text"] {
flex: 1;
min-width: 220px;
}

/* Buttons (complement your existing) */
.media-page .btn-danger {
background: #ef4444;
color: #fff;
border: none;
}
.media-page .btn-danger:hover { filter: brightness(.95); }
.media-page .btn-sm { padding: .45rem .7rem; font-size: .85rem; }

/* Table */
.media-page .table {
width: 100%;
border-collapse: separate;
border-spacing: 0 10px; /* “cards” rows */
}

.media-page .table thead th {
text-align: left;
font-weight: 700;
color: #555;
padding: 8px 10px;
}

.media-page .table tbody tr {
background: #fff;
box-shadow: var(--shadow);
border-radius: 12px;
}

.media-page .table tbody td {
padding: 12px 10px;
vertical-align: middle;
border-top: 1px solid #f3f3f3;
}
.media-page .table tbody tr td:first-child { border-top-left-radius: 12px; }
.media-page .table tbody tr td:last-child  { border-top-right-radius: 12px; }

/* Preview image */
.media-page .thumb {
width: 70px; height: 50px;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* File meta */
.media-page .file-meta { font-size: 12px; color: #666; }
.media-page .badge-mime {
display: inline-block;
font-size: .75rem;
font-weight: 700;
padding: .25rem .5rem;
border-radius: 999px;
background: rgba(59,130,246,.10);
color: var(--blue);
}

/* Actions cell */
.media-page .actions { text-align: right; white-space: nowrap; }

/* Pagination spacing */
.media-page .pagi { margin-top: 12px; }

/* Subtle hover on rows */
@media (hover:hover) {
.media-page .table tbody tr:hover { transform: translateY(-1px); transition: transform .15s ease; }
}
/* ===== Login page add-ons (scoped) ===== */

/* Grid utility for the form */
.lead form.grid {
display: grid;
gap: 10px;
}

/* Label + field stack */
.lead form.grid label {
font-weight: 600;
font-size: .92rem;
display: flex;
flex-direction: column;
gap: 6px;
}

/* Inputs */
.lead form.grid input[type="email"],
.lead form.grid input[type="password"] {
border: 1px solid #e2e2e2;
border-radius: 12px;
padding: .8rem .9rem;
font-size: .95rem;
background: #fff;
transition: border-color .15s ease, box-shadow .15s ease;
}

/* Focus ring */
.lead form.grid input[type="email"]:focus,
.lead form.grid input[type="password"]:focus {
outline: 0;
border-color: var(--red);
box-shadow: 0 0 0 4px rgba(215,26,34,.10);
}

/* Inline error box you used (kept the style language) */
.inline-ad {
border: 1px solid #f3b6b6;
background: #fff7f7;
color: #a33;
border-radius: 12px;
padding: .75rem .85rem;
font-size: .9rem;
}

/* Chips for flash messages */
.chip {
border: 1px solid #e6e6e6;
}

/* Make the success/error chips look nicer if you remove inline styles */
.chip.chip-success {
background: #eaffea;
border-color: #b6e3b6;
}
.chip.chip-error {
background: #ffecec;
border-color: #f3b6b6;
}

/* Submit + secondary link row */
.lead form.grid .btn.btn-primary {
min-width: 120px;
}

.lead form.grid a.muted:hover {
color: var(--red);
text-decoration: underline;
}

/* Card polish */
.container > .lead {
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--shadow);
}

/* Page heading spacing harmony */
.container > .lead h1 {
font-size: 1.6rem;
letter-spacing: .2px;
}
.container > .lead p.muted {
font-size: .95rem;
}

/* Tiny responsiveness */
@media (max-width: 480px) {
.lead form.grid {
gap: 12px;
}
.container[style*="max-width:520px"] {
margin-top: 24px !important;
}
}

/*New css*/
h2.muted {
    font-size: 1.6rem;
}
i.bi.bi-person {
    font-family: bootstrap-icons;
}
footer.footer-v3 {
    padding: 25px 0 0;
}

ul.f-list li {
    position: relative;
    padding-left: 15px;
}
ul.f-list li:before {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    background: var(--red);
    border-radius: 50%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Minimal inline polish (can be moved to your CSS file) */
.dek { font-size: 1.05rem; color: var(--muted); margin-top: .4rem; }
.meta { color: var(--muted); font-size: .95rem; margin: .4rem 0 1rem; }
figure.hero img { width: 100%; border-radius: 12px; }
figure.hero figcaption { font-size: .9rem; color: var(--muted); margin-top: .35rem; }
.toc { background:#fff; border:1px solid #eee; border-radius:12px; padding:12px 14px; margin:14px 0; }
.toc ol { margin:.4rem 0 0 1rem; }
article h2 { margin-top: 1.2rem; }
.related ul { margin: .4rem 0 0 1rem; }