.user-guide-page{background:#fff;min-height:100vh;padding:60px 20px 80px;position:relative;overflow:hidden}.page-decoration{position:absolute;top:0;left:0;right:0;height:400px;background:linear-gradient(180deg,#fafafa,#fff);z-index:0}.page-decoration:before{content:"";position:absolute;top:-50%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(255,214,160,.15),transparent 70%);border-radius:50%}.page-decoration:after{content:"";position:absolute;bottom:-30%;left:-5%;width:500px;height:500px;background:radial-gradient(circle,rgba(196,117,35,.1),transparent 70%);border-radius:50%}.user-guide-container{max-width:1200px;margin:0 auto;position:relative;z-index:1}.page-header{text-align:center;margin-bottom:48px;animation:fadeInUp .8s ease}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.header-top{display:inline-flex;align-items:center;gap:12px;background:#fff;border:2px solid #ffd6a0;padding:12px 24px;border-radius:50px;margin-bottom:24px;box-shadow:0 4px 16px rgba(120,71,18,.1)}.header-icon{width:24px;height:24px;color:#784712}.header-label{font-size:14px;font-weight:700;color:#784712;letter-spacing:.5px;text-transform:uppercase}.page-title{font-size:45px;font-weight:800;color:#1a1a1a;margin:0 0 16px;letter-spacing:-1.5px;line-height:1.2}.page-title .highlight{color:#784712;position:relative;display:inline-block}.page-title .highlight:after{content:"";position:absolute;bottom:8px;left:0;right:0;height:12px;background:#ffd6a0;opacity:.4;z-index:-1;border-radius:4px}.page-subtitle{font-size:18px;color:#6c757d;font-weight:400;line-height:1.6;max-width:600px;margin:0 auto}.stats-bar{display:flex;align-items:center;justify-content:center;gap:40px;background:#fff;border:2px solid #e9ecef;border-radius:20px;padding:24px 40px;margin-bottom:48px;box-shadow:0 4px 20px rgba(0,0,0,.06);animation:fadeInUp .8s ease .2s backwards}.stat-item{text-align:center}.stat-number{font-size:32px;font-weight:800;color:#784712;line-height:1;margin-bottom:8px}.stat-label{font-size:13px;font-weight:600;color:#6c757d;text-transform:uppercase;letter-spacing:.5px}.stat-divider{width:2px;height:40px;background:#e9ecef}.video-player-section{animation:fadeInUp .5s ease;margin-bottom:40px}.back-button{display:inline-flex;align-items:center;gap:10px;background:#208c4e;border:2px solid #208c4e;color:#fff;font-size:15px;font-weight:600;padding:12px 24px;border-radius:12px;cursor:pointer;transition:all .3s ease;margin-bottom:24px}.back-button svg{width:20px;height:20px;transition:transform .3s ease;stroke:currentColor}.back-button:hover{background:#c47523;border-color:#c47523;color:#fff;transform:translateX(-4px)}.back-button:hover svg{transform:translateX(-2px)}.back-button:active{transform:translateX(-2px) scale(.97)}.video-player-container{background:#fff;border:2px solid #e9ecef;border-radius:24px;overflow:hidden;box-shadow:0 12px 40px rgba(120,71,18,.12)}.video-iframe-wrapper{position:relative;width:100%;padding-bottom:56.25%;background:#000}.video-iframe-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.video-player-content{padding:32px 40px}.video-player-header{margin-bottom:20px}.video-player-title{font-size:32px;font-weight:700;color:#1a1a1a;margin-bottom:20px;line-height:1.3;letter-spacing:-.5px}.video-player-description{font-size:16px;color:#6c757d;line-height:1.7;margin-bottom:0}.guides-list{display:flex;flex-direction:column;gap:32px}.guide-item{background:#fff;border:2px solid #e9ecef;border-radius:24px;overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1);animation:slideInUp .6s ease backwards}.guide-item:hover{border-color:#ffd6a0}.guide-item:hover .thumbnail-image{transform:scale(1.05)}.guide-item:hover .play-circle{transform:scale(1.15)}@keyframes slideInUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.guide-row{display:grid;grid-template-columns:400px 1fr;grid-gap:0;gap:0}@media(max-width:968px){.guide-row{grid-template-columns:1fr}}.video-section{position:relative}.video-wrapper{padding:24px;height:100%;display:flex;flex-direction:column;gap:16px}.video-thumbnail{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;cursor:pointer;background:linear-gradient(135deg,#1a1a2e,#16213e);transition:opacity 2s ease}.thumbnail-image{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.play-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity 2s ease}.video-thumbnail:hover .play-overlay{opacity:1;background:linear-gradient(135deg,rgba(120,71,18,.7),rgba(196,117,35,.7));transition:opacity 2s ease}.play-circle{width:70px;height:70px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:all .3s ease}.play-circle svg{width:28px;height:28px;color:#784712;margin-left:3px}.video-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ffd6a0,rgba(255,214,160,.5))}.video-placeholder svg{width:64px;height:64px;color:#784712;stroke-width:1.5}.watch-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#784712;color:#fff;font-size:15px;font-weight:700;padding:14px 28px;border-radius:12px;text-decoration:none;transition:all .3s ease;box-shadow:0 4px 16px rgba(120,71,18,.2);border:none;cursor:pointer}.watch-button:hover{background:#c47523;transform:translateX(4px);color:#fff}.watch-button:active{transform:scale(.98)}.button-icon{width:18px;height:18px}.content-section{padding:32px 36px;display:flex;flex-direction:column;justify-content:center}.guide-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:16px;flex-wrap:wrap}.guide-badge{display:inline-block;background:linear-gradient(135deg,#784712,#c47523);color:#fff;font-size:12px;font-weight:700;padding:8px 18px;border-radius:20px;letter-spacing:.5px;text-transform:uppercase;box-shadow:0 4px 12px rgba(120,71,18,.25)}.guide-status{display:inline-flex;align-items:center;gap:6px;color:#208c4e;font-size:14px;font-weight:600}.guide-status svg{width:20px;height:20px}.guide-title{font-size:28px;font-weight:700;color:#1a1a1a;margin-bottom:16px;line-height:1.3;letter-spacing:-.5px}.guide-description{font-size:16px;color:#6c757d;line-height:1.7;margin-bottom:24px;transition:all .3s ease}.guide-features{display:flex;flex-wrap:wrap;gap:12px}.feature-tag{display:inline-flex;align-items:center;gap:6px;background:#fafafa;border:1px solid #e9ecef;color:#1a1a1a;font-size:13px;font-weight:600;padding:8px 16px;border-radius:20px;transition:all .3s ease}.feature-tag svg{width:16px;height:16px;color:#784712;stroke-width:2}.feature-tag:hover{background:#ffd6a0;border-color:#784712;transform:translateY(-2px)}.show-more-btn{background:none;border:none;color:#c47523;font-weight:600;margin-top:6px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:color .3s ease;font-size:14px;padding:0}.show-more-btn:hover{color:#784712}.show-more-btn .arrow{width:16px;height:16px;transition:transform .3s ease}.show-more-btn .arrow.up{transform:rotate(180deg)}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;gap:32px}.loading-circles{display:flex;gap:12px}.circle{width:16px;height:16px;border-radius:50%;animation:bounce 1.4s ease-in-out infinite}.circle-1{background:#784712;animation-delay:0s}.circle-2{background:#c47523;animation-delay:.2s}.circle-3{background:#ffd6a0;animation-delay:.4s}@keyframes bounce{0%,80%,to{transform:scale(0);opacity:.5}40%{transform:scale(1);opacity:1}}.loading-text{font-size:18px;font-weight:600;color:#6c757d}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;gap:28px;animation:fadeIn .6s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.empty-illustration{width:200px;height:200px;animation:float 3s ease-in-out infinite}.empty-illustration svg{width:100%;height:100%}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-16px)}}.empty-title{font-size:28px;font-weight:700;color:#1a1a1a;margin:0}.empty-text{font-size:16px;color:#6c757d;margin:0}@media(max-width:1024px){.page-title{font-size:44px}.stats-bar{gap:28px;padding:20px 32px}.stat-number{font-size:28px}}@media(max-width:968px){.guide-row{grid-template-columns:1fr}.video-section{border-bottom:2px solid #e9ecef}.content-section{padding:28px 32px}}@media(max-width:768px){.user-guide-page{padding:40px 16px 60px}.page-title{font-size:36px}.page-subtitle{font-size:16px}.stats-bar{flex-direction:column;gap:20px;padding:24px}.stats-bar .stat-divider{width:100%;height:2px}.guides-list{gap:24px}.guide-item{border-radius:20px}.video-wrapper{padding:20px}.content-section{padding:24px}.guide-title{font-size:24px}.guide-description{font-size:15px}.video-player-content{padding:24px}.video-player-title{font-size:26px}}@media(max-width:480px){.user-guide-page{padding:32px 12px 50px}.page-title{font-size:32px}.page-subtitle{font-size:14px}.header-top{padding:10px 20px}.content-section{padding:20px}.guide-title{font-size:22px}.guide-meta{flex-direction:column;align-items:flex-start}.watch-button{width:100%;font-size:14px}.feature-tag{font-size:12px;padding:6px 12px}.back-button{font-size:14px;padding:10px 20px}.video-player-content{padding:20px}.video-player-title{font-size:22px}.video-player-description{font-size:15px}}