/* ==========================================================================
   PORTALRESIZER - NEUMORPHIC MINIMALIST DESIGN SYSTEM
   Soft UI tactile physical depth + Ultra-clean high-contrast minimalism
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/* 1. Global Custom Properties (Neumorphic Lighting & Tone Engine) */
:root {
    /* Color Palette - Calibrated Soft Slate & Warm Grey */
    --neu-bg: #eef2f7;
    --neu-surface: #eef2f7;
    --neu-surface-convex: linear-gradient(145deg, #f8faff, #e4ebf3);
    --neu-surface-concave: linear-gradient(145deg, #e4ebf3, #f8faff);
    --neu-surface-well: #e8edf5;
    
    /* Lighting Highlights & Ambient Shadows */
    --neu-light: #ffffff;
    --neu-light-soft: rgba(255, 255, 255, 0.95);
    --neu-dark: rgba(166, 180, 200, 0.52);
    --neu-dark-soft: rgba(166, 180, 200, 0.32);
    --neu-dark-deep: rgba(140, 155, 178, 0.65);
    
    /* Structural Bevels */
    --neu-border: rgba(255, 255, 255, 0.85);
    --neu-border-subtle: rgba(255, 255, 255, 0.6);
    --neu-border-well: rgba(166, 180, 200, 0.35);

    /* Neumorphic Shadows - Dual Directional Light Physics */
    --neu-shadow-flat: 8px 8px 18px var(--neu-dark-soft), -8px -8px 18px var(--neu-light);
    --neu-shadow-card: 12px 12px 28px var(--neu-dark-soft), -12px -12px 28px var(--neu-light);
    --neu-shadow-floating: 16px 16px 36px var(--neu-dark), -16px -16px 36px var(--neu-light);
    --neu-shadow-sm: 4px 4px 10px var(--neu-dark-soft), -4px -4px 10px var(--neu-light);
    --neu-shadow-btn: 6px 6px 14px var(--neu-dark-soft), -6px -6px 14px var(--neu-light);
    --neu-shadow-btn-hover: 8px 8px 20px var(--neu-dark), -8px -8px 20px var(--neu-light);
    
    /* Inset Sunken Wells & Depressed Active States */
    --neu-shadow-pressed: inset 4px 4px 8px var(--neu-dark-soft), inset -4px -4px 8px var(--neu-light);
    --neu-shadow-well: inset 6px 6px 14px var(--neu-dark-soft), inset -6px -6px 14px var(--neu-light);
    --neu-shadow-deep-well: inset 8px 8px 18px var(--neu-dark), inset -8px -8px 18px var(--neu-light);

    /* Minimalist High-Contrast Typography */
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --text-light: #94a3b8;

    /* Intentional Accent System (Indigo & Emerald) */
    --primary-indigo: #4f46e5;
    --primary-indigo-dark: #4338ca;
    --primary-indigo-light: #818cf8;
    --primary-shadow: 6px 6px 16px rgba(79, 70, 229, 0.35), -4px -4px 12px rgba(255, 255, 255, 0.85);
    --primary-shadow-hover: 8px 8px 22px rgba(79, 70, 229, 0.45), -6px -6px 16px rgba(255, 255, 255, 0.95);

    --accent-emerald: #059669;
    --accent-emerald-shadow: 6px 6px 16px rgba(5, 150, 105, 0.35), -4px -4px 12px rgba(255, 255, 255, 0.85);
}

/* 2. Global Document Reset & Base Styling */
html {
    scroll-behavior: smooth;
    background-color: var(--neu-bg);
}

body {
    background-color: var(--neu-bg) !important;
    color: var(--text-secondary);
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 var(--neu-bg);
}

/* 3. Neumorphic Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--neu-bg);
    box-shadow: inset 2px 2px 4px var(--neu-dark-soft), inset -2px -2px 4px var(--neu-light);
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
    border: 2px solid var(--neu-bg);
    box-shadow: 2px 2px 4px var(--neu-dark-soft);
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Specific File List Overrides */
.file-list::-webkit-scrollbar {
    width: 5px;
}
.file-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
    border: none;
}

/* 4. Neumorphic Surface Utilities */
.neu-flat {
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-shadow-flat) !important;
    border: 1px solid var(--neu-border) !important;
}

.neu-card {
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-shadow-card) !important;
    border: 1px solid var(--neu-border) !important;
    border-radius: 20px;
}

.neu-convex {
    background: var(--neu-surface-convex) !important;
    box-shadow: var(--neu-shadow-flat) !important;
    border: 1px solid var(--neu-border) !important;
}

.neu-concave {
    background: var(--neu-surface-concave) !important;
    box-shadow: var(--neu-shadow-flat) !important;
    border: 1px solid var(--neu-border) !important;
}

.neu-well {
    background: var(--neu-surface-well) !important;
    box-shadow: var(--neu-shadow-well) !important;
    border: 1px solid var(--neu-border-well) !important;
    border-radius: 16px;
}

.neu-btn {
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-shadow-btn) !important;
    border: 1px solid var(--neu-border) !important;
    color: var(--text-primary) !important;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.neu-btn:hover {
    box-shadow: var(--neu-shadow-btn-hover) !important;
    transform: translateY(-1px);
    color: var(--primary-indigo) !important;
}

.neu-btn:active,
.neu-btn.active {
    box-shadow: var(--neu-shadow-pressed) !important;
    transform: translateY(1px) scale(0.985);
}

/* Primary Action Pill (Extruded Accent) */
.neu-btn-primary {
    background: linear-gradient(135deg, var(--primary-indigo) 0%, var(--primary-indigo-dark) 100%) !important;
    box-shadow: var(--primary-shadow) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    font-weight: 700;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.neu-btn-primary:hover:not(:disabled) {
    box-shadow: var(--primary-shadow-hover) !important;
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.neu-btn-primary:active:not(:disabled) {
    box-shadow: inset 4px 4px 8px rgba(30, 27, 75, 0.5), inset -3px -3px 6px rgba(129, 140, 248, 0.3) !important;
    transform: translateY(1px) scale(0.985);
}

.neu-btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: var(--accent-emerald-shadow) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    font-weight: 700;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.neu-btn-success:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.neu-btn-success:active {
    box-shadow: inset 4px 4px 8px rgba(6, 78, 59, 0.5), inset -3px -3px 6px rgba(110, 231, 183, 0.3) !important;
    transform: translateY(1px) scale(0.985);
}

/* 5. Navigation Bar Transformation */
nav.bg-white,
header nav {
    background: rgba(238, 242, 247, 0.88) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 8px 24px rgba(166, 180, 200, 0.28), 0 -2px 10px rgba(255, 255, 255, 0.8) !important;
}

nav a.border-indigo-500,
nav a[aria-current="page"] {
    background: var(--neu-surface-well);
    box-shadow: var(--neu-shadow-pressed);
    border-radius: 9999px;
    padding: 0.4rem 1rem !important;
    border: 1px solid var(--neu-border-well) !important;
    color: var(--primary-indigo) !important;
    font-weight: 700 !important;
}

nav a.text-gray-500,
nav a.text-gray-600 {
    padding: 0.4rem 0.9rem !important;
    border-radius: 9999px;
    transition: all 0.2s ease;
}

nav a.text-gray-500:hover,
nav a.text-gray-600:hover {
    background: var(--neu-surface);
    box-shadow: var(--neu-shadow-sm);
    color: var(--text-primary) !important;
    border-bottom-color: transparent !important;
}

/* Mobile Nav Menu */
#mobile-menu {
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-shadow-card) !important;
    border: 1px solid var(--neu-border) !important;
    border-radius: 0 0 16px 16px;
}

/* 6. Universal Card & Container Overrides */
.bg-white:not(img):not(canvas):not(pre):not(code),
.bg-slate-50:not(body),
.bg-gray-50:not(#dropZone) {
    background-color: var(--neu-surface) !important;
}

/* Elevated Containers */
.shadow-xl,
.shadow-lg,
.shadow-2xl,
.shadow-md {
    box-shadow: var(--neu-shadow-card) !important;
    border: 1px solid var(--neu-border) !important;
}

.shadow-sm {
    box-shadow: var(--neu-shadow-sm) !important;
    border: 1px solid var(--neu-border) !important;
}

/* 7. Dropzones & Inset Wells (Tactile Recessed) */
#dropZone,
.dropzone,
.upload-zone {
    background: var(--neu-surface-well) !important;
    box-shadow: var(--neu-shadow-well) !important;
    border: 2px dashed rgba(166, 180, 200, 0.55) !important;
    border-radius: 20px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#dropZone:hover,
.dropzone:hover {
    border-color: var(--primary-indigo) !important;
    box-shadow: inset 6px 6px 16px rgba(79, 70, 229, 0.15), inset -6px -6px 16px rgba(255, 255, 255, 0.95) !important;
    transform: scale(0.995);
}

/* 8. Form Controls, Inputs & Select Elements */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
    background: var(--neu-surface-well) !important;
    box-shadow: var(--neu-shadow-pressed) !important;
    border: 1px solid var(--neu-border-well) !important;
    border-radius: 12px !important;
    color: var(--text-primary) !important;
    font-family: inherit;
    transition: all 0.2s ease;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--primary-indigo-light) !important;
    box-shadow: inset 4px 4px 8px rgba(79, 70, 229, 0.15), inset -4px -4px 8px rgba(255, 255, 255, 0.95), 0 0 0 3px rgba(79, 70, 229, 0.2) !important;
}

/* Custom Checkbox Neumorphic Styling */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--neu-surface-well);
    box-shadow: var(--neu-shadow-pressed);
    border: 1px solid var(--neu-border-well);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

input[type="checkbox"]:checked {
    background: var(--primary-indigo);
    box-shadow: var(--primary-shadow);
    border-color: var(--primary-indigo);
}

input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* 9. Minimalist Pill Badges & Micro-tags */
.neu-pill {
    background: var(--neu-surface);
    box-shadow: var(--neu-shadow-sm);
    border: 1px solid var(--neu-border);
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.neu-pill-well {
    background: var(--neu-surface-well);
    box-shadow: var(--neu-shadow-pressed);
    border: 1px solid var(--neu-border-well);
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
}

/* 10. Circular Neumorphic Icon Badges */
.neu-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--neu-surface);
    box-shadow: var(--neu-shadow-flat);
    border: 1px solid var(--neu-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-indigo);
}

.neu-icon-circle-well {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--neu-surface-well);
    box-shadow: var(--neu-shadow-well);
    border: 1px solid var(--neu-border-well);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-indigo);
}

/* 11. FAQ Accordions & Bento Grid Minimalist Layout */
details summary {
    cursor: pointer;
    list-style: none;
    transition: all 0.2s ease;
}

details summary::-webkit-details-marker {
    display: none;
}

details[open] summary {
    color: var(--primary-indigo);
}

/* 12. Text Styling for Content Pages (Prose) */
.prose h1 {
    color: var(--text-primary);
    font-weight: 800;
    margin-bottom: 0.5em;
    font-size: 2rem;
    letter-spacing: -0.03em;
}

.prose h2 { 
    color: var(--text-primary); 
    font-weight: 700; 
    margin-top: 1.75em; 
    margin-bottom: 0.5em; 
    font-size: 1.35rem; 
    letter-spacing: -0.02em;
}

.prose h3 {
    color: var(--text-primary);
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-size: 1.15rem;
}

.prose p { 
    color: var(--text-secondary); 
    margin-bottom: 1.1em; 
    line-height: 1.7; 
}

.prose ul,
.prose ol { 
    padding-left: 1.5em; 
    color: var(--text-secondary); 
    margin-bottom: 1.25em; 
    line-height: 1.7;
}

.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }

.prose li {
    margin-bottom: 0.4em;
}

.prose strong {
    color: var(--text-primary);
    font-weight: 700;
}

.prose a {
    color: var(--primary-indigo);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
}

.prose a:hover {
    color: var(--primary-indigo-dark);
}

/* 13. Checkerboard Pattern for PNG/SVG */
.bg-checkerboard {
    background-color: #ffffff;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEUAAAAAwv8A/8ALAAAAAXRSTlMAQObYZgAAABBJREFUGNNjYARiBgbk4AAAQ4AAzW4n/QAAAABJRU5ErkJggg==');
}

/* 14. Smooth Fluid Animations */
@keyframes popupAnimation {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.animate-popup {
    animation: popupAnimation 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Subtle Hover Lift Utility */
.neu-hover-lift {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.neu-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--neu-shadow-floating) !important;
}

/* Footer Surface Polish */
footer {
    background: var(--neu-surface) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 -8px 24px rgba(166, 180, 200, 0.25) !important;
}