/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*                     ZS.COM STYLESHEET                         */
/*                   AUTHOR : BURKE I. ZIZZI                     */
/*                    FILE DATE: 03/03/2026                      */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*   1) FONTS          6) LOGIN ROW       11) PAGE FOOTER        */
/*   2) VARIABLES      7) SLIDE BAR       12) CSS ANIMATIONS     */
/*   3) BASE RESET     8) PG. LAYOUT      13) MOBILE DESIGN      */
/*   4) NAV RAIL       9) DYNAMIC CARDS   14) STATIC CONTENT     */
/*   5) HEADER        10) RIGHT SIDEBAR   17) ALTCHA WIDGET      */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*          1) FONTS FROM LOCAL FILES FOR CUSTOM FONTS           */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

/*===============================================================*/
/*          Font for the ZiZZiSTUDiO CSS-based logo              */
/*===============================================================*/

@font-face {

    font-family: 'ZIZZISTUDIOLOGO';
    src: url('0_FONTS/LOGO_FONT.woff2') format('woff2'),
         url('0_FONTS/LOGO_FONT.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*             2) VARIABLES FOR GLOBAL CSS STYLES                */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

:root {

    /* The main website background. */
    --BG-DARK:          #0A0A0A;
    /* The slide-out sidebar background. */
    --BG-SIDEBAR:       #111111;
    /* The primary site-wide accent color. */
    --NEON-GREEN:       #00FF00;
    /* The site-wide default text color. */
    --TEXT-MAIN:        #E0E0E0;
    /* The secondary/label text color. */
    --TEXT-MUTED:       #999;
    /* The width of the fixed left rail nav. */
    --RAIL-WIDTH:       60px;
    /* Mobile: header height + horizontal nav strip height */
    --MOBILE-HEADER-H:  50px;
    --MOBILE-STRIP-H:   44px;
    --MOBILE-TOP-OFFSET: calc(var(--MOBILE-HEADER-H) + var(--MOBILE-STRIP-H));
    /* The width of the slide-out sidebar. */
    --SIDE-WIDTH:       280px;
    /* The default transition duration for the sidebar slide. */
    --TRANSITION-SPEED: 0.4s;
    /* Fluid base font size — scales between 1rem and 1.1rem. */
    --FLUID-TYPE:       clamp(1rem, 0.9rem + 0.5vw, 1.1rem);
}

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*           3) BASE RESET FOR KEEPING PAGE IN-TACT              */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

*, *::before, *::after {

    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/*===============================================================*/
/*       Full height flex column + Sticky footer to bottom       */
/*===============================================================*/

HTML {
    overflow-x: hidden;
}

BODY {

    background-color: var(--BG-DARK);
    color: var(--TEXT-MAIN);
    font-family: 'Courier New', monospace;
    font-size: var(--FLUID-TYPE);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    /* Offset for fixed rail */
    padding-left: var(--RAIL-WIDTH);
    -webkit-font-smoothing: antialiased;
}

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*             4) VERTICAL NAVIGATION RAIL STYLES                */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

/*===============================================================*/
/*      Fixed left strip, sits above content at z-index 1000     */  
/*===============================================================*/

.VERTICAL_RAIL {

    position: fixed;
    top: 0;
    left: 0;
    width: var(--RAIL-WIDTH);
    height: fit-content;
    background: #0D0D0D;
    border-right: 1px solid rgba(0, 255, 0, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 0;
    z-index: 1000;
    gap: 0.1rem;
    /* Allowing hover labels to escape. */
    overflow: visible;
}

/*===============================================================*/
/*         Icon buttons, activate styles on interactions         */
/*===============================================================*/

.VERTICAL_RAIL_ITEM {

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: #444;
    text-decoration: none;
    border: 1px solid transparent;
    transition: color 0.2s, border-color 0.2s,
    box-shadow 0.2s, background 0.2s;
    cursor: pointer;
    flex-shrink: 0;
}

/*===============================================================*/
/*     Hovering - green border glow + faint background tint      */
/*===============================================================*/

.VERTICAL_RAIL_ITEM:hover {

    color: var(--NEON-GREEN);
    border-color: rgba(0, 255, 0, 0.3);
    background: rgba(0, 255, 0, 0.05);
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.12), inset 0 0 8px
    rgba(0, 255, 0, 0.04);
}

/*===============================================================*/
/*      Active - JavaScript adds this based on current URL       */
/*===============================================================*/

.VERTICAL_RAIL_ITEM.active {

    color: var(--NEON-GREEN);
    border-color: rgba(0, 255, 0, 0.25);
    background: rgba(0, 255, 0, 0.04);
}

/*===============================================================*/
/*            Sizes the SVG icon to a consistent 24px            */
/*===============================================================*/

.VERTICAL_RAIL_ICON {

    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.VERTICAL_RAIL_ICON svg {

    width: 100%;
    height: 100%;
}

/*===============================================================*/
/*     Hover text, hidden by default, fades in to the right      */
/*===============================================================*/

.VERTICAL_RAIL_LABEL {

    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: tanslateY(-50%);
    background: #111;
    border: 1px solid rgba(0, 255, 0, 0.25);
    color: var(--NEON-GREEN);
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    letter-spacing: 1px;
    padding: 0.3rem 0.6rem;
    /* Stop hover from capturing mouse. */
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s, left 0.15s;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.1);
    z-index: 9999;
}

/*===============================================================*/
/*        Triangle arrow pointing left toward the rail           */
/*===============================================================*/

.VERTICAL_RAIL_LABEL::before {

    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: rgba(0, 255, 0, 0.25);
}

/*===============================================================*/
/*       Reveal the arrow and nudge it right upon hovering       */
/*===============================================================*/

.VERTICAL_RAIL_ITEM:hover .VERTICAL_RAIL_LABEL {

    opacity: 1;
    left: calc(100% + 14px);
}

/*===============================================================*/
/*        Thin horizontal line between icons in the rail         */
/*===============================================================*/

.VERTICAL_RAIL_DIVIDER {

    width: 30px;
    height: 1px;
    background: rgba(0, 255, 0, 0.1);
    margin: 0.4rem 0;
    flex-shrink: 0;
}

/*===============================================================*/
/*     Hamburger menu button, bit brighter than rail icons       */
/*===============================================================*/

.VERTICAL_RAIL_HAMBURGER {

    color: var(--NEON-GREEN);
    opacity: 0.7;
}

.VERTICAL_RAIL_HAMBURGER:hover {

    opacity: 1;
}

/*===============================================================*/
/*         Donate heart icon turns pink when hovering            */
/*===============================================================*/

.VERTICAL_RAIL_DONATE:hover {

    color: #FF6B9D;
    border-color: rgba(255, 107, 157, 0.3);
    background: rgba(255, 107, 157, 0.05);
    box-shadow: 0 0 12px rgba(255, 107, 157, 0.15);
}

/*===============================================================*/
/*       Donate hover tip inherits the pink hover color          */
/*===============================================================*/

.VERTICAL_RAIL_DONATE:hover .VERTICAL_RAIL_LABEL {

    color: #FF6B9D;
    border-color: rgba(255, 107, 157, 0.15);
}

.VERTICAL_RAIL_DONATE:hover .VERTICAL_RAIL_LABEL::before {

    border-right-color: rgba(255, 107, 157, 0.3);
}

/*===============================================================*/
/*   Mobile announcement rail icon — amber, pulsing, mobile only */
/*===============================================================*/

/*===============================================================*/
/*   Rail announcement icon — red pulsing SVG, desktop+mobile   */
/*===============================================================*/

.VERTICAL_RAIL_ANNOUNCE {

    display: flex;
}

.RAIL_ANNOUNCE_ICON SVG {

    stroke: #FF0000;
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 0 4px rgba(255, 0, 0, 0.6));
    animation: announce-pulse 1.8s ease-in-out infinite;
}

.VERTICAL_RAIL_ANNOUNCE.OPEN .RAIL_ANNOUNCE_ICON SVG {

    animation: none;
    opacity: 0.35;
    filter: none;
}

/*===============================================================*/
/*   Announcement toast — slides in below header, both viewports */
/*===============================================================*/

.ANNOUNCE_TOAST {

    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    background: rgba(255, 0, 0, 0.06);
    border-bottom: 1px solid rgba(255, 0, 0, 0.2);
    border-left: 3px solid rgba(255, 0, 0, 0.5);
    padding: 0 1rem 0 1.2rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                padding 0.3s ease;
}

.ANNOUNCE_TOAST.OPEN {

    max-height: 20rem;
    opacity: 1;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.ANNOUNCE_TOAST_TEXT {

    font-size: 0.75rem;
    font-weight: bold;
    color: #FFE8E0;
    letter-spacing: 0.3px;
    line-height: 1.5;
    flex: 1;
    word-break: break-word;
    overflow-wrap: break-word;
    text-shadow: 0 0 12px rgba(255, 80, 80, 0.4);
}

.ANNOUNCE_TOAST_CLOSE {

    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    color: rgba(255, 232, 224, 0.35);
    padding: 0;
    flex-shrink: 0;
    transition: color 0.2s;
    margin-top: 0.05rem;
}

.ANNOUNCE_TOAST_CLOSE:hover {

    color: #FFE8E0;
}

/*===============================================================*/
/*   Top bar left group — announcement + nav links together     */
/*===============================================================*/

.TOP_LEFT_GROUP {

    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/*===============================================================*/
/*   Top nav links — guest section links / logged-in admin nav  */
/*===============================================================*/

.TOP_NAV_LINKS {

    display: flex;
    align-items: center;
    gap: 0.1rem;
}

.TOP_NAV_LINK {

    font-family: 'Courier New', monospace;
    font-size: 0.68rem;
    color: var(--TEXT-MUTED);
    text-decoration: none;
    letter-spacing: 0.3px;
    padding: 0.1rem 0.4rem;
    transition: color 0.2s;
    white-space: nowrap;
}

.TOP_NAV_LINK:hover {

    color: var(--NEON-GREEN);
}

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*                5) HEADER - TOP LOGO + TAGLINE                 */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

/*===============================================================*/
/*       Full-width header bar with subtle green bottom          */
/*===============================================================*/

HEADER {

    width: 100%;
    background: var(--BG-DARK);
    border-bottom: 1px solid rgba(0, 255, 0, 0.1);
    display: flex;
    align-items: center;
    padding: 0.3rem 1.5rem;
}

/*===============================================================*/
/*              Container for the Z icon + page name             */
/*===============================================================*/

.LOGO_TAGLINE_CONTAINER {

    text-align: left;
    padding: 0.2rem 0;
}

/*===============================================================*/
/*   Anchor wrapping the whole logo unit — no underline          */
/*===============================================================*/

.SITE_LOGO_LINK {

    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}

/*===============================================================*/
/*   The Z icon image                                            */
/*===============================================================*/

.SITE_LOGO_Z {

    height: 54px;
    width: 54px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 6px rgba(0, 255, 0, 0.35));
    transition: filter 0.2s;
}

.SITE_LOGO_LINK:hover .SITE_LOGO_Z {

    filter: drop-shadow(0 0 12px rgba(0, 255, 0, 0.6));
}

/*===============================================================*/
/*   Page name — logo font, sized to sit beside the Z            */
/*===============================================================*/

.SITE_LOGO_PAGENAME {

    font-family: 'ZIZZISTUDIOLOGO', 'Courier New', monospace;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    line-height: 1;
    background: linear-gradient(110deg, #00FF00 40%,
    rgba(255, 255, 255, 0.8) 50%, #00FF00 60%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 6px rgba(0, 255, 0, 0.3));
    animation: zizzi-shimmer 5s linear infinite;
}

/*===============================================================*/
/*   Mobile — Z shifts left toward hamburger, page name bigger   */
/*===============================================================*/

@media (max-width: 768px) {

    .LOGO_TAGLINE_CONTAINER {

        padding: 0.2rem 0.5rem 0;
    }

    .SITE_LOGO_LINK {

        margin-left: 0;
    }

    .SITE_LOGO_Z {

        height: 44px;
        width: 44px;
    }

    .SITE_LOGO_PAGENAME {

        font-size: clamp(1.6rem, 7vw, 2.2rem);
    }
}

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*           6) LOGIN ROW - SLIM AUTH BAR BELOW HEADER           */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

/*===============================================================*/
/*   Full-width top bar — flex row, space-between               */
/*===============================================================*/

/*===============================================================*/
/*   Full-width top bar — flex row, space-between               */
/*===============================================================*/

.TOP_LOGIN {

    width: 100%;
    background: var(--BG-DARK);
    border-bottom: 1px solid rgba(0, 255, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 1.5rem;
    gap: 1rem;
    min-height: 2.2rem;
}

/*===============================================================*/
/*   Right group — clock + separator + login                    */
/*===============================================================*/

.TOP_RIGHT_GROUP {

    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}


/*===============================================================*/
/*        Flex row with inputs, button                          */
/*===============================================================*/

.TOP_LOGIN_BAR {

    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/*===============================================================*/
/*      Login inputs, transparent with soft green border        */
/*===============================================================*/

.TOP_LOGIN_INPUT {

    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.18);
    color: var(--TEXT-MAIN);
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 110px;
}

/*===============================================================*/
/*              Top login fields placeholder text                */
/*===============================================================*/

.TOP_LOGIN_INPUT::placeholder {

    color: var(--TEXT-MUTED);
}

/*===============================================================*/
/*        When focused, brighter border + green glowing          */
/*===============================================================*/

.TOP_LOGIN_INPUT:focus {

    border-color: rgba(0, 255, 0, 0.5);
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.1);
}

/*===============================================================*/
/*     Submit login button, green text, border + hover glow      */
/*===============================================================*/

.TOP_LOGIN_BUTTON {

    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.3);
    color: var(--NEON-GREEN);
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.TOP_LOGIN_BUTTON:hover {

    background: rgba(0, 255, 0, 0.08);
    border-color: var(--NEON-GREEN);
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.15);
}

/*===============================================================*/
/*   "// stay" remember me checkbox — top bar + sidebar         */
/*===============================================================*/

.STAY_LABEL {

    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.STAY_CHECK {

    display: none;
}

.STAY_TEXT {

    font-size: 0.65rem;
    color: var(--TEXT-MUTED);
    letter-spacing: 0.5px;
    font-family: 'Courier New', monospace;
    transition: color 0.2s;
}

.STAY_LABEL:hover .STAY_TEXT {

    color: var(--TEXT-MUTED);
}

.STAY_CHECK:checked + .STAY_TEXT {

    color: var(--NEON-GREEN);
}

.STAY_LABEL_SB .STAY_TEXT {

    font-size: 0.72rem;
}

/*===============================================================*/
/*   "// forgot password" — ghost clickable text                */
/*===============================================================*/

.FORGOT_TEXT {

    cursor: pointer;
    transition: color 0.2s;
}

.FORGOT_TEXT:hover {

    color: var(--TEXT-MUTED);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/*===============================================================*/
/*   "create account" — subdued variant of login button         */
/*===============================================================*/

/*===============================================================*/
/*   Sidebar soft row — remember me + forgot password inline    */
/*===============================================================*/

.SIDEBAR_SOFT_ROW {

    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/*===============================================================*/
/*   Sidebar auth tabs — // sign in | // create account         */
/*===============================================================*/

.SIDEBAR_AUTH_TABS {

    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.SIDEBAR_AUTH_TAB {

    background: none;
    border: none;
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    color: var(--TEXT-MUTED);
    cursor: pointer;
    letter-spacing: 0.5px;
    padding: 0;
    transition: color 0.2s;
}

.SIDEBAR_AUTH_TAB:hover {

    color: var(--TEXT-MUTED);
}

.SIDEBAR_AUTH_TAB.ACTIVE {

    color: var(--NEON-GREEN);
}

.SIDEBAR_AUTH_TAB_SEP {

    color: #222;
    font-size: 0.65rem;
}

/*===============================================================*/
/*   Sidebar form wrapper — login and register share this       */
/*===============================================================*/

.SIDEBAR_FORM {

    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
}

/*===============================================================*/
/*        Replace login form when session is active              */
/*===============================================================*/

.LOGGED_IN_BAR {

    display: flex;
    align-items: center;
    gap: 0.7rem;
}

/*===============================================================*/
/*            Small avatar in the top login row                  */
/*===============================================================*/

.LOGGED_IN_AVATAR {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(0, 255, 0, 0.4);
    object-fit: cover;
    background: #111;
}

/*===============================================================*/
/*        Username shown next to the small avatar */
/*===============================================================*/

.LOGGED_IN_NAME {

    font-size: 0.75rem;
    color: var(--NEON-GREEN);
    latter-spacing: 0.5px;
}

/*===============================================================*/
/*       Logout link - musted grey default, red on hover         *
/*===============================================================*/

.LOGGED_IN_LOGOUT_BUTTON {

    font-size: 0.7rem;
    color: var(--TEXT-MUTED);
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}

.LOGGED_IN_LOGOUT_BUTTON:hover {

    color: #FF4444;
}

/*===============================================================*/
/*          Login error - initiated by JavaScript                */
/*===============================================================*/

.LOGIN_ERROR_MESSAGE,
.TOP_LOGIN_ERROR_MESSAGE {

    font-size: 0.7rem;
    color: #FF4444;
    letter-spacing: 0.5px;
    display: none;
}

/*===============================================================*/
/*       Shared fade with swapping login/logged in session       */
/*===============================================================*/

.TOP_LOGIN_BAR,
.LOGGED_IN_BAR,
.SIDEBAR_LOGIN,
.SIDEBAR_LOGGED_IN {

    transition: opacity 0.3s;
}

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*      7) SIDEBAR/OVERLAY - LEFT PANEL + DARK BACKDROP          */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

/*===============================================================*/
/*       Panel off screen, slides with .EXPANDED via JSm         */
/*===============================================================*/

#SIDEBAR {

    position: fixed;
    top: 0;
    left: calc(var(--SIDE-WIDTH) * -1);
    width: var(--SIDE-WIDTH);
    height: 100%;
    background: var(--BG-SIDEBAR);
    border-right: 1px solid var(--NEON-GREEN);
    transition: left var(--TRANSITION-SPEED) cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 3000;
    padding: 40px 25px;
}

/*===============================================================*/
/*                Sliding the panel into view                    */
/*===============================================================*/

#SIDEBAR.EXPANDED {

    left: 0;
}

/*===============================================================*/
/*        Full screen, dark overlay, blur page content           */
/*===============================================================*/

#OVERLAY {

    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    z-index: 2500;
    backdrop-filter: blur(3px);
}

/*===============================================================*/
/*             Show overlay when sidebar is opened               */             
/*===============================================================*/

#OVERLAY.active {

    display: block;
}

/*===============================================================*/
/*        "X" button in top-right to close the sidebar           */
/*===============================================================*/

.SIDEBAR_CLOSE_X {

    position: absolute;
    top: 14px;
    right: 16px;
    color: var(--TEXT-MUTED);
    font-size: 1.4rem;
    line-height: 1;
    background: none;
    border: 1px solid rgba(0, 255, 0, 0.15);
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    font-family: 'Courier New', monospace;
    letter-spacing: 0;
    transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
    z-index: 10;
}

.SIDEBAR_CLOSE_X:hover {

    color: var(--NEON-GREEN);
    border-color: rgba(0, 255, 0, 0.4);
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.15);
}

/*===============================================================*/
/*     Sidebar login form - appears upon JavaScript request      */
/*===============================================================*/

.SIDEBAR_LOGIN {

    display: none;
}

.SIDEBAR_LOGIN_TITLE {
    
    display: none;
}

/*===============================================================*/
/*      Vertical label + input group for sidebar fields          */
/*===============================================================*/

.SIDEBAR-FIELD {

    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.SIDEBAR_FIELD label {

    font-size: 0.7rem;
    color: var(--TEXT-MUTED);
    letter-spacing: 1px;
}

/*===============================================================*/
/*          Account area at the top of the sidebar               */
/*===============================================================*/

.SIDEBAR_ACCOUNT {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding-top: 2.8rem;
    text-align: center;
}


/*===============================================================*/
/*          "// studio account" section label                   */
/*===============================================================*/

/*===============================================================*/
/*   Action links (control panel, logout) below account info     */
/*===============================================================*/

.SIDEBAR_ACCOUNT_ACTIONS {

    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.7rem;
    width: 100%;
}

/*===============================================================*/
/*     Logged-out: two compact inputs side by side               */
/*===============================================================*/

.SIDEBAR_LOGIN_ROW {

    display: flex;
    flex-direction: row;
    gap: 0.35rem;
}

/*===============================================================*/
/*   Error + forgot-password row — min-height prevents shift     */
/*===============================================================*/

.SIDEBAR_LOGIN_SUB {

    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 1.2rem;
    margin-top: 0.1rem;
}

/*===============================================================*/
/*   Logged-out: full-width creep in button, stacked below      */
/*===============================================================*/

.SIDEBAR_LOGIN_BTN {

    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.35);
    color: var(--NEON-GREEN);
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
    letter-spacing: 1px;
    width: 100%;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.SIDEBAR_LOGIN_BTN:hover {

    background: rgba(0, 255, 0, 0.08);
    border-color: var(--NEON-GREEN);
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.15);
}

/*===============================================================*/
/*      Forgot password link — centered below the login button   */
/*===============================================================*/

.SIDEBAR_FORGOT {

    font-size: 0.65rem;
    color: var(--TEXT-MUTED);
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}

.SIDEBAR_FORGOT:hover {

    color: var(--NEON-GREEN);
}

/*===============================================================*/
/*        Glowing HR divider separating login from content       */
/*===============================================================*/

.SIDEBAR_DIVIDER {

    width: 100%;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(0, 255, 0, 0.5) 30%,
        rgba(0, 255, 0, 0.5) 70%,
        transparent
    );
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.3);
    margin: 1.4rem 0;
    border: none;
}

/*===============================================================*/
/*     Content area wrapper inside the sidebar panel            */
/*===============================================================*/

.SIDEBAR_CONTENT {

    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/*===============================================================*/
/*     Small section heading inside the sidebar (// navigation)  */
/*===============================================================*/

.SIDEBAR_CONTENT_TITLE {

    font-size: 0.7rem;
    color: var(--TEXT-MUTED);
    letter-spacing: 1.5px;
    font-weight: normal;
    margin-bottom: 0.8rem;
}

/*===============================================================*/
/*        Full-width text inputs used in sidebar login           */
/*===============================================================*/

.SIDEBAR_INPUT {

    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.18);
    color: var(--TEXT-MAIN);
    font-family: 'Courier New', monospace;
    font-size: 0.88rem;
    padding: 0.6rem 0.75rem;
    width: 100%;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/*===============================================================*/
/*                  Sidebar input placeholder                    */
/*===============================================================*/

.SIDEBAR_INPUT::placeholder {

    color: var(--TEXT-MUTED);
}

/*===============================================================*/
/*         Focus — brighter border and soft inner glow           */
/*===============================================================*/

.SIDEBAR_INPUT:focus {

    border-color: rgba(0, 255, 0, 0.5);
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.08);
}

/*===============================================================*/
/*     Logged-in sidebar view — replaces the login form          */
/*===============================================================*/

.SIDEBAR_LOGGEDIN {

    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-top: 2.5rem;
}

/*===============================================================*/
/*          Larger avatar shown in the logged-in sidebar         */
/*===============================================================*/

.SIDEBAR_LOGGEDIN_AVATAR {

    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid rgba(0, 255, 0, 0.5);
    box-shadow: 0 0 16px rgba(0, 255, 0, 0.2), 0 0 40px rgba(0, 255, 0, 0.05);
    object-fit: cover;
    background: #111;
}

/*===============================================================*/
/*        Username rendered in logo font when logged in          */
/*===============================================================*/

.SIDEBAR_LOGGEDIN_NAME {

    font-family: 'ZIZZISTUDIOLOGO', monospace;
    font-size: 1.35rem;
    color: var(--NEON-GREEN);
}

/*===============================================================*/
/*     Permission label shown below username when logged in      */
/*===============================================================*/

.SIDEBAR_LOGGEDIN_PERMISSION {

    font-size: 0.68rem;
    color: var(--TEXT-MUTED);
    letter-spacing: 1.5px;
    margin-top: -0.2rem;
}

/*===============================================================*/
/*         Control panel link — full-width bordered row          */
/*===============================================================*/

.SIDEBAR_LOGGEDIN_CP {

    font-size: 0.75rem;
    color: var(--NEON-GREEN);
    text-decoration: none;
    letter-spacing: 0.8px;
    border: 1px solid rgba(0, 255, 0, 0.25);
    padding: 0.55rem 0.8rem;
    display: block;
    text-align: center;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.SIDEBAR_LOGGEDIN_CP:hover {

    background: rgba(0, 255, 0, 0.06);
    border-color: rgba(0, 255, 0, 0.5);
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.1);
}

/*===============================================================*/
/*    New post link — full-width muted bordered row              */
/*===============================================================*/

.SIDEBAR_LOGGEDIN_NP {

    font-size: 0.75rem;
    color: var(--TEXT-MUTED);
    text-decoration: none;
    letter-spacing: 0.8px;
    border: 1px solid #1e1e1e;
    padding: 0.55rem 0.8rem;
    display: block;
    text-align: center;
    transition: color 0.2s, border-color 0.2s;
}

.SIDEBAR_LOGGEDIN_NP:hover {

    color: var(--TEXT-MAIN);
    border-color: #333;
}

/*===============================================================*/
/*    Logout link — full-width muted row, turns red on hover     */
/*===============================================================*/

.SIDEBAR_LOGGEDIN_LOGOUT {

    font-size: 0.75rem;
    color: var(--TEXT-MUTED);
    text-decoration: none;
    letter-spacing: 0.8px;
    border: 1px solid #1e1e1e;
    padding: 0.55rem 0.8rem;
    display: block;
    text-align: center;
    transition: color 0.2s, border-color 0.2s;
}

.SIDEBAR_LOGGEDIN_LOGOUT:hover {

    color: #FF4444;
    border-color: #FF4444;
}

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*        8) MAIN PG. LAYOUT — CONTENT + RIGHT SIDEBAR ROW       */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

/*===============================================================*/
/*    Flex row wrapper — centers content, caps width at 1400px   */
/*===============================================================*/

.PAGE_LAYOUT {

    display: flex;
    flex: 1;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    gap: 0;
    align-items: stretch;
}

/*===============================================================*/
/*   Main content column — fills remaining space, no overflow    */
/*===============================================================*/

MAIN {

    padding: 2.5rem 1.2rem 2.5rem 1.5rem;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}


/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*         8b) HUB CONTROLS — LATEST PAGE FILTER/SEARCH          */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

.HUB_LAYOUT {

    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    width: 100%;
}

/*===============================================================*/
/*   Controls wrapper — all filter rows stacked                  */
/*===============================================================*/

.HUB_CONTROLS {

    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/*===============================================================*/
/*   Search row — input + toggle button side by side            */
/*===============================================================*/

.HUB_SEARCH_ROW {

    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.HUB_SEARCH_ROW .HUB_SEARCH_WRAP {

    flex: 1;
}

/*===============================================================*/
/*   Filter toggle button                                        */
/*===============================================================*/

.HUB_FILTER_TOGGLE {

    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.15);
    color: var(--TEXT-MUTED);
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    padding: 0.45rem 0.85rem;
    cursor: pointer;
    letter-spacing: 0.5px;
    align-self: flex-start;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    position: relative;
}

.HUB_FILTER_TOGGLE:hover,
.HUB_FILTER_TOGGLE.OPEN {

    color: var(--NEON-GREEN);
    border-color: rgba(0, 255, 0, 0.4);
    background: rgba(0, 255, 0, 0.03);
}

.HUB_TOGGLE_ICON {

    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.HUB_TOGGLE_LABEL {

    flex-shrink: 0;
}

.HUB_TOGGLE_CHEVRON {

    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

/*===============================================================*/
/*   Active dot — glows green when filters are set              */
/*===============================================================*/

.HUB_ACTIVE_DOT {

    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
    flex-shrink: 0;
    transition: background 0.2s, box-shadow 0.2s;
}

.HUB_ACTIVE_DOT.ACTIVE {

    background: var(--NEON-GREEN);
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.8);
}

/*===============================================================*/
/*   Collapsible filter panel                                    */
/*===============================================================*/

.HUB_FILTER_PANEL {

    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                padding 0.3s ease;
    padding: 0;
    border: 1px solid transparent;
}

.HUB_FILTER_PANEL.OPEN {

    max-height: 600px;
    opacity: 1;
    padding: 1rem 1rem 1rem;
    border-color: rgba(0, 255, 0, 0.08);
    background: rgba(0, 255, 0, 0.01);
}

/*===============================================================*/
/*   Search bar                                                  */
/*===============================================================*/

.HUB_SEARCH_WRAP {

    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.HUB_SEARCH_ICON {

    position: absolute;
    left: 0.75rem;
    width: 15px;
    height: 15px;
    color: var(--TEXT-MUTED);
    pointer-events: none;
    flex-shrink: 0;
}

.HUB_SEARCH_INPUT {

    width: 100%;
    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.18);
    color: var(--TEXT-MAIN);
    font-family: 'Courier New', monospace;
    font-size: 0.88rem;
    padding: 0.7rem 2.4rem 0.7rem 2.4rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.HUB_SEARCH_INPUT::placeholder {

    color: var(--TEXT-MUTED);
}

.HUB_SEARCH_INPUT:focus {

    border-color: rgba(0, 255, 0, 0.5);
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.08);
}

.HUB_SEARCH_CLEAR {

    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--TEXT-MUTED);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
}

.HUB_SEARCH_CLEAR:hover {

    color: var(--TEXT-MAIN);
}

/*===============================================================*/
/*   Group label — small muted prefix above each control group   */
/*===============================================================*/

.HUB_GROUP_LABEL {

    font-size: 0.62rem;
    color: var(--TEXT-MUTED);
    letter-spacing: 1.5px;
    white-space: nowrap;
    margin-right: 0.6rem;
}

/*===============================================================*/
/*   Category + Sort row                                         */
/*===============================================================*/

.HUB_FILTER_ROW {

    display: flex;
    gap: 2rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

/*===============================================================*/
/*   Category checkboxes                                         */
/*===============================================================*/

.HUB_CAT_GROUP,
.HUB_SORT_GROUP {

    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    row-gap: 0.4rem;
}

.HUB_CAT_CHECKS {

    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.HUB_CHECK_LABEL {

    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    border: 1px solid rgba(0, 255, 0, 0.15);
    padding: 0.25rem 0.65rem;
    font-size: 0.72rem;
    color: var(--TEXT-MUTED);
    letter-spacing: 0.5px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    user-select: none;
}

.HUB_CHECK_LABEL:hover {

    color: var(--NEON-GREEN);
    border-color: rgba(0, 255, 0, 0.35);
}

.HUB_CHECK_LABEL INPUT {

    display: none;
}

.HUB_CHECK_LABEL:has(INPUT:checked) {

    color: var(--NEON-GREEN);
    border-color: rgba(0, 255, 0, 0.5);
    background: rgba(0, 255, 0, 0.05);
}

/*===============================================================*/
/*   Sort buttons                                                */
/*===============================================================*/

.HUB_SORT_BTNS {

    display: flex;
    gap: 0.4rem;
}

.HUB_SORT_BTN {

    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.15);
    color: var(--TEXT-MUTED);
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    padding: 0.25rem 0.65rem;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.HUB_SORT_BTN:hover,
.HUB_SORT_BTN.ACTIVE {

    color: var(--NEON-GREEN);
    border-color: rgba(0, 255, 0, 0.5);
    background: rgba(0, 255, 0, 0.05);
}

/*===============================================================*/
/*   Date range row                                              */
/*===============================================================*/

.HUB_DATE_ROW {

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.HUB_DATE_INPUTS {

    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.HUB_DATE_INPUT {

    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.18);
    color: var(--TEXT-MAIN);
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    padding: 0.3rem 0.6rem;
    outline: none;
    color-scheme: dark;
    transition: border-color 0.2s;
}

.HUB_DATE_INPUT:focus {

    border-color: rgba(0, 255, 0, 0.5);
}

.HUB_DATE_SEP {

    color: var(--TEXT-MUTED);
    font-size: 0.8rem;
}

.HUB_DATE_CLEAR {

    background: none;
    border: none;
    color: var(--TEXT-MUTED);
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    letter-spacing: 0.5px;
    padding: 0;
    transition: color 0.2s;
}

.HUB_DATE_CLEAR:hover {

    color: var(--NEON-GREEN);
}

/*===============================================================*/
/*   Tags row                                                    */
/*===============================================================*/

.HUB_TAG_ROW {

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.HUB_TAG_PILLS {

    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.HUB_TAG_PILL {

    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.15);
    color: var(--TEXT-MUTED);
    font-family: 'Courier New', monospace;
    font-size: 0.68rem;
    padding: 0.2rem 0.55rem;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.HUB_TAG_PILL:hover,
.HUB_TAG_PILL.ACTIVE {

    color: var(--NEON-GREEN);
    border-color: rgba(0, 255, 0, 0.5);
    background: rgba(0, 255, 0, 0.05);
}

.HUB_TAG_NONE {

    font-size: 0.68rem;
    color: #333;
    letter-spacing: 0.5px;
}

/*===============================================================*/
/*   Active filter summary bar                                   */
/*===============================================================*/

.HUB_ACTIVE_BAR {

    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid rgba(0, 255, 0, 0.1);
    background: rgba(0, 255, 0, 0.02);
    flex-wrap: wrap;
}

.HUB_ACTIVE_SUMMARY {

    font-size: 0.7rem;
    color: var(--TEXT-MUTED);
    letter-spacing: 0.3px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.HUB_RESET_BTN {

    background: none;
    border: none;
    color: rgba(0, 255, 0, 0.5);
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    letter-spacing: 0.5px;
    padding: 0;
    white-space: nowrap;
    transition: color 0.2s;
}

.HUB_RESET_BTN:hover {

    color: var(--NEON-GREEN);
}

/*===============================================================*/
/*   Result count                                                */
/*===============================================================*/

.HUB_RESULT_COUNT {

    font-size: 0.68rem;
    color: var(--TEXT-MUTED);
    letter-spacing: 1px;
    margin-bottom: 0.4rem;
    min-height: 1rem;
}

/*===============================================================*/
/*   Glowing divider                                             */
/*===============================================================*/

.HUB_DIVIDER {

    width: 100%;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(0, 255, 0, 0.4) 30%,
        rgba(0, 255, 0, 0.4) 70%,
        transparent
    );
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.25);
    margin: 1.4rem 0 1rem;
}

/*===============================================================*/
/*   Empty state                                                 */
/*===============================================================*/

.HUB_EMPTY {

    padding: 2.5rem 0;
    color: var(--TEXT-MUTED);
    font-size: 0.82rem;
    letter-spacing: 0.5px;
}

.HUB_EMPTY_RESET {

    background: none;
    border: none;
    color: var(--NEON-GREEN);
    font-family: 'Courier New', monospace;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    transition: opacity 0.2s;
}

/*===============================================================*/
/*   Mobile tweaks                                               */
/*===============================================================*/

@media (max-width: 768px) {

    .HUB_FILTER_ROW {

        gap: 1rem;
    }

    .HUB_DATE_INPUTS {

        flex-direction: column;
        align-items: flex-start;
    }

    .HUB_ACTIVE_SUMMARY {

        white-space: normal;
    }
}

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*         9) DYNAMIC CARDS — POST FEED ON THE LATEST PAGE       */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

/*===============================================================*/
/*        Vertical stack of post cards with even spacing         */
/*===============================================================*/

.CARDS_SECTION {

    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/*===============================================================*/
/*   HUB GRID — mixed content, 3 columns desktop → 1 mobile     */
/*===============================================================*/

.HUB_GRID {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.4rem;
    width:                 100%;
}

.HUB_GRID_EMPTY {
    grid-column: 1 / -1;
}

/*===============================================================*/
/*   HUB TILE — thumbnail card, type-badged                      */
/*===============================================================*/

.HUB_TILE {
    background:     #111;
    border:         1px solid rgba(0,255,0,0.15);
    display:        flex;
    flex-direction: column;
    position:       relative;
    overflow:       hidden;
    transition:     border-color 0.3s, box-shadow 0.3s;
}

.HUB_TILE::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     linear-gradient(135deg, rgba(0,255,0,0.03) 0%, transparent 60%);
    pointer-events: none;
    z-index:        0;
}

.HUB_TILE:hover {
    border-color: rgba(0,255,0,0.5);
    box-shadow:   0 0 20px rgba(0,255,0,0.06), inset 0 0 30px rgba(0,255,0,0.02);
}

/*--- Thumbnail link ---*/

.HUB_TILE_IMG_LINK {
    display:      block;
    overflow:     hidden;
    aspect-ratio: 4 / 3;
    background:   #0A0A0A;
    flex-shrink:  0;
    position:     relative;
}

.HUB_TILE_IMG {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.4s ease, opacity 0.3s ease;
}

.HUB_TILE:hover .HUB_TILE_IMG {
    transform: scale(1.03);
    opacity:   0.85;
}

/*--- Empty thumbnail placeholder ---*/

.HUB_TILE_IMG_EMPTY {
    width:           100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      #0d0d0d;
}

.HUB_TILE_TYPE_BIG {
    font-family:    'ZIZZISTUDIOLOGO', monospace;
    font-size:      1.1rem;
    color:          rgba(0,255,0,0.15);
    letter-spacing: 3px;
    pointer-events: none;
}

/*--- Type badge overlaid on thumbnail corner ---*/

.HUB_TILE_TYPE_BADGE {
    position:       absolute;
    top:            8px;
    left:           8px;
    background:     rgba(0,0,0,0.7);
    border:         1px solid rgba(0,255,0,0.25);
    color:          rgba(0,255,0,0.7);
    font-size:      0.62rem;
    letter-spacing: 1.5px;
    padding:        2px 6px;
    pointer-events: none;
    z-index:        1;
}

/*--- Info strip ---*/

.HUB_TILE_INFO {
    padding:        0.9rem 1.1rem 1.1rem;
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
    flex:           1;
    position:       relative;
    z-index:        1;
}

.HUB_TILE_TITLE {
    font-size:   0.95rem;
    font-weight: normal;
    margin:      0;
    line-height: 1.3;
}

.HUB_TILE_TITLE_LINK {
    color:           var(--TEXT-MAIN);
    text-decoration: none;
    transition:      color 0.2s;
}

.HUB_TILE:hover .HUB_TILE_TITLE_LINK {
    color: var(--NEON-GREEN);
}

.HUB_TILE_META {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    flex-wrap:   wrap;
    font-size:   0.7rem;
    color:       var(--TEXT-MUTED);
}

.HUB_TILE_EXCERPT {
    font-size:   0.78rem;
    color:       #777;
    line-height: 1.55;
    margin:      0;
    display:     -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

.HUB_TILE_TAGS {
    margin-top: 0.1rem;
}

.HUB_TILE_LINK {
    margin-top:  auto;
    padding-top: 0.4rem;
    font-size:   0.7rem;
}

/*--- Tablet: 2 columns ---*/

@media (max-width: 1024px) {
    .HUB_GRID {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*--- Mobile: single stack ---*/

@media (max-width: 768px) {
    .HUB_GRID {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .HUB_TILE_IMG_LINK {
        aspect-ratio: unset;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.6rem;
    }

    .HUB_TILE_IMG {
        width: auto !important;
        height: auto !important;
        max-width: 45%;
        object-fit: unset;
    }
}


/*===============================================================*/
/*     Section heading above the card list (// Recent Activity)  */
/*===============================================================*/

.CARDS_LABEL {

    font-size: clamp(1.4rem, 4vw, 1.9rem);
    color: var(--TEXT-MAIN);
    letter-spacing: 2px;
    margin-bottom: 0.6rem;
    font-family: 'ZIZZISTUDIOLOGO', monospace;
}

/*===============================================================*/
/*    Post card — two-column grid with avatar left, content right */
/*===============================================================*/

.POST_CARD {

    background: #111;
    border: 1px solid rgba(0, 255, 0, 0.15);
    padding: 1.4rem 1.6rem;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 0 1.4rem;
    position: relative;
    transition: border-color 0.3s, box-shadow 0.3s;
    text-decoration: none;
    color: inherit;
}

/*===============================================================*/
/*       Subtle green gradient wash — decorative pseudo-element  */
/*===============================================================*/

.POST_CARD::before {

    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 255, 0, 0.03) 0%, transparent 60%);
    pointer-events: none;
}

/*===============================================================*/
/*     Hover — brighter border with outer and inner green glow   */
/*===============================================================*/

.POST_CARD:hover {

    border-color: rgba(0, 255, 0, 0.5);
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.06), inset 0 0 30px rgba(0, 255, 0, 0.02);
}

/*===============================================================*/
/*   Avatar column — spans both grid rows, image above line      */
/*===============================================================*/

.CARD_AVATAR {

    grid-column: 1;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0.2rem;
    gap: 0.6rem;
}

/*===============================================================*/
/*         Circular author avatar with a green border ring       */
/*===============================================================*/

.AVATAR_IMG {

    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(0, 255, 0, 0.5);
    object-fit: cover;
    background: #0A0A0A;
    display: block;
}

/*===============================================================*/
/*      Thin vertical line below avatar — fades to transparent   */
/*===============================================================*/

.AVATAR_LINE {

    width: 1px;
    flex: 1;
    min-height: 20px;
    background: linear-gradient(to bottom, rgba(0, 255, 0, 0.3), transparent);
}

.AVATAR_LINE {

    width: 1px;
    flex: 1;
    min-height: 20px;
    background: linear-gradient(to bottom, rgba(0, 255, 0, 0.3), transparent);
}

/*===============================================================*/
/*   Featured image thumbnail — right column, cards with image   */
/*   .HAS_FEAT_IMG — left thumbnail, avatar hidden               */
/*===============================================================*/

.POST_CARD.HAS_FEAT_IMG {

    grid-template-columns: 80px 1fr;
}

.POST_CARD.HAS_FEAT_IMG .CARD_AVATAR {

    display: none;
}

.CARD_FEAT_IMG {

    grid-column: 1;
    grid-row: 1 / 3;
    align-self: stretch;
    overflow: hidden;
}

.CARD_FEAT_IMG A {

    display: block;
    height: 100%;
}

.CARD_FEAT_IMG IMG {

    display: block;
    width: 100%;
    height: 100%;
    min-height: 90px;
    object-fit: cover;
    object-position: center;
    border-right: 1px solid rgba(0, 255, 0, 0.15);
    transition: border-color 0.2s, opacity 0.2s;
}

.POST_CARD:hover .CARD_FEAT_IMG IMG {

    border-color: rgba(0, 255, 0, 0.4);
    opacity: 0.9;
}

/*===============================================================*/
/*   Create — featured image input + live preview                */
/*===============================================================*/

.LIT_IMG_WRAP {

    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.LIT_IMG_INPUT {

    cursor: pointer;
}

.LIT_IMG_PREVIEW_WRAP {

    display: none;
    align-items: flex-start;
    gap: 0.75rem;
    position: relative;
}

.LIT_IMG_PREVIEW {

    max-width: 200px;
    max-height: 140px;
    object-fit: cover;
    border: 1px solid rgba(0, 255, 0, 0.2);
    display: block;
}

.LIT_IMG_CLEAR {

    background: none;
    border: 1px solid rgba(255, 50, 50, 0.3);
    color: rgba(255, 50, 50, 0.6);
    font-family: 'Courier New', monospace;
    font-size: 16px;
    line-height: 1;
    padding: 2px 7px;
    cursor: pointer;
    transition: all 0.15s;
}

.LIT_IMG_CLEAR:hover {

    border-color: #ff4444;
    color: #ff4444;
}

/*===============================================================*/
/*          Right content column — holds all post text           */
/*===============================================================*/

.CARD_CONTENT {

    grid-column: 2;
    min-width: 0;
}

/*===============================================================*/
/*     Meta row above the title — author, category badge, date   */
/*===============================================================*/

.CARD_META {

    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

/*===============================================================*/
/*              Author name — bold, full text color              */
/*===============================================================*/

.CARD_AUTHOR {

    font-size: 0.78rem;
    color: var(--TEXT-MAIN);
    font-weight: bold;
    letter-spacing: 0.5px;
}

/*===============================================================*/
/*              Bullet separator between meta items              */
/*===============================================================*/

.CARD_DOT {

    color: #333;
    font-size: 0.7rem;
}

/*===============================================================*/
/*           Category badge — small green-tinted pill            */
/*===============================================================*/

.CARD_CATEGORY {

    font-size: 0.68rem;
    color: var(--NEON-GREEN);
    border: 1px solid rgba(0, 255, 0, 0.2);
    padding: 0.1rem 0.45rem;
    background: rgba(0, 255, 0, 0.04);
    letter-spacing: 0.5px;
}

/*===============================================================*/
/*        Date — muted, pushed to the right end of meta row      */
/*===============================================================*/

.CARD_DATE {

    font-size: 0.68rem;
    color: var(--TEXT-MUTED);
    margin-left: auto;
}

/*===============================================================*/
/*   Post title — logo font, fluid size, turns green on hover    */
/*===============================================================*/


/*===============================================================*/
/*   Reply count in meta row                                     */
/*===============================================================*/

.CARD_REPLIES {

    font-size: 0.68rem;
    color: var(--TEXT-MUTED);
    letter-spacing: 0.5px;
    transition: color 0.2s;
}

.POST_CARD:hover .CARD_REPLIES {

    color: rgba(0, 255, 0, 0.6);
}

.CARD_TITLE {

    font-family: 'ZIZZISTUDIOLOGO', monospace;
    font-size: clamp(1.3rem, 4vw, 1.7rem);
    color: var(--TEXT-MAIN);
    line-height: 1.15;
    margin-bottom: 0.6rem;
    transition: color 0.2s;
}

.POST_CARD:hover .CARD_TITLE {

    color: var(--NEON-GREEN);
}

/*===============================================================*/
/*      Excerpt — muted preview text capped at 60ch              */
/*===============================================================*/

.CARD_EXCERPT {

    font-size: 0.88rem;
    color: #888;
    line-height: 1.6;
    margin-bottom: 1rem;
    max-width: 60ch;
}

/*===============================================================*/
/*           Bottom row — tags left, read-more link right        */
/*===============================================================*/

.CARD_FOOTER {

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/*===============================================================*/
/*                   Wrapping row of hashtag pills               */
/*===============================================================*/

.TAG_CONTAINER {

    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/*===============================================================*/
/*    Individual hashtag — turns green-tinted on card hover      */
/*===============================================================*/

.TAG_ITEM {

    font-size: 0.65rem;
    color: var(--TEXT-MUTED);
    border: 1px solid #222;
    padding: 0.2rem 0.5rem;
    background: transparent;
    transition: color 0.2s, border-color 0.2s;
}

.POST_CARD:hover .TAG_ITEM {

    color: rgba(0, 255, 0, 0.6);
    border-color: rgba(0, 255, 0, 0.2);
}

/*===============================================================*/
/*      >> read this link — glows brighter on card hover         */
/*===============================================================*/

.READ_MORE {

    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--NEON-GREEN);
    text-decoration: none;
    font-size: 0.78rem;
    letter-spacing: 1px;
    opacity: 0.7;
    transition: opacity 0.2s, text-shadow 0.2s;
    white-space: nowrap;
}

.POST_CARD:hover .READ_MORE {

    opacity: 1;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
}

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*        10) RIGHT SIDEBAR — WIDGET COLUMN, DESKTOP ONLY        */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

/*===============================================================*/
/*       Hidden on mobile — only appears at 1024px and wider     */
/*===============================================================*/

.RIGHT_SIDEBAR {

    width: 260px;
    flex-shrink: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    border-left: 1px solid rgba(0, 255, 0, 0.08);
    align-self: stretch;
}

/*===============================================================*/
/*   Show right sidebar on desktop                              */
/*===============================================================*/

@media (min-width: 1024px) {

    .RIGHT_SIDEBAR {

        display: flex;
    }
}

/*===============================================================*/
/*   Widget block — label + body, no outer card border          */
/*===============================================================*/

.RS_WIDGET {

    border-bottom: 1px solid rgba(0, 255, 0, 0.08);
    padding: 1.2rem 1.3rem;
}

.RS_WIDGET:last-child {

    border-bottom: none;
}

/*===============================================================*/
/*   Widget label — small monospace section header              */
/*===============================================================*/

.RS_WIDGET_LABEL {

    font-family: 'Courier New', monospace;
    font-size: 0.65rem;
    color: var(--NEON-GREEN);
    letter-spacing: 1px;
    opacity: 0.6;
    margin-bottom: 0.8rem;
    text-transform: lowercase;
}

/*===============================================================*/
/*   Widget body                                                */
/*===============================================================*/

.RS_WIDGET_BODY {

    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

/*===============================================================*/
/*   Recent posts list                                          */
/*===============================================================*/

.RS_POST_LIST {

    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.RS_POST_ITEM {

    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.RS_POST_CAT {

    font-size: 0.6rem;
    color: var(--TEXT-MUTED);
    letter-spacing: 0.5px;
    font-family: 'Courier New', monospace;
    text-transform: lowercase;
}

.RS_POST_LINK {

    font-size: 0.75rem;
    color: var(--TEXT-MAIN);
    text-decoration: none;
    line-height: 1.35;
    transition: color 0.2s;
}

.RS_POST_LINK:hover {

    color: var(--NEON-GREEN);
}

/*===============================================================*/
/*   About blurb                                                */
/*===============================================================*/

.RS_ABOUT_TEXT {

    font-size: 0.75rem;
    color: var(--TEXT-MUTED);
    line-height: 1.6;
    margin: 0;
}

/*===============================================================*/
/*   Elsewhere links                                            */
/*===============================================================*/

.RS_ELSEWHERE_LIST {

    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.RS_ELSEWHERE_LINK {

    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    color: var(--TEXT-MUTED);
    text-decoration: none;
    transition: color 0.2s;
    letter-spacing: 0.3px;
}

.RS_ELSEWHERE_LINK:hover {

    color: var(--NEON-GREEN);
}

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*          11) PAGE FOOTER — SLIM BAR PINNED TO BOTTOM          */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

/*===============================================================*/
/*    Slim right-aligned footer — margin-top: auto pins bottom   */
/*===============================================================*/

FOOTER {

    padding: 0.5rem 1.5rem;
    border-top: 1px solid rgba(0, 255, 0, 0.07);
    color: var(--TEXT-MUTED);
    font-size: 0.68rem;
    letter-spacing: 0.5px;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/*===============================================================*/
/*      Footer link — dark grey default, turns green on hover    */
/*===============================================================*/

FOOTER A {

    color: var(--TEXT-MUTED);
    text-decoration: none;
    transition: color 0.2s;
}

FOOTER A:hover {

    color: var(--NEON-GREEN);
}

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*         12) CSS ANIMATIONS — SHIMMER + PULSE KEYFRAMES        */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

/*===============================================================*/
/*    Shifts gradient position to sweep shimmer across logo      */
/*===============================================================*/

@keyframes ZIZZI_SHIMMER {

    to { background-position: 200% center; }
}

/*===============================================================*/
/*   Pulses tagline between near-invisible grey and neon green   */
/*===============================================================*/

@keyframes GREEN_PULSE {

    0%, 100% { color: #3A3A3A; text-shadow: none; }
    50%       { color: var(--NEON-GREEN); text-shadow: 0 0 8px rgba(0, 255, 0, 0.6); }
}

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*        13) MOBILE DESIGN — OVERRIDES FOR MAX-WIDTH: 768PX     */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

@media (max-width: 768px) {

    /*===============================================================*/
    /*   Mobile: no left offset — rail moves to horizontal strip     */
    /*===============================================================*/

    BODY {

        padding-left: 0;
        padding-bottom: 0;
        padding-top: var(--MOBILE-TOP-OFFSET);
    }

    /*===============================================================*/
    /*   Rail becomes a fixed horizontal scrolling strip             */
    /*   Sits directly below the header                              */
    /*===============================================================*/

    .VERTICAL_RAIL {

        /* Horizontal strip below header */
        position: fixed;
        top: var(--MOBILE-HEADER-H);
        left: 0;
        right: 0;
        width: 100%;
        height: 44px;
        flex-direction: row;
        align-items: stretch;
        justify-content: flex-start;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        border-right: none;
        border-bottom: 1px solid rgba(0, 255, 0, 0.1);
        z-index: 1500;
        /* Fade hint on right edge */
        -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
        mask-image: linear-gradient(to right, black 90%, transparent 100%);
    }

    .VERTICAL_RAIL::after {

        content: '';
        flex-shrink: 0;
        width: 24px;
    }

    /*===============================================================*/
    /*   Rail items become horizontal — icon + tiny label stacked    */
    /*===============================================================*/

    .VERTICAL_RAIL_ITEM {

        flex-direction: column;
        flex-shrink: 0;
        width: auto;
        min-width: 52px;
        height: 44px;
        padding: 0 10px;
        border: none;
        border-right: 1px solid rgba(0, 255, 0, 0.06);
        gap: 2px;
    }

    .VERTICAL_RAIL_ITEM:hover,
    .VERTICAL_RAIL_ITEM.active {

        background: rgba(0, 255, 0, 0.05);
        box-shadow: none;
        border-right: 1px solid rgba(0, 255, 0, 0.06);
        border-bottom: 2px solid var(--NEON-GREEN);
    }

    /*===============================================================*/
    /*          Active icon still gets green color on mobile         */
    /*===============================================================*/

    .VERTICAL_RAIL_ITEM.active .VERTICAL_RAIL_ICON {

        color: var(--NEON-GREEN);
    }

    /*===============================================================*/
    /*   Divider becomes a vertical line between items               */
    /*===============================================================*/

    .VERTICAL_RAIL_DIVIDER {

        display: block;
        width: 1px;
        height: 24px;
        margin: auto 0;
        flex-shrink: 0;
    }

    /*===============================================================*/
    /*   Show tiny labels on mobile strip                            */
    /*===============================================================*/

    .VERTICAL_RAIL_LABEL {

        display: block;
        position: static;
        transform: none;
        opacity: 1;
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
        font-size: 8px;
        color: inherit;
        white-space: nowrap;
        pointer-events: none;
    }

    .VERTICAL_RAIL_LABEL::before {

        display: none;
    }

    /*===============================================================*/
    /*                   Rail icon size on mobile                    */
    /*===============================================================*/

    .VERTICAL_RAIL_ICON {

        width: 22px;
        height: 22px;
    }

    /*===============================================================*/
    /*    Hide top login row — login lives in slide sidebar mobile   */
    /*===============================================================*/

    .TOP_LOGIN {

        display: none;
    }

    /*===============================================================*/
    /*       Scale down the logo on small screens                   */
    /*===============================================================*/

    /*===============================================================*/
    /*   Pin header to top on mobile — nav strip sits below it       */
    /*===============================================================*/

    HEADER {

        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--MOBILE-HEADER-H);
        z-index: 1600;
        padding: 0 1rem;
    }

    .LOGO_TAGLINE_CONTAINER {

        padding: 0.2rem 0.5rem 0;
    }

    /*===============================================================*/
    /*               Tighter content padding on mobile               */
    /*===============================================================*/

    MAIN {

        padding: 1.5rem 1rem;
    }

    .CARD_TITLE {

        font-size: clamp(1.4rem, 6vw, 1.8rem);
    }

    /*===============================================================*/
    /*   Cards collapse to single column — avatar goes horizontal    */
    /*===============================================================*/

    .POST_CARD {

        grid-template-columns: 1fr;
        padding: 1.2rem;
    }

    .CARD_AVATAR {

        grid-row: 1;
        flex-direction: row;
        align-items: center;
        gap: 0.8rem;
        margin-bottom: 0.8rem;
    }

    /*===============================================================*/
    /*   Vertical line removed — doesn't suit horizontal avatar row  */
    /*===============================================================*/

    .AVATAR_LINE {

        display: none;
    }

    /*===============================================================*/
    /*              Card content spans full column mobile            */
    /*===============================================================*/

    .CARD_CONTENT {

        grid-column: 1;
    }

    /*===============================================================*/
    /*          Date no longer needs to be pushed right mobile       */
    /*===============================================================*/

    .CARD_DATE {

        margin-left: 0;
    }

    /*===============================================================*/
    /*   HAS_FEAT_IMG — stack image above content, centered + small  */
    /*===============================================================*/

    .POST_CARD.HAS_FEAT_IMG {

        grid-template-columns: 1fr;
        padding: 0;
    }

    .POST_CARD.HAS_FEAT_IMG .CARD_FEAT_IMG {

        grid-column: 1;
        grid-row: 1;
        align-self: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #0A0A0A;
        padding: 0.6rem;
        border-bottom: 1px solid rgba(0, 255, 0, 0.1);
    }

    .POST_CARD.HAS_FEAT_IMG .CARD_FEAT_IMG A {

        display: flex;
        justify-content: center;
    }

    .POST_CARD.HAS_FEAT_IMG .CARD_FEAT_IMG IMG {

        width: auto !important;
        height: auto !important;
        max-width: 45%;
        min-height: unset;
        object-fit: unset;
        border-right: none;
    }

    .POST_CARD.HAS_FEAT_IMG .CARD_CONTENT {

        grid-column: 1;
        grid-row: 2;
        padding: 1rem;
    }
}

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*      14) STATIC CONTENT — SINGLE CARD FOR NON-FEED PAGES      */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

/*===============================================================*/
/*   Bordered content card — artwork, contact, culinary, etc.    */
/*===============================================================*/

.STATIC_PAGE_CARD {

    background: #111;
    border: 1px solid rgba(0, 255, 0, 0.15);
    padding: 2rem 2.2rem;
    position: relative;
    max-width: 780px;
}

/*===============================================================*/
/*     Same decorative green gradient wash used on post cards    */
/*===============================================================*/

.STATIC_PAGE_CARD::before {

    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 255, 0, 0.03) 0%, transparent 60%);
    pointer-events: none;
}

/*===============================================================*/
/*         Wraps the page title and subtitle at top of card      */
/*===============================================================*/

.STATIC_PAGE_HEADER {

    margin-bottom: 0;
}

/*===============================================================*/
/*      Large logo font page title (e.g. "// artwork")           */
/*===============================================================*/

.STATIC_PAGE_TITLE {

    font-family: 'ZIZZISTUDIOLOGO', monospace;
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    color: var(--TEXT-MAIN);
    font-weight: normal;
    line-height: 1.1;
    margin-bottom: 0.4rem;
}

/*===============================================================*/
/*        Short subtitle below the title — muted, letter-spaced  */
/*===============================================================*/

.STATIC_PAGE_SUB {

    font-size: 0.82rem;
    color: var(--TEXT-MUTED);
    letter-spacing: 0.5px;
}

/*===============================================================*/
/*      Thin rule separating title block from intro paragraph    */
/*===============================================================*/

.STATIC_PAGE_DIVIDER {

    width: 100%;
    height: 1px;
    background: rgba(0, 255, 0, 0.08);
    margin: 1.4rem 0;
}

/*===============================================================*/
/*    Intro paragraph — muted grey, capped at 60ch for reading   */
/*===============================================================*/

.STATIC_PAGE_INTRO {

    font-size: 0.92rem;
    color: #888;
    line-height: 1.7;
    max-width: 60ch;
    margin-bottom: 1.6rem;
}

/*===============================================================*/
/*             Main body content area below the intro            */
/*===============================================================*/

.STATIC_PAGE_CONTENT {

    font-size: 0.9rem;
    color: var(--TEXT-MAIN);
    line-height: 1.7;
}

/*===============================================================*/
/*         Tighter padding inside the static card on mobile      */
/*===============================================================*/

@media (max-width: 768px) {

    .STATIC_PAGE_CARD {

        padding: 1.4rem 1.2rem;
    }
}

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*     14) STATIC ENTRY CARDS — individual project/post boxes    */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

/*===============================================================*/
/*   Individual entry box — copy/paste to add a new item         */
/*===============================================================*/

.STATIC_ENTRY_CARD {

    background: #111;
    border: 1px solid rgba(0, 255, 0, 0.15);
    padding: 2rem 2.2rem;
    position: relative;
    max-width: 780px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.STATIC_ENTRY_CARD::before {

    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 255, 0, 0.03) 0%, transparent 60%);
    pointer-events: none;
}

.STATIC_ENTRY_CARD:hover {

    border-color: rgba(0, 255, 0, 0.35);
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.05);
}

/*===============================================================*/
/*      Entry title — same logo font, slightly smaller           */
/*===============================================================*/

.STATIC_ENTRY_TITLE {

    font-family: 'ZIZZISTUDIOLOGO', monospace;
    font-size: clamp(1.3rem, 4vw, 1.9rem);
    color: var(--TEXT-MAIN);
    font-weight: normal;
    line-height: 1.1;
    margin-bottom: 0.4rem;
}

/*===============================================================*/
/*      Body wrapper inside the entry card                       */
/*===============================================================*/

.STATIC_ENTRY_BODY {

    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/*===============================================================*/
/*      Optional screenshot image inside an entry card           */
/*===============================================================*/

.STATIC_ENTRY_IMG {

    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border: 1px solid rgba(0, 255, 0, 0.12);
    display: block;
}

/*===============================================================*/
/*      Body text inside an entry card                           */
/*===============================================================*/

.STATIC_ENTRY_TEXT {

    font-size: 0.9rem;
    color: var(--TEXT-MAIN);
    line-height: 1.7;
    max-width: 60ch;
}

/*===============================================================*/
/*      Optional ">> view project" style link                    */
/*===============================================================*/

.STATIC_ENTRY_LINK {

    font-size: 0.82rem;
    color: var(--TEXT-MUTED);
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: color 0.2s, text-shadow 0.2s;
    align-self: flex-start;
}

.STATIC_ENTRY_LINK:hover {

    color: var(--NEON-GREEN);
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.4);
}

/*===============================================================*/
/*         Tighter padding on entry cards — mobile               */
/*===============================================================*/

@media (max-width: 768px) {

    .STATIC_ENTRY_CARD {

        padding: 1.4rem 1.2rem;
    }
}
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*                  15a) LITERATURE PORTAL STYLES        */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

.LIT_LAYOUT {

    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    width: 100%;
}

/*===============================================================*/
/*   Controls wrapper — search + filter toggle + panel           */
/*===============================================================*/

.LIT_CONTROLS {

    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/*===============================================================*/
/*   Search bar                                                  */
/*===============================================================*/

.LIT_SEARCH_WRAP {

    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.LIT_SEARCH_ICON {

    position: absolute;
    left: 0.75rem;
    width: 15px;
    height: 15px;
    color: var(--TEXT-MUTED);
    pointer-events: none;
    flex-shrink: 0;
}

.LIT_SEARCH_INPUT {

    width: 100%;
    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.18);
    color: var(--TEXT-MAIN);
    font-family: 'Courier New', monospace;
    font-size: 0.88rem;
    padding: 0.65rem 0.75rem 0.65rem 2.4rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.LIT_SEARCH_INPUT::placeholder {

    color: var(--TEXT-MUTED);
}

.LIT_SEARCH_INPUT:focus {

    border-color: rgba(0, 255, 0, 0.5);
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.08);
}

/*===============================================================*/
/*   Filter toggle button                                        */
/*===============================================================*/

.LIT_FILTER_TOGGLE {

    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.15);
    color: var(--TEXT-MUTED);
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    padding: 0.45rem 0.85rem;
    cursor: pointer;
    letter-spacing: 0.5px;
    align-self: flex-start;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.LIT_FILTER_TOGGLE:hover,
.LIT_FILTER_TOGGLE.OPEN {

    color: var(--NEON-GREEN);
    border-color: rgba(0, 255, 0, 0.4);
    background: rgba(0, 255, 0, 0.03);
}

.LIT_TOGGLE_ICON {

    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.LIT_TOGGLE_LABEL {

    flex-shrink: 0;
}

.LIT_TOGGLE_CHEVRON {

    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

/*===============================================================*/
/*   Active dot                                                  */
/*===============================================================*/

.LIT_ACTIVE_DOT {

    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
    flex-shrink: 0;
    transition: background 0.2s, box-shadow 0.2s;
}

.LIT_ACTIVE_DOT.ACTIVE {

    background: var(--NEON-GREEN);
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.8);
}

/*===============================================================*/
/*   Collapsible filter panel                                    */
/*===============================================================*/

.LIT_FILTER_PANEL {

    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding: 0;
    border: 1px solid transparent;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                padding 0.3s ease;
}

.LIT_FILTER_PANEL.OPEN {

    max-height: 600px;
    opacity: 1;
    padding: 0.8rem 0.9rem;
    border-color: rgba(0, 255, 0, 0.08);
    background: rgba(0, 255, 0, 0.01);
}


/* mobile padding handled by MAIN */

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*                  15b) ARTWORK PORTAL STYLES           */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

.ART_LAYOUT {

    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    width: 100%;
}

/*===============================================================*/
/*===============================================================*/
/*   Controls wrapper — search + filter toggle + panel           */
/*===============================================================*/

.ART_CONTROLS {

    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/*===============================================================*/
/*   Search bar                                                  */
/*===============================================================*/

.ART_SEARCH_WRAP {

    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.ART_SEARCH_ICON {

    position: absolute;
    left: 0.75rem;
    width: 15px;
    height: 15px;
    color: var(--TEXT-MUTED);
    pointer-events: none;
    flex-shrink: 0;
}

.ART_SEARCH_INPUT {

    width: 100%;
    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.18);
    color: var(--TEXT-MAIN);
    font-family: 'Courier New', monospace;
    font-size: 0.88rem;
    padding: 0.65rem 0.75rem 0.65rem 2.4rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ART_SEARCH_INPUT::placeholder {

    color: var(--TEXT-MUTED);
}

.ART_SEARCH_INPUT:focus {

    border-color: rgba(0, 255, 0, 0.5);
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.08);
}

/*===============================================================*/
/*   Filter toggle button                                        */
/*===============================================================*/

.ART_FILTER_TOGGLE {

    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.15);
    color: var(--TEXT-MUTED);
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    padding: 0.45rem 0.85rem;
    cursor: pointer;
    letter-spacing: 0.5px;
    align-self: flex-start;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.ART_FILTER_TOGGLE:hover,
.ART_FILTER_TOGGLE.OPEN {

    color: var(--NEON-GREEN);
    border-color: rgba(0, 255, 0, 0.4);
    background: rgba(0, 255, 0, 0.03);
}

.ART_TOGGLE_ICON {

    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.ART_TOGGLE_LABEL {

    flex-shrink: 0;
}

.ART_TOGGLE_CHEVRON {

    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

/*===============================================================*/
/*   Active dot                                                  */
/*===============================================================*/

.ART_ACTIVE_DOT {

    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
    flex-shrink: 0;
    transition: background 0.2s, box-shadow 0.2s;
}

.ART_ACTIVE_DOT.ACTIVE {

    background: var(--NEON-GREEN);
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.8);
}

/*===============================================================*/
/*   Collapsible filter panel                                    */
/*===============================================================*/

.ART_FILTER_PANEL {

    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding: 0;
    border: 1px solid transparent;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                padding 0.3s ease;
}

.ART_FILTER_PANEL.OPEN {

    max-height: 600px;
    opacity: 1;
    padding: 0.8rem 0.9rem;
    border-color: rgba(0, 255, 0, 0.08);
    background: rgba(0, 255, 0, 0.01);
}


/* mobile padding handled by MAIN */

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*                  15c) CULINARY PORTAL STYLES          */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

.CUL_LAYOUT {

    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    width: 100%;
}

/*===============================================================*/
/*   Controls wrapper — search + filter toggle + panel           */
/*===============================================================*/

.CUL_CONTROLS {

    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/*===============================================================*/
/*   Search bar                                                  */
/*===============================================================*/

.CUL_SEARCH_WRAP {

    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.CUL_SEARCH_ICON {

    position: absolute;
    left: 0.75rem;
    width: 15px;
    height: 15px;
    color: var(--TEXT-MUTED);
    pointer-events: none;
    flex-shrink: 0;
}

.CUL_SEARCH_INPUT {

    width: 100%;
    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.18);
    color: var(--TEXT-MAIN);
    font-family: 'Courier New', monospace;
    font-size: 0.88rem;
    padding: 0.65rem 0.75rem 0.65rem 2.4rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.CUL_SEARCH_INPUT::placeholder {

    color: var(--TEXT-MUTED);
}

.CUL_SEARCH_INPUT:focus {

    border-color: rgba(0, 255, 0, 0.5);
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.08);
}

/*===============================================================*/
/*   Filter toggle button                                        */
/*===============================================================*/

.CUL_FILTER_TOGGLE {

    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.15);
    color: var(--TEXT-MUTED);
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    padding: 0.45rem 0.85rem;
    cursor: pointer;
    letter-spacing: 0.5px;
    align-self: flex-start;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.CUL_FILTER_TOGGLE:hover,
.CUL_FILTER_TOGGLE.OPEN {

    color: var(--NEON-GREEN);
    border-color: rgba(0, 255, 0, 0.4);
    background: rgba(0, 255, 0, 0.03);
}

.CUL_TOGGLE_ICON {

    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.CUL_TOGGLE_LABEL {

    flex-shrink: 0;
}

.CUL_TOGGLE_CHEVRON {

    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

/*===============================================================*/
/*   Active dot                                                  */
/*===============================================================*/

.CUL_ACTIVE_DOT {

    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
    flex-shrink: 0;
    transition: background 0.2s, box-shadow 0.2s;
}

.CUL_ACTIVE_DOT.ACTIVE {

    background: var(--NEON-GREEN);
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.8);
}

/*===============================================================*/
/*   Collapsible filter panel                                    */
/*===============================================================*/

.CUL_FILTER_PANEL {

    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding: 0;
    border: 1px solid transparent;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                padding 0.3s ease;
}

.CUL_FILTER_PANEL.OPEN {

    max-height: 600px;
    opacity: 1;
    padding: 0.8rem 0.9rem;
    border-color: rgba(0, 255, 0, 0.08);
    background: rgba(0, 255, 0, 0.01);
}



/* mobile padding handled by MAIN */

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*                  16) ADMIN PANEL STYLES                       */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

/*===============================================================*/
/*   Admin dashboard layout                                     */
/*===============================================================*/

.ADMIN_LAYOUT {

    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

/*===============================================================*/
/*   Admin panel — bordered card                                */
/*===============================================================*/

.ADMIN_PANEL {

    border: 1px solid rgba(0, 255, 0, 0.12);
    background: #111;
}

/*===============================================================*/
/*   Panel header — label + arrow toggle                        */
/*===============================================================*/

.ADMIN_PANEL_HEADER {

    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Courier New', monospace;
    font-size: 0.65rem;
    color: var(--TEXT-MUTED);
    letter-spacing: 1px;
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s, border-color 0.2s;
}

.ADMIN_PANEL_HEADER:hover {

    color: var(--TEXT-MAIN);
}

.ADMIN_PANEL_HEADER.OPEN {

    border-bottom-color: rgba(0, 255, 0, 0.08);
    color: var(--NEON-GREEN);
    opacity: 0.8;
}

/*===============================================================*/
/*   Arrow chevron                                              */
/*===============================================================*/

.ADMIN_PANEL_ARROW {

    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.28s ease;
    color: inherit;
}

.ADMIN_PANEL_ARROW SVG {

    width: 13px;
    height: 13px;
    display: block;
}

.ADMIN_PANEL_ARROW.OPEN {

    transform: rotate(180deg);
}

/*===============================================================*/
/*   Collapsible body                                           */
/*===============================================================*/

.ADMIN_COLLAPSIBLE {

    overflow: hidden;
    max-height: 0;
    padding: 0 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    transition: max-height 0.35s ease, padding 0.35s ease;
}

.ADMIN_COLLAPSIBLE.OPEN {

    max-height: 1000px;
    padding: 1.4rem 1.3rem;
}

.ADMIN_PANEL_DESC {

    font-size: 0.75rem;
    color: var(--TEXT-MUTED);
    line-height: 1.6;
    margin: 0;
}

.ADMIN_FIELD {

    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ADMIN_FIELD_LABEL {

    font-family: 'Courier New', monospace;
    font-size: 0.68rem;
    color: var(--TEXT-MUTED);
    letter-spacing: 0.5px;
}

.ADMIN_TEXTAREA {

    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.18);
    color: var(--TEXT-MAIN);
    font-family: 'Courier New', monospace;
    font-size: 0.82rem;
    padding: 0.6rem 0.8rem;
    resize: vertical;
    outline: none;
    line-height: 1.5;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}

.ADMIN_TEXTAREA::placeholder {

    color: var(--TEXT-MUTED);
}

.ADMIN_TEXTAREA:focus {

    border-color: rgba(0, 255, 0, 0.45);
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.07);
}

.ADMIN_FIELD_ROW {

    display: flex;
    gap: 0.6rem;
}

.ADMIN_BTN {

    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.35);
    color: var(--NEON-GREEN);
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    padding: 0.4rem 1rem;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: background 0.2s, box-shadow 0.2s;
}

.ADMIN_BTN:hover {

    background: rgba(0, 255, 0, 0.07);
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.12);
}

.ADMIN_BTN_MUTED {

    border-color: rgba(255, 255, 255, 0.1);
    color: var(--TEXT-MUTED);
}

.ADMIN_BTN_MUTED:hover {

    background: rgba(255, 255, 255, 0.04);
    box-shadow: none;
}

/*===============================================================*/
/*   Admin form — inline field row, spread                      */
/*===============================================================*/

.ADMIN_FIELD_INLINE {

    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.ADMIN_FIELD_ROW_SPREAD {

    gap: 2rem;
    flex-wrap: wrap;
}

/*===============================================================*/
/*   Toggle group — on/off radio pairs                          */
/*===============================================================*/

.ADMIN_TOGGLE_GROUP {

    display: flex;
    gap: 0.4rem;
}

.ADMIN_TOGGLE_OPTION {

    display: flex;
    align-items: center;
    cursor: pointer;
}

.ADMIN_TOGGLE_OPTION INPUT {

    display: none;
}

.ADMIN_TOGGLE_OPTION SPAN {

    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    color: var(--TEXT-MUTED);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 0.25rem 0.6rem;
    transition: color 0.2s, border-color 0.2s;
}

.ADMIN_TOGGLE_OPTION INPUT:CHECKED + SPAN {

    color: var(--NEON-GREEN);
    border-color: rgba(0,255,0,0.4);
}

/*===============================================================*/
/*   Icon picker grid                                           */
/*===============================================================*/

.ADMIN_ICON_GRID {

    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ADMIN_ICON_OPTION {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    padding: 0.5rem 0.7rem;
    border: 1px solid rgba(255,255,255,0.06);
    transition: border-color 0.2s, background 0.2s;
}

.ADMIN_ICON_OPTION INPUT {

    display: none;
}

.ADMIN_ICON_OPTION.SELECTED {

    border-color: rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.04);
}

.ADMIN_ICON_PREVIEW SVG {

    width: 20px;
    height: 20px;
    display: block;
}

.ADMIN_ICON_LABEL {

    font-family: 'Courier New', monospace;
    font-size: 0.6rem;
    color: var(--TEXT-MUTED);
    letter-spacing: 0.3px;
}

/*===============================================================*/
/*   Select dropdown                                            */
/*===============================================================*/

.ADMIN_SELECT {

    background: transparent;
    border: 1px solid rgba(0,255,0,0.18);
    color: var(--TEXT-MAIN);
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
}

.ADMIN_SELECT:focus {

    border-color: rgba(0,255,0,0.45);
}

/*===============================================================*/
/*   Date input                                                 */
/*===============================================================*/

.ADMIN_INPUT {

    background: transparent;
    border: 1px solid rgba(0,255,0,0.18);
    color: var(--TEXT-MAIN);
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
    outline: none;
    transition: border-color 0.2s;
    color-scheme: dark;
}

.ADMIN_INPUT:focus {

    border-color: rgba(0,255,0,0.45);
}

/*===============================================================*/
/*   Character count                                            */
/*===============================================================*/

.ADMIN_CHARCOUNT {

    font-family: 'Courier New', monospace;
    font-size: 0.63rem;
    color: var(--TEXT-MUTED);
    text-align: right;
}

/*===============================================================*/
/*   Field hint text                                            */
/*===============================================================*/

.ADMIN_FIELD_HINT {

    opacity: 0.5;
    font-size: 0.6rem;
}

/*===============================================================*/
/*   Live preview bar                                           */
/*===============================================================*/

.ADMIN_PREVIEW_BAR {

    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid #FF0000;
    padding: 0.55rem 0.9rem;
    transition: border-left-color 0.3s, opacity 0.3s;
}

.ADMIN_PREVIEW_ICON {

    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.ADMIN_PREVIEW_TEXT {

    font-size: 0.72rem;
    color: var(--TEXT-MUTED);
    line-height: 1.4;
}

/*===============================================================*/
/*   Announcement toast icon                                    */
/*===============================================================*/

.ANNOUNCE_TOAST_ICON {

    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/*===============================================================*/
/*   Admin form save animation                                  */
/*===============================================================*/

.ADMIN_PANEL_SAVING {

    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    transition: min-height 0.3s ease;
}

.ADMIN_SAVE_CIRCLE {

    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-right-color: currentColor;
    animation: admin-spin 0.7s linear infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s;
}

.ADMIN_SAVE_CIRCLE SVG {

    width: 22px;
    height: 22px;
    opacity: 0;
    transition: opacity 0.3s;
}

.ADMIN_SAVE_CIRCLE.DONE {

    animation: none;
    border-color: currentColor;
}

.ADMIN_SAVE_CIRCLE.DONE SVG {

    opacity: 1;
}

@keyframes admin-spin {
    to { transform: rotate(360deg); }
}

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*              17) ALTCHA — PROOF-OF-WORK WIDGET                */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

/*===============================================================*/
/*   Custom properties passed into the shadow DOM via CSS vars   */
/*===============================================================*/

ALTCHA-WIDGET {

    /* Background matches the site dark base. */
    --altcha-color-base:         #111111;
    /* Label/status text inherits muted grey. */
    --altcha-color-text:         #999999;
    /* Idle border matches the site input border style. */
    --altcha-color-border:       rgba(0, 255, 0, 0.18);
    /* Focus/active border matches site input focus style. */
    --altcha-color-border-focus: rgba(0, 255, 0, 0.50);
    /* Brand accent — neon green throughout. */
    --altcha-color-brand:        #00FF00;
    /* Verified state — neon green tick. */
    --altcha-color-success:      #00FF00;
    /* Error state — site red. */
    --altcha-color-error:        #FF4444;
    /* Full width inside any login/register container. */
    display: block;
    width: 100%;
}

/*===============================================================*/
/*   Switch link — toggles between login and register forms      */
/*===============================================================*/

.SIDEBAR_SWITCH_LINK {

    font-family: 'Courier New', monospace;
    font-size: 0.65rem;
    color: var(--TEXT-MUTED);
    letter-spacing: 0.5px;
    margin-top: 0.6rem;
}

/*===============================================================*/
/*   Clickable portion of the switch link                        */
/*===============================================================*/

.SIDEBAR_SWITCH_LINK SPAN {

    color: var(--TEXT-MUTED);
    cursor: pointer;
    transition: color 0.2s;
}

.SIDEBAR_SWITCH_LINK SPAN:hover {

    color: var(--NEON-GREEN);
}

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*                  18) ADMIN DASHBOARD — MOBILE                 */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

@media (max-width: 768px) {

    /*===============================================================*/
    /*   Admin layout fills full width, no sidebar gap              */
    /*===============================================================*/

    .ADMIN_LAYOUT {

        gap: 0.8rem;
    }

    /*===============================================================*/
    /*   Panel header — slightly taller tap target on mobile        */
    /*===============================================================*/

    .ADMIN_PANEL_HEADER {

        padding: 1rem 1rem;
        font-size: 0.7rem;
    }

    .ADMIN_PANEL_ARROW SVG {

        width: 15px;
        height: 15px;
    }

    /*===============================================================*/
    /*   Collapsible body — full padding on mobile                  */
    /*===============================================================*/

    .ADMIN_COLLAPSIBLE.OPEN {

        padding: 1.2rem 1rem;
    }

    /*===============================================================*/
    /*   Icon grid — wrap more freely on narrow screens             */
    /*===============================================================*/

    .ADMIN_ICON_GRID {

        gap: 0.4rem;
    }

    .ADMIN_ICON_OPTION {

        padding: 0.6rem 0.8rem;
        flex: 1;
        min-width: calc(33% - 0.4rem);
        justify-content: center;
    }

    .ADMIN_ICON_PREVIEW SVG {

        width: 22px;
        height: 22px;
    }

    .ADMIN_ICON_LABEL {

        font-size: 0.62rem;
    }

    /*===============================================================*/
    /*   Font + bold row — stack on mobile                          */
    /*===============================================================*/

    .ADMIN_FIELD_ROW_SPREAD {

        flex-direction: column;
        gap: 1rem;
    }

    /*===============================================================*/
    /*   Buttons — full width on mobile                             */
    /*===============================================================*/

    .ADMIN_FIELD_ROW .ADMIN_BTN {

        flex: 1;
        text-align: center;
        padding: 0.65rem 1rem;
        font-size: 0.78rem;
    }

    /*===============================================================*/
    /*   Textarea — taller on mobile for comfort                    */
    /*===============================================================*/

    .ADMIN_TEXTAREA {

        font-size: 0.88rem;
        padding: 0.7rem 0.8rem;
    }

    /*===============================================================*/
    /*   Select + date input — full width, taller                   */
    /*===============================================================*/

    .ADMIN_SELECT,
    .ADMIN_INPUT {

        width: 100%;
        font-size: 0.82rem;
        padding: 0.5rem 0.7rem;
    }

    /*===============================================================*/
    /*   Preview bar — readable on small screens                    */
    /*===============================================================*/

    .ADMIN_PREVIEW_TEXT {

        font-size: 0.78rem;
        line-height: 1.5;
    }

    /*===============================================================*/
    /*   Save circle container                                      */
    /*===============================================================*/

    .ADMIN_PANEL_SAVING {

        min-height: 100px;
    }
}
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*                  15b-ii) ARTWORK GRID + CARDS                 */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

/*===============================================================*/
/*   Grid — 3 columns desktop, 2 tablet, 1 mobile               */
/*===============================================================*/

.ART_GRID {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.4rem;
    width:                 100%;
}

.ART_GRID_EMPTY {
    grid-column: 1 / -1;
}

/*===============================================================*/
/*   Art card — thumbnail on top, info strip below              */
/*===============================================================*/

.ART_CARD {
    background:     #111;
    border:         1px solid rgba(0,255,0,0.15);
    display:        flex;
    flex-direction: column;
    position:       relative;
    overflow:       hidden;
    transition:     border-color 0.3s, box-shadow 0.3s;
}

.ART_CARD::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     linear-gradient(135deg, rgba(0,255,0,0.03) 0%, transparent 60%);
    pointer-events: none;
}

.ART_CARD:hover {
    border-color: rgba(0,255,0,0.5);
    box-shadow:   0 0 20px rgba(0,255,0,0.06), inset 0 0 30px rgba(0,255,0,0.02);
}

/*===============================================================*/
/*   Thumbnail link + image                                      */
/*===============================================================*/

.ART_CARD_THUMB_LINK {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #0A0A0A;
    flex-shrink: 0;
}

.ART_CARD_THUMB {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.4s ease, opacity 0.3s ease;
}

.ART_CARD:hover .ART_CARD_THUMB {
    transform: scale(1.03);
    opacity:   0.85;
}

.ART_CARD_THUMB_EMPTY {
    width:       100%;
    height:      100%;
    display:     flex;
    align-items: center;
    justify-content: center;
    color:       rgba(0,255,0,0.2);
    font-size:   0.7rem;
    letter-spacing: 2px;
}

/*===============================================================*/
/*   Info strip                                                  */
/*===============================================================*/

.ART_CARD_INFO {
    padding:        1rem 1.2rem 1.2rem;
    display:        flex;
    flex-direction: column;
    gap:            0.45rem;
    flex:           1;
}

.ART_CARD_TITLE {
    font-size:   1rem;
    font-weight: normal;
    margin:      0;
    line-height: 1.3;
}

.ART_CARD_TITLE_LINK {
    color:           var(--TEXT-MAIN);
    text-decoration: none;
    transition:      color 0.2s;
}

.ART_CARD:hover .ART_CARD_TITLE_LINK {
    color: var(--NEON-GREEN);
}

.ART_CARD_META {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    flex-wrap:   wrap;
    font-size:   0.72rem;
    color:       var(--TEXT-MUTED);
}

.ART_CARD_TAGS {
    margin-top: 0.1rem;
}

.ART_CARD_LINK {
    margin-top:  auto;
    padding-top: 0.5rem;
    font-size:   0.72rem;
}

/*===============================================================*/
/*   Tablet — 2 columns                                          */
/*===============================================================*/

@media (max-width: 1024px) {

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

/*===============================================================*/
/*   Mobile — single column stack                                */
/*===============================================================*/

@media (max-width: 768px) {

    .ART_GRID {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*                  15c) ARTWORK VIEW PAGE                       */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

/*===============================================================*/
/*   Outer layout column — matches ART_LAYOUT flex direction     */
/*===============================================================*/

.ART_VIEW_LAYOUT {

    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 2rem 0;
}

/*===============================================================*/
/*   Back link — muted green, matches READ_MORE style            */
/*===============================================================*/

.ART_VIEW_BACK {

    display: inline-block;
    color: var(--NEON-GREEN);
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 1px;
    opacity: 0.6;
    transition: opacity 0.2s, text-shadow 0.2s;
}

.ART_VIEW_BACK:hover {

    opacity: 1;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.4);
}

/*===============================================================*/
/*   Main card — mirrors POST_CARD / STATIC_PAGE_CARD styling    */
/*===============================================================*/

.ART_VIEW_CARD {

    background: #111;
    border: 1px solid rgba(0, 255, 0, 0.15);
    padding: 1.8rem 2rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/*===============================================================*/
/*   Green gradient wash — same decorative pseudo as POST_CARD   */
/*===============================================================*/

.ART_VIEW_CARD::before {

    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 255, 0, 0.03) 0%, transparent 60%);
    pointer-events: none;
}

/*===============================================================*/
/*   Post title — logo font, larger than card feed titles        */
/*===============================================================*/

.ART_VIEW_TITLE {

    font-family: 'ZIZZISTUDIOLOGO', monospace;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    color: var(--TEXT-MAIN);
    font-weight: normal;
    line-height: 1.15;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

/*===============================================================*/
/*   Thin green rule separating sections inside the card         */
/*===============================================================*/

.ART_VIEW_DIVIDER {

    width: 100%;
    height: 1px;
    background: rgba(0, 255, 0, 0.08);
    margin: 1.4rem 0;
}

/*===============================================================*/
/*   Artwork image — full width, capped height, object-fit cover */
/*===============================================================*/

.ART_VIEW_IMG {

    width: 100%;
    max-height: 520px;
    object-fit: contain;
    border: 1px solid rgba(0, 255, 0, 0.12);
    display: block;
    background: #0A0A0A;
}

/*===============================================================*/
/*   Placeholder shown when image path is empty                  */
/*===============================================================*/

.ART_VIEW_IMG_PLACEHOLDER {

    width: 100%;
    height: 280px;
    background: #0A0A0A;
    border: 1px solid rgba(0, 255, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 255, 0, 0.2);
    font-size: 0.75rem;
    letter-spacing: 2px;
}

/*===============================================================*/
/*   Body text — paragraphs with breathing room between them     */
/*===============================================================*/

.ART_VIEW_BODY {

    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.6rem;
}

.ART_VIEW_BODY P {

    font-size: 0.9rem;
    color: #888;
    line-height: 1.75;
    max-width: 64ch;
}

/*===============================================================*/
/*   Prev / Next nav row below the card                          */
/*===============================================================*/

.ART_VIEW_NAV {

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.4rem;
}

.ART_VIEW_NAV_LINK {

    color: var(--NEON-GREEN);
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 1px;
    opacity: 0.55;
    transition: opacity 0.2s, text-shadow 0.2s;
}

.ART_VIEW_NAV_LINK:hover {

    opacity: 1;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.4);
}

/*===============================================================*/
/*   Mobile — tighter card padding                               */
/*===============================================================*/

@media (max-width: 768px) {

    .ART_VIEW_CARD {

        padding: 1.2rem 1rem;
    }

    .ART_VIEW_IMG {

        max-height: 320px;
    }
}

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*                  15c-ii) ARTWORK VIEW — FLIPPER               */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

/*===============================================================*/
/*   Header block — title + meta row                             */
/*===============================================================*/

.ART_VIEW_HEADER {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
}

/*===============================================================*/
/*   Title — large, logo font                                    */
/*===============================================================*/

.ART_VIEW_TITLE {
    font-family:  'ZIZZISTUDIOLOGO', monospace;
    font-size:    clamp(1.5rem, 4vw, 2.2rem);
    color:        var(--TEXT-MAIN);
    font-weight:  normal;
    line-height:  1.15;
    margin:       0;
}

/*===============================================================*/
/*   Description paragraph                                       */
/*===============================================================*/

.ART_VIEW_DESC {
    font-size:   0.9rem;
    color:       #888;
    line-height: 1.75;
    max-width:   72ch;
    margin:      0;
}

/*===============================================================*/
/*   Tags row below the flipper                                  */
/*===============================================================*/

.ART_VIEW_TAGS {
    margin-top: 0.2rem;
}

/*===============================================================*/
/*   LARGE FLIPPER CONTAINER                                     */
/*   Full-width, aspect-ratio capped, images swap in-place       */
/*===============================================================*/

.ART_FLIPPER {
    position:   relative;
    width:      100%;
    background: rgba(0,0,0,0.4);
    border:     1px solid rgba(0,255,0,0.12);
    overflow:   hidden;
    user-select: none;
}

/*===============================================================*/
/*   Stage — holds all images stacked; only ACTIVE is visible    */
/*===============================================================*/

.ART_FLIPPER_STAGE {
    position: relative;
    width:    100%;
    min-height: 200px;
}

.ART_FLIPPER_IMG {
    display:    none;
    width:      100%;
    max-height: 80vh;
    object-fit: contain;
    background: #0A0A0A;
    vertical-align: top;
}

.ART_FLIPPER_IMG.ACTIVE {
    display: block;
}

/*===============================================================*/
/*   Arrow buttons — float over the image edges                  */
/*===============================================================*/

.ART_FLIPPER_BTN {
    position:    absolute;
    top:         50%;
    transform:   translateY(-50%);
    background:  rgba(0,0,0,0.55);
    border:      1px solid rgba(0,255,0,0.2);
    color:       var(--TEXT-MAIN);
    width:       42px;
    height:      42px;
    display:     flex;
    align-items: center;
    justify-content: center;
    cursor:      pointer;
    z-index:     2;
    transition:  background 0.15s, border-color 0.15s;
    padding:     0;
}

.ART_FLIPPER_BTN:hover {
    background:   rgba(0,255,0,0.1);
    border-color: rgba(0,255,0,0.5);
}

.ART_FLIPPER_BTN svg {
    width:         18px;
    height:        18px;
    flex-shrink:   0;
    pointer-events: none;
}

.ART_FLIPPER_PREV { left:  10px; }
.ART_FLIPPER_NEXT { right: 10px; }

/*===============================================================*/
/*   Dot strip — centered below the image inside the flipper     */
/*===============================================================*/

.ART_FLIPPER_DOTS {
    position:  absolute;
    bottom:    38px;
    left:      50%;
    transform: translateX(-50%);
    display:   flex;
    gap:       6px;
    z-index:   2;
}

.ART_FLIPPER_DOT {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    rgba(255,255,255,0.2);
    border:        1px solid rgba(255,255,255,0.15);
    cursor:        pointer;
    padding:       0;
    transition:    background 0.2s, border-color 0.2s;
}

.ART_FLIPPER_DOT.ACTIVE {
    background:   rgba(0,255,0,0.75);
    border-color: rgba(0,255,0,0.55);
}

/*===============================================================*/
/*   Counter — "1 / 4" in the bottom-right corner               */
/*===============================================================*/

.ART_FLIPPER_COUNTER {
    position:    absolute;
    bottom:      10px;
    right:       14px;
    font-size:   0.7rem;
    color:       rgba(255,255,255,0.45);
    letter-spacing: 1px;
    z-index:     2;
    display:     flex;
    gap:         3px;
    align-items: center;
    pointer-events: none;
}

.ART_FLIP_SEP {
    opacity: 0.5;
}

/*===============================================================*/
/*   Mobile — tighter arrows                                     */
/*===============================================================*/

@media (max-width: 768px) {

    .ART_FLIPPER_BTN {
        width:  34px;
        height: 34px;
    }

    .ART_FLIPPER_IMG {
        max-height: 60vh;
    }
}

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*                  15d) LITERATURE VIEW PAGE                    */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

/*===============================================================*/
/*   Outer layout column — matches LIT_LAYOUT flex direction     */
/*===============================================================*/

.LIT_VIEW_LAYOUT {

    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 2rem 0;
}

/*===============================================================*/
/*   Back link — muted green, matches READ_MORE / ART_VIEW_BACK  */
/*===============================================================*/

.LIT_VIEW_BACK {

    display: inline-block;
    color: var(--NEON-GREEN);
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 1px;
    opacity: 0.6;
    transition: opacity 0.2s, text-shadow 0.2s;
}

.LIT_VIEW_BACK:hover {

    opacity: 1;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.4);
}

/*===============================================================*/
/*   Header card — #111 bg, green wash, title + meta row         */
/*===============================================================*/

.LIT_VIEW_HEADER {

    background: #111;
    border: 1px solid rgba(0, 255, 0, 0.15);
    padding: 1.6rem 1.8rem;
    position: relative;
    overflow: hidden;
}

.LIT_VIEW_HEADER.HAS_FEAT_IMG {

    display: flex;
    align-items: flex-start;
    gap: 1.6rem;
    padding: 0;
    overflow: hidden;
}

.LIT_VIEW_HEADER_MAIN {

    flex: 1;
    min-width: 0;
    padding: 1.6rem 1.8rem;
}

/*===============================================================*/
/*   Green gradient wash — same decorative pseudo as POST_CARD   */
/*===============================================================*/

.LIT_VIEW_HEADER::before {

    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 255, 0, 0.04) 0%, transparent 55%);
    pointer-events: none;
}

/*===============================================================*/
/*   Post title — logo font, large, sits above meta row          */
/*===============================================================*/

.LIT_VIEW_TITLE {

    font-family: 'ZIZZISTUDIOLOGO', monospace;
    font-size: clamp(1.4rem, 4vw, 2rem);
    color: var(--TEXT-MAIN);
    font-weight: normal;
    line-height: 1.15;
    margin-bottom: 1rem;
}

/*===============================================================*/
/*   Meta row — avatar + author + category + date + replies      */
/*===============================================================*/

.LIT_VIEW_META {

    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

/*===============================================================*/
/*   Small circular avatar in meta row                           */
/*===============================================================*/

.LIT_VIEW_AVATAR {

    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(0, 255, 0, 0.4);
    object-fit: cover;
    background: #0A0A0A;
    display: block;
    flex-shrink: 0;
}

/*===============================================================*/
/*   Header tags — below meta row in the header card             */
/*===============================================================*/

.LIT_VIEW_HEADER_TAGS {

    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.8rem;
}

/*===============================================================*/
/*   Body card — darker bg, dimmer border, content + tags        */
/*===============================================================*/

/*===============================================================*/
/*   Featured image — full width between header and body         */
/*===============================================================*/

.LIT_VIEW_FEAT_IMG {

    width: 220px;
    flex-shrink: 0;
    align-self: stretch;
    overflow: hidden;
    background: #0A0A0A;
}

.LIT_VIEW_FEAT_IMG IMG {

    display: block;
    width: 100%;
    height: 100%;
    min-height: 160px;
    object-fit: cover;
    object-position: center top;
    border-left: 1px solid rgba(0, 255, 0, 0.15);
}

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

.LIT_VIEW_BODY_CARD {

    background: #0D0D0D;
    border: 1px solid rgba(0, 255, 0, 0.08);
    border-top: 1px solid rgba(0, 255, 0, 0.2);
    padding: 1.6rem 1.8rem;
}

/*===============================================================*/
/*   Body text — paragraphs with breathing room between them     */
/*===============================================================*/

.LIT_VIEW_BODY {

    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-bottom: 1.6rem;
}

.LIT_VIEW_BODY P {

    font-size: 0.9rem;
    color: #888;
    line-height: 1.8;
    max-width: 62ch;
}

/*===============================================================*/
/*   Tag row at bottom of body card                              */
/*===============================================================*/

.LIT_VIEW_FOOTER {

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 255, 0, 0.07);
}

/*===============================================================*/
/*   Prev / Next nav row below the cards                         */
/*===============================================================*/

.LIT_VIEW_NAV {

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.4rem;
}

.LIT_VIEW_NAV_LINK {

    color: var(--NEON-GREEN);
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 1px;
    opacity: 0.55;
    transition: opacity 0.2s, text-shadow 0.2s;
}

.LIT_VIEW_NAV_LINK:hover {

    opacity: 1;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.4);
}

/*===============================================================*/
/*   Delete button — owner-only, sits in nav row / card footer   */
/*===============================================================*/

.DELETE_BTN {
    background:     transparent;
    border:         1px solid rgba(255,40,40,0.3);
    color:          rgba(255,80,80,0.55);
    font-size:      0.7rem;
    letter-spacing: 1px;
    padding:        3px 10px;
    cursor:         pointer;
    transition:     color 0.2s, border-color 0.2s, background 0.2s;
}

.DELETE_BTN:hover {
    color:            rgba(255,80,80,1);
    border-color:     rgba(255,80,80,0.7);
    background:       rgba(255,40,40,0.07);
}

.PROJ_CARD_DELETE_ROW {
    display:    flex;
    justify-content: flex-end;
    padding-top: 0.6rem;
    margin-top:  0.2rem;
    border-top:  1px solid rgba(255,40,40,0.08);
}



/*===============================================================*/
/*   Mobile — tighter card padding                               */
/*===============================================================*/

@media (max-width: 768px) {

    .LIT_VIEW_HEADER,
    .LIT_VIEW_BODY_CARD {

        padding: 1.2rem 1rem;
    }

    .LIT_VIEW_HEADER.HAS_FEAT_IMG {

        flex-direction: column;
        padding: 0;
    }

    .LIT_VIEW_HEADER.HAS_FEAT_IMG .LIT_VIEW_HEADER_MAIN {

        padding: 1.2rem 1rem;
    }

    .LIT_VIEW_FEAT_IMG {

        width: 100%;
        align-self: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: 1px solid rgba(0, 255, 0, 0.15);
        background: #0A0A0A;
        padding: 0.6rem;
    }

    .LIT_VIEW_FEAT_IMG IMG {

        width: auto !important;
        height: auto !important;
        max-width: 45%;
        min-height: unset;
        object-fit: unset;
        border-left: none;
        border-top: none;
    }
}

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*               15e) LITERATURE CREATE PAGE                     */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

/*===============================================================*/
/*   Outer layout — flex column, matches other view layouts      */
/*===============================================================*/

.LIT_CREATE_LAYOUT {

    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 2rem 0;
    max-width: 860px;
}

/*===============================================================*/
/*   Page heading row                                            */
/*===============================================================*/

.LIT_CREATE_HEADING {

    display: flex;
    align-items: center;
    gap: 1rem;
}

.LIT_CREATE_LABEL {

    font-size: 0.75rem;
    color: rgba(0, 255, 0, 0.6);
    letter-spacing: 1px;
}

/*===============================================================*/
/*   Form wrapper — no actual <form> tag, AJAX submit            */
/*===============================================================*/

.LIT_CREATE_FORM {

    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/*===============================================================*/
/*   Field row — label stacked above input                       */
/*===============================================================*/

.LIT_FIELD_ROW {

    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/*===============================================================*/
/*   Field label — muted green, monospace, small                 */
/*===============================================================*/

.LIT_FIELD_LABEL {

    font-size: 0.7rem;
    color: rgba(0, 255, 0, 0.55);
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/*===============================================================*/
/*   Character counter inside label                             */
/*===============================================================*/

.LIT_CHAR_COUNT {

    color: var(--TEXT-MUTED);
    font-size: 0.65rem;
    letter-spacing: 0.5px;
}

/*===============================================================*/
/*   Text inputs — dark bg, thin green border, mono font         */
/*===============================================================*/

.LIT_FIELD_INPUT {

    background: #0D0D0D;
    border: 1px solid rgba(0, 255, 0, 0.15);
    color: var(--TEXT-MAIN);
    font-family: 'Courier New', monospace;
    font-size: 0.88rem;
    padding: 0.6rem 0.75rem;
    width: 100%;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.LIT_FIELD_INPUT:focus {

    border-color: rgba(0, 255, 0, 0.4);
    box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.05);
}

.LIT_FIELD_INPUT::placeholder {

    color: #333;
}

/*===============================================================*/
/*   Textarea — same as input, taller                            */
/*===============================================================*/

.LIT_FIELD_TEXTAREA {

    background: #0D0D0D;
    border: 1px solid rgba(0, 255, 0, 0.15);
    color: var(--TEXT-MAIN);
    font-family: 'Courier New', monospace;
    font-size: 0.88rem;
    padding: 0.6rem 0.75rem;
    width: 100%;
    outline: none;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
    line-height: 1.6;
}

.LIT_FIELD_TEXTAREA:focus {

    border-color: rgba(0, 255, 0, 0.4);
    box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.05);
}

.LIT_FIELD_TEXTAREA::placeholder {

    color: #333;
}

.LIT_EXCERPT_AREA {

    min-height: 80px;
}

/*===============================================================*/
/*   Select dropdown — styled to match inputs                    */
/*===============================================================*/

.LIT_FIELD_SELECT {

    background: #0D0D0D;
    border: 1px solid rgba(0, 255, 0, 0.15);
    color: var(--TEXT-MAIN);
    font-family: 'Courier New', monospace;
    font-size: 0.88rem;
    padding: 0.6rem 0.75rem;
    width: 100%;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpolyline points='1,1 6,7 11,1' fill='none' stroke='rgba(0,255,0,0.4)' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

.LIT_FIELD_SELECT:focus {

    border-color: rgba(0, 255, 0, 0.4);
}

/*===============================================================*/
/*   Category wrap — select + optional new-category input        */
/*===============================================================*/

.LIT_CAT_WRAP {

    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.LIT_CAT_NEW {

    margin-top: 0.1rem;
}

/*===============================================================*/
/*   Slug wrap — prefix label beside input                       */
/*===============================================================*/

.LIT_SLUG_WRAP {

    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid rgba(0, 255, 0, 0.15);
    background: #0D0D0D;
    transition: border-color 0.2s;
}

.LIT_SLUG_WRAP:focus-within {

    border-color: rgba(0, 255, 0, 0.4);
}

.LIT_SLUG_PREFIX {

    font-size: 0.72rem;
    color: #444;
    padding: 0.6rem 0 0.6rem 0.75rem;
    white-space: nowrap;
    font-family: 'Courier New', monospace;
    flex-shrink: 0;
}

.LIT_SLUG_INPUT {

    border: none !important;
    box-shadow: none !important;
    background: transparent;
    flex: 1;
}

/*===============================================================*/
/*   EDITOR WRAPPER — contains toolbar + body                    */
/*===============================================================*/

.LIT_EDITOR_WRAP {

    border: 1px solid rgba(0, 255, 0, 0.15);
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s;
}

.LIT_EDITOR_WRAP:focus-within {

    border-color: rgba(0, 255, 0, 0.35);
}

/*===============================================================*/
/*   TOOLBAR — thin strip at top of editor                       */
/*===============================================================*/

.LIT_TOOLBAR {

    background: #0D0D0D;
    border-bottom: 1px solid rgba(0, 255, 0, 0.1);
    padding: 0.4rem 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

/*===============================================================*/
/*   Toolbar button groups                                       */
/*===============================================================*/

.LIT_TB_GROUP {

    display: flex;
    align-items: center;
    gap: 0.2rem;
}

/*===============================================================*/
/*   Toolbar separator                                           */
/*===============================================================*/

.LIT_TB_SEP {

    width: 1px;
    height: 16px;
    background: rgba(0, 255, 0, 0.1);
    margin: 0 0.3rem;
    flex-shrink: 0;
}

/*===============================================================*/
/*   Toolbar label — muted prefix                               */
/*===============================================================*/

.LIT_TB_LABEL {

    font-size: 0.62rem;
    color: rgba(0, 255, 0, 0.4);
    letter-spacing: 0.5px;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
    margin-right: 0.3rem;
}

/*===============================================================*/
/*   Toolbar format buttons — B I U H2 H3 H4 H5                 */
/*===============================================================*/

.LIT_TB_BTN {

    background: none;
    border: 1px solid transparent;
    color: #555;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    padding: 0.2rem 0.45rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    line-height: 1;
}

.LIT_TB_BTN:hover {

    color: var(--NEON-GREEN);
    border-color: rgba(0, 255, 0, 0.25);
    background: rgba(0, 255, 0, 0.04);
}

.LIT_TB_BTN.ACTIVE {

    color: var(--NEON-GREEN);
    border-color: rgba(0, 255, 0, 0.3);
    background: rgba(0, 255, 0, 0.06);
}

.LIT_TB_ITALIC  B,
.LIT_TB_ITALIC  I  { font-style: italic; }
.LIT_TB_UNDERLINE U { text-decoration: underline; }

/*===============================================================*/
/*   Toolbar font select                                         */
/*===============================================================*/

.LIT_TB_SELECT {

    background: #111;
    border: 1px solid rgba(0, 255, 0, 0.12);
    color: #777;
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    padding: 0.2rem 1.6rem 0.2rem 0.45rem;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpolyline points='1,1 5,5 9,1' fill='none' stroke='rgba(0,255,0,0.3)' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.4rem center;
    transition: border-color 0.2s, color 0.2s;
    max-width: 180px;
}

.LIT_TB_SELECT:focus,
.LIT_TB_SELECT:hover {

    border-color: rgba(0, 255, 0, 0.3);
    color: var(--TEXT-MAIN);
}

/*===============================================================*/
/*   Toolbar color picker                                        */
/*===============================================================*/

.LIT_TB_COLOR_GROUP {

    gap: 0.4rem;
}

.LIT_TB_COLOR {

    width: 28px;
    height: 22px;
    border: 1px solid rgba(0, 255, 0, 0.2);
    background: none;
    padding: 1px;
    cursor: pointer;
    outline: none;
}

.LIT_TB_COLOR:hover {

    border-color: rgba(0, 255, 0, 0.5);
}

/*===============================================================*/
/*   EDITOR BODY — contenteditable writing area                  */
/*===============================================================*/

.LIT_EDITOR_BODY {

    background: #0A0A0A;
    color: #E0E0E0;
    font-family: 'Courier New', monospace;
    font-size: 0.92rem;
    line-height: 1.8;
    padding: 1.2rem 1.4rem;
    min-height: 320px;
    outline: none;
    caret-color: var(--NEON-GREEN);
}

/*===============================================================*/
/*   Placeholder — shown via CSS when empty                      */
/*===============================================================*/

.LIT_EDITOR_BODY:empty::before {

    content: attr(data-placeholder);
    color: #2a2a2a;
    pointer-events: none;
}

/*===============================================================*/
/*   Heading styles inside editor                                */
/*===============================================================*/

/*===============================================================*/
/*   Heading styles — scoped to .LIT_POST                        */
/*   Applied in both the editor (#LIT_EDITOR_BODY) and          */
/*   view.php (.LIT_VIEW_BODY). No effect outside these areas.  */
/*===============================================================*/

.LIT_POST H2,
.LIT_EDITOR_BODY H2 {

    font-size: 1.6rem;
    color: var(--TEXT-MAIN);
    font-weight: normal;
    margin: 1rem 0 0.5rem;
    line-height: 1.2;
}

.LIT_POST H3,
.LIT_EDITOR_BODY H3 {

    font-size: 1.35rem;
    color: var(--TEXT-MAIN);
    font-weight: normal;
    margin: 0.9rem 0 0.4rem;
    line-height: 1.2;
}

.LIT_POST H4,
.LIT_EDITOR_BODY H4 {

    font-size: 1.15rem;
    color: var(--TEXT-MUTED);
    font-weight: normal;
    margin: 0.75rem 0 0.35rem;
    line-height: 1.3;
}

.LIT_POST H5,
.LIT_EDITOR_BODY H5 {

    font-size: 1.0rem;
    color: rgba(0, 255, 0, 0.6);
    font-weight: bold;
    letter-spacing: 0.8px;
    margin: 0.65rem 0 0.3rem;
    line-height: 1.3;
}

/*===============================================================*/
/*   UL list — scoped to post body + editor                      */
/*   Bullet: styled green ❯ arrow, consistent across fonts       */
/*===============================================================*/

.LIT_POST UL,
.LIT_EDITOR_BODY UL {

    list-style: none;
    margin: 0.75rem 0 0.75rem 0.25rem;
    padding: 0;
}

.LIT_POST UL LI,
.LIT_EDITOR_BODY UL LI {

    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.35rem;
    line-height: 1.6;
}

.LIT_POST UL LI::before,
.LIT_EDITOR_BODY UL LI::before {

    content: '❯';
    position: absolute;
    left: 0;
    top: 0.05em;
    color: var(--NEON-GREEN);
    font-family: 'Courier New', monospace !important;
    font-size: 0.72em;
    font-weight: bold;
    font-style: normal;
    line-height: 1.6;
    filter: drop-shadow(0 0 4px rgba(0, 255, 0, 0.45));
}

/*===============================================================*/
/*   Links — scoped to .LIT_VIEW_BODY (view.php body output)    */
/*===============================================================*/

.LIT_VIEW_BODY A {
    color: #00FF00 !important;
    text-decoration: none !important;
}

.LIT_VIEW_BODY A:HOVER {
    text-decoration: underline !important;
}

/*===============================================================*/
/*   Action row — status message + save + publish buttons        */
/*===============================================================*/

.LIT_CREATE_ACTIONS {

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
    padding-top: 0.4rem;
}

.LIT_SAVE_STATUS {

    font-size: 0.72rem;
    letter-spacing: 0.5px;
    font-family: 'Courier New', monospace;
    margin-right: auto;
    color: rgba(0, 255, 0, 0.7);
}

/*===============================================================*/
/*   Buttons — draft (muted) and publish (green)                 */
/*===============================================================*/

.LIT_BTN {

    background: none;
    border: 1px solid;
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    letter-spacing: 1px;
    padding: 0.5rem 1.1rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.LIT_BTN_DRAFT {

    color: #555;
    border-color: #333;
}

.LIT_BTN_DRAFT:hover {

    color: var(--TEXT-MAIN);
    border-color: #555;
    background: rgba(255, 255, 255, 0.03);
}

.LIT_BTN_PUBLISH {

    color: var(--NEON-GREEN);
    border-color: rgba(0, 255, 0, 0.35);
}

.LIT_BTN_PUBLISH:hover {

    background: rgba(0, 255, 0, 0.06);
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.1);
}

/*===============================================================*/
/*   Mobile — stack toolbar, tighten padding                     */
/*===============================================================*/

@media (max-width: 768px) {

    .LIT_TOOLBAR {

        gap: 0.4rem;
    }

    .LIT_TB_SELECT {

        max-width: 130px;
    }

    .LIT_CREATE_ACTIONS {

        flex-wrap: wrap;
    }
}

/*===============================================================*/
/*   Font size select — narrower than font selector              */
/*===============================================================*/

.LIT_TB_SIZE_SELECT {

    max-width: 90px;
}

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*           15f) LITERATURE CREATE — SETTINGS PANEL             */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

/*===============================================================*/
/*   Settings panel wrapper                                      */
/*===============================================================*/

.LIT_SETTINGS_PANEL {

    border: 1px solid rgba(0, 255, 0, 0.15);
    background: #111;
    position: relative;
    overflow: hidden;
}

.LIT_SETTINGS_PANEL::before {

    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 255, 0, 0.03) 0%, transparent 60%);
    pointer-events: none;
}

/*===============================================================*/
/*   Toggle header row — clickable                               */
/*===============================================================*/

.LIT_SETTINGS_TOGGLE {

    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.LIT_SETTINGS_TOGGLE:hover {

    background: rgba(0, 255, 0, 0.03);
}

.LIT_SETTINGS_TOGGLE_LABEL {

    font-size: 0.72rem;
    color: rgba(0, 255, 0, 0.6);
    letter-spacing: 1px;
    font-family: 'Courier New', monospace;
}

.LIT_SETTINGS_REQUIRED {

    font-size: 0.62rem;
    color: #444;
    letter-spacing: 0.5px;
    font-family: 'Courier New', monospace;
}

.LIT_SETTINGS_CHEVRON {

    width: 14px;
    height: 14px;
    color: rgba(0, 255, 0, 0.3);
    margin-left: auto;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

/*===============================================================*/
/*   Collapsible body — closed by default                        */
/*===============================================================*/

.LIT_SETTINGS_BODY {

    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 1rem;
}

.LIT_SETTINGS_PANEL.OPEN .LIT_SETTINGS_BODY {

    max-height: 600px;
    padding: 0.8rem 1rem 1rem;
    border-top: 1px solid rgba(0, 255, 0, 0.08);
}

/*===============================================================*/
/*   Settings rows — horizontal flex grids                       */
/*===============================================================*/

.LIT_SETTINGS_ROW {

    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 0.65rem;
}

.LIT_SETTINGS_ROW:last-child {

    margin-bottom: 0;
}

/*===============================================================*/
/*   Individual field inside settings panel                      */
/*===============================================================*/

.LIT_SETTINGS_FIELD {

    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 120px;
    flex: 1;
}

.LIT_SETTINGS_FIELD_WIDE {

    flex: 2;
}

.LIT_SETTINGS_FIELD_FULL {

    flex: 1 1 100%;
}

/*===============================================================*/
/*   Settings field labels                                       */
/*===============================================================*/

.LIT_SETTINGS_LABEL {

    font-size: 0.62rem;
    color: rgba(0, 255, 0, 0.4);
    letter-spacing: 0.8px;
    font-family: 'Courier New', monospace;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*===============================================================*/
/*   Compact inputs inside settings panel                        */
/*===============================================================*/

.LIT_SETTINGS_INPUT {

    background: #0A0A0A;
    border: 1px solid rgba(0, 255, 0, 0.1);
    color: var(--TEXT-MAIN);
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    padding: 0.38rem 0.55rem;
    width: 100%;
    outline: none;
    transition: border-color 0.2s;
}

.LIT_SETTINGS_INPUT:focus {

    border-color: rgba(0, 255, 0, 0.35);
}

.LIT_SETTINGS_INPUT::placeholder {

    color: #2a2a2a;
}

/*===============================================================*/
/*   Compact select inside settings panel                        */
/*===============================================================*/

.LIT_SETTINGS_SELECT {

    background: #0A0A0A;
    border: 1px solid rgba(0, 255, 0, 0.1);
    color: var(--TEXT-MAIN);
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    padding: 0.38rem 1.8rem 0.38rem 0.55rem;
    width: 100%;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpolyline points='1,1 5,5 9,1' fill='none' stroke='rgba(0,255,0,0.3)' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    transition: border-color 0.2s;
}

.LIT_SETTINGS_SELECT:focus {

    border-color: rgba(0, 255, 0, 0.35);
}

/*===============================================================*/
/*   Compact textarea inside settings panel                      */
/*===============================================================*/

.LIT_SETTINGS_TEXTAREA {

    background: #0A0A0A;
    border: 1px solid rgba(0, 255, 0, 0.1);
    color: var(--TEXT-MAIN);
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    padding: 0.38rem 0.55rem;
    width: 100%;
    outline: none;
    resize: vertical;
    line-height: 1.5;
    transition: border-color 0.2s;
}

.LIT_SETTINGS_TEXTAREA:focus {

    border-color: rgba(0, 255, 0, 0.35);
}

.LIT_SETTINGS_TEXTAREA::placeholder {

    color: #2a2a2a;
}

/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*         15g) LITERATURE CREATE — CUSTOM FONT DROPDOWN         */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

/*===============================================================*/
/*   Wrapper — relative so list can position absolute below      */
/*===============================================================*/

.LIT_FONT_DROP {

    position: relative;
    display: inline-block;
}

/*===============================================================*/
/*   The visible "selected" trigger — looks like toolbar input   */
/*===============================================================*/

.LIT_FONT_SELECTED {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: #111;
    border: 1px solid rgba(0, 255, 0, 0.12);
    color: #777;
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    padding: 0.22rem 0.5rem;
    cursor: pointer;
    min-width: 150px;
    max-width: 200px;
    white-space: nowrap;
    transition: border-color 0.2s, color 0.2s;
    user-select: none;
}

.LIT_FONT_DROP.OPEN .LIT_FONT_SELECTED,
.LIT_FONT_SELECTED:hover {

    border-color: rgba(0, 255, 0, 0.3);
    color: var(--TEXT-MAIN);
}

/*===============================================================*/
/*   Dropdown list — absolutely positioned below trigger         */
/*===============================================================*/

.LIT_FONT_LIST {

    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    min-width: 220px;
    background: #0D0D0D;
    border: 1px solid rgba(0, 255, 0, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    z-index: 500;
    max-height: 260px;
    overflow-y: auto;
    display: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 255, 0, 0.2) transparent;
}

.LIT_FONT_DROP.OPEN .LIT_FONT_LIST {

    display: block;
}

/*===============================================================*/
/*   Each font option — rendered in its own font                 */
/*===============================================================*/

.LIT_FONT_OPTION {

    padding: 0.55rem 0.8rem;
    font-size: 0.95rem;
    color: #666;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 255, 0, 0.04);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.LIT_FONT_OPTION:hover {

    background: rgba(0, 255, 0, 0.05);
    color: var(--TEXT-MAIN);
}

.LIT_FONT_OPTION_ACTIVE {

    color: var(--NEON-GREEN) !important;
    background: rgba(0, 255, 0, 0.04);
}

.LIT_FONT_OPTION:last-child {

    border-bottom: none;
}


/*===============================================================*/
/*   15h) LIT CREATE — save animation spinner                    */
/*===============================================================*/

.LIT_SAVE_SPINNER_WRAP {

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0.5rem 0;
}

.LIT_SAVE_CIRCLE {

    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid rgba(0, 255, 0, 0.15);
    border-top-color: rgba(0, 255, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    animation: LIT_SPIN 0.7s linear infinite;
    transition: color 0.3s, border-color 0.3s;
}

.LIT_SAVE_CIRCLE.DONE {

    animation: none;
    border-color: rgba(0, 255, 0, 0.5);
    color: rgba(0, 255, 0, 0.9);
}

@KEYFRAMES LIT_SPIN {

    TO { transform: rotate(360deg); }
}


/*===============================================================*/
/*   15i) LIT VIEW — title as permalink link                     */
/*===============================================================*/

.LIT_VIEW_TITLE_LINK {

    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.LIT_VIEW_TITLE_LINK:hover {

    color: var(--NEON-GREEN);
}


/*===============================================================*/
/*   Card title as link — no underline, hover goes green         */
/*===============================================================*/

.CARD_TITLE_LINK {

    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.CARD_TITLE_LINK:hover {

    color: var(--NEON-GREEN);
}


/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/
/*                       PROJECTS                                */
/*===============================================================*/
/* ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ */
/*===============================================================*/

/* Layout wrapper — same structure as LIT_LAYOUT */
.PROJ_LAYOUT {
    display:        flex;
    flex-direction: column;
    gap:            1.5rem;
    width:          100%;
    max-width:      740px;
}

/* Header row — holds the new project button */
.PROJ_HEADER_ROW {
    display:         flex;
    justify-content: flex-end;
    align-items:     center;
}

.PROJ_NEW_BTN {
    font-family:    'Courier New', monospace;
    font-size:      0.75rem;
    color:          var(--NEON-GREEN);
    text-decoration: none;
    letter-spacing: 0.5px;
    transition:     text-shadow 0.2s;
}

.PROJ_NEW_BTN:hover {
    text-shadow: 0 0 8px rgba(0,255,0,0.5);
}

/*---------------------------------------------------------------*/
/* PROJECT CARD                                                  */
/*---------------------------------------------------------------*/
.PROJ_CARD {
    background:    var(--CARD-BG);
    border:        1px solid var(--BORDER);
    padding:       1.5rem;
    display:       flex;
    flex-direction: column;
    gap:           0.9rem;
    position:      relative;
}

.PROJ_CARD::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(135deg, rgba(0,255,0,0.025) 0%, transparent 60%);
    pointer-events: none;
}

.PROJ_CARD_TITLE {
    font-family:    'Courier New', monospace;
    font-size:      1.05rem;
    font-weight:    700;
    color:          var(--TEXT-MAIN);
    letter-spacing: 0.5px;
    margin:         0;
}

.PROJ_CARD_META {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    font-size:   0.72rem;
    color:       var(--TEXT-MUTED);
    font-family: 'Courier New', monospace;
}

.PROJ_CARD_DIVIDER {
    height:     1px;
    background: var(--BORDER);
}

.PROJ_CARD_DESC {
    font-family:  'Courier New', monospace;
    font-size:    0.85rem;
    color:        var(--TEXT-MAIN);
    line-height:  1.7;
    margin:       0;
    white-space:  pre-wrap;
    word-break:   break-word;
}

.PROJ_CARD_TAGS {
    margin-top: 0.25rem;
}

/*---------------------------------------------------------------*/
/* PHOTO FLIPPER                                                 */
/*---------------------------------------------------------------*/
.PROJ_FLIPPER {
    position:       relative;
    width:          100%;
    background:     rgba(0,0,0,0.3);
    overflow:       hidden;
    border:         1px solid var(--BORDER);
    min-height:     200px;
    display:        flex;
    align-items:    center;
    justify-content: center;
}

.PROJ_FLIPPER_TRACK {
    width:    100%;
    position: relative;
}

.PROJ_FLIPPER_IMG {
    display:    none;
    width:      100%;
    max-height: 480px;
    object-fit: contain;
}

.PROJ_FLIPPER_IMG.ACTIVE {
    display: block;
}

/* Arrow buttons */
.PROJ_FLIPPER_BTN {
    position:   absolute;
    top:        50%;
    transform:  translateY(-50%);
    background: rgba(0,0,0,0.55);
    border:     1px solid var(--BORDER);
    color:      var(--TEXT-MAIN);
    width:      34px;
    height:     34px;
    display:    flex;
    align-items: center;
    justify-content: center;
    cursor:     pointer;
    z-index:    2;
    transition: background 0.15s, border-color 0.15s;
    padding:    0;
}

.PROJ_FLIPPER_BTN:hover {
    background:   rgba(0,255,0,0.1);
    border-color: rgba(0,255,0,0.4);
}

.PROJ_FLIPPER_BTN svg {
    width:  16px;
    height: 16px;
    flex-shrink: 0;
    pointer-events: none;
}

.PROJ_FLIPPER_PREV { left:  8px; }
.PROJ_FLIPPER_NEXT { right: 8px; }

/* Dot indicators */
.PROJ_FLIPPER_DOTS {
    position:        absolute;
    bottom:          8px;
    left:            50%;
    transform:       translateX(-50%);
    display:         flex;
    gap:             5px;
    z-index:         2;
}

.PROJ_FLIPPER_DOT {
    width:       6px;
    height:      6px;
    border-radius: 50%;
    background:  rgba(255,255,255,0.3);
    border:      1px solid rgba(255,255,255,0.2);
    transition:  background 0.2s;
}

.PROJ_FLIPPER_DOT.ACTIVE {
    background: rgba(0,255,0,0.7);
    border-color: rgba(0,255,0,0.5);
}

/*---------------------------------------------------------------*/
/* PAGINATION                                                    */
/*---------------------------------------------------------------*/
.PROJ_PAGINATION {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0.75rem 0;
    border-top:      1px solid var(--BORDER);
    font-family:     'Courier New', monospace;
    font-size:       0.75rem;
}

.PROJ_PAGE_BTN {
    color:           var(--NEON-GREEN);
    text-decoration: none;
    letter-spacing:  0.5px;
    transition:      text-shadow 0.2s;
}

.PROJ_PAGE_BTN:hover {
    text-shadow: 0 0 8px rgba(0,255,0,0.5);
}

.PROJ_PAGE_DISABLED {
    color:  var(--TEXT-MUTED);
    cursor: default;
}

.PROJ_PAGE_INFO {
    color: var(--TEXT-MUTED);
}

/*---------------------------------------------------------------*/
/* CREATE — description textarea                                 */
/*---------------------------------------------------------------*/
.PROJ_DESCRIPTION_AREA {
    width:        100%;
    min-height:   160px;
    background:   transparent;
    border:       1px solid var(--BORDER);
    color:        var(--TEXT-MAIN);
    font-family:  'Courier New', monospace;
    font-size:    0.9rem;
    padding:      0.75rem;
    resize:       vertical;
    outline:      none;
    transition:   border-color 0.2s;
    line-height:  1.7;
    box-sizing:   border-box;
}

.PROJ_DESCRIPTION_AREA:focus {
    border-color: rgba(0,255,0,0.4);
}

.PROJ_DESCRIPTION_AREA::placeholder {
    color: var(--TEXT-MUTED);
}

/*---------------------------------------------------------------*/
/* CREATE — photo uploader                                       */
/*---------------------------------------------------------------*/
.PROJ_PHOTOS_WRAP {
    display:        flex;
    flex-direction: column;
    gap:            0.6rem;
    margin-bottom:  0.75rem;
}

.PROJ_PHOTO_SLOT {
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
}

.PROJ_PHOTO_PREVIEW {
    display:     flex;
    align-items: center;
    gap:         0.6rem;
    padding:     0.5rem 0.75rem;
    border:      1px solid var(--BORDER);
    background:  rgba(0,0,0,0.2);
    font-family: 'Courier New', monospace;
    font-size:   0.75rem;
}

.PROJ_PHOTO_LABEL {
    flex:         1;
    color:        var(--TEXT-MUTED);
    overflow:     hidden;
    text-overflow: ellipsis;
    white-space:  nowrap;
}

.PROJ_PHOTO_CHOOSE {
    background:   transparent;
    border:       1px solid var(--BORDER);
    color:        var(--TEXT-MUTED);
    font-family:  'Courier New', monospace;
    font-size:    0.7rem;
    padding:      0.2rem 0.5rem;
    cursor:       pointer;
    transition:   border-color 0.15s, color 0.15s;
    white-space:  nowrap;
    flex-shrink:  0;
}

.PROJ_PHOTO_CHOOSE:hover {
    border-color: rgba(0,255,0,0.4);
    color:        var(--TEXT-MAIN);
}

.PROJ_PHOTO_REMOVE {
    background:   transparent;
    border:       none;
    color:        var(--TEXT-MUTED);
    font-size:    1rem;
    cursor:       pointer;
    line-height:  1;
    padding:      0 0.15rem;
    flex-shrink:  0;
    transition:   color 0.15s;
}

.PROJ_PHOTO_REMOVE:hover {
    color: #ff4444;
}

.PROJ_PHOTO_THUMB {
    width:      100%;
    max-height: 180px;
    object-fit: contain;
    border:     1px solid var(--BORDER);
    background: rgba(0,0,0,0.3);
}

.PROJ_ADD_PHOTO_BTN {
    display:      inline-flex;
    align-items:  center;
    gap:          0.4rem;
    background:   transparent;
    border:       1px solid var(--BORDER);
    color:        var(--TEXT-MUTED);
    font-family:  'Courier New', monospace;
    font-size:    0.75rem;
    padding:      0.4rem 0.75rem;
    cursor:       pointer;
    transition:   border-color 0.15s, color 0.15s;
    align-self:   flex-start;
}

.PROJ_ADD_PHOTO_BTN:hover {
    border-color: rgba(0,255,0,0.4);
    color:        var(--TEXT-MAIN);
}

/*===============================================================*/
/*   DRAFTS PAGE                                                 */
/*===============================================================*/

.DRAFT_EMPTY {
    color:       var(--TEXT-MUTED);
    font-size:   0.85rem;
    padding:     1rem 0;
}

.DRAFT_SECTION {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
    margin-bottom:  2rem;
}

.DRAFT_SECTION_LABEL {
    color:          var(--TEXT-MUTED);
    font-size:      0.7rem;
    letter-spacing: 0.08em;
    padding-bottom: 0.4rem;
    border-bottom:  1px solid var(--BORDER);
    margin-bottom:  0.25rem;
}

.DRAFT_ROW {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    padding:         0.6rem 0.75rem;
    border:          1px solid var(--BORDER);
    background:      rgba(255,255,255,0.02);
}

.DRAFT_INFO {
    display:        flex;
    flex-direction: column;
    gap:            0.15rem;
    min-width:      0;
}

.DRAFT_TITLE {
    color:         var(--TEXT-MAIN);
    font-size:     0.85rem;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.DRAFT_DATE {
    color:     var(--TEXT-MUTED);
    font-size: 0.7rem;
}

.DRAFT_ACTIONS {
    display:     flex;
    gap:         0.5rem;
    flex-shrink: 0;
}

.DRAFT_BTN {
    background:      transparent;
    border:          1px solid var(--BORDER);
    color:           var(--TEXT-MUTED);
    font-family:     'Courier New', monospace;
    font-size:       0.72rem;
    padding:         0.3rem 0.6rem;
    cursor:          pointer;
    text-decoration: none;
    transition:      border-color 0.15s, color 0.15s;
    white-space:     nowrap;
}

.DRAFT_BTN_EDIT:hover {
    border-color: rgba(0,255,0,0.4);
    color:        var(--TEXT-MAIN);
}

.DRAFT_BTN_DELETE:hover {
    border-color: rgba(255,68,68,0.5);
    color:        #ff4444;
}