.story-card{position:relative;background:linear-gradient(145deg,var(--color-bg-card),var(--color-bg-alt));border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;transition:all .4s cubic-bezier(.175,.885,.32,1.275);transform-style:preserve-3d;perspective:1000px}.story-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));opacity:0;transition:opacity .3s}.story-card:hover:before{opacity:1}.story-card:hover{transform:translateY(-8px) rotateX(2deg) rotateY(-2deg);box-shadow:0 20px 40px rgba(var(--color-primary-rgb),.15),0 10px 20px #0000001a}.story-card .progress-bar-container{position:absolute;bottom:0;left:0;right:0;height:3px;background:#0000001a}.story-card .progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));transition:width .5s ease}.story-card .completion-badge{position:absolute;top:12px;right:12px;background:var(--color-success);color:#fff;padding:4px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:600;display:flex;align-items:center;gap:4px}.ripple-effect{position:relative;overflow:hidden}.ripple-effect:after{content:"";position:absolute;width:100%;height:100%;top:50%;left:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.4) 0%,transparent 60%);transform:translate(-50%,-50%) scale(0);opacity:0;transition:transform .5s,opacity .3s}.ripple-effect:active:after{transform:translate(-50%,-50%) scale(2);opacity:1;transition:transform 0s,opacity 0s}.page-transition{animation:pageEnter .4s ease-out}@keyframes pageEnter{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.stagger-item{opacity:0;transform:translateY(30px);animation:staggerIn .5s ease forwards}.stagger-item:nth-child(1){animation-delay:.05s}.stagger-item:nth-child(2){animation-delay:.1s}.stagger-item:nth-child(3){animation-delay:.15s}.stagger-item:nth-child(4){animation-delay:.2s}.stagger-item:nth-child(5){animation-delay:.25s}.stagger-item:nth-child(6){animation-delay:.3s}.stagger-item:nth-child(7){animation-delay:.35s}.stagger-item:nth-child(8){animation-delay:.4s}@keyframes staggerIn{to{opacity:1;transform:translateY(0)}}.scroll-reveal{opacity:0;transform:translateY(40px);transition:all .6s cubic-bezier(.16,1,.3,1)}.scroll-reveal.revealed{opacity:1;transform:translateY(0)}.loading-enhanced{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:24px}.loading-heart{font-size:56px;animation:heartBeat 1.2s ease-in-out infinite;filter:drop-shadow(0 8px 20px rgba(var(--color-primary-rgb),.3))}@keyframes heartBeat{0%,to{transform:scale(1)}15%{transform:scale(1.15)}30%{transform:scale(1)}45%{transform:scale(1.1)}60%{transform:scale(1)}}.loading-message{font-size:var(--text-sm);color:var(--color-text-muted);text-align:center;animation:fadeInOut 2s ease-in-out infinite}@keyframes fadeInOut{0%,to{opacity:.5}50%{opacity:1}}.loading-dots{display:flex;gap:8px}.loading-dots span{width:10px;height:10px;background:var(--color-primary);border-radius:50%;animation:dotBounce 1.4s ease-in-out infinite}.loading-dots span:nth-child(1){animation-delay:0s}.loading-dots span:nth-child(2){animation-delay:.2s}.loading-dots span:nth-child(3){animation-delay:.4s}@keyframes dotBounce{0%,80%,to{transform:scale(.6);opacity:.5}40%{transform:scale(1);opacity:1}}.mobile-nav-enhanced{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--color-bg-card);border-top:1px solid var(--color-border-subtle);padding:var(--space-1) 0;padding-bottom:calc(var(--space-1) + env(safe-area-inset-bottom));z-index:var(--z-fixed);box-shadow:0 -4px 20px #00000014}.mobile-nav-enhanced .nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;color:var(--color-text-muted);text-decoration:none;font-size:11px;font-weight:500;position:relative;transition:all .3s}.mobile-nav-enhanced .nav-item svg{width:24px;height:24px;transition:transform .3s}.mobile-nav-enhanced .nav-item.active{color:var(--color-primary)}.mobile-nav-enhanced .nav-item.active:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:40px;height:3px;background:var(--color-primary);border-radius:0 0 3px 3px}.mobile-nav-enhanced .nav-item.active svg{transform:scale(1.1)}.mobile-nav-enhanced .nav-item:active svg{transform:scale(.9)}.floating-buttons{position:fixed;bottom:100px;right:20px;display:flex;flex-direction:column;gap:12px;z-index:90}.fab{width:56px;height:56px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;box-shadow:0 4px 20px #00000026}.fab:hover{transform:scale(1.1)}.fab:active{transform:scale(.95)}.fab-primary{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:#fff;font-size:24px}.fab-primary:hover{box-shadow:0 8px 30px rgba(var(--color-primary-rgb),.4)}.fab-scroll-top{background:var(--color-bg-card);color:var(--color-text-secondary);border:1px solid var(--color-border);opacity:0;transform:translateY(20px);pointer-events:none;transition:all .3s}.fab-scroll-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}.fab-scroll-top:hover{color:var(--color-primary);border-color:var(--color-primary)}.breadcrumb{display:flex;align-items:center;gap:8px;padding:12px 20px;font-size:var(--text-sm);color:var(--color-text-muted);background:var(--color-bg-subtle);overflow-x:auto;white-space:nowrap}.breadcrumb-item{color:var(--color-text-muted);text-decoration:none;transition:color .2s}.breadcrumb-item:hover{color:var(--color-primary)}.breadcrumb-item.current{color:var(--color-text);font-weight:500}.breadcrumb-separator{color:var(--color-text-subtle)}.view-toggle{display:flex;background:var(--color-bg-subtle);border-radius:var(--radius-lg);padding:4px;gap:4px}.view-toggle-btn{padding:8px 12px;border:none;background:transparent;border-radius:var(--radius-md);cursor:pointer;color:var(--color-text-muted);transition:all .2s}.view-toggle-btn.active{background:var(--color-bg-card);color:var(--color-primary);box-shadow:var(--shadow-sm)}.view-toggle-btn svg{width:18px;height:18px}.story-list-view{display:flex;flex-direction:column;gap:12px}.story-list-view .story-card{flex-direction:row;padding:16px}.story-list-view .story-card-emoji{font-size:32px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-subtle);border-radius:var(--radius-lg)}.story-list-view .story-card-content{flex:1;display:flex;flex-direction:column;gap:4px}.story-preview-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);background:var(--color-bg-card);border-radius:var(--radius-2xl);padding:24px;max-width:340px;width:90%;z-index:1000;opacity:0;visibility:hidden;transition:all .3s;box-shadow:var(--shadow-xl)}.story-preview-popup.active{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}.preview-header{display:flex;align-items:center;gap:16px;margin-bottom:16px}.preview-emoji{font-size:48px}.preview-title{font-size:var(--text-lg);font-weight:600}.preview-meta{display:flex;gap:12px;font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:16px}.preview-desc{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.6;margin-bottom:20px}.preview-actions{display:flex;gap:12px}.theme-toggle{width:44px;height:44px;border-radius:50%;border:none;background:var(--color-bg-subtle);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s}.theme-toggle:hover{background:var(--color-bg-alt)}.theme-toggle .icon-sun,.theme-toggle .icon-moon{width:20px;height:20px;transition:all .3s}.theme-toggle .icon-moon,body.dark-mode .theme-toggle .icon-sun{display:none}body.dark-mode .theme-toggle .icon-moon{display:block}body.dark-mode{--color-bg: #0a0a0f;--color-bg-alt: #12121a;--color-bg-subtle: #1a1a25;--color-bg-card: rgba(255, 255, 255, .03);--color-text: #ffffff;--color-text-secondary: rgba(255, 255, 255, .8);--color-text-muted: rgba(255, 255, 255, .5);--color-border: rgba(255, 255, 255, .08);--color-border-subtle: rgba(255, 255, 255, .04)}.theme-color-picker{display:flex;gap:12px;padding:16px}.theme-color-option{width:40px;height:40px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:all .2s;position:relative}.theme-color-option:hover{transform:scale(1.1)}.theme-color-option.active{border-color:var(--color-text)}.theme-color-option.active:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:16px;font-weight:700}.theme-color-pink{background:linear-gradient(135deg,#ff6b9d,#e84a7b)}.theme-color-purple{background:linear-gradient(135deg,#9d8df1,#7b6ad9)}.theme-color-blue{background:linear-gradient(135deg,#60a5fa,#3b82f6)}.theme-color-mint{background:linear-gradient(135deg,#34d399,#10b981)}body[data-theme-color=purple]{--color-primary: #9D8DF1;--color-primary-light: #B8ACFF;--color-primary-dark: #7B6AD9;--color-primary-rgb: 157, 141, 241}body[data-theme-color=blue]{--color-primary: #60A5FA;--color-primary-light: #93C5FD;--color-primary-dark: #3B82F6;--color-primary-rgb: 96, 165, 250}body[data-theme-color=mint]{--color-primary: #34D399;--color-primary-light: #6EE7B7;--color-primary-dark: #10B981;--color-primary-rgb: 52, 211, 153}.category-chips{display:flex;flex-wrap:wrap;gap:10px}.category-chip{padding:10px 18px;border-radius:var(--radius-full);border:2px solid var(--color-border);background:transparent;font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px}.category-chip:hover{border-color:var(--color-primary-light);background:rgba(var(--color-primary-rgb),.05)}.category-chip.selected{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.skeleton-enhanced{background:linear-gradient(90deg,var(--color-bg-subtle) 0%,var(--color-bg-alt) 50%,var(--color-bg-subtle) 100%);background-size:200% 100%;animation:shimmerEnhanced 1.5s ease-in-out infinite;border-radius:var(--radius-md)}@keyframes shimmerEnhanced{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-story-card-enhanced{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:20px;display:flex;flex-direction:column;gap:12px}.skeleton-story-card-enhanced .skeleton-emoji{width:48px;height:48px;border-radius:var(--radius-lg)}.skeleton-story-card-enhanced .skeleton-title{height:20px;width:70%}.skeleton-story-card-enhanced .skeleton-desc{height:14px;width:100%}.skeleton-story-card-enhanced .skeleton-tags{display:flex;gap:8px}.skeleton-story-card-enhanced .skeleton-tag{height:24px;width:60px;border-radius:var(--radius-full)}.lazy-image-container{position:relative;overflow:hidden;background:var(--color-bg-subtle)}.lazy-image{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}.lazy-image.loaded{opacity:1}.lazy-placeholder{position:absolute;inset:0;background:var(--color-bg-subtle);filter:blur(20px);transform:scale(1.1);transition:opacity .5s ease}.lazy-image.loaded+.lazy-placeholder{opacity:0}*:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.keyboard-hint{position:fixed;bottom:20px;left:20px;background:var(--color-text);color:var(--color-bg);padding:8px 16px;border-radius:var(--radius-lg);font-size:var(--text-xs);opacity:0;transition:opacity .3s;z-index:1000}body.keyboard-user .keyboard-hint{opacity:1}.keyboard-hint kbd{background:#fff3;padding:2px 6px;border-radius:4px;margin:0 4px}.skip-link{position:absolute;top:-100px;left:50%;transform:translate(-50%);background:var(--color-primary);color:#fff;padding:12px 24px;border-radius:var(--radius-lg);z-index:10000;transition:top .3s}.skip-link:focus{top:20px}.pull-refresh-indicator{position:fixed;top:0;left:50%;transform:translate(-50%) translateY(-100%);background:var(--color-bg-card);padding:12px 24px;border-radius:0 0 var(--radius-xl) var(--radius-xl);box-shadow:var(--shadow-md);display:flex;align-items:center;gap:12px;z-index:1000;transition:transform .3s}.pull-refresh-indicator.pulling{transform:translate(-50%) translateY(0)}.pull-refresh-spinner{width:20px;height:20px;border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}.swipe-hint{position:absolute;top:50%;transform:translateY(-50%);background:var(--color-bg-card);padding:8px 12px;border-radius:var(--radius-lg);font-size:var(--text-xs);color:var(--color-text-muted);box-shadow:var(--shadow-sm);opacity:0;transition:opacity .3s}.swipe-hint.left{left:10px}.swipe-hint.right{right:10px}.swipe-hint.visible{opacity:1}.share-card-preview{background:linear-gradient(135deg,var(--color-bg),var(--color-bg-alt));border-radius:var(--radius-xl);padding:32px 24px;text-align:center;border:1px solid var(--color-border)}.share-card-animal{font-size:64px;margin-bottom:16px;filter:drop-shadow(0 4px 12px rgba(var(--color-primary-rgb),.3))}.share-card-title{font-size:var(--text-xl);font-weight:700;margin-bottom:8px}.share-card-subtitle{font-size:var(--text-sm);color:var(--color-primary);margin-bottom:16px}.share-card-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:20px}.share-card-tag{background:rgba(var(--color-primary-rgb),.1);color:var(--color-primary);padding:6px 14px;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:500}.share-card-footer{font-size:var(--text-xs);color:var(--color-text-muted)}.scroll-hint{position:absolute;bottom:0;left:0;right:0;pointer-events:none;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease;z-index:10}.scroll-hint.visible{opacity:1;transform:translateY(0)}.scroll-hint-gradient{height:60px;background:linear-gradient(to bottom,transparent 0%,rgba(255,255,255,.95) 100%)}.scroll-hint-content{display:flex;flex-direction:column;align-items:center;padding:8px 16px;background:#fffffff2;color:#6b6b7b;font-size:13px;font-weight:500}.scroll-hint-arrow{font-size:18px;line-height:1;animation:scrollHintBounce 1s ease-in-out infinite}.scroll-hint-text{margin-top:2px}@keyframes scrollHintBounce{0%,to{transform:translateY(0)}50%{transform:translateY(4px)}}@media (prefers-reduced-motion: reduce){.scroll-hint{transition:opacity .1s ease;transform:none}.scroll-hint-arrow{animation:none}}.scroll-hint.no-animation .scroll-hint-arrow{animation:none}@media (min-width: 769px){.scroll-hint{display:none!important}}