:root {
    --bg-color: #050510;
    --primary-color: #ff003c;
    /* Cyberpunk Red */
    --primary-glow: 0 0 10px rgba(255, 0, 60, 0.5), 0 0 20px rgba(255, 0, 60, 0.3);
    --secondary-color: #00f0ff;
    /* Cyan accents */
    --text-main: #e0e0e0;
    --text-dim: #888888;
    --window-bg: rgba(10, 10, 20, 0.85);
    --window-border: 1px solid rgba(255, 0, 60, 0.4);
    --panel-bg: rgba(5, 5, 10, 0.9);
    --taskbar-bg: rgba(10, 10, 15, 0.75);
    --menu-bg: rgba(15, 15, 20, 0.95);
    --border-light: rgba(255, 255, 255, 0.1);
    --element-bg: rgba(255, 255, 255, 0.05);
    --os-frame-bg: #0f0f11;
    --plain-bg: linear-gradient(135deg, rgba(15, 15, 20, 0.98), rgba(5, 5, 8, 0.98));
    --glass-blur: blur(12px);

    --font-mono: 'Share Tech Mono', monospace;
    --font-sans: 'Rajdhani', sans-serif;
}

body.light-theme {
    --bg-color: #f0f2f5;
    --primary-color: #d10031;
    --primary-glow: 0 0 10px rgba(209, 0, 49, 0.3), 0 0 20px rgba(209, 0, 49, 0.1);
    --secondary-color: #0096cc;
    --text-main: #222222;
    --text-dim: #555555;
    --window-bg: rgba(255, 255, 255, 0.85);
    --window-border: 1px solid rgba(209, 0, 49, 0.3);
    --panel-bg: rgba(240, 245, 250, 0.9);
    --taskbar-bg: rgba(240, 240, 245, 0.85);
    --menu-bg: rgba(255, 255, 255, 0.95);
    --border-light: rgba(0, 0, 0, 0.1);
    --element-bg: rgba(0, 0, 0, 0.05);
    --os-frame-bg: #e0e0e0;
    --plain-bg: linear-gradient(135deg, rgba(240, 245, 250, 0.98), rgba(255, 255, 255, 0.98));
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-sans);
    overflow: hidden;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100dvh;
    width: 100%;
}

/* --- BOOT SCREEN --- */
#boot-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 1s ease-out;
}

.boot-content {
    text-align: center;
}

.glitch {
    font-family: var(--font-mono);
    font-size: 2.5rem;
    color: var(--primary-color);
    text-shadow: var(--primary-glow);
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.loading-bar-container {
    width: 300px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 auto 15px auto;
    border-radius: 2px;
    overflow: hidden;
}

.loading-bar {
    height: 100%;
    width: 0%;
    background: var(--primary-color);
    box-shadow: 0 0 12px rgba(255,0,60,0.35);
    transition: width 220ms linear;
    will-change: width;
}

.version {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--text-dim);
}

/* Utility to hide boot screen */
.hidden {
    display: none !important;
    opacity: 0;
    pointer-events: none;
}

/* --- DESKTOP --- */
#desktop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    animation: fadeIn 1.5s ease;
}

#plain-view {
    min-height: 100vh;
    min-height: 100dvh;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('assets/download.jpg') no-repeat center center;
    background-size: cover;
    z-index: -1;
}

/* --- OS FRAME --- */
#os-frame {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    border: none;
    border-radius: 0;
    pointer-events: none;
    z-index: 1000;
    box-shadow: none;
}

#os-frame::after {
    content: none;
}

/* --- SIDEBAR --- */
.sidebar {
    position: absolute;
    left: 20px;
    top: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 15px;
    z-index: 10;
    max-height: calc(100vh - 120px);
    align-content: start;
}

.app-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
}

.icon-box {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.icon-box i {
    font-size: 1.8rem;
    color: #ffffff;
    text-shadow: none;
    margin-bottom: 0;
    display: block;
}

.icon-social i {
    font-size: 1.15rem !important;
    line-height: 1;
    display: block;
}

/* Ensure icons are centered and clipped inside the rounded box */
.icon-box {
    overflow: hidden;
}

/* Timeline readability tweaks */
.timeline-container {
    padding: 12px 14px 12px 20px;
}
.timeline-container .timeline-item {
    margin-bottom: 20px;
    position: relative;
    padding-left: 12px;
}
.timeline-container .timeline-item h4,
.timeline-container .timeline-item .timeline-content h4 {
    margin: 0 0 6px 0;
    font-size: 1.05rem;
    color: var(--primary-color);
    line-height: 1.25;
}
.timeline-container .timeline-item p {
    margin: 0;
    color: var(--text-dim);
    line-height: 1.6;
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .icon-box { width: 52px; height: 52px; }
    .app-icon { width: 64px; }
    .icon-social i { font-size: 1rem !important; }
    .timeline-container .timeline-item h4 { font-size: 1rem; }
}

.icon-pink {
    background: linear-gradient(135deg, #ff5b94, #c22c7a);
}

.icon-instagram {
    background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4);
}

.icon-linkedin {
    background: linear-gradient(135deg, #0a66c2, #004182);
}

.icon-gmail {
    background: linear-gradient(135deg, #ea4335, #c5221f);
}

.icon-github {
    background: linear-gradient(135deg, #444444, #171515);
}

/* Hide the old header navigation links inside Plain View (we use a minimal header) */
#plain-view .jack-nav .links {
    display: none !important;
}

/* Replace logo text with animated red corner lines (tech-style) */
#plain-view .jack-nav .logo {
    --logo-line-length: 120px; /* default line length */
    --logo-line-thickness: 6px; /* line thickness */
    position: relative;
    width: 220px; /* reserved space (matches original name area) */
    height: 36px;
    margin-left: 8px;
    overflow: visible;
}

/* animated drawing for left and right lines + moving gradient shimmer */
#plain-view .jack-nav .logo:before,
#plain-view .jack-nav .logo:after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: var(--logo-line-thickness);
    width: 0; /* start collapsed and draw to full */
    background: linear-gradient(90deg, rgba(255,0,60,0.18), var(--primary-color), rgba(255,0,60,0.25));
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(255,0,60,0.14);
    background-size: 200% 100%;
    animation: drawLine 600ms cubic-bezier(.2,.9,.2,1) forwards, techShimmer 2.2s linear infinite;
}

#plain-view .jack-nav .logo:before { left: 0; transform-origin: left center; animation-delay: 120ms; }
#plain-view .jack-nav .logo:after { right: 0; transform-origin: right center; animation-delay: 260ms; }

@keyframes drawLine {
    from { width: 0; opacity: 0.9; }
    to { width: var(--logo-line-length); opacity: 1; }
}

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

/* hover accent: pulse and stronger glow */
#plain-view .jack-nav .logo:hover:before,
#plain-view .jack-nav .logo:hover:after {
    box-shadow: 0 0 22px rgba(255,0,60,0.35);
    transform: translateY(-50%) scaleY(1.05);
}

/* responsive adjustments */
@media (max-width: 1200px) {
    #plain-view .jack-nav .logo { --logo-line-length: 90px; }
}
@media (max-width: 768px) {
    #plain-view .jack-nav .logo { --logo-line-length: 62px; --logo-line-thickness: 5px; }
}

/* hide any leftover strong text if present */
#plain-view .jack-nav .logo strong { display: none; }

/* Peek robot styles */
.peek-robot {
    position: fixed;
    right: 28px;
    bottom: 6px;
    width: 96px;
    height: 96px;
    z-index: 60;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    transform: translateY(18%);
    transition: transform 360ms cubic-bezier(.2,.9,.2,1);
    animation: robotPeekIn 700ms cubic-bezier(.2,.9,.2,1) 420ms both;
}

.peek-robot .robot-body {
    width: 88px;
    height: 88px;
    background: linear-gradient(180deg,#6e1b9f,#3a0f57);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.6), 0 0 18px rgba(78, 0, 120, 0.18) inset;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:8px;
    position: relative;
}

.peek-robot .robot-eye-row {
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:center;
    margin-top:8px;
}

.peek-eye {
    width:20px;
    height:20px;
    background:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    transition: transform 120ms linear;
}

.peek-eye .pupil {
    width:8px;
    height:8px;
    background:#131313;
    border-radius:50%;
    transform: translate(0,0);
    transition: transform 90ms linear;
}

.peek-robot .robot-mouth {
    width:36px;
    height:8px;
    border-radius:4px;
    background:rgba(0,0,0,0.18);
    margin-bottom:10px;
}

@keyframes robotPeekIn {
    from { transform: translateY(80%); opacity: 0; }
    to { transform: translateY(0%); opacity: 1; }
}

/* Blink: scale eyes vertically */
.peek-robot.robot-blink .peek-eye { transform: scaleY(0.15); }

/* On hover (if we later allow pointer events) lift up */
.peek-robot:hover { transform: translateY(0%); }

@media (max-width: 700px) {
    .peek-robot { right: 12px; width:72px; height:72px; }
    .peek-robot .robot-body { width:66px; height:66px; border-radius:12px; }
    .peek-eye { width:16px; height:16px; }
    .peek-eye .pupil { width:6px; height:6px; }
}

/* Full body robot visuals */
/* Head-only peek robot (top-left, peeking from browser tab down to the red line) */
.peek-robot { pointer-events: auto; cursor: pointer; position: fixed; left: 46px; top: -20px; width:72px; height:72px; z-index:1200; display:flex; align-items:flex-start; justify-content:center; }
.peek-robot .robot-head { width:72px; height:72px; border-radius:12px; background: linear-gradient(180deg,#6e1b9f,#3a0f57); box-shadow: 0 12px 30px rgba(0,0,0,0.5), 0 0 12px rgba(120,0,160,0.12) inset; position:relative; display:flex; align-items:center; justify-content:center; }
.peek-robot .robot-antenna { position:absolute; top:-12px; left:50%; transform:translateX(-50%); width:6px; height:18px; display:flex; align-items:flex-start; justify-content:center; }
.peek-robot .robot-antenna span { width:2px; height:100%; background:linear-gradient(180deg,var(--secondary-color), #7a00ff); border-radius:2px; box-shadow:0 0 8px rgba(122,0,255,0.35); }
.peek-robot .robot-eye-row { display:flex; gap:8px; align-items:center; justify-content:center; }
.peek-eye { width:18px; height:18px; background:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.peek-eye .pupil { width:7px; height:7px; background:#131313; border-radius:50%; transition: transform 90ms linear; }
.peek-robot .robot-mouth { position:absolute; bottom:10px; width:24px; height:6px; background: rgba(0,0,0,0.18); border-radius:4px; }

/* dazzled state: stars appear and pupils become sparkles */
.peek-robot.robot-dazzled .pupil { opacity:0.7; filter: drop-shadow(0 0 6px rgba(255,215,0,0.6)); }
.robot-star { position:absolute; width:10px; height:10px; background: linear-gradient(90deg,#fff3a6,#ffd24d); transform-origin:center; border-radius:2px; opacity:0; pointer-events:none; box-shadow: 0 6px 14px rgba(255,200,50,0.18); }
.robot-star.pop { animation: starPop 1200ms cubic-bezier(.2,.9,.2,1) forwards; }
@keyframes starPop { 0%{ opacity:0; transform: translateY(0) scale(0.4) rotate(0deg);} 20%{ opacity:1; transform: translateY(-8px) scale(1.05) rotate(20deg);} 60%{ transform: translateY(-26px) scale(0.9) rotate(50deg);} 100%{ opacity:0; transform: translateY(-48px) scale(0.6) rotate(90deg);} }

.peek-robot.robot-hit { animation: robotHit 260ms cubic-bezier(.2,.9,.2,1); }
@keyframes robotHit { 0%{ transform: translateY(0) } 40%{ transform: translateY(-6px) } 100%{ transform: translateY(0) } }

@media (max-width: 700px) {
    .peek-robot { left: 28px; width:56px; height:56px; }
    .peek-robot .robot-head { width:56px; height:56px; }
    .peek-eye { width:14px; height:14px; }
    .peek-eye .pupil { width:6px; height:6px; }
}

/* Marquee auto-scroll: top row moves right, bottom row moves left */
.marquee-section { overflow: hidden; position: relative; }
.marquee-row { display:flex; gap: 12px; align-items:center; will-change: transform; }
.marquee-row.marquee-row-1 { animation: marquee-right 40s linear infinite; }
.marquee-row.marquee-row-2 { animation: marquee-left 48s linear infinite; }
.marquee-row:hover { animation-play-state: paused; }

@keyframes marquee-left {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes marquee-right {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}

/* make tiles seamless by ensuring repeated content has no gaps */
.marquee-tile { flex: 0 0 auto; }

/* Plain View floating boxes */
.plain-floating { max-width: calc(100% - 120px); }
.plain-floating .floating-box {
    transition: transform .18s ease, box-shadow .18s ease;
    min-width: 220px;
}
.plain-floating .floating-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(0,0,0,0.55);
}

.plain-floating::-webkit-scrollbar { height:8px; }
.plain-floating::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius:6px; }

@media (max-width: 1024px) {
    .plain-floating { display: none; }
}

/* Plain view content should scroll on smaller screens */
#plain-view .plain-view-content {
    height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    padding: 18px;
}

/* Ensure plain view container is visible and sits above boot overlay when active */
#plain-view {
    z-index: 50;
    background-color: #0b0b0b;
}

/* Make windows responsive */
@media (max-width: 1200px) {
    .app-icon { width: 72px; }
    .icon-box { width: 56px; height: 56px; }
}

@media (max-width: 1024px) {
    body { overflow: auto; }
    .sidebar {
        position: fixed;
        left: 12px;
        top: 12px;
        grid-template-columns: repeat(4, auto);
        gap: 10px;
        max-height: none;
        padding: 6px;
        background: transparent;
    }
    .app-icon span { display: none; }
    .icon-box { width: 52px; height: 52px; border-radius: 12px; }
    .app-icon { width: 68px; }
    .os-window { max-width: 92vw; }
}

/* Prevent hero elements from overlapping on medium and small screens */
@media (max-width: 1024px) {
    .hero-inner { padding-top: 2.5rem; padding-bottom: 4rem; }
    .plain-floating { position: static !important; left: auto !important; top: auto !important; margin: 10px 0 16px 0; padding: 6px 4px; width: auto; max-width: 100%; box-sizing: border-box; }
    .plain-floating .floating-box { width: 180px; min-width: 140px; }
    .hero-title { font-size: clamp(36px, 8vw, 96px); text-align: left; }
    .hero-title-wrap { padding-left: 8px; padding-right: 8px; }
    .hero-portrait { position: relative; left: auto; transform: none; bottom: auto; margin: 18px auto 0; width: 200px; }
    .hero-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
    .contact-center { align-self: flex-start; }
}

@media (max-width: 768px) {
    .hero-inner { padding-top: 1.5rem; padding-bottom: 3rem; }
    .plain-floating { display: flex; gap: 10px; overflow-x: auto; }
    .plain-floating .floating-box { width: 160px; }
    .hero-title { font-size: clamp(28px, 10vw, 56px); line-height: 1; }
    .hero-portrait { width: 160px; }
    .about-heading { font-size: clamp(2rem, 10vw, 64px); }
}

@media (max-width: 480px) {
    .plain-floating .floating-box { width: 140px; padding:10px; }
    .hero-title { font-size: clamp(22px, 10vw, 40px); }
    .hero-desc { max-width: 100%; }
    .hero-portrait { width: 140px; }
}

@media (max-width: 768px) {
    .sidebar {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin: 10px auto 0 auto !important;
        width: calc(100% - 16px) !important;
        grid-template-columns: repeat(4, auto) !important;
        gap: 8px !important;
        justify-content: center !important;
        max-height: calc(100dvh - 150px) !important;
        overflow-y: auto !important;
    }
    .app-icon { width: 60px; }
    .icon-box { width: 48px; height: 48px; border-radius: 12px; }
    .icon-box i { font-size: 1.15rem; }
    .taskbar {
        bottom: 12px !important;
        padding: 6px 8px !important;
        height: 48px !important;
        gap: 8px !important;
        border-radius: 12px !important;
        width: calc(100vw - 24px) !important;
        left: 12px !important;
        transform: none !important;
        justify-content: space-between !important;
    }
    .taskbar .open-apps { gap: 8px; overflow-x: auto; padding: 6px; }
    .music-player-full {
        display: none !important;
    }
    .os-window, .os-window-projects, .os-window-education {
        width: calc(100vw - 16px) !important;
        height: calc(100dvh - 84px) !important;
        border-radius: 12px !important;
    }
    .os-window.maximized, .os-window-projects.maximized, .os-window-education.maximized {
        width: 100vw !important;
        height: calc(100dvh - 60px) !important;
        top: 0 !important;
        left: 0 !important;
        border-radius: 0 !important;
    }
    #start-menu {
        bottom: 72px !important;
        width: calc(100vw - 24px) !important;
        left: 12px !important;
        right: 12px !important;
        transform: none !important;
    }
    #quick-settings {
        bottom: 72px !important;
        width: calc(100vw - 24px) !important;
        right: 12px !important;
        left: auto !important;
        transform: none !important;
    }
    .window-content { padding: 12px; }
    #plain-view { padding: 8px; }
    .timeline-container { padding: 10px; }
    .contact-details { position: fixed; left: 12px; right: 12px; bottom: 90px; min-width: auto; border-radius: 12px; }
    body { overflow: auto; }
}

@media (max-width: 480px) {
    .sidebar {
        grid-template-columns: repeat(5, auto) !important;
        gap: 6px !important;
        max-height: calc(100dvh - 140px) !important;
    }
    .app-icon { width: 44px; }
    .icon-box { width: 40px; height: 40px; border-radius: 10px; }
    .icon-box i { font-size: 1rem; }
    .app-icon span { display: none; }
    .window-title { font-size: 0.8rem; }
    .timeline-container .timeline-item h4 { font-size: 0.98rem; }
    .contact-details { bottom: 80px; left: 10px; right: 10px; padding: 10px; }
    .os-window, .os-window-projects, .os-window-education {
        width: calc(100vw - 12px) !important;
        height: calc(100dvh - 76px) !important;
        border-radius: 10px !important;
    }
}

.icon-purple {
    background: linear-gradient(135deg, #a450ff, #5b24b3);
}

.icon-blue {
    background: linear-gradient(135deg, #00c6ff, #0072ff);
}

.icon-red {
    background: linear-gradient(135deg, #ff4b4b, #b31010);
}

.icon-green {
    background: linear-gradient(135deg, #00b09b, #007a63);
}

.icon-teal {
    background: linear-gradient(135deg, #00c9ff, #0087a8);
}

.icon-orange {
    background: linear-gradient(135deg, #ff7e5f, #feb47b);
}

.icon-yellow {
    background: linear-gradient(135deg, #fceabb, #f8b500);
}

.icon-gray {
    background: linear-gradient(135deg, #8e9eab, #4f5f6b);
}

.icon-dark {
    background: linear-gradient(135deg, #535353, #1a1a1a);
}

.icon-music {
    background: linear-gradient(135deg, #4481eb, #04befe);
}

.app-icon span {
    font-size: 0.85rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    text-align: center;
    font-weight: 600;
    margin-top: 5px;
    color: var(--text-main);
}

.app-icon:hover {
    transform: scale(1.05);
}

.app-icon:hover .icon-box {
    box-shadow: 0 6px 15px rgba(255, 255, 255, 0.2);
}

/* --- START MENU --- */
#start-menu {
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    width: 380px;
    max-height: 500px;
    background: var(--menu-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 20px;
    z-index: 1000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    gap: 15px;
    transition: opacity 0.2s, transform 0.2s;
    opacity: 1;
}

#start-menu.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(30px);
}

.search-container {
    display: flex;
    align-items: center;
    background: var(--element-bg);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 10px 15px;
    gap: 12px;
}

.search-container i {
    color: var(--text-dim);
}

.search-container input {
    background: transparent;
    border: none;
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 1rem;
    outline: none;
    width: 100%;
}

.start-apps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    overflow-y: auto;
    max-height: 350px;
    padding: 10px 5px;
}

.start-apps-grid::-webkit-scrollbar {
    width: 4px;
}

.start-apps-grid::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 2px;
}

.start-app-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}

.start-app-item:hover {
    transform: scale(1.05);
}

.start-app-item .icon-box {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    font-size: 1.2rem;
    margin-bottom: 0;
}

.start-app-item span {
    font-size: 0.8rem;
    text-align: center;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px;
}

/* --- WINDOWS CONTAINER --- */
#windows-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 40px);
    /* minus taskbar */
    pointer-events: none;
    /* Let clicks pass through if empty */
}

/* --- WINDOW SYSTEM --- */
.os-window {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 800px;
    height: 500px;
    background: var(--window-bg);
    border: var(--window-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: transform 0.2s, opacity 0.2s;
    pointer-events: auto;
}

.os-window.minimized {
    transform: scale(0.8) translateY(100vh);
    opacity: 0;
    pointer-events: none;
}

.os-window.maximized {
    width: 100vw !important;
    height: calc(100vh - 40px) !important;
    /* height minus taskbar */
    top: 0 !important;
    left: 0 !important;
    border-radius: 0;
    transition: width 0.3s, height 0.3s, top 0.3s, left 0.3s;
}

.window-header {
    height: 30px;
    background: rgba(255, 0, 60, 0.1);
    border-bottom: var(--window-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    cursor: grab;
    user-select: none;
}

.window-header:active {
    cursor: grabbing;
}

.window-title {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.window-controls {
    display: flex;
    gap: 15px;
    align-items: center;
    padding-right: 5px;
}

.win-btn {
    color: var(--text-dim);
    cursor: pointer;
    font-size: 0;
    /* Remove text altogether */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    position: relative;
    transition: color 0.2s, background-color 0.2s;
    border-radius: 4px;
}

.win-btn svg {
    width: 12px;
    height: 12px;
    pointer-events: none;
    stroke: currentColor;
    display: block;
}

.win-btn:hover {
    color: var(--text-main);
    background-color: rgba(255, 255, 255, 0.1);
}

.btn-close:hover {
    color: #ff4747;
}

.window-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    position: relative;
    color: var(--text-main);
}

.window-content::-webkit-scrollbar {
    width: 8px;
}

.window-content::-webkit-scrollbar-thumb {
    background: rgba(255, 0, 60, 0.3);
    border-radius: 4px;
}

/* --- TASKBAR --- */
.taskbar {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    height: 55px;
    width: auto;
    background: var(--taskbar-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    gap: 20px;
}

.taskbar-right {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 10px;
}

.taskbar-sys-btn {
    display: flex;
    align-items: center;
    padding: 6px 14px;
    background: var(--element-bg);
    border-radius: 12px;
    font-size: 0.9rem;
    color: var(--text-main);
    gap: 10px;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 0.2s;
}

.taskbar-sys-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.battery-icon {
    display: flex;
    align-items: center;
    gap: 5px;
}

.datetime {
    flex-direction: column;
    align-items: flex-start;
    padding: 5px 12px;
    line-height: 1.2;
    gap: 2px;
    white-space: nowrap;
}

.datetime .time {
    font-weight: bold;
    font-size: 0.95rem;
}

.datetime .date {
    font-size: 0.75rem;
    color: var(--text-dim);
}

.open-apps {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
}

.start-btn {
    font-size: 1.2rem;
    color: #fff;
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--element-bg);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
    margin-right: 5px;
}

.start-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.taskbar-dock-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s;
    position: relative;
}

.taskbar-dock-icon:hover {
    transform: scale(1.1) translateY(-3px);
}

/* --- QUICK SETTINGS PANEL --- */
#quick-settings {
    position: absolute;
    bottom: 90px;
    right: 20px;
    width: 360px;
    background: var(--menu-bg);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 20px;
    z-index: 1000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: opacity 0.2s, transform 0.2s;
    opacity: 1;
}

#quick-settings.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(30px);
}

.qs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.qs-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--element-bg);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    height: 80px;
    cursor: pointer;
    transition: all 0.2s;
}

.qs-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.qs-btn.active {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

.qs-btn.active .qs-icon-wrapper i,
.qs-btn.active span {
    color: #000;
}

.qs-icon-wrapper {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    color: var(--text-main);
}

.qs-btn span {
    font-size: 0.75rem;
    color: var(--text-main);
    text-align: center;
    line-height: 1.1;
    padding: 0 5px;
}

.qs-sliders {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.qs-slider-row {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--text-main);
}

.qs-slider-row i {
    width: 20px;
    text-align: center;
}

.qs-slider {
    flex-grow: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--element-bg);
    border-radius: 2px;
    outline: none;
}

.qs-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--secondary-color);
    cursor: pointer;
    border: 2px solid var(--bg-color);
    transition: transform 0.1s;
}

.qs-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.qs-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    padding-top: 15px;
    border-top: 1px solid var(--border-light);
    color: var(--text-main);
}

.qs-battery-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.qs-battery-text {
    font-weight: bold;
}

.taskbar-sys-wrapper:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.taskbar-dock-icon i {
    color: var(--text-main);
    font-size: 1.1rem;
    text-shadow: none;
    margin-bottom: 0;
}

.taskbar-dock-icon.active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    border-radius: 50%;
    box-shadow: 0 0 5px var(--primary-color);
}

.music-player-full {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 6px 15px;
    background: var(--element-bg);
    border-radius: 12px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s;
}

.music-player-full:hover {
    background: rgba(255, 255, 255, 0.1);
}

.mp-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main);
    white-space: nowrap;
}

.mp-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #e0e0e0;
}

.play-btn-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.2s;
}

.play-btn-circle:hover {
    background: rgba(255, 255, 255, 0.3);
}

.mp-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-dim);
    font-size: 0.75rem;
}

.progress-bar {
    width: 60px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    width: 0%;
    height: 100%;
    background: var(--text-main);
}

/* --- APP SPECIFIC STYLES --- */
.about-container {
    text-align: center;
    padding: 20px;
}

.profile-pic {
    width: 150px;
    height: 150px;
    margin: 0 auto 20px auto;
    border-radius: 50%;
    position: relative;
    padding: 4px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), var(--primary-glow);
    /* Transition transform mostly, avoid width/height for crispness */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-radius 0.4s, z-index 0s, width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), height 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
}

.profile-pic:hover:not(.enlarged) {
    transform: scale(1.1) translateY(-10px) rotateX(10deg) rotateY(-5deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), var(--primary-glow);
}

.profile-pic.enlarged {
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    width: 400px !important;
    height: 400px !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999;
    border-radius: 6px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.8), 0 0 50px rgba(255, 0, 60, 0.5);
    margin: 0;
}

.profile-pic.enlarged img {
    border-radius: 5px;
    border-width: 2px;
}

.profile-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--window-bg);
    pointer-events: none;
    transition: border-radius 0.4s, border-width 0.4s;
    backface-visibility: hidden;
    transform: translateZ(0);
    /* Force hardware accel */
}

.plain-view-pic {
    margin: 0;
    width: 160px;
    height: 160px;
    flex-shrink: 0;
}

/* Backdrop for enlarged image */
.profile-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
}

.profile-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.about-container h2 {
    font-size: 2rem;
    margin-bottom: 5px;
}

.about-container h4 {
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.status-badge {
    display: inline-block;
    padding: 5px 15px;
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid var(--secondary-color);
    border-radius: 20px;
    font-size: 0.8rem;
    margin-bottom: 20px;
}

.about-container .bio {
    line-height: 1.6;
    color: var(--text-dim);
}

/* Terminal */
.terminal-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: #0f0;
    overflow-y: auto;
}

.term-output {
    flex-grow: 1;
    margin-bottom: 10px;
}

.term-output div {
    margin-bottom: 5px;
}

.prompt {
    color: var(--primary-color);
    margin-right: 10px;
}

.term-response {
    color: #0f0;
    padding-left: 10px;
    margin-bottom: 15px !important;
}

.term-response .cmd {
    color: var(--secondary-color);
}

.term-input-line {
    display: flex;
}

.term-input {
    flex-grow: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-family: var(--font-mono);
    font-size: 1rem;
    outline: none;
}

/* Chat */
.chat-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.chat-history {
    flex-grow: 1;
    overflow-y: auto;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.chat-history::-webkit-scrollbar {
    width: 6px;
}

.chat-history::-webkit-scrollbar-thumb {
    background: rgba(255, 0, 60, 0.3);
    border-radius: 3px;
}

.chat-message {
    padding: 10px 15px;
    border-radius: 8px;
    max-width: 85%;
    line-height: 1.4;
}

.chat-message i {
    margin-right: 8px;
}

.chat-message.ai {
    background: rgba(255, 0, 60, 0.15);
    border-left: 3px solid var(--primary-color);
    align-self: flex-start;
}

.chat-message.user {
    background: rgba(0, 240, 255, 0.15);
    border-right: 3px solid var(--secondary-color);
    align-self: flex-end;
    text-align: right;
}

/* --- PRINCESS CUSTOM CHATBOT STYLES --- */
.chat-message.ai {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.chat-sender {
    font-family: var(--font-mono);
    font-weight: 700;
    color: #ff007f;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 6px;
    text-shadow: 0 0 8px rgba(255, 0, 127, 0.4);
    margin-bottom: 2px;
}

.chat-text {
    line-height: 1.5;
    font-size: 0.95rem;
}

.chat-text a {
    color: var(--secondary-color);
    text-decoration: underline;
}

.chat-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 2px;
    width: 100%;
}

.chat-chip {
    background: rgba(255, 0, 60, 0.08);
    border: 1px solid rgba(255, 0, 60, 0.35);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-weight: 600;
}

.chat-chip:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: var(--primary-glow);
    transform: translateY(-1.5px);
    color: #ffffff;
}

.chat-action-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 4px;
}

.chat-action-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff !important;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-weight: 500;
    text-decoration: none !important;
}

.chat-action-btn:hover {
    background: rgba(0, 240, 255, 0.12);
    border-color: var(--secondary-color);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
    transform: translateY(-1px);
}

/* Typing Indicator Animation */
.typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
}

.typing-dots span {
    width: 6px;
    height: 6px;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: inline-block;
    animation: typingBounce 1.4s infinite ease-in-out both;
}

.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typingBounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

.chat-input-area {
    display: flex;
    gap: 10px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
}

.chat-input-area input {
    flex-grow: 1;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 10px;
    border-radius: 4px;
    outline: none;
    font-family: var(--font-sans);
}

.chat-input-area input:focus {
    border-color: var(--primary-color);
}

.chat-input-area button {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 0 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.chat-input-area button:hover {
    background: #ff3366;
    box-shadow: var(--primary-glow);
}

/* Other apps */
.projects-container,
/* --- NEW SKILLS APP STYLES --- */
.skills-app-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.skills-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.skill-cat-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-dim);
    padding: 8px 16px;
    border-radius: 20px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.skill-cat-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    transform: translateY(-1px);
}

.skill-cat-btn.active {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-main);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.skills-content-scroll {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 10px;
}

.skills-content-scroll::-webkit-scrollbar {
    width: 6px;
}

.skills-content-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.skill-group {
    margin-bottom: 30px;
    animation: fadeIn 0.4s ease;
}

.skill-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-dim);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.skill-group-line {
    flex-grow: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
}

.skill-items-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.skill-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(15, 20, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 12px 18px;
    border-radius: 8px;
    color: var(--text-main);
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.skill-card:hover {
    background: rgba(25, 30, 45, 0.8);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.skill-card i {
    font-size: 1.1rem;
    text-shadow: 0 0 10px currentColor;
    /* Slight glow for icons */
}

.timeline-container {
    border-left: 2px solid var(--primary-color);
    margin-left: 10px;
    padding-left: 20px;
}

.about-section .about-inner {
    max-width: 1100px;
    text-align: left;
}

.about-section .about-heading {
    font-size: clamp(2.8rem, 8vw, 7rem);
    text-align: center;
    margin-bottom: 2.5rem;
}

.about-section .timeline-container {
    max-width: 920px;
    margin: 0 auto;
    padding-left: 24px;
    width: 100%;
}

.about-section .timeline-item {
    padding: 1rem 1rem 1rem 1.2rem;
    margin-bottom: 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.about-section .timeline-item h3 {
    margin: 0 0 6px 0;
    font-size: clamp(1.15rem, 2vw, 1.65rem);
    line-height: 1.15;
    color: var(--text-main);
}

.about-section .timeline-company {
    margin: 0;
    color: var(--secondary-color);
    font-weight: 700;
    font-size: clamp(0.95rem, 1.4vw, 1.08rem);
}

.about-section .timeline-desc {
    margin: 8px 0 0 0;
    color: var(--text-main);
    opacity: 0.9;
    font-size: clamp(0.92rem, 1.35vw, 1.05rem);
    line-height: 1.65;
}

.about-section .timeline-item .timeline-year {
    font-size: 0.98rem;
    margin-bottom: 12px;
    color: var(--primary-color);
    font-weight: 700;
}

.about-section .timeline-item::before {
    left: -29px;
    top: 18px;
    width: 14px;
    height: 14px;
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -27px;
    top: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary-color);
}

.timeline-year {
    font-family: var(--font-mono);
    color: var(--secondary-color);
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.achievements-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    grid-auto-rows: minmax(260px, auto);
    padding: 18px;
}

.achievement-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(180deg, rgba(20,20,20,0.85), rgba(12,12,12,0.85));
    border: 1px solid rgba(255, 215, 0, 0.12);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.48);
}

.achievement-card-media {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 14px;
    padding: 14px;
    align-items: stretch;
}

.achievement-photo-frame,
.achievement-photo-placeholder,
.achievement-certificate-preview {
    min-height: 220px;
    border-radius: 12px;
    border: 1px dashed rgba(255, 215, 0, 0.12);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.04), rgba(255, 255, 255, 0.02));
}

/* Certificate button inside achievement cards */
.certificate-btn {
    display: inline-block;
    background: linear-gradient(90deg, #ffd54d, #ffb74d);
    color: #111;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}
.certificate-btn:hover { transform: translateY(-2px); }



.achievement-photo-frame {
    overflow: hidden;
    padding: 0;
    border-radius: 12px;
    cursor: zoom-in;
}

.achievement-open-image {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    width: 100%;
}

.achievement-certificate-open {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    width: 100%;
    padding: 0;
    border: 0;
    cursor: zoom-in;
}

.achievement-photo-image {
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    display: block;
    background: #111;
}

.achievement-certificate-image {
    width: 100%;
    height: 100%;
    min-height: 190px;
    object-fit: contain;
    display: block;
    border-radius: 12px;
    background: #111;
}

.achievement-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.achievement-lightbox.hidden {
    display: none;
}

.achievement-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(6px);
}

.achievement-lightbox-panel {
    position: relative;
    z-index: 1;
    width: min(94vw, 980px);
    max-height: 92vh;
    background: #111;
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6);
}

.achievement-lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
}

.achievement-lightbox-image {
    width: 100%;
    max-height: calc(92vh - 70px);
    object-fit: contain;
    display: block;
    border-radius: 12px;
}

.achievement-lightbox-caption {
    margin-top: 10px;
    color: #ffd700;
    font-family: var(--font-mono);
    text-align: center;
    font-size: 0.95rem;
}

.achievement-photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px;
    color: var(--text-main);
}

.achievement-photo-placeholder i {
    font-size: 2.2rem;
    color: #ffd700;
    margin-bottom: 10px;
}

.achievement-photo-placeholder span {
    font-family: var(--font-mono);
    font-size: 1rem;
    margin-bottom: 6px;
}

.achievement-photo-placeholder small {
    color: var(--text-dim);
}

.achievement-certificate-preview {
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.12), rgba(0, 0, 0, 0.15));
}

.achievement-certificate-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffd700;
    font-family: var(--font-mono);
    margin-bottom: 14px;
}

.achievement-certificate-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--text-main);
}

.achievement-certificate-body strong {
    font-size: 1.05rem;
}

.achievement-certificate-body span {
    color: var(--secondary-color);
    font-size: 0.92rem;
}

.achievement-certificate-body p {
    color: var(--text-dim);
    line-height: 1.45;
    font-size: 0.92rem;
}

.achievement-card-details {
    padding: 0 16px 16px;
}

/* Make certificate CTA align bottom-right inside media column */
.achievement-card-media > div:last-child { display:flex; flex-direction:column; justify-content:space-between; }
.achievement-card-media .certificate-btn { align-self:flex-start; }

@media (max-width: 768px) {
    .achievements-container { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .achievement-card-media { grid-template-columns: 1fr; }
    .achievement-photo-frame, .achievement-photo-placeholder { min-height: 180px; }
    .achievement-photo-image { min-height: 180px; }
}

.achievement-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 215, 0, 0.12);
    color: #ffd700;
    font-size: 0.78rem;
    margin-bottom: 10px;
}

.achievement-card-details h3 {
    margin-bottom: 8px;
    color: var(--text-main);
}

.achievement-card-details p {
    color: var(--text-dim);
    line-height: 1.5;
}

.achievement-item {
    padding: 10px;
    margin-bottom: 10px;
    background: rgba(255, 215, 0, 0.1);
    border-left: 3px solid #ffd700;
}

.achievement-item i {
    color: #ffd700;
    margin-right: 10px;
}

.contact-container p {
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.contact-container a {
    color: var(--secondary-color);
    text-decoration: none;
}

.contact-container a:hover {
    text-decoration: underline;
}

.resume-container {
    position: relative;
    text-align: center;
    padding-top: 8px;
}

.resume-download-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

.resume-viewer {
    width: 100%;
    height: min(62vh, 560px);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    background: var(--panel-bg);
}

.dl-btn {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.2s;
    font-family: var(--font-sans);
    font-size: 1rem;
}

.dl-btn:hover {
    background: var(--primary-color);
    color: #fff;
    box-shadow: var(--primary-glow);
}

/* --- PLAIN VIEW MAPPING --- */
.view-toggle-btn {
    position: absolute;
    top: 25px;
    right: 35px;
    background: var(--menu-bg);
    border: 1px solid var(--border-light);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text-main);
    padding: 10px 18px;
    border-radius: 20px;
    font-family: var(--font-sans);
    font-weight: 600;
    cursor: pointer;
    z-index: 1000;
    transition: background 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.view-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

#plain-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #0C0C0C;
    z-index: 500;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 0.4s ease-in-out;
}

#plain-view.hidden {
    opacity: 0;
    pointer-events: none;
}

.plain-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
    opacity: 0.45;
    filter: saturate(1.15) contrast(1.15) brightness(0.85);
}

.plain-bg-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(12, 12, 12, 0.4) 0%, #0c0c0c 95%);
    z-index: 2;
    pointer-events: none;
}

.plain-view-header {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 700;
    width: auto;
    height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
    background: transparent;
}

.plain-view-header .view-toggle-btn {
    position: relative;
    top: auto;
    right: auto;
}

.plain-view-content {
    position: absolute;
    inset: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    color: var(--text-main);
    z-index: 10;
}

.plain-view-embed-wrap {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
}

.plain-view-embed {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #09090d;
}

.plain-section {
    background: var(--element-bg);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.plain-section-title {
    font-family: var(--font-mono);
    color: var(--primary-color);
    font-size: 1.8rem;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255, 0, 60, 0.3);
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pv-about-hero {
    display: flex;
    align-items: center;
    gap: 30px;
}

.pv-hero-text h1 {
    font-size: 3rem;
    margin-bottom: 5px;
    text-shadow: var(--primary-glow);
}

.pv-hero-text h3 {
    color: var(--secondary-color);
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.pv-projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.pv-project-card {
    background: var(--element-bg);
    border: 1px solid var(--border-light);
    padding: 20px;
    border-radius: 12px;
}

.pv-project-card h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.pv-tag {
    display: inline-block;
    background: rgba(0, 195, 255, 0.15);
    color: var(--secondary-color);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    margin-right: 5px;
    margin-top: 10px;
}

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    body {
        overflow: auto;
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    #desktop.hidden {
        display: none !important;
    }

    #plain-view {
        position: relative;
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        height: auto;
        overflow-y: auto;
    }

    #plain-view.hidden {
        display: none !important;
    }

    .plain-view-header {
        top: 12px;
        right: 12px;
    }

    .plain-view-header .view-toggle-btn {
        width: 100%;
        justify-content: center;
    }

    .plain-view-content {
        max-width: 100%;
        padding: 0;
    }

    .view-toggle-btn {
        position: static;
        width: 100%;
    }

    .plain-section {
        padding: 18px 16px;
        border-radius: 14px;
        margin-bottom: 18px;
    }

    .plain-section-title {
        font-size: 1.35rem;
        flex-wrap: wrap;
    }

    .pv-about-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .pv-hero-text h1 {
        font-size: clamp(2rem, 9vw, 2.8rem);
        line-height: 1.05;
    }

    .pv-hero-text h3 {
        font-size: 1rem;
    }

    .pv-projects-grid {
        grid-template-columns: 1fr;
    }

    .start-apps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .sidebar {
        left: 12px;
        top: 74px;
        width: calc(100% - 24px);
        grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
        gap: 12px 8px;
        max-height: calc(100dvh - 170px);
        overflow-y: auto;
        padding-right: 4px;
    }

    .app-icon {
        width: 100%;
    }

    .icon-box {
        width: 52px;
        height: 52px;
        border-radius: 14px;
    }

    .icon-box i {
        font-size: 1.4rem;
    }

    .app-icon span {
        font-size: 0.75rem;
        line-height: 1.2;
        max-width: 100%;
        word-break: break-word;
    }

    #start-menu {
        width: calc(100vw - 20px);
        left: 10px;
        right: 10px;
        transform: translateY(20px);
        bottom: 84px;
        max-height: calc(100dvh - 100px);
        padding: 14px;
        border-radius: 12px;
    }

    #start-menu.hidden {
        transform: translateY(30px);
    }

    .taskbar {
        left: 10px;
        right: 10px;
        width: calc(100% - 20px);
        transform: none;
        bottom: 10px;
        height: 62px;
        gap: 8px;
        padding: 0 8px;
        border-radius: 14px;
        overflow-x: auto;
        justify-content: flex-start;
    }

    .music-player-full,
    .taskbar-sys-wrapper {
        display: none !important;
    }

    .open-apps {
        min-width: max-content;
        gap: 6px;
    }

    .start-btn,
    .taskbar-dock-icon {
        width: 34px;
        height: 34px;
        flex: 0 0 auto;
    }

    #quick-settings {
        right: 10px;
        width: calc(100vw - 20px);
        bottom: 84px;
        padding: 14px;
    }

    .qs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .os-window {
        width: calc(100vw - 16px) !important;
        height: calc(100dvh - 92px) !important;
        border-radius: 12px;
    }

    .window-content {
        padding: 14px;
    }

    #os-frame {
        border-width: 6px;
        border-radius: 8px;
    }

    .pv-tag {
        margin-right: 6px;
        margin-top: 8px;
    }

    .achievements-container {
        grid-template-columns: 1fr;
    }

    .achievement-card-media {
        grid-template-columns: 1fr;
    }

    .achievement-photo-frame,
    .achievement-photo-placeholder,
    .achievement-certificate-preview {
        min-height: 220px;
    }

    .achievement-photo-image {
        min-height: 220px;
    }

    .achievement-certificate-image {
        min-height: 220px;
    }

    .timeline-container {
        padding-left: 12px !important;
    }

    .loading-bar-container {
        width: min(72vw, 260px);
    }

    .glitch {
        font-size: clamp(1.5rem, 7vw, 2.2rem);
    }

    .version {
        font-size: 0.85rem;
        padding: 0 12px;
    }
}

/* --- PLAIN VIEW (Jack 3D Creator) --- */
#plain-view.jack-portfolio {
    background: #0C0C0C !important;
    font-family: 'Kanit', sans-serif;
    color: #D7E2EA;
    overflow-x: clip;
    scroll-behavior: smooth;
}

#plain-view .plain-view-content {
    scroll-snap-type: y mandatory;
}

#plain-view .plain-view-content > section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.hero-heading {
    background: linear-gradient(180deg, #646973 0%, #BBCCD7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.jack-hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: clip;
    padding-bottom: 1rem;
}

.jack-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2.5rem 0 2.5rem;
}
.jack-nav .links {
    display: flex;
    gap: 2rem;
    color: #D7E2EA;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: .12em;
}
.jack-nav .links a {
    color: inherit;
    text-decoration: none;
    opacity: 1;
    transition: opacity 200ms ease;
}
.jack-nav .links a:hover { opacity: .7; }

.hero-inner { position: relative; width: 100%; max-width: 1400px; margin: 0 auto; padding: 1rem 1rem 6rem 1rem; }
.hero-title-wrap { overflow: hidden; }
.hero-title {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 0.9;
    white-space: normal; /* allow wrapping so large headings don't overlap */
    font-size: clamp(48px, 10vw, 160px);
}

.hero-bottom { display:flex; justify-content:space-between; align-items:flex-end; padding-bottom:2.5rem; }
.hero-desc { color:#D7E2EA; font-weight:300; text-transform:uppercase; letter-spacing:.12em; max-width:260px; font-size:clamp(.75rem,1.4vw,1.2rem); }

.contact-btn { display:inline-flex; align-items:center; gap:.6rem; border-radius:999px; padding: .6rem 1.8rem; background: linear-gradient(123deg, #18011F 7%, #B600A8 37%, #7621B0 72%, #BE4C00 100%); box-shadow: 0 4px 4px rgba(181,1,167,0.25), inset 4px 4px 12px #7721B1; color:#fff; font-weight:600; text-transform:uppercase; letter-spacing:.16em; border: 2px solid rgba(255,255,255,0.05); }

.contact-toggle-wrap { position:relative; display:flex; flex-direction:column; align-items:flex-end; }
.contact-details { min-width:240px; padding:1rem 1.1rem; border-radius:20px; background: rgba(9, 9, 12, 0.82); border:1px solid rgba(255,255,255,0.12); box-shadow: 0 16px 30px rgba(0,0,0,0.28); backdrop-filter: blur(12px); }
.contact-details-popover { position:absolute; top:calc(100% + .85rem); right:0; z-index:40; width:min(320px, calc(100vw - 2rem)); }
.contact-details p { margin:0 0 .6rem 0; color:#D7E2EA; font-size:.92rem; display:flex; align-items:center; gap:.55rem; word-break:break-word; }
.contact-details p:last-child { margin-bottom:0; }
.contact-details a { color:#fff; text-decoration:none; }
.contact-details a:hover { text-decoration:underline; }

.hero-portrait { position:absolute; left:50%; transform:translateX(-50%); bottom:0; z-index:10; width:280px; }
@media(min-width:640px){ .hero-portrait{ width:360px; } }
@media(min-width:768px){ .hero-portrait{ width:440px; } }
@media(min-width:1024px){ .hero-portrait{ width:520px; } }

/* Marquee */
.marquee-section { background:transparent; padding-top:6rem; padding-bottom:2.5rem; overflow:hidden; }
.marquee-row { display:flex; gap: .75rem; will-change: transform; }
.marquee-tile { width:420px; height:270px; border-radius:16px; overflow:hidden; flex:0 0 auto; background:#111; }
.marquee-tile img { width:100%; height:100%; object-fit:cover; display:block; }

/* About */
.about-section { min-height:100vh; padding:5rem 1.25rem; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.about-inner { max-width:980px; text-align:center; }
.about-heading { font-weight:900; font-size:clamp(3rem,12vw,160px); line-height:0.9; }
.about-text { color:#D7E2EA; font-weight:500; max-width:560px; margin:2rem auto; font-size:clamp(1rem,2vw,1.35rem); line-height:1.5; }
.contact-center { margin-top:2.5rem; }

/* Services */
.services-section { background:#FFFFFF; border-top-left-radius:40px; border-top-right-radius:40px; padding:4rem 1.25rem; }
.services-heading { color:#0C0C0C; font-weight:900; text-align:center; font-size:clamp(3rem,12vw,160px); margin-bottom:3.5rem; }
.service-item { display:flex; gap:2rem; align-items:flex-start; padding:2rem 0; border-top:1px solid rgba(12,12,12,0.05); }
.service-num { font-weight:900; color:#0C0C0C; font-size:clamp(3rem,10vw,140px); min-width:160px; }
.service-body { max-width:800px; }
.service-title { font-weight:600; text-transform:uppercase; font-size:clamp(1rem,2.2vw,2.1rem); }
.service-desc { color:rgba(12,12,12,0.9); font-weight:300; font-size:clamp(.85rem,1.6vw,1.25rem); opacity:.8; line-height:1.6; }

/* Projects */
.projects-section { background:transparent; border-top-left-radius:40px; border-top-right-radius:40px; margin-top:-2.5rem; padding:3rem 1.25rem; }
.projects-heading { text-align:center; font-weight:900; font-size:clamp(3rem,12vw,160px); margin-bottom:2rem; }
.project-card { background:#0C0C0C; border:2px solid #D7E2EA; border-radius:40px; padding:1rem; margin:1.5rem auto; max-width:1100px; }
.project-grid { display:flex; gap:1rem; }
.proj-col-left { width:40%; display:flex; flex-direction:column; gap:1rem; }
.proj-col-right { width:60%; }
.proj-img { width:100%; border-radius:30px; object-fit:cover; }

/* small helpers */
.center { display:flex; justify-content:center; align-items:center; }

/* --- FILE EXPLORER REDESIGN FOR PROJECTS --- */
.projects-explorer {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: rgba(5, 5, 10, 0.7);
    color: var(--text-main);
    font-family: var(--font-sans);
}

/* Top Toolbar */
.explorer-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(10, 10, 20, 0.6);
    border-bottom: 1px solid rgba(255, 0, 96, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    flex-wrap: wrap;
}

.explorer-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.explorer-btn:hover {
    background: rgba(255, 0, 96, 0.2);
    border-color: rgba(255, 0, 96, 0.4);
    color: #ffffff;
    box-shadow: 0 0 8px rgba(255, 0, 96, 0.3);
}

.explorer-btn:active {
    transform: scale(0.95);
}

/* Address Bar */
.explorer-address-bar {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.9rem;
    color: var(--text-main);
    min-width: 200px;
    font-family: var(--font-mono);
}

.explorer-address-bar i {
    color: #ff0055;
    font-size: 0.95rem;
}

.explorer-address-sep {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
    margin: 0 2px;
}

.explorer-address-path {
    opacity: 0.85;
}

.explorer-address-current {
    font-weight: bold;
    color: #00f0ff;
    text-shadow: 0 0 5px rgba(0, 240, 255, 0.3);
}

/* Search Box */
.explorer-search-wrapper {
    position: relative;
    width: 220px;
}

.explorer-search-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 6px 36px 6px 12px;
    color: var(--text-main);
    font-size: 0.88rem;
    font-family: var(--font-sans);
    outline: none;
    transition: all 0.25s ease;
}

.explorer-search-input:focus {
    border-color: rgba(255, 0, 96, 0.6);
    box-shadow: 0 0 10px rgba(255, 0, 96, 0.2);
    background: rgba(0, 0, 0, 0.6);
}

.explorer-search-wrapper i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    pointer-events: none;
}

/* Sort Dropdown Selector */
.explorer-sort-wrapper {
    position: relative;
}

.explorer-sort-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    border-radius: 8px;
    padding: 6px 24px 6px 12px;
    font-size: 0.88rem;
    font-family: var(--font-sans);
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    appearance: none;
    -webkit-appearance: none;
}

.explorer-sort-select:hover {
    background: rgba(255, 0, 96, 0.15);
    border-color: rgba(255, 0, 96, 0.35);
}

/* Main Grid & Cards */
.explorer-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
}

.explorer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    padding: 10px 0;
}

/* Installed Application Card styling */
.project-app-card {
    background: linear-gradient(135deg, rgba(10, 10, 15, 0.9) 0%, rgba(20, 10, 30, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 400px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.02);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 60% Visual Space */
.project-app-media {
    height: 55%;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #030308;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.project-app-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.project-app-details {
    height: 45%;
    display: flex;
    flex-direction: column;
    padding: 16px;
    justify-content: space-between;
}

.project-app-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.project-app-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ff0055;
    font-family: var(--font-mono);
    text-shadow: 0 0 8px rgba(255, 0, 85, 0.25);
    margin: 0;
}

.project-app-desc {
    font-size: 0.88rem;
    color: var(--text-dim);
    line-height: 1.4;
    margin: 4px 0 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tech stack pills */
.project-app-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.project-app-pill {
    background: rgba(0, 240, 255, 0.08);
    border: 1px solid rgba(0, 240, 255, 0.15);
    color: #00f0ff;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: var(--font-mono);
    letter-spacing: 0.03em;
    text-shadow: 0 0 4px rgba(0, 240, 255, 0.2);
}

/* Bottom Actions Fixed */
.project-app-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.project-app-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-sans);
    transition: all 0.25s ease;
    cursor: pointer;
}

.project-app-btn.btn-demo {
    background: linear-gradient(135deg, #ff0055 0%, #b3003b 100%);
    border: 1px solid rgba(255, 0, 85, 0.3);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(255, 0, 85, 0.15);
}

.project-app-btn.btn-demo:hover {
    background: linear-gradient(135deg, #ff3377 0%, #d60047 100%);
    box-shadow: 0 0 15px rgba(255, 0, 85, 0.4);
    transform: translateY(-1px);
}

.project-app-btn.btn-github {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
}

.project-app-btn.btn-github:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    transform: translateY(-1px);
}

.project-app-btn:active {
    transform: translateY(1px);
}

/* Subtle Hover Animations */
.project-app-card:hover {
    transform: translateY(-6px) scale(1.01);
    border-color: rgba(255, 0, 85, 0.4);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65), 0 0 16px rgba(255, 0, 85, 0.25);
}

.project-app-card:hover .project-app-media img {
    transform: scale(1.06);
}

/* Explorer scrollbar styling */
.explorer-content::-webkit-scrollbar {
    width: 6px;
}

.explorer-content::-webkit-scrollbar-thumb {
    background: rgba(255, 0, 85, 0.2);
    border-radius: 4px;
}

.explorer-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 0, 85, 0.4);
}

/* Custom sizing for specific windows */
.os-window-projects {
    width: 900px !important;
    height: 540px !important;
}

/* Make it responsive on smaller screens */
@media (max-width: 1024px) {
    .os-window-projects {
        width: 92vw !important;
        height: 70vh !important;
    }
}

/* --- FILE EXPLORER EDUCATION TIMELINE --- */
.os-window-education {
    width: 1020px !important;
    height: 680px !important;
}

@media (max-width: 1024px) {
    .os-window-education {
        width: 92vw !important;
        height: 75vh !important;
    }
}

.education-explorer {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: rgba(5, 5, 10, 0.75);
    color: var(--text-main);
    font-family: var(--font-sans);
}

.edu-scroll-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Header bar */
.edu-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
    gap: 20px;
}

.edu-header-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.edu-title-main {
    font-size: 2.1rem;
    font-weight: 800;
    margin: 0;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.edu-title-main span.gradient-text {
    background: linear-gradient(90deg, #ff0055, #a450ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.edu-subtitle-main {
    font-size: 0.95rem;
    color: var(--text-dim);
    margin: 0;
}

/* View credentials btn */
.edu-credentials-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255, 0, 85, 0.06);
    border: 1px solid rgba(255, 0, 85, 0.3);
    color: #ffffff;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 10px rgba(255, 0, 85, 0.1);
}

.edu-credentials-btn:hover {
    background: rgba(255, 0, 85, 0.18);
    border-color: rgba(255, 0, 85, 0.6);
    box-shadow: 0 0 15px rgba(255, 0, 85, 0.35);
    transform: translateY(-1px);
}

.edu-credentials-btn:active {
    transform: translateY(1px);
}

/* Timeline grid */
.edu-timeline-container {
    position: relative;
    padding-left: 80px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 24px;
}

/* The vertical thread line */
.edu-timeline-container::before {
    content: "";
    position: absolute;
    left: 32px;
    top: 15px;
    bottom: 15px;
    width: 2px;
    background: linear-gradient(180deg, #ff0055, #a450ff);
    box-shadow: 0 0 8px rgba(255, 0, 85, 0.5);
    z-index: 1;
}

.edu-timeline-row {
    display: flex;
    position: relative;
    z-index: 2;
}

/* Circular Node Icon */
.edu-timeline-node {
    position: absolute;
    left: -80px;
    top: 15px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #0d0d15;
    border: 2px solid #ff0055;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(255, 0, 85, 0.4), inset 0 0 5px rgba(255, 0, 85, 0.2);
    color: #ffffff;
    font-size: 1rem;
    z-index: 3;
}

.edu-timeline-node.node-purple {
    border-color: #a450ff;
    box-shadow: 0 0 15px rgba(164, 80, 255, 0.4), inset 0 0 5px rgba(164, 80, 255, 0.2);
}

/* Years column */
.edu-timeline-date {
    position: absolute;
    left: -80px;
    top: 72px;
    width: 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.edu-date-text {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: #ff0055;
    font-weight: 700;
    line-height: 1.25;
}

.edu-date-text.text-purple {
    color: #a450ff;
}

.edu-badge-current {
    background: rgba(255, 0, 85, 0.12);
    border: 1px solid rgba(255, 0, 85, 0.3);
    color: #ff0055;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    animation: eduPulse 2s infinite ease-in-out;
}

.edu-badge-completed {
    color: var(--text-dim);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    opacity: 0.8;
}

@keyframes eduPulse {
    0% { opacity: 0.8; box-shadow: 0 0 0 0 rgba(255,0,85,0.2); }
    50% { opacity: 1; box-shadow: 0 0 6px 2px rgba(255,0,85,0.15); }
    100% { opacity: 0.8; box-shadow: 0 0 0 0 rgba(255,0,85,0.2); }
}

/* Main glass timeline cards */
.edu-card {
    flex-grow: 1;
    background: linear-gradient(135deg, rgba(12, 10, 20, 0.85) 0%, rgba(20, 10, 30, 0.85) 100%);
    border: 1px solid rgba(255, 0, 85, 0.25);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.edu-card.card-purple {
    border-color: rgba(164, 80, 255, 0.25);
}

.edu-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 0, 85, 0.15);
    border-color: rgba(255, 0, 85, 0.45);
}

.edu-card.card-purple:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 15px rgba(164, 80, 255, 0.15);
    border-color: rgba(164, 80, 255, 0.45);
}

/* Inner Grid */
.edu-card-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
}

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

.edu-card-left {
    display: flex;
    flex-direction: column;
}

.edu-card-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 4px 0;
}

.edu-card-subtitle {
    font-size: 1.05rem;
    font-weight: 600;
    color: #ff0055;
    margin: 0 0 12px 0;
    font-family: var(--font-mono);
}

.edu-card-subtitle.stream-purple {
    color: #a450ff;
}

.edu-card-inst {
    font-size: 0.95rem;
    color: #ffffff;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    opacity: 0.95;
}

.edu-card-inst i {
    color: var(--text-dim);
    font-size: 0.9rem;
}

.edu-card-desc {
    font-size: 0.88rem;
    color: var(--text-dim);
    line-height: 1.5;
    margin: 0 0 18px 0;
}

/* Micro-stats grid inside cards */
.edu-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.edu-stat-box {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color 0.2s;
}

.edu-stat-box:hover {
    background: rgba(0, 0, 0, 0.6);
}

.edu-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 0, 85, 0.08);
    border: 1px solid rgba(255, 0, 85, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff0055;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.edu-stat-icon.icon-purple {
    background: rgba(164, 80, 255, 0.08);
    border-color: rgba(164, 80, 255, 0.15);
    color: #a450ff;
}

.edu-stat-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.edu-stat-label {
    font-size: 0.68rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.edu-stat-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    font-family: var(--font-mono);
}

/* Right Side - Focus & Highlights */
.edu-card-right {
    display: flex;
    flex-direction: column;
    gap: 18px;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    padding-left: 20px;
}

@media (max-width: 768px) {
    .edu-card-right {
        border-left: none;
        padding-left: 0;
        padding-top: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }
}

.edu-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.edu-section-title.title-pink i { color: #ff0055; }
.edu-section-title.title-purple i { color: #a450ff; }

/* Focus areas list */
.edu-focus-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.edu-focus-pill {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-main);
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.edu-focus-pill:hover {
    background: rgba(255, 0, 85, 0.1);
    border-color: rgba(255, 0, 85, 0.3);
    color: #ff0055;
    transform: scale(1.03);
}

/* Highlights cards */
.edu-highlights-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.edu-highlight-pill {
    background: rgba(164, 80, 255, 0.04);
    border: 1px solid rgba(164, 80, 255, 0.15);
    color: #b26eff;
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.edu-highlight-pill i {
    font-size: 0.85rem;
}

.edu-highlight-pill:hover {
    background: rgba(164, 80, 255, 0.12);
    border-color: rgba(164, 80, 255, 0.4);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(164, 80, 255, 0.15);
}

/* Subjects list */
.edu-subjects-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.edu-subject-item {
    font-size: 0.88rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
}

.edu-subject-item::before {
    content: "•";
    color: #a450ff;
    font-size: 1.2rem;
    line-height: 1;
}

.edu-subject-item:hover {
    color: #ffffff;
}

/* Quote banner */
.edu-quote-banner {
    background: linear-gradient(90deg, rgba(255, 0, 85, 0.08) 0%, rgba(164, 80, 255, 0.08) 100%);
    border: 1px solid rgba(255, 0, 85, 0.15);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.01);
}

.edu-quote-content {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #b26eff;
    font-size: 0.92rem;
    font-weight: 500;
    font-style: italic;
    line-height: 1.4;
}

.edu-quote-content i {
    font-size: 1.1rem;
    opacity: 0.7;
    color: #ff0055;
    flex-shrink: 0;
}

.edu-quote-cap {
    font-size: 1.25rem;
    color: #ff0055;
    opacity: 0.85;
    filter: drop-shadow(0 0 4px rgba(255,0,85,0.4));
}

/* --- PRINCESSOS ABOUT ME DASHBOARD --- */
.os-window-about {
    width: 1100px !important;
    height: 750px !important;
    max-width: 96vw;
    max-height: 86vh;
}

.db-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #080612;
    color: #e2e2ec;
    font-family: var(--font-sans);
    padding: 18px;
    gap: 15px;
    overflow-y: auto;
}

/* Header & Breadcrumbs */
.db-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 0, 110, 0.15);
    padding-bottom: 12px;
    flex-wrap: wrap;
    gap: 12px;
}

.db-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 500;
}

.db-home-icon {
    color: #ff007f;
    font-size: 1.1rem;
    text-shadow: 0 0 10px rgba(255, 0, 127, 0.4);
}

.db-os-name {
    color: var(--text-main);
    font-weight: 600;
}

.db-sep {
    color: rgba(255, 255, 255, 0.3);
}

.db-active-page {
    color: #ff007f;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(255, 0, 127, 0.3);
}

.db-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.db-search {
    position: relative;
    display: flex;
    align-items: center;
}

.db-search input {
    background: rgba(10, 8, 24, 0.8);
    border: 1px solid rgba(255, 0, 127, 0.25);
    border-radius: 20px;
    padding: 6px 36px 6px 14px;
    color: #fff;
    outline: none;
    font-size: 0.85rem;
    width: 200px;
    transition: all 0.3s ease;
}

.db-search input:focus {
    width: 250px;
    border-color: #ff007f;
    box-shadow: 0 0 12px rgba(255, 0, 127, 0.3);
}

.db-search i {
    position: absolute;
    right: 12px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}

.db-view-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e2ec;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.db-view-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 0, 127, 0.4);
    transform: translateY(-1px);
}

/* Dashboard Grid Layout */
.db-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: auto;
    gap: 15px;
    flex-grow: 1;
}

.db-card {
    background: rgba(13, 11, 28, 0.6);
    border: 1px solid rgba(255, 0, 127, 0.15);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.db-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 0, 127, 0.3);
    box-shadow: 0 8px 30px rgba(255, 0, 127, 0.1);
}

/* Card Titles */
.db-card-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 8px;
}

.title-icon-pink {
    color: #ff007f;
    text-shadow: 0 0 10px rgba(255, 0, 127, 0.4);
}

/* 1. Profile Card */
.db-profile-card {
    grid-column: span 6;
    display: flex;
    gap: 20px;
    align-items: center;
}

.db-avatar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.db-avatar-ring {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    position: relative;
    padding: 4px;
    background: linear-gradient(135deg, #ff007f, #7f00ff, #00f0ff);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 0, 127, 0.3);
}

.db-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #080612;
}

.db-crown-floating {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 32px;
    height: 32px;
    background: #ff007f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.85rem;
    transform: rotate(20deg);
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.6);
    border: 2px solid #080612;
}

.db-status-pill {
    background: rgba(0, 255, 127, 0.08);
    border: 1px solid rgba(0, 255, 127, 0.3);
    color: #00ff7f;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-status-dot {
    width: 6px;
    height: 6px;
    background-color: #00ff7f;
    border-radius: 50%;
    box-shadow: 0 0 8px #00ff7f;
}

.db-profile-info {
    flex-grow: 1;
}

.db-profile-name {
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 0 15px rgba(255, 0, 127, 0.2);
}

.name-crown {
    color: #ff007f;
    font-size: 1.3rem;
}

.db-profile-title {
    color: #b18fff;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.db-profile-tags {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.db-profile-location {
    color: #ff007f;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.db-profile-bio {
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
}

.db-profile-bio p {
    margin-bottom: 6px;
}

.db-profile-bio p:last-child {
    margin-bottom: 0;
}

/* 2. Current Mission Card */
.db-mission-card {
    grid-column: span 6;
}

.db-mission-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.db-mission-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.2s ease;
}

.db-mission-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 0, 127, 0.2);
}

.db-mission-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.icon-bg-purple {
    background: rgba(127, 0, 255, 0.15);
    color: #b18fff;
    border: 1px solid rgba(127, 0, 255, 0.3);
}

.icon-bg-orange {
    background: rgba(255, 127, 0, 0.15);
    color: #ff9f43;
    border: 1px solid rgba(255, 127, 0, 0.3);
}

.icon-bg-green {
    background: rgba(0, 255, 127, 0.12);
    color: #00ff7f;
    border: 1px solid rgba(0, 255, 127, 0.25);
}

.icon-bg-red {
    background: rgba(255, 0, 127, 0.12);
    color: #ff477e;
    border: 1px solid rgba(255, 0, 127, 0.25);
}

.db-mission-details h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}

.db-mission-details p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

/* 3. Quick Stats Card */
.db-stats-card {
    grid-column: span 6;
}

.db-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.db-stat-item {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.2s ease;
}

.db-stat-item:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 0, 127, 0.25);
}

.db-stat-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.stat-pink {
    background: rgba(255, 0, 127, 0.12);
    color: #ff007f;
}

.stat-purple {
    background: rgba(127, 0, 255, 0.15);
    color: #b18fff;
}

.stat-cyan {
    background: rgba(0, 240, 255, 0.12);
    color: #00f0ff;
}

.stat-orange {
    background: rgba(255, 127, 0, 0.12);
    color: #ff9f43;
}

.db-stat-val {
    font-size: 1.45rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
    line-height: 1.1;
}

.val-cyan {
    color: #00f0ff;
}

.db-stat-lbl {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}

.lbl-cyan {
    color: rgba(0, 240, 255, 0.6);
}

/* 4. What Drives Me Card */
.db-drives-card {
    grid-column: span 6;
}

.db-drives-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.db-drive-item {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
    transition: all 0.2s ease;
}

.db-drive-item:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 0, 127, 0.25);
    transform: translateY(-2px);
}

.db-drive-icon {
    font-size: 1.3rem;
    margin-bottom: 8px;
}

.drive-red { color: #ff477e; text-shadow: 0 0 8px rgba(255, 71, 126, 0.3); }
.drive-purple { color: #b18fff; text-shadow: 0 0 8px rgba(177, 143, 255, 0.3); }
.drive-pink { color: #ff007f; text-shadow: 0 0 8px rgba(255, 0, 127, 0.3); }
.drive-blue { color: #00f0ff; text-shadow: 0 0 8px rgba(0, 240, 255, 0.3); }

.db-drive-item h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

.db-drive-item p {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.3;
}

/* 5. System Information Panel */
.db-sysinfo-card {
    grid-column: span 12;
}

.db-sysinfo-content {
    width: 100%;
}

.db-sysinfo-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr) 1.8fr;
    gap: 12px;
}

.db-sys-widget {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.db-sys-lbl {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.db-sys-val {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
}

.val-glow-pink {
    color: #ff007f;
    text-shadow: 0 0 8px rgba(255, 0, 127, 0.4);
}

.val-glow-purple {
    color: #b18fff;
    text-shadow: 0 0 8px rgba(177, 143, 255, 0.4);
}

.val-uptime {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.db-uptime-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 10px;
}

.db-uptime-bars span {
    width: 2px;
    background-color: #00ff7f;
    border-radius: 1px;
}

.db-uptime-bars .bar1 { height: 4px; }
.db-uptime-bars .bar2 { height: 7px; }
.db-uptime-bars .bar3 { height: 10px; }

/* Princess Quote widget */
.db-sys-quote-widget {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.db-princess-avatar {
    width: 32px;
    height: 32px;
    background: rgba(255, 0, 127, 0.12);
    border: 1px solid rgba(255, 0, 127, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.db-sys-quote {
    font-size: 0.8rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.35;
    position: relative;
}

.quote-pink {
    color: #ff007f;
    opacity: 0.6;
    font-size: 0.65rem;
    vertical-align: super;
    margin: 0 2px;
}

/* Scrollbar customization inside dashboard */
.db-container::-webkit-scrollbar {
    width: 6px;
}

.db-container::-webkit-scrollbar-thumb {
    background: rgba(255, 0, 127, 0.25);
    border-radius: 3px;
}

.db-container::-webkit-scrollbar-track {
    background: transparent;
}

/* RESPONSIVENESS */
@media (max-width: 1024px) {
    .db-grid {
        grid-template-columns: repeat(12, 1fr);
    }
    .db-profile-card {
        grid-column: span 12;
    }
    .db-mission-card {
        grid-column: span 12;
    }
    .db-stats-card {
        grid-column: span 12;
    }
    .db-drives-card {
        grid-column: span 12;
    }
    .db-sysinfo-card {
        grid-column: span 12;
    }
    .db-sysinfo-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .db-sys-quote-widget {
        grid-column: span 3;
    }
}

@media (max-width: 768px) {
    .db-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .db-header-actions {
        width: 100%;
        justify-content: space-between;
    }
    .db-search input {
        width: 150px;
    }
    .db-search input:focus {
        width: 180px;
    }
    .db-profile-card {
        flex-direction: column;
        text-align: center;
    }
    .db-profile-name {
        justify-content: center;
    }
    .db-profile-location {
        justify-content: center;
    }
    .db-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .db-drives-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .db-sysinfo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .db-sys-quote-widget {
        grid-column: span 2;
    }
}

@media (max-width: 480px) {
    .db-stats-grid {
        grid-template-columns: 1fr;
    }
    .db-drives-grid {
        grid-template-columns: 1fr;
    }
    .db-sysinfo-grid {
        grid-template-columns: 1fr;
    }
    .db-sys-quote-widget {
        grid-column: span 1;
    }
}

/* --- CYBER PORTRAIT ORBITAL RINGS & GLOW --- */
.portrait-glow-back {
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 0, 127, 0.22) 0%, rgba(127, 0, 255, 0.08) 50%, transparent 70%);
    filter: blur(24px);
    z-index: 1;
    pointer-events: none;
}

.portrait-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    transition: all 0.5s ease;
}

.ring-pink {
    width: 236px;
    height: 236px;
    border: 1.5px solid rgba(255, 0, 127, 0.35);
    border-top-color: transparent;
    border-bottom-color: transparent;
    z-index: 2;
    animation: spin-clockwise 10s linear infinite;
}

.ring-cyan {
    width: 254px;
    height: 254px;
    border: 1px solid rgba(0, 240, 255, 0.3);
    border-left-color: transparent;
    border-right-color: transparent;
    z-index: 3;
    animation: spin-counter 14s linear infinite;
    transform: rotateX(55deg) rotateY(15deg);
}

.ring-violet {
    width: 218px;
    height: 218px;
    border: 1px dashed rgba(177, 143, 255, 0.4);
    z-index: 4;
    animation: spin-clockwise 22s linear infinite;
    transform: rotateX(-35deg) rotateY(35deg);
}

#princess-plain-img {
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.5s ease, border-color 0.5s ease;
}

#princess-plain-img:hover {
    transform: scale(1.06) rotate(3deg);
    box-shadow: 0 0 30px rgba(255, 0, 127, 0.35), 0 0 15px rgba(0, 240, 255, 0.25);
    border-color: rgba(255, 0, 127, 0.55) !important;
}

@keyframes spin-clockwise {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes spin-counter {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}