/* ========================================

   FOOTNOTE — ADMIN DASHBOARD

   Modern, responsive newsroom styling

======================================== */



:root {

    --admin-navy: #14263d;

    --admin-navy-light: #203b5c;

    --admin-red: #c62828;

    --admin-red-hover: #a91f1f;

    --admin-bg: #f3f5f9;

    --admin-white: #ffffff;

    --admin-text: #202b3c;

    --admin-muted: #687589;

    --admin-border: #dce2ea;

    --admin-focus: rgba(198, 40, 40, 0.13);

    --admin-shadow: 0 18px 55px rgba(21, 38, 61, 0.09);

}



* {

    box-sizing: border-box;

}



html {

    min-height: 100%;

}



body.login-page {

    min-height: 100vh;

    margin: 0;

    padding: 36px 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        radial-gradient(

            circle at top left,

            rgba(198, 40, 40, 0.06),

            transparent 32%

        ),

        var(--admin-bg);

    color: var(--admin-text);

    font-family: Inter, "Segoe UI", Arial, sans-serif;

    -webkit-font-smoothing: antialiased;

}



/* Main dashboard card */



.login-card {

    width: 100%;

    max-width: 560px;

    padding: 38px;

    background: var(--admin-white);

    border: 1px solid rgba(220, 226, 234, 0.85);

    border-radius: 20px;

    box-shadow: var(--admin-shadow);

}



/* Brand */



.login-card h1 {

    margin: 0;

    color: var(--admin-navy);

    text-align: center;

    font-size: 30px;

    font-weight: 800;

    letter-spacing: 4px;

    line-height: 1.3;

}



.subtitle {

    margin: 8px 0 32px;

    color: var(--admin-muted);

    text-align: center;

    font-size: 13px;

    letter-spacing: 0.7px;

}



/* Dashboard headings */



#dashboardContent h2 {

    margin: 0 0 10px;

    color: var(--admin-navy);

    font-size: 25px;

    font-weight: 750;

    line-height: 1.35;

}



#dashboardContent > p {

    margin: 0 0 24px;

    color: var(--admin-muted);

    font-size: 14px;

    line-height: 1.7;

}



/* Form labels */



.login-card label {

    display: block;

    margin: 20px 0 8px;

    color: var(--admin-text);

    font-size: 13px;

    font-weight: 700;

}



/* Inputs */



.login-card input:not([type="file"]),

.login-card select,

.login-card textarea {

    display: block;

    width: 100%;

    min-height: 46px;

    padding: 12px 14px;

    border: 1px solid var(--admin-border);

    border-radius: 9px;

    background: #fff;

    color: var(--admin-text);

    font-family: inherit;

    font-size: 14px;

    transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}




.login-card textarea {

    min-height: 150px;

    resize: vertical;

    line-height: 1.7;

}



.login-card select {

    cursor: pointer;

}



.login-card input::placeholder,

.login-card textarea::placeholder {

    color: #98a2b3;

}



.login-card input:focus,

.login-card select:focus,

.login-card textarea:focus {

    outline: none;

    border-color: var(--admin-red);

    box-shadow: 0 0 0 4px var(--admin-focus);

}



/* File upload */



.photo-upload-section {

    margin-top: 24px;

    padding: 18px;

    border: 1px dashed #c8d0dc;

    border-radius: 12px;

    background: #f9fafc;

}



.photo-upload-section label {

    margin-top: 0;

}



.login-card input[type="file"] {

    display: block;

    width: 100%;

    padding: 12px;

    border: 1px solid var(--admin-border);

    border-radius: 9px;

    background: var(--admin-white);

    color: var(--admin-muted);

    font-family: inherit;

    font-size: 13px;

}



.login-card input[type="file"]::file-selector-button {

    margin-right: 12px;

    padding: 9px 12px;

    border: 0;

    border-radius: 6px;

    background: #e9edf4;

    color: var(--admin-navy);

    font-weight: 700;

    cursor: pointer;

}



.photo-upload-section > p {

    margin: 10px 0 0;

    color: var(--admin-muted);

    font-size: 12px;

    line-height: 1.6;

}



#imagePreview {

    display: block;

    width: 100%;

    max-width: 100%;

    max-height: 300px;

    margin-top: 16px;

    border: 1px solid var(--admin-border);

    border-radius: 10px;

    background: #fff;

    object-fit: contain;

}



/* Buttons */



.login-card button {

    display: block;

    width: 100%;

    min-height: 46px;

    margin-top: 14px;

    padding: 13px 18px;

    border: 1px solid transparent;

    border-radius: 9px;

    background: var(--admin-red);

    color: #fff;

    font-family: inherit;

    font-size: 14px;

    font-weight: 750;

    cursor: pointer;

    transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;

}



.login-card button:hover:not(:disabled) {

    background: var(--admin-red-hover);

    box-shadow: 0 5px 14px rgba(198, 40, 40, 0.18);

    transform: translateY(-1px);

}



.login-card button:active:not(:disabled) {

    transform: translateY(0);

}



.login-card button:focus-visible,

.back-link:focus-visible {

    outline: 3px solid rgba(198, 40, 40, 0.28);

    outline-offset: 3px;

}



.login-card button:disabled {

    opacity: 0.6;

    cursor: wait;

    transform: none;

    box-shadow: none;

}



/* Messages */



#loginMessage,

#postMessage,

#imageMessage,

#dashboardMessage {

    overflow-wrap: anywhere;

    font-size: 13px;

    line-height: 1.6;

}



#loginMessage,

#postMessage,

#imageMessage {

    min-height: 18px;

}



#dashboardMessage {

    margin: 18px 0;

    color: var(--admin-muted);

    text-align: center;

}



#loginMessage {

    color: var(--admin-red);

}



#postMessage {

    color: #18794e;

}



#imageMessage {

    color: var(--admin-muted);

}



/* Back to website */



.back-link {

    display: block;

    width: fit-content;

    margin: 24px auto 0;

    color: var(--admin-navy);

    text-align: center;

    text-decoration: none;

    font-size: 13px;

    font-weight: 650;

    transition: color 0.2s ease;

}



.back-link:hover {

    color: var(--admin-red);

}



/* Respect hidden elements even if other styles are applied */



[hidden] {

    display: none !important;

}



/* Mobile layout */



@media (max-width: 600px) {

    body.login-page {

        align-items: flex-start;

        padding: 18px 12px;

    }



    .login-card {

        max-width: 100%;

        padding: 26px 20px;

        border-radius: 15px;

    }



    .login-card h1 {

        font-size: 27px;

    }



    .subtitle {

        margin-bottom: 27px;

    }



    #dashboardContent h2 {

        font-size: 22px;

    }



    .login-card textarea {

        min-height: 135px;

    }

}



@media (prefers-reduced-motion: reduce) {

    *,

    *::before,

    *::after {

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

    }

}

/* Manage Posts Dropdown */



.manage-posts-section {

    width: 100%;

    margin-top: 28px;

    border: 1px solid #dce2ea;

    border-radius: 12px;

    overflow: hidden;

    background: #fff;

}



.manage-posts-toggle {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    width: 100%;

    margin: 0 !important;

    padding: 18px 20px !important;

    border: none !important;

    border-radius: 0 !important;

    background: #f8fafc !important;

    color: #14263d !important;

    text-align: left;

    box-shadow: none !important;

    transform: none !important;

}



.manage-posts-toggle:hover {

    background: #eef2f7 !important;

}



.manage-posts-toggle strong,

.manage-posts-toggle small {

    display: block;

}



.manage-posts-toggle strong {

    font-size: 15px;

    font-weight: 750;

}



.manage-posts-toggle small {

    margin-top: 5px;

    color: #687589;

    font-size: 12px;

    font-weight: 400;

    line-height: 1.5;

}



.manage-posts-arrow {

    flex: 0 0 32px;

    width: 32px;

    height: 32px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    background: #e8edf4;

    color: #14263d;

    font-size: 23px;

    line-height: 1;

}



.manage-posts-content {

    padding: 18px;

    border-top: 1px solid #e5eaf0;

}



.manage-posts-content[hidden] {

    display: none !important;

}



.managed-post-card {

    padding: 16px;

    margin-top: 12px;

    border: 1px solid #e0e6ee;

    border-radius: 10px;

    background: #fff;

}



.managed-post-card h3 {

    margin: 0 0 8px;

    color: #14263d;

    font-size: 15px;

    line-height: 1.5;

    overflow-wrap: anywhere;

}



.managed-post-card p {

    color: #687589;

    font-size: 13px;

    line-height: 1.5;

    overflow-wrap: anywhere;

}



.managed-post-card button {

    width: auto;

    min-width: 90px;

    margin: 8px 8px 0 0;

    padding: 10px 16px;

}



.managed-post-card .delete-post-button {

    background: #fff;

    border: 1px solid #c62828;

    color: #c62828;

}



.managed-post-card .delete-post-button:hover {

    background: #fff0f0 !important;

    color: #a91f1f !important;

    box-shadow: none;

}



.post-status {

    display: inline-block;

    width: fit-content;

    padding: 4px 9px;

    border-radius: 20px;

    font-size: 11px !important;

    font-weight: 700;

}



.post-status-published {

    background: #e7f7ee;

    color: #18794e !important;

}



.post-status-draft {

    background: #fff4d6;

    color: #946200 !important;

}

/* Manage Posts Search and Filters */

.manage-posts-filters {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr;

    gap: 12px;

    margin-bottom: 18px;

}



.manage-posts-filters input,

.manage-posts-filters select {

    width: 100%;

    min-width: 0;

    padding: 12px 14px;

    border: 1px solid #dce2ea;

    border-radius: 8px;

    background: #fff;

    color: #14263d;

    font-size: 14px;

    outline: none;

}



.manage-posts-filters input:focus,

.manage-posts-filters select:focus {

    border-color: #315b91;

    box-shadow: 0 0 0 3px rgba(49, 91, 145, 0.1);

}



@media (max-width: 650px) {

    .manage-posts-filters {

        grid-template-columns: 1fr;

    }

}



/* ==========================================

   FOOTNOTE — EDITORIAL COMMAND CENTRE LOGIN

   Premium Login Page

========================================== */



body.login-page {

    min-height: 100vh;

    margin: 0;

    padding: 35px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;



    background:

        radial-gradient(

            ellipse at 15% 15%,

            rgba(220, 38, 38, 0.16),

            transparent 38%

        ),

        radial-gradient(

            ellipse at 90% 85%,

            rgba(39, 83, 130, 0.22),

            transparent 40%

        ),

        linear-gradient(135deg, #080f1c, #101d30 55%, #091321);



    color: #ffffff;

    font-family: 'Inter', sans-serif;

    position: relative;

    overflow-x: hidden;

}



/* Subtle background decoration */



body.login-page::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    opacity: 0.13;



    background-image:

        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),

        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);



    background-size: 45px 45px;

}



/* MAIN LOGIN CARD */



body.login-page .login-card {

    position: relative;

    z-index: 1;



    width: 100%;

    max-width: 490px;

    padding: 42px 44px 30px;



    background: rgba(19, 32, 51, 0.96);

    border: 1px solid rgba(255,255,255,.10);

    border-top: 3px solid #dc2626;

    border-radius: 17px;



    box-shadow:

        0 30px 90px rgba(0,0,0,.38),

        0 0 40px rgba(220,38,38,.045);



    backdrop-filter: blur(15px);

}



/* BRAND */



.login-brand {

    text-align: center;

    margin-bottom: 38px;

}



.login-logo {

    display: inline-block;

    color: #ffffff;

    text-decoration: none;



    font-size: 32px;

    font-weight: 800;

    letter-spacing: -1.8px;

}



.login-logo span {

    color: #ef4444;

}



.login-brand-line {

    width: 42px;

    height: 3px;

    margin: 13px auto;

    background: #dc2626;

    border-radius: 5px;

}



.login-brand > p {

    margin: 0;

    color: #8fa0b6;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.7px;

}



/* LOGIN INTRO */



.login-eyebrow {

    display: flex;

    align-items: center;

    gap: 9px;



    color: #ff737b;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.4px;

    margin-bottom: 17px;

}



.login-status-dot {

    width: 7px;

    height: 7px;

    background: #22c55e;

    border-radius: 50%;

    box-shadow: 0 0 10px rgba(34,197,94,.55);

}



.login-content h1 {

    margin: 0 0 12px;

    color: #ffffff;



    font-family: 'Playfair Display', serif;

    font-size: clamp(34px, 6vw, 43px);

    font-weight: 700;

    line-height: 1.2;

}



.login-content h1 span {

    color: #ff5964;

}



.login-description {

    margin: 0 0 30px;

    color: #aab8ca;

    font-size: 13px;

    line-height: 1.9;

}



/* FORM FIELDS */



.login-field {

    margin-bottom: 21px;

}



.login-field label {

    display: block;

    margin: 0 0 9px;



    color: #d8e0eb;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.2px;

}



body.login-page .login-card .login-field input {

    width: 100%;

    min-height: 52px;

    padding: 0 16px;



    background: #0c1727;

    border: 1px solid #34445b;

    border-radius: 8px;



    color: #ffffff;

    font-family: 'Inter', sans-serif;

    font-size: 13px;



    transition: border-color .2s, box-shadow .2s;

}



body.login-page .login-card .login-field input::placeholder {

    color: #718198;

}



body.login-page .login-card .login-field input:focus {

    outline: none;

    border-color: #ef4444;

    box-shadow: 0 0 0 3px rgba(220,38,38,.15);

}



/* LOGIN BUTTON */



body.login-page .login-card #loginButton {

    display: flex;

    align-items: center;

    justify-content: space-between;



    width: 100%;

    min-height: 53px;

    margin-top: 27px;

    padding: 0 20px;



    background: linear-gradient(110deg, #dc2626, #b91c1c);

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 8px;



    color: #ffffff;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;



    cursor: pointer;

    transition: transform .2s, box-shadow .2s, background .2s;

}



body.login-page .login-card #loginButton:hover:not(:disabled) {

    background: linear-gradient(110deg, #ef4444, #c21f1f);

    transform: translateY(-2px);

    box-shadow: 0 9px 22px rgba(220,38,38,.25);

}



.login-button-arrow {

    font-size: 21px;

    font-weight: 400;

}



body.login-page .login-card #loginButton:disabled {

    opacity: .65;

    cursor: wait;

    transform: none;

}



/* LOGIN MESSAGE */



body.login-page #loginMessage {

    min-height: 20px;

    margin: 13px 0 0;

    color: #ff8585;

    font-size: 12px;

    line-height: 1.6;

    overflow-wrap: anywhere;

}



/* SECURITY NOTE */



.login-security-note {

    margin-top: 25px;

    padding-top: 19px;



    border-top: 1px solid rgba(255,255,255,.09);



    color: #8494aa;

    font-size: 10px;

    line-height: 1.7;

    text-align: center;

}



.login-security-note span {

    color: #22c55e;

    margin-right: 5px;

}



/* CARD FOOTER */



.login-footer {

    display: flex;

    justify-content: space-between;

    gap: 12px;



    margin-top: 28px;

    padding-top: 17px;



    border-top: 1px solid rgba(255,255,255,.09);



    color: #75869c;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.1px;

}



/* BACK TO WEBSITE */



body.login-page .back-link {

    position: relative;

    z-index: 1;



    margin: 24px auto 0;

    color: #aab8ca;

    font-size: 12px;

    font-weight: 600;

    text-decoration: none;

    transition: color .2s;

}



body.login-page .back-link:hover {

    color: #ff5964;

}



/* MOBILE RESPONSIVE */



@media (max-width: 550px) {

    body.login-page {

        padding: 25px 14px;

    }



    body.login-page .login-card {

        padding: 32px 23px 25px;

        border-radius: 13px;

    }



    .login-brand {

        margin-bottom: 32px;

    }



    .login-logo {

        font-size: 29px;

    }



    .login-description {

        font-size: 12px;

    }



    .login-footer {

        font-size: 8px;

        letter-spacing: .7px;

    }

}



@media (prefers-reduced-motion: reduce) {

    body.login-page *,

    body.login-page *::before,

    body.login-page *::after {

        transition: none !important;

        animation: none !important;

    }

}



/* FOOTNOTE - Wide Editorial Login Layout */

body.auth-login-page .login-card {

    width: min(1050px, calc(100% - 48px));

    max-width: 1050px;

    min-height: 560px;

    padding: 65px 70px;

    display: grid;

    grid-template-columns: 0.85fr 1.15fr;

    align-items: center;

    column-gap: 75px;

    row-gap: 25px;

    box-sizing: border-box;

}



/* Branding - Left Side */

body.auth-login-page .login-brand {

    grid-column: 1;

    grid-row: 1 / span 3;

    text-align: left;

    align-self: center;

}



body.auth-login-page .login-brand .login-logo {

    font-size: 48px;

}



body.auth-login-page .login-brand-line {

    margin-left: 0;

}



/* Login Form - Right Side */

body.auth-login-page .login-content {

    grid-column: 2;

    grid-row: 1;

    width: 100%;

}



body.auth-login-page .login-content h1 {

    font-size: clamp(42px, 5vw, 58px);

    margin-bottom: 15px;

}



body.auth-login-page .login-content > p {

    max-width: 480px;

    line-height: 1.8;

}



body.auth-login-page .login-content form {

    width: 100%;

}



body.auth-login-page .login-content input {

    width: 100%;

    box-sizing: border-box;

}



body.auth-login-page .login-content button {

    width: 100%;

}



/* Footer and Security */

body.auth-login-page .login-security-note {

    grid-column: 2;

}



body.auth-login-page .login-footer {

    grid-column: 1 / -1;

}



body.auth-login-page .back-link {

    grid-column: 1 / -1;

}



/* Tablet and Mobile */

@media (max-width: 750px) {

    body.auth-login-page .login-card {

        width: min(560px, calc(100% - 30px));

        min-height: auto;

        padding: 38px 28px;

        display: flex;

        flex-direction: column;

        gap: 25px;

    }



    body.auth-login-page .login-brand {

        text-align: center;

    }



    body.auth-login-page .login-brand-line {

        margin-left: auto;

        margin-right: auto;

    }



    body.auth-login-page .login-brand .login-logo {

        font-size: 38px;

    }



    body.auth-login-page .login-content {

        width: 100%;

    }



    body.auth-login-page .login-content h1 {

        font-size: 40px;

    }



    body.auth-login-page .login-security-note,

    body.auth-login-page .login-footer,

    body.auth-login-page .back-link {

        width: 100%;

        text-align: center;

    }

}



/* FOOTNOTE - Ultra Wide Compact Login */

body.auth-login-page .login-card {

    width: min(1400px, calc(100% - 40px));

    max-width: 1400px;

    min-height: 0;

    padding: 30px 85px;

    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    align-items: center;

    column-gap: 110px;

    row-gap: 8px;

    box-sizing: border-box;

}



body.auth-login-page .login-brand .login-logo {

    font-size: 52px;

}



body.auth-login-page .login-content h1 {

    font-size: 46px;

    margin: 5px 0 8px;

}



body.auth-login-page .login-content > p {

    margin: 0 0 14px;

    line-height: 1.5;

}



body.auth-login-page .login-content form {

    margin-top: 10px;

}



body.auth-login-page .login-content .login-field {

    margin-bottom: 10px;

}



body.auth-login-page .login-content input {

    height: 48px;

    padding: 10px 16px;

}



body.auth-login-page .login-content button {

    min-height: 52px;

    margin-top: 5px;

}



body.auth-login-page .login-security-note,

body.auth-login-page .login-footer {

    margin-top: 8px;

}



@media (max-width: 750px) {

    body.auth-login-page .login-card {

        width: calc(100% - 30px);

        padding: 28px 22px;

        display: flex;

        flex-direction: column;

        gap: 18px;

    }



    body.auth-login-page .login-content h1 {

        font-size: 36px;

    }

}


/* ==========================================================
   FOOTNOTE NEWSROOM OS — ADMIN DASHBOARD + WORKSPACES
   Scoped to .admin-page so the existing login page is untouched.
========================================================== */
body.admin-page {
  --os-bg:#0b1422; --os-panel:#111e30; --os-panel-2:#17263a;
  --os-border:#2a3b52; --os-text:#f4f7fb; --os-muted:#9aabc0;
  --os-red:#d62932; --os-red-dark:#a91f28;
  min-height:100vh; margin:0; padding:0; display:block;
  background:radial-gradient(ellipse at 12% 0%,rgba(198,40,40,.12),transparent 32%),linear-gradient(145deg,#091321,#101d30 55%,#0a1422);
  color:var(--os-text); font-family:Inter,Arial,sans-serif;
}
body.admin-page.modal-open { overflow:hidden; }
.admin-shell { width:min(1440px,100%); margin:auto; padding:0 38px; }
.admin-topbar { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid rgba(255,255,255,.09); }
.admin-brand { display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; }
.admin-brand-mark { width:39px;height:39px;display:grid;place-items:center;border-radius:10px;background:var(--os-red);font-family:"Playfair Display",serif;font-size:25px;font-weight:800; }
.admin-brand strong { display:block;font-size:19px;letter-spacing:-.7px; }
.admin-brand strong span { color:#ff5964; }
.admin-brand small { display:block;margin-top:3px;color:#8193aa;font-size:8px;font-weight:800;letter-spacing:1.6px; }
.admin-top-actions { display:flex;align-items:center;gap:20px; }
.admin-online { color:#b6c5d6;font-size:10px;font-weight:800;letter-spacing:1px; }
.admin-online i,.admin-live-dot { display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px #22c55e; }
.admin-site-link { color:#aabbd0;text-decoration:none;font-size:12px;font-weight:600; }
.admin-logout { width:auto;min-height:36px;margin:0;padding:8px 14px;border:1px solid #43536a;border-radius:8px;background:#17263a;color:#fff;font-size:11px; }
.admin-main { padding:46px 0 25px; }
.admin-welcome { display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px; }
.admin-kicker { margin:0 0 9px;color:#ed737a;font-size:9px;font-weight:800;letter-spacing:1.8px; }
.admin-welcome h1,.workspace-modal-header h2 { margin:0;color:#fff;font-family:"Playfair Display",serif;font-size:clamp(34px,4vw,48px);line-height:1.12; }
.admin-welcome h1 span,.workspace-modal-header h2 span { color:#ff5964; }
.admin-subtitle,.workspace-modal-header p:last-child { margin:10px 0 0;color:var(--os-muted);font-size:13px;line-height:1.6; }
.admin-date-chip { padding:10px 13px;border:1px solid #30435b;border-radius:30px;color:#b8c7d8;font-size:10px;font-weight:700;white-space:nowrap; }
.admin-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:42px; }
.admin-stat { display:flex;align-items:center;gap:15px;padding:19px 20px;border:1px solid var(--os-border);border-radius:12px;background:linear-gradient(145deg,#17263a,#111e30); }
.stat-icon { width:39px;height:39px;display:grid;place-items:center;border-radius:10px;background:#263950;color:#f3b5b9;font-size:20px; }
.admin-stat strong { display:block;color:#fff;font-size:25px;line-height:1.1; }
.admin-stat small { display:block;margin-top:5px;color:#8fa2b9;font-size:10px; }
.admin-section { margin:0 0 39px; }
.admin-section-heading { display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:16px; }
.admin-section-heading h2 { margin:0;color:#f6f8fb;font-size:19px;letter-spacing:-.3px; }
.admin-section-note { color:#8093aa;font-size:10px; }
.category-dashboard-grid { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px; }
.category-dashboard-card { min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:15px 13px;border:1px solid #2a3d55;border-radius:11px;background:#142338;color:#fff;text-align:left;cursor:pointer;transition:.2s ease; }
.category-dashboard-card:hover { transform:translateY(-3px);border-color:#b94a52;background:#1b2d44; }
.category-dashboard-card.category-all { background:#40212d;border-color:#713440; }
.category-card-icon { color:#ff8a91;font-size:20px; }
.category-card-name { color:#d6e0eb;font-size:11px;font-weight:700; }
.category-dashboard-card strong { color:#fff;font-size:25px; }
.category-dashboard-card small { color:#879bb2;font-size:8px;font-weight:800;letter-spacing:.7px; }
.workspace-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.workspace-card { min-height:205px;display:flex;flex-direction:column;align-items:flex-start;padding:24px;border:1px solid transparent;border-radius:15px;color:#fff;text-align:left;cursor:pointer;transition:transform .2s,box-shadow .2s; }
.workspace-card:hover { transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.22); }
.workspace-create { background:linear-gradient(135deg,#782832,#4c202b);border-color:#8d3c46; }
.workspace-library { background:linear-gradient(135deg,#24496d,#172f4a);border-color:#3b6289; }
.workspace-icon { width:43px;height:43px;display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.13);font-size:26px; }
.workspace-eyebrow { margin-top:17px;color:#f4bfc3;font-size:8px;font-weight:800;letter-spacing:1.4px; }
.workspace-library .workspace-eyebrow { color:#c2d7eb; }
.workspace-card strong { margin-top:5px;font-size:22px; }
.workspace-card small { margin-top:7px;color:#e2d3d5;font-size:11px;line-height:1.5; }
.workspace-library small { color:#d0deeb; }
.workspace-action { display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:auto;padding-top:17px;color:#fff;font-size:9px;font-weight:800;letter-spacing:1px; }
.workspace-action b { font-size:17px; }
.audience-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.audience-card { display:grid;grid-template-columns:42px 1fr auto 20px;align-items:center;gap:13px;padding:17px;border:1px solid #2a3b52;border-radius:11px;background:#142338;color:#fff;text-align:left;cursor:pointer; }
.audience-card:hover { border-color:#647b98;background:#192b42; }
.audience-icon { width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:#263a52;color:#d5e2ef;font-size:20px; }
.audience-card strong,.audience-card small { display:block; }
.audience-card strong { font-size:12px; }
.audience-card small { margin-top:5px;color:#8fa2b9;font-size:10px; }
.audience-card>b { min-width:28px;padding:5px 7px;border-radius:20px;background:#273b53;color:#fff;text-align:center;font-size:11px; }
.audience-arrow { color:#ef777e; }
.admin-footer { display:flex;justify-content:space-between;gap:15px;padding:20px 0 28px;border-top:1px solid rgba(255,255,255,.08);color:#71849c;font-size:8px;font-weight:700;letter-spacing:1.2px; }
.dashboard-loading { width:min(600px,calc(100% - 40px));margin:15vh auto;padding:25px;border:1px solid #2a3b52;border-radius:12px;background:#142338;color:#cbd7e5;text-align:center; }
.workspace-modal { position:fixed;z-index:1000;inset:0;display:flex;flex-direction:column;overflow:auto;background:#0c1625;color:#fff;padding:0 max(24px,calc((100vw - 1320px)/2)); }
.workspace-modal[hidden] { display:none !important; }
.workspace-modal-header { position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:25px;padding:27px 0 22px;border-bottom:1px solid #2b3b51;background:rgba(12,22,37,.97);backdrop-filter:blur(14px); }
.workspace-modal-header h2 { font-size:34px; }
.workspace-modal-header p:last-child { margin-top:6px; }
.modal-close { flex:0 0 44px;width:44px;height:44px;margin:0;border:1px solid #40536b;border-radius:50%;background:#1a2a3e;color:#fff;font-size:28px;line-height:1; }
.modal-close:hover { background:#9f2630; }
.workspace-modal-body { width:100%;max-width:1320px;margin:0 auto;padding:25px 0 50px; }
.editor-form { display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.8fr);gap:22px; }
.editor-main-fields,.editor-side-fields { display:flex;flex-direction:column;gap:10px; }
body.admin-page .workspace-modal label { display:block;margin:13px 0 0;color:#b9c8d9;font-size:9px;font-weight:800;letter-spacing:1.1px; }
body.admin-page .workspace-modal input:not([type=checkbox]):not([type=file]),body.admin-page .workspace-modal select,body.admin-page .workspace-modal textarea { width:100%;min-height:47px;padding:13px 14px;border:1px solid #34465e;border-radius:8px;background:#111f31;color:#f4f7fb;font:13px Inter,Arial,sans-serif; }
body.admin-page .workspace-modal textarea { min-height:220px;resize:vertical;line-height:1.7; }
body.admin-page .workspace-modal input:focus,body.admin-page .workspace-modal select:focus,body.admin-page .workspace-modal textarea:focus { outline:none;border-color:#e44b55;box-shadow:0 0 0 3px rgba(220,38,38,.14); }
.editor-option-card { padding:18px;border:1px solid #2b3d54;border-radius:11px;background:#142338; }
.editor-option-card .admin-kicker { margin-bottom:13px; }
.trending-option { display:flex !important;align-items:flex-start;gap:12px;margin:0 !important;letter-spacing:0 !important;cursor:pointer; }
.trending-option input { width:19px;height:19px;accent-color:#df343d;flex:0 0 auto;margin:2px 0 0; }
.trending-option strong,.trending-option small { display:block; }
.trending-option strong { color:#fff;font-size:12px;letter-spacing:0; }
.trending-option small { margin-top:6px;color:#8fa2b9;font-size:10px;font-weight:400;line-height:1.5; }
.photo-upload-section { margin:0;padding:18px;border:1px dashed #40536c;border-radius:11px;background:#142338; }
.photo-upload-section>p { color:#8fa2b9;font-size:10px;line-height:1.5; }
.image-preview-grid { display:flex;flex-wrap:wrap;gap:9px;margin-top:12px; }
.image-preview-grid img { width:100px;height:82px;object-fit:cover;border-radius:7px;border:1px solid #40536c; }
.editor-form-footer { grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:18px;padding-top:17px;border-top:1px solid #2b3d54; }
.editor-form-footer p { color:#b8c8d9;font-size:12px; }
.post-form-actions,.edit-post-actions,.managed-post-actions { display:flex;flex-wrap:wrap;gap:9px; }
body.admin-page .workspace-modal button.button-primary,body.admin-page .workspace-modal button.button-secondary,body.admin-page .workspace-modal button.button-danger { width:auto;min-height:39px;margin:0;padding:10px 15px;border-radius:7px;font-size:11px;font-weight:750; }
body.admin-page .workspace-modal button.button-primary { background:#d12b34;color:#fff; }
body.admin-page .workspace-modal button.button-secondary { border:1px solid #465a73;background:#1b2b40;color:#e3ebf4; }
body.admin-page .workspace-modal button.button-danger { border:1px solid #8c3a42;background:#3a2029;color:#ffb7bb; }
body.admin-page .workspace-modal button:disabled { opacity:.55;cursor:not-allowed; }
.workspace-status { margin-bottom:15px;color:#a9bbce;font-size:12px; }
.manage-posts-filters { display:grid;grid-template-columns:2fr 1fr 1fr;gap:11px;margin-bottom:18px; }
.managed-post-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.managed-post-card { display:grid;grid-template-columns:115px 1fr;gap:14px;min-width:0;padding:13px;border:1px solid #2a3d54;border-radius:11px;background:#142338; }
.managed-post-card>img { width:115px;height:105px;object-fit:cover;border-radius:7px;background:#0b1422; }
.managed-post-details { min-width:0; }
.managed-post-card h3 { margin:0 0 6px;color:#fff;font-size:13px;line-height:1.45; }
.managed-post-card p { margin:0 0 9px;color:#91a5bc;font-size:10px; }
.managed-post-actions { margin-top:12px; }
.post-status { display:inline-block;padding:4px 8px;border-radius:20px;font-size:8px;font-weight:800;letter-spacing:.6px; }
.post-status-published { background:#163e34;color:#8ce0b9; }
.post-status-draft { background:#49391c;color:#f4d28a; }
.empty-state { grid-column:1/-1;padding:30px;border:1px dashed #40536c;border-radius:10px;color:#9aabc0;text-align:center; }
.audience-list { display:grid;gap:12px; }
.audience-message-card,.subscriber-row { padding:17px;border:1px solid #2b3d54;border-radius:10px;background:#142338; }
.audience-message-top { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.audience-message-card strong { color:#fff;font-size:13px; }
.audience-message-card h3 { margin:12px 0 7px;color:#eaf0f7;font-size:14px; }
.audience-message-card a,.subscriber-row a { color:#9fc4e8;font-size:12px; }
.audience-message-card p { color:#c3cfdd;font-size:12px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere; }
.audience-message-card small,.subscriber-row small { display:block;margin:10px 0;color:#8498af;font-size:10px; }
.unread-badge,.read-badge { padding:5px 8px;border-radius:20px;font-size:8px;font-weight:800; }
.unread-badge { background:#51242d;color:#ffadb2; }
.read-badge { background:#1b3c36;color:#9be0c1; }
.subscriber-row { display:grid;grid-template-columns:1fr 140px auto;align-items:center;gap:15px; }
.subscriber-row a { overflow-wrap:anywhere; }
.edit-post-modal { position:fixed;z-index:1200;inset:0;display:grid;place-items:center;padding:20px;background:rgba(2,8,16,.82); }
.edit-post-modal[hidden] { display:none !important; }
.edit-post-panel { width:min(720px,100%);max-height:90vh;overflow:auto;padding:25px;border:1px solid #3a4c63;border-radius:14px;background:#111f31;color:#fff; }
.edit-post-header { display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:18px; }
.edit-post-header h2 { margin:0;color:#fff;font-size:22px; }
.edit-post-header p { color:#91a5bc;font-size:11px; }
.edit-post-close { width:36px;height:36px;margin:0;border:1px solid #465a73;border-radius:50%;background:#1b2b40;color:#fff;font-size:23px; }
.edit-post-panel label { margin:12px 0 6px !important; }
.edit-post-panel img { display:block;max-width:100%;max-height:180px;margin-top:12px;border-radius:8px; }
.edit-post-actions { justify-content:flex-end;margin-top:18px; }
body.admin-page [hidden] { display:none !important; }
@media(max-width:1100px) {
  .category-dashboard-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .admin-shell { padding:0 18px; }
  .admin-topbar { align-items:flex-start;padding:17px 0; }
  .admin-top-actions { flex-wrap:wrap;justify-content:flex-end;gap:10px; }
  .admin-site-link { display:none; }
  .admin-welcome { align-items:flex-start;flex-direction:column; }
  .admin-stats { grid-template-columns:repeat(2,1fr); }
  .category-dashboard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .workspace-grid,.audience-grid { grid-template-columns:1fr; }
  .workspace-card { min-height:185px; }
  .admin-section-heading { align-items:flex-start;flex-direction:column;gap:7px; }
  .workspace-modal { padding:0 18px; }
  .workspace-modal-header { padding:20px 0 16px; }
  .workspace-modal-header h2 { font-size:27px; }
  .editor-form { grid-template-columns:1fr; }
  .editor-form-footer { align-items:stretch;flex-direction:column; }
  .post-form-actions { justify-content:flex-end; }
  .manage-posts-filters { grid-template-columns:1fr; }
  .managed-post-grid { grid-template-columns:1fr; }
  .subscriber-row { grid-template-columns:1fr auto; }
  .subscriber-row small { grid-column:1;grid-row:2; }
  .subscriber-row button { grid-column:2;grid-row:1/3; }
  .admin-footer { flex-direction:column; }
}
@media(max-width:430px) {
  .admin-online { display:none; }
  .admin-brand strong { font-size:16px; }
  .admin-stat { padding:13px;gap:10px; }
  .admin-stat strong { font-size:21px; }
  .managed-post-card { grid-template-columns:82px 1fr;padding:10px;gap:10px; }
  .managed-post-card>img { width:82px;height:82px; }
  .managed-post-actions button { padding:8px 9px !important;font-size:10px !important; }
}

/* =========================================
   FOOTNOTE PREMIUM FULL-SCREEN EDITOR
========================================= */

#editPostModal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 0 !important;
    display: grid;
    place-items: stretch;
    background: rgba(3, 9, 19, 0.94);
    backdrop-filter: blur(14px);
    overflow: hidden;
}

#editPostModal[hidden] {
    display: none !important;
}

#editPostModal .edit-post-panel {
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(24px, 4vw, 58px);
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(circle at top right, rgba(40, 91, 145, .22), transparent 38%),
        linear-gradient(145deg, #14263d, #091522 75%);
    color: #f5f7fb;
    box-shadow: none;
}

#editPostModal .edit-post-header {
    max-width: 1250px;
    margin: 0 auto 38px;
    padding-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

#editPostModal .edit-post-header h2 {
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    letter-spacing: -1px;
}

#editPostModal .edit-post-header p {
    margin: 0;
    color: #9aacc2;
    font-size: 15px;
}

#editPostModal .edit-post-close {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: 1px solid #405570;
    border-radius: 50%;
    background: #1c3049;
    color: #fff;
    font-size: 27px;
    cursor: pointer;
    transition: .2s ease;
}

#editPostModal .edit-post-close:hover {
    background: #c62828;
    border-color: #c62828;
    transform: rotate(90deg);
}

#editPostForm {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 28px;
    align-content: start;
}

#editPostForm label {
    display: block;
    margin: 12px 0 0;
    color: #dce6f2;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
}

#editPostTitle,
#editPostCategory,
#editPostDescription,
#editPostImage {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 15px 17px;
    border: 1px solid #354b65;
    border-radius: 11px;
    outline: none;
    background: #0c1b2d;
    color: #f5f7fb;
    font-family: inherit;
    font-size: 15px;
    transition: .2s ease;
}

#editPostTitle,
#editPostCategory {
    min-height: 54px;
}

#editPostDescription {
    min-height: 260px;
    resize: vertical;
    line-height: 1.8;
}

#editPostTitle:focus,
#editPostCategory:focus,
#editPostDescription:focus,
#editPostImage:focus {
    border-color: #e04444;
    box-shadow: 0 0 0 4px rgba(224, 68, 68, .13);
}

#editPostForm label[for="editPostDescription"],
#editPostDescription,
#editPostForm label[for="editPostImage"],
#editPostImage,
#editPostImagePreview,
#editPostImageMessage,
#editPostMessage,
#editPostForm .edit-post-actions {
    grid-column: 1 / -1;
}

#editPostImage {
    padding: 18px;
    border: 1px dashed #526984;
    background: rgba(255,255,255,.035);
}

#editPostImage::file-selector-button {
    margin-right: 15px;
    padding: 11px 17px;
    border: 0;
    border-radius: 8px;
    background: #263e59;
    color: white;
    font-weight: 700;
    cursor: pointer;
}

#editPostImagePreview {
    display: block;
    max-width: min(100%, 650px) !important;
    max-height: 300px !important;
    margin-top: 10px !important;
    border: 1px solid #354b65;
    border-radius: 12px !important;
    object-fit: contain;
    background: #091522;
}

#editPostImagePreview[hidden] {
    display: none !important;
}

#editPostImageMessage,
#editPostMessage {
    margin: 0;
    color: #9aacc2;
    font-size: 13px;
    line-height: 1.6;
}

#editPostForm .edit-post-actions {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 20px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.12);
}

#editPostForm .edit-post-actions button {
    width: auto;
    min-width: 155px;
    min-height: 49px;
    margin: 0;
    padding: 13px 24px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
    transition: .2s ease;
}

#editPostForm #cancelEditPost {
    border-color: #526984;
    background: #1c3049;
}

#editPostForm #cancelEditPost:hover {
    background: #304862;
}

#editPostForm #saveEditPost {
    background: #c62828;
    box-shadow: 0 6px 18px rgba(198,40,40,.2);
}

#editPostForm #saveEditPost:hover {
    background: #e03939;
    transform: translateY(-2px);
}

#editPostForm button:disabled {
    opacity: .6;
    cursor: wait;
}

/* Mobile */
@media (max-width: 700px) {
    #editPostModal .edit-post-panel {
        padding: 22px 17px;
    }

    #editPostModal .edit-post-header {
        margin-bottom: 22px;
    }

    #editPostForm {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #editPostForm > * {
        grid-column: 1 / -1;
    }

    #editPostDescription {
        min-height: 220px;
    }

    #editPostForm .edit-post-actions {
        flex-direction: column-reverse;
    }

    #editPostForm .edit-post-actions button {
        width: 100%;
    }
}

/* =====================================
   MANAGE POSTS - UNIFORM PREMIUM CARDS
===================================== */

#managePostsList .managed-post-card {
    display: grid;
    grid-template-columns: 155px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    min-height: 180px;
    padding: 17px;
    margin: 14px 0;
    border: 1px solid #344a64;
    border-radius: 15px;
    background: #14263d;
    color: #f5f7fb;
    box-shadow: 0 5px 20px rgba(0,0,0,.12);
    transition: border-color .2s ease, transform .2s ease;
}

#managePostsList .managed-post-card:hover {
    border-color: #607c9d;
    transform: translateY(-2px);
}

/* Uploaded photo */
#managePostsList .managed-post-card > img {
    grid-column: 1;
    grid-row: 1;
    display: block;
    width: 155px;
    height: 142px;
    margin: 0;
    border-radius: 11px;
    object-fit: cover;
    background: #0b1929;
}

/* Premium photo placeholder when no image exists */
#managePostsList .managed-post-card:not(:has(> img))::before {
    content: "FOOTNOTE";
    grid-column: 1;
    grid-row: 1;
    width: 155px;
    height: 142px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #3a526e;
    border-radius: 11px;
    background:
        radial-gradient(circle at 50% 35%, rgba(198,40,40,.24), transparent 45%),
        linear-gradient(145deg, #203b5c, #091522);
    color: #dbe7f5;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 2px;
}

/* Story details */
#managePostsList .managed-post-details {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

#managePostsList .managed-post-details h3 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 750;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

#managePostsList .managed-post-details p {
    margin: 0;
    color: #9aacc2;
    font-size: 13px;
    line-height: 1.5;
}

#managePostsList .managed-post-details .post-status {
    margin: 0;
}

/* Keep all action buttons in one row */
#managePostsList .managed-post-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
}

#managePostsList .managed-post-actions button {
    width: auto;
    min-width: 105px;
    min-height: 43px;
    margin: 0;
    padding: 10px 17px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
}

/* Mobile */
@media (max-width: 600px) {
    #managePostsList .managed-post-card {
        grid-template-columns: 105px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
    }

    #managePostsList .managed-post-card > img,
    #managePostsList .managed-post-card:not(:has(> img))::before {
        width: 105px;
        height: 110px;
    }

    #managePostsList .managed-post-details h3 {
        font-size: 15px;
    }

    #managePostsList .managed-post-actions button {
        min-width: 0;
        padding: 9px 11px;
        font-size: 12px;
    }
}