.head-search-button{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;border-radius:var(--border-radius-small, 8px);transition:all .2s ease;color:var(--text-color-primary);position:relative;outline:none;-webkit-user-select:none;user-select:none}.head-search-button--small{width:32px;height:32px;padding:6px}.head-search-button--small .head-search-button__icon{width:16px;height:16px}.head-search-button--medium{width:40px;height:40px;padding:8px}.head-search-button--medium .head-search-button__icon{width:20px;height:20px}.head-search-button--large{width:44px;height:44px;padding:10px}.head-search-button--large .head-search-button__icon{width:22px;height:22px}.head-search-button__icon{flex-shrink:0;transition:all .2s ease}.head-search-button__text{margin-left:8px;font-size:14px;font-weight:500;white-space:nowrap}.head-search-button--text{padding-left:12px;padding-right:12px;width:auto}.head-search-button--both{padding-left:12px;padding-right:16px;width:auto}.head-search-button:hover{background-color:var(--hover-background, rgba(0, 0, 0, .04));color:var(--color-primary)}.head-search-button:focus{background-color:var(--focus-background, rgba(0, 0, 0, .08));box-shadow:0 0 0 2px var(--focus-outline, rgba(66, 153, 225, .5))}.head-search-button:active{background-color:var(--active-bg-color, rgba(0, 0, 0, .12));transform:scale(.98)}.head-search-button--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}[data-theme=dark] .head-search-button:hover{background-color:#ffffff14}[data-theme=dark] .head-search-button:focus{background-color:#ffffff1f}[data-theme=dark] .head-search-button:active{background-color:#ffffff29}@media(max-width:768px){.head-search-button{min-width:44px;min-height:44px}.head-search-button--small{width:36px;height:36px}.head-search-button--medium{width:44px;height:44px}.head-search-button:hover{background-color:transparent;color:var(--text-color-primary)}}@media(prefers-contrast:high){.head-search-button{border:1px solid var(--border-color)}.head-search-button:focus{border-color:var(--focus-border-color);box-shadow:0 0 0 2px var(--focus-outline)}}@media(prefers-reduced-motion:reduce){.head-search-button,.head-search-button__icon{transition:none}.head-search-button:active{transform:none}}.head-autoplay-button{display:inline-flex;align-items:center;justify-content:center;padding:0;background:transparent;border:none;cursor:pointer;transition:all var(--transition-normal);color:var(--text-color);border-radius:var(--border-radius-medium);position:relative}.head-autoplay-button:hover{background-color:var(--hover-bg-color);color:var(--color-primary);transform:scale(1.05)}.head-autoplay-button:active{transform:scale(.95)}.head-autoplay-button:focus{outline:2px solid var(--color-primary);outline-offset:2px}.head-autoplay-button__icon{display:block;flex-shrink:0;transition:all var(--transition-normal)}.head-autoplay-button svg{flex-shrink:0}.head-autoplay-button--small{width:32px;height:32px}.head-autoplay-button--small .head-autoplay-button__icon{font-size:14px}.head-autoplay-button--medium{width:40px;height:40px}.head-autoplay-button--medium .head-autoplay-button__icon{font-size:18px}.head-autoplay-button--large{width:48px;height:48px}.head-autoplay-button--large .head-autoplay-button__icon{font-size:22px}.head-autoplay-button--playing{color:var(--color-primary);background-color:var(--surface-accent-color)}.head-autoplay-button--playing:hover{background-color:var(--hover-bg-color)}.head-autoplay-button--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}@media(max-width:768px){.head-autoplay-button{width:40px;height:40px}.head-autoplay-button__icon{font-size:18px}}.head-settings-button{display:inline-flex;align-items:center;justify-content:center;padding:0;background:transparent;border:none;cursor:pointer;transition:all var(--transition-normal);color:var(--text-color);border-radius:var(--border-radius-medium);position:relative}.head-settings-button:hover{background-color:var(--hover-bg-color);color:var(--color-primary);transform:scale(1.05)}.head-settings-button:active{transform:scale(.95)}.head-settings-button:focus{outline:2px solid var(--color-primary);outline-offset:2px}.head-settings-button__icon{display:block;flex-shrink:0;transition:all var(--transition-normal)}.head-settings-button svg{flex-shrink:0}.head-settings-button:hover .head-settings-button__icon{transform:rotate(90deg)}.head-settings-button--small{width:32px;height:32px}.head-settings-button--small .head-settings-button__icon{font-size:14px}.head-settings-button--medium{width:40px;height:40px}.head-settings-button--medium .head-settings-button__icon{font-size:18px}.head-settings-button--large{width:48px;height:48px}.head-settings-button--large .head-settings-button__icon{font-size:22px}.head-settings-button--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}@media(max-width:768px){.head-settings-button{width:40px;height:40px}.head-settings-button__icon{font-size:18px}}.header-profile-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;background:transparent;cursor:pointer;border-radius:var(--border-radius-small, 8px);transition:all .2s ease;color:var(--text-color);position:relative;outline:none;-webkit-user-select:none;user-select:none;font-family:inherit}.header-profile-button__icon{flex-shrink:0;transition:transform .2s ease}.header-profile-button__label{font-weight:500;white-space:nowrap;margin-left:4px}.header-profile-button--small{width:32px;height:32px;padding:6px;font-size:13px}.header-profile-button--small.header-profile-button--iconText{width:auto;min-width:32px;padding:6px 10px}.header-profile-button--medium{width:40px;height:40px;padding:10px;font-size:14px}.header-profile-button--medium.header-profile-button--iconText{width:auto;min-width:40px;padding:10px 14px}.header-profile-button--large{width:44px;height:44px;padding:12px;font-size:15px}.header-profile-button--large.header-profile-button--iconText{width:auto;min-width:44px;padding:12px 16px}.header-profile-button:hover{background-color:var(--hover-background, rgba(0, 0, 0, .04));color:var(--color-primary);border-radius:var(--border-radius-small, 8px)}.header-profile-button:hover .header-profile-button__icon{transform:scale(1.1)}.header-profile-button:active{background-color:var(--active-bg-color, rgba(0, 0, 0, .08));transform:scale(.95)}.header-profile-button:active .header-profile-button__icon{transform:scale(1.05)}.header-profile-button:focus{outline:2px solid var(--focus-outline, rgba(66, 153, 225, .5));outline-offset:2px}[data-theme=dark] .header-profile-button:hover{background-color:#ffffff14;color:var(--color-primary-light)}[data-theme=dark] .header-profile-button:active{background-color:#ffffff1f}.dark-mode .header-profile-button:hover{background-color:#ffffff14;color:var(--color-primary-light)}.dark-mode .header-profile-button:active{background-color:#ffffff1f}@media(max-width:768px){.header-profile-button{min-width:44px;min-height:44px}.header-profile-button--small{width:44px;height:44px;padding:12px}.header-profile-button--small.header-profile-button--iconText{width:auto;padding:12px 14px}.header-profile-button:hover,.header-profile-button:hover .header-profile-button__icon{transform:none}.header-profile-button:active{transform:scale(.95)}}@media(prefers-contrast:high){.header-profile-button{border:2px solid currentColor}.header-profile-button:focus{outline-width:3px}}@media(prefers-reduced-motion:reduce){.header-profile-button,.header-profile-button__icon{transition:none}.header-profile-button:hover,.header-profile-button:active,.header-profile-button:hover .header-profile-button__icon,.header-profile-button:active .header-profile-button__icon{transform:none}}:root{--header-height: 70px;--mobile-header-height: 60px;--mobile-nav-height: 60px;--header-bg: rgba(255, 255, 255, .9);--header-bg-scrolled: rgba(255, 255, 255, .98);--header-text: #2d3748;--header-text-light: #4a5568;--accent-color: var(--color-primary, #6d28d9);--accent-hover: var(--color-primary-light, #5b21b6);--nav-indicator: var(--color-primary, #6d28d9);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--transition-normal: .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce: .5s cubic-bezier(.68, -.55, .265, 1.55);--nav-menu-bg: rgba(255, 255, 255, .98);--theme-toggle-bg-hover: rgba(0, 0, 0, .1);--mobile-menu-bg: rgba(255, 255, 255, .98)}.dark-mode{--header-bg: rgba(17, 19, 32, .9);--header-bg-scrolled: rgba(13, 15, 25, .98);--header-text: #f7fafc;--header-text-light: #a0aec0;--accent-color: var(--color-primary, #a78bfa);--accent-hover: var(--color-primary-light, #c4b5fd);--nav-indicator: var(--color-primary, #a78bfa);--nav-menu-bg: rgba(13, 15, 25, .98);--theme-toggle-bg-hover: rgba(255, 255, 255, .15);--mobile-menu-bg: rgba(13, 15, 25, .98)}.header{position:fixed;top:0;left:0;right:0;height:var(--header-height);background:var(--header-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:1000;transition:all var(--transition-normal),transform .3s ease;will-change:transform,background-color,box-shadow}.header.scrolled{background:var(--header-bg-scrolled);box-shadow:var(--shadow-md)}.header.hidden{transform:translateY(-100%)}.header.visible{transform:translateY(0);background-color:var(--background-color, #f9fafb)}.mobile-header{height:var(--mobile-header-height);box-shadow:var(--shadow-sm)}.mobile-header-container{padding:0 1rem}.header-container{max-width:1400px;height:100%;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between}.logo-container h1{font-size:1.5rem;font-weight:700;margin:0;letter-spacing:-.5px;color:var(--header-text);transition:color var(--transition-normal)}.dark-mode .logo-container h1{color:var(--header-text)}.logo-accent{color:var(--accent-color);margin-left:2px;position:relative}.logo-accent:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:3px;background:var(--accent-color);border-radius:2px;transform:scaleX(0);transform-origin:right;transition:transform .5s ease-out}.header:hover .logo-accent:after{transform:scaleX(1);transform-origin:left}.nav-list{display:flex;list-style:none;margin:0;padding:0;gap:1.5rem;position:relative}.nav-item{position:relative;margin-right:0!important}.nav-item a{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;text-decoration:none;font-weight:500;font-size:.95rem;transition:color var(--transition-normal);position:relative;outline:none}.nav-item a:focus{outline:none}.nav-item a:hover{color:var(--header-text)}.nav-item.active a{color:var(--accent-color)}.nav-item a:after{content:"";position:absolute;bottom:-5px;left:0;width:100%;height:3px;background-color:var(--nav-indicator);transform:scaleX(0);transform-origin:center;transition:transform var(--transition-bounce);border-radius:3px}.nav-item a:hover:after{transform:scaleX(.5);opacity:.5}.nav-item.active a:after{transform:scaleX(1);opacity:1}.mobile-nav-item a{display:flex;align-items:center;gap:1rem;padding:1rem;border-radius:12px;color:var(--header-text);text-decoration:none;font-weight:500;font-size:1.1rem;transition:all .3s ease;background-color:transparent}.mobile-nav-item.active a{color:var(--accent-color);background-color:rgba(var(--primary-color-rgb, 77, 105, 225),.1)}.mobile-nav-item a:hover{background-color:rgba(var(--primary-color-rgb, 77, 105, 225),.05);transform:translate(5px)}.theme-toggle{position:relative;width:44px;height:44px;border-radius:50%;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .3s ease;color:var(--header-text)}.theme-toggle:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--accent-color);opacity:0;border-radius:inherit;transform:scale(0);transition:transform .4s ease,opacity .3s ease}.theme-toggle:hover:before{opacity:.15;transform:scale(1)}.theme-toggle:active:before{opacity:.25}.dark-mode .theme-toggle{box-shadow:0 2px 8px #00000040}@media(max-width:768px){body{padding-bottom:var(--mobile-nav-height)}.header{height:var(--mobile-header-height)}.header-container{padding:0 1rem}.logo-container h1{font-size:1.25rem}.theme-toggle{width:40px;height:40px}}@media(max-width:992px){.header-container{padding:0 1.5rem}.nav-list{gap:.8rem}.nav-item{margin-right:0!important}}@media(max-width:900px){.nav-list{gap:.6rem}.nav-item a{padding:.4rem .5rem;font-size:.9rem}}@media(max-width:768px){.header-container{padding:0 1rem}.logo-container h1{font-size:1.3rem;color:var(--header-text)}}@media(max-width:480px){.mobile-nav-item a{font-size:1rem;padding:.8rem}}.mobile-header{position:fixed;top:0;left:0;right:0;z-index:100;background-color:var(--header-bg-color, #ffffff);box-shadow:0 2px 8px #0000001a;transition:transform .3s ease,box-shadow .3s ease,background-color .3s ease;height:var(--mobile-header-height, 56px);--header-text-color: #ffffff;padding-top:env(safe-area-inset-top,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}.mobile-header.hidden{transform:translateY(-100%)}@media(prefers-color-scheme:dark){.mobile-header{--header-bg-color: #1e1e1e;--header-text-color: #ffffff}}.mobile-header.scrolled{box-shadow:0 4px 12px #00000026}.mobile-header-container{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:100%;color:var(--header-text-color)}.page-title-container{display:flex;align-items:center;justify-content:center;flex:1}.mobile-header-page-title{font-size:1.2rem;margin:0;padding:0;font-weight:600;color:var(--header-text-color);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70vw}.mobile-header .logo-container{display:none;align-items:center;justify-content:center;flex:1}.mobile-header .logo-link{text-decoration:none;color:var(--text-color, #333333);font-weight:700}.mobile-header .logo-link h1{font-size:1.5rem;margin:0;line-height:1}.mobile-header .logo-accent{color:var(--color-primary, #ED97B7)}.mobile-header .sidebar-toggle{background:none;border:none;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:50%;transition:background-color .2s ease}.mobile-header .back-button{background:none;border:none;cursor:pointer;color:var(--header-text-color);width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:0;transition:opacity .2s ease}.mobile-header .back-button:before{content:none}.mobile-header .back-button:hover{opacity:.8}.mobile-header .header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;color:var(--header-text-color)}.mobile-header-right{display:flex;align-items:center;gap:8px}.mobile-header button{color:var(--header-text-color)}.refresh-btn-mobile{color:var(--header-text-color)!important}.sidebar-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:990;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.sidebar-overlay.active{opacity:1;visibility:visible}.sidebar{position:fixed;top:0;left:0;height:100%;width:280px;background-color:var(--nav-bg-color, #ffffff);box-shadow:2px 0 12px #00000026;z-index:1000;transform:translate(-100%);transition:transform .3s ease;display:flex;flex-direction:column;overflow-y:auto;padding-top:0}.sidebar.open{transform:translate(0)}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border-color, #eeeeee)}.sidebar-header h2{margin:0;font-size:1.2rem;color:var(--text-color, #333333)}.sidebar-close{background:none;border:none;cursor:pointer;color:var(--text-color, #333333);display:flex;align-items:center;justify-content:center;padding:8px;border-radius:50%}.sidebar-close:hover,.sidebar-close:focus{background-color:#0000000d}.sidebar-nav{flex:1;overflow-y:auto;padding:16px 0;-webkit-overflow-scrolling:touch}.sidebar-menu{list-style:none;margin:0;padding:0}.sidebar-menu li{margin:4px 0}.sidebar-menu li a{display:flex;align-items:center;padding:12px 16px;color:var(--color-primary, #ffffff);text-decoration:none;transition:background-color .2s ease}.sidebar-menu li a:hover,.sidebar-menu li a:focus{background-color:#ffffff1a}.sidebar-menu-icon{margin-right:16px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:inherit}.sidebar-footer{padding:16px;border-top:1px solid var(--border-color, #eeeeee)}.theme-switch{display:flex;align-items:center;justify-content:space-between}.theme-toggle-button{background:none;border:none;cursor:pointer;padding:0}.theme-toggle-track{width:44px;height:24px;background-color:#ccc;border-radius:12px;position:relative;transition:background-color .2s ease}.theme-toggle-track.dark{background-color:var(--color-primary, #ED97B7)}.theme-toggle-thumb{position:absolute;top:2px;left:2px;width:20px;height:20px;background-color:#fff;border-radius:50%;transition:transform .2s ease}.theme-toggle-track.dark .theme-toggle-thumb{transform:translate(20px)}@media(prefers-color-scheme:dark){.mobile-header{--header-bg-color: #1e1e1e;--header-text-color: #ffffff}.sidebar{--card-bg-color: #1e1e1e;--text-color: #ffffff;--border-color: #333333}.mobile-header .sidebar-toggle:hover,.mobile-header .sidebar-toggle:focus,.mobile-header .theme-toggle:hover,.mobile-header .theme-toggle:focus,.sidebar-close:hover,.sidebar-close:focus,.sidebar-menu li a:hover,.sidebar-menu li a:focus{background-color:#ffffff1a}.theme-toggle-track{background-color:#555}}.mobile-permanent-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;background-color:var(--surface-color, #ffffff);border-top:1px solid var(--border-color, #e0e0e0);padding:4px 0;z-index:100;box-shadow:0 -2px 10px #0000000d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .3s ease;padding-bottom:calc(4px + env(safe-area-inset-bottom,0px));padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}.mobile-tab-item{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--text-secondary-color, #757575);font-size:11px;padding:6px 0;width:20%;position:relative;transition:all .2s ease}.mobile-tab-item.active{color:var(--color-primary, #5d7df5);font-weight:500;text-decoration:none}.mobile-tab-item.active:after{content:"";position:absolute;bottom:2px;left:50%;transform:translate(-50%);width:20px;height:2px;background-color:var(--color-primary, #5d7df5);border-radius:1px}.mobile-tab-icon{display:flex;align-items:center;justify-content:center;margin-bottom:2px;font-size:18px}.mobile-tab-label{font-size:10px;line-height:1.2;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.desktop-header{position:fixed;top:0;left:0;right:0;z-index:var(--header-z-index, 1000);background-color:var(--header-bg);box-shadow:0 2px 8px var(--header-shadow);transition:transform var(--header-scroll-transition),box-shadow var(--header-transition),background-color var(--header-transition);height:var(--header-height-desktop)}.desktop-header.scrolled{box-shadow:0 4px 16px var(--header-shadow)}.desktop-header.visible{transform:translateY(0)}.desktop-header.hidden{transform:translateY(-100%)}.desktop-header .header-container{display:flex;align-items:center;padding:var(--header-padding-desktop);height:100%;margin:0 auto}.desktop-content-layout{display:flex;align-items:center;width:100%;gap:var(--header-gap)}.desktop-left{display:flex;align-items:center;flex-shrink:0}.desktop-center{display:flex;align-items:center;justify-content:center;flex:1}.desktop-right{display:flex;align-items:center;flex-shrink:0;gap:var(--spacing-md, 1rem);margin-left:auto}@media(max-width:1200px){.desktop-header .header-container{max-width:100%;padding:0 16px}}@media(max-width:992px){.desktop-content-layout{gap:12px}}:root{--header-height-mobile: 56px;--header-height-desktop: 64px;--header-bg: var(--theme-surface, #ffffff);--header-text: var(--theme-on-surface, #333333);--header-border: var(--theme-outline, #e0e0e0);--header-shadow: var(--theme-shadow, rgba(0, 0, 0, .1));--header-transition: .3s ease;--header-scroll-transition: .2s ease;--header-z-index: 1000;--sidebar-z-index: 1001;--dropdown-z-index: 1002;--header-padding-mobile: 12px 16px;--header-padding-desktop: 16px 24px;--header-gap: 16px;--logo-size-small: 24px;--logo-size-medium: 32px;--logo-size-large: 40px}[data-mode=dark]{--header-bg: var(--theme-surface, #1a1a1a);--header-text: var(--theme-on-surface, #ffffff);--header-border: var(--theme-outline, #333333);--header-shadow: var(--theme-shadow, rgba(255, 255, 255, .1))}.header-base{position:fixed;top:0;left:0;right:0;background-color:var(--header-bg);color:var(--header-text);border-bottom:1px solid var(--header-border);box-shadow:0 2px 8px var(--header-shadow);transition:transform var(--header-scroll-transition),opacity var(--header-scroll-transition);z-index:var(--header-z-index)}.header-base.hidden{transform:translateY(-100%)}.header-base.scrolled{box-shadow:0 4px 16px var(--header-shadow)}.header-container{display:flex;align-items:center;justify-content:space-between;max-width:var(--header-max-width, 100%);margin:0 auto;padding:var(--header-padding-mobile);gap:var(--header-gap)}.logo-container{display:flex;align-items:center;flex-shrink:0}.logo-link,.logo-button{display:flex;align-items:center;text-decoration:none;color:inherit;background:none;border:none;cursor:pointer;padding:0;font:inherit}.logo-container h1{margin:0;font-size:var(--logo-size-medium);font-weight:700;display:flex;align-items:center}.header-nav-menu .nav-list{display:flex;list-style:none;margin:0;padding:0;gap:8px}.header-nav-menu.vertical .nav-list{flex-direction:column}.nav-item{display:flex}.nav-link{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;text-decoration:none;color:inherit;transition:background-color var(--header-transition)}.nav-link:hover{background-color:var(--theme-hover, rgba(0, 0, 0, .04))}.header-actions{display:flex;align-items:center;flex-shrink:0}.header-actions.vertical{flex-direction:column}.back-button{display:flex;align-items:center;gap:8px;background:none;border:none;color:inherit;cursor:pointer;padding:8px;border-radius:8px;transition:background-color var(--header-transition)}.back-button:hover:not(.disabled){background-color:var(--theme-hover, rgba(0, 0, 0, .04))}.back-button.disabled{opacity:.5;cursor:not-allowed}.back-button.size-small{padding:4px}.back-button.size-medium{padding:8px}.back-button.size-large{padding:12px}@media(min-width:768px){.header-container{padding:var(--header-padding-desktop)}.logo-container h1{font-size:var(--logo-size-large)}}@media(max-width:767px){.header-nav-menu.horizontal .nav-list{flex-wrap:wrap}}.skeleton-container{position:relative;width:100%;transition:padding-top var(--header-transition, .3s ease);will-change:padding-top;contain:layout style paint}.skeleton-container--card{background:var(--skeleton-card-bg, var(--background-color, #ffffff));border:1px solid var(--skeleton-border, var(--border-color, #e5e7eb));border-radius:var(--skeleton-border-radius, var(--border-radius-m, 8px));box-shadow:var(--skeleton-shadow, 0 1px 3px rgba(0, 0, 0, .1));padding:var(--skeleton-card-padding, 1rem);margin-bottom:var(--skeleton-card-margin, 1rem)}.skeleton-container--full{background:var(--skeleton-full-bg, var(--background-color, #f9fafb));min-height:100vh}.skeleton-container--inline{display:inline-block;background:transparent;padding:0}.skeleton-container--full-height{min-height:calc(100vh - var(--header-height-current, 64px));display:flex;flex-direction:column}.skeleton-container--safe-area{padding-bottom:env(safe-area-inset-bottom,1rem);padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0)}.skeleton-container--no-offset{padding-top:0!important}.skeleton-container--no-animation{transition:none}.skeleton-container--no-animation *{animation:none!important;transition:none!important}.skeleton-container__content{flex:1;width:100%}.skeleton-container__header{margin-bottom:var(--skeleton-section-spacing, 1.5rem);padding-bottom:var(--skeleton-header-padding, 1rem);border-bottom:1px solid var(--skeleton-divider, var(--border-color, #e5e7eb))}.skeleton-container__body{flex:1;display:flex;flex-direction:column;gap:var(--skeleton-section-spacing, 1.5rem)}.skeleton-container__footer{margin-top:auto;padding-top:var(--skeleton-footer-padding, 1rem);border-top:1px solid var(--skeleton-divider, var(--border-color, #e5e7eb))}@media(max-width:768px){.skeleton-container{padding-left:var(--skeleton-mobile-padding, 1rem);padding-right:var(--skeleton-mobile-padding, 1rem)}.skeleton-container--card{margin-left:calc(-1 * var(--skeleton-mobile-padding, 1rem));margin-right:calc(-1 * var(--skeleton-mobile-padding, 1rem));border-radius:0;border-left:none;border-right:none}.skeleton-container--full-height{min-height:calc(100vh - var(--mobile-header-height, 56px))}.skeleton-container--safe-area{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 1rem)}}@media(min-width:769px)and (max-width:1024px){.skeleton-container{max-width:var(--skeleton-tablet-max-width, 768px);margin-left:auto;margin-right:auto;padding-left:var(--skeleton-tablet-padding, 2rem);padding-right:var(--skeleton-tablet-padding, 2rem)}}@media(min-width:1025px){.skeleton-container{max-width:var(--skeleton-desktop-max-width, 1280px);margin-left:auto;margin-right:auto;padding-left:var(--skeleton-desktop-padding, 2rem);padding-right:var(--skeleton-desktop-padding, 2rem)}}:root{--skeleton-card-bg: #ffffff;--skeleton-full-bg: #f9fafb;--skeleton-border: #e5e7eb;--skeleton-divider: #e5e7eb;--skeleton-shadow: 0 1px 3px rgba(0, 0, 0, .1)}@media(prefers-color-scheme:dark){:root{--skeleton-card-bg: #1f2937;--skeleton-full-bg: #111827;--skeleton-border: #374151;--skeleton-divider: #374151;--skeleton-shadow: 0 1px 3px rgba(0, 0, 0, .3)}}.dark-mode{--skeleton-card-bg: #1f2937;--skeleton-full-bg: #111827;--skeleton-border: #374151;--skeleton-divider: #374151;--skeleton-shadow: 0 1px 3px rgba(0, 0, 0, .3)}.skeleton-container *{will-change:transform,opacity;backface-visibility:hidden;perspective:1000px}.skeleton-container{transform:translateZ(0);contain:layout style paint}.skeleton-container--no-animation *{will-change:auto}.skeleton-container[data-debug=true]{outline:2px dashed #3b82f6;outline-offset:2px}.skeleton-container[data-debug=true]:before{content:"Header Offset: " attr(data-header-offset) " | Full Height: " attr(data-full-height);position:absolute;top:-30px;left:0;background:#3b82f6;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;z-index:9999;white-space:nowrap}@media(prefers-reduced-motion:reduce){.skeleton-container,.skeleton-container *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(prefers-contrast:high){.skeleton-container--card{border-width:2px;border-color:currentColor}.skeleton-container__header,.skeleton-container__footer{border-color:currentColor;border-width:2px}}.smart-rec-card{transition:transform .3s ease,box-shadow .3s ease;max-width:200px}.smart-rec-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-medium)}@media(max-width:768px){.smart-rec-card{max-width:150px}.smart-rec-card:hover{transform:translateY(-2px)}}@media(min-width:769px)and (max-width:1024px){.smart-rec-card{max-width:180px}}.smart-rec-list{width:100%;margin:2rem 0;padding:0 1rem}.smart-rec-list--desktop{max-width:1200px;margin:2rem auto}.smart-rec-list--mobile{padding:0 .5rem;margin:1.5rem 0}.smart-rec-list--tablet{padding:0 .75rem}.smart-rec-list__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;position:relative}.smart-rec-list__title{font-size:1.5rem;font-weight:700;color:var(--text-color);margin:0;position:relative;padding-bottom:.5rem}.smart-rec-list__title:after{content:"";position:absolute;bottom:0;left:0;width:60px;height:3px;background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-primary-light) 100%);border-radius:2px}.smart-rec-list__nav{display:flex;gap:.5rem;opacity:.7;transition:opacity .3s ease}.smart-rec-list:hover .smart-rec-list__nav{opacity:1}.smart-rec-list__nav-btn{width:40px;height:40px;border-radius:50%;border:2px solid var(--color-gray-300);background-color:var(--surface-color);color:var(--text-color);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;transition:all .3s ease;box-shadow:0 2px 8px #0000001a}.smart-rec-list__nav-btn svg{flex-shrink:0}.smart-rec-list__nav-btn:hover{border-color:var(--color-primary);background-color:var(--color-primary);color:#fff;transform:scale(1.05)}.smart-rec-list__nav-btn:disabled{opacity:.3;cursor:not-allowed;transform:none}.smart-rec-list__carousel{position:relative;width:100%;overflow:hidden}.smart-rec-list__carousel .swiper{padding:0 2px}.smart-rec-list__carousel .swiper-slide{height:auto;display:flex;justify-content:center}.smart-rec-list__pagination{display:flex;justify-content:center;margin-top:1.5rem;gap:.5rem}.smart-rec-list__error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;text-align:center;background-color:var(--surface-color);border-radius:var(--border-radius-large);border:2px dashed var(--border-color)}.smart-rec-list__error-icon{color:var(--color-gray-400);margin-bottom:1rem}.smart-rec-list__error-message{font-size:1.125rem;font-weight:600;color:var(--text-color);margin:0 0 .5rem}.smart-rec-list__error-detail{font-size:.875rem;color:var(--text-secondary-color);margin:0 0 1.5rem}.smart-rec-list__retry-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background-color:var(--color-primary);color:#fff;border:none;border-radius:var(--border-radius-medium);font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.smart-rec-list__retry-btn:hover{background-color:var(--color-primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-medium)}.smart-rec-list__retry-btn:active{transform:translateY(0)}.smart-rec-list__loading{width:100%}.smart-rec-list__skeleton-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}.smart-rec-list__skeleton-item{display:flex;flex-direction:column;gap:.5rem}.smart-rec-list__skeleton-image{width:100%;aspect-ratio:3/4;background:linear-gradient(90deg,var(--color-gray-200) 25%,var(--color-gray-300) 50%,var(--color-gray-200) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--border-radius-medium)}.smart-rec-list__skeleton-title{width:100%;height:1rem;background:linear-gradient(90deg,var(--color-gray-200) 25%,var(--color-gray-300) 50%,var(--color-gray-200) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--border-radius-small)}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}@media(max-width:768px){.smart-rec-list__title{font-size:1.25rem}.smart-rec-list__skeleton-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}.smart-rec-list__error{padding:2rem 1rem}}@media(min-width:769px)and (max-width:1024px){.smart-rec-list__skeleton-grid{grid-template-columns:repeat(4,1fr)}}@media(min-width:1025px){.smart-rec-list__skeleton-grid{grid-template-columns:repeat(6,1fr)}}:root{--skeleton-base-color: #ebebeb;--skeleton-highlight-color: #f5f5f5;--skeleton-border-radius: 8px;--skeleton-animation-duration: 1.5s}[data-mode=dark]{--skeleton-base-color: #2a2a2a;--skeleton-highlight-color: #3a3a3a}.comic-detail-skeleton{width:100%;max-width:var(--content-max-width, 1200px);min-height:100vh;background:var(--background-color);margin:0 auto}.comic-detail-skeleton__progress{height:3px;width:30%;background:var(--skeleton-base-color);position:fixed;top:0;left:0;z-index:1000;border-radius:0 3px 3px 0}.comic-detail-skeleton__content{max-width:var(--content-max-width, 1200px);margin:0 auto;padding:var(--content-padding, 16px)}.comic-detail-skeleton__tab-content{margin-top:var(--spacing-m, 16px)}.comic-hero-skeleton{padding:var(--spacing-l, 24px) var(--spacing-m, 16px);background:var(--surface-color);border-radius:var(--border-radius-l, 16px);margin-bottom:var(--spacing-l, 24px)}.comic-hero-skeleton__content{display:flex;gap:var(--spacing-l, 24px)}.comic-hero-skeleton--mobile .comic-hero-skeleton__content{flex-direction:column;gap:var(--spacing-m, 16px)}.comic-hero-skeleton--mobile .comic-hero-skeleton__top{display:flex;gap:var(--spacing-m, 16px)}.comic-hero-skeleton--mobile .comic-hero-skeleton__cover{width:120px;height:160px;flex-shrink:0}.comic-hero-skeleton--mobile .comic-hero-skeleton__info{flex:1;display:flex;flex-direction:column}.comic-hero-skeleton--mobile .comic-hero-skeleton__tags{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:8px}.comic-hero-skeleton--mobile .comic-hero-skeleton__actions{display:flex;align-items:center;gap:12px;margin-top:var(--spacing-m, 16px)}.comic-hero-skeleton--desktop .comic-hero-skeleton__cover{width:200px;height:280px;flex-shrink:0}.comic-hero-skeleton--desktop .comic-hero-skeleton__info{flex:1;display:flex;flex-direction:column}.comic-hero-skeleton--desktop .comic-hero-skeleton__tags{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:var(--spacing-m, 16px) 0}.comic-hero-skeleton--desktop .comic-hero-skeleton__actions{display:flex;align-items:center;gap:16px;margin-top:var(--spacing-l, 24px)}.content-tabs-skeleton{border-bottom:1px solid var(--border-color);margin-bottom:var(--spacing-m, 16px)}.content-tabs-skeleton__nav{display:flex;align-items:center;gap:var(--spacing-l, 24px);padding-bottom:var(--spacing-m, 16px)}.content-tabs-skeleton__tab{display:flex;align-items:center;gap:var(--spacing-s, 8px)}.info-tab-skeleton{max-width:none}.info-tab-skeleton__description{margin-bottom:var(--spacing-l, 24px)}.info-tab-skeleton__metadata{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-m, 16px);margin-bottom:var(--spacing-l, 24px)}.info-tab-skeleton__stats{display:flex;align-items:center;gap:var(--spacing-l, 24px);flex-wrap:wrap}@media(max-width:768px){.comic-detail-skeleton__content{padding:var(--spacing-s, 8px)}.comic-hero-skeleton{padding:var(--spacing-m, 16px);margin-bottom:var(--spacing-m, 16px);border-radius:var(--border-radius-m, 12px)}.content-tabs-skeleton__nav{gap:var(--spacing-m, 16px)}.info-tab-skeleton__metadata{grid-template-columns:1fr;gap:var(--spacing-s, 8px)}.info-tab-skeleton__stats{gap:var(--spacing-m, 16px)}}@media(max-width:480px){.comic-hero-skeleton--mobile .comic-hero-skeleton__top{flex-direction:column;align-items:center;text-align:center}.comic-hero-skeleton--mobile .comic-hero-skeleton__cover{width:100px;height:140px}.comic-hero-skeleton--mobile .comic-hero-skeleton__actions{justify-content:center;flex-wrap:wrap}}.comic-detail-skeleton,.comic-hero-skeleton,.content-tabs-skeleton,.info-tab-skeleton{contain:layout style paint;will-change:auto}.comic-detail-skeleton *{transition:opacity var(--transition-fast, .15s) ease}.comic-detail-skeleton *{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.comic-detail-ad-container{width:33.333%;height:100px!important;max-height:100px!important;margin:0 auto;overflow:hidden!important;background-color:var(--surface-color, #f7f9fc);position:relative}.comic-detail-ad-swiper{width:100%;height:100px!important;max-height:100px!important}.comic-detail-ad-swiper .swiper-wrapper{height:100px!important;max-height:100px!important}.comic-detail-ad-swiper .swiper-slide{height:100px!important;max-height:100px!important;display:flex!important;align-items:center;justify-content:center}.comic-detail-ad-content{width:100%;height:100px!important;max-height:100px!important;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden;transition:transform var(--transition-fast, .15s ease)}.comic-detail-ad-content:hover{transform:scale(1.02)}.comic-detail-ad-content:focus{outline:2px solid var(--color-primary, #5384ff);outline-offset:2px}.comic-detail-ad-image{width:100%;max-width:100%;height:auto;max-height:100px!important;object-fit:contain;display:block}.comic-detail-ad-media{width:100%;max-width:100%;height:auto;max-height:100px!important;object-fit:contain;display:block;background:transparent}.comic-detail-ad-video{background:transparent;object-fit:contain;width:100%;max-width:100%;height:auto;max-height:100px!important}.comic-detail-ad-loading{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.ad-skeleton{width:100%;height:100%;background:linear-gradient(90deg,var(--surface-color, #f7f9fc) 0%,var(--surface-color-hover, #edf1f7) 50%,var(--surface-color, #f7f9fc) 100%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.comic-detail-ad-swiper .swiper-pagination{bottom:8px!important}.comic-detail-ad-swiper .swiper-pagination-bullet{width:8px;height:8px;background-color:#ffffff80;opacity:1;transition:all var(--transition-fast, .15s ease)}.comic-detail-ad-swiper .swiper-pagination-bullet-active{background-color:#ffffffe6;width:20px;border-radius:4px}@media(max-width:768px){.comic-detail-ad-container{margin:0 auto;width:100%;height:110px!important;max-height:110px!important}.comic-detail-ad-swiper,.comic-detail-ad-swiper .swiper-wrapper,.comic-detail-ad-swiper .swiper-slide,.comic-detail-ad-content{height:110px!important;max-height:110px!important}.comic-detail-ad-image,.comic-detail-ad-media,.comic-detail-ad-video{max-height:110px!important}.comic-detail-ad-content:hover{transform:none}}@media(min-width:769px)and (max-width:1024px){.comic-detail-ad-container{width:50%;height:100px!important;max-height:100px!important}.comic-detail-ad-swiper,.comic-detail-ad-swiper .swiper-wrapper,.comic-detail-ad-swiper .swiper-slide,.comic-detail-ad-content{height:100px!important;max-height:100px!important}.comic-detail-ad-image,.comic-detail-ad-media,.comic-detail-ad-video{max-height:100px!important}}@media(prefers-color-scheme:dark){.comic-detail-ad-container{background-color:var(--surface-color, #2c2c2c)}}