/* =============================================
   SHARED BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #2b303a;
    font-size: 14px;
    line-height: 1.5;
    background: #e8edf5;
    background-image:
        repeating-linear-gradient(
            0deg, transparent, transparent 19px,
            rgba(0,56,168,0.04) 20px
        ),
        repeating-linear-gradient(
            90deg, transparent, transparent 19px,
            rgba(0,56,168,0.04) 20px
        );
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a {
    color: #0038a8;
    text-decoration: none;
}
a:hover {
    color: #ce1126;
    text-decoration: none;
}

/* Desktop elements hidden on mobile */
.d-topbar  { display: none; }
.d-sidebar { display: none; }
.logo-org  { display: none; }

.layout-wrapper {
    max-width: 640px;
    margin: 0 auto;
}

.container {
    background: #ffffff;
    border-left: 3px solid #0038a8;
    border-right: 3px solid #0038a8;
    color: #222222;
}

.container a { color: #0038a8; }
.container a:hover { color: #ce1126; text-decoration: none; }

/* ── Mobile logo ── */
.m-logo {
    background: #ffffff;
    text-align: center;
    padding: 14px 0 8px;
    border-bottom: 3px solid #0038a8;
    position: relative;
}
.m-logo::after {
    content: '· · · PinoyWAP.ORG · · ·';
    display: block;
    font-size: 9.5px;
    letter-spacing: 2.5px;
    color: #7788aa;
    text-transform: uppercase;
    margin-top: 3px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-weight: 500;
}
.m-logo .logo-pinoy { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 26px; color: #0038a8; }
.m-logo .logo-w     { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 26px; color: #d4b800; }
.m-logo .logo-ap    { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 26px; color: #ce1126; }

/* ── Date bar ── */
.date-bar {
    background: #f0f3fa;
    text-align: center;
    font-size: 10.5px;
    color: #556688;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    letter-spacing: 1px;
    padding: 5px 0;
    border-bottom: 1px solid #dde4f0;
    font-weight: 500;
}

/* ── Header / greeting ── */
.header {
    background: #0038a8;
    background-image: repeating-linear-gradient(
        45deg, transparent, transparent 4px,
        rgba(255,255,255,0.06) 4px, rgba(255,255,255,0.06) 8px
    );
    color: #ffffff;
    padding: 10px 12px;
    text-align: center;
    font-weight: 700;
    font-size: 13.5px;
    font-family: 'Inter', sans-serif;
    border-bottom: 4px solid #fce300;
}
.header a { color: #fce300; }
.desktop-header-date { display: none; }

/* ── Sub-header ── */
.sub-header {
    background: #fce300;
    color: #111111;
    padding: 7.5px 10px;
    text-align: center;
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: 1px;
    border-bottom: 3px solid #0038a8;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
}

/* ── Content ── */
.content { flex: 1; }

/* ── Content block ── */
.content-block {
    padding: 10px;
    border-bottom: 1px solid #e4e9f4;
    text-align: center;
    color: #333344;
}

/* ── Menu list — retro tile style ── */
.menu-list { list-style: none; padding: 0; margin: 0; }
.menu-list li { border-bottom: 1px solid #e4e9f4; }
.menu-list li a {
    display: block;
    padding: 9px 14px;
    color: #0038a8;
    font-weight: 600;
    font-size: 13px;
    transition: background 0.1s, color 0.1s;
    border-left: 4px solid transparent;
}
.menu-list li a:hover {
    background: #f0f4ff;
    color: #ce1126;
    border-left-color: #ce1126;
    text-decoration: none;
}
.menu-list li:last-child { border-bottom: none; }

/* ── Alerts / flash ── */
.alert {
    padding: 9px 12px;
    background: #fff5f5;
    color: #bb0000;
    font-size: 12px;
    border-left: 4px solid #ce1126;
    font-weight: 500;
}
.flash-success {
    background: #f0fff6;
    color: #1a7a3c;
    padding: 8px 12px;
    border-left: 4px solid #27ae60;
    font-size: 12px;
}
.flash-bonus {
    background: #fffde7;
    color: #7a5c00;
    padding: 8px 12px;
    border-left: 4px solid #fce300;
    font-size: 12px;
    font-weight: bold;
}

/* ── Forms ── */
input[type="text"], input[type="password"], input[type="email"], textarea {
    background: #f8faff;
    color: #222222;
    border: 2px solid #ccd4ee;
    border-radius: 0;
    padding: 6px 8px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
}
input:focus, textarea:focus {
    border-color: #0038a8;
    background: #ffffff;
}

.btn, a.btn, button.btn {
    padding: 6px 14px;
    background: #0038a8;
    border: none;
    color: #ffffff !important;
    cursor: pointer;
    border-radius: 0;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Poppins', 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    transition: background 0.15s;
    display: inline-block;
    text-decoration: none !important;
}
.btn:hover, a.btn:hover, button.btn:hover {
    background: #ce1126;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Button color utility classes */
.btn-yellow, a.btn-yellow { background: #fce300 !important; color: #0038a8 !important; border: 2px solid #d4b800 !important; }
.btn-yellow:hover, a.btn-yellow:hover { background: #e0ca00 !important; color: #0038a8 !important; }
.btn-green, a.btn-green { background: #27ae60 !important; color: #ffffff !important; }
.btn-green:hover, a.btn-green:hover { background: #219653 !important; color: #ffffff !important; }
.btn-red, a.btn-red { background: #ce1126 !important; color: #ffffff !important; }
.btn-red:hover, a.btn-red:hover { background: #b00d20 !important; color: #ffffff !important; }
.btn-orange, a.btn-orange { background: #e67e22 !important; color: #ffffff !important; }
.btn-orange:hover, a.btn-orange:hover { background: #d35400 !important; color: #ffffff !important; }
.btn-google, a.btn-google {
    background: #ffffff !important;
    color: #333333 !important;
    border: 2px solid #4285F4 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    font-family: 'Inter', sans-serif !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(66,133,244,0.2) !important;
    cursor: pointer !important;
}
.btn-google:hover, a.btn-google:hover {
    background: #f4f8ff !important;
    color: #0038a8 !important;
    border-color: #0038a8 !important;
}

/* ── Quicknav ── */
.quicknav {
    background: #0038a8;
    border-top: 3px solid #fce300;
    padding: 7.5px 10px;
    font-size: 11px;
    text-align: center;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    letter-spacing: 0.5px;
}
.quicknav a {
    color: #c8d8ff;
    margin: 0 4px;
    font-weight: 600;
}
.quicknav a:hover { color: #fce300; text-decoration: none; }

/* ── Footer ── */
.footer {
    background: #ce1126;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    font-size: 11px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    letter-spacing: 0.5px;
    border-top: 3px solid #0038a8;
    margin-top: auto;
}
.footer a { color: #ffd0d5; }
.footer a:hover { color: white; text-decoration: underline; }



/* =============================================
   DESKTOP VIEW  — Modern Retro WAP (1200px+)
   ============================================= */
@media (min-width: 1200px) {

    /* Show desktop elements */
    .d-topbar  { display: block; }
    .d-sidebar { display: block; }
    .logo-org  { display: inline; }

    /* Hide mobile-only elements */
    .m-logo   { display: none; }
    .quicknav { display: none; }

    /* Body background: matching light grid */
    body {
        background: #e8edf5;
        background-image:
            repeating-linear-gradient(
                0deg, transparent, transparent 19px,
                rgba(0,56,168,0.04) 20px
            ),
            repeating-linear-gradient(
                90deg, transparent, transparent 19px,
                rgba(0,56,168,0.04) 20px
            );
    }

    /* Top bar */
    .d-topbar {
        background: #0038a8;
        border-bottom: 4px solid #fce300;
        position: sticky; top: 0; z-index: 100;
        box-shadow: 0 3px 10px rgba(0,56,168,0.25);
    }
    .d-topbar-inner {
        max-width: 1200px; margin: 0 auto;
        display: flex; align-items: center;
        padding: 0 20px; height: 48px; gap: 20px;
    }
    .d-logo .logo-pinoy { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 22px; color: #ffffff; }
    .d-logo .logo-w     { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 22px; color: #fce300; }
    .d-logo .logo-ap    { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 22px; color: #ff5566; }
    .d-logo .logo-org   { color: #c8d8ff; font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 11px; font-weight: 500; }

    .d-nav { display: flex; gap: 18px; align-items: center; flex: 1; justify-content: flex-end; font-size: 13px; font-weight: 600; }
    .d-nav a { color: #c8d8ff; transition: color 0.15s; }
    .d-nav a:hover { color: #fce300; text-decoration: none; }

    /* Layout grid */
    .layout-wrapper {
        max-width: 1200px; margin: 0 auto;
        display: flex; align-items: flex-start; justify-content: center;
        padding: 20px 20px 30px; gap: 20px;
    }

    /* Sidebar */
    .d-sidebar {
        display: block;
        width: 180px; min-width: 180px;
        background: #ffffff;
        border: 2px solid #0038a8;
        border-top: 4px solid #0038a8;
        border-radius: 0;
        position: sticky; top: 68px;
        max-height: calc(100vh - 85px);
        overflow-y: auto;
        font-size: 12px;
        box-shadow: 0 4px 12px rgba(0,56,168,0.12);
        padding-bottom: 10px;
    }
    .d-sidebar-title {
        font-size: 10.5px; font-weight: 800; text-transform: uppercase;
        color: #0038a8; letter-spacing: 1px;
        padding: 8px 10px 4px; border-bottom: 2px solid #0038a8;
        background: #f0f3fa;
        font-family: 'Poppins', sans-serif;
    }
    .d-sidebar a {
        display: block; padding: 8px 12px; color: #0038a8;
        border-left: 4px solid transparent;
        transition: background 0.1s, border-color 0.1s, color 0.1s;
        text-decoration: none; font-size: 12.5px; font-weight: 600;
        border-bottom: 1px solid #e4e9f4;
    }
    .d-sidebar a:hover {
        background: #f0f4ff; border-left-color: #ce1126; color: #ce1126;
    }
    .d-admin-sidebar { color: #ce1126 !important; font-weight: bold; }

    /* Main container */
    .container {
        flex: 1; min-width: 0; max-width: 860px;
        background: #ffffff;
        border: 2px solid #0038a8;
        border-top: 4px solid #0038a8;
        border-radius: 0;
        box-shadow: 0 4px 12px rgba(0,56,168,0.12);
        min-height: auto;
        margin-top: 0;
    }

    /* Desktop greeting/header bar */
    .date-bar { display: none; }
    .header {
        background: #0038a8;
        background-image: repeating-linear-gradient(
            45deg, transparent, transparent 4px,
            rgba(255,255,255,0.06) 4px, rgba(255,255,255,0.06) 8px
        );
        color: #ffffff; padding: 10px 16px;
        display: flex; justify-content: space-between; align-items: center;
        font-size: 13.5px; text-align: left;
        border-bottom: 4px solid #fce300;
    }
    .desktop-header-date {
        display: inline;
        font-size: 11px;
        font-weight: 500;
        color: #fce300;
        font-family: 'JetBrains Mono', 'Courier New', monospace;
    }

    /* Desktop footer */
    .footer {
        background: #ce1126;
        color: #ffffff;
        border-top: 3px solid #0038a8;
        font-size: 11px;
        font-family: 'JetBrains Mono', 'Courier New', monospace;
        letter-spacing: 0.5px;
        padding: 12px;
    }
    .footer a { color: #ffd0d5; }
    .footer a:hover { color: white; text-decoration: underline; }
}

/* VIP Shining Profile Avatar Frame */
.vip-avatar-frame {
    position: relative;
    display: inline-block;
    padding: 3px;
    border-radius: 50%;
    background: linear-gradient(45deg, #ffd700, #ff8c00, #fff700, #ce1126, #ffd700);
    background-size: 300% 300%;
    animation: vipShine 2.5s ease infinite, vipGlow 1.5s ease-in-out infinite alternate;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.9), 0 0 20px rgba(255, 140, 0, 0.6);
}

@keyframes vipShine {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes vipGlow {
    from { box-shadow: 0 0 6px #ffd700, 0 0 14px #ff8c00; }
    to { box-shadow: 0 0 16px #ffd700, 0 0 26px #ce1126; }
}

.vip-avatar-frame img, .vip-avatar-frame div {
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
}