:root{
    --cms-navy:#061f46;
    --cms-navy-dark:#03152f;
    --cms-green:#1d6f43;
    --cms-gold:#d99a16;
    --cms-gold-soft:#f7be35;
    --cms-paper:#f6f9fd;
    --cms-card:#fff;
    --cms-text:#42516b;
    --cms-muted:#71809a;
    --cms-line:#dce4ef;
    --cms-danger:#b42318;
    --cms-success:#087443;
    --cms-sidebar-width:286px;
    --cms-shadow:0 14px 34px rgba(6,31,70,.09);
}
*{box-sizing:border-box}
body{
    margin:0;
    color:var(--cms-text);
    background:var(--cms-paper);
    font-family:Arial,Helvetica,sans-serif;
    line-height:1.55;
}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font:inherit}
.cms-shell{min-height:100vh;display:flex}
.cms-sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:var(--cms-sidebar-width);
    padding:20px 14px;
    color:#fff;
    background:linear-gradient(180deg,var(--cms-navy),var(--cms-navy-dark));
    overflow-y:auto;
    z-index:1000;
}
.cms-brand{
    display:grid;
    gap:5px;
    padding:10px 12px 18px;
    border-bottom:1px solid rgba(255,255,255,.1);
}
.cms-brand img{
    width:118px;
    max-width:100%;
    padding:7px;
    border-radius:16px;
    background:#fff;
}
.cms-brand strong{font-size:1rem}
.cms-brand small{
    color:var(--cms-gold-soft);
    font-size:.73rem;
    font-weight:850;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.cms-session{
    margin:18px 8px;
    padding:9px 11px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:#e7eff9;
    font-size:.76rem;
    font-weight:800;
}
.cms-nav{display:grid;gap:4px}
.cms-nav>span{
    padding:15px 11px 6px;
    color:#8ca2bd;
    font-size:.68rem;
    font-weight:900;
    letter-spacing:.11em;
    text-transform:uppercase;
}
.cms-nav a{
    padding:10px 12px;
    border-radius:11px;
    color:#d6e0ed;
    font-size:.88rem;
    font-weight:750;
}
.cms-nav a:hover{
    color:#fff;
    background:rgba(255,255,255,.08);
}
.cms-nav a.active{
    color:var(--cms-navy);
    background:#fff;
    box-shadow:0 9px 22px rgba(0,0,0,.16);
}
.cms-main{
    width:calc(100% - var(--cms-sidebar-width));
    margin-left:var(--cms-sidebar-width);
    min-width:0;
}
.cms-topbar{
    position:sticky;
    top:0;
    z-index:700;
    min-height:84px;
    padding:18px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-bottom:1px solid var(--cms-line);
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(14px);
}
.cms-topbar h1{
    margin:0;
    color:var(--cms-navy);
    font-size:1.48rem;
}
.cms-topbar p{
    margin:3px 0 0;
    color:var(--cms-muted);
    font-size:.86rem;
}
.cms-content{padding:26px}
.cms-menu-button{
    display:none;
    min-height:38px;
    padding:7px 11px;
    margin-bottom:8px;
    border:1px solid var(--cms-line);
    border-radius:10px;
    color:var(--cms-navy);
    background:#fff;
    font-weight:800;
}
.cms-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:41px;
    padding:9px 15px;
    border:1px solid transparent;
    border-radius:999px;
    font-weight:850;
    cursor:pointer;
}
.cms-button.primary{
    color:var(--cms-navy-dark);
    background:linear-gradient(135deg,var(--cms-gold),var(--cms-gold-soft));
}
.cms-button.secondary{
    color:var(--cms-navy);
    border-color:var(--cms-line);
    background:#fff;
}
.cms-alert{
    padding:13px 15px;
    margin-bottom:18px;
    border:1px solid var(--cms-line);
    border-radius:13px;
    font-weight:750;
}
.cms-alert.success{
    color:var(--cms-success);
    border-color:#a9dfc2;
    background:#ecfdf3;
}
.cms-alert.error{
    color:var(--cms-danger);
    border-color:#ffc9c9;
    background:#fff1f1;
}
.cms-alert.warning{
    color:#6a4b0f;
    border-color:#ead6a6;
    background:#fff8e7;
}
.cms-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    margin-bottom:20px;
}
.cms-stats article{
    padding:20px;
    border:1px solid var(--cms-line);
    border-radius:17px;
    background:#fff;
    box-shadow:var(--cms-shadow);
}
.cms-stats strong{
    display:block;
    color:var(--cms-navy);
    font-size:2rem;
    line-height:1;
}
.cms-stats span{
    display:block;
    margin-top:8px;
    color:var(--cms-muted);
    font-size:.82rem;
    font-weight:800;
}
.cms-panel{
    padding:20px;
    border:1px solid var(--cms-line);
    border-radius:18px;
    background:#fff;
    box-shadow:var(--cms-shadow);
}
.cms-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:18px;
}
.cms-panel-head h2{
    margin:0;
    color:var(--cms-navy);
    font-size:1.1rem;
}
.cms-panel-head p{
    margin:3px 0 0;
    color:var(--cms-muted);
    font-size:.82rem;
}
.cms-table-wrap{overflow:auto}
.cms-table{
    width:100%;
    min-width:760px;
    border-collapse:collapse;
}
.cms-table th,
.cms-table td{
    padding:12px;
    border-bottom:1px solid var(--cms-line);
    text-align:left;
    vertical-align:top;
    font-size:.83rem;
}
.cms-table th{
    color:var(--cms-muted);
    font-size:.71rem;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.cms-table td strong{
    display:block;
    color:var(--cms-navy);
}
.cms-table td small{
    display:block;
    margin-top:3px;
    color:var(--cms-muted);
}
.cms-status{
    display:inline-flex;
    padding:5px 8px;
    border-radius:999px;
    font-size:.71rem;
    font-weight:900;
}
.cms-status.published{
    color:#087443;
    background:#e9f8f0;
}
.cms-status.draft{
    color:#8a650e;
    background:#fff7e5;
}
.cms-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}
.cms-actions form{margin:0}
.cms-table-link{
    padding:6px 9px;
    border:1px solid var(--cms-line);
    border-radius:9px;
    color:var(--cms-navy);
    background:#fff;
    font-weight:800;
    cursor:pointer;
}
.cms-table-link.danger{color:var(--cms-danger)}
.cms-empty{
    padding:28px!important;
    color:var(--cms-muted);
    text-align:center!important;
}
.cms-filters{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:15px;
}
.cms-filters a{
    padding:7px 11px;
    border:1px solid var(--cms-line);
    border-radius:999px;
    color:var(--cms-navy);
    background:#fff;
    font-size:.8rem;
    font-weight:800;
}
.cms-filters a.active{
    color:#fff;
    background:var(--cms-navy);
}
.cms-editor-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 345px;
    gap:20px;
    align-items:start;
}
.cms-editor-side{
    display:grid;
    gap:18px;
}
.cms-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.cms-form-grid label{
    display:grid;
    gap:7px;
}
.cms-form-grid label>span{
    color:var(--cms-navy);
    font-size:.83rem;
    font-weight:850;
}
.cms-form-grid .full{grid-column:1/-1}
.cms-form-grid input,
.cms-form-grid select,
.cms-form-grid textarea{
    width:100%;
    padding:11px 12px;
    border:1px solid var(--cms-line);
    border-radius:11px;
    color:var(--cms-text);
    background:#fcfdff;
    outline:none;
}
.cms-form-grid input:focus,
.cms-form-grid select:focus,
.cms-form-grid textarea:focus{
    border-color:var(--cms-gold);
    background:#fff;
    box-shadow:0 0 0 4px rgba(217,154,22,.11);
}
.cms-form-grid textarea{resize:vertical}
.cms-form-grid small{
    color:var(--cms-muted);
    font-size:.76rem;
}
.cms-editor-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    padding:8px;
    border:1px solid var(--cms-line);
    border-bottom:0;
    border-radius:11px 11px 0 0;
    background:#f6f9fd;
}
.cms-editor-toolbar button{
    padding:6px 8px;
    border:1px solid var(--cms-line);
    border-radius:8px;
    color:var(--cms-navy);
    background:#fff;
    font-size:.74rem;
    font-weight:800;
    cursor:pointer;
}
.cms-editor-toolbar+textarea{
    border-radius:0 0 11px 11px;
}
.cms-current-image{
    padding:10px;
    border:1px solid var(--cms-line);
    border-radius:12px;
    background:#f6f9fd;
}
.cms-current-image img{
    width:100%;
    max-height:220px;
    object-fit:contain;
    border-radius:8px;
    background:#fff;
}
.cms-checkbox{
    display:flex!important;
    grid-template-columns:auto 1fr!important;
    align-items:center;
    gap:8px!important;
    margin-top:9px;
}
.cms-checkbox input{width:auto}
.cms-overlay{
    position:fixed;
    inset:0;
    z-index:900;
    background:rgba(3,21,47,.45);
    opacity:0;
    pointer-events:none;
    transition:.18s ease;
}
.cms-overlay.active{
    opacity:1;
    pointer-events:auto;
}

/* Login */
.cms-login-body{
    min-height:100vh;
    padding:20px;
    display:grid;
    place-items:center;
    background:
        radial-gradient(circle at top left,rgba(247,190,53,.16),transparent 30%),
        linear-gradient(145deg,var(--cms-paper),#fff);
}
.cms-login-layout{
    width:min(980px,100%);
    display:grid;
    grid-template-columns:1fr 1fr;
    overflow:hidden;
    border:1px solid var(--cms-line);
    border-radius:25px;
    background:#fff;
    box-shadow:0 24px 65px rgba(6,31,70,.14);
}
.cms-login-brand{
    min-height:560px;
    padding:42px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    color:#fff;
    background:linear-gradient(145deg,var(--cms-navy),var(--cms-green));
}
.cms-login-brand img{
    width:150px;
    max-width:100%;
    padding:8px;
    margin-bottom:26px;
    border-radius:18px;
    background:#fff;
}
.cms-login-brand>span{
    color:var(--cms-gold-soft);
    font-size:.7rem;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.cms-login-brand h1{
    margin:8px 0 12px;
    color:#fff;
    font-size:2.5rem;
    line-height:1.05;
}
.cms-login-brand p{
    color:rgba(255,255,255,.82);
}
.cms-login-note{
    margin-top:24px;
    padding:13px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:13px;
    background:rgba(255,255,255,.08);
    font-size:.84rem;
}
.cms-login-form{
    padding:42px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.cms-login-form h2{
    margin:0;
    color:var(--cms-navy);
    font-size:2rem;
}
.cms-login-form>p{
    color:var(--cms-muted);
}
.cms-login-form form{
    display:grid;
    gap:15px;
    margin-top:20px;
}
.cms-login-form label{
    display:grid;
    gap:7px;
}
.cms-login-form label>span{
    color:var(--cms-navy);
    font-size:.86rem;
    font-weight:850;
}
.cms-login-form input{
    width:100%;
    min-height:48px;
    padding:11px 13px;
    border:1px solid var(--cms-line);
    border-radius:12px;
    outline:none;
}
.cms-login-form input:focus{
    border-color:var(--cms-gold);
    box-shadow:0 0 0 4px rgba(217,154,22,.11);
}
.password-row{position:relative}
.password-row input{padding-right:70px}
.password-row button{
    position:absolute;
    top:50%;
    right:8px;
    transform:translateY(-50%);
    padding:7px 10px;
    border:0;
    border-radius:9px;
    color:var(--cms-navy);
    background:#edf2f8;
    font-weight:850;
    cursor:pointer;
}
.cms-login-links{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:18px;
}
.cms-login-links a{
    padding:8px 11px;
    border:1px solid var(--cms-line);
    border-radius:999px;
    color:var(--cms-navy);
    font-size:.8rem;
    font-weight:800;
}
.autofill-trap{
    position:absolute;
    left:-10000px;
    width:1px;
    height:1px;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
}

@media(max-width:960px){
    .cms-sidebar{
        transform:translateX(-104%);
        transition:.2s ease;
    }
    .cms-sidebar.open{
        transform:translateX(0);
    }
    .cms-main{
        width:100%;
        margin-left:0;
    }
    .cms-menu-button{
        display:inline-flex;
    }
    .cms-editor-grid{
        grid-template-columns:1fr;
    }
}
@media(max-width:720px){
    .cms-topbar{
        padding:14px 16px;
        align-items:flex-start;
    }
    .cms-content{
        padding:16px;
    }
    .cms-stats{
        grid-template-columns:1fr;
    }
    .cms-form-grid{
        grid-template-columns:1fr;
    }
    .cms-form-grid .full{
        grid-column:auto;
    }
    .cms-login-layout{
        grid-template-columns:1fr;
    }
    .cms-login-brand{
        min-height:auto;
        padding:28px;
    }
    .cms-login-form{
        padding:28px;
    }
}
@media(max-width:480px){
    .cms-topbar{
        display:block;
    }
    .cms-topbar .cms-button{
        width:100%;
        margin-top:12px;
    }
    .cms-panel{
        padding:15px;
    }
    .cms-login-brand,
    .cms-login-form{
        padding:22px;
    }
}