/* LitWebTech native PWA shell and final palette layer. */

:root {
    --app-safe-top: env(safe-area-inset-top, 0px);
    --app-safe-right: env(safe-area-inset-right, 0px);
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
    --app-safe-left: env(safe-area-inset-left, 0px);
    --app-surface: #0d111f;
    --app-surface-raised: #12182a;
    --app-line: rgba(137, 197, 255, 0.2);
    --app-cyan: #65e7ff;
    --app-violet: #9b7cff;
    --app-mint: #79f2c5;
    --app-coral: #ff886f;
    --app-white: #f5f7ff;
    --app-muted: #aab6ca;
}

html {
    min-height: 100%;
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    min-height: 100dvh;
    padding-right: var(--app-safe-right);
    padding-left: var(--app-safe-left);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

button,
a,
input,
select,
textarea {
    touch-action: manipulation;
}

img {
    -webkit-user-drag: none;
}

/* Semantic badges use luminous glass instead of unrelated solid Bootstrap blocks. */
body:not(.combined-profile-page) .badge.bg-primary,
body:not(.combined-profile-page) .badge.bg-info {
    border: 1px solid rgba(101, 231, 255, 0.22) !important;
    color: #bdeff8 !important;
    background-color: rgba(101, 231, 255, 0.09) !important;
    background-image: none !important;
}

body:not(.combined-profile-page) .badge.bg-success {
    border: 1px solid rgba(121, 242, 197, 0.22) !important;
    color: #aaf6d8 !important;
    background-color: rgba(121, 242, 197, 0.09) !important;
    background-image: none !important;
}

body:not(.combined-profile-page) .badge.bg-warning {
    border: 1px solid rgba(155, 124, 255, 0.24) !important;
    color: #c8bbff !important;
    background-color: rgba(155, 124, 255, 0.1) !important;
    background-image: none !important;
}

body:not(.combined-profile-page) .badge.bg-danger {
    border: 1px solid rgba(255, 136, 111, 0.24) !important;
    color: #ffb1a1 !important;
    background-color: rgba(255, 136, 111, 0.09) !important;
    background-image: none !important;
}

@media (max-width: 767.98px) {
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Installed mode respects notches and feels like an app shell. */
.pwa-standalone body {
    padding-top: var(--app-safe-top);
    padding-bottom: var(--app-safe-bottom);
    user-select: none;
}

.pwa-standalone input,
.pwa-standalone textarea,
.pwa-standalone [contenteditable="true"] {
    user-select: text;
}

.pwa-standalone .navbar {
    top: calc(8px + var(--app-safe-top)) !important;
}

.pwa-standalone .modal,
.pwa-standalone #cookie-consent-banner {
    padding-bottom: var(--app-safe-bottom) !important;
}

.is-offline .navbar::before {
    position: absolute;
    right: 14px;
    bottom: -8px;
    width: 8px;
    height: 8px;
    content: '';
    border: 2px solid #05060c;
    border-radius: 50%;
    background: var(--app-coral);
    box-shadow: 0 0 18px rgba(255, 136, 111, 0.8);
}

/* Install action */
.pwa-install-action {
    position: fixed;
    z-index: 999997;
    bottom: calc(16px + var(--app-safe-bottom));
    left: calc(16px + var(--app-safe-left));
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 10px;
    width: min(280px, calc(100vw - 32px));
    padding: 10px 12px;
    border: 1px solid rgba(101, 231, 255, 0.25);
    border-radius: 18px;
    color: var(--app-white);
    background: rgba(7, 10, 19, 0.94);
    box-shadow: 0 18px 65px rgba(0, 0, 0, 0.48), inset 0 1px rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(22px) saturate(145%);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 220ms ease, transform 220ms ease, border-color 180ms ease !important;
}

.pwa-install-action.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.pwa-install-action:hover {
    border-color: rgba(101, 231, 255, 0.52);
}

.pwa-install-action img,
.pwa-toast__icon {
    border-radius: 9px;
    background: #05060c;
}

.pwa-install-action > span:not(.pwa-install-action__arrow) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.pwa-install-action small,
.pwa-toast__copy > span {
    color: var(--app-cyan);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.pwa-install-action strong {
    font-size: 0.83rem;
}

.pwa-install-action__arrow {
    color: var(--app-cyan);
    font-size: 1rem;
}

/* Native update, install and network messages */
.pwa-toast {
    position: fixed;
    z-index: 999999;
    top: calc(14px + var(--app-safe-top));
    right: calc(14px + var(--app-safe-right));
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 11px;
    width: min(430px, calc(100vw - 28px));
    padding: 12px;
    border: 1px solid var(--app-line);
    border-radius: 20px;
    color: var(--app-white);
    background: rgba(7, 10, 19, 0.96);
    box-shadow: 0 22px 80px rgba(0, 0, 0, 0.55), inset 0 1px rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(24px) saturate(145%);
    opacity: 0;
    transform: translateY(-14px);
    transition: opacity 220ms ease, transform 220ms ease !important;
}

.pwa-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.pwa-toast__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pwa-toast__copy strong {
    overflow: hidden;
    color: var(--app-white);
    font-size: 0.84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pwa-toast__copy small {
    margin-top: 2px;
    color: var(--app-muted);
    font-size: 0.69rem;
    line-height: 1.35;
}

.pwa-toast__action {
    padding: 8px 12px;
    border: 0;
    border-radius: 999px;
    color: #05060c;
    background: linear-gradient(110deg, #a6f4ff, #77c8ff);
    font-size: 0.72rem;
    font-weight: 800;
}

.pwa-toast__close {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #8f9caf;
    background: rgba(255, 255, 255, 0.04);
    font-size: 1.1rem;
    line-height: 1;
}

@media (max-width: 575.98px) {
    .pwa-toast {
        top: auto;
        right: calc(10px + var(--app-safe-right));
        bottom: calc(10px + var(--app-safe-bottom));
        left: calc(10px + var(--app-safe-left));
        grid-template-columns: 40px minmax(0, 1fr) auto;
        width: auto;
    }

    .pwa-toast__action {
        grid-column: 2;
        width: fit-content;
    }

    .pwa-toast__close {
        grid-column: 3;
        grid-row: 1;
    }

    body:has(#cookie-consent-banner) .pwa-install-action,
    body:has(#cookie-consent-banner) .pwa-toast {
        bottom: calc(190px + var(--app-safe-bottom));
    }
}

/* Consistent profile palette: page-level styles previously reintroduced the old Bootstrap blue. */
.personal-profile-page .profile-hero,
.company-profile-page .profile-hero {
    background:
        linear-gradient(90deg, rgba(5, 6, 12, 0.97), rgba(5, 6, 12, 0.62) 64%, rgba(5, 6, 12, 0.38)),
        linear-gradient(0deg, #05060c, transparent 58%),
        url('../img/visuals/digital-universe-hero.webp') 70% center / cover no-repeat !important;
}

.personal-profile-page .profile-hero::before,
.company-profile-page .profile-hero::before {
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    background:
        radial-gradient(circle at 18% 62%, rgba(101, 231, 255, 0.1), transparent 32rem),
        radial-gradient(circle at 82% 42%, rgba(155, 124, 255, 0.12), transparent 28rem) !important;
}

.personal-profile-page .dev-avatar,
.company-profile-page .founder-avatar {
    border-color: rgba(101, 231, 255, 0.34) !important;
    background: linear-gradient(135deg, var(--app-cyan), #6ea4ff 48%, var(--app-violet)) !important;
    box-shadow: 0 0 42px rgba(101, 231, 255, 0.16), 0 0 84px rgba(155, 124, 255, 0.1) !important;
}

.personal-profile-page .section-label,
.company-profile-page .section-label,
.company-profile-page .skill-badge,
.personal-profile-page .exp-period,
.personal-profile-page .client-tag,
.company-profile-page .client-tag {
    border-color: rgba(101, 231, 255, 0.2) !important;
    color: #bdeff8 !important;
    background: rgba(101, 231, 255, 0.08) !important;
}

.personal-profile-page .gradient-divider,
.company-profile-page .gradient-divider {
    background: linear-gradient(90deg, transparent, var(--app-cyan), var(--app-violet), transparent) !important;
}

.personal-profile-page .skill-category,
.personal-profile-page .exp-card,
.personal-profile-page .service-card,
.personal-profile-page .about-stat,
.company-profile-page .founder-card,
.company-profile-page .client-profile-card,
.company-profile-page .stat-highlight-card,
.company-profile-page .profile-service-card,
.company-profile-page .why-feature {
    border-color: rgba(137, 197, 255, 0.16) !important;
    background: linear-gradient(145deg, rgba(17, 22, 39, 0.86), rgba(8, 11, 21, 0.94)) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.045) !important;
}

.personal-profile-page .skill-pill,
.company-profile-page .tech-badge {
    border-color: rgba(137, 197, 255, 0.15) !important;
    color: #c0cadb !important;
    background: rgba(101, 231, 255, 0.055) !important;
}

.personal-profile-page .skill-category-title,
.company-profile-page .section-label,
.company-profile-page .why-icon,
.personal-profile-page .exp-period {
    color: var(--app-cyan) !important;
}

.personal-profile-page .profile-hero .lead,
.company-profile-page .profile-hero .lead {
    color: #c0cadb !important;
}

.personal-profile-page .profile-hero h1,
.company-profile-page .profile-hero h1 {
    color: var(--app-white) !important;
}

.personal-profile-page .profile-hero h1,
.personal-profile-page .profile-hero .lead,
.personal-profile-page .profile-hero .contact-chip,
.personal-profile-page .profile-hero .dev-avatar,
.personal-profile-page .profile-hero .about-stat,
.company-profile-page .profile-hero h1,
.company-profile-page .profile-hero .lead,
.company-profile-page .profile-hero .section-label {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
}

.personal-profile-page .cta-profile-section,
.company-profile-page .cta-profile-section,
.company-profile-page .download-bar {
    border-color: rgba(101, 231, 255, 0.17) !important;
    background: rgba(6, 9, 18, 0.92) !important;
    backdrop-filter: blur(20px) saturate(135%);
}

/* Portfolio categories retain meaning without competing neon blocks. */
.portfolio-page main .badge,
.portfolio-page main .client-tag {
    border: 1px solid rgba(101, 231, 255, 0.2) !important;
    color: #bdeff8 !important;
    background-color: rgba(101, 231, 255, 0.085) !important;
    background-image: none !important;
}

.portfolio-page main .bg-success,
.portfolio-page main .badge.bg-success {
    border-color: rgba(121, 242, 197, 0.22) !important;
    color: #aaf6d8 !important;
    background-color: rgba(121, 242, 197, 0.09) !important;
    background-image: none !important;
}

.portfolio-page main .bg-warning,
.portfolio-page main .badge.bg-warning {
    border-color: rgba(155, 124, 255, 0.24) !important;
    color: #c8bbff !important;
    background-color: rgba(155, 124, 255, 0.1) !important;
    background-image: none !important;
}

.portfolio-page main .bg-danger,
.portfolio-page main .badge.bg-danger {
    border-color: rgba(255, 136, 111, 0.24) !important;
    color: #ffb1a1 !important;
    background-color: rgba(255, 136, 111, 0.09) !important;
    background-image: none !important;
}

.portfolio-page .btn-success,
.portfolio-page .btn-warning,
.portfolio-page .btn-info,
.portfolio-page .btn-danger {
    border-color: rgba(101, 231, 255, 0.28) !important;
    color: var(--app-cyan) !important;
    background: rgba(101, 231, 255, 0.07) !important;
}

/* Client portal: one surface and native autofill treatment. */
.client-login-page .login-card {
    border-color: rgba(137, 197, 255, 0.18) !important;
    background: linear-gradient(155deg, rgba(15, 20, 35, 0.94), rgba(7, 10, 19, 0.98)) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36), inset 0 1px rgba(255, 255, 255, 0.045) !important;
}

.client-login-page .login-card::before {
    height: 2px;
    background: linear-gradient(90deg, var(--app-cyan), var(--app-violet)) !important;
}

.client-login-page .input-group-text {
    color: #05060c !important;
    background: linear-gradient(135deg, #a6f4ff, #6fe1f4) !important;
}

.client-login-page .form-control,
.client-login-page .form-control:focus,
.client-login-page input:-webkit-autofill,
.client-login-page input:-webkit-autofill:hover,
.client-login-page input:-webkit-autofill:focus {
    border-color: rgba(137, 197, 255, 0.18) !important;
    color: var(--app-white) !important;
    background: #090d18 !important;
    -webkit-text-fill-color: var(--app-white) !important;
    -webkit-box-shadow: 0 0 0 1000px #090d18 inset !important;
    box-shadow: 0 0 0 1000px #090d18 inset !important;
    caret-color: var(--app-cyan);
}

.client-login-page .btn-outline-secondary {
    border-color: rgba(137, 197, 255, 0.18) !important;
    color: #c0cadb !important;
    background: #090d18 !important;
}

/* Terms now uses the same cosmic legal-page treatment as Privacy and Cookies. */
.terms-page .terms-content {
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid rgba(137, 197, 255, 0.16);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(17, 22, 39, 0.88), rgba(8, 11, 21, 0.96));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.045);
}

.terms-page .terms-content h2 {
    color: var(--app-white) !important;
}

/* Combined profile remains print-friendly while its on-screen frame belongs to the app. */
@media screen {
    .combined-profile-page {
        background:
            radial-gradient(circle at 84% 16%, rgba(77, 141, 255, 0.13), transparent 34rem),
            radial-gradient(circle at 12% 76%, rgba(155, 124, 255, 0.1), transparent 28rem),
            #05060c !important;
    }

    .combined-profile-page .toolbar {
        border-color: rgba(137, 197, 255, 0.18);
        color: var(--app-white);
        background: rgba(7, 10, 19, 0.92);
        box-shadow: 0 20px 70px rgba(0, 0, 0, 0.4);
    }

    .combined-profile-page .toolbar-copy span {
        color: var(--app-muted);
    }
}

.swal2-popup {
    border: 1px solid rgba(137, 197, 255, 0.18) !important;
    border-radius: 22px !important;
    color: var(--app-white) !important;
    background: #0d111f !important;
}

.swal2-confirm {
    color: #05060c !important;
    background: linear-gradient(110deg, #a6f4ff, #77c8ff) !important;
}

@media (prefers-reduced-motion: reduce) {
    .pwa-install-action,
    .pwa-toast {
        transition: none !important;
    }
}