:root{
    --red:#e31b23;
    --blue:#123a7a;
    --yellow:#f5c400;
    --ink:#172033;
    --muted:#6b7280;
    --bg:#f4f6fa;
    --card:#fff;
    --line:#e5e7eb;
    --green:#16834b;
    --danger:#b42318;
    --shadow:0 10px 30px rgba(15,23,42,.07)
}

*{
    box-sizing:border-box
}

html{
    min-height:100%;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font:14px/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

button,
input,
textarea,
select{
    font:inherit;
}

button{
    -webkit-tap-highlight-color:transparent;
}

.app{
    display:flex;
    min-height:100vh;
}

.sidebar{
    width:250px;
    background:#0b1b35;
    color:#fff;
    position:fixed;
    inset:0 auto 0 0;
    display:flex;
    flex-direction:column;
    z-index:20;
}

.brand{
    padding:24px 22px 20px;
    border-bottom:1px solid rgba(255,255,255,.1);
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:5px;
}

.brand-a{
    font-size:23px;
    font-weight:900;
    background:var(--red);
    padding:2px 8px;
}

.brand-n{
    font-size:23px;
    font-weight:900;
    background:var(--yellow);
    color:#111;
    padding:2px 8px;
}

.brand small{
    display:block;
    width:100%;
    font-size:9px;
    letter-spacing:2px;
    color:#aeb9ca;
    margin-top:7px;
}

.sidebar nav{
    padding:15px 10px;
    overflow:auto;
}

.sidebar nav a{
    display:block;
    color:#cbd5e1;
    text-decoration:none;
    padding:9px 12px;
    border-radius:8px;
    margin:2px 0;
}

.sidebar nav a:hover{
    background:#162d52;
    color:#fff;
}

.nav-title{
    font-size:10px;
    letter-spacing:1.5px;
    color:#7386a4;
    margin:16px 12px 5px;
}

.side-user{
    margin-top:auto;
    padding:16px;
    border-top:1px solid rgba(255,255,255,.1);
    display:grid;
    gap:3px;
}

.side-user span{
    color:#94a3b8;
    font-size:12px;
}

.side-user a{
    color:#fca5a5;
    text-decoration:none;
    margin-top:5px;
}

.main{
    margin-left:250px;
    width:calc(100% - 250px);
}

.top{
    height:66px;
    background:#fff;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 26px;
    position:sticky;
    top:0;
    z-index:10;
}

.top-right{
    display:flex;
    gap:12px;
    align-items:center;
    color:var(--muted);
    font-size:12px;
}

.avatar{
    width:32px;
    height:32px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--blue);
    color:#fff;
    font-weight:700;
}

.menu{
    display:none;
}

.content{
    padding:26px;
    max-width:1600px;
    margin:auto;
}

.hero{
    background:linear-gradient(120deg,#0d2343,#16458e);
    border-radius:16px;
    color:#fff;
    padding:28px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.hero h1{
    margin:0 0 5px;
    font-size:27px;
}

.hero p{
    margin:0;
    color:#cbd8ed;
}

.stats{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:12px;
    margin-bottom:20px;
}

.stats.mini{
    display:flex;
    gap:10px;
    margin:0;
}

.stat{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:12px;
    padding:14px 15px;
    box-shadow:var(--shadow);
    min-width:0;
}

.stat span{
    display:block;
    color:var(--muted);
    font-size:12px;
}

.stat b{
    display:block;
    font-size:25px;
    margin-top:3px;
}

.stat.warn{
    border-top:3px solid #f59e0b;
}

.stat.ok{
    border-top:3px solid var(--green);
}

.stat.danger{
    border-top:3px solid var(--red);
}

.grid2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.panel{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:20px;
    box-shadow:var(--shadow);
    margin-bottom:18px;
}

.panel.narrow{
    max-width:650px;
}

.panel-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:15px;
}

.panel-head h2,
.panel h2{
    font-size:17px;
    margin:0;
}

.panel-head a{
    color:var(--blue);
    text-decoration:none;
    font-size:13px;
}

.quick{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.quick a{
    padding:14px;
    border:1px solid var(--line);
    border-radius:10px;
    color:var(--ink);
    text-decoration:none;
    background:#fafbfc;
}

.quick a:hover{
    border-color:#b7c6dc;
}

.quick b{
    float:right;
}

.activity{
    display:flex;
    gap:10px;
    padding:10px 0;
    border-bottom:1px solid #eef0f4;
}

.activity small{
    display:block;
    color:var(--muted);
    margin-top:2px;
}

.dot{
    width:9px;
    height:9px;
    background:var(--red);
    border-radius:50%;
    margin-top:7px;
}

.btn{
    border:1px solid #cfd5df;
    background:#fff;
    color:var(--ink);
    border-radius:8px;
    padding:9px 13px;
    font-weight:650;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:13px;
}

.btn:hover{
    filter:brightness(.98);
}

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

.btn.ok{
    background:#eaf8f0;
    color:var(--green);
    border-color:#bfe7cf;
}

.btn.danger{
    background:#fff0ee;
    color:var(--danger);
    border-color:#f0c5c0;
}

.btn.full{
    width:100%;
}

.btn.sm{
    padding:6px 9px;
    font-size:12px;
}

.flash,
.success,
.error{
    padding:12px 14px;
    border-radius:9px;
    margin-bottom:18px;
}

.flash,
.success{
    background:#eaf8f0;
    color:#146c3d;
    border:1px solid #c7ead5;
}

.error{
    background:#fff0ee;
    color:#9f2017;
    border:1px solid #f0c5c0;
}

label{
    display:block;
    font-weight:650;
    margin:0 0 15px;
}

input,
textarea,
select{
    width:100%;
    margin-top:6px;
    padding:10px 11px;
    border:1px solid #cfd5df;
    border-radius:8px;
    background:#fff;
    color:var(--ink);
    font:inherit;
}

textarea{
    resize:vertical;
}

.two{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}


/* =========================================================
   NEWS FORM
========================================================= */

.news-form{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:18px;
    align-items:start;
}


/* =========================================================
   EDITOR TOOLBAR
   Important: keep toolbar above editor and clickable
========================================================= */

.toolbar{
    display:flex;
    gap:4px;
    flex-wrap:wrap;
    position:relative;
    z-index:100;
    pointer-events:auto;
    isolation:isolate;
    margin-bottom:8px;
}

.toolbar button{
    border:1px solid var(--line);
    background:#fff;
    border-radius:5px;
    padding:5px 8px;
    cursor:pointer;
    position:relative;
    z-index:101;
    pointer-events:auto !important;
    user-select:none;
    -webkit-user-select:none;
    touch-action:manipulation;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:32px;
    min-height:30px;
}

.toolbar button:hover{
    background:#f4f6fa;
    border-color:#b7c6dc;
}

.toolbar button:active{
    transform:translateY(1px);
}

.toolbar button:focus{
    outline:2px solid rgba(18,58,122,.18);
    outline-offset:1px;
}


/* =========================================================
   IMAGE BUTTON
========================================================= */

.toolbar button.editor-image-btn,
.toolbar button[title="Insert Image"]{
    position:relative;
    z-index:110;
    pointer-events:auto !important;
    cursor:pointer !important;
}


/* =========================================================
   EDITOR
   Long article scrolls inside editor only
========================================================= */

.editor{
    min-height:420px;
    max-height:720px;
    overflow-y:auto;
    overflow-x:hidden;

    border:1px solid #cfd5df;
    border-radius:8px;
    padding:16px;
    outline:none;
    background:#fff;

    position:relative;
    z-index:1;

    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;

    word-break:break-word;
    overflow-wrap:anywhere;
}

.editor:focus{
    border-color:#7b9bd0;
    box-shadow:0 0 0 3px rgba(18,58,122,.08);
}

.editor img{
    display:block;
    max-width:100%;
    height:auto;
    margin:12px 0;
}

.editor-help,
.muted{
    color:var(--muted);
    font-size:12px;
}

.stack{
    display:grid;
    gap:8px;
}

.required{
    font-size:11px;
    color:var(--red);
}

details{
    border-top:1px solid var(--line);
    padding-top:12px;
}

summary{
    cursor:pointer;
    font-weight:700;
    margin-bottom:12px;
}

.filterbar{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    margin-bottom:15px;
}

.filterbar form{
    display:flex;
    gap:8px;
    flex:1;
    max-width:520px;
}

.filterbar form input{
    margin:0;
}

.table-wrap{
    overflow:auto;
}

table{
    width:100%;
    border-collapse:collapse;
}

th,
td{
    text-align:left;
    padding:12px 10px;
    border-bottom:1px solid #edf0f4;
    white-space:nowrap;
}

th{
    font-size:11px;
    text-transform:uppercase;
    color:#6b7280;
    letter-spacing:.5px;
    background:#fafbfc;
}

.badge{
    display:inline-block;
    border-radius:999px;
    padding:4px 8px;
    font-size:10px;
    font-weight:800;
}

.badge.draft{
    background:#eef2f7;
}

.badge.pending{
    background:#fff4d6;
    color:#8a5a00;
}

.badge.approved{
    background:#e8f0ff;
    color:#244d91;
}

.badge.scheduled{
    background:#eee9ff;
    color:#6044a7;
}

.badge.published{
    background:#e7f7ee;
    color:#137343;
}

.badge.rejected{
    background:#fff0ee;
    color:#a52218;
}

.badge.trash{
    background:#ececec;
}

.inline{
    display:inline-flex;
    gap:5px;
    margin-left:5px;
}

.empty{
    text-align:center;
    color:var(--muted);
    padding:35px;
}

.profile{
    background:linear-gradient(120deg,#fff,#eef4ff);
    border:1px solid var(--line);
    border-radius:14px;
    padding:20px;
    margin-bottom:18px;
    display:flex;
    justify-content:space-between;
    gap:20px;
}

.profile h1{
    margin:0;
}

.media-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
    gap:15px;
}

.media-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    padding-bottom:10px;
}

.media-card img{
    width:100%;
    height:130px;
    object-fit:cover;
    background:#eef0f4;
}

.media-card b,
.media-card small{
    display:block;
    padding:4px 9px;
}

.media-card small{
    color:var(--muted);
}

.auth-card{
    width:min(430px,calc(100% - 30px));
    margin:8vh auto;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    border-radius:16px;
    padding:28px;
}

.auth-card h1{
    margin-top:20px;
}

.brand.big{
    justify-content:center;
    border:0;
    padding:0;
}

.brand.big small{
    text-align:center;
}

.app:has(.auth-card) .sidebar{
    display:none;
}

.app:has(.auth-card) .main{
    margin-left:0;
    width:100%;
}

.app:has(.auth-card) .top{
    display:none;
}

.app:has(.auth-card) .content{
    padding:0;
}

.hr{
    border:0;
    border-top:1px solid var(--line);
    margin:20px 0;
}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media(max-width:1050px){

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

    .news-form{
        grid-template-columns:1fr;
    }

    .editor-side{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:18px;
    }

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

    .editor{
        max-height:650px;
    }
}


@media(max-width:760px){

    .sidebar{
        transform:translateX(-100%);
        transition:.2s;
    }

    .nav-open .sidebar{
        transform:translateX(0);
    }

    .main{
        margin-left:0;
        width:100%;
    }

    .menu{
        display:block;
        border:0;
        background:none;
        font-size:22px;
        cursor:pointer;
    }

    .content{
        padding:15px;
    }

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

    .hero{
        display:block;
    }

    .hero .btn{
        margin-top:15px;
    }

    .two,
    .editor-side{
        grid-template-columns:1fr;
    }

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

    .top{
        padding:0 15px;
    }

    .top-right{
        display:none;
    }

    .profile{
        display:block;
    }

    .stats.mini{
        margin-top:15px;
        display:grid;
        grid-template-columns:repeat(2,1fr);
    }

    .toolbar{
        gap:5px;
        position:sticky;
        top:0;
        background:#fff;
        padding:6px 0;
        z-index:100;
    }

    .toolbar button{
        min-width:34px;
        min-height:34px;
        padding:6px 9px;
    }

    .editor{
        min-height:380px;
        max-height:65vh;
        padding:13px;
    }
}


/* =========================================================
   EXTRA SAFETY FOR CLICKABLE TOOLBAR
========================================================= */

.toolbar,
.toolbar *{
    pointer-events:auto;
}

.toolbar button::before,
.toolbar button::after{
    pointer-events:none;
}


/* =========================================================
   AVATAR NEWS — PROFESSIONAL AUTH EXPERIENCE
========================================================= */

.app:has(.auth-shell) .sidebar{
    display:none;
}

.app:has(.auth-shell) .main{
    margin-left:0;
    width:100%;
}

.app:has(.auth-shell) .top{
    display:none;
}

.app:has(.auth-shell) .content{
    padding:0;
    max-width:none;
}

.auth-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);
    background:
        radial-gradient(circle at 12% 12%, rgba(227,27,35,.18), transparent 30%),
        radial-gradient(circle at 88% 82%, rgba(18,58,122,.22), transparent 34%),
        #071326;
}

.auth-brand-panel{
    position:relative;
    overflow:hidden;
    padding:clamp(35px,6vw,85px);
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    border-right:1px solid rgba(255,255,255,.08);
}

.auth-brand-panel::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    right:-170px;
    top:-170px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:50%;
}

.auth-brand-panel::after{
    content:"";
    position:absolute;
    width:620px;
    height:620px;
    left:-360px;
    bottom:-360px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:50%;
}

.auth-logo{
    display:flex;
    align-items:center;
    gap:13px;
    position:relative;
    z-index:2;
}

.auth-logo > span,
.auth-mobile-logo > span{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:linear-gradient(145deg,#ef2630,#b90d18);
    color:#fff;
    font-size:29px;
    font-weight:900;
    box-shadow:0 12px 28px rgba(227,27,35,.28);
}

.auth-logo strong{
    display:block;
    font-size:22px;
    letter-spacing:.7px;
}

.auth-logo small{
    display:block;
    color:#91a4c2;
    font-size:9px;
    letter-spacing:2.5px;
    margin-top:3px;
}

.auth-brand-copy{
    max-width:650px;
    position:relative;
    z-index:2;
    margin:auto 0;
    padding:60px 0;
}

.auth-kicker{
    display:inline-block;
    color:#ef6670;
    font-size:10px;
    font-weight:800;
    letter-spacing:2px;
}

.auth-brand-copy h1{
    font-size:clamp(34px,4.2vw,58px);
    line-height:1.08;
    margin:14px 0 18px;
    letter-spacing:-1.5px;
}

.auth-brand-copy p{
    color:#b8c5d8;
    max-width:580px;
    font-size:16px;
    line-height:1.75;
    margin:0;
}

.auth-points{
    margin-top:38px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.auth-points > div{
    padding:15px;
    border:1px solid rgba(255,255,255,.09);
    background:rgba(255,255,255,.035);
    border-radius:13px;
    backdrop-filter:blur(10px);
}

.auth-points b{
    display:block;
    color:#ef6670;
    font-size:11px;
    margin-bottom:8px;
}

.auth-points span{
    display:block;
    color:#d7dfeb;
    font-size:12px;
    line-height:1.45;
}

.auth-form-panel{
    background:#fff;
    padding:clamp(30px,5vw,72px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:100vh;
}

.auth-form-head{
    margin:30px 0 24px;
}

.auth-form-head h2{
    margin:8px 0 5px;
    font-size:31px;
    letter-spacing:-.6px;
}

.auth-form-head p{
    margin:0;
    color:#7a8495;
}

.auth-form{
    width:100%;
}

.auth-form label{
    margin-bottom:17px;
}

.auth-form label > span{
    display:block;
    font-size:12px;
    font-weight:750;
    color:#344054;
    margin-bottom:7px;
}

.auth-form input{
    margin-top:0;
    min-height:48px;
    border-radius:11px;
    border:1px solid #d8dee8;
    background:#fbfcfe;
    padding:12px 14px;
    transition:.15s ease;
}

.auth-form input:focus{
    outline:none;
    border-color:#315b9a;
    background:#fff;
    box-shadow:0 0 0 4px rgba(18,58,122,.08);
}

.auth-submit{
    min-height:50px;
    border-radius:11px;
    margin-top:4px;
    font-size:14px;
    justify-content:space-between;
    padding:0 16px;
    box-shadow:0 10px 22px rgba(227,27,35,.18);
}

.auth-submit span{
    font-size:19px;
}

.auth-divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin:24px 0;
    color:#98a2b3;
    font-size:11px;
}

.auth-divider::before,
.auth-divider::after{
    content:"";
    height:1px;
    background:#eaecf0;
    flex:1;
}

.auth-register-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    text-decoration:none;
    color:#172033;
    padding:14px 15px;
    border:1px solid #e4e7ec;
    border-radius:11px;
    background:#fafbfc;
    transition:.15s ease;
}

.auth-register-link:hover{
    border-color:#bdc8da;
    background:#fff;
    transform:translateY(-1px);
}

.auth-register-link span{
    font-size:12px;
}

.auth-register-link b{
    color:var(--blue);
    font-size:12px;
    white-space:nowrap;
}

.auth-note{
    text-align:center;
    color:#98a2b3;
    font-size:10px;
    margin:18px 0 0;
}

.auth-mobile-logo{
    display:none;
}

.auth-honeypot{
    position:absolute !important;
    left:-10000px !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
}

.auth-two{
    gap:12px;
}

.auth-register-shell .auth-brand-copy{
    padding:45px 0;
}

.auth-register-shell .auth-form-head{
    margin-top:18px;
}

@media(max-width:900px){
    .auth-shell{
        grid-template-columns:1fr;
        background:#f4f6fa;
    }

    .auth-brand-panel{
        display:none;
    }

    .auth-form-panel{
        min-height:100vh;
        padding:28px 20px;
        justify-content:flex-start;
    }

    .auth-mobile-logo{
        display:flex;
        align-items:center;
        gap:10px;
    }

    .auth-mobile-logo > span{
        width:40px;
        height:40px;
        border-radius:11px;
        font-size:24px;
    }

    .auth-mobile-logo strong{
        font-size:17px;
        letter-spacing:.4px;
    }

    .auth-form-head{
        margin-top:42px;
    }

    .auth-two{
        grid-template-columns:1fr;
    }
}

@media(max-width:480px){
    .auth-form-panel{
        padding:22px 16px;
    }

    .auth-form-head h2{
        font-size:27px;
    }
}


/* =========================================================
   AVATAR NEWS CMS — RESPONSIVE UI V2
   Clean desktop / tablet / mobile layout
========================================================= */
html, body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

body{
    -webkit-text-size-adjust:100%;
}

.app{
    width:100%;
    min-width:0;
}

.main{
    min-width:0;
}

.content{
    width:100%;
}

.panel,
.hero,
.profile,
.stat,
.news-form > *,
.editor-side > *{
    min-width:0;
}

/* ---------- desktop ---------- */
@media (min-width:1101px){
    .menu{display:none !important;}
    .sidebar{transform:none !important; visibility:visible !important;}
    .main{margin-left:250px; width:calc(100% - 250px);}
}

/* ---------- tablet / small laptop ---------- */
@media (max-width:1100px){
    .sidebar{
        transform:translateX(-100%);
        transition:transform .22s ease, box-shadow .22s ease;
        box-shadow:20px 0 45px rgba(15,23,42,.20);
    }

    body.nav-open .sidebar{
        transform:translateX(0) !important;
        visibility:visible !important;
        z-index:1001 !important;
    }

    .main{
        margin-left:0;
        width:100%;
    }

    .menu{
        display:inline-flex !important;
        width:40px;
        height:40px;
        align-items:center;
        justify-content:center;
        border:1px solid var(--line);
        border-radius:10px;
        background:#fff;
        color:var(--ink);
        font-size:20px;
        line-height:1;
        flex:0 0 40px;
    }

    .top{
        min-height:64px;
        height:auto;
        padding:10px 18px;
        gap:12px;
    }

    .top > div:first-of-type{
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .content{
        padding:20px;
    }

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

    .news-form{
        grid-template-columns:minmax(0,1fr);
    }

    .editor-side{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:14px;
        position:static;
        max-height:none;
        overflow:visible !important;
    }

    .editor-side .panel{
        min-width:0;
    }

    .sidebar-backdrop{
        display:none;
    }

    body.nav-open .sidebar-backdrop{
        display:block;
        position:fixed;
        inset:0;
        z-index:1000;
        background:rgba(2,8,23,.48);
        backdrop-filter:blur(1px);
    }

    .table-wrap{
        max-width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    table{min-width:700px;}
}

/* ---------- phone ---------- */
@media (max-width:700px){
    .top{
        padding:9px 12px;
        min-height:58px;
    }

    .content{
        padding:12px;
    }

    .hero{
        padding:18px;
        border-radius:13px;
    }

    .hero h1{
        font-size:22px;
        line-height:1.25;
    }

    .stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:9px;
    }

    .stat{
        padding:11px 12px;
        border-radius:10px;
    }

    .stat b{
        font-size:21px;
    }

    .grid2{
        grid-template-columns:1fr;
        gap:12px;
    }

    .panel{
        padding:15px;
        border-radius:12px;
    }

    .panel-head{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .two,
    .editor-side{
        grid-template-columns:1fr;
    }

    .editor-side{
        display:grid;
    }

    .toolbar{
        gap:5px;
        padding:7px;
        margin:0 0 8px;
        border:1px solid var(--line);
        border-radius:10px;
        background:#f8fafc;
        position:sticky;
        top:58px;
        z-index:90;
        box-shadow:0 5px 15px rgba(15,23,42,.06);
    }

    .toolbar button{
        min-width:35px;
        min-height:35px;
        padding:6px 8px;
        border-radius:7px;
        background:#fff;
    }

    .editor{
        min-height:420px;
        max-height:none;
        padding:13px;
        border-radius:10px;
        font-size:15px;
        line-height:1.75;
    }

    input,
    textarea,
    select{
        min-height:44px;
    }

    textarea{
        min-height:120px;
    }

    .btn{
        min-height:42px;
    }

    .filterbar{
        display:block;
    }

    .filterbar form{
        max-width:none;
        width:100%;
        margin-top:10px;
    }

    .profile{
        padding:15px;
    }

    .media-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }

    .media-card img{
        height:105px;
    }

    /* Login / registration */
    .auth-shell{
        min-height:100svh;
        display:block;
    }

    .auth-brand-panel{
        display:none;
    }

    .auth-form-panel{
        min-height:100svh;
        min-height:100dvh;
        width:100%;
        padding:22px 16px 28px;
        justify-content:flex-start;
        align-items:stretch;
        overflow-x:hidden;
    }

    .auth-form-panel > *{
        width:100%;
        max-width:520px;
        margin-left:auto;
        margin-right:auto;
    }

    .auth-mobile-logo{
        display:flex;
        margin-bottom:8px;
    }

    .auth-form-head{
        margin:30px auto 20px;
    }

    .auth-form-head h2{
        font-size:27px;
        line-height:1.2;
    }

    .auth-form label{
        margin-bottom:14px;
    }

    .auth-form input{
        min-height:48px;
    }

    .auth-submit{
        min-height:50px;
    }

    .auth-divider{
        margin:20px 0;
    }
}

@media (max-width:380px){
    .content{padding:9px;}
    .top{padding:8px 9px;}
    .panel{padding:13px;}
    .toolbar{gap:4px; padding:6px;}
    .toolbar button{min-width:32px; min-height:32px; padding:5px 7px;}
    .auth-form-panel{padding-left:13px; padding-right:13px;}
    .auth-form-head h2{font-size:24px;}
}

/* Prevent accidental horizontal overflow from long Hindi headlines/URLs */
.hero h1,
.hero p,
.panel,
.panel-head,
.profile,
.activity,
.stat,
label,
input,
textarea,
select,
button,
a{
    overflow-wrap:anywhere;
}

/* =========================================================
   AVATAR NEWS — FINAL RESPONSIVE SHELL
   ========================================================= */
html, body { width:100%; min-width:0; overflow-x:hidden; }
.app, .main, .content, .panel, .news-form, .grid2, .top { min-width:0; }
.top { gap:14px; }
.top-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu { flex:0 0 auto; }

@media (min-width: 901px) {
    .menu { display:none !important; }
    .sidebar { transform:none !important; visibility:visible !important; }
}

@media (max-width: 900px) {
    .sidebar {
        width:min(310px, 86vw);
        transform:translateX(-105%);
        transition:transform .22s ease, visibility .22s ease;
        visibility:hidden;
        box-shadow:14px 0 38px rgba(0,0,0,.20);
    }
    body.nav-open .sidebar {
        transform:translateX(0) !important;
        visibility:visible !important;
    }
    .main { margin-left:0; width:100%; }
    .top {
        height:58px;
        padding:0 14px;
        position:sticky;
        top:0;
        z-index:900;
    }
    .menu {
        display:inline-flex !important;
        width:40px;
        height:40px;
        align-items:center;
        justify-content:center;
        border:1px solid var(--line);
        border-radius:10px;
        background:#fff;
        color:var(--ink);
        font-size:21px;
        line-height:1;
        padding:0;
        cursor:pointer;
        box-shadow:0 2px 8px rgba(15,23,42,.05);
    }
    .menu-icon { line-height:1; transform:translateY(-1px); }
    .top-right { margin-left:auto; }
    .sidebar-backdrop { display:none; }
    body.nav-open .sidebar-backdrop {
        display:block;
        position:fixed;
        inset:0;
        z-index:899;
        background:rgba(7,19,38,.48);
        backdrop-filter:blur(1px);
    }
    .content { padding:18px; width:100%; }
    .hero { padding:22px; }
    .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .news-form { grid-template-columns:1fr; }
    .editor-side { display:grid; grid-template-columns:1fr 1fr; gap:16px; position:static; max-height:none; overflow:visible !important; }
}

@media (max-width: 600px) {
    .content { padding:12px; }
    .top { padding:0 10px; }
    .top-right { display:none; }
    .top-title { font-size:14px; }
    .hero { padding:18px; border-radius:12px; }
    .hero h1 { font-size:22px; }
    .panel { padding:15px; border-radius:12px; }
    .stats { gap:8px; }
    .stat { padding:12px; }
    .stat b { font-size:21px; }
    .grid2, .two, .editor-side { grid-template-columns:1fr; }
    .quick { grid-template-columns:1fr; }
    .filterbar { display:block; }
    .filterbar form { max-width:none; width:100%; margin-top:10px; }
    .profile { padding:16px; }
    .toolbar {
        display:grid;
        grid-template-columns:repeat(6,minmax(0,1fr));
        gap:5px;
        padding:7px;
        margin:0 0 8px;
        background:#f8fafc;
        border:1px solid var(--line);
        border-radius:10px;
        position:sticky;
        top:58px;
        z-index:100;
    }
    .toolbar button { width:100%; min-width:0; min-height:36px; padding:5px 2px; }
    .editor { min-height:340px; max-height:none; height:55vh; padding:12px; }
    .media-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .media-card img { height:110px; }
    .auth-form-panel { padding:22px 16px 28px; }
    .auth-form-head { margin-top:32px; }
    .auth-form-head h2 { font-size:26px; }
    .auth-form input { min-height:46px; }
}

@media (max-width: 380px) {
    .content { padding:9px; }
    .stats { grid-template-columns:1fr; }
    .toolbar { grid-template-columns:repeat(5,minmax(0,1fr)); }
    .editor { height:52vh; }
}