/* ===================================================
   RMUTP LEADERS RETREAT 2026 — Mercury Liquid Neural Design System
   White & Purple Edition: Pure White Canvas, Liquid Mercury Physics,
   Brutalist Tech-Minimalist Typography & Architectural Frosted Surfaces.
   =================================================== */

:root {
    --mercury-bg-white: #ffffff;
    --mercury-obsidian: #0f021f;
    --mercury-obsidian-hover: #280650;
    --mercury-accent-purple: #7e22ce;
    --mercury-glow-purple: #a855f7;
    --mercury-text-dark: #0b0216;
    --mercury-text-muted: #64748b;
    --mercury-border: rgba(15, 23, 42, 0.09);
    --mercury-border-hover: rgba(126, 34, 206, 0.35);
    --mercury-surface: rgba(255, 255, 255, 0.86);
    --mercury-surface-subtle: rgba(248, 250, 252, 0.82);
    --mercury-shadow: 0 20px 50px -12px rgba(15, 2, 31, 0.06), 0 4px 16px -2px rgba(126, 34, 206, 0.04);
    --mercury-shadow-lg: 0 28px 65px -12px rgba(88, 28, 135, 0.14), 0 8px 24px -4px rgba(15, 2, 31, 0.06);
    --filter-goo: url('#gooey');
}

/* 1. Base Canvas & Typography */
body {
    background-color: #ffffff;
    color: var(--mercury-text-dark);
}

.mercury-viewport-white {
    background-color: #ffffff;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. Background Liquid Physics Stage for Pure White Canvas */
.mercury-stage-white {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
    filter: var(--filter-goo);
    opacity: 0.92;
    overflow: hidden;
}

.mercury-stage-ambient {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
    filter: var(--filter-goo);
    opacity: 0.65;
    overflow: hidden;
}

.mercury-blob {
    position: absolute !important;
    border-radius: 50% !important;
    filter: blur(14px);
    animation: mercuryFloat 20s infinite alternate ease-in-out;
    transition: margin 0.12s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, margin;
    pointer-events: none;
}

@keyframes mercuryFloat {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(4vw, 5vh) scale(1.08); }
    66%  { transform: translate(-3vw, 4vh) scale(0.92); }
    100% { transform: translate(3vw, -4vh) scale(1.06); }
}

/* 3D Liquid Radial Specular Lighting (Purple Mercury Spheres) */
.mercury-sphere-purple {
    background: radial-gradient(circle at 35% 35%, #e9d5ff 0%, #c084fc 35%, #9333ea 70%, #6b21a8 100%);
    box-shadow: 
        inset -12px -12px 24px rgba(46, 16, 101, 0.45),
        inset 12px 12px 24px rgba(255, 255, 255, 0.8),
        0 18px 40px rgba(147, 51, 234, 0.15);
    opacity: 0.88;
}

.mercury-sphere-lavender {
    background: radial-gradient(circle at 35% 35%, #f5edff 0%, #d8b4fe 40%, #a855f7 75%, #7e22ce 100%);
    box-shadow: 
        inset -10px -10px 20px rgba(76, 29, 149, 0.35),
        inset 10px 10px 20px rgba(255, 255, 255, 0.85),
        0 15px 35px rgba(168, 85, 247, 0.12);
    opacity: 0.82;
}

.mercury-sphere-violet {
    background: radial-gradient(circle at 35% 35%, #f3e8ff 0%, #c084fc 45%, #8b5cf6 80%, #581c87 100%);
    box-shadow: 
        inset -12px -12px 22px rgba(46, 16, 101, 0.4),
        inset 10px 10px 22px rgba(255, 255, 255, 0.75),
        0 15px 35px rgba(139, 92, 246, 0.14);
    opacity: 0.85;
}

.mercury-sphere-soft {
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #f3e8ff 50%, #e9d5ff 85%, #d8b4fe 100%);
    box-shadow: 
        inset -6px -6px 14px rgba(107, 33, 168, 0.15),
        inset 6px 6px 14px rgba(255, 255, 255, 0.95),
        0 10px 25px rgba(192, 132, 252, 0.1);
    opacity: 0.55;
}

/* 3. Frameless & Brutalist Typography */
.mercury-frameless {
    width: 100%;
    max-width: 440px;
    position: relative;
    z-index: 10;
}

.mercury-title-clean {
    font-weight: 900;
    font-size: clamp(2.75rem, 8vw, 3.75rem);
    line-height: 0.88;
    letter-spacing: -0.04em;
    color: #0b0216;
    text-transform: uppercase;
}

.mercury-heading-xl {
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #0b0216;
    line-height: 1.05;
}

.mercury-node-tag {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
    color: #64748b;
}

/* 4. Architectural Mercury Cards & Panels */
.mercury-card,
.glass-panel {
    background: var(--mercury-surface);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--mercury-border);
    box-shadow: var(--mercury-shadow);
}

.mercury-card-subtle,
.glass-panel-subtle {
    background: var(--mercury-surface-subtle);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.mercury-card-hover,
.glass-card-hover {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mercury-card-hover:hover,
.glass-card-hover:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.96);
    border-color: var(--mercury-border-hover);
    box-shadow: var(--mercury-shadow-lg);
}

.mercury-pill,
.glass-pill {
    background: rgba(248, 250, 252, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

/* 5. Mercury Inputs & Glowing Underline Controls */
.mercury-form-group-clean {
    position: relative;
    transition: transform 0.35s cubic-bezier(0.2, 1, 0.3, 1);
}
.mercury-form-group-clean:focus-within {
    transform: translateX(8px);
}

.mercury-input-clean {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgba(15, 23, 42, 0.15);
    color: #0b0216;
    font-family: 'Space Mono', monospace;
    font-size: 1.25rem;
    padding: 12px 0;
    outline: none;
    transition: border-color 0.3s ease;
}
.mercury-input-clean::placeholder {
    color: rgba(148, 163, 184, 0.7);
    font-family: 'Space Mono', monospace;
    font-size: 1rem;
    letter-spacing: 0.05em;
}
.mercury-input-clean:focus {
    border-bottom-color: transparent;
}

.mercury-glow-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: #7e22ce;
    box-shadow: 0 0 16px rgba(147, 51, 234, 0.75), 0 0 28px rgba(168, 85, 247, 0.4);
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.mercury-input-clean:focus ~ .mercury-glow-line {
    width: 100%;
}

/* Architectural Input & Textarea for Forms / Filters */
.mercury-input,
.glass-input {
    background: rgba(248, 250, 252, 0.75);
    border: 1.5px solid rgba(15, 23, 42, 0.1);
    color: #0b0216;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.mercury-input:hover,
.glass-input:hover {
    background: #ffffff;
    border-color: rgba(126, 34, 206, 0.35);
}
.mercury-input:focus,
.glass-input:focus {
    background: #ffffff;
    border-color: #7e22ce;
    box-shadow: 0 0 0 4px rgba(126, 34, 206, 0.1), 0 8px 20px -4px rgba(126, 34, 206, 0.12);
}

/* 6. Pill Capsule Buttons (Matching Login Page) */
.mercury-btn-capsule {
    position: relative;
    width: 100%;
    background: var(--mercury-obsidian);
    color: #ffffff;
    border: none;
    padding: 16px 32px;
    font-family: 'Space Mono', 'Kanit', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    border-radius: 9999px;
    cursor: pointer;
    box-shadow: 0 10px 25px -4px rgba(15, 2, 31, 0.35);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mercury-btn-capsule:hover {
    letter-spacing: 0.24em;
    background: var(--mercury-obsidian-hover);
    box-shadow: 0 14px 32px -4px rgba(126, 34, 206, 0.5), 0 0 20px rgba(168, 85, 247, 0.3);
    transform: translateY(-2px);
}
.mercury-btn-capsule:active {
    transform: translateY(0);
}
.mercury-btn-capsule span {
    position: relative;
    z-index: 2;
}

.btn-glass-primary {
    background: var(--mercury-obsidian);
    color: #ffffff;
    border-radius: 9999px;
    box-shadow: 0 10px 25px -4px rgba(15, 2, 31, 0.3);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}
.btn-glass-primary:hover {
    background: var(--mercury-obsidian-hover);
    box-shadow: 0 14px 32px -4px rgba(126, 34, 206, 0.45), 0 0 18px rgba(168, 85, 247, 0.25);
    transform: translateY(-2px);
}
.btn-glass-primary:active {
    transform: translateY(0);
}

.mercury-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: 9999px;
    font-family: 'Space Mono', 'Kanit', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.mercury-btn-secondary:hover {
    color: #581c87;
    background: rgba(243, 232, 255, 0.75);
    border-color: #d8b4fe;
    box-shadow: 0 4px 12px rgba(126, 34, 206, 0.08);
    transform: translateY(-1px);
}

/* 7. Animations & Utilities */
.spinner {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.fade-in {
    animation: fadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 8. Custom Sleek Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f8fafc;
}
::-webkit-scrollbar-thumb {
    background: rgba(126, 34, 206, 0.25);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(126, 34, 206, 0.45);
}

/* 9. Textarea Auto-resize */
textarea {
    resize: vertical;
    min-height: 110px;
}

/* 10. Print view */
@media print {
    .no-print { display: none !important; }
    body { background: white !important; }
    .mercury-card, .glass-panel { box-shadow: none !important; border: 1px solid #ccc !important; }
}