:root {
    --pulse-green: #1fe08f;
    --pulse-teal: #22d3ee;
    --pulse-dark: #0b1220;
    --pulse-dark-2: #111a2b;
    --pulse-ink: #0f172a;
    --pulse-muted: #64748b;
    --pulse-line: #e5e9f0;
    --pulse-grad: linear-gradient(135deg, #1fe08f 0%, #22d3ee 100%);
}

* { box-sizing: border-box; }

body {
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--pulse-ink);
    background: #f6f8fb;
    margin: 0;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .page-title, .section-title {
    font-family: 'Archivo', 'Inter', sans-serif;
}

/* ---------- Topbar ---------- */
.topbar {
    background: var(--pulse-dark);
    color: #cbd5e1;
    font-size: .8rem;
    padding: .4rem 0;
    letter-spacing: .02em;
}
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .1em;
}
.live-badge .dot {
    width: 9px; height: 9px;
    background: var(--pulse-green);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(31, 224, 143, .7);
    animation: pulse-dot 1.6s infinite;
}
@keyframes pulse-dot {
    0%   { box-shadow: 0 0 0 0 rgba(31, 224, 143, .7); }
    70%  { box-shadow: 0 0 0 8px rgba(31, 224, 143, 0); }
    100% { box-shadow: 0 0 0 0 rgba(31, 224, 143, 0); }
}
.topbar-date { text-transform: capitalize; }

/* ---------- Navbar ---------- */
.pulse-navbar {
    background: #fff;
    border-bottom: 1px solid var(--pulse-line);
    box-shadow: 0 2px 12px rgba(15, 23, 42, .04);
    padding: .5rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.brand-logo { height: 60px; width: auto; }
.footer-logo, .login-logo { height: 54px; width: auto; }

.pulse-navbar .nav-link {
    font-weight: 600;
    color: var(--pulse-ink);
    position: relative;
    margin: 0 .35rem;
    padding: .5rem .25rem;
}
.pulse-navbar .nav-link::after {
    content: "";
    position: absolute;
    left: 0; bottom: .2rem;
    height: 2px; width: 0;
    background: var(--pulse-grad);
    transition: width .25s ease;
}
.pulse-navbar .nav-link:hover::after,
.pulse-navbar .nav-link.active::after { width: 100%; }
.pulse-navbar .nav-link.active { color: #0a8f5b; }

/* ---------- Buttons ---------- */
.btn-pulse {
    background: var(--pulse-grad);
    border: none;
    color: #04231a;
    font-weight: 700;
    border-radius: 999px;
    padding: .45rem 1.2rem;
}
.btn-pulse:hover { color: #04231a; filter: brightness(1.05); }
.btn-pulse-outline {
    border: 2px solid var(--pulse-green);
    color: #0a8f5b;
    font-weight: 700;
    border-radius: 999px;
    padding: .38rem 1rem;
    background: transparent;
}
.btn-pulse-outline:hover { background: var(--pulse-green); color: #04231a; }

/* ---------- Category badges ---------- */
.cat-badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    padding: .25rem .6rem;
    border-radius: 6px;
}
.cat-badge.sm { font-size: .62rem; padding: .15rem .45rem; }
.badge-bota    { background: #2563eb; }
.badge-rajoni  { background: #7c3aed; }
.badge-vendi   { background: #0a8f5b; }
.badge-sport   { background: #ea580c; }
.badge-showbiz { background: #db2777; }
.badge-default { background: #475569; }

/* ---------- Titles ---------- */
.section-title {
    font-weight: 800;
    position: relative;
    padding-left: .75rem;
}
.section-title::before {
    content: "";
    position: absolute;
    left: 0; top: .1em; bottom: .1em;
    width: 5px;
    background: var(--pulse-grad);
    border-radius: 4px;
}
.page-title { font-weight: 800; }

/* ---------- Hero ---------- */
.hero-card {
    display: block;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    height: 460px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
}
.hero-img {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transition: transform .5s ease;
}
.hero-card:hover .hero-img { transform: scale(1.05); }
.hero-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 1.75rem;
    background: linear-gradient(to top, rgba(3, 8, 20, .92) 0%, rgba(3, 8, 20, .35) 55%, transparent 100%);
    color: #fff;
}
.hero-title { font-size: 2rem; font-weight: 900; margin: .6rem 0 .4rem; line-height: 1.15; }
.hero-summary { color: #dbe4f0; margin-bottom: .5rem; }
.hero-date { font-size: .8rem; color: #9fb3c8; }

/* ---------- Side list ---------- */
.side-list { display: flex; flex-direction: column; gap: .85rem; }
.side-item {
    display: flex; gap: .75rem;
    text-decoration: none; color: var(--pulse-ink);
    background: #fff; border: 1px solid var(--pulse-line);
    border-radius: 12px; padding: .5rem; transition: .2s;
}
.side-item:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15,23,42,.08); }
.side-thumb {
    width: 96px; min-width: 96px; height: 72px;
    background-size: cover; background-position: center;
    border-radius: 8px;
}
.side-body { display: flex; flex-direction: column; gap: .3rem; }
.side-title { font-weight: 700; font-size: .95rem; line-height: 1.25; }

/* ---------- News cards ---------- */
.news-card {
    display: block;
    background: #fff;
    border: 1px solid var(--pulse-line);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: var(--pulse-ink);
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
}
.news-card:hover { transform: translateY(-6px); box-shadow: 0 14px 32px rgba(15,23,42,.12); }
.news-img { height: 190px; background-size: cover; background-position: center; }
.news-body { padding: 1rem 1.1rem 1.2rem; }
.news-title { font-size: 1.15rem; font-weight: 800; margin: .55rem 0 .4rem; line-height: 1.25; }
.news-summary { color: var(--pulse-muted); font-size: .92rem; margin-bottom: .6rem; }
.news-date { font-size: .78rem; color: #94a3b8; }

/* ---------- Breadcrumb ---------- */
.pulse-breadcrumb { background: transparent; padding: 0; font-size: .85rem; }
.pulse-breadcrumb a { color: #0a8f5b; text-decoration: none; }

/* ---------- Article ---------- */
.article { background: #fff; border-radius: 16px; padding: 2rem; box-shadow: 0 6px 20px rgba(15,23,42,.06); }
.article-title { font-size: 2.2rem; font-weight: 900; margin: .75rem 0 .5rem; line-height: 1.12; }
.article-meta { color: var(--pulse-muted); text-transform: capitalize; }
.article-hero { height: 420px; border-radius: 12px; background-size: cover; background-position: center; margin: 1.25rem 0; }
.article-lead { font-size: 1.2rem; font-weight: 600; color: #1e293b; }
.article-content { font-size: 1.05rem; line-height: 1.8; color: #24303f; }
.article-content p { margin-bottom: 1rem; }

/* ---------- Footer ---------- */
.pulse-footer {
    background: var(--pulse-dark);
    color: #cbd5e1;
    padding: 3rem 0 1.5rem;
    margin-top: 3rem;
}
.footer-tag { color: var(--pulse-green); font-weight: 700; letter-spacing: .04em; margin: .6rem 0 .3rem; }
.footer-muted { color: #94a3b8; font-size: .9rem; }
.footer-head { color: #fff; font-weight: 800; margin-bottom: .9rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .5rem; }
.footer-links a { color: #cbd5e1; text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--pulse-green); }
.footer-hr { border-color: rgba(255,255,255,.1); margin: 2rem 0 1rem; }
.footer-copy { color: #7c8aa0; font-size: .82rem; margin: 0; }

/* ---------- Admin ---------- */
.login-card, .admin-form-wrap {
    background: #fff; border-radius: 16px; padding: 2rem;
    box-shadow: 0 10px 30px rgba(15,23,42,.08); margin-top: 1.5rem;
}
.admin-table-wrap { background: #fff; border-radius: 14px; padding: .5rem; box-shadow: 0 6px 20px rgba(15,23,42,.06); }
.admin-table thead th { color: var(--pulse-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.admin-thumb { width: 64px; height: 42px; object-fit: cover; border-radius: 6px; }
.delete-card { border: 1px solid var(--pulse-line); border-radius: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .hero-card { height: 340px; }
    .hero-title { font-size: 1.5rem; }
    .article-hero { height: 260px; }
    .navbar-collapse { padding-top: .75rem; }
    .pulse-navbar .nav-link.active { color: #0a8f5b; }
}