:root{
  --bg: #0f1724;
  --card: #0b1220;
  --muted: #9aa4b2;
  --accent: #06b6d4;
  --glass: rgba(255,255,255,0.04);
  --radius: 14px;
  --maxwidth: 1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;padding:32px;background:linear-gradient(180deg,#071027 0%, #081222 100%);
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color:#e6eef6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  display:flex;justify-content:center;
}
.container{width:100%;max-width:var(--maxwidth)}

header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#7c3aed);display:flex;align-items:center;justify-content:center;font-weight:800;color:#021018}
h1{font-size:18px;margin:0}
p.lead{margin:0;color:var(--muted);font-size:13px}

.controls{display:flex;gap:10px;align-items:center }
/* .search{background:var(--glass);border:1px solid rgba(255,255,255,0.03);padding:8px 12px;border-radius:10px;color:var(--muted);min-width:220px} */
select.filter{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px 10px;border-radius:10px;color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:var(--radius);overflow:hidden;box-shadow:0 6px 24px rgba(2,6,23,0.6);transition:transform .28s ease, box-shadow .28s ease;border:1px solid rgba(255,255,255,0.02);}
.card:hover{transform:translateY(-8px);box-shadow:0 14px 40px rgba(2,6,23,0.7)}
.card .media{height:180px;background-size:cover;background-position:center}
.card .content{padding:16px}
.meta{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);margin-bottom:8px}
.tag{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.03);font-weight:600;color:var(--accent)}
.title{font-size:16px;margin:0 0 8px 0;color:#eaf6ff}
.excerpt{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:12px}
.card .actions{display:flex;justify-content:space-between;align-items:center}
.readmore{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:10px;color:#dff6fb;font-weight:600;text-decoration:none}
.stats{font-size:12px;color:var(--muted)}

.featured{grid-column:span 2;display:flex;gap:16px}
.featured .media{flex:0 0 48%;height:auto;min-height:220px}
.featured .content{flex:1}

        .btn {
            display: inline-block;
            padding: 8px 14px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            background: linear-gradient(90deg, #06b6d4, #7c3aed);
            color: #021018;
            font-weight: 700;
            cursor: pointer;
            text-decoration: none
        }

        .btn-ghost {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.06);
            color: #dff6fb
        }

@media (max-width:1024px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .featured{grid-column:span 2}
}
@media (max-width:700px){
  body{padding:18px}
  header{flex-direction:column;align-items:flex-start;gap:12px}
  .controls{width:100%;display:grid;grid-template-columns:1fr auto;gap:8px}
  .grid{grid-template-columns:1fr}
  .featured{grid-column:auto;flex-direction:column}
  .featured .media{width:100%;min-height:180px}
}

.kicker{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em}
footer{margin-top:24px;color:var(--muted);font-size:13px;text-align:center}

.single-article{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:var(--radius);overflow:hidden;box-shadow:0 6px 24px rgba(2,6,23,0.6);padding:20px;border:1px solid rgba(255,255,255,0.02)}
.single-cover{width:100%;height:420px;background-size:cover;background-position:center;border-radius:12px;margin-bottom:18px}
.single-title{font-size:28px;margin:6px 0 12px;color:#eaf6ff}
.single-text{color:#cfd9e5;line-height:1.8;font-size:16px}
.backlink{display:inline-block;margin-top:18px;padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);text-decoration:none;color:#dff6fb}



.brand-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

/* ADMIN BUTTON */
.btn-admin{
    appearance:none;
    border:none;
    outline:none;
    padding:12px 22px;
    border-radius:14px;
    background:linear-gradient(135deg,#4f8cff,#6ad3ff);
    color:#04111d;
    font-weight:600;
    font-size:14px;
    letter-spacing:.3px;
    text-decoration:none;     /* ❌ no underline */
    cursor:pointer;
    box-shadow:
        0 10px 25px rgba(79,140,255,.25),
        inset 0 1px 0 rgba(255,255,255,.5);
    transition:all .25s ease;
}

/* hover */
.btn-admin:hover{
    transform:translateY(-2px);
    box-shadow:
        0 14px 35px rgba(79,140,255,.35),
        inset 0 1px 0 rgba(255,255,255,.6);
}

/* active click */
.btn-admin:active{
    transform:translateY(0);
    box-shadow:
        0 6px 16px rgba(79,140,255,.3);
}