*, ::before, ::after { box-sizing: border-box; margin: 0px; padding: 0px; }
:root { --sidebar-width: 230px; --titlebar-height: 52px; --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
[data-theme="dark"] { --desktop-bg: url(/dev/images/wallpaper/10-10-Yosemite-dark.webp?v=20260710b) center/cover no-repeat; --orb1: rgba(80, 20, 180, 0.4); --orb2: rgba(20, 60, 200, 0.3); --orb3: rgba(200, 40, 80, 0.18); --orb4: rgba(0, 140, 120, 0.14); --window-bg: rgba(18, 18, 28, 0.82); --titlebar-bg: rgba(28, 28, 40, 0.72); --sidebar-bg: rgba(20, 20, 32, 0.6); --glass-card: rgba(255,255,255,0.06); --glass-card-hover: rgba(255,255,255,0.10); --glass-border: rgba(255,255,255,0.11); --glass-inset: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.15); --menubar-bg: rgba(0,0,0,0.55); --menubar-border: rgba(255,255,255,0.06); --text-primary: rgba(255,255,255,0.93); --text-secondary: rgba(255,255,255,0.52); --text-tertiary: rgba(255,255,255,0.28); --sidebar-divider: rgba(255,255,255,0.07); --sidebar-active: rgba(10,132,255,0.22); --sidebar-hover: rgba(255,255,255,0.08); --statusbar-bg: rgba(14,14,22,0.7); --input-bg: rgba(255,255,255,0.07); --input-border: rgba(255,255,255,0.1); --scrollbar-thumb: rgba(255,255,255,0.11); --shadow-color: rgba(0,0,0,0.65); --accent: #0A84FF; --accent-glow: rgba(10,132,255,0.28); --tag-bg: rgba(255,255,255,0.06); }
[data-theme="light"] { --desktop-bg: url(/dev/images/wallpaper/10-10-Yosemite-light.webp?v=20260710b) center/cover no-repeat; --orb1: rgba(100,60,200,0.2); --orb2: rgba(40,100,240,0.18); --orb3: rgba(240,80,120,0.14); --orb4: rgba(0,160,140,0.12); --window-bg: rgba(235,238,248,0.85); --titlebar-bg: rgba(225,228,242,0.78); --sidebar-bg: rgba(215,218,236,0.68); --glass-card: rgba(255,255,255,0.58); --glass-card-hover: rgba(255,255,255,0.75); --glass-border: rgba(0,0,0,0.07); --glass-inset: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(0,0,0,0.04); --menubar-bg: rgba(235,238,250,0.78); --menubar-border: rgba(0,0,0,0.07); --text-primary: rgba(0,0,0,0.87); --text-secondary: rgba(0,0,0,0.48); --text-tertiary: rgba(0,0,0,0.28); --sidebar-divider: rgba(0,0,0,0.06); --sidebar-active: rgba(10,132,255,0.16); --sidebar-hover: rgba(0,0,0,0.05); --statusbar-bg: rgba(215,218,234,0.72); --input-bg: rgba(255,255,255,0.65); --input-border: rgba(0,0,0,0.09); --scrollbar-thumb: rgba(0,0,0,0.13); --shadow-color: rgba(0,0,0,0.18); --accent: #0A84FF; --accent-glow: rgba(10,132,255,0.18); --tag-bg: rgba(0,0,0,0.05); }
html, body { height: 100dvh; overflow: hidden; font-family: -apple-system, "Helvetica Neue", sans-serif; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; touch-action: manipulation; }
.desktop, .finder-window, .titlebar, .sidebar, .statusbar, .glass-card { transition: background-color 0.8s, color 0.6s, border-color 0.8s, box-shadow 0.6s; }
.orb, .finder-window, .work-thumb-gif, .play-badge, .dock-item, .spotlight-container, button, input, textarea { transition: none; }
.finder-window { transition: background var(--transition), box-shadow var(--transition); }
.dock-item { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
button { transition: background 0.15s, opacity 0.2s, transform 0.15s, color 0.15s, border-color 0.2s; }
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}
.desktop { position: fixed; inset: 0px; background: var(--desktop-bg); z-index: 0; }
.desktop-fade { position: fixed; inset: 0px; z-index: 0; opacity: 0; pointer-events: none; }
.orb { position: fixed; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; animation: 14s ease-in-out 0s infinite normal none running floatOrb; opacity: 0; transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1); }
body.wallpaper-gradient .orb { opacity: 1; }
.orb-1 { width: 520px; height: 520px; background: var(--orb1); top: -130px; left: -110px; animation-delay: 0s; }
.orb-2 { width: 440px; height: 440px; background: var(--orb2); top: 20%; right: -110px; animation-delay: -5s; }
.orb-3 { width: 380px; height: 380px; background: var(--orb3); bottom: -70px; left: 25%; animation-delay: -9s; }
.orb-4 { width: 320px; height: 320px; background: var(--orb4); bottom: 12%; right: 15%; animation-delay: -3s; }
@keyframes spin { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes spellPulse { 
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: rgba(168, 85, 247, 0.6) 0px 0px 0px 0px; }
  50% { opacity: 0.7; transform: scale(1.06); box-shadow: rgba(168, 85, 247, 0) 0px 0px 0px 8px; }
}
@keyframes spellSpark { 
  0% { opacity: 1; transform: scale(0.5) rotate(0deg); }
  60% { opacity: 1; transform: scale(1.1) rotate(180deg); }
  100% { opacity: 0; transform: scale(0) rotate(360deg); }
}
@keyframes floatOrb { 
  0%, 100% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(28px, -38px) scale(1.07); }
  66% { transform: translate(-20px, 24px) scale(0.93); }
}
.desktop-icons { position: fixed; top: 48px; right: 20px; display: flex; flex-direction: column; gap: 20px; z-index: 1; }
.desktop-icon { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: default; user-select: none; width: 72px; }
.desktop-icon-img { width: 72px; height: 56px; display: flex; align-items: flex-end; justify-content: center; }
.desktop-icon-img img { max-width: 56px; max-height: 52px; width: auto; height: auto; object-fit: contain; display: block; margin: 0px auto; }
.desktop-icon-img img.folder-icon { width: 60px; height: 50px; max-width: 60px; max-height: 50px; object-fit: contain; }
.desktop-icon-label { font-size: 11px; color: rgb(255, 255, 255); text-align: center; text-shadow: rgba(0, 0, 0, 0.9) 0px 1px 3px, rgba(0, 0, 0, 0.7) 0px 0px 8px, rgba(0, 0, 0, 0.8) 0px 2px 6px; width: 72px; overflow-wrap: break-word; line-height: 1.3; display: block; }
.menubar { position: fixed; top: 0px; left: 0px; right: 0px; height: 28px; background: var(--menubar-bg); backdrop-filter: blur(30px) saturate(1.8); border-bottom: 1px solid var(--menubar-border); display: flex; align-items: center; justify-content: space-between; padding: 0px 16px; z-index: 1000; font-size: 13px; transition: background var(--transition), border-color var(--transition); }
.menubar-left { display: flex; align-items: center; gap: 16px; }
.menubar-apple { font-size: 15px; }
.menubar-app { font-weight: 600; color: var(--text-primary); }
.menubar-item { color: var(--text-primary); opacity: 0.7; cursor: default; }
.view-menu-trigger { cursor: pointer; position: relative; }
.view-menu-trigger:hover { opacity: 1; }
.file-menu-trigger { cursor: pointer; position: relative; }
.file-menu-trigger:hover { opacity: 1; }
.view-dropdown { position: absolute; top: 28px; left: 0px; background: var(--menubar-bg); backdrop-filter: blur(30px) saturate(1.8); border: 1px solid var(--menubar-border); border-radius: 6px; min-width: 180px; box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 24px; opacity: 0; pointer-events: none; transform: translateY(-5px); transition: opacity 0.2s, transform 0.2s; z-index: 10000; padding: 4px 0px; }
.view-dropdown.open { opacity: 1; pointer-events: all; transform: translateY(0px); }
.view-menu-item { padding: 6px 16px; font-size: 13px; color: var(--text-primary); cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background 0.15s; user-select: none; }
.view-menu-item:hover { background: rgba(10, 132, 255, 0.15); }
.view-menu-item-icon { font-size: 14px; width: 16px; }
.view-menu-divider { height: 1px; background: var(--menubar-border); margin: 4px 0px; }
.menubar-right { display: flex; align-items: center; gap: 12px; color: var(--text-primary); font-size: 12px; }
.menubar-time { font-weight: 500; }
.theme-toggle { display: flex; align-items: center; background: var(--input-bg); border: 1px solid var(--glass-border); border-radius: 20px; padding: 2px; cursor: pointer; }
.theme-btn { width: 26px; height: 20px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: none; transition: background 0.2s; color: var(--text-secondary); }
.theme-btn.active { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.finder-window { position: fixed; top: 48px; left: 50%; transform: translateX(-50%); width: calc(-80px + 100vw); max-width: 1360px; height: calc(-68px + 100vh); border-radius: 14px; overflow: hidden; z-index: 10; box-shadow: 0 30px 80px var(--shadow-color), 0 0 0 1px rgba(255,255,255,0.1); display: flex; flex-direction: column; background: var(--window-bg); backdrop-filter: blur(40px) saturate(2.2); animation: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0s 1 normal forwards running windowOpen; transition: background var(--transition); will-change: transform; }
.finder-window.is-dragging,.finder-window.is-resizing { animation: none !important; transition: none !important; }
.finder-window.is-dragging { will-change: transform; }
.finder-window > .titlebar { cursor: grab; user-select: none; touch-action: none; }
.finder-window.is-dragging > .titlebar { cursor: grabbing; }
.main-window-interacting,.main-window-interacting * { user-select: none !important; }
.finder-resize-handle { position: absolute; z-index: 1105; touch-action: none; background: transparent; }
.finder-window:not([data-maximized="true"]) > .finder-body { padding-right: 6px; }
.finder-resize-n { top: 0; left: 16px; right: 16px; height: 7px; cursor: ns-resize; }
.finder-resize-s { bottom: 0; left: 16px; right: 16px; height: 8px; cursor: ns-resize; }
.finder-resize-e { top: 16px; right: 0; bottom: 16px; width: 6px; cursor: ew-resize; }
.finder-resize-w { top: 16px; left: 0; bottom: 16px; width: 6px; cursor: ew-resize; }
.finder-resize-ne,.finder-resize-nw,.finder-resize-se,.finder-resize-sw { width: 18px; height: 18px; }
.finder-resize-ne { top: 0; right: 0; cursor: nesw-resize; }
.finder-resize-nw { top: 0; left: 0; cursor: nwse-resize; }
.finder-resize-se { right: 0; bottom: 0; cursor: nwse-resize; }
.finder-resize-sw { left: 0; bottom: 0; cursor: nesw-resize; }
.finder-window[data-maximized="true"] .finder-resize-handle { display: none; }
.finder-window:not([data-maximized="true"]) .finder-resize-se::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 7px; height: 7px; border-right: 1px solid rgba(255,255,255,.24); border-bottom: 1px solid rgba(255,255,255,.24); border-radius: 0 0 2px; opacity: .45; }
@keyframes windowOpen { 
  0% { transform: translateX(-50%) scale(0.92); opacity: 0; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}
.titlebar { height: var(--titlebar-height); background: var(--titlebar-bg); backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; padding: 0px 16px; gap: 12px; flex-shrink: 0; position: relative; z-index: 1000; transition: background var(--transition), border-color var(--transition); }
.traffic-lights { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.tl { width: 13px; height: 13px; border-radius: 50%; cursor: pointer; transition: filter 0.15s; }
.tl:hover { filter: brightness(1.2); }
.tl-close { background: rgb(255, 95, 87); box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 0px 1px; }
.tl-min { background: rgb(254, 188, 46); box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 0px 1px; }
.tl-max { background: rgb(40, 200, 64); box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 0px 1px; }
.titlebar-nav { display: flex; gap: 4px; }
.titlebar-nav button { background: var(--input-bg); border: 1px solid var(--glass-border); color: var(--text-secondary); width: 28px; height: 28px; border-radius: 6px; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, opacity 0.2s; }
.titlebar-nav button:hover { background: var(--glass-card-hover); }
.titlebar-nav button:disabled { opacity: 0.28; cursor: default; }
.titlebar-path { display: flex; align-items: center; gap: 4px; flex: 1 1 0%; justify-content: center; }
.path-segment { font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; }
.path-segment.active { color: var(--text-primary); font-weight: 500; }
.path-sep { color: var(--text-tertiary); font-size: 10px; }
.titlebar-views { display: flex; background: var(--input-bg); border: 1px solid var(--glass-border); border-radius: 7px; overflow: hidden; }
.view-btn { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: var(--text-secondary); width: 30px; height: 26px; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; }
.view-btn.active { background: var(--glass-card-hover); color: var(--text-primary); }
.view-btn:hover:not(.active) { background: var(--sidebar-hover); }
.titlebar-search { display: flex; align-items: center; gap: 6px; background: var(--input-bg); border: 1px solid var(--glass-border); border-radius: 7px; padding: 4px 10px; width: 180px; transition: background 0.2s, border-color 0.2s; }
.titlebar-search:focus-within { border-color: rgba(10, 132, 255, 0.5); }
.titlebar-search input { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; outline: none; color: var(--text-primary); font-size: 12px; font-family: inherit; width: 100%; }
.titlebar-search input::placeholder { color: var(--text-tertiary); }
.titlebar-search { position: relative; z-index: 10002; }
.search-results-dropdown { position: absolute; top: 100%; right: 0px; margin-top: 8px; width: 320px; max-height: 400px; background: var(--window-bg); backdrop-filter: blur(40px) saturate(2); border: 1px solid var(--glass-border); border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.3) 0px 12px 40px; overflow-y: auto; opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity 0.2s, transform 0.2s; z-index: 10003; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
.search-results-dropdown.open { opacity: 1; pointer-events: all; transform: translateY(0px); }
.search-results-dropdown::-webkit-scrollbar { width: 4px; }
.search-results-dropdown::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; }
.search-result-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; transition: background 0.15s; border-bottom: 1px solid var(--sidebar-divider); }
.search-result-item:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.search-result-item:hover { background: var(--sidebar-hover); }
.search-result-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--glass-card); border-radius: 8px; flex-shrink: 0; }
.search-result-content { flex: 1 1 0%; min-width: 0px; }
.search-result-title { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-subtitle { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.search-empty { padding: 30px 20px; text-align: center; font-size: 13px; color: var(--text-tertiary); }
.finder-body { display: flex; flex: 1 1 0%; min-height: 0px; overflow: hidden; }
.sidebar { width: var(--sidebar-width); flex-shrink: 0; background: var(--sidebar-bg); border-right: 1px solid var(--glass-border); overflow: hidden auto; padding: 12px 0px 20px; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; transition: background var(--transition), border-color var(--transition); }
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; }
.sidebar-section { margin-bottom: 4px; }
.sidebar-heading { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); padding: 8px 16px 4px; }
.sidebar-item { display: flex; align-items: center; gap: 9px; padding: 6px 16px; cursor: pointer; border-radius: 8px; margin: 1px 6px; transition: background 0.15s, color 0.15s; color: var(--text-secondary); font-size: 13px; position: relative; user-select: none; }
.sidebar-item:hover { background: var(--sidebar-hover); color: var(--text-primary); }
.sidebar-item.active { background: var(--sidebar-active); color: rgb(10, 132, 255); font-weight: 500; }
.sidebar-item.active::before { content: ""; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); width: 3px; height: 16px; background: rgb(10, 132, 255); border-radius: 0px 2px 2px 0px; margin-left: 2px; }
.sidebar-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.sidebar-svg { width: 20px; height: 20px; flex-shrink: 0; position: relative; }
.sidebar-svg img { width: 20px; height: 20px; object-fit: contain; position: absolute; top: 0px; left: 0px; transition: opacity 0.15s; }
.sidebar-svg .svg-normal { opacity: 1; }
.sidebar-svg .svg-selected { opacity: 0; }
.sidebar-item.active .sidebar-svg .svg-normal { opacity: 0; }
.sidebar-item.active .sidebar-svg .svg-selected { opacity: 1; }
[data-theme="dark"] .sidebar-svg .svg-normal { filter: invert(1) opacity(0.55); }
[data-theme="dark"] .sidebar-item:hover .sidebar-svg .svg-normal { filter: invert(1) opacity(1); }
[data-theme="dark"] .sidebar-item.active .sidebar-svg .svg-selected { filter: invert(39%) sepia(97%) saturate(1200%) hue-rotate(196deg) brightness(105%) contrast(100%); }
[data-theme="light"] .sidebar-svg .svg-normal { filter: opacity(0.45); }
[data-theme="light"] .sidebar-item:hover .sidebar-svg .svg-normal { filter: opacity(0.85); }
[data-theme="light"] .sidebar-item.active .sidebar-svg .svg-selected { filter: invert(39%) sepia(97%) saturate(1200%) hue-rotate(196deg) brightness(105%) contrast(100%); }
.sidebar-badge { margin-left: auto; background: var(--accent); color: white; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center; }
.sidebar-divider { height: 1px; background: var(--sidebar-divider); margin: 8px 16px; }
.content { flex: 1 1 0%; min-height: 0px; overflow: hidden auto; padding: 0px; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
.content::-webkit-scrollbar { width: 6px; }
.content::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
.panel { display: none; animation: 0.25s ease 0s 1 normal none running panelIn; padding: 24px 24px 120px; box-sizing: border-box; width: 100%; }
.panel.active { display: block; height: 100%; overflow: hidden auto; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
.panel.active::-webkit-scrollbar { width: 6px; }
.panel.active::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
#panel-podcast.active { overflow: hidden !important; height: 100% !important; }
.panel-flex { flex-direction: column; padding: 0px; overflow: hidden; }
.panel-flex.active { display: flex; }
@keyframes panelIn { 
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@keyframes shake { 
  0%, 100% { transform: translateX(0px); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-10px); }
}
.glass-card { background: var(--glass-card); border: 1px solid var(--glass-border); border-radius: 14px; backdrop-filter: blur(20px) saturate(1.5); box-shadow: 0 4px 20px rgba(0,0,0,0.15), var(--glass-inset); transition: transform 0.2s ease, box-shadow 0.2s ease, background var(--transition); overflow: hidden; position: relative; isolation: isolate; --mouse-x: 50%; --mouse-y: 50%; }
.glass-card::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(
        250px circle at var(--mouse-x) var(--mouse-y),
        rgba(59, 130, 246, 0.15),
        rgba(96, 165, 250, 0.1) 30%,
        transparent 60%
    ); opacity: 0; transition: opacity 0.3s; z-index: -2; border-radius: 14px; pointer-events: none; }
[data-theme="light"] .glass-card::before { display: none; }
.glass-card::after { content: ""; position: absolute; inset: -1px; background: radial-gradient(
        200px circle at var(--mouse-x) var(--mouse-y),
        rgba(59, 130, 246, 0.9),
        rgba(96, 165, 250, 0.9) 30%,
        rgba(147, 197, 253, 0.8) 50%,
        transparent 70%
    ); border-radius: 14px; opacity: 0; transition: opacity 0.3s; z-index: -1; mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box xor, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px); padding: 1px; pointer-events: none; }
[data-theme="light"] .glass-card::after { background: radial-gradient(
        250px circle at var(--mouse-x) var(--mouse-y),
        rgb(6, 182, 212),
        rgb(59, 130, 246) 30%,
        rgb(99, 102, 241) 50%,
        transparent 70%
    ); padding: 1px; }
.glass-card:hover { transform: translateY(-2px); background: var(--glass-card-hover); box-shadow: 0 8px 30px rgba(0,0,0,0.2), var(--glass-inset); }
.glass-card:hover::before, .glass-card:hover::after { opacity: 1; }
.glass-card.no-spotlight::before, .glass-card.no-spotlight::after { display: none !important; }
.panel-header { display: flex; align-items: center; gap: 12px; margin: 0px 0px 24px; }
.panel-icon-large { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 28px; background: var(--glass-card); border: 1px solid var(--glass-border); backdrop-filter: blur(10px); box-shadow: var(--glass-inset); flex-shrink: 0; }
.panel-title { font-size: 26px; font-weight: 700; color: var(--text-primary); }
.panel-subtitle { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.section-label { font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(255, 255, 255); margin-bottom: 16px; margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 12px; }
[data-theme="light"] .section-label { color: rgb(0, 0, 0); }
.section-label::before, .section-label::after { content: ""; flex: 1 1 0%; height: 1px; background: rgba(255, 255, 255, 0.3); }
[data-theme="light"] .section-label::before, [data-theme="light"] .section-label::after { background: rgba(0, 0, 0, 0.2); }
.tool-category { grid-column: 1 / -1; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin-top: 20px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
[data-theme="light"] .tool-category { color: rgba(0, 0, 0, 0.6); }
.tool-category::after { content: ""; flex: 1 1 0%; height: 1px; background: linear-gradient(to right, rgba(255, 255, 255, 0.2), transparent); }
[data-theme="light"] .tool-category::after { background: linear-gradient(to right, rgba(0, 0, 0, 0.15), transparent); }
.tool-category:first-of-type { margin-top: 8px; }
.category-list { grid-column: 1 / -1; font-size: 13px; line-height: 1.9; color: var(--text-secondary); margin-bottom: 4px; padding-left: 0px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 20px; }
.category-list-item { display: flex; align-items: flex-start; gap: 8px; }
.category-list-item::before { content: "•"; color: var(--accent); font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.home-hero { padding: 26px 30px 30px; margin-bottom: 20px; position: relative; overflow: hidden; }
.home-hero::before { content: ""; position: absolute; inset: 0px; background: linear-gradient(135deg, rgba(10, 132, 255, 0.07) 0%, rgba(100, 30, 200, 0.07) 100%); pointer-events: none; }
.home-hero-eyebrow { font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; font-weight: 600; }
.home-hero-name { font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 800; color: var(--text-primary); line-height: 1.05; margin-bottom: 6px; }
.home-hero-role { font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 600; color: var(--text-secondary); margin-bottom: 14px; letter-spacing: 0.04em; }
.home-hero-name span { background: linear-gradient(90deg, rgb(10, 132, 255), rgb(191, 90, 242), rgb(255, 45, 85)) text; -webkit-text-fill-color: transparent; }
.home-hero-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.65; max-width: 580px; }
.home-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tag { font-size: 12px; padding: 5px 12px; border-radius: 20px; border: 1px solid var(--glass-border); background: var(--tag-bg); color: var(--text-secondary); }
.tag.blue { border-color: rgba(10, 132, 255, 0.35); color: rgb(96, 170, 255); background: rgba(10, 132, 255, 0.08); }
.tag.purple { border-color: rgba(191, 90, 242, 0.35); color: rgb(208, 112, 255); background: rgba(191, 90, 242, 0.08); }
.tag.green { border-color: rgba(48, 209, 88, 0.35); color: rgb(80, 208, 144); background: rgba(48, 209, 88, 0.08); }
.tag.red { border-color: rgba(255, 45, 85, 0.35); color: rgb(255, 96, 128); background: rgba(255, 45, 85, 0.08); }
.tag.yellow { border-color: rgba(255, 214, 10, 0.35); color: rgb(255, 214, 10); background: rgba(255, 214, 10, 0.08); }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.stat-card { padding: 16px 18px; }
.stat-num { font-size: 1.9rem; font-weight: 700; color: var(--text-primary); line-height: 1; margin-bottom: 4px; transition: 0.3s; }
.stat-label { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.stat-card:hover .stat-num { background: linear-gradient(90deg, rgb(10, 132, 255), rgb(191, 90, 242), rgb(255, 45, 85)) text; -webkit-text-fill-color: transparent; }
.work-item { cursor: pointer; position: relative; isolation: isolate; overflow: visible; --mouse-x: 50%; --mouse-y: 50%; }
.work-item::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(
        220px circle at var(--mouse-x) var(--mouse-y),
        rgba(59, 130, 246, 0.12),
        rgba(96, 165, 250, 0.08) 30%,
        transparent 50%
    ); opacity: 0; transition: opacity 0.3s; z-index: -2; }
[data-theme="light"] .work-item::before { display: none; }
.work-item::after { content: ""; position: absolute; inset: -1.5px; background: radial-gradient(
        200px circle at var(--mouse-x) var(--mouse-y),
        rgba(59, 130, 246, 0.9),
        rgba(96, 165, 250, 0.9) 30%,
        rgba(147, 197, 253, 0.8) 50%,
        transparent 70%
    ); border-radius: inherit; opacity: 0; transition: opacity 0.3s; z-index: -1; mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px); padding: 1.5px; }
.view-list .work-item::after { inset: -1px; padding: 1px; }
[data-theme="light"] .work-item::after { inset: -1.5px; background: radial-gradient(
        500px circle at var(--mouse-x) var(--mouse-y),
        rgba(6, 182, 212, 1),
        rgba(59, 130, 246, 1) 25%,
        rgba(99, 102, 241, 0.9) 50%,
        transparent 65%
    ); padding: 1.5px; }
.work-item:hover::before, .work-item:hover::after { opacity: 1; }
.glass-card.work-item { background: var(--glass-card); transition: background 0.25s; }
.work-item:hover.glass-card { background: var(--glass-card-hover); }
.show-more-btn { position: relative; isolation: isolate; overflow: visible; --mouse-x: 50%; --mouse-y: 50%; }
.show-more-btn::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(
        220px circle at var(--mouse-x) var(--mouse-y),
        rgba(59, 130, 246, 0.12),
        rgba(96, 165, 250, 0.08) 30%,
        transparent 50%
    ); opacity: 0; transition: opacity 0.3s; z-index: -2; border-radius: 8px; }
[data-theme="light"] .show-more-btn::before { display: none; }
.show-more-btn::after { content: ""; position: absolute; inset: -1.5px; background: radial-gradient(
        200px circle at var(--mouse-x) var(--mouse-y),
        rgba(59, 130, 246, 0.9),
        rgba(96, 165, 250, 0.9) 30%,
        rgba(147, 197, 253, 0.8) 50%,
        transparent 70%
    ); border-radius: 8px; opacity: 0; transition: opacity 0.3s; z-index: -1; mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box xor, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px); padding: 1.5px; }
[data-theme="light"] .show-more-btn::after { background: radial-gradient(
        300px circle at var(--mouse-x) var(--mouse-y),
        rgb(6, 182, 212),
        rgb(59, 130, 246) 30%,
        rgb(99, 102, 241) 50%,
        transparent 70%
    ); padding: 1.5px; }
.show-more-btn:hover::before, .show-more-btn:hover::after { opacity: 1; }
.show-more-btn:hover { background: var(--glass-card-hover); }
.work-thumb-wrap { position: relative; overflow: hidden; border-radius: 12px 12px 0px 0px; }
.work-thumb-bg { width: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.8rem; transition: transform 0.5s; }
.work-thumb-gif { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s; border-radius: 12px 12px 0px 0px; }
.work-item:hover .work-thumb-bg { transform: scale(1.06); }
.work-item:hover .work-thumb-gif { opacity: 1; }
.work-thumb-overlay { position: absolute; inset: 0px; background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, transparent 55%); opacity: 0; transition: opacity 0.3s; display: flex; align-items: center; justify-content: center; }
.work-item:hover .work-thumb-overlay { opacity: 1; }
.play-badge { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 22px; padding-left: 3px; transition: transform 0.2s; color: white; filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 2px 4px); }
.work-item:hover .play-badge { transform: scale(1.15); }
.view-gallery .play-badge { font-size: 32px; }
.work-inner-row { display: flex; flex-direction: column; height: 100%; align-items: stretch; }
.work-thumb-wrap { flex-shrink: 0; }
.work-info { padding: 12px 14px; flex-shrink: 0; }
.work-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.work-meta { font-size: 11px; color: var(--text-secondary); display: flex; align-items: center; justify-content: space-between; }
.work-client { font-size: 10px; color: var(--text-tertiary); margin-top: 2px; }
.work-type { font-size: 10px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--glass-border); color: var(--text-tertiary); }
.work-meta-extra { display: none; font-size: 11px; color: var(--text-tertiary); gap: 20px; }
.wt-1 { background: linear-gradient(135deg, rgb(10, 15, 46), rgb(20, 28, 74)); height: 100%; }
.wt-2 { background: linear-gradient(135deg, rgb(26, 8, 0), rgb(46, 18, 0)); height: 100%; }
.wt-3 { background: linear-gradient(135deg, rgb(0, 26, 40), rgb(0, 48, 64)); height: 100%; }
.wt-4 { background: linear-gradient(135deg, rgb(32, 10, 48), rgb(26, 0, 64)); height: 100%; }
.wt-5 { background: linear-gradient(135deg, rgb(10, 26, 16), rgb(0, 40, 16)); height: 100%; }
.wt-6 { background: linear-gradient(135deg, rgb(26, 16, 0), rgb(42, 24, 0)); height: 100%; }
.work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: 14px; min-height: 300px; position: relative; padding: 4px; margin: -4px; }
.work-grid.loading { opacity: 1; pointer-events: none; min-height: 200px; position: relative; display: flex; align-items: center; justify-content: center; }
.work-grid.loaded { opacity: 1; transition: opacity 0.4s; }
.work-grid.loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0px 0px -16px; border-width: 2px; border-style: solid; border-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.08) rgba(255, 255, 255, 0.08); border-image: none; border-radius: 50%; animation: 0.7s linear 0s infinite normal none running spin; }
[data-theme="light"] .work-grid.loading::after { border-color: rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.08); }
html[data-theme="dark"] #calendarDayNumber,
html[data-theme="dark"] #calendarDay { color: #fff !important; }
html[data-theme="light"] #calendarDayNumber,
html[data-theme="light"] #calendarDay { color: #111 !important; }
.startup-guard-notice { width: min(100%, 540px); padding: 24px; color: var(--text-secondary); text-align: center; }
@keyframes spin { 
  100% { transform: rotate(360deg); }
}
.work-grid .work-thumb-wrap { aspect-ratio: 16 / 9; }
.work-grid .work-thumb-bg { height: 100%; }
.view-list .work-grid { display: flex; flex-direction: column; gap: 5px; }
.view-list .glass-card.work-item { border-radius: 10px; }
.view-list .glass-card.work-item:hover { transform: none; }
.view-list .work-thumb-wrap { width: 80px; height: 52px; flex-shrink: 0; aspect-ratio: unset; border-radius: 7px; overflow: hidden; }
.view-list .work-thumb-bg { height: 100%; }
.view-list .work-inner-row { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 9px 14px; }
.view-list .work-info { padding: 0px; flex: 1 1 0%; }
.view-list .work-thumb-overlay { display: none; }
.view-list .work-meta-extra { display: flex; }
.view-columns .work-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; justify-items: start; }
.view-columns .work-grid .work-thumb-wrap { aspect-ratio: 1 / 1; width: 100%; }
.view-columns .work-grid .work-thumb-bg { height: 100%; }
.view-columns .work-grid .work-info { padding: 8px 10px; text-align: left !important; }
.view-columns .work-grid .work-title { font-size: 11px; text-align: left !important; }
.view-columns .work-grid .work-meta { text-align: left !important; }
.view-columns .glass-card.work-item { width: 150px; justify-self: start; text-align: left !important; }
.view-columns .work-grid .work-inner-row { align-items: flex-start; }
.view-gallery .work-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.view-gallery .work-thumb-wrap { aspect-ratio: 16 / 9; }
.view-gallery .work-thumb-bg { height: 100%; }
.view-gallery .glass-card.work-item:hover { transform: translateY(-4px); }
.view-gallery .work-title { font-size: 15px; }
.view-gallery .work-info { padding: 14px 16px; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.brand-tag { font-size: 11.5px; padding: 5px 12px; border-radius: 20px; background: var(--glass-card); border: 1px solid var(--glass-border); color: var(--text-secondary); transition: background 0.2s, color 0.2s, border-color 0.2s; cursor: default; }
.brand-tag:hover { background: var(--glass-card-hover); color: var(--text-primary); border-color: rgba(10, 132, 255, 0.3); }
.brand-tag.featured { border-color: rgba(10, 132, 255, 0.3); color: rgb(96, 170, 255); background: rgba(10, 132, 255, 0.07); }
.about-layout { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; }
.about-photo-wrap { display: flex; flex-direction: column; gap: 14px; }
.about-photo { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-photo-placeholder { width: 100%; aspect-ratio: 1 / 1; background: linear-gradient(160deg, rgb(10, 10, 46), rgb(5, 5, 16), rgb(26, 10, 46)); display: flex; align-items: center; justify-content: center; font-size: 5rem; }
.about-photo-name { padding: 14px 16px; }
.about-photo-name h3 { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.about-photo-name p { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.about-bio-card { padding: 26px; }
.about-bio-text { font-size: 13.5px; color: var(--text-secondary); line-height: 1.8; margin-bottom: 16px; }
.glass-card.expanded .expandable-content { max-height: 1000px !important; }
.glass-card.expanded .expand-icon { transform: rotate(180deg); }
.skills-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 4px; }
.skill-item { font-size: 12px; padding: 8px 12px; border-radius: 8px; background: var(--glass-card); border: 1px solid var(--glass-border); color: var(--text-secondary); display: flex; align-items: center; gap: 6px; transition: 0.2s; cursor: default; position: relative; isolation: isolate; overflow: visible; --mouse-x: 50%; --mouse-y: 50%; }
.skill-item::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(
        120px circle at var(--mouse-x) var(--mouse-y),
        rgba(59, 130, 246, 0.12),
        rgba(96, 165, 250, 0.08) 30%,
        transparent 50%
    ); opacity: 0; transition: opacity 0.3s; z-index: -2; border-radius: 8px; }
[data-theme="light"] .skill-item::before { display: none; }
.skill-item::after { content: ""; position: absolute; inset: -1px; background: radial-gradient(
        100px circle at var(--mouse-x) var(--mouse-y),
        rgba(59, 130, 246, 0.9),
        rgba(96, 165, 250, 0.9) 30%,
        rgba(147, 197, 253, 0.8) 50%,
        transparent 70%
    ); border-radius: 8px; opacity: 0; transition: opacity 0.3s; z-index: -1; mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box xor, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px); padding: 1px; }
[data-theme="light"] .skill-item::after { background: radial-gradient(
        150px circle at var(--mouse-x) var(--mouse-y),
        rgb(6, 182, 212),
        rgb(59, 130, 246) 30%,
        rgb(99, 102, 241) 50%,
        transparent 70%
    ); padding: 1px; }
.skill-item:hover { transform: translateY(-2px); background: var(--sidebar-hover); border-color: var(--accent); color: var(--text-primary); box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px; }
.skill-item:hover::before, .skill-item:hover::after { opacity: 1; }
#mywork-commercial-grid { grid-template-rows: repeat(3, auto); max-height: none; overflow: hidden; }
.mywork-shows-pills { margin-bottom: 16px; margin-top: 4px; display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 8px !important; }
.mywork-films-poster-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; margin-bottom: 8px; }
.mywork-film-poster-card { position: relative; width: 120px; border-radius: 10px; overflow: hidden; cursor: pointer; flex-shrink: 0; transition: transform 0.2s, box-shadow 0.2s; box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 16px; }
.mywork-film-poster-card:hover { transform: scale(1.05); box-shadow: rgba(0, 0, 0, 0.6) 0px 8px 28px; }
.mywork-film-poster-card img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
.mywork-film-poster-label { position: absolute; bottom: 0px; left: 0px; right: 0px; padding: 20px 8px 8px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent); font-size: 10px; font-weight: 600; color: rgb(255, 255, 255); line-height: 1.3; text-align: center; }
.mywork-shows-card { padding: 16px 20px 20px; margin-top: 8px; }
.mywork-shows-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.mywork-show-pill { background: var(--glass-card); border: 1px solid var(--glass-border); border-radius: 20px; padding: 5px 12px; font-size: 11px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.mywork-shows-load-more { background: none; border: 1px solid var(--glass-border); border-radius: 8px; color: var(--text-secondary); padding: 6px 16px; font-size: 12px; cursor: pointer; transition: 0.2s; margin-top: 4px; }
.mywork-shows-load-more:hover { background: var(--glass-card); color: var(--text-primary); }
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-content: start; }
.service-card { padding: 22px 24px; position: relative; isolation: isolate; overflow: visible; --mouse-x: 50%; --mouse-y: 50%; }
.service-card::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(
        220px circle at var(--mouse-x) var(--mouse-y),
        rgba(59, 130, 246, 0.12),
        rgba(96, 165, 250, 0.08) 30%,
        transparent 50%
    ); opacity: 0; transition: opacity 0.3s; z-index: -2; }
[data-theme="light"] .service-card::before { display: none; }
.service-card::after { content: ""; position: absolute; inset: -1.5px; background: radial-gradient(
        200px circle at var(--mouse-x) var(--mouse-y),
        rgba(59, 130, 246, 0.9),
        rgba(96, 165, 250, 0.9) 30%,
        rgba(147, 197, 253, 0.8) 50%,
        transparent 70%
    ); border-radius: inherit; opacity: 0; transition: opacity 0.3s; z-index: -1; mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box xor, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px); padding: 1.5px; }
[data-theme="light"] .service-card::after { content: ""; position: absolute; inset: -3px; background: radial-gradient(
        300px circle at var(--mouse-x) var(--mouse-y),
        rgb(6, 182, 212),
        rgb(59, 130, 246) 30%,
        rgb(99, 102, 241) 50%,
        transparent 70%
    ); border-radius: inherit; opacity: 0; transition: opacity 0.3s; z-index: -1; mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box xor, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px); padding: 3px; }
.service-card:hover::before, .service-card:hover::after { opacity: 1; }
.glass-card::after,
.work-item::after,
.show-more-btn::after,
.skill-item::after,
.service-card::after {
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
                  linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
    mask-composite: exclude;
}
.service-icon { font-size: 2rem; margin-bottom: 12px; }
.service-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.service-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.65; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 20px; align-items: start; }
.contact-info { padding: 26px; }
.contact-info-title { font-size: 19px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.contact-info-body { font-size: 13px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 22px; }
.contact-detail { display: flex; align-items: center; gap: 10px; padding: 10px 0px; border-bottom: 1px solid var(--sidebar-divider); font-size: 13px; color: var(--text-secondary); }
.contact-detail-icon { font-size: 16px; width: 24px; text-align: center; }
.contact-detail a { color: var(--text-secondary); text-decoration: none; transition: color 0.2s; }
.contact-detail a:hover { color: var(--accent); }
.contact-form-card { padding: 26px; }
.form-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-group label { font-size: 11.5px; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.02em; }
.form-group input, .form-group textarea, .form-group select { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 8px; color: var(--text-primary); font-family: inherit; font-size: 13px; padding: 9px 12px; outline: none; resize: none; transition: border-color 0.2s, background 0.2s; appearance: none; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: rgba(10, 132, 255, 0.5); }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); }
.form-group select option { background: rgb(28, 28, 40); }
.btn-primary { background: var(--accent); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 8px; color: white; font-family: inherit; font-size: 13px; font-weight: 600; padding: 10px 22px; cursor: pointer; transition: background 0.2s, transform 0.15s; box-shadow: 0 0 20px var(--accent-glow); }
.btn-primary:hover { background: rgb(0, 112, 224); transform: translateY(-1px); }
.statusbar { display: none; }
.qt-backdrop { position: fixed; inset: 0px; z-index: 2000; background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.qt-backdrop.open { opacity: 1; pointer-events: all; }
.qt-player { width: min(880px, 93vw); background: rgba(20, 20, 26, 0.97); border-radius: 18px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.75) 0px 40px 100px, rgba(255, 255, 255, 0.11) 0px 0px 0px 1px, rgba(255, 255, 255, 0.1) 0px 1px 0px inset; transform: scale(0.9); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; flex-direction: column; }
.qt-backdrop.open .qt-player { transform: scale(1); }
.qt-titlebar { height: 44px; background: rgba(28, 28, 34, 0.99); display: flex; align-items: center; justify-content: space-between; padding: 0px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); flex-shrink: 0; position: relative; }
.qt-tl { display: flex; gap: 8px; align-items: center; }
.qt-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; pointer-events: none; }
.qt-close-x { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: rgba(255, 255, 255, 0.38); font-size: 18px; cursor: pointer; padding: 4px 8px; line-height: 1; transition: color 0.2s; border-radius: 6px; }
.qt-close-x:hover { color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.08); }
.qt-video-wrap { width: 100%; aspect-ratio: 16 / 9; background: rgb(0, 0, 0); position: relative; overflow: hidden; }
.qt-video-wrap iframe, .qt-video-wrap video { width: 100%; height: 100%; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; display: block; }
.qt-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: rgba(255, 255, 255, 0.28); }
.qt-placeholder-icon { font-size: 4rem; opacity: 0.35; }
.qt-placeholder-text { font-size: 13px; }
.qt-controls { background: rgba(26, 26, 32, 0.99); padding: 10px 18px 14px; display: flex; flex-direction: column; gap: 8px; }
.qt-progress { width: 100%; height: 4px; background: rgba(255, 255, 255, 0.14); border-radius: 2px; cursor: pointer; }
.qt-progress-fill { height: 100%; background: rgba(255, 255, 255, 0.52); border-radius: 2px; width: 0%; transition: width 0.1s; }
.qt-controls-row { display: flex; align-items: center; justify-content: space-between; }
.qt-left { display: flex; align-items: center; gap: 10px; }
.qt-right { display: flex; align-items: center; gap: 10px; }
.qt-btn { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: rgba(255, 255, 255, 0.62); font-size: 18px; cursor: pointer; padding: 4px; line-height: 1; transition: color 0.15s; border-radius: 5px; display: flex; align-items: center; justify-content: center; }
.qt-btn:hover { color: white; background: rgba(255, 255, 255, 0.08); }
.qt-btn.play-main { font-size: 22px; color: white; }
.qt-time { font-size: 11px; color: rgba(255, 255, 255, 0.42); font-variant-numeric: tabular-nums; }
.qt-vol-slider { width: 68px; height: 3px; background: rgba(255, 255, 255, 0.18); border-radius: 2px; cursor: pointer; }
.qt-vol-fill { height: 100%; background: rgba(255, 255, 255, 0.58); border-radius: 2px; width: 70%; }
.qt-info-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.qt-info-title { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.78); }
.qt-info-meta { font-size: 11px; color: rgba(255, 255, 255, 0.32); }
@media (max-width: 900px) {
  .finder-window { width: 100vw; top: 28px; border-radius: 0px; height: calc(-28px + 100vh); }
  .about-layout { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --sidebar-width: 180px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .finder-window { width: calc(-40px + 100vw); }
  .dock-item { width: 46px; height: 46px; }
  .dock-icon-img { width: 46px; height: 46px; }
  .dock-icon-emoji { width: 46px; height: 46px; font-size: 34px; }
  .dock-divider { height: 38px; }
  .dock { gap: 5px; padding: 6px 12px; }
  .menubar-left .menubar-item, .menubar-left .view-menu-trigger, .menubar-left .file-menu-trigger { font-size: 12px; }
}
@media (max-width: 768px) {
  :root { --sidebar-width: 0px; --titlebar-height: 44px; }
  .menubar { height: 24px; padding: 0px 8px; font-size: 11px; }
  .menubar-left { gap: 8px; }
  .menubar-left .menubar-item, .menubar-left .view-menu-trigger, .menubar-left .file-menu-trigger { display: none; }
  .menubar-right { gap: 8px; font-size: 10px; }
  .theme-toggle { transform: scale(0.85); }
  .finder-window { width: 100vw !important; height: calc(-24px + 100vh) !important; top: 24px !important; left: 0px !important; transform: none !important; border-radius: 0px !important; max-width: none !important; }
  .finder-window > .finder-body { padding-right: 0; }
  @keyframes windowOpen { 
  0% { transform: none; opacity: 0; }
  100% { transform: none; opacity: 1; }
}
  .titlebar { height: var(--titlebar-height); padding: 0px 10px; gap: 8px; flex-wrap: nowrap; }
  .traffic-lights { display: none; }
  .titlebar-nav { display: none; }
  .titlebar-views { gap: 2px; }
  .titlebar-views .view-btn { display: none; }
  .titlebar-search { flex: 1 1 0%; max-width: none; }
  .titlebar-search input { font-size: 14px; }
  .sidebar { position: absolute; left: 0px; top: 0px; bottom: 0px; z-index: 500; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: var(--sidebar-bg); backdrop-filter: blur(30px); border-right: 1px solid var(--glass-border); box-shadow: rgba(0, 0, 0, 0.3) 4px 0px 20px; width: 220px !important; }
  .sidebar.mobile-open { transform: translateX(0px); }
  .finder-body { position: relative; }
  .mobile-sidebar-toggle { align-items: center; justify-content: center; width: 32px; height: 32px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: var(--input-bg); border-radius: 6px; cursor: pointer; flex-shrink: 0; font-size: 16px; color: var(--text-primary); display: flex !important; }
  .mobile-sidebar-toggle:active { background: var(--sidebar-active); }
  .mobile-sidebar-backdrop { display: none; position: absolute; inset: 0px; background: rgba(0, 0, 0, 0.4); z-index: 499; }
  .mobile-sidebar-backdrop.active { display: block; }
  .content { width: 100% !important; }
  .about-layout { grid-template-columns: 1fr !important; }
  .contact-grid { grid-template-columns: 1fr !important; }
  .services-grid { grid-template-columns: 1fr !important; }
  .form-row { grid-template-columns: 1fr !important; }
  .stats-row { grid-template-columns: repeat(2, 1fr) !important; }
  .clients-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .work-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .tools-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .category-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .panel-icon-large { font-size: 32px !important; }
  .panel-title { font-size: 20px !important; }
  .dock { bottom: 0px; left: 0px; right: 0px; width: 100%; transform: none; border-radius: 0px; justify-content: center; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); gap: 2px; border-width: 1px medium medium; border-style: solid none none; border-color: rgba(255, 255, 255, 0.1) currentcolor currentcolor; border-image: none; box-shadow: rgba(0, 0, 0, 0.3) 0px -4px 20px; overflow: auto hidden; scrollbar-width: none; }
  .dock::-webkit-scrollbar { display: none; }
  .dock-item { width: 44px; height: 44px; flex-shrink: 0; }
  .dock-icon-img { width: 44px; height: 44px; border-radius: 12px; }
  .dock-icon-emoji { width: 44px; height: 44px; font-size: 30px; }
  .dock-item:hover { transform: none; }
  .dock-item:active { animation: auto ease 0s 1 normal none running none; transform: scale(0.9); }
  .dock-label { display: none; }
  .dock-divider { height: 32px; margin: 0px 2px; }
  .calendar-overlay { font-size: 7px !important; }
  .calendar-day-number { font-size: 16px !important; }
  .finder-window { height: calc(100vh - 24px - 58px - env(safe-area-inset-bottom, 0px)) !important; }
  .spotlight-container { width: 95vw !important; max-width: none; }
  .spotlight-input { font-size: 18px; }
  .music-player, .resizable { width: calc(-16px + 100vw) !important; max-width: none !important; left: 8px !important; right: 8px !important; }
  .desktop-icons { top: 30px !important; right: 8px !important; gap: 8px !important; }
  .desktop-icon { width: 64px !important; }
  .desktop-icon-label { font-size: 10px !important; }
  .films-detail-layout { grid-template-columns: 1fr !important; }
  .films-meta-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .resize-handle { display: none !important; }
  .finder-resize-handle { display: none !important; }
  .finder-window > .titlebar { cursor: default; }
  .desktop-icons { display: none; }
  .orb { filter: blur(40px); }
  .orb-1 { width: 300px; height: 300px; }
  .orb-2 { width: 250px; height: 250px; }
  .orb-3 { width: 200px; height: 200px; }
  .orb-4 { width: 180px; height: 180px; }
  .project-window { width: calc(-16px + 100vw) !important; left: 8px !important; top: 30px !important; max-height: calc(-80px + 100vh) !important; }
  .qt-player { width: 95vw !important; max-width: none !important; }
  #spellbookBtn #spellbookBtnInner { width: 72px !important; height: 72px !important; }
  #spellbookBtn img { width: 52px !important; height: 52px !important; }
  .work-thumb { min-height: 140px; }
  .hidden-folder-window, #doomWindow, #calculatorWindow, #freeformWindow, #notesWindow, #photoBoothWindow, #sortingHatWindow { width: calc(-16px + 100vw) !important; max-width: none !important; left: 8px !important; }
  .konami-toast { width: 90vw !important; max-width: none !important; padding: 20px !important; }
  .dock-item, .sidebar-item, .tl, .view-btn, .theme-btn { -webkit-tap-highlight-color: transparent; }
}
@media (max-width: 480px) {
  .dock-item { width: 38px; height: 38px; }
  .dock-icon-img { width: 38px; height: 38px; border-radius: 10px; }
  .dock-icon-emoji { width: 38px; height: 38px; font-size: 26px; }
  .dock-divider { height: 28px; }
  .dock { gap: 1px; padding: 4px 2px calc(4px + env(safe-area-inset-bottom, 0px)); }
  .finder-window { height: calc(100vh - 24px - 50px - env(safe-area-inset-bottom, 0px)) !important; }
  .stats-row { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .work-grid { grid-template-columns: 1fr !important; }
  .category-grid { grid-template-columns: 1fr !important; }
  .panel-header { padding: 16px !important; gap: 12px !important; }
  .panel-title { font-size: 18px !important; }
  .panel-subtitle { font-size: 11px !important; }
  .glass-card { padding: 12px !important; }
  .sidebar { width: 200px !important; }
}
.mobile-sidebar-toggle { display: none; }
.mobile-sidebar-backdrop { display: none; }
.dock { position: fixed; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; align-items: flex-end; gap: 8px; padding: 8px 16px; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(30px) saturate(1.8); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 20px; box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 32px, rgba(255, 255, 255, 0.2) 0px 1px 0px inset; }
.dock-item { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; background: transparent; border-radius: 14px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; }
.dock-icon-img { width: 56px; height: 56px; object-fit: contain; border-radius: 14px; display: block; }
.editor-dock-icon { border-radius: 14px; }
#postLabDockIcon.post-lab-loading .editor-dock-icon { animation: postLabDockPulse .7s ease-in-out infinite alternate; }
#postLabDockIcon.post-lab-running::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(255,255,255,.88); box-shadow: 0 0 4px rgba(255,255,255,.7); }
@keyframes postLabDockPulse { to { filter: brightness(1.22); transform: scale(.94); } }
.dock-icon-emoji { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; font-size: 42px; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); backdrop-filter: blur(10px); }
.dock-item:hover { transform: translateY(-12px) scale(1.15); }
.dock-item:active { animation: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0s 1 normal none running dockBounce; }
.dock-label { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-8px); background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(10px); color: white; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
.dock-item:hover .dock-label { opacity: 1; transform: translateX(-50%) translateY(-12px); }
.dock-divider { width: 1px; height: 48px; background: rgba(255, 255, 255, 0.15); margin: 0px 4px; }
@keyframes dockBounce { 
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-20px) scale(1.2); }
}
.spotlight-backdrop { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); z-index: 10000; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.spotlight-backdrop.open { opacity: 1; pointer-events: all; }
.spotlight-container { position: fixed; top: 15%; left: 50%; transform: translateX(-50%) scale(0.95); width: min(640px, 90vw); max-height: 70vh; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(40px) saturate(1.8); border-radius: 18px; box-shadow: rgba(0, 0, 0, 0.5) 0px 20px 60px, rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(255, 255, 255, 0.8) 0px 1px 0px inset; opacity: 0; transition: opacity 0.25s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; flex-direction: column; overflow: hidden; }
.spotlight-backdrop.open .spotlight-container { opacity: 1; transform: translateX(-50%) scale(1); }
[data-theme="dark"] .spotlight-container { background: rgba(40, 40, 50, 0.95); }
.spotlight-search-bar { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
[data-theme="dark"] .spotlight-search-bar { border-bottom-color: rgba(255, 255, 255, 0.1); }
.spotlight-icon { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.spotlight-icon img { width: 24px; height: 24px; object-fit: contain; }
[data-theme="dark"] .spotlight-icon img { filter: invert(1) opacity(0.45); }
[data-theme="light"] .spotlight-icon img { filter: opacity(0.35); }
.titlebar-search-icon { width: 14px; height: 14px; object-fit: contain; flex-shrink: 0; }
[data-theme="dark"] .titlebar-search-icon { filter: invert(1) opacity(0.4); }
[data-theme="light"] .titlebar-search-icon { filter: opacity(0.35); }
#spotlightMenuIcon img { transition: opacity 0.15s; }
[data-theme="dark"] #spotlightMenuIcon img { filter: invert(1) opacity(0.85); }
[data-theme="dark"] #spotlightMenuIcon:hover img { filter: invert(1) opacity(1); }
[data-theme="light"] #spotlightMenuIcon img { filter: opacity(0.6); }
[data-theme="light"] #spotlightMenuIcon:hover img { filter: opacity(0.9); }
.menubar-apple img, #wifiIcon, .wifi-menu-icon { transition: opacity 0.15s; }
[data-theme="dark"] .menubar-apple img, [data-theme="dark"] #wifiIcon, [data-theme="dark"] .wifi-menu-icon { filter: invert(1) opacity(0.85); }
[data-theme="light"] .menubar-apple img, [data-theme="light"] #wifiIcon, [data-theme="light"] .wifi-menu-icon { filter: opacity(0.7); }
[data-theme="dark"] .menubar-battery img { filter: invert(1) opacity(0.85); }
[data-theme="light"] .menubar-battery img { filter: opacity(0.7); }
.spotlight-input { flex: 1 1 0%; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; outline: none; font-size: 22px; font-weight: 300; color: rgba(0, 0, 0, 0.9); }
[data-theme="dark"] .spotlight-input { color: rgba(255, 255, 255, 0.9); }
.spotlight-input::placeholder { color: rgba(0, 0, 0, 0.25); }
[data-theme="dark"] .spotlight-input::placeholder { color: rgba(255, 255, 255, 0.25); }
.spotlight-results { overflow-y: auto; max-height: calc(-80px + 70vh); scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.1) transparent; }
.spotlight-results::-webkit-scrollbar { width: 6px; }
.spotlight-results::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); border-radius: 3px; }
[data-theme="dark"] .spotlight-results::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); }
.spotlight-category { padding: 12px 20px 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(0, 0, 0, 0.4); }
[data-theme="dark"] .spotlight-category { color: rgba(255, 255, 255, 0.4); }
.spotlight-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; cursor: pointer; transition: background 0.15s; }
.spotlight-item:hover, .spotlight-item.selected { background: rgba(10, 132, 255, 0.1); }
.spotlight-item-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: rgba(0, 0, 0, 0.04); border-radius: 8px; flex-shrink: 0; }
[data-theme="dark"] .spotlight-item-icon { background: rgba(255, 255, 255, 0.06); }
.spotlight-item-content { flex: 1 1 0%; min-width: 0px; }
.spotlight-item-title { font-size: 14px; font-weight: 500; color: rgba(0, 0, 0, 0.9); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme="dark"] .spotlight-item-title { color: rgba(255, 255, 255, 0.9); }
.spotlight-item-subtitle { font-size: 12px; color: rgba(0, 0, 0, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme="dark"] .spotlight-item-subtitle { color: rgba(255, 255, 255, 0.5); }
.spotlight-empty { padding: 40px 20px; text-align: center; color: rgba(0, 0, 0, 0.4); font-size: 14px; }
[data-theme="dark"] .spotlight-empty { color: rgba(255, 255, 255, 0.4); }
.project-window { position: fixed; width: 700px; height: 500px; background: var(--window-bg); backdrop-filter: blur(40px) saturate(2.2); border-radius: 14px; box-shadow: 0 20px 60px var(--shadow-color), 0 0 0 1px rgba(255,255,255,0.1); display: flex; flex-direction: column; overflow: hidden; z-index: 100; transition: background var(--transition), box-shadow var(--transition); }
.project-window.active { z-index: 200; box-shadow: rgba(0, 0, 0, 0.4) 0px 25px 70px, rgba(10, 132, 255, 0.3) 0px 0px 0px 1px; }
.project-window-titlebar { height: 40px; background: var(--titlebar-bg); backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; padding: 0px 12px; gap: 8px; cursor: move; user-select: none; flex-shrink: 0; }
.project-window-traffic { display: flex; gap: 8px; }
.project-window-title { flex: 1 1 0%; text-align: center; font-size: 13px; font-weight: 500; color: var(--text-primary); pointer-events: none; }
.project-window-content { flex: 1 1 0%; overflow: hidden; display: flex; flex-direction: column; }
.project-window-video { flex: 1 1 0%; background: rgb(0, 0, 0); position: relative; display: flex; align-items: center; justify-content: center; }
.project-window-video iframe, .project-window-video video { width: 100%; height: 100%; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; }
.project-window-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: rgba(255, 255, 255, 0.3); }
.project-window-placeholder-icon { font-size: 4rem; opacity: 0.4; }
.project-window-info { padding: 12px 16px; background: var(--glass-card); border-top: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: space-between; }
.project-window-info-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.project-window-info-meta { font-size: 11px; color: var(--text-secondary); }
.window-close { width: 12px; height: 12px; border-radius: 50%; background: rgb(255, 95, 87); border: 1px solid rgba(0, 0, 0, 0.1); cursor: pointer; transition: filter 0.15s; }
.window-close:hover { filter: brightness(1.2); }
.window-minimize { width: 12px; height: 12px; border-radius: 50%; background: rgb(254, 188, 46); border: 1px solid rgba(0, 0, 0, 0.1); cursor: pointer; transition: filter 0.15s; }
.window-minimize:hover { filter: brightness(1.2); }
.window-maximize { width: 12px; height: 12px; border-radius: 50%; background: rgb(40, 200, 64); border: 1px solid rgba(0, 0, 0, 0.1); cursor: pointer; transition: filter 0.15s; }
.window-maximize:hover { filter: brightness(1.2); }
.music-player { position: fixed; width: 800px; height: 600px; background: var(--window-bg); backdrop-filter: blur(40px) saturate(2.2); border-radius: 14px; box-shadow: 0 20px 60px var(--shadow-color), 0 0 0 1px rgba(255,255,255,0.1); display: none; flex-direction: column; overflow: hidden; z-index: 300; }
.music-player.open { display: flex; }
.music-player-titlebar { height: 40px; background: var(--titlebar-bg); backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; padding: 0px 12px; gap: 8px; cursor: move; user-select: none; }
.music-player-title { flex: 1 1 0%; text-align: center; font-size: 13px; font-weight: 500; color: var(--text-primary); }
.music-player-content { flex: 1 1 0%; background: rgb(0, 0, 0); position: relative; }
.music-player-content iframe { width: 100%; height: 100%; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; }
.resizable { position: relative; }
.resize-handle { position: absolute; z-index: 10; }
.resize-handle.corner-se { bottom: 0px; right: 0px; width: 15px; height: 15px; cursor: nwse-resize; }
.resize-handle.corner-sw { bottom: 0px; left: 0px; width: 15px; height: 15px; cursor: nesw-resize; }
.resize-handle.corner-ne { top: 40px; right: 0px; width: 15px; height: 15px; cursor: nesw-resize; }
.resize-handle.corner-nw { top: 40px; left: 0px; width: 15px; height: 15px; cursor: nwse-resize; }
.resize-handle.edge-e { top: 40px; right: 0px; width: 5px; height: calc(100% - 40px); cursor: ew-resize; }
.resize-handle.edge-w { top: 40px; left: 0px; width: 5px; height: calc(100% - 40px); cursor: ew-resize; }
.resize-handle.edge-s { bottom: 0px; left: 0px; width: 100%; height: 5px; cursor: ns-resize; }
.resize-handle.edge-n { top: 40px; left: 0px; width: 100%; height: 5px; cursor: ns-resize; }
.calculator-app { position: fixed; width: 320px; height: 480px; background: var(--window-bg); backdrop-filter: blur(40px) saturate(2.2); border-radius: 14px; box-shadow: 0 20px 60px var(--shadow-color), 0 0 0 1px rgba(255,255,255,0.1); display: none; flex-direction: column; overflow: hidden; z-index: 300; }
.calculator-app.open { display: flex; }
.calculator-display { background: rgb(28, 28, 30); color: rgb(255, 255, 255); font-size: 48px; font-weight: 300; text-align: right; padding: 30px 20px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; min-height: 120px; display: flex; align-items: flex-end; justify-content: flex-end; overflow: hidden; }
.calculator-buttons { flex: 1 1 0%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgb(0, 0, 0); padding: 1px; }
.calc-btn { background: rgb(51, 51, 51); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: rgb(255, 255, 255); font-size: 28px; font-weight: 400; cursor: pointer; transition: opacity 0.1s; display: flex; align-items: center; justify-content: center; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; }
.calc-btn:active { opacity: 0.6; }
.calc-btn.operator { background: rgb(255, 149, 0); color: rgb(255, 255, 255); }
.calc-btn.function { background: rgb(166, 166, 166); color: rgb(0, 0, 0); }
.calc-btn.zero { grid-column: span 2; }
.freeform-app { position: fixed; width: 700px; height: 600px; background: var(--window-bg); backdrop-filter: blur(40px) saturate(2.2); border-radius: 14px; box-shadow: 0 20px 60px var(--shadow-color), 0 0 0 1px rgba(255,255,255,0.1); display: none; flex-direction: column; overflow: hidden; z-index: 300; }
.freeform-app.open { display: flex; }
.freeform-toolbar { display: flex; gap: 8px; padding: 12px; background: var(--glass-card); border-bottom: 1px solid var(--glass-border); align-items: center; }
.freeform-tool { padding: 8px 16px; background: var(--sidebar-hover); border: 1px solid var(--glass-border); border-radius: 8px; cursor: pointer; font-size: 12px; color: var(--text-primary); transition: background 0.15s; }
.freeform-tool:hover { background: var(--sidebar-active); }
.freeform-tool.active { background: rgb(10, 132, 255); color: rgb(255, 255, 255); border-color: rgb(10, 132, 255); }
.color-picker { width: 36px; height: 36px; border-radius: 8px; border: 2px solid var(--glass-border); cursor: pointer; }
.freeform-canvas-container { flex: 1 1 0%; background: rgb(255, 255, 255); position: relative; overflow: hidden; }
.freeform-canvas { display: block; cursor: crosshair; }
.notes-app { position: fixed; width: 600px; height: 500px; background: var(--window-bg); backdrop-filter: blur(40px) saturate(2.2); border-radius: 14px; box-shadow: 0 20px 60px var(--shadow-color), 0 0 0 1px rgba(255,255,255,0.1); display: none; flex-direction: column; overflow: hidden; z-index: 300; }
.notes-app.open { display: flex; }
.notes-sidebar { width: 200px; background: var(--sidebar-bg); border-right: 1px solid var(--glass-border); display: flex; flex-direction: column; }
.notes-list { flex: 1 1 0%; overflow-y: auto; padding: 8px; }
.note-item { padding: 12px; border-radius: 8px; cursor: pointer; margin-bottom: 4px; transition: background 0.15s; }
.note-item:hover { background: var(--sidebar-hover); }
.note-item.active { background: var(--sidebar-active); }
.note-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.note-preview { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notes-content { flex: 1 1 0%; display: flex; flex-direction: column; }
.notes-editor { flex: 1 1 0%; padding: 20px; overflow-y: auto; }
.notes-textarea { width: 100%; height: 100%; background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; outline: none; resize: none; font-size: 14px; line-height: 1.6; color: var(--text-primary); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; }
.notes-toolbar { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--glass-border); }
.notes-btn { padding: 6px 12px; background: var(--glass-card); border: 1px solid var(--glass-border); border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--text-primary); transition: background 0.15s; }
.notes-btn:hover { background: var(--sidebar-hover); }
.delete-note-btn { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: var(--text-secondary); cursor: pointer; padding: 4px; font-size: 16px; opacity: 0.6; transition: opacity 0.2s, color 0.2s; }
.delete-note-btn:hover { opacity: 1; color: rgb(255, 69, 58); }
.clients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; margin-top: 10px; }
.client-logo-card { aspect-ratio: 16 / 9; background: var(--glass-card); border: 1px solid var(--glass-border); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--text-primary); text-align: center; padding: 20px; transition: 0.3s; cursor: default; letter-spacing: 0.5px; }
.client-logo-card:hover { transform: translateY(-5px) scale(1.02); background: var(--sidebar-hover); border-color: var(--accent); box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px; }
.game-card { aspect-ratio: 1 / 1; background: var(--glass-card); border: 1px solid var(--glass-border); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: pointer; transition: 0.3s; }
.game-card:hover { transform: translateY(-5px) scale(1.05); background: var(--sidebar-hover); border-color: var(--accent); box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px; }
.game-icon { font-size: 48px; }
.game-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
#appleTVWindow { z-index: 310; }
#appleTVWindow .music-player-titlebar { background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(30px) saturate(1.8); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
#appleTVWindow .music-player-title { color: rgb(255, 255, 255); }
.appletv-content { flex: 1 1 0%; background: rgb(13, 13, 13); overflow: hidden auto; scroll-behavior: smooth; }
.appletv-content::-webkit-scrollbar { width: 6px; }
.appletv-content::-webkit-scrollbar-track { background: transparent; }
.appletv-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 3px; }
.appletv-hero { position: relative; width: 100%; min-height: 445px; overflow: hidden; }
.appletv-backdrop { position: absolute; inset: 0px; background-size: cover; background-position: center top; z-index: 0; transform: scale(1.02); transition: opacity 0.6s; }
.appletv-backdrop::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(to top, rgb(13, 13, 13) 0%, rgba(13, 13, 13, 0.92) 20%, rgba(13, 13, 13, 0.5) 50%, rgba(0, 0, 0, 0.3) 100%); }
.appletv-hero-content { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 28px; padding: 40px 48px 36px; min-height: 445px; }
.appletv-poster { width: 160px; height: 240px; border-radius: 10px; object-fit: cover; box-shadow: rgba(0, 0, 0, 0.6) 0px 8px 32px, rgba(255, 255, 255, 0.08) 0px 0px 0px 1px; flex-shrink: 0; transition: transform 0.3s; }
.appletv-poster:hover { transform: scale(1.03); }
.appletv-info { display: flex; flex-direction: column; gap: 8px; max-width: 600px; }
.appletv-info h1 { font-size: 38px; font-weight: 700; color: rgb(255, 255, 255); letter-spacing: -0.02em; line-height: 1.1; text-shadow: rgba(0, 0, 0, 0.4) 0px 2px 12px; }
.appletv-meta { font-size: 14px; color: rgba(255, 255, 255, 0.55); display: flex; align-items: center; gap: 6px; font-weight: 500; }
.appletv-meta .atv-badge { display: inline-flex; align-items: center; padding: 2px 8px; background: rgba(255, 255, 255, 0.12); border-radius: 4px; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.7); letter-spacing: 0.03em; }
.appletv-genre-tags { display: flex; gap: 8px; margin-top: 2px; }
.appletv-genre-tag { font-size: 13px; color: rgb(10, 132, 255); font-weight: 500; cursor: pointer; }
.appletv-genre-tag:hover { text-decoration: underline; }
.appletv-description { font-size: 14.5px; color: rgba(255, 255, 255, 0.72); line-height: 1.55; max-width: 520px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.appletv-buttons { display: flex; gap: 12px; margin-top: 8px; }
.appletv-play-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 32px; background: linear-gradient(rgb(255, 255, 255) 0%, rgb(232, 232, 232) 100%); color: rgb(0, 0, 0); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; letter-spacing: -0.01em; box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 12px; transition: transform 0.15s, filter 0.15s, box-shadow 0.15s !important; }
.appletv-play-btn:hover { transform: scale(1.04); filter: brightness(1.05); box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 20px; }
.appletv-play-btn:active { transform: scale(0.98); }
.appletv-play-btn svg { width: 18px; height: 18px; fill: rgb(0, 0, 0); }
.appletv-add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 24px; background: rgba(255, 255, 255, 0.12); color: rgb(255, 255, 255); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; font-size: 15px; font-weight: 500; cursor: pointer; backdrop-filter: blur(8px); transition: background 0.15s, transform 0.15s, border-color 0.15s !important; }
.appletv-add-btn:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.25); transform: scale(1.03); }
.appletv-sections { padding: 0px 0px 40px; }
.appletv-section { padding: 0px 48px; margin-bottom: 36px; }
.appletv-section h2 { font-size: 22px; font-weight: 700; color: rgb(255, 255, 255); margin-bottom: 16px; letter-spacing: -0.01em; }
.appletv-carousel { display: flex; gap: 16px; overflow: auto hidden; scroll-snap-type: x mandatory; padding-bottom: 8px; margin: 0px -8px; padding-left: 8px; padding-right: 8px; }
.appletv-carousel::-webkit-scrollbar { height: 0px; display: none; }
.appletv-all-carousels { padding: 20px 24px; }
.appletv-carousel-section { margin-bottom: 40px; }
.appletv-carousel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding: 0px; }
.appletv-carousel-header h3 { font-size: 22px; font-weight: 600; color: rgb(255, 255, 255); margin: 0px; letter-spacing: -0.3px; }
.appletv-carousel-arrows { display: flex; gap: 8px; }
.carousel-arrow { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: rgb(255, 255, 255); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; backdrop-filter: blur(10px); }
.carousel-arrow:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.3); transform: scale(1.1); }
.carousel-arrow:active { transform: scale(0.95); }
.appletv-carousel-scroll { display: flex; gap: 16px; overflow-x: auto; scroll-behavior: smooth; padding: 18px 16px 28px; margin: -18px -16px -12px; scroll-padding-inline: 16px; scroll-snap-type: x mandatory; }
.appletv-carousel-scroll::-webkit-scrollbar { height: 0px; display: none; }
.appletv-carousel-scroll > :first-child { transform-origin: left center; }
.appletv-carousel-scroll > :last-child { transform-origin: right center; }
.appletv-trailer-card { flex-shrink: 0; width: 280px; border-radius: 10px; overflow: hidden; cursor: pointer; position: relative; scroll-snap-align: start; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s !important; }
.appletv-trailer-card:hover { transform: scale(1.05); box-shadow: rgba(0, 0, 0, 0.5) 0px 8px 30px; }
.appletv-trailer-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: rgb(26, 26, 26); }
.appletv-trailer-play { position: absolute; inset: 0px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.25); opacity: 0; transition: opacity 0.2s; }
.appletv-trailer-card:hover .appletv-trailer-play { opacity: 1; }
.appletv-trailer-play-icon { width: 52px; height: 52px; border-radius: 50%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255, 255, 255, 0.3); }
.appletv-trailer-play-icon svg { width: 22px; height: 22px; fill: rgb(255, 255, 255); margin-left: 2px; }
.appletv-trailer-label { position: absolute; bottom: 0px; left: 0px; right: 0px; padding: 20px 14px 12px; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); font-size: 13px; font-weight: 600; color: rgb(255, 255, 255); }
.appletv-trailer-label span { display: block; font-size: 11px; font-weight: 400; color: rgba(255, 255, 255, 0.5); margin-top: 2px; }
.appletv-poster-card { flex-shrink: 0; width: 170px; cursor: pointer; scroll-snap-align: start; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
.appletv-poster-card:hover { transform: scale(1.06); }
.appletv-trailer-card:hover, .appletv-poster-card:hover { z-index: 3; }
.appletv-poster-card img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; display: block; background: rgb(26, 26, 26); box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 16px; }
.appletv-poster-card .poster-title { font-size: 13px; color: rgba(255, 255, 255, 0.8); margin-top: 8px; font-weight: 500; line-height: 1.3; }
.appletv-poster-card .poster-subtitle { font-size: 11.5px; color: rgba(255, 255, 255, 0.4); margin-top: 2px; }
.appletv-details { padding: 32px 48px 48px; border-top: 1px solid rgba(255, 255, 255, 0.06); margin-top: 8px; }
.appletv-details h2 { font-size: 22px; font-weight: 700; color: rgb(255, 255, 255); margin-bottom: 16px; }
.appletv-details-full-desc { font-size: 14.5px; color: rgba(255, 255, 255, 0.65); line-height: 1.6; max-width: 640px; margin-bottom: 28px; }
.appletv-meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }
.appletv-meta-item { display: flex; flex-direction: column; gap: 4px; }
.appletv-meta-item .meta-label { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; letter-spacing: 0.06em; }
.appletv-meta-item .meta-value { font-size: 15px; color: rgba(255, 255, 255, 0.85); font-weight: 500; }
.appletv-player-overlay { position: absolute; inset: 0px; background: rgb(0, 0, 0); z-index: 20; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity 0.35s; }
.appletv-player-overlay.active { opacity: 1; pointer-events: auto; }
.appletv-player-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(12px); z-index: 2; }
.appletv-player-title { font-size: 14px; font-weight: 600; color: rgb(255, 255, 255); }
.appletv-player-close { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: rgb(255, 255, 255); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s !important; }
.appletv-player-close:hover { background: rgba(255, 255, 255, 0.25); }
.appletv-player-body { flex: 1 1 0%; display: flex; align-items: center; justify-content: center; background: rgb(0, 0, 0); }
.appletv-player-body iframe { width: 100%; height: 100%; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; }
.appletv-cast-card { flex-shrink: 0; width: 130px; text-align: center; cursor: default; scroll-snap-align: start; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
.appletv-cast-card:hover { transform: scale(1.05); }
.appletv-cast-card img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; display: block; margin: 0px auto 10px; background: rgb(26, 26, 26); box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 10px; }
.appletv-cast-card .cast-name { font-size: 12.5px; color: rgba(255, 255, 255, 0.85); font-weight: 600; line-height: 1.3; }
.appletv-cast-card .cast-role { font-size: 11px; color: rgba(255, 255, 255, 0.4); margin-top: 2px; }
#panel-films { padding: 0px !important; overflow: hidden auto !important; }
.films-layout { display: flex; flex-direction: column; min-height: 100%; overflow: visible; }
.films-header-backdrop { position: relative; height: 380px; overflow: hidden; flex-shrink: 0; }
.films-header-backdrop-img { position: absolute; inset: 0px; background-size: cover; background-position: center top; transition: opacity 0.55s, background-image 0.01s; z-index: 0; }
.films-header-backdrop-grad { position: absolute; inset: 0px; background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.8) 100%); z-index: 1; }
[data-theme="light"] .films-header-backdrop-grad { background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.9) 100%); }
.films-header-content { position: absolute; bottom: 40px; left: 50px; right: 50px; z-index: 2; }
.films-header-logo-wrap { margin-bottom: 14px; }
.films-header-logo { max-height: 90px; max-width: 320px; object-fit: contain; object-position: left bottom; display: block; filter: drop-shadow(rgba(0, 0, 0, 0.9) 0px 2px 12px); }
.films-header-title-text { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; color: rgb(255, 255, 255); line-height: 1.05; text-shadow: rgba(0, 0, 0, 0.6) 0px 2px 20px; }
.films-header-subtitle { font-size: 14px; color: rgba(255, 255, 255, 0.85); margin-top: 8px; text-shadow: rgba(0, 0, 0, 0.6) 0px 1px 8px; }
.films-header-play-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; background: rgba(255, 255, 255, 0.95); color: rgb(0, 0, 0); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; margin-top: 16px; transition: 0.2s; }
.films-header-play-btn:hover { background: rgb(255, 255, 255); transform: scale(1.04); }
.films-header-play-btn svg { width: 14px; height: 14px; fill: rgb(0, 0, 0); }
.films-content-area { display: grid; grid-template-columns: 240px 1fr; gap: 40px; padding: 40px 50px; overflow: visible; }
.films-poster-column { flex-shrink: 0; }
.films-main-poster { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 32px; }
.films-info-column { flex: 1 1 0%; }
.films-poster-strip-wrapper { border-top: 1px solid var(--glass-border); padding: 20px 50px 120px; background: var(--glass-card); backdrop-filter: blur(20px); position: relative; }
.films-poster-strip-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-secondary); font-weight: 700; margin-bottom: 16px; }
.films-poster-strip-container { position: relative; padding: 15px 12px 15px 20px; max-width: 100%; }
.films-poster-strip { display: flex; flex-wrap: nowrap; gap: 12px; overflow: auto visible; scrollbar-width: none; padding: 12px 8px; scroll-behavior: smooth; align-items: flex-start; max-width: calc(912px); }
.films-poster-strip::-webkit-scrollbar { display: none; }
.films-poster-nav { position: absolute; top: -42px; width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 0, 0, 0.7); border: 1px solid rgba(255, 255, 255, 0.2); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; z-index: 2; font-size: 16px; font-weight: 700; }
.films-poster-nav:hover { background: rgba(0, 0, 0, 0.9); border-color: rgba(255, 255, 255, 0.4); transform: scale(1.1); }
.films-poster-nav.left { right: 50px; }
.films-poster-nav.right { right: 8px; }
.films-poster-nav:disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
.films-sidebar { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(30px) saturate(1.8); border-right: 1px solid rgba(255, 255, 255, 0.07); display: flex; flex-direction: column; overflow: hidden; position: relative; }
.films-sidebar-bg { position: absolute; inset: 0px; background-size: cover; background-position: center center; filter: blur(40px) saturate(1.4); opacity: 0.18; transform: scale(1.1); transition: background-image 0.8s; z-index: 0; }
.films-sidebar-inner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.films-now-playing-header { padding: 20px 20px 14px; flex-shrink: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.films-now-playing-label { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); font-weight: 700; margin-bottom: 4px; }
.films-now-playing-title { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.films-featured-poster { position: relative; flex-shrink: 0; cursor: pointer; overflow: hidden; }
.films-featured-poster img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.films-featured-poster:hover img { transform: scale(1.04); }
.films-featured-overlay { position: absolute; inset: 0px; background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.3) 65%, rgba(0, 0, 0, 0.85) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 18px 16px; }
.films-featured-title { font-size: 18px; font-weight: 800; color: rgb(255, 255, 255); line-height: 1.1; margin-bottom: 4px; text-shadow: rgba(0, 0, 0, 0.8) 0px 2px 12px; }
.films-featured-role { font-size: 11px; color: rgba(255, 255, 255, 0.55); font-weight: 500; margin-bottom: 10px; }
.films-featured-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.films-featured-year { font-size: 11px; color: rgba(255, 255, 255, 0.5); font-weight: 500; }
.films-featured-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.films-featured-type { font-size: 10px; padding: 2px 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.7); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
#filmsButtonContainer { display: flex; gap: 8px; width: 100%; }
.films-play-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; background: rgba(255, 255, 255, 0.92); color: rgb(0, 0, 0); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background 0.15s, transform 0.15s; flex: 1 1 0%; justify-content: center; }
.films-play-btn:hover { background: rgb(255, 255, 255); transform: scale(1.02); }
.films-play-btn svg { width: 14px; height: 14px; fill: rgb(0, 0, 0); }
.films-poster-section { flex: 1 1 0%; overflow: hidden; display: flex; flex-direction: column; padding: 0px; }
.films-poster-section-label { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.3); font-weight: 700; padding: 14px 20px 8px; flex-shrink: 0; }
.films-poster-thumb { flex-shrink: 0; width: 140px; cursor: pointer; position: relative; border-radius: 8px; overflow: hidden; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px; }
.films-poster-thumb:hover { transform: scale(1.05) translateY(-2px); box-shadow: rgba(0, 0, 0, 0.4) 0px 8px 24px; z-index: 5; }
.films-poster-thumb.active-thumb { outline: rgb(255, 255, 255) solid 3px; outline-offset: 3px; transform: scale(1.02); box-shadow: rgba(255, 255, 255, 0.3) 0px 4px 16px; z-index: 10; }
.films-poster-thumb img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; border-radius: 8px; background: rgb(26, 26, 46); }
.films-poster-thumb-label { display: none; }
.films-detail { overflow: hidden auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.1) transparent; background: transparent; }
.films-detail::-webkit-scrollbar { width: 4px; }
.films-detail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }
.films-detail-hero { position: relative; height: 380px; overflow: hidden; flex-shrink: 0; }
.films-detail-backdrop { position: absolute; inset: 0px; background-size: cover; background-position: center top; transition: opacity 0.55s, background-image 0.01s; z-index: 0; }
.films-detail-backdrop.fading-out { opacity: 0; }
.films-inline-player { position: absolute; inset: 0px; z-index: 10; opacity: 0; pointer-events: none; transition: opacity 0.5s; background: rgb(0, 0, 0); }
.films-inline-player.playing { opacity: 1; pointer-events: all; }
.films-inline-player iframe { width: 100%; height: 100%; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; display: block; }
.films-player-close { position: absolute; top: 14px; right: 16px; z-index: 20; width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.85); font-size: 14px; cursor: pointer; display: none; align-items: center; justify-content: center; font-family: inherit; transition: background 0.15s, transform 0.15s; }
.films-player-close:hover { background: rgba(0, 0, 0, 0.8); transform: scale(1.08); }
.films-player-close.visible { display: flex; }
.films-detail-backdrop-grad { position: absolute; inset: 0px; z-index: 1; background: linear-gradient(rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.08) 35%, rgba(18, 18, 28, 0.72) 72%, rgb(18, 18, 28) 100%); pointer-events: none; transition: opacity 0.5s; }
.films-detail-backdrop-grad.hidden { opacity: 0; }
[data-theme="light"] .films-detail-backdrop-grad { background: linear-gradient(rgba(235, 238, 248, 0.05) 0%, rgba(235, 238, 248, 0.1) 35%, rgba(235, 238, 248, 0.78) 72%, rgb(235, 238, 248) 100%); }
.films-detail-hero-content { position: absolute; bottom: 0px; left: 0px; right: 0px; padding: 0px 32px 26px; z-index: 3; transition: opacity 0.4s, transform 0.4s; }
.films-detail-hero-content.hidden { opacity: 0; transform: translateY(6px); pointer-events: none; }
.films-detail-logo-wrap { margin-bottom: 14px; }
.films-detail-logo { max-height: 90px; max-width: 320px; object-fit: contain; object-position: left bottom; display: block; filter: drop-shadow(rgba(0, 0, 0, 0.9) 0px 2px 12px); transition: opacity 0.5s; }
.films-detail-title-text { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; color: rgb(255, 255, 255); line-height: 1.05; text-shadow: rgba(0, 0, 0, 0.6) 0px 2px 20px; margin-bottom: 0px; }
.films-detail-subtitle { font-size: 13px; color: rgba(255, 255, 255, 0.55); font-weight: 500; margin-bottom: 16px; text-shadow: rgba(0, 0, 0, 0.6) 0px 1px 8px; }
.films-hero-play-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; background: rgba(255, 255, 255, 0.93); color: rgb(0, 0, 0); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 9px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background 0.15s, transform 0.15s, opacity 0.3s; box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 20px; }
.films-hero-play-btn:hover { background: rgb(255, 255, 255); transform: scale(1.03); }
.films-hero-play-btn svg { width: 13px; height: 13px; fill: rgb(0, 0, 0); }
.films-hero-play-btn.hidden-btn { opacity: 0; pointer-events: none; }
.films-detail-body { padding: 24px 32px 60px; }
.films-detail-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.films-detail-tag { font-size: 11px; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--glass-border); background: var(--tag-bg); color: var(--text-secondary); font-weight: 500; }
.films-detail-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.7; max-width: 620px; margin-bottom: 28px; }
.films-detail-meta-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; margin-bottom: 32px; }
.films-detail-meta-item { display: flex; flex-direction: column; gap: 3px; }
.films-detail-meta-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); }
.films-detail-meta-value { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.films-role-card { background: var(--glass-card); border: 1px solid var(--glass-border); border-radius: 12px; padding: 20px 22px; margin-bottom: 28px; position: relative; overflow: hidden; backdrop-filter: blur(20px); box-shadow: 0 4px 20px rgba(0,0,0,0.12), var(--glass-inset); }
.films-role-card::before { content: ""; position: absolute; left: 0px; top: 0px; bottom: 0px; width: 3px; background: linear-gradient(to bottom, var(--accent), #BF5AF2); border-radius: 3px 0px 0px 3px; }
.films-role-card-label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.films-role-card-role { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.films-role-card-detail { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.films-trailer-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; background: var(--accent); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background 0.15s, transform 0.15s, box-shadow 0.15s; box-shadow: rgba(10, 132, 255, 0.3) 0px 4px 16px; margin-right: 10px; margin-bottom: 10px; }
.films-trailer-btn:hover { background: rgb(32, 144, 255); transform: translateY(-1px); box-shadow: rgba(10, 132, 255, 0.4) 0px 6px 20px; }
.films-trailer-btn svg { width: 14px; height: 14px; fill: rgb(255, 255, 255); }
.films-imdb-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; background: var(--glass-card); color: var(--text-primary); border: 1px solid var(--glass-border); border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s, transform 0.15s; text-decoration: none; margin-bottom: 10px; }
.films-imdb-btn:hover { background: var(--glass-card-hover); transform: translateY(-1px); }
.films-secondary-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; background: rgba(255, 255, 255, 0.15); color: var(--text-primary); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: 0.15s; }
.films-secondary-btn:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-1px); }
.films-secondary-btn svg { width: 14px; height: 14px; fill: currentcolor; }
@keyframes filmsFadeIn { 
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.appletv-nav { display: flex; gap: 4px; padding: 14px 48px 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.appletv-nav-item { padding: 8px 18px 12px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.45); cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; user-select: none; }
.appletv-nav-item:hover { color: rgba(255, 255, 255, 0.7); }
.appletv-nav-item.active { color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); }
.atv-skeleton { background: linear-gradient(90deg, rgb(26, 26, 26) 25%, rgb(34, 34, 34) 50%, rgb(26, 26, 26) 75%) 0% 0% / 200% 100%; animation: 1.5s ease-in-out 0s infinite normal none running atvShimmer; border-radius: 8px; }
@keyframes atvShimmer { 
  0% { background-position: 200% 0px; }
  100% { background-position: -200% 0px; }
}
#appleTVWindow.open { animation: 0.3s ease-out 0s 1 normal none running atvFadeIn; }
@keyframes atvFadeIn { 
  0% { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}
.alert-overlay { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 99999; animation: 0.2s ease 0s 1 normal none running fadeIn; }
.alert-dialog { width: 420px; background: var(--glass-card); border: 1px solid var(--glass-border); border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.5) 0px 20px 60px; padding: 20px 20px 16px; animation: 0.2s ease 0s 1 normal none running scaleIn; }
.alert-icon { width: 64px; height: 64px; margin: 0px auto 16px; background: linear-gradient(135deg, rgb(94, 158, 255) 0%, rgb(52, 120, 246) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; }
.alert-title { font-size: 13px; font-weight: 700; text-align: center; margin-bottom: 8px; color: var(--text-primary); }
.alert-message { font-size: 13px; line-height: 1.5; text-align: center; color: var(--text-secondary); margin-bottom: 20px; }
.alert-buttons { display: flex; flex-direction: column; gap: 10px; justify-content: center; width: 100%; }
.alert-btn { padding: 10px 24px; border-radius: 6px; font-size: 13px; font-weight: 500; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; transition: 0.15s; white-space: nowrap; width: 100%; }
.alert-btn-primary { background: linear-gradient(rgb(74, 158, 255) 0%, rgb(0, 113, 227) 100%); color: white; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px; }
.alert-btn-primary:hover { background: linear-gradient(rgb(90, 173, 255) 0%, rgb(0, 119, 237) 100%); transform: translateY(-1px); box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px; }
.alert-btn-secondary { background: rgba(120, 120, 128, 0.26); color: var(--text-primary); border: 1px solid var(--glass-border); }
.alert-btn-secondary:hover { background: rgba(120, 120, 128, 0.4); border-color: var(--glass-border); transform: translateY(-1px); }
@keyframes scaleIn { 
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}
.work-thumb-gif { opacity: 1 !important; }
.work-thumb-bg { opacity: 0 !important; }
.dock-equalizer { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; align-items: flex-end; height: 10px; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.dock-equalizer.active { opacity: 1; }
.dock-eq-bar { width: 3px; background: rgb(29, 185, 84); border-radius: 1.5px; animation: 0.8s ease-in-out 0s infinite alternate none running eqBounce; }
.dock-eq-bar:nth-child(1) { height: 4px; animation-delay: 0s; animation-duration: 0.6s; }
.dock-eq-bar:nth-child(2) { height: 7px; animation-delay: 0.15s; animation-duration: 0.75s; }
.dock-eq-bar:nth-child(3) { height: 5px; animation-delay: 0.3s; animation-duration: 0.55s; }
.dock-eq-bar:nth-child(4) { height: 8px; animation-delay: 0.1s; animation-duration: 0.7s; }
.dock-eq-bar:nth-child(5) { height: 3px; animation-delay: 0.25s; animation-duration: 0.65s; }
@keyframes eqBounce { 
  0% { height: 3px; }
  100% { height: 10px; }
}
.menubar-apple { cursor: pointer !important; }
.menubar-apple:hover { opacity: 0.8; }
.about-mac-overlay { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(4px); z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.about-mac-overlay.open { opacity: 1; pointer-events: auto; }
.about-mac-window { width: 540px; border-radius: 14px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.6) 0px 24px 80px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px; transform: scale(0.92) translateY(10px); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s; opacity: 0; }
.about-mac-overlay.open .about-mac-window { transform: scale(1) translateY(0px); opacity: 1; }
.about-mac-titlebar { height: 40px; background: var(--titlebar-bg); backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; padding: 0px 14px; gap: 8px; }
.about-mac-body { background: var(--window-bg); backdrop-filter: blur(40px) saturate(2.2); padding: 36px 40px 40px; text-align: center; }
.about-mac-logo { width: 80px; height: 80px; margin: 0px auto 16px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 48px; background: linear-gradient(135deg, rgb(10, 132, 255), rgb(191, 90, 242), rgb(255, 45, 85)); box-shadow: rgba(10, 132, 255, 0.25) 0px 4px 20px; }
.about-mac-name { font-size: 28px; font-weight: 700; color: var(--text-primary); line-height: 1.15; margin-bottom: 2px; }
.about-mac-version { font-size: 13px; color: var(--text-secondary); margin-bottom: 24px; }
.about-mac-specs { text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13px; padding: 20px 24px; background: var(--glass-card); border: 1px solid var(--glass-border); border-radius: 10px; margin-bottom: 20px; }
.about-mac-specs dt { color: var(--text-secondary); font-weight: 500; text-align: right; }
.about-mac-specs dd { color: var(--text-primary); }
.about-mac-footer { font-size: 11px; color: var(--text-tertiary); line-height: 1.5; }
.about-mac-cta { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px; background: linear-gradient(135deg, rgb(10, 132, 255), rgb(0, 112, 224)); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s !important; }
.about-mac-cta:hover { transform: scale(1.04); box-shadow: rgba(10, 132, 255, 0.35) 0px 4px 16px; }
.matrix-canvas { position: fixed; inset: 0px; z-index: 999999; pointer-events: none; opacity: 0; transition: opacity 0.8s; }
.matrix-canvas.active { opacity: 1; }
.matrix-canvas.fade-out { opacity: 0; transition: opacity 1.5s; }
.konami-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); z-index: 1000000; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(20px); border: 1px solid rgba(0, 255, 65, 0.3); border-radius: 16px; padding: 32px 48px; text-align: center; opacity: 0; pointer-events: none; transition: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.konami-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.konami-toast h2 { font-size: 32px; font-weight: 800; color: rgb(0, 255, 65); margin-bottom: 8px; text-shadow: rgba(0, 255, 65, 0.5) 0px 0px 20px; font-family: "Courier New", monospace; }
.konami-toast p { font-size: 14px; color: rgba(0, 255, 65, 0.7); font-family: "Courier New", monospace; }
.konami-toast .konami-code-display { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
.konami-toast .kc-key { padding: 4px 10px; background: rgba(0, 255, 65, 0.1); border: 1px solid rgba(0, 255, 65, 0.3); border-radius: 6px; font-size: 12px; color: rgb(0, 255, 65); font-family: "Courier New", monospace; font-weight: 700; }
.pb-stage { flex: 1 1 0%; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: rgb(0, 0, 0); min-height: 0px; }
.pb-video-wrap { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.pb-video-wrap video, .pb-video-wrap canvas { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
#pbVideo { transform: scaleX(-1); }
.pb-frame-overlay { position: absolute; inset: 0px; pointer-events: none; display: flex; align-items: center; justify-content: center; z-index: 2; }
.pb-frame-overlay svg { width: 100%; height: 100%; position: absolute; inset: 0px; }
.pb-controls { padding: 14px 20px; display: flex; align-items: center; justify-content: center; gap: 12px; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(12px); border-top: 1px solid rgba(255, 255, 255, 0.06); }
.pb-shutter { width: 56px; height: 56px; border-radius: 50%; background: rgb(232, 232, 232); border: 4px solid rgb(255, 255, 255); cursor: pointer; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 12px, rgba(0, 0, 0, 0.15) 0px -2px 4px inset; flex-shrink: 0; transition: transform 0.12s, background 0.12s !important; }
.pb-shutter:hover { transform: scale(1.08); background: rgb(255, 255, 255); }
.pb-shutter:active { transform: scale(0.92); background: rgb(204, 204, 204); }
.pb-filter-btn { padding: 6px 14px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px; color: rgb(255, 255, 255); font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s !important; }
.pb-filter-btn:hover { background: rgba(255, 255, 255, 0.18); }
.pb-filter-btn.active { background: rgba(10, 132, 255, 0.3); border-color: rgba(10, 132, 255, 0.5); color: rgb(90, 200, 250); }
.pb-frame-selector { display: flex; gap: 6px; overflow-x: auto; padding: 0px 4px; flex: 1 1 0%; }
.pb-frame-selector::-webkit-scrollbar { display: none; }
.pb-flash-overlay { position: absolute; inset: 0px; background: rgb(255, 255, 255); z-index: 10; opacity: 0; pointer-events: none; }
.pb-flash-overlay.flash { opacity: 1; transition: opacity 0.05s; }
.pb-captured-strip { display: flex; gap: 8px; padding: 10px 16px; background: rgba(0, 0, 0, 0.4); overflow-x: auto; border-top: 1px solid rgba(255, 255, 255, 0.04); }
.pb-captured-strip::-webkit-scrollbar { display: none; }
.pb-captured-strip:empty { display: none; }
.pb-captured-thumb { width: 64px; height: 48px; border-radius: 6px; object-fit: cover; flex-shrink: 0; cursor: pointer; border: 2px solid transparent; transition: border-color 0.15s, transform 0.15s !important; }
.pb-captured-thumb:hover { border-color: rgb(10, 132, 255); transform: scale(1.08); }
.pb-no-camera { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; color: rgba(255, 255, 255, 0.5); font-size: 14px; padding: 40px; text-align: center; }
.pb-no-camera .pb-no-icon { font-size: 48px; opacity: 0.4; }
.pb-enable-btn { padding: 8px 20px; background: rgb(10, 132, 255); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.pb-download-btn { padding: 6px 14px; background: rgba(48, 209, 88, 0.2); border: 1px solid rgba(48, 209, 88, 0.3); border-radius: 20px; color: rgb(48, 209, 88); font-size: 12px; font-weight: 500; cursor: pointer; }
.pb-countdown { position: absolute; inset: 0px; display: flex; align-items: center; justify-content: center; z-index: 5; font-size: 80px; font-weight: 800; color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.5) 0px 4px 30px; opacity: 0; pointer-events: none; }
.pb-countdown.show { opacity: 1; animation: 0.8s ease-out 0s 1 normal none running pbCountPulse; }
@keyframes pbCountPulse { 
  0% { transform: scale(1.5); opacity: 0; }
  30% { transform: scale(1); opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: scale(0.8); }
}
.spotlight-content-wrapper { display: flex; overflow: hidden; flex: 1 1 0%; min-height: 0px; }
.spotlight-preview { width: 260px; flex-shrink: 0; border-left: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 20px; opacity: 0; transition: opacity 0.25s; overflow: hidden; }
[data-theme="light"] .spotlight-preview { border-left-color: rgba(0, 0, 0, 0.06); }
.spotlight-preview.visible { opacity: 1; }
.spotlight-preview-thumb { width: 200px; height: 130px; border-radius: 10px; object-fit: cover; box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 16px; margin-bottom: 14px; background: rgba(255, 255, 255, 0.04); }
.spotlight-preview-title { font-size: 15px; font-weight: 600; color: var(--text-primary); text-align: center; margin-bottom: 4px; }
.spotlight-preview-meta { font-size: 12px; color: var(--text-secondary); text-align: center; margin-bottom: 12px; }
.spotlight-preview-type { font-size: 11px; padding: 3px 10px; background: rgba(10, 132, 255, 0.12); color: rgb(90, 200, 250); border-radius: 12px; font-weight: 500; }
.spotlight-preview-icon { width: 64px; height: 64px; border-radius: 16px; background: var(--glass-card); display: flex; align-items: center; justify-content: center; font-size: 32px; margin-bottom: 14px; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 16px; }

@keyframes bookOpen {
  0% { opacity: 0; transform: scale(0.8) rotateY(-10deg); }
  100% { opacity: 1; transform: scale(1) rotateY(0deg); }
}

@keyframes bookClose {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.85) rotateY(10deg); }
}