/* ==========================================================================
   macOS Desktop Interface & System Styles (device.css)
   macOS Sonoma Theme, Window Manager, Dock, Finder & Photos Applications
   ========================================================================== */

:root {
    --bg-primary: #1c1c1e;
    --bg-secondary: #2c2c2e;
    --bg-glass: rgba(44, 44, 46, .76);
    --bg-window: rgba(38, 38, 42, .96);
    --text-primary: #f5f5f7;
    --text-secondary: #d1d1d6;
    --text-muted: #a1a1a6;
    --accent: #0a84ff;
    --accent-glow: rgba(10, 132, 255, .24);
    --border: rgba(255, 255, 255, .12);
    --shadow: rgba(0, 0, 0, .38);
    --terminal-bg: #171719;
    --terminal-text: #a8ff60;
    --desktop-ink: #f7f8ff;
    --desktop-muted: rgba(242, 245, 255, .72);
    --desktop-glass: rgba(34, 36, 42, .58);
    --desktop-edge: rgba(255, 255, 255, .22);
    --desktop-accent: #78b7ff;
    --wallpaper: radial-gradient(ellipse 55% 86% at 8% 17%, rgba(255, 70, 129, .94), transparent 61%), radial-gradient(ellipse 57% 95% at 78% 2%, rgba(136, 87, 255, .98), transparent 59%), radial-gradient(ellipse 72% 59% at 56% 93%, rgba(31, 157, 255, .95), transparent 62%), linear-gradient(145deg, #27134f 0%, #111b48 52%, #07162f 100%);
    --menu-glass: rgba(26, 25, 35, .58);
    --menu-ink: rgba(255, 255, 255, .94);
    --dock-glass: rgba(220, 222, 232, .24);
    --icon-label: #fff;
    --window-bg: #1e1e1e;
    --card-bg: rgba(255, 255, 255, .04);
}

body[data-theme="light"] {
    --bg-primary: #f5f5f7;
    --bg-secondary: #eeeeef;
    --bg-glass: rgba(255, 255, 255, .76);
    --bg-window: rgba(250, 250, 252, .97);
    --text-primary: #1d1d1f;
    --text-secondary: #3a3a3c;
    --text-muted: #6e6e73;
    --accent: #007aff;
    --accent-glow: rgba(0, 122, 255, .18);
    --border: rgba(0, 0, 0, .12);
    --shadow: rgba(0, 0, 0, .16);
    --terminal-bg: #202124;
    --terminal-text: #a8ff60;
    --desktop-ink: #172033;
    --desktop-muted: rgba(25, 37, 59, .72);
    --desktop-glass: rgba(248, 250, 255, .58);
    --desktop-edge: rgba(255, 255, 255, .7);
    --desktop-accent: #0879ed;
    --wallpaper: radial-gradient(ellipse 55% 86% at 8% 17%, rgba(255, 102, 149, .93), transparent 61%), radial-gradient(ellipse 57% 95% at 78% 2%, rgba(155, 115, 255, .94), transparent 59%), radial-gradient(ellipse 72% 59% at 56% 93%, rgba(49, 171, 255, .9), transparent 62%), linear-gradient(145deg, #8053b6 0%, #5468bf 52%, #277fbd 100%);
    --menu-glass: rgba(247, 247, 250, .7);
    --menu-ink: rgba(24, 25, 28, .96);
    --dock-glass: rgba(242, 243, 247, .48);
    --icon-label: #fff;
    --window-bg: #ffffff;
    --card-bg: #ffffff;
}

/* --- Base Layout --- */
html {
    min-height: 100%;
    margin: 0;
}

body {
    min-height: 100%;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: var(--wallpaper);
    color: var(--desktop-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.macos-desktop {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
}

.desktop-screen {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
}

.mac-screen {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #12192a;
    isolation: isolate;
}

.bg-animation {
    display: none;
}

.desktop {
    position: absolute;
    z-index: 1;
    inset: 0;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 42px 24px 82px;
    background: var(--wallpaper);
}

/* --- macOS Top Menu Bar --- */
.top-bar {
    position: absolute;
    z-index: 10;
    inset: 0 0 auto;
    height: 30px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    background: var(--menu-glass);
    color: var(--menu-ink);
    box-shadow: 0 1px 12px rgba(0, 0, 0, .12);
    backdrop-filter: blur(28px) saturate(1.75);
}

.menu-bar-left,
.top-bar-right {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 13px;
}

.menu-bar-left {
    min-width: 0;
}

.apple-menu {
    display: grid;
    width: 22px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    place-items: center;
    background: transparent;
    color: var(--menu-ink);
    cursor: pointer;
    transition: background-color .15s ease;
}

.apple-menu:hover {
    background-color: rgba(255, 255, 255, .15);
}

.apple-menu svg {
    width: 17px;
    height: 20px;
    fill: currentColor;
}

.logo-text {
    color: var(--menu-ink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.015em;
}

.menu-items {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 3px;
}

.menu-items span {
    padding: 4px 7px;
    border-radius: 5px;
    color: var(--menu-ink);
    font-size: 12px;
    line-height: 1;
}

.status-glyph {
    display: inline-grid;
    width: 17px;
    height: 20px;
    place-items: center;
    color: var(--menu-ink);
}

.status-glyph svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.status-time {
    display: flex;
    min-width: 132px;
    justify-content: flex-end;
    gap: 5px;
    color: var(--menu-ink);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.theme-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 25px;
    padding: 0 7px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--menu-ink);
    font: inherit;
    cursor: pointer;
}

.theme-switch svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.theme-switch .sun-icon,
.theme-switch .moon-icon {
    display: none;
}

body[data-theme="dark"] .theme-switch .sun-icon,
body[data-theme="light"] .theme-switch .moon-icon {
    display: block;
}

.theme-switch:hover {
    background: rgba(255, 255, 255, .15);
}

/* --- Desktop Home & Icons --- */
.desktop-home {
    position: absolute;
    z-index: 2;
    inset: 48px 20px 77px;
    display: block;
    color: var(--desktop-ink);
}

.desktop-home[hidden] {
    display: none !important;
}

.home-welcome {
    display: none;
    width: min(590px, 100%);
    justify-self: center;
    padding: 34px 38px;
    border: 1px solid var(--desktop-edge);
    border-radius: 22px;
    background: rgba(16, 25, 48, .24);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .12), 0 1px 0 rgba(255, 255, 255, .12) inset;
    text-align: center;
    backdrop-filter: blur(18px);
}

.home-avatar {
    width: 76px;
    height: 76px;
    margin: 0 auto 15px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .8);
    border-radius: 24px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .24);
}

.home-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-eyebrow {
    margin: 0 0 10px;
    color: var(--desktop-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
}

.home-welcome h1 {
    margin: 0 0 9px;
    color: #fff;
    font-size: clamp(26px, 3.2vw, 42px);
    line-height: 1.15;
}

.home-welcome > p:not(.home-eyebrow) {
    margin: 0;
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
    line-height: 1.6;
}

.primary-launch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 11px 17px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 8px;
    background: #0a84ff;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.primary-launch:hover {
    transform: translateY(-1px);
    background: #268fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

.desktop-icon-grid {
    position: absolute;
    top: 12px;
    right: 10px;
    display: grid;
    grid-template-columns: repeat(3, minmax(70px, 1fr));
    grid-auto-rows: 91px;
    align-content: start;
    gap: 4px;
    width: 270px;
    max-height: 100%;
    overflow-y: auto;
    padding: 5px;
}

.desktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 84px;
    padding: 7px 5px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
    cursor: pointer;
}

.desktop-icon:hover,
.desktop-icon:focus-visible {
    border-color: rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .17);
    outline: none;
}

.desktop-icon:active {
    background: rgba(255, 255, 255, .22);
}

.app-icon {
    display: grid;
    width: 60px;
    height: 60px;
    place-items: center;
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(145deg, #62b7ff, #1775e9);
    box-shadow: 0 5px 11px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .34) inset;
    color: #fff;
    text-shadow: none;
}

.app-icon svg {
    width: 35px;
    height: 35px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.35;
}

.desktop-folder-icon {
    position: relative;
    display: grid;
    width: 62px;
    height: 58px;
    place-items: center;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .28));
}

.desktop-folder-icon svg {
    width: 59px;
    height: 55px;
    overflow: visible;
}

.desktop-folder-icon svg path:first-child {
    fill: #73b8ff;
    stroke: rgba(235, 247, 255, .84);
    stroke-width: 1.4;
}

.desktop-folder-icon svg path:last-child {
    fill: none;
    stroke: rgba(255, 255, 255, .7);
    stroke-width: 1.5;
}

/* macOS-style Folder Shortcut / Alias Badge */
.desktop-folder-icon::after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 4px;
    width: 18px;
    height: 18px;
    border-radius: 4.5px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 12c0-3.3 2.2-5 5.5-5h3' fill='none' stroke='%231d1d1f' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M9.5 4.5l3 2.5-3 2.5' fill='none' stroke='%231d1d1f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    box-shadow: 0 1.5px 3.5px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(0, 0, 0, 0.12);
    pointer-events: none;
    z-index: 2;
}

.desktop-mac-icon {
    display: grid;
    width: 60px;
    height: 60px;
    place-items: center;
    border-radius: 17px;
    filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .32));
    transition: transform 0.15s ease, filter 0.15s ease;
}

.desktop-mac-icon svg {
    width: 60px;
    height: 60px;
    display: block;
}

.desktop-icon:hover .desktop-mac-icon {
    filter: drop-shadow(0 7px 9px rgba(0, 0, 0, .42));
    transform: translateY(-1px);
}

.desktop-file-icon {
    display: grid;
    width: 48px;
    height: 55px;
    place-items: center;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .28));
}

.desktop-file-icon svg {
    width: 45px;
    height: 52px;
    overflow: visible;
}

.desktop-file-icon svg path:first-child {
    fill: #f7f7f9;
    stroke: #d0d2d7;
    stroke-width: 1.4;
}

.desktop-file-icon svg path:nth-child(2) {
    fill: none;
    stroke: #a0a4ad;
    stroke-width: 1.4;
}

.desktop-file-icon svg path:last-child {
    fill: none;
    stroke: #ee3e49;
    stroke-width: 2.3;
}

.desktop-about-icon svg path:last-child {
    stroke: #5b8ee8;
}

.icon-files { background: linear-gradient(145deg, #60c8ff, #2272dc 75%); }
.icon-work { background: linear-gradient(145deg, #ffcf6a, #f18a27 55%, #d95d14); }
.icon-skills { background: linear-gradient(145deg, #b6a7ff, #7555e8 56%, #4936bf); }
.icon-education { background: linear-gradient(145deg, #85e8d5, #25b7b1 55%, #16888e); }
.icon-certifications { background: linear-gradient(145deg, #ffabb1, #ed5267 56%, #c42d4c); }
.icon-awards { background: linear-gradient(145deg, #ffe58b, #f1ae20 56%, #c97b0c); }
.icon-references { background: linear-gradient(145deg, #a2eaff, #40a9eb 56%, #3270ce); }
.icon-gallery { background: linear-gradient(145deg, #9ce7c5, #39bd87 56%, #168567); }
.icon-contact { background: linear-gradient(145deg, #aabfff, #617de8 56%, #4155bb); }
.icon-resume { background: linear-gradient(145deg, #ff9e9e, #ef4b4b 56%, #ba2638); }
.icon-terminal { background: linear-gradient(145deg, #4a5366, #141822 78%); }

/* --- Window Manager --- */
.grid-container {
    display: contents;
}

.desktop .window {
    position: absolute;
    z-index: 4;
    inset: 48px clamp(20px, 4vw, 58px) 74px;
    display: none;
    flex-direction: column;
    width: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 12px;
    background: var(--bg-window);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .38), 0 1px 0 rgba(255, 255, 255, .17) inset;
    opacity: 0;
    transform: translateY(10px) scale(.985);
    transition: opacity .18s ease, transform .18s ease;
}

.desktop .window.app-active {
    display: flex;
    opacity: 1;
    transform: scale(1);
    transform-origin: var(--launch-origin, 50% 50%);
    animation: app-launch .42s cubic-bezier(.2, .75, .25, 1) both;
    backface-visibility: hidden;
}

.desktop .window.app-active.finder-folder-open {
    animation: finder-window-open .18s ease-out both;
}

@keyframes finder-window-open {
    from { opacity: .35; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.desktop .window.is-maximized {
    inset: 30px 0 0;
    border-radius: 0;
    border-top: none;
}

@keyframes app-launch {
    from { opacity: .08; transform: scale(.035); filter: blur(5px); border-radius: 24px; }
    72% { opacity: 1; filter: blur(0); }
    to { opacity: 1; transform: scale(1); filter: blur(0); border-radius: 12px; }
}

.desktop .window-header {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, .035);
}

.desktop .window-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

.window-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    text-align: center;
}

.window-title:focus,
.window-title:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.window-version {
    width: 64px;
    color: var(--text-muted);
    font-size: 11px;
    text-align: right;
}

.desktop .terminal-container {
    height: 100%;
    min-height: 420px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.window-controls {
    display: flex;
    gap: 8px;
    min-width: 64px;
}

.window-control {
    display: inline-grid;
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    place-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

.window-control:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.window-control::after {
    color: rgba(0, 0, 0, .65);
    font-size: 8px;
    opacity: 0;
    transition: opacity .15s;
}

.window-controls:hover .window-control::after {
    opacity: 1;
}

.control-close { background: #ff5f57; }
.control-close::after { content: "×"; }
.control-minimize { background: #febc2e; }
.control-minimize::after { content: "−"; }
.control-maximize { background: #28c840; }
.control-maximize::after { content: "+"; }

.ios-home-indicator {
    display: none;
}

/* --- Terminal Input Polish --- */
#terminalInput {
    min-height: 42px;
}

.terminal-input:focus-visible {
    border-radius: 3px;
    outline: 1px solid #00d9ff;
    outline-offset: 3px;
}

.terminal-input-line label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

/* --- macOS Dock --- */
.dock {
    position: absolute;
    z-index: 12;
    bottom: 8px;
    left: 50%;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
    justify-content: center;
    gap: var(--dock-gap, 6px);
    width: max-content;
    max-width: calc(100vw - 24px);
    overflow: visible;
    padding: var(--dock-pad, 7px 9px 9px);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--dock-radius, 17px);
    background: var(--dock-glass);
    box-shadow: 0 10px 32px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .2) inset;
    transform: translateX(-50%);
    transition: transform .22s ease, opacity .18s ease, visibility .22s;
    backdrop-filter: blur(32px) saturate(1.7);
}

body[data-maximized-app] .dock {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, calc(100% + 24px));
}

.dock-item {
    position: relative;
    display: grid;
    flex: 0 0 var(--dock-item-size, 48px);
    width: var(--dock-item-size, 48px);
    height: var(--dock-item-size, 48px);
    padding: 0;
    border: 0;
    border-radius: var(--dock-item-radius, 12px);
    background: linear-gradient(145deg, #73c5ff, #3678ee 58%, #244bb5);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, .35) inset;
    color: #fff;
    place-items: center;
    appearance: none;
    cursor: pointer;
    transform: scale(var(--dock-scale, 1));
    transform-origin: center bottom;
    transition: transform .14s cubic-bezier(.2, .75, .25, 1), filter .14s;
    will-change: transform;
}

.dock-item svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
}

.dock-item.active {
    transform: scale(var(--dock-scale, 1));
    filter: brightness(1.12);
    border-color: transparent;
    box-shadow: 0 3px 7px rgba(0, 0, 0, .22), 0 1px 0 rgba(255, 255, 255, .26) inset;
}

.dock-item[data-open-app="files"] { background: linear-gradient(145deg, #65cfff, #2281ef 72%); }
.dock-item[data-open-app="terminal"] { background: linear-gradient(145deg, #4d566a, #151923 76%); }
.dock-item.dock-gallery svg,
.dock-item.dock-pdf svg { width: var(--dock-app-svg-size, 44px); height: var(--dock-app-svg-size, 44px); fill: none; stroke: none; }

.dock-item:hover {
    z-index: 1;
    border: 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .27), 0 1px 0 rgba(255, 255, 255, .24) inset;
    filter: brightness(1.08);
    transform: scale(var(--dock-scale, 1));
}

.dock-item.active:hover {
    transform: scale(var(--dock-scale, 1));
}

.dock-item.active::before {
    position: absolute;
    bottom: -7px;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    content: '';
    transform: translateX(-50%);
}

.dock-item::after {
    position: absolute;
    z-index: 30;
    bottom: calc(100% + 12px);
    left: 50%;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 7px;
    background: rgba(34, 34, 36, .82);
    box-shadow: 0 4px 15px rgba(0, 0, 0, .22);
    color: #fff;
    content: attr(data-dock-label);
    font: 500 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 3px) scale(var(--dock-inverse-scale, 1));
    transform-origin: center bottom;
    transition: opacity .12s ease, transform .12s ease, visibility .12s;
    visibility: hidden;
    white-space: nowrap;
    backdrop-filter: blur(16px);
}

.dock-item[data-dock-tooltip="visible"]::after,
.dock-item:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0) scale(var(--dock-inverse-scale, 1));
    visibility: visible;
}

.dock-item.is-launching {
    animation: dock-launch-bounce .68s cubic-bezier(.28, .84, .42, 1);
}

@keyframes dock-launch-bounce {
    0%, 100% { transform: translateY(0) scale(var(--dock-scale, 1)); }
    20% { transform: translateY(-4px) scale(var(--dock-scale, 1)); }
    42% { transform: translateY(-17px) scale(var(--dock-scale, 1)); }
    62% { transform: translateY(-5px) scale(var(--dock-scale, 1)); }
    80% { transform: translateY(-11px) scale(var(--dock-scale, 1)); }
}

.dock-separator {
    width: 1px;
    height: var(--dock-sep-height, 35px);
    margin: 0 2px;
    background: rgba(255, 255, 255, .38);
    align-self: center;
}

.dock-item.dock-finder,
.dock-item.active.dock-finder,
.dock-item[data-open-app="terminal"],
.dock-item.active[data-open-app="terminal"],
.dock-item.dock-gallery,
.dock-item.active.dock-gallery,
.dock-item.dock-pdf,
.dock-item.active.dock-pdf,
.dock-item.dock-location {
    background: transparent;
    box-shadow: none;
    border: 0;
}

.dock-item[data-open-app="terminal"] svg,
.dock-item.dock-finder svg {
    width: var(--dock-app-svg-size, 44px);
    height: var(--dock-app-svg-size, 44px);
    fill: none;
    stroke: none;
}

.dock-item.dock-finder:hover,
.dock-item[data-open-app="terminal"]:hover,
.dock-item.dock-location:hover,
.dock-item.dock-gallery:hover,
.dock-item.dock-pdf:hover {
    box-shadow: none;
    background: transparent;
    border: 0;
}

.dock-link {
    position: relative;
    border: 0;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
    color: #fff;
    text-decoration: none;
    isolation: isolate;
    overflow: visible;
}

.dock-link::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: inherit;
    background: var(--dock-link-tile);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, .35) inset;
    content: "";
    pointer-events: none;
}

.dock-location {
    --dock-link-tile: #fff;
    background: transparent;
}

.dock-location::before {
    display: block;
    border-color: rgba(255, 255, 255, .92);
}

.dock-email {
    --dock-link-tile: #fff;
    color: #fff;
}

.dock-email::before {
    border-color: #e2e5ea;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

@media (min-width: 821px) {
    .dock-link + .dock-link {
        margin-inline-start: var(--dock-link-margin, 3px);
    }
    .dock-link::before {
        inset: var(--dock-link-inset, 4px);
        border-radius: var(--dock-item-radius, 12px);
    }
}

.dock-link:hover {
    box-shadow: none;
}

.dock-link svg {
    position: relative;
    z-index: 1;
    width: var(--dock-link-svg-size, 30px);
    height: var(--dock-link-svg-size, 30px);
    fill: currentColor;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .16));
    stroke: none;
}

.dock-linkedin { --dock-link-tile: #0a66c2; }
.dock-github { --dock-link-tile: linear-gradient(145deg, #606773, #303540 58%, #171a20); }
.dock-whatsapp { --dock-link-tile: linear-gradient(145deg, #58e384, #25d366 56%, #0b9c56); }
.dock-resume { --dock-link-tile: linear-gradient(145deg, #fff, #e6edf7 76%); color: #e33d4b; }
.dock-resume svg { fill: #fff; stroke: #9299a7; }
.dock-resume svg path:last-child { fill: none; stroke: #9299a7; }

.dock-link-badge {
    position: absolute;
    right: 5px;
    bottom: 6px;
    z-index: 2;
    padding: 1px 3px;
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 3px;
    background: #df3345;
    color: #fff;
    font-size: 7px;
    font-weight: 800;
    line-height: 1.2;
}

.dock-phone {
    --dock-link-tile: linear-gradient(145deg, #73e58d, #34c759 58%, #16853c);
}

.dock-email-icon,
.dock-maps-icon {
    position: relative;
    z-index: 1;
    display: block;
    width: var(--dock-img-size, 38px);
    height: var(--dock-img-size, 38px);
    object-fit: contain;
}

/* --- Finder Application --- */
.finder-content {
    padding: 0 !important;
}

.finder-browser-host {
    padding: 0 !important;
    overflow-x: hidden;
}

/* --- Macintosh Finder (Sonoma / Ventura Authentic Style) --- */
.mac-finder-layout {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-window);
    position: relative;
}

/* Sidebar */
.mac-finder-sidebar {
    flex: 0 0 196px;
    width: 196px;
    padding: 14px 10px;
    background: rgba(128, 128, 128, 0.08);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    user-select: none;
    transition: transform 0.22s ease-out;
}

body[data-theme="light"] .mac-finder-sidebar {
    background: #f0f0f4;
    border-color: rgba(0, 0, 0, 0.08);
}

.mac-finder-sidebar .sidebar-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 0 8px 4px;
    letter-spacing: -0.1px;
}

.mac-finder-sidebar .sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 5px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 12.5px;
    font-weight: 450;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, color 0.12s;
}

.mac-finder-sidebar .sidebar-item svg {
    width: 16px;
    height: 16px;
    color: #0a84ff;
    flex-shrink: 0;
}

.mac-finder-sidebar .sidebar-item:hover {
    background: rgba(128, 128, 128, 0.12);
    color: var(--text-primary);
}

.mac-finder-sidebar .sidebar-item.selected {
    background: rgba(255, 255, 255, 0.14);
    color: var(--text-primary);
    font-weight: 600;
}

body[data-theme="light"] .mac-finder-sidebar .sidebar-item.selected {
    background: rgba(0, 0, 0, 0.09);
    color: #000;
}

.mac-finder-sidebar .tag-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mac-finder-sidebar .tag-dot.red { background: #ff453a; }
.mac-finder-sidebar .tag-dot.orange { background: #ff9f0a; }
.mac-finder-sidebar .tag-dot.yellow { background: #ffd60a; }

/* Main Content */
.mac-finder-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-window);
}

body[data-theme="light"] .mac-finder-main {
    background: #ffffff;
}

/* Toolbar */
.mac-finder-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 46px;
    min-height: 46px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    gap: 12px;
    background: rgba(128, 128, 128, 0.04);
}

.mac-finder-toolbar .toolbar-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mac-finder-toolbar .sidebar-toggle-btn {
    display: none;
}

.mac-finder-toolbar .nav-arrows {
    display: flex;
    gap: 3px;
}

.mac-finder-toolbar .nav-btn {
    width: 26px;
    height: 24px;
    border-radius: 5px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    display: grid;
    place-items: center;
    cursor: default;
    transition: background 0.12s, color 0.12s;
    opacity: 0.35;
}

.mac-finder-toolbar .nav-btn.active {
    color: var(--text-primary);
    cursor: pointer;
    opacity: 1;
}

.mac-finder-toolbar .nav-btn.active:hover {
    background: rgba(128, 128, 128, 0.12);
}

.mac-finder-toolbar .folder-title {
    font-size: 13.5px;
    font-weight: 650;
    color: var(--text-primary);
    margin-left: 2px;
}

.mac-finder-toolbar .toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mac-finder-toolbar .view-switchers {
    display: flex;
    background: rgba(128, 128, 128, 0.1);
    border-radius: 6px;
    padding: 2px;
}

.mac-finder-toolbar .view-btn {
    width: 26px;
    height: 22px;
    border-radius: 4px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.mac-finder-toolbar .view-btn.selected {
    background: var(--bg-window);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.mac-finder-toolbar .finder-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: rgba(128, 128, 128, 0.08);
    color: var(--text-muted);
    width: 130px;
    transition: width 0.18s, border-color 0.18s;
}

.mac-finder-toolbar .finder-search-wrap:focus-within {
    width: 175px;
    border-color: #0a84ff;
    outline: 2px solid rgba(10, 132, 255, 0.2);
}

.mac-finder-toolbar .finder-search-input {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 11.5px;
    outline: 0;
}

/* View Container */
.mac-finder-view-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    position: relative;
}

/* Icon Grid */
.mac-finder-icon-grid {
    padding: 22px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    grid-auto-rows: max-content;
    gap: 20px 16px;
    align-content: start;
}

.mac-finder-icon-grid[hidden],
.mac-finder-icon-grid.is-hidden {
    display: none !important;
}

.mac-finder-list-view {
    width: 100%;
    min-height: 100%;
}

.mac-finder-list-view[hidden],
.mac-finder-list-view.is-hidden {
    display: none !important;
}

.mac-finder-icon-grid .finder-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    user-select: none;
    cursor: pointer;
    padding: 6px 4px;
    border-radius: 8px;
    transition: background 0.12s;
    text-align: center;
}

.mac-finder-icon-grid .finder-item:hover {
    background: rgba(128, 128, 128, 0.09);
}

.mac-finder-icon-grid .finder-item.selected {
    background: rgba(10, 132, 255, 0.18);
}

.mac-finder-icon-grid .finder-item.selected .item-name {
    background: #0a84ff;
    color: #ffffff !important;
    border-radius: 4px;
    padding: 1px 5px;
}

.folder-icon-wrap {
    width: 76px;
    height: 62px;
    display: grid;
    place-items: center;
    position: relative;
}

.mac-folder-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.mac-file-svg {
    width: 48px;
    height: 60px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.mac-image-thumb {
    width: 60px;
    height: 52px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    background: #202025;
}

.mac-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mac-video-thumb {
    position: relative;
    width: 48px;
    height: 60px;
}

.video-play-badge {
    position: absolute;
    bottom: 8px;
    right: 2px;
    width: 18px;
    height: 18px;
    background: #0a84ff;
    color: #fff;
    border-radius: 50%;
    font-size: 8px;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.app-squircle {
    width: 56px;
    height: 56px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.app-squircle.phone { background: linear-gradient(145deg, #73e58d, #34c759 58%, #16853c); }
.app-squircle.maps { background: #ffffff; border: 1px solid #e2e5ea; }
.app-squircle.whatsapp { background: linear-gradient(145deg, #58e384, #25d366 56%, #0b9c56); }
.app-squircle.mail { background: #ffffff; border: 1px solid #e2e5ea; }
.app-squircle.terminal { background: linear-gradient(145deg, #3a3a3c, #1c1c1e); border: 1px solid rgba(255, 255, 255, 0.15); }
.app-squircle.acrobat { background: linear-gradient(145deg, #ff3b30, #a80707); }
.app-squircle.default { background: linear-gradient(145deg, #8e8e93, #636366); }

.app-squircle svg {
    width: 28px;
    height: 28px;
}

/* Finder Application Icons matching Dock */
.finder-app-icon {
    width: 56px;
    height: 56px;
    display: block;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.28));
}

.dock-tile {
    width: 56px;
    height: 56px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    position: relative;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    user-select: none;
    flex-shrink: 0;
}

.dock-tile svg {
    width: 30px;
    height: 30px;
    fill: currentColor;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.16));
}

.dock-tile-email,
.dock-tile-maps {
    background: #ffffff;
    border: 1px solid #e2e5ea;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.2);
}

.dock-tile-img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    display: block;
}

.dock-tile-whatsapp {
    background: linear-gradient(145deg, #58e384, #25d366 56%, #0b9c56);
    color: #ffffff;
}

.dock-tile-phone {
    background: linear-gradient(145deg, #73e58d, #34c759 58%, #16853c);
    color: #ffffff;
}

.dock-tile-linkedin {
    background: #0a66c2;
    color: #ffffff;
}

.dock-tile-github {
    background: linear-gradient(145deg, #606773, #303540 58%, #171a20);
    color: #ffffff;
}

/* In list view table, scale down gracefully */
.mac-list-table .list-row-icon .finder-app-icon {
    width: 18px;
    height: 18px;
}

.mac-list-table .list-row-icon .dock-tile {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    box-shadow: none;
}

.mac-list-table .list-row-icon .dock-tile .dock-tile-img {
    width: 13px;
    height: 13px;
}

.mac-list-table .list-row-icon .dock-tile svg {
    width: 11px;
    height: 11px;
}

.item-name {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.25;
    max-width: 90px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

/* List Table View */
.mac-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    table-layout: fixed;
}

.mac-list-table thead th {
    text-align: left;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-window);
    z-index: 1;
    user-select: none;
}

.mac-list-table th.col-name,
.mac-list-table td.col-name {
    width: 44%;
}

.mac-list-table th.col-date,
.mac-list-table td.col-date {
    width: 20%;
}

.mac-list-table th.col-size,
.mac-list-table td.col-size {
    width: 16%;
}

.mac-list-table th.col-kind,
.mac-list-table td.col-kind {
    width: 20%;
}

.mac-list-table tbody tr {
    border-bottom: 1px solid rgba(128, 128, 128, 0.06);
    cursor: pointer;
    transition: background 0.1s;
}

.mac-list-table tbody tr:hover {
    background: rgba(128, 128, 128, 0.08);
}

.mac-list-table tbody tr.selected {
    background: #0a84ff;
    color: #ffffff;
}

.mac-list-table tbody tr.selected td,
.mac-list-table tbody tr.selected span {
    color: #ffffff !important;
}

.mac-list-table td {
    padding: 6px 14px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mac-list-table .col-name-content {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    min-width: 0;
}

.mac-list-table .list-row-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mac-list-table .list-row-icon {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.mac-list-table .list-row-icon svg {
    width: 100%;
    height: 100%;
}

.mac-list-table .col-date,
.mac-list-table .col-size,
.mac-list-table .col-kind {
    color: var(--text-muted);
    font-size: 11px;
}

/* Document Reader View */
.mac-finder-doc-view {
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: rgba(128, 128, 128, 0.02);
}

.finder-doc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    background: rgba(128, 128, 128, 0.05);
}

.finder-doc-back-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: transparent;
    color: #0a84ff;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 5px;
}

.finder-doc-back-btn:hover {
    background: rgba(10, 132, 255, 0.12);
}

.doc-type-label {
    font-size: 11px;
    color: var(--text-muted);
}

.finder-doc-body {
    padding: 24px;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.finder-about-sheet.generic-doc {
    background: var(--bg-window);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Status Bar */
.mac-finder-status-bar {
    height: 25px;
    min-height: 25px;
    background: rgba(128, 128, 128, 0.06);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-muted);
    user-select: none;
}

/* AirDrop View */
.airdrop-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 350px;
    text-align: center;
    padding: 30px;
}

.airdrop-radar {
    position: relative;
    width: 140px;
    height: 140px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
}

.airdrop-circle {
    position: absolute;
    border: 1.5px solid rgba(10, 132, 255, 0.28);
    border-radius: 50%;
}

.airdrop-circle.c1 { width: 60px; height: 60px; }
.airdrop-circle.c2 { width: 100px; height: 100px; }
.airdrop-circle.c3 { width: 140px; height: 140px; }

.airdrop-radar-icon {
    width: 32px;
    height: 32px;
    color: #0a84ff;
    position: relative;
    z-index: 1;
}

.airdrop-view h3 {
    font-size: 16px;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.airdrop-view p {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.airdrop-view small {
    font-size: 11px;
    color: var(--text-muted);
}

.finder-path {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    color: var(--text-secondary);
    font-size: 12px;
    white-space: nowrap;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scrollbar-color: rgba(255, 255, 255, .26) transparent;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.finder-path::-webkit-scrollbar {
    height: 4px;
}

.finder-path::-webkit-scrollbar-track {
    background: transparent;
}

.finder-path::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, .26);
}

.finder-crumb {
    flex: 0 0 auto;
    padding: 4px 2px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

.finder-crumb:hover {
    color: var(--text-primary);
}

.finder-crumb[aria-current="page"] {
    font-weight: 600;
    cursor: default;
}

.finder-crumb:focus-visible {
    border-radius: 3px;
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.finder-crumb-separator {
    flex: 0 0 auto;
    color: var(--text-muted);
}

.folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
    gap: 8px;
}

.folder-card {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 2px 11px;
    min-height: 75px;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.folder-card:hover,
.folder-card:focus-visible {
    border-color: rgba(10, 132, 255, .32);
    background: rgba(10, 132, 255, .1);
    outline: none;
    transform: none;
}

.folder-card > span {
    display: grid;
    grid-row: span 2;
    place-items: center;
    width: 40px;
    height: 38px;
    text-align: center;
}

.folder-card > span svg {
    width: 35px;
    height: 35px;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2));
}

.folder-card strong {
    align-self: end;
    font-size: 13px;
}

.folder-card small {
    align-self: start;
    color: var(--text-muted);
    font-size: 11px;
}

.finder-browser {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    margin: 0;
    animation: finder-folder-open .18s ease-out both;
}

.finder-browser[hidden] {
    display: none !important;
}

.finder-original-content[hidden] {
    display: none !important;
}

.finder-toolbar {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 13px;
    border-bottom: 1px solid var(--border);
    background: rgba(128, 128, 128, .08);
}

.finder-nav-button {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font: 24px/1 -apple-system, BlinkMacSystemFont, sans-serif;
    cursor: pointer;
}

.finder-nav-button:hover {
    background: var(--accent-glow);
    color: var(--accent);
}

.finder-nav-button svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.finder-up-button {
    font-size: 23px;
}

.finder-nav-button[hidden] {
    display: none;
}

.finder-browser-columns {
    display: grid;
    flex: 1;
    grid-template-columns: minmax(280px, 1.05fr) minmax(260px, .95fr);
    min-height: 0;
}

.finder-browser-columns[hidden] {
    display: none;
}

.finder-list-panel {
    min-width: 0;
    overflow: auto;
    border-right: 1px solid var(--border);
}

.finder-list-heading,
.finder-row {
    display: grid;
    grid-template-columns: 23px minmax(0, 1fr) minmax(80px, 36%);
    align-items: center;
    gap: 8px;
}

.finder-list-heading {
    position: sticky;
    top: 0;
    z-index: 1;
    min-height: 31px;
    padding: 0 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-window);
    color: var(--text-muted);
    font-size: 11px;
}

.finder-list-heading span:first-child {
    grid-column: 2;
}

.finder-list-heading span:last-child {
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.finder-row {
    width: 100%;
    min-height: 41px;
    padding: 4px 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: default;
}

.finder-row:hover {
    background: rgba(127, 127, 127, .1);
}

.finder-row.selected {
    background: rgba(10, 132, 255, .85);
    color: #fff;
}

.finder-row-icon {
    display: grid;
    place-items: center;
    color: #75baff;
    line-height: 1;
}

.finder-row-icon svg {
    width: 18px;
    height: 18px;
    overflow: visible;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .14));
}

.finder-row.is-folder .finder-row-icon svg path:first-child {
    fill: #61aef8;
    stroke: #398edc;
    stroke-width: .8;
}

.finder-row.is-folder .finder-row-icon svg path:last-child {
    fill: #78beff;
    stroke: #398edc;
    stroke-width: .8;
}

.finder-row.is-file .finder-row-icon svg path:first-child {
    fill: #f7f7f8;
    stroke: #8d9299;
    stroke-width: .8;
}

.finder-row.is-file .finder-row-icon svg path:last-child {
    fill: none;
    stroke: #9398a1;
    stroke-width: .8;
}

.finder-row.is-app .finder-row-icon {
    width: 23px;
    height: 23px;
    border-radius: 6px;
    background: linear-gradient(145deg, #fff, #e7edf5);
    color: #ea4335;
}

.finder-row.is-app .finder-row-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.finder-row.is-app[data-app-type="phone"] .finder-row-icon {
    background: linear-gradient(145deg, #46d879, #159447);
    color: #fff;
}

.finder-row.is-app[data-app-type="location"] .finder-row-icon {
    background: linear-gradient(145deg, #a8e5b8, #f3f5fa);
    color: #4285f4;
}

.finder-row.is-file[data-file-type="pdf"] .finder-row-icon { color: #df4248; }
.finder-row.is-file[data-file-type="image"] .finder-row-icon { color: #4387e8; }
.finder-row.is-file[data-file-type="video"] .finder-row-icon { color: #8c6ce8; }

.finder-row-name {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.finder-row-kind {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 10px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.finder-row.selected .finder-row-kind {
    color: rgba(255, 255, 255, .76);
}

.finder-preview {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 22px;
    background: radial-gradient(ellipse at 50% 0%, rgba(58, 128, 220, .08), transparent 48%);
    text-align: center;
}

/* Global macOS Scrollbar Design (All Apps, Windows, and Modals) */
html,
body,
:root,
*,
*::before,
*::after {
    scrollbar-color: rgba(255, 255, 255, .26) transparent !important;
    scrollbar-width: thin !important;
}

body[data-theme="light"],
body[data-theme="light"] *,
body[data-theme="light"] *::before,
body[data-theme="light"] *::after {
    scrollbar-color: rgba(0, 0, 0, .26) transparent !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    background: transparent !important;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
    background: transparent !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .26) !important;
    background-clip: padding-box !important;
    transition: background-color .15s ease !important;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .45) !important;
    background-clip: padding-box !important;
}

body[data-theme="light"] html::-webkit-scrollbar-thumb,
body[data-theme="light"] body::-webkit-scrollbar-thumb,
body[data-theme="light"] *::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .26) !important;
    background-clip: padding-box !important;
}

body[data-theme="light"] html::-webkit-scrollbar-thumb:hover,
body[data-theme="light"] body::-webkit-scrollbar-thumb:hover,
body[data-theme="light"] *::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, .45) !important;
    background-clip: padding-box !important;
}

.finder-content,
.finder-list-panel,
.finder-preview,
.finder-preview-content,
.finder-file-view,
.finder-about-scroll,
.finder-path,
.photos-content,
.photos-main,
.photos-sidebar,
.acrobat-content,
.acrobat-main,
.acrobat-sidebar,
.acrobat-explorer-view,
.acrobat-files-container,
.window,
.window-content,
.terminal-content,
.modal,
.modal-content,
.pdf-viewer-modal,
.pdf-modal-container,
.pdf-modal-body {
    scrollbar-color: rgba(255, 255, 255, .26) transparent;
    scrollbar-width: thin;
}

body[data-theme="light"] .finder-content,
body[data-theme="light"] .finder-list-panel,
body[data-theme="light"] .finder-preview,
body[data-theme="light"] .finder-preview-content,
body[data-theme="light"] .finder-file-view,
body[data-theme="light"] .finder-about-scroll,
body[data-theme="light"] .finder-path,
body[data-theme="light"] .photos-content,
body[data-theme="light"] .photos-main,
body[data-theme="light"] .photos-sidebar,
body[data-theme="light"] .acrobat-content,
body[data-theme="light"] .acrobat-main,
body[data-theme="light"] .acrobat-sidebar,
body[data-theme="light"] .acrobat-explorer-view,
body[data-theme="light"] .acrobat-files-container,
body[data-theme="light"] .window,
body[data-theme="light"] .window-content,
body[data-theme="light"] .terminal-content,
body[data-theme="light"] .modal,
body[data-theme="light"] .modal-content,
body[data-theme="light"] .pdf-viewer-modal,
body[data-theme="light"] .pdf-modal-container,
body[data-theme="light"] .pdf-modal-body {
    scrollbar-color: rgba(0, 0, 0, .26) transparent;
}

.finder-preview h2,
.finder-document h2 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 600;
}

.finder-preview-meta {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 11px;
}

.finder-preview-empty {
    margin: 45px 10px;
    color: var(--text-muted);
    font-size: 13px;
}

.finder-preview-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    max-height: min(56vh, 600px);
    overflow: auto;
    text-align: left;
}

.finder-preview-image,
.finder-preview-video {
    display: block;
    width: 100%;
    max-height: min(32vh, 280px);
    border-radius: 9px;
    background: #16181d;
    object-fit: contain;
}

.finder-preview-folder-art {
    display: grid;
    flex: 0 0 60px;
    width: 72px;
    height: 60px;
    place-items: center;
    color: #4a9bea;
}

.finder-preview-folder-art svg {
    width: 66px;
    height: 58px;
    fill: #74b9fa;
    stroke: #3787d5;
    stroke-width: .65;
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .18));
}

.finder-preview-app-icon {
    display: grid;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 16px;
    background: linear-gradient(145deg, #fff, #e8edf5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .22);
}

.finder-preview-app-icon svg {
    width: 38px;
    height: 38px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.finder-preview-app-icon.is-email { color: #ea4335; }
.finder-preview-app-icon.is-phone { color: #24a85a; }
.finder-preview-app-icon.is-location { color: #4285f4; }

.finder-preview-file-art {
    position: relative;
    display: grid;
    flex: 0 0 68px;
    width: 54px;
    height: 68px;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, .34);
    border-radius: 7px;
    background: linear-gradient(145deg, #fff, #e7eaf0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    color: #6b7280;
}

.finder-preview-file-art svg {
    width: 31px;
    height: 31px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.4;
}

.finder-preview-file-art > span {
    position: absolute;
    right: -6px;
    bottom: 5px;
    padding: 2px 4px;
    border-radius: 3px;
    background: #e5484d;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
}

.finder-item-description {
    width: 100%;
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.55;
    text-align: left;
}

.finder-folder-preview-list,
.finder-document-points {
    display: grid;
    width: 100%;
    gap: 5px;
    margin: 0;
    padding: 10px 0 0 17px;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.45;
    text-align: left;
}

.finder-visual-eyebrow {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .14em;
}

.finder-visual-title {
    margin: 4px 0 0;
    color: var(--text-primary);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}

.finder-visual-copy {
    margin: 5px 0 0;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.5;
}

.finder-collection-card,
.finder-skill-profile,
.finder-career-sheet,
.finder-quote-card,
.finder-app-card {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(155deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .018));
    box-shadow: 0 12px 26px rgba(0, 0, 0, .14), 0 1px 0 rgba(255, 255, 255, .06) inset;
}

.finder-collection-card {
    padding: 14px;
}

.finder-collection-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 78px;
    margin: -14px -14px 13px;
    padding: 12px 17px;
    background: linear-gradient(115deg, rgba(27, 127, 255, .42), rgba(68, 90, 180, .18) 62%, rgba(157, 110, 255, .13));
}

.finder-collection-icon {
    display: grid;
    width: 62px;
    height: 50px;
    place-items: center;
    filter: drop-shadow(0 6px 9px rgba(0, 0, 0, .25));
}

.finder-collection-icon svg {
    width: 58px;
    height: 48px;
    fill: #81c4ff;
    stroke: #3992ec;
    stroke-width: .65;
}

.finder-collection-count {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 50%;
    background: rgba(17, 35, 69, .36);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .14);
    color: #fff;
    font-size: 21px;
    font-weight: 700;
}

.finder-collection-card > .finder-visual-title {
    font-size: 19px;
}

.finder-skill-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 13px;
}

.finder-skill-tile {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 43px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 9px;
    background: rgba(255, 255, 255, .035);
}

.finder-skill-tile-mark,
.finder-skill-row-mark {
    display: grid;
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
    place-items: center;
    border: 1px solid rgba(132, 196, 255, .32);
    border-radius: 8px;
    background: linear-gradient(145deg, #263e64, #18263b);
    color: #b9ddff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: -.04em;
}

.finder-skill-tile-name {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 550;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.finder-row.is-file[data-file-type="skill"] .finder-row-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: transparent;
}

.finder-row.is-file[data-file-type="skill"] .finder-skill-row-mark {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
    border-radius: 7px;
}

.finder-skill-profile {
    display: grid;
    grid-template-columns: minmax(82px, 31%) minmax(0, 1fr);
    min-height: 168px;
    background: linear-gradient(130deg, rgba(18, 158, 128, .15), rgba(69, 75, 160, .09) 55%, rgba(255, 255, 255, .025));
}

.finder-skill-profile-accent {
    position: relative;
    display: grid;
    overflow: hidden;
    place-items: center;
    background: linear-gradient(145deg, #0f766e, #164e63 60%, #1e3a5f);
}

.finder-skill-profile-accent::before,
.finder-skill-profile-accent::after {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    content: "";
}

.finder-skill-profile-accent::before {
    width: 150px;
    height: 150px;
}

.finder-skill-profile-accent::after {
    width: 112px;
    height: 112px;
}

.finder-skill-profile-mark {
    z-index: 1;
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.07em;
    text-shadow: 0 3px 12px rgba(0, 0, 0, .28);
}

.finder-skill-profile-orbit {
    position: absolute;
    top: 19px;
    right: 21px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #a7f3d0;
    box-shadow: 0 0 14px #34d399;
}

.finder-skill-profile-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    padding: 14px;
}

.finder-skill-profile-content .finder-visual-title {
    font-size: 20px;
}

.finder-skill-category {
    margin: 0;
    color: var(--text-secondary);
    font-size: 11px;
}

.finder-skill-profile-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 10px;
}

.finder-skill-note-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px rgba(52, 211, 153, .75);
}

.finder-career-sheet {
    padding: 15px;
    background: linear-gradient(155deg, rgba(35, 92, 167, .17), rgba(255, 255, 255, .022) 54%);
}

.finder-career-sheet.is-education {
    background: linear-gradient(155deg, rgba(128, 88, 210, .17), rgba(255, 255, 255, .022) 54%);
}

.finder-career-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.finder-career-period {
    padding: 5px 8px;
    border: 1px solid rgba(115, 170, 255, .22);
    border-radius: 999px;
    background: rgba(59, 130, 246, .12);
    color: #b8d5ff;
    font-size: 9px;
    white-space: nowrap;
}

.finder-career-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.finder-career-monogram {
    display: grid;
    flex: 0 0 39px;
    width: 39px;
    height: 39px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 12px;
    background: linear-gradient(145deg, #4689df, #3157a8);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .18);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.is-education .finder-career-monogram {
    background: linear-gradient(145deg, #9b76ed, #5d48a9);
}

.finder-career-company {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 650;
}

.finder-career-title {
    margin: 10px 0 12px;
    color: var(--text-primary);
    font-size: 19px;
    line-height: 1.24;
}

.finder-career-focus {
    padding: 10px 11px;
    border-left: 2px solid #65a8ff;
    border-radius: 0 8px 8px 0;
    background: rgba(255, 255, 255, .045);
}

.is-education .finder-career-focus {
    border-left-color: #b293ff;
}

.finder-career-focus p {
    margin: 5px 0 0;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.5;
}

.finder-career-stats {
    display: flex;
    gap: 8px;
    margin: 10px 0;
}

.finder-career-stat {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: baseline;
    gap: 5px;
    padding: 8px 9px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
}

.finder-career-stat strong {
    color: var(--text-primary);
    font-size: 15px;
}

.finder-career-stat span {
    color: var(--text-muted);
    font-size: 9px;
}

.finder-highlight-grid {
    display: grid;
    gap: 6px;
}

.finder-highlight-item {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    gap: 7px;
    padding: 8px 9px;
    border: 1px solid rgba(255, 255, 255, .065);
    border-radius: 8px;
    background: rgba(255, 255, 255, .026);
}

.finder-highlight-index {
    color: #7eb6ff;
    font-size: 10px;
    font-weight: 750;
}

.finder-highlight-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1.5;
}

.finder-tech-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.finder-tech-chip {
    padding: 4px 7px;
    border: 1px solid rgba(122, 177, 245, .2);
    border-radius: 999px;
    background: rgba(59, 130, 246, .08);
    color: #bbd8ff;
    font-size: 9px;
}

body[data-theme="light"] .finder-career-period {
    border-color: rgba(22, 83, 149, .2);
    background: rgba(10, 132, 255, .08);
    color: #28568b;
}

body[data-theme="light"] .finder-tech-chip {
    border-color: rgba(48, 103, 162, .2);
    background: rgba(59, 130, 246, .07);
    color: #355c87;
}

body[data-theme="light"] .finder-highlight-index {
    color: #3478c5;
}

.finder-certificate-sheet {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 268px;
    overflow: hidden;
    padding: 16px 21px;
    border: 6px double #d6c69e;
    border-radius: 5px;
    background: linear-gradient(145deg, #faf7ed, #eee4c8);
    box-shadow: 0 13px 28px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .16);
    color: #3f392d;
    text-align: center;
}

.finder-certificate-sheet::before,
.finder-certificate-sheet::after {
    position: absolute;
    width: 155px;
    height: 155px;
    border: 1px solid rgba(158, 130, 69, .15);
    border-radius: 50%;
    content: "";
}

.finder-certificate-sheet::before { top: -105px; left: -75px; }
.finder-certificate-sheet::after { right: -75px; bottom: -105px; }

.finder-certificate-topline {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: #766b53;
}

.finder-certificate-topline .finder-visual-eyebrow {
    color: #786943;
}

.finder-certificate-year {
    padding: 4px 7px;
    border: 1px solid rgba(155, 126, 61, .24);
    border-radius: 999px;
    color: #786943;
    font-size: 9px;
}

.finder-certificate-seal {
    z-index: 1;
    display: grid;
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    place-items: center;
    margin: 15px 0 7px;
    border: 1px solid #b99c5e;
    border-radius: 50%;
    background: linear-gradient(145deg, #e3d39e, #b99b59);
    box-shadow: 0 0 0 4px rgba(185, 156, 94, .13), 0 5px 10px rgba(66, 49, 12, .17);
    color: #fff9df;
}

.finder-certificate-seal svg {
    width: 35px;
    height: 35px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.finder-certificate-seal.is-silver { background: linear-gradient(145deg, #dfe4ed, #8795a8); border-color: #aab5c5; }
.finder-certificate-seal.is-bronze { background: linear-gradient(145deg, #d9a078, #94603c); border-color: #b57d57; }
.finder-certificate-seal.is-special { background: linear-gradient(145deg, #70aeb5, #367782); border-color: #70aeb5; }

.finder-certificate-kicker {
    z-index: 1;
    color: #8b7c5b;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .18em;
}

.finder-certificate-title {
    z-index: 1;
    max-width: 100%;
    margin: 7px 0;
    color: #3a3327;
    font-family: Georgia, serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
}

.finder-certificate-issuer {
    z-index: 1;
    margin: 0;
    color: #7c715a;
    font-size: 10px;
}

.finder-certificate-achievement {
    z-index: 1;
    margin-top: 9px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(181, 148, 76, .16);
    color: #735c25;
    font-size: 10px;
    font-weight: 700;
}

.finder-certificate-footer {
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin-top: 14px;
}

.finder-certificate-rule {
    flex: 1;
    height: 1px;
    background: rgba(151, 128, 73, .36);
}

.finder-certificate-seal-label {
    color: #786943;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .13em;
}

.finder-certificate-sheet.is-award {
    border-color: #b7964f;
    background: radial-gradient(ellipse at 50% 18%, #fff4c7, #f2e5b7 58%, #dfc986);
}

.finder-quote-card {
    position: relative;
    padding: 18px 16px 14px;
    background: linear-gradient(145deg, rgba(106, 76, 178, .2), rgba(39, 47, 74, .2) 54%, rgba(255, 255, 255, .025));
}

.finder-quote-mark {
    position: absolute;
    top: -4px;
    right: 12px;
    color: rgba(185, 156, 255, .23);
    font-family: Georgia, serif;
    font-size: 86px;
    line-height: 1;
}

.finder-quote-text {
    position: relative;
    margin: 7px 0 17px;
    color: var(--text-primary);
    font-family: Georgia, serif;
    font-size: 13px;
    line-height: 1.65;
}

.finder-quote-extra {
    margin: 0 0 12px;
    color: var(--text-secondary);
    font-family: Georgia, serif;
    font-size: 12px;
    line-height: 1.6;
}

.finder-quote-attribution {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-top: 11px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.finder-quote-avatar {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 50%;
    background: linear-gradient(145deg, #9477e5, #4f69af);
    color: #fff;
    font-size: 11px;
    font-weight: 750;
}

.finder-quote-identity {
    display: grid;
    gap: 2px;
    color: var(--text-primary);
    font-size: 11px;
}

.finder-quote-identity small {
    color: var(--text-muted);
    font-size: 9px;
}

.finder-app-card {
    display: grid;
    grid-template-columns: 63px minmax(0, 1fr);
    align-items: start;
    gap: 13px;
    padding: 15px;
}

.finder-app-card .finder-preview-app-icon {
    width: 60px;
    height: 60px;
}

.finder-app-card.is-email { background: linear-gradient(135deg, rgba(234, 67, 53, .14), rgba(255, 255, 255, .025) 65%); }
.finder-app-card.is-phone { background: linear-gradient(135deg, rgba(36, 168, 90, .16), rgba(255, 255, 255, .025) 65%); }
.finder-app-card.is-location { background: linear-gradient(135deg, rgba(66, 133, 244, .16), rgba(255, 255, 255, .025) 65%); }

.finder-app-card-details {
    min-width: 0;
}

.finder-app-card-details .finder-visual-title {
    font-size: 17px;
}

.finder-app-value {
    margin: 8px 0 12px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 550;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.finder-app-card-footer {
    padding-top: 9px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: var(--text-muted);
    font-size: 10px;
}

.finder-media-frame {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: rgba(0, 0, 0, .28);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .2);
}

.finder-media-frame .finder-preview-image,
.finder-media-frame .finder-preview-video {
    width: 100%;
    max-height: min(35vh, 300px);
    border-radius: 0;
}

.finder-media-caption {
    margin: 0;
    padding: 9px 11px 11px;
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1.45;
}

.finder-document-cover {
    display: grid;
    justify-items: center;
    gap: 8px;
    width: 100%;
    padding: 20px 17px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
    text-align: center;
}

.finder-document-cover .finder-visual-title {
    margin-top: 0;
}

.finder-document-cover .finder-preview-file-art {
    margin-bottom: 4px;
}

.finder-document {
    max-width: 1000px;
    margin: 0 auto;
}

.finder-document > .finder-preview-meta {
    margin-bottom: 24px;
}

.finder-document-content {
    display: grid;
    justify-items: start;
    gap: 16px;
    max-width: 720px;
}

.finder-document-content .finder-preview-image {
    width: auto;
    max-width: 100%;
    max-height: min(62vh, 680px);
}

.finder-document-content .finder-preview-video {
    max-width: min(720px, 100%);
    max-height: min(62vh, 680px);
}

.finder-document-content .finder-preview-app-icon {
    width: 78px;
    height: 78px;
}

.finder-open-button,
.finder-back-button {
    padding: 7px 13px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.finder-open-button {
    margin-top: 15px;
}

.finder-open-button:hover,
.finder-back-button:hover {
    border-color: var(--accent);
}

.finder-file-view {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 18px 24px 30px;
}

.finder-file-view[hidden] {
    display: none;
}

.finder-file-view .finder-document-content > * {
    width: 100%;
}

.finder-document-content .finder-certificate-sheet {
    max-width: 760px;
    min-height: 380px;
    margin: 0 auto;
    padding: 28px 40px;
}

.finder-document-content .finder-certificate-title {
    max-width: 620px;
    font-size: 24px;
}

.finder-document-content .finder-certificate-seal {
    flex-basis: 64px;
    width: 64px;
    height: 64px;
    margin: 25px 0 14px;
}

.finder-document-content .finder-certificate-seal svg {
    width: 48px;
    height: 48px;
}

.finder-document-content .finder-quote-card {
    max-width: 760px;
    padding: 28px;
}

.finder-document-content .finder-quote-text {
    font-size: 17px;
}

.finder-document-content .finder-career-sheet {
    max-width: 780px;
    margin: 0 auto;
    padding: 25px;
}

.finder-document-content .finder-career-title {
    font-size: 27px;
}

.finder-document-content .finder-highlight-item p,
.finder-document-content .finder-career-focus p {
    font-size: 13px;
}

.finder-document-content .finder-app-card {
    max-width: 600px;
    padding: 22px;
}

.finder-document-content .finder-skill-profile {
    max-width: 720px;
    min-height: 240px;
    margin: 0 auto;
}

.finder-document-content .finder-skill-profile-mark {
    font-size: 40px;
}

.finder-back-button {
    margin: 0 0 18px;
}

/* --- About Me Rich Text Document --- */
.finder-about-file-view {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: rgba(128, 128, 128, .045);
}

.finder-about-file-view[hidden] {
    display: none !important;
}

.finder-file-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 0 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 11px;
}

.finder-file-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 5px 8px 5px 5px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #58a4f5;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.finder-file-back:hover {
    background: rgba(10, 132, 255, .12);
}

.finder-file-back svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.finder-about-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 26px 24px 34px;
}

.finder-about-sheet {
    width: min(100%, 820px);
    min-height: 480px;
    margin: 0 auto;
    padding: clamp(24px, 4.2vw, 52px);
    border: 1px solid rgba(255, 255, 255, .62);
    border-radius: 12px;
    background: linear-gradient(145deg, #fff 0%, #f5f7fb 100%);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .2), 0 1px 2px rgba(0, 0, 0, .08);
    color: #202938;
}

.finder-about-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e4e7ed;
}

.finder-about-header > div {
    min-width: 0;
}

.finder-about-kicker {
    margin: 0 0 10px;
    color: #6b7d99;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .14em;
}

.finder-about-header h2 {
    margin: 0;
    color: #1b2638;
    font-size: clamp(27px, 3.5vw, 38px);
    font-weight: 700;
    letter-spacing: -.04em;
}

.finder-about-role {
    margin: 6px 0 0;
    color: #52647e;
    font-size: 13px;
}

.finder-about-header img {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    border: 3px solid #fff;
    border-radius: 22px;
    box-shadow: 0 4px 14px rgba(29, 48, 76, .16);
    object-fit: cover;
}

.finder-about-lede {
    max-width: 690px;
    margin: 24px 0;
    color: #35435a;
    font-size: 15px;
    line-height: 1.7;
}

.finder-about-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.finder-about-facts section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    min-height: 103px;
    padding: 14px;
    border: 1px solid #e5e9f0;
    border-radius: 9px;
    background: rgba(255, 255, 255, .82);
}

.finder-about-facts span {
    color: #78869b;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .12em;
}

.finder-about-facts strong {
    color: #26354b;
    font-size: 12px;
    font-weight: 650;
}

.finder-about-facts small {
    color: #6d7a8d;
    font-size: 10px;
    line-height: 1.45;
}

.finder-about-story {
    margin-top: 26px;
}

.finder-about-story h3 {
    margin: 0 0 8px;
    color: #233149;
    font-size: 15px;
}

.finder-about-story p {
    max-width: 700px;
    margin: 0;
    color: #536178;
    font-size: 12px;
    line-height: 1.7;
}

.finder-about-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 20px;
}

.finder-about-skills span {
    padding: 6px 9px;
    border: 1px solid #dce6f4;
    border-radius: 999px;
    background: #edf4fd;
    color: #48668c;
    font-size: 10px;
    font-weight: 550;
}

/* --- Photos Application --- */
.photos-content {
    display: flex;
    flex-direction: row;
    min-height: 0;
    overflow: hidden !important;
    padding: 0 !important;
}

.photos-content > .finder-browser {
    flex: 1 1 auto;
    min-width: 0;
}

.finder-original-content.photos-content {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.photos-sidebar {
    display: flex;
    flex: 0 0 214px;
    flex-direction: column;
    min-width: 0;
    padding: 21px 12px 13px;
    border-right: 1px solid var(--border);
    background: rgba(128, 128, 128, .08);
}

.photos-sidebar-group {
    margin-bottom: 25px;
}

.photos-sidebar-heading {
    margin: 0 10px 8px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}

.photos-sidebar-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 31px;
    margin: 2px 0;
    padding: 5px 9px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: default;
}

.photos-sidebar-item svg {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
}

.photos-sidebar-item span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.photos-sidebar-item small {
    color: currentColor;
    font-size: 10px;
    opacity: .76;
}

.photos-sidebar-item.selected {
    background: rgba(10, 132, 255, .88);
    color: #fff;
}

.photos-sidebar-item:not(.selected):hover {
    background: rgba(10, 132, 255, .12);
    color: var(--text-primary);
}

.photos-sidebar-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: auto 8px 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 10px;
}

.photos-sidebar-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34c759;
    box-shadow: 0 0 0 3px rgba(52, 199, 89, .13);
}

.photos-main {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 28px 32px 38px;
    overscroll-behavior: contain;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
    scrollbar-width: thin;
}

.photos-main::-webkit-scrollbar {
    width: 8px;
}

.photos-main::-webkit-scrollbar-track {
    background: transparent;
}

.photos-main::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(255, 255, 255, .26);
    background-clip: padding-box;
}

.photos-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.photos-heading {
    min-width: 0;
}

.photos-eyebrow {
    margin: 0 0 4px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
}

.photos-heading h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 27px;
    font-weight: 650;
    letter-spacing: -.035em;
}

.photos-count {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 11px;
}

.photos-search {
    display: flex;
    align-items: center;
    gap: 7px;
    width: min(230px, 35%);
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(128, 128, 128, .1);
    color: var(--text-muted);
}

.photos-search svg {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.6;
}

.photos-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 11px;
}

.photos-search input::placeholder {
    color: var(--text-muted);
}

.photos-search:focus-within {
    border-color: #0a84ff;
    outline: 2px solid rgba(10, 132, 255, .2);
    outline-offset: 1px;
}

.photos-filterbar {
    display: flex;
    gap: 3px;
    width: max-content;
    max-width: 100%;
    margin-bottom: 22px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: rgba(128, 128, 128, .08);
}

.photos-filterbar button {
    min-width: 57px;
    padding: 5px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.photos-filterbar button:hover:not(.selected) {
    background: rgba(255, 255, 255, 0.09);
    color: var(--text-primary);
}

.photos-filterbar button:active:not(.selected) {
    background: rgba(255, 255, 255, 0.14);
}

body[data-theme="light"] .photos-filterbar button:hover:not(.selected) {
    background: rgba(0, 0, 0, 0.07);
    color: var(--text-primary);
}

body[data-theme="light"] .photos-filterbar button:active:not(.selected) {
    background: rgba(0, 0, 0, 0.12);
}

.photos-filterbar button.selected {
    background: var(--bg-window);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    color: var(--text-primary);
    cursor: default;
}

.photos-section-label {
    margin: 0 0 12px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
}

.photos-grid {
    grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
    gap: 17px 14px;
}

.photos-grid .gallery-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 10px;
    background: transparent;
    text-align: left;
    aspect-ratio: auto;
    transform: none;
}

.photos-grid .gallery-item:hover,
.photos-grid .gallery-item:focus-visible {
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    transform: none;
}

.photos-grid .gallery-item:focus-visible .photos-thumbnail {
    outline: 2px solid #0a84ff;
    outline-offset: 2px;
}

.photos-grid .gallery-item[hidden] {
    display: none !important;
}

.photos-thumbnail {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    background: #20232a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
    aspect-ratio: 1.25;
}

.photos-thumbnail .gallery-image,
.photos-thumbnail .gallery-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s ease;
}

.photos-grid .gallery-item:hover .gallery-image,
.photos-grid .gallery-item:hover .gallery-video {
    transform: scale(1.035);
}

.photos-caption {
    display: block;
    min-width: 0;
    padding: 0 2px;
}

.photos-caption .gallery-title {
    margin-bottom: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.photos-caption .gallery-description {
    display: -webkit-box;
    margin-top: 3px;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.photos-thumbnail .media-badge {
    top: 7px;
    right: 7px;
    padding: 4px 7px;
    border-radius: 6px;
    font-size: 9px;
}

.photos-empty {
    margin: 45px 0;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

.photos-empty[hidden] {
    display: none !important;
}

/* ==========================================================================
   Responsive Adaptations
   ========================================================================== */

/* --- Tablet & Mobile (<= 820px) --- */
@media (max-width: 820px) {
    html {
        height: 100%;
        height: 100dvh;
        overflow: hidden;
    }

    body {
        position: fixed;
        width: 100%;
        height: 100%;
        height: 100dvh;
        min-height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: #111827;
        -webkit-overflow-scrolling: touch;
    }

    .macos-desktop {
        width: 100%;
        height: 100%;
        height: 100dvh;
        overflow: hidden;
    }

    .mac-screen {
        height: 100%;
        overflow: hidden;
    }

    .desktop {
        padding: calc(48px + env(safe-area-inset-top)) 16px calc(78px + env(safe-area-inset-bottom));
        background: var(--wallpaper);
        overflow: hidden;
    }

    /* Top Bar on Mobile */
    .top-bar {
        height: calc(44px + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));
        border: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    .apple-menu,
    .menu-items,
    .logo-text,
    .status-date {
        display: none;
    }

    .menu-bar-left {
        min-width: 0;
        gap: 0;
    }

    .status-time {
        position: absolute;
        top: calc(8px + env(safe-area-inset-top));
        left: calc(20px + env(safe-area-inset-left));
        min-width: 0;
        justify-content: flex-start;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    }

    .top-bar-right {
        gap: 6px;
        margin-left: auto;
    }

    .status-glyph {
        width: 16px;
        height: 20px;
        color: #fff;
    }

    .status-glyph svg {
        width: 16px;
        height: 16px;
    }

    .cellular-glyph {
        display: inline-grid;
    }

    .theme-switch {
        position: absolute;
        top: calc(54px + env(safe-area-inset-top));
        right: calc(18px + env(safe-area-inset-right));
        width: 25px;
        min-width: 25px;
        height: 25px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 50%;
        background: rgba(20, 23, 31, .28);
    }

    body[data-active-app] .theme-switch {
        display: none;
    }

    .theme-switch svg {
        width: 14px;
        height: 14px;
    }

    /* Home Screen on Mobile */
    .home-welcome {
        display: block;
        box-sizing: border-box;
        width: 100%;
        padding: 12px 10px;
        border-radius: 16px;
        flex-shrink: 0;
    }

    .home-avatar {
        width: 44px;
        height: 44px;
        margin-bottom: 5px;
        border-radius: 12px;
    }

    .home-eyebrow {
        margin-bottom: 4px;
        font-size: 9px;
    }

    .home-welcome h1 {
        font-size: clamp(19px, 5.5vw, 25px);
        margin: 0 0 5px;
    }

    .home-welcome > p:not(.home-eyebrow) {
        max-width: 280px;
        margin: 0 auto;
        font-size: 11px;
        line-height: 1.35;
    }

    .primary-launch {
        margin-top: 8px;
        padding: 6px 14px;
        font-size: 11px;
    }

    .desktop-home {
        inset: calc(48px + env(safe-area-inset-top)) 16px calc(76px + env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        gap: 6px;
        overflow: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .desktop-home::-webkit-scrollbar {
        display: none;
    }

    .desktop-icon-grid {
        position: static;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: auto;
        gap: 4px 4px;
        width: 100%;
        max-height: none;
        overflow: visible;
        padding: 0;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .desktop-icon {
        min-height: auto;
        gap: 2px;
        padding: 2px 1px;
        font-size: 10px;
    }

    .app-icon {
        width: clamp(36px, 10.5vw, 44px);
        height: clamp(36px, 10.5vw, 44px);
        border-radius: 12px;
        font-size: 18px;
    }

    .desktop-folder-icon {
        width: clamp(36px, 10.5vw, 44px);
        height: clamp(32px, 9.5vw, 40px);
    }

    .desktop-folder-icon svg {
        width: 100%;
        height: 100%;
    }

    .desktop-folder-icon::after {
        width: 12px;
        height: 12px;
        bottom: 2px;
        left: 2px;
        border-radius: 3px;
        background-size: 8px 8px;
    }

    .desktop-mac-icon {
        width: clamp(36px, 10.5vw, 44px);
        height: clamp(36px, 10.5vw, 44px);
        border-radius: 12px;
    }

    .desktop-mac-icon svg {
        width: 100%;
        height: 100%;
    }

    .desktop-file-icon {
        width: clamp(30px, 9vw, 38px);
        height: clamp(36px, 10.5vw, 44px);
    }

    .desktop-file-icon svg {
        width: 100%;
        height: 100%;
    }

    /* Windows on Mobile */
    .desktop .window {
        inset: calc(48px + env(safe-area-inset-top)) 0 0;
        border: 0;
        border-radius: 23px 23px 0 0;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, .18);
    }

    .desktop .window.app-active {
        animation: app-launch-mobile .36s cubic-bezier(.2, .75, .25, 1) both;
    }

    @keyframes app-launch-mobile {
        from { opacity: .12; transform: scale(.08); filter: blur(3px); border-radius: 50%; }
        70% { opacity: 1; filter: blur(0); }
        to { opacity: 1; transform: scale(1); filter: blur(0); border-radius: 23px 23px 0 0; }
    }

    .desktop .window.is-maximized {
        inset: calc(48px + env(safe-area-inset-top)) 0 0;
        border-radius: 23px 23px 0 0;
    }

    .desktop .window-header {
        flex-basis: 52px;
        height: 52px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }

    .desktop .window-title {
        order: 1;
        font-weight: 600;
        font-size: 16px;
        letter-spacing: -0.2px;
        color: var(--text-primary);
        text-align: left;
        flex: 1;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .desktop .window-controls {
        order: 2;
        margin-left: auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
        gap: 0;
    }

    .desktop .window-version,
    .desktop .window-header > div:not(.window-controls):not(.window-title) {
        display: none !important;
    }

    .desktop .window-control.control-minimize,
    .desktop .window-control.control-maximize {
        display: none !important;
    }

    .desktop .window-control.control-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.65);
        cursor: pointer;
        padding: 0;
        margin: 0;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        transition: background-color 0.18s ease, transform 0.12s ease, color 0.18s ease, border-color 0.18s ease;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .desktop .window-control.control-close:hover {
        background: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.95);
    }

    .desktop .window-control.control-close:active {
        background: rgba(255, 255, 255, 0.22);
        transform: scale(0.92);
        color: #ffffff;
    }

    .desktop .window-control.control-close::after {
        content: "" !important;
        display: block;
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        border-radius: 1px;
        opacity: 1 !important;
        font-size: 0;
        line-height: 0;
    }

    body[data-theme="light"] .desktop .window-control.control-close {
        background: rgba(0, 0, 0, 0.05);
        border-color: rgba(0, 0, 0, 0.08);
        color: rgba(0, 0, 0, 0.55);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    }

    body[data-theme="light"] .desktop .window-control.control-close:hover {
        background: rgba(0, 0, 0, 0.09);
        border-color: rgba(0, 0, 0, 0.14);
        color: rgba(0, 0, 0, 0.85);
    }

    body[data-theme="light"] .desktop .window-control.control-close:active {
        background: rgba(0, 0, 0, 0.14);
        color: rgba(0, 0, 0, 0.95);
    }

    .desktop .window-content {
        padding: 23px 18px;
    }

    .desktop .hero-window .window-content {
        justify-content: flex-start;
        padding-top: 32px;
    }

    .desktop .window h1 { font-size: 32px; }
    .desktop .window .subtitle { font-size: 17px; }
    .desktop .window .hero-description { font-size: 14px; }
    .desktop .window .grid-container { grid-template-columns: 1fr; }

    /* Finder on Mobile */
    .finder-browser {
        margin: 0;
    }

    /* Macintosh Finder on Mobile */
    .mac-finder-sidebar {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        width: 220px;
        background: var(--bg-window);
        transform: translateX(-100%);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
    }

    .mac-finder-sidebar.mobile-open {
        transform: translateX(0);
    }

    .mac-finder-toolbar .sidebar-toggle-btn {
        display: grid;
        place-items: center;
        width: 28px;
        height: 26px;
        border: 0;
        background: transparent;
        color: var(--text-primary);
        border-radius: 5px;
        cursor: pointer;
    }

    .mac-finder-icon-grid {
        padding: 16px 12px;
        gap: 14px 10px;
        grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
    }

    .folder-icon-wrap {
        width: 64px;
        height: 52px;
    }

    .finder-search-wrap {
        width: 88px;
    }

    .finder-search-wrap:focus-within {
        width: 130px;
    }

    .mac-finder-status-bar {
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
        height: auto;
        min-height: calc(30px + env(safe-area-inset-bottom));
    }

    .finder-file-view {
        padding: 14px 18px 28px;
    }

    .finder-about-scroll {
        padding: 15px 10px calc(25px + env(safe-area-inset-bottom));
    }

    .finder-about-sheet {
        min-height: 0;
        padding: 22px 18px;
    }

    .finder-about-header img {
        flex-basis: 60px;
        width: 60px;
        height: 60px;
        border-radius: 18px;
    }

    .finder-about-lede {
        margin: 19px 0;
        font-size: 13px;
    }

    .finder-about-facts {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .finder-about-facts section {
        min-height: 0;
    }

    .finder-skill-tile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .finder-document-content .finder-certificate-sheet {
        min-height: 300px;
        padding: 20px;
    }

    .finder-document-content .finder-certificate-title {
        font-size: 19px;
    }

    .finder-document-content .finder-career-sheet {
        padding: 16px;
    }

    /* Photos on Mobile */
    .photos-content {
        flex-direction: column;
    }

    .photos-sidebar {
        display: none;
    }

    .photos-main {
        flex: 1 1 auto;
        width: auto;
        padding: 22px 18px calc(38px + env(safe-area-inset-bottom));
    }

    .photos-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-bottom: 16px;
    }

    .photos-heading h2 {
        font-size: 25px;
    }

    .photos-search {
        width: auto;
    }

    .photos-filterbar {
        justify-content: space-between;
        width: 100%;
        margin-bottom: 20px;
    }

    .photos-filterbar button {
        flex: 1;
        min-width: 0;
        padding-right: 7px;
        padding-left: 7px;
    }

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

    /* Terminal on Mobile */
    .terminal-container {
        height: 100%;
        min-height: 380px;
    }

    .terminal-content {
        padding: 14px;
        font-size: 12px;
    }

    .terminal-footer {
        gap: 8px;
        padding: 8px 12px;
        font-size: 10px;
    }

    /* Dock on Mobile */
    .dock {
        position: fixed;
        --dock-item-size: clamp(40px, 11.5vw, 46px);
        bottom: calc(10px + env(safe-area-inset-bottom));
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 28px);
        max-width: 360px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0;
        padding: 7px 16px;
        border-radius: 24px;
        background: rgba(238, 241, 248, .26);
        box-shadow: 0 10px 30px rgba(0, 0, 0, .24), 0 1px 0 rgba(255, 255, 255, .28) inset;
        border: 1px solid rgba(255, 255, 255, .25);
        box-sizing: border-box;
        z-index: 100;
    }

    body[data-theme="light"] .dock {
        background: rgba(255, 255, 255, .52);
        box-shadow: 0 10px 30px rgba(0, 0, 0, .14), 0 1px 0 rgba(255, 255, 255, .6) inset;
        border: 1px solid rgba(255, 255, 255, .6);
    }

    .dock .dock-item {
        display: none;
        flex: 0 0 var(--dock-item-size);
        width: var(--dock-item-size);
        height: var(--dock-item-size);
        border-radius: 12px;
        transform: none !important;
        filter: none !important;
    }

    .dock .dock-item:not(.dock-finder):not(.dock-email):not(.dock-whatsapp):not(.dock-phone):not(.dock-gallery),
    .dock .dock-item.dock-pdf,
    .dock .dock-item[data-open-app="pdf"] {
        display: none !important;
    }

    .dock .dock-item.dock-finder,
    .dock .dock-item.dock-email,
    .dock .dock-item.dock-whatsapp,
    .dock .dock-item.dock-phone,
    .dock .dock-item.dock-gallery {
        display: grid;
        place-items: center;
    }

    .dock .dock-item.dock-finder { order: 1; }
    .dock .dock-item.dock-email { order: 2; }
    .dock .dock-item.dock-whatsapp { order: 3; }
    .dock .dock-item.dock-phone { order: 4; }
    .dock .dock-item.dock-gallery { order: 5; }

    .dock .dock-item.dock-finder svg,
    .dock .dock-item.dock-gallery svg {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        display: block;
        border-radius: 12px;
    }

    .dock .dock-email-icon {
        width: calc(var(--dock-item-size) * 0.78);
        height: calc(var(--dock-item-size) * 0.78);
        border-radius: 7px;
    }

    .dock .dock-link svg {
        width: calc(var(--dock-item-size) * 0.72);
        height: calc(var(--dock-item-size) * 0.72);
    }

    .dock-item::after { display: none; }
    .dock .dock-item.active::before { display: none; }
    .dock-item.is-launching { animation: none; }
    .dock-separator { display: none; }

    body[data-active-app] .dock {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-50%, calc(100% + 24px));
    }

    /* iOS Home Indicator Bar */
    .ios-home-indicator:not([hidden]) {
        position: absolute;
        bottom: env(safe-area-inset-bottom);
        left: 50%;
        z-index: 31;
        display: block;
        width: 116px;
        height: 30px;
        padding: 0;
        border: 0;
        background: transparent;
        transform: translateX(-50%);
        touch-action: none;
        cursor: pointer;
    }

    .ios-home-indicator::after {
        position: absolute;
        bottom: 7px;
        left: 50%;
        width: 108px;
        height: 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .88);
        content: "";
        transform: translateX(-50%);
        transition: box-shadow .15s ease;
    }

    body[data-theme="light"] .ios-home-indicator::after {
        background: rgba(29, 29, 31, .72);
    }

    .ios-home-indicator:focus-visible {
        outline: none;
    }

    .ios-home-indicator:focus-visible::after {
        box-shadow: 0 0 0 4px rgba(10, 132, 255, .28);
    }
}

/* --- Small Mobile Phones (<= 390px) --- */
@media (max-width: 390px) {
    .desktop {
        padding-right: 10px;
        padding-left: 10px;
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }

    .desktop-home {
        right: 10px;
        left: 10px;
        bottom: calc(72px + env(safe-area-inset-bottom));
        gap: 4px;
    }

    .home-welcome {
        padding: 10px 8px;
    }

    .home-avatar {
        width: 40px;
        height: 40px;
        margin-bottom: 4px;
    }

    .home-welcome h1 {
        font-size: 18px;
        margin-bottom: 3px;
    }

    .home-welcome > p:not(.home-eyebrow) {
        font-size: 10.5px;
        line-height: 1.3;
    }

    .desktop-icon {
        min-height: auto;
        font-size: 9px;
    }

    .dock {
        --dock-item-size: 38px;
        bottom: calc(8px + env(safe-area-inset-bottom));
        width: calc(100% - 20px);
        max-width: 320px;
        gap: 0;
        justify-content: space-between;
        padding: 6px 12px;
        border-radius: 20px;
    }

    .status-time {
        font-size: 11px;
    }

    .finder-list-heading,
    .finder-row {
        grid-template-columns: 22px minmax(0, 1fr) minmax(66px, 31%);
        gap: 5px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .finder-row-name { font-size: 11px; }
    .finder-row-kind { font-size: 9px; }

    .photos-main {
        padding-right: 14px;
        padding-left: 14px;
    }

    .photos-grid {
        gap: 13px 9px;
    }

    .photos-caption .gallery-title {
        font-size: 10px;
    }
}

/* --- Adobe Acrobat Reader App --- */
.acrobat-content {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    background: var(--window-bg, #1e1e1e);
    color: var(--text-primary);
}

.acrobat-sidebar {
    display: flex;
    flex: 0 0 220px;
    flex-direction: column;
    min-width: 0;
    padding: 18px 12px 14px;
    border-right: 1px solid var(--border);
    background: rgba(128, 128, 128, .06);
}

.acrobat-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 0 6px;
}

.acrobat-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #eb1000;
    box-shadow: 0 3px 8px rgba(235, 16, 0, .35);
}

.acrobat-brand-icon svg {
    width: 20px;
    height: 20px;
}

.acrobat-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.acrobat-brand-text strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.acrobat-brand-text small {
    font-size: 10px;
    color: var(--text-muted);
}

.acrobat-sidebar-group {
    margin-bottom: 22px;
}

.acrobat-sidebar-heading {
    margin: 0 10px 8px;
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.acrobat-sidebar-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 32px;
    margin: 2px 0;
    padding: 6px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}

.acrobat-sidebar-item svg {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
}

.acrobat-sidebar-item span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acrobat-sidebar-item small {
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(128, 128, 128, .18);
    color: currentColor;
    font-size: 10px;
    font-weight: 600;
}

.acrobat-sidebar-item.selected {
    background: #eb1000;
    color: #fff;
}

.acrobat-sidebar-item.selected small {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

.acrobat-sidebar-item:not(.selected):hover {
    background: rgba(235, 16, 0, .12);
    color: var(--text-primary);
}

.acrobat-sidebar-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 12px 6px 0;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 10.5px;
}

.acrobat-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34c759;
    box-shadow: 0 0 6px rgba(52, 199, 89, .5);
}

.acrobat-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    overflow-y: auto;
}

.acrobat-explorer-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 24px 32px;
    overflow-y: auto;
}

.acrobat-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.acrobat-toolbar-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.acrobat-view-title {
    margin: 0;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.acrobat-view-badge {
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}

.acrobat-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.acrobat-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 220px;
}

.acrobat-search svg {
    position: absolute;
    left: 10px;
    width: 13px;
    height: 13px;
    color: var(--text-muted);
    pointer-events: none;
}

.acrobat-search input {
    width: 100%;
    height: 30px;
    padding: 0 10px 0 30px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    background: rgba(255, 255, 255, .05);
    color: var(--text-primary);
    font: inherit;
    font-size: 12px;
    transition: all .15s ease;
}

.acrobat-search input:focus {
    outline: none;
    border-color: #eb1000;
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 0 0 2px rgba(235, 16, 0, .2);
}

.acrobat-view-toggle {
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 6px;
    background: rgba(255, 255, 255, .04);
    padding: 2px;
    gap: 2px;
}

.acrobat-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all .14s ease;
    padding: 0;
}

.acrobat-view-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .08);
}

.acrobat-view-btn.selected {
    color: #fff;
    background: #eb1000;
}

.acrobat-view-btn svg {
    width: 14px;
    height: 14px;
}

.acrobat-mobile-filters {
    display: none;
}

.acrobat-row-meta-mobile {
    display: none;
}

/* --- Adobe Acrobat Signature Table / List View --- */
.acrobat-table-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.acrobat-table-head {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    user-select: none;
}

.acrobat-col-name {
    flex: 2.2;
    min-width: 0;
}

.acrobat-col-loc {
    flex: 1.2;
    min-width: 0;
    padding: 0 8px;
}

.acrobat-col-date {
    flex: 0.9;
    min-width: 0;
    padding: 0 8px;
}

.acrobat-col-size {
    flex: 0.7;
    min-width: 0;
    padding: 0 8px;
}

.acrobat-col-actions {
    width: 96px;
    text-align: right;
    flex-shrink: 0;
}

/* Group section dividers in All Locations view */
.acrobat-group-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 14px 8px;
    margin-top: 4px;
}

.acrobat-group-divider:first-child {
    padding-top: 6px;
    margin-top: 0;
}

.acrobat-group-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: .02em;
}

.acrobat-group-path {
    font-size: 11px;
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.acrobat-group-rule {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, .06);
}

.acrobat-group-badge {
    font-size: 11px;
    color: var(--text-muted);
}

/* File row */
.acrobat-row {
    display: flex;
    align-items: center;
    padding: 9px 14px;
    border-radius: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, .03);
    cursor: pointer;
    transition: background .12s ease;
    user-select: none;
}

.acrobat-row:hover {
    background: rgba(255, 255, 255, .05);
}

.acrobat-row:focus-visible {
    outline: 2px solid #eb1000;
    outline-offset: -1px;
}

.acrobat-cell-name {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 2.2;
}

.acrobat-row-icon {
    width: 22px;
    height: 26px;
    flex-shrink: 0;
}

.acrobat-row-icon svg {
    width: 100%;
    height: 100%;
}

.acrobat-row-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.acrobat-row-title {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acrobat-row-desc {
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acrobat-cell-loc {
    font-size: 11.5px;
    color: var(--text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1.2;
    padding: 0 8px;
}

.acrobat-cell-date {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    flex: 0.9;
    padding: 0 8px;
}

.acrobat-cell-size {
    font-size: 12px;
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: nowrap;
    flex: 0.7;
    padding: 0 8px;
}

.acrobat-cell-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: 96px;
    flex-shrink: 0;
}

.acrobat-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 26px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 5px;
    background: rgba(255, 255, 255, .06);
    color: var(--text-secondary);
    cursor: pointer;
    font: inherit;
    font-size: 11.5px;
    text-decoration: none;
    transition: all .12s ease;
}

.acrobat-row-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .25);
}

.acrobat-row-btn.primary {
    background: #eb1000;
    color: #fff;
    border-color: #eb1000;
    font-weight: 500;
}

.acrobat-row-btn.primary:hover {
    background: #ff2a1a;
}

.acrobat-row-btn svg {
    width: 13px;
    height: 13px;
}

/* --- Adobe Acrobat Grid View --- */
.acrobat-grid-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
    padding-top: 6px;
}

.acrobat-grid-card {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
    overflow: hidden;
    cursor: pointer;
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.acrobat-grid-card:hover {
    transform: translateY(-2px);
    border-color: rgba(235, 16, 0, .4);
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}

.acrobat-grid-thumb {
    height: 110px;
    background: rgba(0, 0, 0, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.acrobat-grid-thumb-icon {
    width: 40px;
    height: 48px;
}

.acrobat-grid-thumb-icon svg {
    width: 100%;
    height: 100%;
}

.acrobat-grid-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(0, 0, 0, .6);
    color: #e0e0e0;
}

.acrobat-grid-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.acrobat-grid-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acrobat-grid-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
}

/* Independent PDF Viewer Modal */
.pdf-viewer-modal {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 2200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 2.5vw, 28px);
    box-sizing: border-box;
    overflow: hidden;
}

.pdf-viewer-modal.active {
    display: flex;
}

.pdf-modal-container {
    display: flex;
    flex-direction: column;
    width: min(94vw, 1100px);
    height: min(92vh, 860px);
    background: var(--window-bg, #1e1e1e);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
    overflow: hidden;
    animation: modalZoom .22s cubic-bezier(0.16, 1, 0.3, 1);
    transition: width .2s ease, height .2s ease, border-radius .2s ease;
}

.pdf-modal-container.is-maximized {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    border: 0;
}

.pdf-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    padding: 0 16px;
    background: var(--card-bg, rgba(255, 255, 255, .04));
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.pdf-modal-back-btn {
    display: none;
}

.pdf-modal-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 64px;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.pdf-modal-controls .window-control {
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 11;
}

.pdf-modal-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.pdf-modal-title-wrap {
    min-width: 0;
}

.pdf-modal-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border-radius: 5px;
    background: #eb1000;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    flex-shrink: 0;
}

.pdf-modal-title {
    margin: 0;
    color: var(--text-primary);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdf-modal-location {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdf-modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pdf-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all .14s ease;
}

.pdf-modal-btn:hover {
    border-color: #eb1000;
    color: #eb1000;
    background: rgba(235, 16, 0, .08);
}

.pdf-modal-btn.primary {
    background: #eb1000;
    color: #fff;
    border-color: #eb1000;
}

.pdf-modal-btn.primary:hover {
    background: #d00e00;
}

.pdf-modal-btn svg {
    width: 14px;
    height: 14px;
}

.pdf-modal-body {
    flex: 1 1 auto;
    width: 100%;
    height: calc(100% - 52px);
    background: #282a2e;
    position: relative;
    overflow: hidden;
    display: flex;
}

/* ==========================================================================
   TextEdit Rich Text Document Modal App
   ========================================================================== */
.textedit-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    background: rgba(0, 0, 0, 0.45);
    display: none;
    box-sizing: border-box;
    overflow: hidden;
}

.textedit-modal.active {
    display: flex;
}

.textedit-modal-container {
    display: flex;
    flex-direction: column;
    width: min(92vw, 860px);
    height: min(90vh, 840px);
    background: var(--bg-window, #1e1e21);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
    overflow: hidden;
    animation: modalZoom .22s cubic-bezier(0.16, 1, 0.3, 1);
    transition: width .2s ease, height .2s ease, border-radius .2s ease;
}

.textedit-modal-container.is-maximized {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    border: 0;
}

.textedit-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    padding: 0 16px;
    background: var(--card-bg, rgba(255, 255, 255, .04));
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.textedit-modal-back-btn {
    display: none;
}

.textedit-modal-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 64px;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.textedit-modal-controls .window-control {
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 11;
}

.textedit-modal-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.textedit-modal-title-wrap {
    min-width: 0;
}

.textedit-modal-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border-radius: 5px;
    background: #0a84ff;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    flex-shrink: 0;
}

.textedit-modal-badge.is-txt {
    background: #10b981;
}

.textedit-modal-title {
    margin: 0;
    color: var(--text-primary);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.textedit-modal-location {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.textedit-modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.textedit-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .14s ease;
}

.textedit-modal-btn:hover {
    border-color: #0a84ff;
    color: #0a84ff;
    background: rgba(10, 132, 255, .08);
}

.textedit-modal-btn.primary {
    background: #0a84ff;
    color: #fff;
    border-color: #0a84ff;
}

.textedit-modal-btn.primary:hover {
    background: #0070df;
}

.textedit-modal-body {
    flex: 1 1 auto;
    width: 100%;
    height: calc(100% - 52px);
    background: rgba(0, 0, 0, 0.25);
    overflow-y: auto;
    padding: 32px 24px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.textedit-paper {
    width: 100%;
    max-width: 740px;
    margin: 0 auto;
    background: var(--bg-window, #222226);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 36px 40px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

.textedit-kicker {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #0a84ff;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.textedit-about-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}

.textedit-hero-title {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.textedit-role-badge {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.textedit-avatar-wrap {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    overflow: hidden;
    border: 2.5px solid #0a84ff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

.textedit-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.textedit-lead {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-primary);
    margin: 0 0 24px;
    font-weight: 400;
}

.textedit-facts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}

.textedit-fact-card {
    background: rgba(128, 128, 128, 0.07);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.textedit-fact-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

.textedit-fact-card strong {
    font-size: 13.5px;
    color: var(--text-primary);
}

.textedit-fact-card small {
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.textedit-story-section {
    padding: 20px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}

.textedit-story-section h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--text-primary);
}

.textedit-story-section p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0;
}

.textedit-skills-section h3,
.textedit-highlights-block h3,
.textedit-tags-section h4 {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px;
}

.textedit-tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.textedit-tags-cloud span {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 500;
    border-radius: 6px;
    background: rgba(10, 132, 255, 0.12);
    color: #0a84ff;
    border: 1px solid rgba(10, 132, 255, 0.22);
}

.textedit-doc-header {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}

.textedit-doc-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
    line-height: 1.25;
}

.textedit-doc-subtitle {
    font-size: 14.5px;
    color: var(--text-secondary);
    margin: 0 0 8px;
}

.textedit-doc-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted);
}

.textedit-quote-box {
    position: relative;
    margin: 20px 0;
    padding: 18px 22px 18px 24px;
    border-left: 3px solid #0a84ff;
    background: rgba(10, 132, 255, 0.06);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.6;
}

.textedit-quote-icon {
    color: #0a84ff;
    opacity: 0.6;
    margin-bottom: 6px;
    display: block;
}

.textedit-points-list {
    margin: 0;
    padding-left: 20px;
    line-height: 1.65;
    font-size: 13.5px;
    color: var(--text-secondary);
}

.textedit-points-list li {
    margin-bottom: 8px;
}

.app-squircle.textedit {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
}

body[data-theme="light"] .textedit-modal-body {
    background: #eaecee;
}

body[data-theme="light"] .textedit-paper {
    background: #ffffff;
    border-color: #d1d5db;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.pdf-viewer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 40px;
    min-height: 40px;
    padding: 0 16px;
    background: #1f2124;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: #e5e5e5;
    font-size: 12px;
    flex-shrink: 0;
    user-select: none;
}

.pdf-toolbar-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pdf-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 28px;
    min-width: 28px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 6px;
    background: rgba(255, 255, 255, .06);
    color: #e5e5e5;
    font: inherit;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all .14s ease;
}

.pdf-toolbar-btn:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .25);
    color: #fff;
}

.pdf-toolbar-btn.active {
    background: #eb1000;
    border-color: #eb1000;
    color: #fff;
}

.pdf-toolbar-btn svg {
    width: 14px;
    height: 14px;
}

.pdf-zoom-level {
    font-size: 11.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #ccc;
    min-width: 44px;
    text-align: center;
}

.pdf-page-indicator {
    font-size: 11.5px;
    color: #999;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pdf-viewer-stage {
    flex: 1 1 auto;
    width: 100%;
    overflow-y: auto !important;
    overflow-x: auto !important;
    background: #2b2d31;
    padding: 32px 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    scrollbar-color: rgba(255, 255, 255, .26) transparent !important;
    scrollbar-width: thin !important;
}

.pdf-stage-inner {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    transform-origin: top center;
    transition: transform .15s ease;
    width: 100%;
}

.pdf-document-sheet {
    width: min(780px, 100%);
    min-height: 1020px;
    background: #ffffff;
    color: #1a1a1a;
    padding: 36px 42px;
    border-radius: 4px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
    box-sizing: border-box;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Certificate & Award Parchment Layout */
.pdf-sheet-frame {
    border: 3px solid #cc1e1e;
    padding: 6px;
    min-height: 940px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pdf-sheet-inner-frame {
    border: 1px solid #d4af37;
    padding: 34px 38px;
    min-height: 924px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: radial-gradient(circle at 50% 50%, #ffffff 0%, #fafafa 100%);
}

.pdf-sheet-header-banner {
    background: #cc1e1e;
    color: #ffffff;
    padding: 10px 20px;
    margin: -34px -38px 28px;
    text-align: center;
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.pdf-sheet-eyebrow {
    color: #666;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.pdf-sheet-title {
    font-size: 26px;
    font-weight: 800;
    color: #111;
    line-height: 1.25;
    margin: 0 0 16px;
}

.pdf-sheet-issuer {
    font-size: 15.5px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px;
}

.pdf-sheet-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(204, 30, 30, .08);
    color: #cc1e1e;
    font-size: 12px;
    font-weight: 700;
    margin: 0 0 20px;
}

.pdf-sheet-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #cc1e1e, transparent);
    margin: 18px 0 24px;
}

.pdf-sheet-detail {
    font-size: 14.5px;
    line-height: 1.7;
    color: #444;
    margin: 0 0 32px;
}

.pdf-sheet-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid #e5e5e5;
}

.pdf-sheet-meta {
    font-size: 11px;
    color: #777;
    line-height: 1.6;
}

.pdf-sheet-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    color: #222;
}

.pdf-sheet-seal {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    border: 3px double #d4af37;
    background: radial-gradient(circle, #fff9e6 0%, #ffecb3 100%);
    color: #b8860b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 12px rgba(212, 175, 55, .28);
    flex-shrink: 0;
    user-select: none;
}

.pdf-sheet-seal-star {
    font-size: 15px;
    line-height: 1;
}

.pdf-sheet-seal-text {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.1;
    margin-top: 2px;
}

/* Resume & Cover Letter Sheet */
.pdf-resume-sheet,
.pdf-cover-sheet {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 940px;
}

.pdf-resume-header,
.pdf-cover-header {
    border-bottom: 2px solid #eb1000;
    padding-bottom: 16px;
    margin-bottom: 24px;
}

.pdf-resume-name,
.pdf-cover-header h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    color: #111;
    letter-spacing: .04em;
}

.pdf-resume-role,
.pdf-cover-header p {
    margin: 4px 0 0;
    font-size: 14px;
    color: #eb1000;
    font-weight: 600;
}

.pdf-resume-contacts {
    margin: 6px 0 0;
    font-size: 12px;
    color: #666;
}

.pdf-resume-section {
    margin-bottom: 20px;
}

.pdf-resume-heading {
    margin: 0 0 8px;
    font-size: 12.5px;
    font-weight: 800;
    color: #111;
    letter-spacing: .06em;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 4px;
}

.pdf-resume-section p {
    margin: 4px 0;
    font-size: 13px;
    line-height: 1.6;
    color: #333;
}

.pdf-resume-footer {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #888;
    border-top: 1px solid #e0e0e0;
    padding-top: 14px;
    margin-top: auto;
}

.pdf-cover-date {
    font-size: 13px;
    color: #666;
    margin-bottom: 18px;
}

.pdf-cover-body p {
    font-size: 13.5px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 14px;
}

.pdf-cover-sig {
    margin-top: 24px;
    font-size: 14px;
    color: #111;
}

.pdf-modal-iframe {
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    border: 0;
    display: block;
    background: #2b2d31;
}

/* ==========================================================================
   Adobe Acrobat Reader & PDF Viewer — Light Theme
   ========================================================================== */
body[data-theme="light"] .acrobat-content {
    background: #ffffff;
    color: var(--text-primary);
}

body[data-theme="light"] .acrobat-sidebar {
    background: #f4f5f8;
    border-right: 1px solid rgba(0, 0, 0, .08);
}

body[data-theme="light"] .acrobat-brand-text strong {
    color: #1d1d1f;
}

body[data-theme="light"] .acrobat-brand-text small {
    color: #86868b;
}

body[data-theme="light"] .acrobat-sidebar-heading {
    color: #86868b;
}

body[data-theme="light"] .acrobat-sidebar-item {
    color: #3a3a3c;
}

body[data-theme="light"] .acrobat-sidebar-item svg {
    stroke: #6e6e73;
}

body[data-theme="light"] .acrobat-sidebar-item small {
    background: rgba(0, 0, 0, .06);
    color: #6e6e73;
}

body[data-theme="light"] .acrobat-sidebar-item:not(.selected):hover {
    background: rgba(235, 16, 0, .08);
    color: #eb1000;
}

body[data-theme="light"] .acrobat-sidebar-item:not(.selected):hover svg {
    stroke: #eb1000;
}

body[data-theme="light"] .acrobat-sidebar-item.selected {
    background: #eb1000;
    color: #ffffff;
}

body[data-theme="light"] .acrobat-sidebar-item.selected svg {
    stroke: #ffffff;
}

body[data-theme="light"] .acrobat-sidebar-item.selected small {
    background: rgba(255, 255, 255, .28);
    color: #ffffff;
}

body[data-theme="light"] .acrobat-sidebar-footer {
    border-top: 1px solid rgba(0, 0, 0, .08);
    color: #86868b;
}

body[data-theme="light"] .acrobat-toolbar {
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

body[data-theme="light"] .acrobat-view-title {
    color: #1d1d1f;
}

body[data-theme="light"] .acrobat-view-badge {
    color: #86868b;
}

body[data-theme="light"] .acrobat-search svg {
    color: #86868b;
}

body[data-theme="light"] .acrobat-search input {
    background: #f4f5f8;
    border: 1px solid rgba(0, 0, 0, .14);
    color: #1d1d1f;
}

body[data-theme="light"] .acrobat-search input::placeholder {
    color: #86868b;
}

body[data-theme="light"] .acrobat-search input:focus {
    background: #ffffff;
    border-color: #eb1000;
    box-shadow: 0 0 0 2px rgba(235, 16, 0, .16);
}

body[data-theme="light"] .acrobat-view-toggle {
    background: #f4f5f8;
    border: 1px solid rgba(0, 0, 0, .12);
}

body[data-theme="light"] .acrobat-view-btn {
    color: #86868b;
}

body[data-theme="light"] .acrobat-view-btn:hover {
    background: rgba(0, 0, 0, .06);
    color: #1d1d1f;
}

body[data-theme="light"] .acrobat-view-btn.selected {
    background: #eb1000;
    color: #ffffff;
}

body[data-theme="light"] .acrobat-table-head {
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    color: #86868b;
}

body[data-theme="light"] .acrobat-group-name {
    color: #1d1d1f;
}

body[data-theme="light"] .acrobat-group-path {
    color: #86868b;
}

body[data-theme="light"] .acrobat-group-rule {
    background: rgba(0, 0, 0, .08);
}

body[data-theme="light"] .acrobat-group-badge {
    color: #86868b;
}

body[data-theme="light"] .acrobat-row {
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

body[data-theme="light"] .acrobat-row:hover {
    background: rgba(0, 0, 0, .035);
}

body[data-theme="light"] .acrobat-row-title {
    color: #1d1d1f;
}

body[data-theme="light"] .acrobat-row-desc {
    color: #6e6e73;
}

body[data-theme="light"] .acrobat-cell-loc {
    color: #6e6e73;
}

body[data-theme="light"] .acrobat-cell-date,
body[data-theme="light"] .acrobat-cell-size {
    color: #86868b;
}

body[data-theme="light"] .acrobat-row-btn {
    background: rgba(0, 0, 0, .04);
    border: 1px solid rgba(0, 0, 0, .12);
    color: #3a3a3c;
}

body[data-theme="light"] .acrobat-row-btn:hover {
    background: rgba(0, 0, 0, .08);
    border-color: rgba(0, 0, 0, .22);
    color: #1d1d1f;
}

body[data-theme="light"] .acrobat-row-btn.primary {
    background: #eb1000;
    border-color: #eb1000;
    color: #ffffff;
}

body[data-theme="light"] .acrobat-row-btn.primary:hover {
    background: #d00e00;
    color: #ffffff;
}

body[data-theme="light"] .acrobat-grid-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

body[data-theme="light"] .acrobat-grid-card:hover {
    background: #ffffff;
    border-color: rgba(235, 16, 0, .4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

body[data-theme="light"] .acrobat-grid-thumb {
    background: #f4f5f8;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

body[data-theme="light"] .acrobat-grid-title {
    color: #1d1d1f;
}

body[data-theme="light"] .acrobat-grid-meta {
    color: #86868b;
}

body[data-theme="light"] .acrobat-grid-badge {
    background: rgba(0, 0, 0, .08);
    color: #6e6e73;
}

/* Independent PDF Viewer Modal Light Theme */
body[data-theme="light"] .pdf-viewer-modal {
    background: rgba(0, 0, 0, .45);
}

body[data-theme="light"] .pdf-modal-container {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .14);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}

body[data-theme="light"] .pdf-modal-header {
    background: #f7f7f9;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

body[data-theme="light"] .pdf-modal-title {
    color: #1d1d1f;
}

body[data-theme="light"] .pdf-modal-location {
    color: #6e6e73;
}

body[data-theme="light"] .pdf-modal-btn {
    background: rgba(0, 0, 0, .04);
    border: 1px solid rgba(0, 0, 0, .14);
    color: #1d1d1f;
}

body[data-theme="light"] .pdf-modal-btn:hover {
    background: rgba(235, 16, 0, .08);
    border-color: #eb1000;
    color: #eb1000;
}

body[data-theme="light"] .pdf-modal-btn.primary {
    background: #eb1000;
    border-color: #eb1000;
    color: #ffffff;
}

body[data-theme="light"] .pdf-modal-btn.primary:hover {
    background: #d00e00;
    color: #ffffff;
}

body[data-theme="light"] .pdf-modal-body {
    background: #eaedf1;
}

body[data-theme="light"] .pdf-modal-iframe {
    background: #eaedf1;
}

body[data-theme="light"] .pdf-viewer-toolbar {
    background: #f7f7f9;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    color: #1d1d1f;
}

body[data-theme="light"] .pdf-toolbar-btn {
    background: rgba(0, 0, 0, .04);
    border: 1px solid rgba(0, 0, 0, .12);
    color: #1d1d1f;
}

body[data-theme="light"] .pdf-toolbar-btn:hover {
    background: rgba(0, 0, 0, .08);
    border-color: rgba(0, 0, 0, .2);
    color: #1d1d1f;
}

body[data-theme="light"] .pdf-toolbar-btn.active {
    background: #eb1000;
    border-color: #eb1000;
    color: #ffffff;
}

body[data-theme="light"] .pdf-zoom-level {
    color: #3a3a3c;
}

body[data-theme="light"] .pdf-page-indicator {
    color: #6e6e73;
}

body[data-theme="light"] .pdf-viewer-stage {
    background: #eaedf1;
    scrollbar-color: rgba(0, 0, 0, .26) transparent !important;
}

@media print {
    body * {
        visibility: hidden !important;
    }
    .pdf-viewer-modal.active,
    .pdf-viewer-modal.active .pdf-stage-inner,
    .pdf-viewer-modal.active .pdf-document-sheet,
    .pdf-viewer-modal.active .pdf-document-sheet * {
        visibility: visible !important;
    }
    .pdf-viewer-modal.active .pdf-document-sheet {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        box-shadow: none;
    }
}

@media (max-width: 820px) {
    /* --- Independent PDF Viewer Modal on Mobile --- */
    .pdf-viewer-modal {
        padding: 0;
    }

    .pdf-modal-container {
        width: 100vw;
        height: 100dvh;
        max-width: 100vw;
        max-height: 100dvh;
        border-radius: 0;
        border: 0;
    }

    .pdf-modal-header {
        height: calc(52px + env(safe-area-inset-top));
        min-height: 52px;
        padding: env(safe-area-inset-top) calc(14px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left));
        gap: 8px;
    }

    .pdf-modal-controls {
        display: none !important;
    }

    .pdf-modal-back-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        min-width: 36px;
        padding: 0;
        margin: 0;
        border-radius: 50%;
        background: transparent;
        border: 0;
        color: rgba(255, 255, 255, .55); /* Dimmed back arrow */
        cursor: pointer;
        flex-shrink: 0;
        transition: color .18s ease, background-color .18s ease, transform .12s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .pdf-modal-back-btn:hover,
    .pdf-modal-back-btn:active {
        color: #ffffff;
        background: rgba(255, 255, 255, .12);
        transform: scale(0.94);
    }

    .pdf-modal-back-btn svg {
        width: 22px;
        height: 22px;
    }

    body[data-theme="light"] .pdf-modal-back-btn {
        color: rgba(0, 0, 0, .45);
    }

    body[data-theme="light"] .pdf-modal-back-btn:hover,
    body[data-theme="light"] .pdf-modal-back-btn:active {
        color: #000000;
        background: rgba(0, 0, 0, .06);
    }

    .pdf-modal-info {
        gap: 8px;
        min-width: 0;
        flex: 1;
    }

    .pdf-modal-title-wrap {
        min-width: 0;
        flex: 1;
    }

    .pdf-modal-badge {
        font-size: 9px;
        padding: 2px 5px;
    }

    .pdf-modal-title {
        font-size: 13px;
    }

    .pdf-modal-location {
        font-size: 10.5px;
    }

    .pdf-modal-actions {
        gap: 6px;
    }

    .pdf-modal-btn span {
        display: none;
    }

    .pdf-modal-btn {
        padding: 0 9px;
        height: 32px;
    }

    .pdf-modal-body {
        height: calc(100% - 52px - env(safe-area-inset-top));
    }

    /* --- Independent TextEdit Modal on Mobile --- */
    .textedit-modal {
        padding: 0;
    }

    .textedit-modal-container {
        width: 100vw;
        height: 100dvh;
        max-width: 100vw;
        max-height: 100dvh;
        border-radius: 0;
        border: 0;
    }

    .textedit-modal-header {
        height: calc(52px + env(safe-area-inset-top));
        min-height: 52px;
        padding: env(safe-area-inset-top) calc(14px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left));
        gap: 8px;
    }

    .textedit-modal-controls {
        display: none !important;
    }

    .textedit-modal-back-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        min-width: 36px;
        padding: 0;
        margin: 0;
        border-radius: 50%;
        background: transparent;
        border: 0;
        color: rgba(255, 255, 255, .55);
        cursor: pointer;
        flex-shrink: 0;
        transition: color .18s ease, background-color .18s ease, transform .12s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .textedit-modal-back-btn:hover,
    .textedit-modal-back-btn:active {
        color: #ffffff;
        background: rgba(255, 255, 255, .12);
        transform: scale(0.94);
    }

    .textedit-modal-back-btn svg {
        width: 22px;
        height: 22px;
    }

    body[data-theme="light"] .textedit-modal-back-btn {
        color: rgba(0, 0, 0, .45);
    }

    body[data-theme="light"] .textedit-modal-back-btn:hover,
    body[data-theme="light"] .textedit-modal-back-btn:active {
        color: #000000;
        background: rgba(0, 0, 0, .06);
    }

    .textedit-modal-info {
        gap: 8px;
        min-width: 0;
        flex: 1;
    }

    .textedit-modal-title-wrap {
        min-width: 0;
        flex: 1;
    }

    .textedit-modal-badge {
        font-size: 9px;
        padding: 2px 5px;
    }

    .textedit-modal-title {
        font-size: 13px;
    }

    .textedit-modal-location {
        font-size: 10.5px;
    }

    .textedit-modal-body {
        padding: 16px 12px calc(24px + env(safe-area-inset-bottom));
        height: calc(100% - 52px - env(safe-area-inset-top));
    }

    .textedit-paper {
        padding: 24px 18px;
        border-radius: 10px;
    }

    .textedit-facts-grid {
        grid-template-columns: 1fr;
    }

    .textedit-about-header {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 16px;
    }

    .textedit-hero-title {
        font-size: 22px;
    }

    .textedit-modal-actions .textedit-modal-btn:not(.primary) {
        display: none;
    }

    .textedit-modal-actions .textedit-modal-btn.primary {
        padding: 0 10px;
        height: 30px;
    }

    /* --- Adobe Acrobat Explorer on Mobile --- */
    .acrobat-content {
        flex-direction: column;
    }

    .acrobat-sidebar {
        display: none;
    }

    .acrobat-explorer-view {
        padding: 14px 12px calc(24px + env(safe-area-inset-bottom));
    }

    .acrobat-toolbar {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        margin-bottom: 6px;
        padding-bottom: 0;
        border-bottom: 0;
        flex-shrink: 0;
    }

    .acrobat-toolbar-left {
        display: none;
    }

    .acrobat-toolbar-right {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .acrobat-search {
        flex: 1;
        width: auto;
        min-width: 0;
    }

    /* Mobile Location Filter Pills */
    .acrobat-mobile-filters {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 2px 10px;
        margin: 0 0 10px 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        width: 100%;
        box-sizing: border-box;
        flex-shrink: 0;
        min-height: 48px;
    }

    .acrobat-mobile-filters::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .acrobat-mobile-filter-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 32px;
        min-height: 32px;
        padding: 0 12px;
        border-radius: 16px;
        background: rgba(255, 255, 255, .07);
        border: 1px solid rgba(255, 255, 255, .1);
        color: var(--text-secondary);
        font: inherit;
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        transition: all .16s ease;
        flex-shrink: 0;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
    }

    .acrobat-mobile-filter-btn:hover {
        background: rgba(255, 255, 255, .13);
        color: var(--text-primary);
    }

    .acrobat-mobile-filter-btn.selected {
        background: #eb1000;
        border-color: #eb1000;
        color: #ffffff;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(235, 16, 0, .35);
    }

    .acrobat-mobile-filter-btn small {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background: rgba(255, 255, 255, .15);
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        box-sizing: border-box;
    }

    .acrobat-mobile-filter-btn.selected small {
        background: rgba(0, 0, 0, .25);
        color: #ffffff;
    }

    body[data-theme="light"] .acrobat-mobile-filters {
        border-bottom-color: rgba(0, 0, 0, .08);
    }

    body[data-theme="light"] .acrobat-mobile-filter-btn {
        background: rgba(0, 0, 0, .05);
        border-color: rgba(0, 0, 0, .08);
        color: #4b5563;
    }

    body[data-theme="light"] .acrobat-mobile-filter-btn.selected {
        background: #eb1000;
        border-color: #eb1000;
        color: #ffffff;
    }

    body[data-theme="light"] .acrobat-mobile-filter-btn small {
        background: rgba(0, 0, 0, .08);
        color: #374151;
    }

    body[data-theme="light"] .acrobat-mobile-filter-btn.selected small {
        background: rgba(0, 0, 0, .2);
        color: #ffffff;
    }

    /* Declutter Acrobat List View */
    .acrobat-table-head {
        display: none !important;
    }

    .acrobat-cell-loc,
    .acrobat-cell-date,
    .acrobat-cell-size {
        display: none !important;
    }

    .acrobat-row-desc {
        display: none !important;
    }

    .acrobat-row-meta-mobile {
        display: block !important;
        font-size: 11px;
        color: var(--text-muted);
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .acrobat-row {
        padding: 10px 8px;
        gap: 10px;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    body[data-theme="light"] .acrobat-row {
        border-bottom-color: rgba(0, 0, 0, .06);
    }

    .acrobat-cell-name {
        flex: 1 1 auto;
        min-width: 0;
        gap: 10px;
    }

    .acrobat-row-icon {
        width: 22px;
        height: 26px;
    }

    .acrobat-row-title {
        font-size: 13.5px;
        font-weight: 600;
    }

    .acrobat-cell-actions {
        width: auto !important;
        flex-shrink: 0;
        gap: 5px;
    }

    .acrobat-row-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        padding: 0 !important;
        border-radius: 8px;
        justify-content: center;
    }

    .acrobat-row-btn.primary span {
        display: none !important;
    }

    .acrobat-row-btn svg {
        width: 15px;
        height: 15px;
    }

    .acrobat-group-divider {
        padding: 12px 8px 6px;
        gap: 8px;
    }

    .acrobat-group-name {
        font-size: 12px;
    }

    .acrobat-group-path {
        font-size: 10px;
    }

    .acrobat-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Accessibility (Reduced Motion) --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Reduced motion toggle class */
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
}

/* Dock sizing preferences */
.dock {
    --dock-item-size: 48px;
    --dock-app-svg-size: 44px;
    --dock-link-svg-size: 30px;
    --dock-img-size: 38px;
    --dock-link-inset: 4px;
    --dock-item-radius: 12px;
    --dock-gap: 6px;
    --dock-pad: 7px 9px 9px;
    --dock-radius: 17px;
    --dock-sep-height: 35px;
    --dock-link-margin: 3px;
}

.dock.dock-size-small {
    --dock-item-size: 38px;
    --dock-app-svg-size: 34px;
    --dock-link-svg-size: 23px;
    --dock-img-size: 29px;
    --dock-link-inset: 3px;
    --dock-item-radius: 9.5px;
    --dock-gap: 5px;
    --dock-pad: 5px 8px 7px;
    --dock-radius: 14px;
    --dock-sep-height: 27px;
    --dock-link-margin: 2px;
}

.dock.dock-size-large {
    --dock-item-size: 58px;
    --dock-app-svg-size: 53px;
    --dock-link-svg-size: 36px;
    --dock-img-size: 45px;
    --dock-link-inset: 5px;
    --dock-item-radius: 14.5px;
    --dock-gap: 8px;
    --dock-pad: 8px 12px 10px;
    --dock-radius: 19px;
    --dock-sep-height: 42px;
    --dock-link-margin: 4px;
}

.dock.dock-no-magnify .dock-item {
    transform: none !important;
}

/* Desktop Settings icon */
.icon-settings {
    background: linear-gradient(145deg, #7c838d, #484e57 78%);
    color: #fff;
}

/* ==========================================================================
   System Settings App (macOS Sonoma System Preferences)
   ========================================================================== */
.desktop .window[data-window="settings"] {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.desktop .window[data-window="settings"].is-maximized {
    max-width: none;
    margin: 0;
}

.settings-content {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    background: var(--window-bg, #1e1e1e);
    color: var(--text-primary);
    overflow: hidden;
}

.settings-layout {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* Sidebar */
.settings-sidebar {
    display: flex;
    flex: 0 0 240px;
    flex-direction: column;
    min-width: 0;
    padding: 16px 12px 14px;
    border-right: 1px solid var(--border);
    background: rgba(128, 128, 128, .06);
    user-select: none;
    overflow-y: auto;
}

/* Profile card at top of settings sidebar */
.settings-profile-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    margin-bottom: 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
}

.settings-profile-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    border: 1.5px solid rgba(255, 255, 255, .2);
    flex-shrink: 0;
}

.settings-profile-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.settings-profile-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-profile-title {
    font-size: 10.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Settings Search */
.settings-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 0 4px;
}

.settings-search-wrap svg {
    position: absolute;
    left: 14px;
    width: 13px;
    height: 13px;
    color: var(--text-muted);
    pointer-events: none;
}

.settings-search-input {
    width: 100%;
    height: 30px;
    padding: 0 10px 0 30px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 7px;
    background: rgba(255, 255, 255, .05);
    color: var(--text-primary);
    font: inherit;
    font-size: 12px;
    transition: all .15s ease;
}

.settings-search-input:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* Navigation items */
.settings-nav-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 34px;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}

.settings-nav-item:hover {
    background: rgba(255, 255, 255, .06);
    color: var(--text-primary);
}

.settings-nav-item.active {
    background: var(--accent, #0a84ff);
    color: #ffffff;
}

.settings-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    flex-shrink: 0;
    color: #fff;
}

.settings-nav-icon svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.settings-nav-icon.is-appearance { background: linear-gradient(135deg, #0a84ff, #0050c8); }
.settings-nav-icon.is-wallpaper { background: linear-gradient(135deg, #30b0c7, #5856d6); }
.settings-nav-icon.is-dock { background: linear-gradient(135deg, #5e5ce6, #3634a3); }
.settings-nav-icon.is-sound { background: linear-gradient(135deg, #ff2d55, #c70030); }
.settings-nav-icon.is-about { background: linear-gradient(135deg, #8e8e93, #636366); }

/* Detail Panes Container */
.settings-detail {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 26px 36px 40px;
}

.settings-pane {
    display: none;
    flex-direction: column;
    animation: fadeIn .18s ease-out;
}

.settings-pane.active {
    display: flex;
}

.settings-pane-title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -.02em;
}

.settings-pane-desc {
    margin: 0 0 20px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.settings-group {
    margin-bottom: 22px;
}

.settings-group-label {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}

/* Card Container */
.settings-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.settings-row:last-child {
    border-bottom: 0;
}

.settings-row-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.settings-row-info strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.settings-row-info span {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Theme Cards (Light / Dark / Auto) */
.settings-theme-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 140px));
    gap: 14px;
    margin-bottom: 20px;
}

.settings-theme-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 8px 8px;
    background: rgba(255, 255, 255, .04);
    border: 2px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    cursor: pointer;
    transition: all .16s ease;
}

.settings-theme-card:hover {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .2);
}

.settings-theme-card.selected {
    border-color: var(--accent, #0a84ff);
    box-shadow: 0 0 0 3px var(--accent-glow, rgba(10, 132, 255, .25));
    background: rgba(255, 255, 255, .06);
}

.settings-preview-window {
    width: 100%;
    height: 64px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, .2);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

.preview-titlebar {
    height: 16px;
    display: flex;
    align-items: center;
    gap: 3.5px;
    padding: 0 6px;
}

.preview-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}
.dot-r { background: #ff5f56; }
.dot-y { background: #ffbd2e; }
.dot-g { background: #27c93f; }

.preview-body {
    flex: 1;
}

.settings-preview-window.is-light .preview-titlebar { background: #e8e8ed; }
.settings-preview-window.is-light .preview-body { background: #ffffff; }

.settings-preview-window.is-dark .preview-titlebar { background: #2c2c2e; }
.settings-preview-window.is-dark .preview-body { background: #1c1c1e; }

.settings-preview-window.is-auto {
    position: relative;
    background: #1c1c1e;
}
.preview-split-left {
    position: absolute;
    inset: 0 50% 0 0;
    background: #ffffff;
}
.preview-split-right {
    position: absolute;
    inset: 0 0 0 50%;
    background: #1c1c1e;
}
.settings-preview-window.is-auto .preview-titlebar {
    position: relative;
    z-index: 2;
    background: linear-gradient(to right, #e8e8ed 50%, #2c2c2e 50%);
}

.settings-theme-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Accent Color Picker */
.settings-accent-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.settings-accent-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--accent-swatch);
    cursor: pointer;
    padding: 0;
    transition: transform .14s ease, box-shadow .14s ease;
}

.settings-accent-dot svg {
    width: 12px;
    height: 12px;
    opacity: 0;
    transition: opacity .12s ease;
}

.settings-accent-dot:hover {
    transform: scale(1.12);
}

.settings-accent-dot.selected {
    box-shadow: 0 0 0 2px var(--bg-window, #1e1e1e), 0 0 0 4px var(--accent-swatch);
}

.settings-accent-dot.selected svg {
    opacity: 1;
}

/* Wallpaper Presets */
.settings-wallpaper-preview-hero {
    height: 110px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8px 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    border: 1px solid rgba(255, 255, 255, .15);
    transition: background .3s ease;
}

.preview-mini-menubar {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.preview-mini-dock {
    display: flex;
    justify-content: center;
}

.mini-dock-pill {
    width: 100px;
    height: 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .3);
    backdrop-filter: blur(8px);
}

.settings-wallpaper-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}

.settings-wallpaper-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    border-radius: 8px;
    border: 2px solid transparent;
    background: rgba(255, 255, 255, .03);
    cursor: pointer;
    text-align: left;
    transition: all .15s ease;
}

.settings-wallpaper-card:hover {
    background: rgba(255, 255, 255, .06);
}

.settings-wallpaper-card.selected {
    border-color: var(--accent, #0a84ff);
    box-shadow: 0 0 0 3px var(--accent-glow, rgba(10, 132, 255, .25));
}

.settings-wallpaper-thumb {
    height: 84px;
    border-radius: 6px;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
}

.settings-check-badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent, #0a84ff);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

.settings-wallpaper-card.selected .settings-check-badge {
    display: flex;
}

.settings-wallpaper-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 4px;
}

.settings-wallpaper-sub {
    font-size: 10.5px;
    color: var(--text-muted);
}

/* macOS Toggle Switch */
.settings-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.settings-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: rgba(128, 128, 128, .35);
    transition: background-color .2s ease;
    border-radius: 24px;
}

.settings-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
    transition: transform .2s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 50%;
}

.settings-toggle input:checked + .settings-toggle-slider {
    background-color: var(--accent, #0a84ff);
}

.settings-toggle input:checked + .settings-toggle-slider:before {
    transform: translateX(20px);
}

/* Segmented Control */
.settings-segmented-control {
    display: flex;
    background: rgba(0, 0, 0, .2);
    border-radius: 7px;
    padding: 2px;
    gap: 2px;
    border: 1px solid rgba(255, 255, 255, .08);
}

.settings-segment-btn {
    padding: 4px 12px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .14s ease;
}

.settings-segment-btn:hover {
    color: var(--text-primary);
}

.settings-segment-btn.selected {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

/* Buttons */
.settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 6px;
    background: rgba(255, 255, 255, .06);
    color: var(--text-primary);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .14s ease;
}

.settings-btn:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .25);
}

.settings-btn.primary {
    background: var(--accent, #0a84ff);
    color: #ffffff;
    border-color: var(--accent, #0a84ff);
}

.settings-btn.primary:hover {
    filter: brightness(1.1);
}

/* About Pane */
.settings-about-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 0 24px;
}

.settings-about-badge-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0a84ff, #8857ff);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 8px 24px rgba(10, 132, 255, .35);
    margin-bottom: 12px;
}

.settings-about-badge-icon svg {
    width: 38px;
    height: 38px;
}

.settings-about-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.settings-about-version {
    font-size: 12px;
    color: var(--text-muted);
    margin: 2px 0 6px;
}

.settings-about-device {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.settings-specs-table {
    display: flex;
    flex-direction: column;
}

.settings-spec-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: 12.5px;
}

.settings-spec-row:last-child {
    border-bottom: 0;
}

.spec-label {
    color: var(--text-muted);
    font-weight: 500;
    width: 140px;
    flex-shrink: 0;
}

.spec-value {
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
}

.settings-about-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

/* ==========================================================================
   System Settings — Light Mode Overrides
   ========================================================================== */
body[data-theme="light"] .settings-content {
    background: #ffffff;
}

body[data-theme="light"] .settings-sidebar {
    background: #f4f5f8;
    border-right-color: rgba(0, 0, 0, .08);
}

body[data-theme="light"] .settings-profile-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, .08);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}

body[data-theme="light"] .settings-profile-avatar {
    border-color: rgba(0, 0, 0, .1);
}

body[data-theme="light"] .settings-search-input {
    background: #ffffff;
    border-color: rgba(0, 0, 0, .14);
    color: #1d1d1f;
}

body[data-theme="light"] .settings-nav-item {
    color: #3a3a3c;
}

body[data-theme="light"] .settings-nav-item:hover {
    background: rgba(0, 0, 0, .05);
    color: #1d1d1f;
}

body[data-theme="light"] .settings-nav-item.active {
    background: var(--accent, #007aff);
    color: #ffffff;
}

body[data-theme="light"] .settings-detail {
    background: #ffffff;
}

body[data-theme="light"] .settings-card {
    background: #f8f9fb;
    border-color: rgba(0, 0, 0, .08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
}

body[data-theme="light"] .settings-row {
    border-bottom-color: rgba(0, 0, 0, .06);
}

body[data-theme="light"] .settings-theme-card {
    background: #f8f9fb;
    border-color: rgba(0, 0, 0, .1);
}

body[data-theme="light"] .settings-theme-card:hover {
    background: #f0f2f5;
    border-color: rgba(0, 0, 0, .2);
}

body[data-theme="light"] .settings-theme-card.selected {
    border-color: var(--accent, #007aff);
    background: #f0f4ff;
}

body[data-theme="light"] .settings-wallpaper-card {
    background: #f8f9fb;
}

body[data-theme="light"] .settings-wallpaper-card:hover {
    background: #f0f2f5;
}

body[data-theme="light"] .settings-segmented-control {
    background: rgba(0, 0, 0, .06);
    border-color: rgba(0, 0, 0, .08);
}

body[data-theme="light"] .settings-segment-btn {
    color: #6e6e73;
}

body[data-theme="light"] .settings-segment-btn:hover {
    color: #1d1d1f;
}

body[data-theme="light"] .settings-segment-btn.selected {
    background: #ffffff;
    color: #1d1d1f;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

body[data-theme="light"] .settings-btn {
    background: rgba(0, 0, 0, .04);
    border-color: rgba(0, 0, 0, .14);
    color: #1d1d1f;
}

body[data-theme="light"] .settings-btn:hover {
    background: rgba(0, 0, 0, .08);
    border-color: rgba(0, 0, 0, .24);
}

body[data-theme="light"] .settings-btn.primary {
    background: var(--accent, #007aff);
    color: #ffffff;
    border-color: var(--accent, #007aff);
}

body[data-theme="light"] .settings-spec-row {
    border-bottom-color: rgba(0, 0, 0, .06);
}

/* ==========================================================================
   System Settings — Mobile Responsiveness (max-width: 820px)
   ========================================================================== */
@media (max-width: 820px) {
    .desktop .window[data-window="settings"] {
        max-width: 100%;
        margin: 0;
        inset: calc(48px + env(safe-area-inset-top)) 0 0;
    }

    .settings-layout {
        flex-direction: column;
    }

    .settings-sidebar {
        flex: 0 0 auto;
        border-right: 0;
        border-bottom: 1px solid var(--border);
        padding: 10px 12px 6px;
    }

    .settings-profile-card {
        display: none;
    }

    .settings-search-wrap {
        display: none;
    }

    .settings-nav-list {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        padding-bottom: 4px;
        scrollbar-width: none !important;
    }

    .settings-nav-list::-webkit-scrollbar {
        display: none !important;
    }

    .settings-nav-item {
        flex: 0 0 auto;
        width: auto;
        min-height: 32px;
        padding: 5px 12px;
        border-radius: 16px;
        background: rgba(128, 128, 128, .1);
    }

    .settings-nav-item.active {
        background: var(--accent, #0a84ff);
        color: #fff;
    }

    .settings-nav-icon {
        width: 18px;
        height: 18px;
    }

    .settings-nav-icon svg {
        width: 12px;
        height: 12px;
    }

    .settings-detail {
        padding: 16px 14px 28px;
    }

    .settings-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .settings-row:has(.settings-toggle) {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .settings-row-info {
        width: 100%;
    }

    .settings-segmented-control {
        width: 100%;
    }

    .settings-segment-btn {
        flex: 1;
        text-align: center;
    }

    .settings-accent-picker {
        width: 100%;
        justify-content: flex-start;
        gap: 10px;
    }

    .settings-theme-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .settings-wallpaper-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .settings-spec-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .spec-value {
        text-align: left;
    }

    .settings-about-actions {
        flex-direction: column;
        width: 100%;
    }

    .settings-about-actions .settings-btn {
        width: 100%;
    }
}