html, body { max-width: 100vw !important; overflow-x: hidden !important; position: relative; }
body { font-family: 'Inter', sans-serif; overscroll-behavior: none; background-color: #dadada; }
h1, h2, h3, .font-headline { font-family: 'Plus Jakarta Sans', sans-serif; }
.card-stack-container { height: 480px; width: 100%; display: flex; align-items: center; justify-content: center; }
.stack-card { position: absolute; top: 50%; left: 50%; width: 90%; max-width: 340px; height: 440px; border-radius: 2rem; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease, border-radius 0.5s ease-out, width 0.5s ease-out, height 0.5s ease-out, top 0.5s ease-out, left 0.5s ease-out; will-change: transform, opacity, width, height, top, left; border: 1px solid #ffffff; outline: 1px solid transparent; box-shadow: 0 12px 32px rgba(52, 0, 117, 0.15); overflow: hidden; user-select: none; -webkit-user-select: none; background-color: #ffffff; cursor: pointer; touch-action: none; }
.card-4 { transform: translate(calc(-50% + 24px), calc(-50% + 24px)) rotate(12deg); z-index: 0; opacity: 1; }
.card-3 { transform: translate(calc(-50% + 16px), calc(-50% + 16px)) rotate(9deg); z-index: 1; opacity: 1; }
.card-2 { transform: translate(calc(-50% + 8px), calc(-50% + 8px)) rotate(6deg); z-index: 2; opacity: 1; }
.card-1 { transform: translate(-50%, -50%) rotate(3deg); z-index: 3; display: flex; flex-direction: column; cursor: grab; }
.card-1:active { cursor: grabbing; }
img { pointer-events: none; -webkit-user-drag: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
#app-container { margin: 0 auto; }
.page-view { position: absolute; inset: 0; background-color: #f9f9f9; z-index: 100; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); visibility: hidden; }
.page-view.active { transform: translateY(0); visibility: visible; }
.page-view-lateral { position: absolute; inset: 0; background-color: #f9f9f9; z-index: 100; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); visibility: hidden; }
.page-view-lateral.active { transform: translateX(0); visibility: visible; }
.page-view-lateral.lateral-pushed { transform: translateX(-30%); visibility: visible; }
html.dark body { background-color: #000000; }
html.dark .bg-surface-container-lowest { background-color: #121212; color: #ffffff; }
html.dark .bg-surface-bright { background-color: #1e1e1e; border-color: #2a2a2a; }
html.dark .bg-surface-container { background-color: #2a2a2a; border-color: #333333; }
html.dark .bg-surface-container-high { background-color: #333333; border-color: #444444; }
html.dark .text-on-surface { color: #f3f3f3; }
html.dark .text-on-surface-variant { color: #a3a3a3; }
html.dark .bg-surface-dim { background-color: #0a0a0a; }
html.dark .border-surface-container { border-color: #2a2a2a; }
html.dark .border-surface-variant\/30 { border-color: rgba(255,255,255,0.1); }
html.dark .bg-secondary-fixed { background-color: #4c1d95; color: #ffffff; }
html.dark .bg-secondary-fixed\/40 { background-color: rgba(76,29,149,0.4); }
html.dark .text-primary { color: #b994ff; }
html.dark .bg-white { background-color: #1e1e1e; }
html.dark .bg-\[\#ffffff\]\/80 { background-color: rgba(18, 18, 18, 0.8); }
html.dark .border-outline-variant { border-color: #444444; }
html.dark .bg-surface-container-lowest\/90 { background-color: rgba(18, 18, 18, 0.9); }
#home-view { transition: opacity 0.5s ease; }
#home-view.hidden { opacity: 0; pointer-events: none; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scan { 0%, 100% { top: 0%; } 50% { top: calc(100% - 4px); } }
.list-card.expanded .list-preview { display: none !important; }
.list-card.expanded .list-details { display: flex !important; }
.list-details { display: none; }