@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap);.mp{background:#f5f5f7;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Pretendard,sans-serif;min-height:100vh}.mp-header{background:#fff;border-bottom:1px solid #0000000f;padding:3rem 1.5rem}.mp-header-content{margin:0 auto;max-width:800px;text-align:center}.mp-title{color:#1d1d1f;font-size:2rem;font-weight:700;letter-spacing:-.03em;margin:0 0 .5rem}.mp-subtitle{color:#86868b;font-size:1rem;font-weight:400;margin:0 0 1.5rem}.mp-links{display:flex;gap:.75rem;justify-content:center}.mp-link{align-items:center;background:#f5f5f7;border-radius:100px;color:#1d1d1f;display:inline-flex;font-size:14px;font-weight:500;gap:6px;padding:10px 18px;text-decoration:none;transition:all .2s ease}.mp-link:hover{background:#e8e8ed}.mp-link svg{height:16px;width:16px}.mp-link-kakao{background:#fee500;color:#191919}.mp-link-kakao:hover{background:#ffeb3b}.mp-main{margin:0 auto;max-width:800px;padding:2rem 1.5rem 6rem}.mp-section{margin-bottom:3rem}.mp-section-title{color:#6366f1;display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;margin:0 0 1.25rem;padding-left:4px;position:relative;text-transform:uppercase}.mp-section-title:after{background:linear-gradient(90deg,#6366f1,#0000);bottom:-4px;content:"";height:2px;left:0;position:absolute;width:100%}.mp-grid{grid-gap:1.25rem;display:grid;gap:1.25rem;grid-template-columns:repeat(2,1fr)}.mp-featured-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(2,1fr)}.mp-card{background:#fff;border-radius:20px;box-shadow:0 0 0 1px #0000000a,0 2px 8px #0000000a,0 4px 16px #00000005;display:flex;flex-direction:column;overflow:hidden;padding:1.5rem;position:relative;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1)}.mp-card:before{background:linear-gradient(135deg,#8b5cf608,#6366f108);bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease}.mp-card:hover{box-shadow:0 0 0 1px #0000000a,0 8px 24px #00000014,0 16px 48px #0000000a;transform:translateY(-4px) scale(1.01)}.mp-card:hover:before{opacity:1}.mp-card:active{transform:translateY(-2px) scale(1.005)}.mp-card-icon{align-items:center;border-radius:14px;display:flex;font-size:1.5rem;height:48px;justify-content:center;margin-bottom:1rem;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);width:48px;z-index:1}.mp-card:hover .mp-card-icon{transform:scale(1.1) rotate(5deg)}.mp-card-icon svg{height:24px;transition:transform .3s ease;width:24px}.mp-card:hover .mp-card-icon svg{transform:scale(1.1)}.mp-card-icon-jobs{background:linear-gradient(135deg,#7c3aed,#8b5cf6 30%,#a78bfa 60%,#c4b5fd);border:1px solid #ffffff1a;box-shadow:0 8px 24px #8b5cf666,0 4px 12px #a855f74d,inset 0 1px 0 #fff3,inset 0 -1px 0 #0003;color:#fff;overflow:hidden;position:relative}.mp-card-icon-jobs:before{animation:shimmer 3s infinite;background:linear-gradient(45deg,#0000 30%,#ffffff1a 50%,#0000 70%);content:"";height:200%;left:-50%;position:absolute;top:-50%;width:200%}.mp-card-icon-coral{background:linear-gradient(135deg,#ff6b6b,#ff8e8e 50%,#ffb4b4);box-shadow:0 4px 16px #ff6b6b4d}.mp-card-icon-green{background:linear-gradient(135deg,#10b981,#34d399 50%,#6ee7b7);box-shadow:0 4px 16px #10b9814d}.mp-card-icon-blue{background:linear-gradient(135deg,#3b82f6,#60a5fa 50%,#93c5fd);box-shadow:0 4px 16px #3b82f64d}.mp-card-icon-purple{background:linear-gradient(135deg,#ec4899,#d946ef 30%,#a855f7 60%,#8b5cf6);border:1px solid #ffffff1a;box-shadow:0 8px 24px #ec489966,0 4px 12px #d946ef4d,inset 0 1px 0 #fff3,inset 0 -1px 0 #0003;color:#fff;overflow:hidden;position:relative}.mp-card-icon-purple:before{animation:shimmer-pink 3s infinite;background:linear-gradient(45deg,#0000 30%,#ffffff26 50%,#0000 70%);content:"";height:200%;left:-50%;position:absolute;top:-50%;width:200%}@keyframes shimmer-pink{0%{transform:translateX(-100%) translateY(-100%) rotate(45deg)}to{transform:translateX(100%) translateY(100%) rotate(45deg)}}.mp-card:hover .mp-card-icon{box-shadow:0 8px 24px #8b5cf666}.mp-card-content{flex:1 1}.mp-card-content h3{color:#1d1d1f;font-size:1.1rem;font-weight:600;letter-spacing:-.01em;margin:0 0 .25rem}.mp-card-content p{color:#86868b;font-size:.875rem;line-height:1.4;margin:0}.mp-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:1rem;position:relative;z-index:1}.mp-tag{background:linear-gradient(135deg,#f5f5f7,#e8e8ed);border:1px solid #6366f11a;border-radius:8px;color:#6366f1;font-size:12px;font-weight:600;padding:6px 12px;transition:all .3s ease}.mp-card:hover .mp-tag{background:linear-gradient(135deg,#e8e8ed,#dcdce5);border-color:#6366f133;transform:translateY(-1px)}.mp-skeleton{animation:shimmer 1.5s infinite;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;border-radius:8px}.mp-skeleton-card{border-radius:20px;height:180px}.mp-skeleton-text{height:16px;margin-bottom:8px}.mp-skeleton-title{height:24px;margin-bottom:12px;width:60%}.mp-card-featured{background:linear-gradient(135deg,#0a0e27,#1a1f3a 25%,#2d1b4e 50%,#1e1b4b 75%,#0f172a);border:1px solid #8b5cf626;overflow:hidden;padding:2rem;position:relative}.mp-card-featured:before{background:radial-gradient(circle at 20% 50%,#8b5cf626 0,#0000 50%),radial-gradient(circle at 80% 80%,#6366f11f 0,#0000 50%),linear-gradient(135deg,#8b5cf614,#6366f114);bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .5s cubic-bezier(.4,0,.2,1)}.mp-card-featured:after{background:repeating-linear-gradient(0deg,#0000,#0000 2px,#8b5cf608 0,#8b5cf608 4px);bottom:-50%;content:"";left:-50%;opacity:.5;pointer-events:none;position:absolute;right:-50%;top:-50%}.mp-card-featured:hover:before{opacity:1}.mp-card-featured:hover{border-color:#8b5cf64d;box-shadow:0 0 0 1px #8b5cf64d,0 16px 40px #0006,0 32px 80px #0000004d,0 0 120px #8b5cf640,inset 0 1px 0 #ffffff1a;transform:translateY(-6px) scale(1.01)}.mp-card-featured:active{transform:translateY(-4px) scale(1.005)}.mp-card-badge{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:linear-gradient(135deg,gold,#ffc107f2 50%,#ffb300e6);border:1px solid #fff6;border-radius:100px;box-shadow:0 4px 12px #ffd70080,0 2px 6px #ffc1074d,inset 0 1px 0 #ffffff80,inset 0 -1px 0 #0000001a;color:#1a1a2e;font-size:11px;font-weight:800;letter-spacing:.08em;padding:8px 16px;position:absolute;right:1.25rem;text-transform:uppercase;top:1.25rem;transition:all .4s cubic-bezier(.4,0,.2,1);z-index:2}.mp-card-featured:hover .mp-card-badge{box-shadow:0 6px 20px #ffd70099,0 4px 12px #ffc10766,inset 0 1px 0 #fff9;transform:scale(1.08) translateY(-2px)}.mp-card-featured .mp-card-content h3{color:#fff;font-size:1.25rem}.mp-card-featured .mp-card-content p{color:#fff9}.mp-card-stat{align-items:baseline;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#8b5cf61a;border:1px solid #8b5cf633;border-radius:16px;display:flex;gap:12px;margin-top:1.5rem;padding:1rem 1.25rem;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1);z-index:1}.mp-card-featured:hover .mp-card-stat{background:#8b5cf626;border-color:#8b5cf64d;box-shadow:0 8px 16px #8b5cf633;transform:translateY(-2px)}.mp-stat-number{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#fff,#f0e7ff 30%,#e9d5ff 60%,#d8b4fe);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 8px rgba(139,92,246,.3));font-size:2.75rem;font-weight:800;letter-spacing:-.04em;line-height:1;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1)}.mp-stat-number:after{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#fffc,#fff6);-webkit-background-clip:text;background-clip:text;content:attr(data-value);left:0;opacity:0;position:absolute;top:0;transition:opacity .4s ease}.mp-card-featured:hover .mp-stat-number{filter:drop-shadow(0 4px 16px rgba(139,92,246,.5));transform:scale(1.08)}.mp-card-featured:hover .mp-stat-number:after{opacity:.3}.mp-stat-label{color:#ffffffb3;font-size:.95rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;transition:color .3s ease}.mp-card-featured:hover .mp-stat-label{color:#ffffffe6}.mp-card-arrow{align-items:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#8b5cf633;border:1.5px solid #8b5cf64d;border-radius:50%;bottom:1.75rem;box-shadow:0 4px 12px #8b5cf633,inset 0 1px 0 #ffffff1a;color:#fff;display:flex;height:44px;justify-content:center;position:absolute;right:1.75rem;transition:all .4s cubic-bezier(.4,0,.2,1);width:44px}.mp-card-arrow svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));height:18px;transition:transform .4s cubic-bezier(.4,0,.2,1);width:18px}.mp-card-featured:hover .mp-card-arrow{background:#8b5cf659;border-color:#8b5cf680;box-shadow:0 8px 20px #8b5cf666,inset 0 1px 0 #ffffff26;transform:translateX(8px) scale(1.15)}.mp-card-featured:hover .mp-card-arrow svg{transform:translateX(3px)}.mp-card-featured-ui{background:linear-gradient(135deg,#fdf4ff,#fae8ff 25%,#f5d0fe 50%,#f0abfc 75%,#e879f9);border:1px solid #ec489933;box-shadow:0 0 0 1px #ec48991a,0 4px 16px #ec489926,0 8px 32px #d946ef1a}.mp-card-featured-ui:before{background:radial-gradient(circle at 20% 50%,#ec489926 0,#0000 50%),radial-gradient(circle at 80% 80%,#d946ef1f 0,#0000 50%),linear-gradient(135deg,#a855f714,#ec489914)}.mp-card-featured-ui:after{background:repeating-linear-gradient(0deg,#0000,#0000 2px,#ec48990a 0,#ec48990a 4px);opacity:.6}.mp-card-featured-ui:hover{border-color:#ec48994d;box-shadow:0 0 0 1px #ec48994d,0 16px 40px #ec489940,0 32px 80px #d946ef33,0 0 120px #ec489933,inset 0 1px 0 #fff9;transform:translateY(-6px) scale(1.01)}.mp-card-featured-ui .mp-card-content h3{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#be185d,#db2777 30%,#ec4899 60%,#f472b6);-webkit-background-clip:text;background-clip:text;font-weight:700}.mp-card-featured-ui .mp-card-content p{color:#9d174db3;font-weight:500}.mp-card-featured-ui .mp-card-arrow{background:#ec489926;border-color:#ec489940;box-shadow:0 4px 12px #ec489933,inset 0 1px 0 #ffffff4d}.mp-card-featured-ui .mp-card-arrow svg{color:#be185d;filter:drop-shadow(0 1px 2px rgba(236,72,153,.3))}.mp-card-featured-ui:hover .mp-card-arrow{background:#ec489940;border-color:#ec489966;box-shadow:0 8px 20px #ec489959,inset 0 1px 0 #fff6}.mp-card-featured-ui .mp-card-badge{background:linear-gradient(135deg,#ff69b4f2,#ff1493e6 50%,#db2777e6);border:1px solid #ffffff80;box-shadow:0 4px 12px #ec489980,0 2px 6px #d946ef4d,inset 0 1px 0 #ffffff80,inset 0 -1px 0 #0000001a;color:#fff}.mp-card-featured-ui:hover .mp-card-badge{background:linear-gradient(135deg,#ff69b4,#ff1493f2 50%,#db2777f2);box-shadow:0 6px 20px #ec489999,0 4px 12px #d946ef66,inset 0 1px 0 #fff9}.mp-card-fun{align-items:center;background:linear-gradient(135deg,#fff5e6,#ffe8cc 50%,#ffe0b8);overflow:hidden;padding:2rem 1.5rem;position:relative;text-align:center}.mp-card-fun:before{background:radial-gradient(circle at top right,#ff98001a,#0000 50%);bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease}.mp-card-fun:hover:before{opacity:1}.mp-card-fun:hover{background:linear-gradient(135deg,#fff0d9,#ffe0b8 50%,#ffd699)}.mp-card-emoji{display:inline-block;font-size:3rem;margin-bottom:1rem;transition:transform .3s cubic-bezier(.4,0,.2,1)}.mp-card-fun:hover .mp-card-emoji{transform:scale(1.15) rotate(-5deg)}.mp-card-fun .mp-card-content h3{color:#1d1d1f}.mp-card-fun .mp-card-content p{color:#666}.mp-card-cta{background:linear-gradient(135deg,#ff6b35,#ff8e53);border:1px solid #fff3;border-radius:100px;box-shadow:0 4px 12px #ff6b354d;color:#fff;display:inline-block;font-size:14px;font-weight:600;margin-top:1rem;padding:12px 24px;transition:all .3s cubic-bezier(.4,0,.2,1)}.mp-card-fun:hover .mp-card-cta{background:linear-gradient(135deg,#e55a2b,#ff7043);box-shadow:0 6px 16px #ff6b3566;transform:scale(1.05)}.mp-card-fun:active .mp-card-cta{transform:scale(1.02)}.mp-card-games{background:linear-gradient(135deg,#1e1b4b,#312e81 40%,#4c1d95);border:1px solid #8b5cf64d}.mp-card-games .mp-card-content h3{color:#fff}.mp-card-games .mp-card-content p{color:#ffffffb3}.mp-card-games .mp-card-emoji{filter:drop-shadow(0 4px 8px rgba(139,92,246,.4))}.mp-card-games .mp-card-cta{background:linear-gradient(135deg,#7c3aed,#8b5cf6);box-shadow:0 4px 12px #7c3aed66}.mp-card-games:hover{background:linear-gradient(135deg,#1e1b4b,#3730a3 40%,#5b21b6)}.mp-card-games-full{width:100%}.mp-card-games:hover .mp-card-cta{background:linear-gradient(135deg,#6d28d9,#7c3aed);box-shadow:0 6px 16px #7c3aed80}.mp-footer{background:#fff;border-top:1px solid #0000000f;bottom:0;left:0;position:fixed;right:0}.mp-footer-link{align-items:center;color:#86868b;display:flex;font-size:14px;font-weight:500;gap:8px;justify-content:center;padding:1rem;text-decoration:none;transition:all .2s ease}.mp-footer-link:hover{background:#f5f5f7;color:#1d1d1f}.mp-footer-link svg{transition:transform .2s ease}.mp-footer-link:hover svg{transform:translateX(4px)}@media (max-width:600px){.mp-header{padding:2rem 1rem}.mp-title{font-size:1.5rem}.mp-main{padding:1.5rem 1rem 5rem}.mp-featured-grid,.mp-grid{gap:1.25rem;grid-template-columns:1fr}.mp-card{min-height:120px;padding:1.5rem}.mp-card-featured{min-height:180px;padding:2rem}.mp-card-icon{height:52px;width:52px}.mp-card-arrow{bottom:1.75rem;height:40px;right:1.75rem;width:40px}.mp-card-arrow svg{height:18px;width:18px}.mp-stat-number{font-size:2rem}.mp-card-fun{min-height:200px;padding:2rem 1.5rem}.mp-card-emoji{font-size:2.75rem}.mp-card-cta{font-size:15px;min-height:44px;min-width:120px;padding:14px 28px}.mp-link{min-height:44px;padding:12px 20px}}@media (min-width:768px){.mp-header{padding:4rem 2rem}.mp-title{font-size:2.5rem}.mp-main{padding:3rem 2rem 6rem}.mp-card{padding:1.75rem}.mp-card-featured{padding:2.5rem}.mp-card-icon{font-size:1.75rem;height:56px;width:56px}.mp-card-content h3{font-size:1.2rem}}.mp-category-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(2,1fr);margin:0 auto;max-width:900px}.mp-category-card{align-items:center;border-radius:24px;box-shadow:0 4px 16px #0000001a,0 8px 32px #0000000d;color:#fff;display:flex;flex-direction:column;justify-content:center;min-height:280px;overflow:hidden;padding:3rem 2rem;position:relative;text-decoration:none;transition:all .4s cubic-bezier(.4,0,.2,1)}.mp-category-card:before{background:radial-gradient(circle at top right,#ffffff1a,#0000 50%);bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .4s ease}.mp-category-card:hover{box-shadow:0 12px 32px #00000026,0 24px 64px #0000001a;transform:translateY(-8px) scale(1.02)}.mp-category-card:hover:before{opacity:1}.mp-category-icon{margin-bottom:1.5rem;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1);z-index:1}.mp-category-card:hover .mp-category-icon{transform:scale(1.1) translateY(-8px)}.mp-category-content{position:relative;text-align:center;z-index:1}.mp-category-content h3{color:#fff;font-size:1.75rem;font-weight:700;letter-spacing:-.02em;margin:0 0 .75rem;transition:all .3s ease}.mp-category-content p{font-size:1rem;line-height:1.5;margin:0;opacity:.9;transition:all .3s ease}.mp-category-card:hover .mp-category-content h3{transform:translateY(-2px)}.mp-category-card:hover .mp-category-content p{opacity:1}.mp-category-arrow{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border:2px solid #ffffff4d;border-radius:50%;bottom:2rem;color:#fff;display:flex;height:48px;justify-content:center;position:absolute;right:2rem;transition:all .4s cubic-bezier(.4,0,.2,1);width:48px}.mp-category-arrow svg{transition:transform .4s cubic-bezier(.4,0,.2,1)}.mp-category-card:hover .mp-category-arrow{background:#ffffff4d;border-color:#ffffff80;transform:translateX(8px) scale(1.1)}.mp-category-card:hover .mp-category-arrow svg{transform:translateX(4px)}@media (max-width:768px){.mp-category-grid{gap:1.5rem;grid-template-columns:1fr}.mp-category-card{min-height:240px;padding:2.5rem 2rem}.mp-category-content h3{font-size:1.5rem}.mp-category-content p{font-size:.95rem}.mp-category-arrow{bottom:1.5rem;height:44px;right:1.5rem;width:44px}}.gp{background:#f5f5f7;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Pretendard,sans-serif;min-height:100vh}.gp-header{background:#fff;border-bottom:1px solid #0000000f;padding:2rem 1.5rem}.gp-header-content{margin:0 auto;max-width:800px}.gp-back{align-items:center;color:#86868b;display:inline-flex;font-size:14px;font-weight:500;gap:6px;margin-bottom:1.5rem;text-decoration:none;transition:color .2s ease}.gp-back:hover{color:#1d1d1f}.gp-back svg{height:16px;width:16px}.gp-header-title{align-items:center;display:flex;gap:1rem}.gp-header-icon{filter:drop-shadow(0 4px 8px rgba(0,0,0,.1));font-size:3rem;line-height:1}.gp-title{color:#1d1d1f;font-size:1.75rem;font-weight:700;letter-spacing:-.03em;margin:0 0 .25rem}.gp-subtitle{color:#86868b;font-size:.9rem;margin:0}.gp-main{margin:0 auto;max-width:800px;padding:2rem 1.5rem 4rem}.gp-grid{grid-gap:1.25rem;display:grid;gap:1.25rem;grid-template-columns:repeat(2,1fr)}.gp-card{border-radius:20px;box-shadow:0 0 0 1px #0000000a,0 2px 8px #0000000f;display:flex;flex-direction:column;overflow:hidden;padding:1.75rem 1.5rem 1.5rem;position:relative;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1)}.gp-card:hover{box-shadow:0 0 0 1px #0000000a,0 12px 32px #0000001f,0 20px 48px #0000000f;transform:translateY(-5px) scale(1.01)}.gp-card:active{transform:translateY(-2px) scale(1.005)}.gp-card-orange{background:linear-gradient(145deg,#fff8f0,#fff0d9 60%,#ffe8c0)}.gp-card-green{background:linear-gradient(145deg,#f0fdf4,#dcfce7 60%,#bbf7d0)}.gp-card-pink{background:linear-gradient(145deg,#fdf2f8,#fce7f3 60%,#fbcfe8)}.gp-card-blue{background:linear-gradient(145deg,#eff6ff,#dbeafe 60%,#bfdbfe)}.gp-card-purple{background:linear-gradient(145deg,#faf5ff,#ede9fe 60%,#ddd6fe)}.gp-card-teal{background:linear-gradient(145deg,#f0fdfa,#ccfbf1 60%,#99f6e4)}.gp-card-dark{background:linear-gradient(145deg,#1e293b,#0f172a 60%,#020617)}.gp-card-emoji{display:inline-block;font-size:3rem;line-height:1;margin-bottom:1rem;transition:transform .3s cubic-bezier(.4,0,.2,1)}.gp-card:hover .gp-card-emoji{transform:scale(1.15) rotate(-5deg)}.gp-card-body{flex:1 1}.gp-card-title{color:#1d1d1f;font-size:1.1rem;font-weight:700;letter-spacing:-.01em;margin:0 0 .375rem}.gp-card-dark .gp-card-title{color:#fff}.gp-card-desc{color:#6b7280;font-size:.85rem;line-height:1.5;margin:0 0 .875rem}.gp-card-dark .gp-card-desc{color:#fff9}.gp-card-tags{display:flex;flex-wrap:wrap;gap:6px}.gp-tag{background:#0000000f;border-radius:100px;color:#374151;font-size:11px;font-weight:600;padding:4px 10px;transition:background .2s ease}.gp-card-dark .gp-tag{background:#ffffff1f;color:#fffc}.gp-card:hover .gp-tag{background:#0000001a}.gp-card-dark:hover .gp-tag{background:#ffffff2e}.gp-card-play{align-items:center;background:#0000000f;border-radius:12px;color:#374151;display:flex;font-size:13px;font-weight:600;justify-content:space-between;margin-top:1.25rem;padding:.625rem 1rem;transition:all .2s ease}.gp-card-dark .gp-card-play{background:#ffffff1a;color:#ffffffe6}.gp-card-play svg{height:16px;transition:transform .2s ease;width:16px}.gp-card:hover .gp-card-play{background:#0000001a}.gp-card-dark:hover .gp-card-play{background:#ffffff29}.gp-card:hover .gp-card-play svg{transform:translateX(4px)}@media (max-width:600px){.gp-header{padding:1.5rem 1rem}.gp-title{font-size:1.4rem}.gp-header-icon{font-size:2.25rem}.gp-main{padding:1.5rem 1rem 3rem}.gp-grid{gap:1rem;grid-template-columns:1fr}.gp-card{padding:1.5rem}.gp-card-emoji{font-size:2.5rem}}@media (min-width:768px){.gp-header{padding:3rem 2rem}.gp-title{font-size:2rem}.gp-main{padding:2.5rem 2rem 5rem}.gp-card{padding:2rem 1.75rem 1.75rem}.gp-card-emoji{font-size:3.25rem}}.category-page{color:var(--text-primary);margin:0 auto;max-width:1200px;min-height:100vh;padding:2rem}.category-header{margin-bottom:3rem;text-align:center}.category-icon{align-items:center;border-radius:20px;box-shadow:0 4px 12px #00000026;display:flex;height:80px;justify-content:center;margin:0 auto 1.5rem;width:80px}.category-title{color:var(--text-primary);font-size:2.5rem;font-weight:700;margin-bottom:.75rem}.category-description{color:var(--text-secondary);font-size:1.125rem;margin:0 auto;max-width:600px}.category-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-bottom:3rem}.category-card{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;color:#333;display:flex;flex-direction:column;gap:1rem;padding:1.5rem;position:relative;text-decoration:none;transition:all .3s ease}.category-card:hover{box-shadow:0 8px 24px #00000026;transform:translateY(-4px)}.category-card-icon{align-items:center;border-radius:10px;display:flex;height:48px;justify-content:center;width:48px}.category-card-emoji{font-size:48px;line-height:1}.category-card-content h3{color:#1a1a1a;font-size:1.25rem;font-weight:600;margin:0 0 .5rem}.category-card-content p{color:#666;font-size:.95rem;line-height:1.5;margin:0}.category-card-stat{align-items:baseline;display:flex;gap:.5rem;margin-top:.75rem}.stat-number{color:#3b82f6;font-size:1.75rem;font-weight:700}.stat-label{color:#666;font-size:.875rem}.category-card-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}.category-tag{border-radius:12px;color:#6b7280;font-size:.8rem;font-weight:500;padding:.25rem .75rem}.category-card-cta,.category-tag{background:#f3f4f6;display:inline-block}.category-card-cta{border-radius:8px;color:#374151;font-size:.9rem;font-weight:600;margin-top:auto;padding:.5rem 1rem;text-align:center;transition:all .2s ease}.category-card:hover .category-card-cta{background:#e5e7eb}.category-card-badge{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;color:#fff;font-size:.75rem;font-weight:600;letter-spacing:.5px;padding:.25rem .75rem;position:absolute;right:1rem;text-transform:uppercase;top:1rem}.category-card-featured{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#667eea,#764ba2) border-box;border:2px solid #0000}.category-card-arrow{bottom:1.5rem;opacity:.5;position:absolute;right:1.5rem;transition:all .3s ease}.category-card:hover .category-card-arrow{opacity:1;transform:translateX(4px)}.category-card-game{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.category-card-game .category-card-content h3,.category-card-game .category-card-content p{color:#fff}.category-card-game .category-card-cta{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;color:#fff}.category-card-game:hover .category-card-cta{background:#ffffff4d}.category-card-fun{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff}.category-card-fun .category-card-content h3,.category-card-fun .category-card-content p{color:#fff}.category-card-fun .category-card-cta{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;color:#fff}.category-card-fun:hover .category-card-cta{background:#ffffff4d}.category-note{margin-top:2rem;text-align:center}.back-to-home{align-items:center;background:#fff;border:2px solid #e5e7eb;border-radius:10px;color:#374151;display:inline-flex;font-weight:600;gap:.5rem;margin-top:2rem;padding:.75rem 1.5rem;text-decoration:none;transition:all .3s ease}.back-to-home:hover{background:#f9fafb;border-color:#d1d5db;transform:translateX(-4px)}@media (max-width:768px){.category-page{padding:1.5rem}.category-title{font-size:2rem}.category-description{font-size:1rem}.category-grid{gap:1rem;grid-template-columns:1fr}.category-icon{height:64px;width:64px}}.back-button-common{background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;color:#333;font-size:14px;font-weight:500;left:16px;padding:8px 16px;position:fixed;text-decoration:none;top:16px;transition:all .2s;z-index:100}.back-button-common:hover{background:#f0f0f0;box-shadow:0 4px 12px #00000026;color:#333;text-decoration:none}.page-footer{border-top:1px solid #0000000f;bottom:0;box-shadow:0 -2px 8px #0000000d;display:flex;justify-content:space-between;left:0;padding:1rem 1.5rem;position:fixed;right:0;z-index:99}.page-footer,.page-footer-btn{align-items:center;background:#fff}.page-footer-btn{border:1px solid #0000000f;border-radius:8px;box-shadow:0 2px 8px #0000001a;color:#333;display:inline-flex;font-size:14px;font-weight:500;gap:6px;padding:10px 18px;text-decoration:none;transition:all .2s cubic-bezier(.4,0,.2,1)}.page-footer-btn:hover{background:#f0f0f0;box-shadow:0 4px 12px #00000026;color:#333;text-decoration:none;transform:translateY(-1px)}.page-footer-btn:active{box-shadow:0 2px 6px #0000001f;transform:translateY(0)}.page-footer-commits{color:#86868b}.page-footer-commits:hover{color:#1d1d1f}@media (max-width:600px){.page-footer{padding:.75rem 1rem}.page-footer-btn{font-size:13px;min-height:44px;padding:10px 16px}}@media (prefers-color-scheme:dark){.page-footer{background:#1a1a1a;background:var(--bg-secondary,#1a1a1a);border-top-color:#ffffff1a}.page-footer-btn{background:#2a2a2a;background:var(--bg-tertiary,#2a2a2a);border-color:#ffffff1a}.page-footer-btn,.page-footer-btn:hover{color:#e5e5e5;color:var(--text-primary,#e5e5e5)}.page-footer-btn:hover{background:#353539;background:var(--bg-hover,#353539)}.page-footer-commits{color:#a0a0a6;color:var(--text-secondary,#a0a0a6)}.page-footer-commits:hover{color:#e5e5e5;color:var(--text-primary,#e5e5e5)}}.jobs-page{background:var(--bg-primary);min-height:100vh;padding-top:0}.jobs-header{align-items:center;background:var(--bg-secondary);color:var(--text-primary);display:flex;gap:1rem;padding:1rem 2rem}.back-button{background:var(--bg-tertiary);border-radius:6px;color:var(--text-secondary);font-size:.85rem;padding:.5rem 1rem}.back-button:hover{border-color:var(--text-muted);color:var(--text-primary)}.jobs-header h1{flex:1 1;font-size:1.2rem;font-weight:600;letter-spacing:-.01em}.crawl-button{background:var(--accent-purple);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.85rem;font-weight:500;padding:.5rem 1rem;transition:all .2s ease}.crawl-button:hover:not(:disabled){background:var(--accent-purple-hover)}.crawl-button:disabled{cursor:not-allowed;opacity:.6}.jobs-content{margin:0 auto;max-width:1000px;padding:2rem 2rem 80px}.filter-section{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}.company-filter{display:flex;flex-wrap:wrap;gap:.5rem}.unique-filter{align-items:center;color:var(--text-secondary);cursor:pointer;display:flex;font-size:.85rem;gap:.5rem}.unique-filter input[type=checkbox]{accent-color:var(--accent-purple);cursor:pointer;height:16px;width:16px}.unique-filter:hover{color:var(--text-primary)}.filter-btn{align-items:center;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:20px;color:var(--text-secondary);cursor:pointer;display:flex;font-size:.85rem;gap:.4rem;padding:.5rem 1rem;transition:all .2s ease}.filter-btn:hover{color:var(--text-primary)}.filter-btn.active,.filter-btn:hover{border-color:var(--company-color,var(--accent-purple))}.filter-btn.active{background:var(--accent-purple);background:var(--company-color,var(--accent-purple));color:#fff}.filter-btn .count{background:#fff3;border-radius:10px;font-size:.75rem;padding:.1rem .4rem}.filter-btn:not(.active) .count{background:var(--bg-tertiary)}.filter-logo{border-radius:3px;height:18px;object-fit:contain;width:18px}.search-bar{align-items:center;display:flex;margin-bottom:1.25rem}.search-icon{color:var(--text-muted);height:18px;left:12px;pointer-events:none;position:absolute;width:18px}.search-input{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;font-size:.9rem;padding:.75rem 2.5rem;transition:all .2s ease}.search-input::placeholder{color:var(--text-muted)}.search-input:focus{box-shadow:0 0 0 3px #8b5cf61a}.search-clear{align-items:center;background:var(--bg-tertiary);border:none;border-radius:6px;color:var(--text-muted);cursor:pointer;display:flex;height:28px;justify-content:center;padding:4px;position:absolute;right:8px;transition:all .2s ease;width:28px}.search-clear:hover{background:var(--bg-hover);color:var(--text-primary)}.search-clear svg{height:14px;width:14px}.loading-state{align-items:center;color:var(--text-secondary);display:flex;flex-direction:column;justify-content:center;padding:4rem}.spinner{animation:spin 1s linear infinite;border:3px solid var(--border-color);border-radius:50%;border-top-color:var(--accent-purple);height:40px;margin-bottom:1rem;width:40px}@keyframes spin{to{transform:rotate(1turn)}}.error-state{background:var(--bg-secondary);border:1px solid #ff4757;padding:2rem;text-align:center}.error-state p{color:var(--text-secondary);margin-bottom:.5rem}.error-state button{background:var(--accent-purple);border:none;border-radius:6px;color:#fff;cursor:pointer;margin-top:1rem;padding:.5rem 1rem}.empty-state{border:1px solid var(--border-color);padding:3rem}.empty-state p:first-child{color:var(--text-secondary);font-size:1rem;margin-bottom:.5rem}.empty-state p:last-child{color:var(--text-muted);font-size:.9rem}.today-jobs-section{background:linear-gradient(135deg,#ff6b6b1a,#ff8e531a);border:1px solid #ff6b6b4d;border-radius:12px;margin-bottom:1.5rem;padding:1.25rem}.today-jobs-header{align-items:center;display:flex;gap:.75rem;margin-bottom:1rem}.today-jobs-header h2{color:var(--text-primary);font-size:1rem;font-weight:600;margin:0}.today-count{background:linear-gradient(135deg,#ff6b6b,#ff8e53);border-radius:12px;color:#fff;font-size:.75rem;font-weight:600;padding:.2rem .6rem}.today-jobs-list{display:flex;flex-direction:column;gap:.5rem}.today-job-card{align-items:center;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;display:flex;gap:.75rem;padding:.75rem 1rem;text-decoration:none;transition:all .2s ease}.today-job-card:hover{border-color:#ff6b6b;transform:translateX(4px)}.today-job-title{color:var(--text-primary);flex:1 1;font-size:.9rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jobs-list{display:flex;flex-direction:column;gap:.75rem}.job-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;color:inherit;display:block;padding:1.25rem;text-decoration:none;transition:all .2s ease}.job-card:hover{border-color:var(--accent-purple);box-shadow:var(--shadow);transform:translateY(-2px)}.job-card-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:.75rem}.company-badge{font-size:.75rem;font-weight:600;padding:.25rem .6rem}.company-badge,.new-badge{border-radius:4px;color:#fff}.new-badge{animation:pulse 2s ease-in-out infinite;background:linear-gradient(135deg,#ff6b6b,#ff8e53);font-size:.65rem;font-weight:700;letter-spacing:.5px;padding:.2rem .5rem;text-transform:uppercase}.job-card--new{background:linear-gradient(135deg,var(--bg-secondary),#ff6b6b0d);border-color:#ff6b6b}.job-card--new:hover{border-color:#ff8e53}.job-date{color:var(--text-muted);font-size:.75rem}.duplicate-count{background:var(--accent-purple);border-radius:10px;color:#fff;font-size:.7rem;font-weight:500;padding:.2rem .5rem}.job-title{color:var(--text-primary);font-size:1rem;font-weight:600;line-height:1.4;margin-bottom:.75rem}.job-meta{display:flex;flex-wrap:wrap;gap:.4rem}.meta-item{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-secondary);font-size:.75rem;padding:.2rem .5rem}.pagination{align-items:center;border-top:1px solid var(--border-color);display:flex;gap:1rem;justify-content:center;margin-top:2rem;padding-top:1.5rem}.pagination button{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);cursor:pointer;padding:.5rem 1rem;transition:all .2s ease}.pagination button:hover:not(:disabled){background:var(--bg-tertiary);color:var(--text-primary)}.pagination button:disabled{cursor:not-allowed;opacity:.4}.pagination span{color:var(--text-secondary);font-size:.9rem}@media (max-width:600px){.jobs-header{padding:1rem}.jobs-content{padding:60px 1rem 80px}.company-filter{gap:.4rem}.filter-btn{font-size:.8rem;padding:.4rem .8rem}}.hunger-page{background:#fff9f0;color:#333;font-family:Noto Sans KR,sans-serif;min-height:100vh;padding-bottom:80px;padding-top:0}.live-feed{align-items:center;background:#333;border-radius:20px;box-shadow:0 4px 12px #00000026;color:#fff;display:flex;font-size:13px;gap:8px;left:50%;opacity:0;padding:8px 16px;position:fixed;top:80px;transform:translateX(-50%) translateY(-100px);transition:all .4s ease;z-index:1000}.live-feed.show{opacity:1;transform:translateX(-50%) translateY(0)}.feed-dot{animation:blink 1s infinite;color:#ff4757}.page-header{background:#fff9f0;gap:16px;justify-content:space-between;left:0;padding:12px 16px;position:fixed;right:0;top:0;z-index:100}.page-header,.progress-mini{align-items:center;display:flex}.progress-mini{color:#ff6b35;flex-shrink:0;font-size:12px;font-weight:700;gap:6px;margin-left:auto}.progress-bar-mini{background:#ffe4c9;border-radius:3px;height:6px;overflow:hidden;width:60px}.progress-fill-mini{background:linear-gradient(90deg,#ff6b35,#ff8c42);border-radius:4px;height:100%;transition:width .3s ease}.intro-section{margin:0 auto;max-width:400px;padding:80px 20px 40px;text-align:center}.character-box{margin-bottom:24px;margin-top:30px;position:relative}.main-character{animation:bounce 2s ease-in-out infinite;display:block;font-size:80px}.thought-bubble{animation:wiggle 3s ease-in-out infinite;background:#fff;border:2px solid #333;border-radius:16px;box-shadow:3px 3px 0 #333;font-size:13px;font-weight:500;padding:8px 14px;position:absolute;right:20%;top:-10px}.thought-bubble:after{background:#fff;border:2px solid #333;border-radius:50%;bottom:-8px;content:"";height:12px;left:20px;position:absolute;width:12px}@keyframes wiggle{0%,to{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}.thought-bubble p{margin:0}.page-title{color:#ff6b35;font-size:36px;font-weight:900;margin:0 0 8px;text-shadow:2px 2px 0 #ffe4c9}.page-subtitle{color:#666;font-size:18px;margin:0 0 32px}.rolling-banner{align-items:center;background:#ff6b35;border-radius:24px;box-shadow:0 4px 0 #cc5429;color:#fff;display:inline-flex;font-size:15px;font-weight:500;gap:10px;margin-bottom:36px;padding:12px 20px}.rolling-icon{animation:shake .5s ease-in-out infinite}.info-row{display:flex;gap:16px;justify-content:center;margin-bottom:40px}.info-item{background:#fff;border:2px solid #ffe4c9;border-radius:12px;box-shadow:0 3px 0 #ffe4c9;padding:16px 20px;text-align:center}.info-item span{display:block;font-size:28px;margin-bottom:8px}.info-item p{color:#666;font-size:13px;font-weight:700;margin:0}.start-btn{background:#ff6b35;border:none;border-radius:50px;box-shadow:0 6px 0 #cc5429;color:#fff;cursor:pointer;font-size:20px;font-weight:900;margin-bottom:16px;padding:18px 56px;transition:all .15s ease}.start-btn:hover{box-shadow:0 8px 0 #cc5429;transform:translateY(-2px)}.start-btn:active{box-shadow:0 2px 0 #cc5429;transform:translateY(4px)}.disclaimer{background:#fff4e6;border:2px dashed #ffe4c9;border-radius:8px;color:#ff6b35;font-size:14px;font-weight:600;margin:0;padding:10px 16px}.questions-container{margin:0 auto;max-width:500px;padding:20px 16px 40px}.question-section{background:#fff;border:3px solid #333;border-radius:20px;box-shadow:6px 6px 0 #333;margin-bottom:28px;padding:28px;transition:all .3s ease}.question-section.hidden{opacity:.3;pointer-events:none;transform:scale(.95)}.question-section.visible{opacity:1;transform:scale(1)}.question-section.answered{border-color:#ccc;box-shadow:4px 4px 0 #ccc;opacity:.7}.question-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.q-number{background:#ff6b35;border-radius:20px;color:#fff;font-size:14px;font-weight:900;padding:4px 12px}.q-phase{color:#999;font-size:12px;font-weight:500}.question-icon{font-size:48px;margin-bottom:12px}.question-text{font-size:20px;font-weight:700;line-height:1.4;margin:0 0 8px}.question-sub{color:#888;font-size:14px;margin:0 0 20px}.options-list{display:flex;flex-direction:column;gap:10px}.option-btn{background:#fff;border:3px solid #333;border-radius:12px;box-shadow:4px 4px 0 #333;cursor:pointer;font-size:16px;font-weight:600;padding:14px 20px;text-align:left;transition:all .15s ease}.option-btn:hover:not(.disabled){background:#fff4e6;box-shadow:6px 6px 0 #333;transform:translate(-2px,-2px)}.option-btn:active:not(.disabled){box-shadow:2px 2px 0 #333;transform:translate(2px,2px)}.option-btn.selected{background:#ff6b35;border-color:#ff6b35;color:#fff}.option-btn.disabled{border-color:#ccc;box-shadow:2px 2px 0 #ccc;cursor:not-allowed;opacity:.5}.option-btn.answered{background:#ff6b35;border-color:#ff6b35;color:#fff}.feedback-bubble{animation:popIn .3s ease;border-radius:16px;font-size:14px;line-height:1.5;margin-top:16px;padding:16px}.feedback-bubble.good{background:#e8f5e9;border:2px solid #4caf50;color:#2e7d32}.feedback-bubble.bad{background:#ffebee;border:2px solid #f44336;color:#c62828}.feedback-bubble p{margin:0}.answer-result{border-radius:20px;display:inline-block;font-size:14px;font-weight:700;margin-top:12px;padding:8px 16px}.answer-result.hungry{background:#e8f5e9;color:#4caf50}.answer-result.not-hungry{background:#ffebee;color:#f44336}.result-section{margin:0 auto;max-width:500px;padding:20px 16px}.result-card{background:#fff;border:4px solid #333;border-radius:24px;box-shadow:8px 8px 0 #333;padding:32px 24px;text-align:center}.result-card.pass{border-color:#4caf50;box-shadow:8px 8px 0 #4caf50}.result-card.warning{border-color:#ff9800;box-shadow:8px 8px 0 #ff9800}.result-card.fail{border-color:#f44336;box-shadow:8px 8px 0 #f44336}.result-stamp{align-items:center;animation:stampDrop .5s ease;border-radius:50%;display:flex;flex-direction:column;height:100px;justify-content:center;margin:0 auto 20px;width:100px}.result-card.pass .result-stamp{background:#4caf50}.result-card.warning .result-stamp{background:#ff9800}.result-card.fail .result-stamp{background:#f44336}.stamp-emoji{font-size:36px}.stamp-label{color:#fff;font-size:14px;font-weight:900;margin-top:2px}.result-title{font-size:24px;font-weight:900;margin:0 0 8px}.result-card.pass .result-title{color:#4caf50}.result-card.warning .result-title{color:#ff9800}.result-card.fail .result-title{color:#f44336}.result-subtitle{color:#666;font-size:14px;margin:0 0 24px}.result-gauge{margin-bottom:24px}.gauge-track{background:#eee;border:2px solid #333;border-radius:10px;height:20px}.gauge-fill{background:linear-gradient(90deg,#f44336,#ff9800,#4caf50);border-radius:8px;height:100%;transition:width 1s ease-out}.gauge-labels{color:#999;display:flex;font-size:12px;justify-content:space-between;margin-top:8px}.gauge-percent{color:#333;font-size:18px;font-weight:900}.result-desc{background:#fff9f0;border-radius:12px;font-size:16px;line-height:1.6;margin:0 0 24px;padding:16px}.result-tips{margin-bottom:24px;text-align:left}.result-tips h3{font-size:16px;margin:0 0 12px}.result-tips ul{list-style:none;margin:0;padding:0}.result-tips li{color:#666;font-size:14px;padding:8px 0 8px 20px;position:relative}.result-tips li:before{color:#ff6b35;content:"•";font-weight:700;left:0;position:absolute}.retry-btn,.share-btn{border-radius:12px;cursor:pointer;flex:1 1;font-size:16px;font-weight:700;padding:14px;transition:all .15s ease}.retry-btn{background:#ff6b35;box-shadow:0 4px 0 #cc5429}.retry-btn:hover{box-shadow:0 6px 0 #cc5429}.share-btn{border:3px solid #333;box-shadow:0 4px 0 #333;color:#333}.share-btn:hover{box-shadow:0 6px 0 #333}.result-footer{color:#666;font-size:16px;margin-top:24px;text-align:center}@media (max-width:400px){.page-title{font-size:26px}.question-text{font-size:18px}.result-card{padding:24px 16px}.info-row{gap:8px}.info-item{padding:10px 12px}}.commit-history-page{background:var(--bg-primary);min-height:100vh;padding:2rem 1.5rem 80px}.commit-main{margin:0 auto;max-width:800px}.commit-header{margin-bottom:3rem;text-align:center}.commit-header h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#a78bfa);-webkit-background-clip:text;background-clip:text;color:var(--text-primary);font-size:2rem;font-weight:700;margin:0 0 .5rem}.commit-subtitle{color:var(--text-muted);font-size:1rem;margin:0 0 2rem}.commit-stats{display:flex;gap:1rem;justify-content:center}.commit-stat-card{align-items:center;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;display:flex;flex-direction:column;gap:.5rem;min-width:140px;padding:1.5rem 2rem;transition:all .2s ease}.commit-stat-card:hover{border-color:var(--accent-purple);box-shadow:0 8px 16px #667eea1a;transform:translateY(-2px)}.commit-stat-number{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#a78bfa);-webkit-background-clip:text;background-clip:text;font-size:2rem;font-weight:700}.commit-stat-label{color:var(--text-muted);font-size:.85rem;font-weight:500}.commit-content{margin-top:3rem}.timeline{position:relative}.timeline-group{margin-bottom:2.5rem}.timeline-date{align-items:center;display:flex;gap:.75rem;margin-bottom:1rem}.date-badge{background:linear-gradient(135deg,#667eea,#a78bfa);border-radius:8px;box-shadow:0 4px 12px #667eea33;color:#fff;font-family:monospace;font-size:.9rem;font-weight:600;padding:.5rem 1rem}.commit-count-badge{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-muted);font-size:.85rem;padding:.25rem .75rem}.timeline-commits{border-left:2px solid var(--border-color);margin-left:1rem;padding-left:2rem}.timeline-commit{align-items:flex-start;display:flex;gap:.75rem;padding:.75rem 0;position:relative;transition:all .2s ease}.timeline-commit:hover{padding-left:.5rem}.timeline-commit:hover .commit-message{color:var(--accent-purple)}.commit-dot{background:var(--bg-secondary);border:3px solid var(--accent-purple);border-radius:50%;box-shadow:0 0 0 4px var(--bg-primary);height:12px;left:-2.25rem;position:absolute;top:1rem;transition:all .2s ease;width:12px}.timeline-commit:hover .commit-dot{background:var(--accent-purple);box-shadow:0 0 0 4px var(--bg-primary),0 0 12px #667eea66;transform:scale(1.3)}.commit-message{color:var(--text-primary);font-size:.95rem;line-height:1.6;transition:all .2s ease}@media (max-width:768px){.commit-history-page{padding:1.5rem 1rem}.commit-header h1{font-size:1.75rem}.commit-stats{flex-direction:column;gap:.75rem}.commit-stat-card{min-width:auto;width:100%}}@media (max-width:600px){.commit-header h1{font-size:1.5rem}.commit-subtitle{font-size:.9rem}.commit-stat-number{font-size:1.75rem}.commit-stat-label{font-size:.8rem}.timeline-commits{padding-left:1.5rem}.commit-message{font-size:.9rem}}.severance-page{background:#f8f9fa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;min-height:100vh;padding:20px 20px 80px}.severance-page .page-header{margin-bottom:32px;text-align:center}.severance-page .page-header h1{color:#1a1a1a;font-size:28px;font-weight:700;margin-bottom:8px}.severance-page .page-header p{color:#666;font-size:14px}.severance-page .input-area{background:#fff;border-radius:12px;box-shadow:0 2px 12px #00000014;margin:0 auto 24px;max-width:700px;padding:24px}.severance-page .input-row{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr);margin-bottom:20px}@media (max-width:640px){.severance-page .input-row{grid-template-columns:1fr}}.severance-page .input-field label{color:#666;display:block;font-size:12px;font-weight:500;margin-bottom:6px}.severance-page .input-field input[type=date]{border:1px solid #ddd;border-radius:8px;box-sizing:border-box;font-size:14px;padding:10px 12px;width:100%}.severance-page .input-field input[type=date]:focus{border-color:#10b981;outline:none}.severance-page .amount-input{align-items:center;border:1px solid #ddd;border-radius:8px;display:flex;overflow:hidden}.severance-page .amount-input input{border:none;flex:1 1;font-size:16px;font-weight:600;min-width:0;outline:none;padding:10px 12px;text-align:right}.severance-page .amount-input span{background:#f5f5f5;color:#666;font-size:14px;padding:10px 12px}.severance-page .quick-btns{display:flex;flex-wrap:wrap;gap:8px}.severance-page .quick-btns button{background:#fff;border:1px solid #e0e0e0;border-radius:20px;color:#555;cursor:pointer;font-size:13px;padding:8px 16px;transition:all .15s}.severance-page .quick-btns button:hover{border-color:#10b981;color:#10b981}.severance-page .quick-btns button.active{background:#10b981;border-color:#10b981;color:#fff}.severance-page .work-period{align-items:center;background:#fff;border-radius:12px;box-shadow:0 2px 12px #00000014;display:flex;flex-wrap:wrap;gap:16px;margin:0 auto 24px;max-width:700px;padding:20px 24px}.severance-page .period-label{color:#666;font-size:14px}.severance-page .period-value{color:#1a1a1a;font-size:20px;font-weight:700}.severance-page .period-sub{color:#888;font-size:13px;margin-left:auto}.severance-page .result-summary{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(4,1fr);margin:0 auto 24px;max-width:700px}@media (max-width:640px){.severance-page .result-summary{grid-template-columns:repeat(2,1fr)}}.severance-page .result-box{background:#fff;border-radius:12px;box-shadow:0 2px 12px #00000014;padding:16px;text-align:center}.severance-page .result-box.main{background:#10b981;color:#fff}.severance-page .result-box .label{color:#888;display:block;font-size:12px;margin-bottom:8px}.severance-page .result-box.main .label{color:#fffc}.severance-page .result-box .amount{color:#1a1a1a;font-size:18px;font-weight:700}.severance-page .result-box.main .amount{color:#fff;font-size:22px}.severance-page .result-box .amount.deduct{color:#e74c3c}.severance-page .result-box .amount.net{color:#10b981}.severance-page .notice{border-radius:8px;font-size:14px;margin:0 auto 24px;max-width:700px;padding:14px 20px}.severance-page .notice.warning{background:#fff3cd;border:1px solid #ffc107;color:#856404}.severance-page .table-section{margin:0 auto 32px;max-width:700px}.severance-page .table-section h2{color:#1a1a1a;font-size:16px;font-weight:600;margin-bottom:16px;padding-left:4px}.severance-page .table-wrap{background:#fff;border-radius:12px;box-shadow:0 2px 12px #00000014;overflow:hidden;overflow-x:auto}.severance-page table{border-collapse:collapse;width:100%}.severance-page td,.severance-page th{font-size:14px;padding:14px 20px;text-align:right}.severance-page td:first-child,.severance-page th:first-child{text-align:left}.severance-page th{background:#f8f9fa;border-bottom:1px solid #eee;color:#555;font-size:13px;font-weight:600}.severance-page td{border-bottom:1px solid #f0f0f0;color:#333}.severance-page tr:last-child td{border-bottom:none}.severance-page tr:hover{background:#fafbfc}.severance-page tr.selected{background:#d1fae5}.severance-page tr.selected td{font-weight:600}.severance-page td.net{color:#10b981;font-weight:600}.severance-page .page-footer{padding:20px;text-align:center}.severance-page .page-footer p{color:#999;font-size:12px;margin-bottom:4px}.severance-page .page-footer p:last-child{margin-bottom:0}@media (max-width:480px){.severance-page{padding:20px 12px 40px}.severance-page .input-area,.severance-page .result-summary,.severance-page .table-section,.severance-page .work-period{max-width:100%}.severance-page .input-area{padding:20px 16px}.severance-page td,.severance-page th{font-size:13px;padding:12px 10px}.severance-page .period-sub{margin-left:0;margin-top:8px;width:100%}.severance-page .amount-input input{font-size:14px}}.lunch-page{background:linear-gradient(135deg,#fff5e6,#ffe8cc);min-height:100vh;padding:0 1rem 80px}.lunch-header{margin:2rem 0;text-align:center}.header-emoji{animation:bounce 1s ease-in-out infinite;font-size:4rem}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.lunch-header h1{color:#ff6b35;font-size:2rem;font-weight:900;margin:.5rem 0;text-shadow:2px 2px 0 #ffd93d}.header-sub{color:#666;font-size:1.1rem;font-weight:500}.category-section{-webkit-overflow-scrolling:touch;display:flex;gap:.5rem;justify-content:center;margin:1.5rem auto;max-width:700px;overflow-x:auto;padding-bottom:.5rem}.category-btn{align-items:center;background:#fff;border:2px solid #ddd;border-radius:25px;color:#666;cursor:pointer;display:flex;flex-shrink:0;font-size:.9rem;font-weight:600;gap:.3rem;padding:.6rem 1rem;transition:all .2s ease;white-space:nowrap}.category-btn:hover{border-color:#ff6b35;color:#ff6b35;transform:scale(1.05)}.category-btn.active{background:#ff6b35;border-color:#ff6b35;box-shadow:0 4px 12px #ff6b354d;color:#fff}.slot-section{margin:0 auto;max-width:400px;text-align:center}.slot-machine{background:linear-gradient(180deg,#ffd93d,#ff6b35);border:4px solid #333;border-radius:20px;box-shadow:8px 8px 0 #333;overflow:hidden;padding:1.5rem;position:relative}.slot-machine:before{background:#e63946;border:2px solid #333;border-radius:8px;color:#ffd93d;content:"777";font-size:.8rem;font-weight:900;left:50%;letter-spacing:2px;padding:.3rem 1rem;position:absolute;top:-8px;transform:translateX(-50%)}.slot-frame{background:#fff;border:3px solid #333;border-radius:12px;margin-top:1rem;overflow:hidden}.slot-window{justify-content:center;min-height:120px;padding:2rem 1rem}.slot-content,.slot-window{align-items:center;display:flex}.slot-content{flex-direction:column;gap:.5rem}.slot-emoji{font-size:4rem}.slot-name{color:#333;font-size:1.5rem;font-weight:900}.slot-placeholder{align-items:center;display:flex;flex-direction:column;gap:.5rem}.placeholder-emoji{font-size:3rem;opacity:.5}.placeholder-text{color:#999;font-size:1rem}.slot-machine.spinning .slot-content{animation:slotSpin .1s linear infinite}@keyframes slotSpin{0%{opacity:0;transform:translateY(-20px)}50%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}.spin-message{animation:pulse .5s ease-in-out infinite;color:#fff;font-size:1.1rem;font-weight:700;margin-top:1rem;text-shadow:1px 1px 0 #333}.slot-machine.show-result{animation:celebrate .5s ease}@keyframes celebrate{0%{transform:scale(1)}25%{transform:scale(1.02) rotate(-1deg)}50%{transform:scale(1.04) rotate(1deg)}75%{transform:scale(1.02) rotate(-1deg)}to{transform:scale(1)}}.result-area{border-top:2px dashed #ffffff80;margin-top:1rem;padding-top:1rem}.result-message{animation:popIn .3s ease;color:#fff;font-size:1.2rem;font-weight:900;margin-bottom:.75rem;text-shadow:2px 2px 0 #0003}@keyframes popIn{0%{opacity:0;transform:scale(0)}50%{transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.result-detail{background:#ffffffe6;border:2px solid #333;border-radius:10px;padding:1rem}.result-desc{color:#333;font-size:1rem;font-weight:500;margin:0 0 .75rem}.result-tags{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-bottom:.5rem}.tag{background:#ffe8cc;border-radius:15px;color:#ff6b35;font-size:.8rem;font-weight:600;padding:.25rem .6rem}.result-price{color:#666;font-size:.9rem;font-weight:600}.spin-btn{background:linear-gradient(180deg,#e63946,#c1121f);border:3px solid #333;border-radius:50px;box-shadow:0 6px 0 #333;color:#fff;cursor:pointer;font-size:1.2rem;font-weight:900;margin-top:1.5rem;overflow:hidden;padding:1rem 2.5rem;position:relative;transition:all .15s ease}.spin-btn:before{background:linear-gradient(90deg,#0000,#ffffff4d,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s ease;width:100%}.spin-btn:hover:before{left:100%}.spin-btn:hover:not(.disabled){box-shadow:0 8px 0 #333;transform:translateY(-2px)}.spin-btn:active:not(.disabled){box-shadow:0 2px 0 #333;transform:translateY(4px)}.spin-btn.disabled{animation:shake .1s linear infinite;cursor:not-allowed;opacity:.7}.action-btns{display:flex;gap:.75rem;justify-content:center;margin-top:1rem}.action-btn{border:2px solid #333;border-radius:10px;box-shadow:3px 3px 0 #333;cursor:pointer;font-size:1rem;font-weight:700;padding:.75rem 1.25rem;transition:all .15s ease}.action-btn:hover{box-shadow:5px 5px 0 #333;transform:translate(-2px,-2px)}.action-btn.accept{background:#4ecdc4;color:#fff}.action-btn.reject{background:#fff;color:#e63946}.recommend-section{margin:3rem auto 0;max-width:600px}.recommend-section h2{color:#333;font-size:1.3rem;font-weight:900;margin-bottom:1rem;text-align:center}.recommend-list{grid-gap:.75rem;display:grid;gap:.75rem;grid-template-columns:repeat(3,1fr)}.recommend-item{align-items:center;background:#fff;border:2px solid #ddd;border-radius:12px;cursor:pointer;display:flex;flex-direction:column;gap:.3rem;padding:1rem .5rem;transition:all .2s ease}.recommend-item:hover{border-color:#ff6b35;box-shadow:0 4px 12px #0000001a;transform:translateY(-3px)}.recommend-emoji{font-size:2rem}.recommend-name{color:#333;font-size:.85rem;font-weight:600;text-align:center}.lunch-footer{color:#999;font-size:.9rem;margin-top:2rem;text-align:center}@media (max-width:480px){.lunch-header h1{font-size:1.6rem}.slot-emoji{font-size:3rem}.slot-name{font-size:1.2rem}.category-btn{font-size:.8rem;padding:.5rem .75rem}.category-section{justify-content:flex-start;padding:0 1rem .5rem}.recommend-list{grid-template-columns:repeat(2,1fr)}.action-btns{flex-direction:column}.action-btn{width:100%}}.wt-page{background:#f5f5f7;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Pretendard,sans-serif;min-height:100vh;padding:0 1rem 80px}.wt-main{align-items:center;display:flex;flex:1 1;flex-direction:column;gap:16px;justify-content:center;padding:80px 0 40px}.wt-card{background:#fff;border-radius:28px;box-shadow:0 0 0 1px #00000008,0 2px 4px #00000005,0 12px 24px #0000000f;max-width:380px;padding:32px 28px;width:100%}.wt-header{margin-bottom:24px;text-align:center}.wt-date{color:#86868b;font-size:13px;font-weight:500;margin:0 0 6px}.wt-message{color:#1d1d1f;font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0}.wt-timer{height:240px;margin:0 auto 28px;position:relative;width:240px}.wt-ring{filter:drop-shadow(0 4px 12px rgba(255,107,107,.2));height:100%;width:100%}.wt-ring-bg{fill:none;stroke:#f5f5f7;stroke-width:12}.wt-ring-progress{fill:none;stroke:url(#ringGradient);stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1)}.wt-time-display{align-items:center;display:flex;flex-direction:column;gap:4px;inset:0;justify-content:center;position:absolute}.wt-countdown{font-feature-settings:"tnum";color:#1d1d1f;font-size:42px;font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.03em;line-height:1}.wt-colon{animation:blink 1s ease-in-out infinite;opacity:.4}.wt-seconds{font-size:32px;opacity:.5}.wt-overtime-badge{background:linear-gradient(135deg,#ff6b6b,#ff8e8e);border-radius:100px;color:#fff;display:inline-block;font-size:12px;font-weight:600;letter-spacing:.02em;padding:6px 14px}.wt-overtime-time{font-feature-settings:"tnum";color:#ff6b6b;font-size:36px;font-variant-numeric:tabular-nums;font-weight:700;margin-top:8px}.wt-stats{align-items:center;background:#fafafa;border-radius:16px;display:flex;gap:0;justify-content:center;margin-bottom:20px;padding:20px 0}.wt-stat{flex:1 1;padding:0 12px;text-align:center}.wt-stat-divider{background:#e5e5e5;height:32px;width:1px}.wt-stat-label{color:#86868b;display:block;font-size:11px;font-weight:500;letter-spacing:.03em;margin-bottom:4px;text-transform:uppercase}.wt-stat-value{color:#1d1d1f;font-size:15px;font-weight:600}.wt-stat-sub{color:#86868b;font-weight:400}.wt-progress{align-items:center;display:flex;gap:12px;margin-bottom:24px}.wt-progress-bar{background:#f5f5f7;border-radius:3px;flex:1 1;height:6px;overflow:hidden}.wt-progress-fill{background:linear-gradient(90deg,#ff6b6b,#ffb4b4);border-radius:3px;height:100%;transition:width .6s cubic-bezier(.4,0,.2,1)}.wt-progress-text{color:#ff6b6b;font-size:13px;font-weight:600;min-width:40px;text-align:right}.wt-actions{display:flex;gap:10px}.wt-btn{border:none;cursor:pointer;font-family:inherit;transition:all .2s ease}.wt-btn-icon{align-items:center;background:#f5f5f7;border-radius:14px;color:#86868b;display:flex;height:48px;justify-content:center;width:48px}.wt-btn-icon svg{height:20px;width:20px}.wt-btn-icon:hover{background:#ebebed;color:#1d1d1f}.wt-btn-icon.active{background:#1d1d1f;color:#fff}.wt-btn-share{background:linear-gradient(135deg,#ff6b6b,#ff8e8e);border-radius:14px;box-shadow:0 4px 12px #ff6b6b4d;color:#fff;flex:1 1;font-size:15px;font-weight:600;height:48px}.wt-btn-share:hover{box-shadow:0 6px 16px #ff6b6b66;transform:translateY(-1px)}.wt-btn-share:active{transform:translateY(0)}.wt-settings{animation:slideUp .25s cubic-bezier(.4,0,.2,1);background:#fff;border-radius:20px;box-shadow:0 0 0 1px #00000008,0 2px 4px #00000005,0 8px 16px #0000000a;max-width:380px;padding:24px;width:100%}.wt-setting-row{margin-bottom:20px}.wt-setting-row:last-child{margin-bottom:0}.wt-setting-row label{color:#86868b;display:block;font-size:12px;font-weight:600;letter-spacing:.03em;margin-bottom:10px;text-transform:uppercase}.wt-setting-row input[type=time]{background:#f5f5f7;border:2px solid #0000;border-radius:12px;color:#1d1d1f;font-family:inherit;font-size:16px;font-weight:500;outline:none;padding:14px 16px;transition:all .2s ease;width:100%}.wt-setting-row input[type=time]:focus{background:#fff;border-color:#ff6b6b}.wt-chips{display:flex;flex-wrap:wrap;gap:8px}.wt-chip{background:#f5f5f7;border:2px solid #0000;border-radius:10px;color:#86868b;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;padding:10px 16px;transition:all .2s ease}.wt-chip:hover{background:#ebebed;color:#1d1d1f}.wt-chip.active{background:#1d1d1f;color:#fff}@media (max-width:420px){.wt-page{padding:0 .75rem 2rem}.wt-main{padding:70px 0 30px}.wt-card{border-radius:24px;padding:28px 20px}.wt-timer{height:200px;margin-bottom:24px;width:200px}.wt-countdown{font-size:36px}.wt-seconds{font-size:26px}.wt-message{font-size:20px}.wt-stat-value{font-size:14px}.wt-stat{padding:0 8px}.wt-chip{font-size:13px;padding:8px 12px}.wt-settings{padding:20px}.wt-overtime-time{font-size:32px}}@media (min-width:768px){.wt-main{padding:100px 0 60px}.wt-card{max-width:420px;padding:40px 36px}.wt-timer{height:280px;margin-bottom:32px;width:280px}.wt-countdown{font-size:52px}.wt-seconds{font-size:38px}.wt-message{font-size:26px}.wt-settings{max-width:420px}}.commute-page{background:#f8f9fa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;min-height:100vh;padding:20px 20px 80px}.commute-page .page-header{margin-bottom:32px;text-align:center}.commute-page .page-header h1{color:#1a1a1a;font-size:28px;font-weight:700;margin-bottom:8px}.commute-page .page-header p{color:#666;font-size:14px}.commute-page .input-area{background:#fff;border-radius:12px;box-shadow:0 2px 12px #00000014;margin:0 auto 24px;max-width:800px;padding:24px}.commute-page .input-row{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(4,1fr);margin-bottom:20px}@media (max-width:640px){.commute-page .input-row{grid-template-columns:repeat(2,1fr)}}.commute-page .input-field label{color:#666;display:block;font-size:12px;font-weight:500;margin-bottom:6px}.commute-page .salary-input,.commute-page .time-input{align-items:center;border:1px solid #ddd;border-radius:8px;display:flex;overflow:hidden}.commute-page .salary-input input,.commute-page .time-input input{border:none;flex:1 1;font-size:16px;font-weight:600;min-width:0;outline:none;padding:10px 12px;text-align:right}.commute-page .salary-input span,.commute-page .time-input span{background:#f5f5f5;color:#666;font-size:14px;padding:10px 12px}.commute-page .input-field select{background:#fff;border:1px solid #ddd;border-radius:8px;cursor:pointer;font-size:14px;padding:10px 12px;width:100%}.commute-page .preset-btns{display:flex;flex-wrap:wrap;gap:8px}.commute-page .preset-btns button{background:#fff;border:1px solid #e0e0e0;border-radius:20px;color:#555;cursor:pointer;font-size:13px;padding:8px 16px;transition:all .15s}.commute-page .preset-btns button:hover{border-color:#e74c3c;color:#e74c3c}.commute-page .preset-btns button.active{background:#e74c3c;border-color:#e74c3c;color:#fff}.highlight-result{margin:0 auto 24px;max-width:800px}.highlight-card{background:linear-gradient(135deg,#e74c3c,#c0392b);border-radius:16px;color:#fff;padding:32px;text-align:center}.highlight-label{display:block;font-size:16px;margin-bottom:8px;opacity:.9}.highlight-value{display:block;font-size:42px;font-weight:700;margin-bottom:8px}.highlight-sub{font-size:14px;opacity:.8}.result-grid{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(4,1fr);margin:0 auto 32px;max-width:800px}@media (max-width:640px){.result-grid{grid-template-columns:repeat(2,1fr)}}.commute-page .result-card{background:#fff;border-radius:12px;box-shadow:0 2px 12px #00000014;padding:20px 16px;text-align:center}.commute-page .result-icon{display:block;font-size:28px;margin-bottom:8px}.commute-page .result-label{color:#888;display:block;font-size:12px;margin-bottom:4px}.commute-page .result-value{color:#1a1a1a;font-size:20px;font-weight:700}.shock-section{margin:0 auto 32px;max-width:800px}.shock-section h2{color:#1a1a1a;font-size:18px;font-weight:600;margin-bottom:16px;text-align:center}.shock-cards{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}@media (max-width:640px){.shock-cards{grid-template-columns:1fr}}.shock-card{background:#fff;border:2px solid #0000;border-radius:12px;box-shadow:0 2px 12px #00000014;padding:24px;text-align:center;transition:all .2s}.shock-card:hover{border-color:#e74c3c;transform:translateY(-2px)}.shock-emoji{display:block;font-size:40px;margin-bottom:12px}.shock-text{color:#555;font-size:14px;line-height:1.6}.shock-text strong{color:#e74c3c;font-weight:700}.commute-page .table-section{margin:0 auto 32px;max-width:800px}.commute-page .table-section h2{color:#1a1a1a;font-size:16px;font-weight:600;margin-bottom:16px;padding-left:4px}.commute-page .table-wrap{background:#fff;border-radius:12px;box-shadow:0 2px 12px #00000014;overflow:hidden;overflow-x:auto}.commute-page table{border-collapse:collapse;width:100%}.commute-page td,.commute-page th{font-size:14px;padding:14px 16px;text-align:right}.commute-page td:first-child,.commute-page th:first-child{text-align:left}.commute-page th{background:#f8f9fa;border-bottom:1px solid #eee;color:#555;font-size:13px;font-weight:600}.commute-page td{border-bottom:1px solid #f0f0f0;color:#333}.commute-page tr:last-child td{border-bottom:none}.commute-page tr:hover{background:#fafbfc}.commute-page tr.selected{background:#fdecea}.commute-page tr.selected td{font-weight:600}.commute-page td.wage{color:#e74c3c;font-weight:600}.commute-page .page-footer{padding:20px;text-align:center}.commute-page .page-footer p{color:#888;font-size:14px}@media (max-width:600px){.commute-page td,.commute-page th{font-size:12px;padding:10px 8px}.highlight-value{font-size:32px}}@media (max-width:480px){.commute-page{padding:20px 12px 40px}.commute-page .input-area,.commute-page .table-section,.highlight-result,.result-grid,.shock-section{max-width:100%}.commute-page .input-area{padding:20px 16px}.commute-page .input-row{grid-template-columns:1fr}.highlight-card{padding:24px 20px}.highlight-value{font-size:28px}.shock-card{padding:20px}.commute-page .salary-input input,.commute-page .time-input input{font-size:14px}}.mc-page{background:#f5f5f7;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Pretendard,sans-serif;min-height:100vh;padding:0 1rem 80px}.mc-main{align-items:center;display:flex;flex:1 1;flex-direction:column;gap:16px;margin:0 auto;max-width:420px;padding:80px 0 40px;width:100%}.mc-header{margin-bottom:8px;text-align:center}.mc-header h1{color:#1d1d1f;font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px}.mc-header p{color:#86868b;font-size:14px;margin:0}.mc-tabs{background:#e5e5e7;border-radius:10px;display:flex;max-width:300px;padding:3px;width:100%}.mc-tab{background:#0000;border:none;border-radius:8px;color:#86868b;cursor:pointer;flex:1 1;font-family:inherit;font-size:14px;font-weight:600;padding:10px 16px;transition:all .2s ease}.mc-tab.active{background:#fff;box-shadow:0 1px 3px #0000001a;color:#1d1d1f}.mc-card{background:#fff;border-radius:24px;box-shadow:0 0 0 1px #00000008,0 2px 4px #00000005,0 12px 24px #0000000f;padding:28px 24px;width:100%}.mc-timer{height:220px;margin:0 auto 20px;position:relative;width:220px}.mc-ring{filter:drop-shadow(0 4px 12px rgba(99,102,241,.2));height:100%;width:100%}.mc-ring-bg{fill:none;stroke:#f5f5f7;stroke-width:12}.mc-ring-progress{fill:none;stroke:url(#mcRingGradient);stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1)}.mc-time-display{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;position:absolute}.mc-countdown{font-feature-settings:"tnum";color:#1d1d1f;font-size:38px;font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.03em;line-height:1}.mc-countdown.running{color:#6366f1}.mc-colon{animation:mcBlink 1s ease-in-out infinite;opacity:.4}@keyframes mcBlink{0%,to{opacity:.4}50%{opacity:1}}.mc-seconds{font-size:28px;opacity:.5}.mc-cost-display{margin-bottom:24px;text-align:center}.mc-cost-label{color:#86868b;display:block;font-size:12px;font-weight:500;letter-spacing:.03em;margin-bottom:4px;text-transform:uppercase}.mc-cost-value{font-feature-settings:"tnum";color:#6366f1;display:block;font-size:32px;font-variant-numeric:tabular-nums;font-weight:700}.mc-cost-value.running{animation:mcPulse 1s ease-in-out infinite}.mc-cost-value.large{font-size:40px}@keyframes mcPulse{0%,to{opacity:1}50%{opacity:.7}}.mc-controls{display:flex;gap:10px}.mc-btn{border:none;border-radius:12px;cursor:pointer;flex:1 1;font-family:inherit;font-size:15px;font-weight:600;height:48px;transition:all .2s ease}.mc-btn-primary{background:linear-gradient(135deg,#6366f1,#818cf8);box-shadow:0 4px 12px #6366f14d;color:#fff}.mc-btn-primary:hover{box-shadow:0 6px 16px #6366f166;transform:translateY(-1px)}.mc-btn-danger{background:linear-gradient(135deg,#ef4444,#f87171);box-shadow:0 4px 12px #ef44444d;color:#fff}.mc-btn-danger:hover{box-shadow:0 6px 16px #ef444466;transform:translateY(-1px)}.mc-btn-secondary{background:#f5f5f7;color:#86868b}.mc-btn-secondary:hover:not(:disabled){background:#e5e5e7;color:#1d1d1f}.mc-btn:disabled{cursor:not-allowed;opacity:.4;transform:none!important}.mc-simulator{margin-bottom:24px}.mc-sim-label{color:#86868b;font-size:12px;font-weight:600;letter-spacing:.03em;margin-bottom:16px;text-align:center;text-transform:uppercase}.mc-sim-inputs{display:flex;gap:20px;justify-content:center;margin-bottom:20px}.mc-sim-input-group{align-items:center;display:flex;gap:8px}.mc-sim-input-group input{background:#f5f5f7;border:2px solid #0000;border-radius:12px;color:#1d1d1f;font-family:inherit;font-size:24px;font-weight:700;outline:none;padding:14px 12px;text-align:center;transition:all .2s ease;width:80px}.mc-sim-input-group input:focus{background:#fff;border-color:#6366f1}.mc-sim-input-group span{color:#86868b;font-size:14px;font-weight:500}.mc-sim-presets{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.mc-preset-btn{background:#f5f5f7;border:2px solid #0000;border-radius:8px;color:#86868b;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;padding:8px 14px;transition:all .2s ease}.mc-preset-btn:hover{background:#e5e5e7;color:#1d1d1f}.mc-preset-btn.active{background:#1d1d1f;color:#fff}.mc-sim-result{background:linear-gradient(135deg,#6366f11a,#a78bfa1a);border-radius:16px;margin-bottom:20px;padding:24px;text-align:center}.mc-comparison{align-items:center;animation:mcPopIn .3s ease;background:linear-gradient(135deg,#f59e0b1a,#fbbf241a);border-radius:14px;display:flex;gap:12px;justify-content:center;padding:16px}@keyframes mcPopIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.mc-comparison-emoji{font-size:36px}.mc-comparison-text{display:flex;flex-direction:column}.mc-comparison-count{color:#d97706;font-size:22px;font-weight:700}.mc-comparison-label{color:#92400e;font-size:13px;font-weight:500}.mc-settings{background:#fff;border-radius:20px;box-shadow:0 0 0 1px #00000008,0 2px 4px #00000005,0 8px 16px #0000000a;padding:20px 24px;width:100%}.mc-setting-row{padding:16px 0}.mc-setting-row:first-child{padding-top:0}.mc-setting-row:last-child{padding-bottom:0}.mc-setting-row:not(:last-child){border-bottom:1px solid #f0f0f0}.mc-setting-row label{color:#86868b;display:block;font-size:12px;font-weight:600;letter-spacing:.03em;margin-bottom:12px;text-transform:uppercase}.mc-stepper{align-items:center;display:flex;gap:20px;justify-content:center}.mc-stepper-btn{background:#f5f5f7;border:none;border-radius:12px;color:#1d1d1f;cursor:pointer;font-size:20px;font-weight:600;height:44px;transition:all .2s ease;width:44px}.mc-stepper-btn:hover:not(:disabled){background:#e5e5e7}.mc-stepper-btn:disabled{cursor:not-allowed;opacity:.3}.mc-stepper-value{color:#1d1d1f;font-size:24px;font-weight:700;min-width:80px;text-align:center}.mc-chips{display:flex;flex-wrap:wrap;gap:8px}.mc-chip{background:#f5f5f7;border:2px solid #0000;border-radius:10px;color:#86868b;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;padding:10px 14px;transition:all .2s ease}.mc-chip:hover:not(:disabled){background:#e5e5e7;color:#1d1d1f}.mc-chip.active{background:#1d1d1f;color:#fff}.mc-chip:disabled{cursor:not-allowed;opacity:.5}.mc-stats{align-items:center;background:#fff;border-radius:16px;box-shadow:0 0 0 1px #00000008,0 2px 4px #00000005;display:flex;justify-content:center;padding:20px 0;width:100%}.mc-stat{flex:1 1;padding:0 12px;text-align:center}.mc-stat-divider{background:#e5e5e5;height:32px;width:1px}.mc-stat-label{color:#86868b;display:block;font-size:11px;font-weight:500;letter-spacing:.03em;margin-bottom:4px;text-transform:uppercase}.mc-stat-value{color:#6366f1;font-size:14px;font-weight:600}@media (max-width:420px){.mc-page{padding:0 .75rem 2rem}.mc-main{padding:70px 0 30px}.mc-card{border-radius:20px;padding:24px 20px}.mc-timer{height:180px;width:180px}.mc-countdown{font-size:32px}.mc-seconds{font-size:24px}.mc-cost-value{font-size:28px}.mc-cost-value.large{font-size:32px}.mc-header h1{font-size:22px}.mc-sim-input-group input{font-size:20px;padding:12px 10px;width:70px}.mc-stepper-value{font-size:20px;min-width:60px}.mc-chip{font-size:13px;padding:8px 12px}.mc-settings{padding:16px 20px}.mc-stats{padding:16px 0}.mc-stat-value{font-size:13px}.mc-comparison-emoji{font-size:30px}.mc-comparison-count{font-size:20px}}@media (min-width:768px){.mc-main{max-width:440px;padding:100px 0 60px}.mc-card{padding:36px 32px}.mc-timer{height:260px;margin-bottom:28px;width:260px}.mc-countdown{font-size:46px}.mc-seconds{font-size:34px}.mc-header h1{font-size:28px}.mc-cost-value{font-size:36px}.mc-cost-value.large{font-size:48px}}.language-switcher{display:inline-block;position:relative}.language-switcher-button{align-items:center;background:#1e1e1e;background:var(--bg-secondary,#1e1e1e);border:1px solid #333;border:1px solid var(--border-color,#333);border-radius:8px;color:#fff;color:var(--text-primary,#fff);cursor:pointer;display:flex;font-size:14px;gap:8px;padding:8px 12px;transition:all .2s ease}.language-switcher-button:hover{background:#2a2a2a;background:var(--bg-tertiary,#2a2a2a);border-color:#8b5cf6;border-color:var(--accent-purple,#8b5cf6)}.language-switcher-button:focus{border-color:#8b5cf6;border-color:var(--accent-purple,#8b5cf6);box-shadow:0 0 0 3px #8b5cf633;outline:none}.language-flag{font-size:18px;line-height:1}.language-name{font-weight:500}.language-arrow{font-size:10px;transition:transform .2s ease}.language-arrow.open{transform:rotate(180deg)}.language-dropdown{animation:dropdown-fade-in .2s ease;background:#1e1e1e;background:var(--bg-secondary,#1e1e1e);border:1px solid #333;border:1px solid var(--border-color,#333);border-radius:8px;box-shadow:0 4px 12px #0000004d;min-width:150px;overflow:hidden;position:absolute;right:0;top:calc(100% + 4px);z-index:1000}@keyframes dropdown-fade-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.language-option{align-items:center;background:none;border:none;color:#fff;color:var(--text-primary,#fff);cursor:pointer;display:flex;font-size:14px;gap:8px;padding:10px 12px;text-align:left;transition:background .2s ease;width:100%}.language-option:hover{background:#2a2a2a;background:var(--bg-tertiary,#2a2a2a)}.language-option.active{background:#8b5cf61a;color:#8b5cf6;color:var(--accent-purple,#8b5cf6)}.language-option:focus{background:#2a2a2a;background:var(--bg-tertiary,#2a2a2a);outline:none}.language-check{color:#8b5cf6;color:var(--accent-purple,#8b5cf6);font-weight:700;margin-left:auto}@media (max-width:480px){.language-switcher-button{font-size:13px;padding:6px 10px}.language-name{display:none}.language-dropdown{left:0;right:auto}}.glow-button{background:var(--accent-gradient);border:none;border-radius:8px;box-shadow:0 4px 15px #8b5cf633;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:.875rem 2rem;transition:all .3s ease}.glow-button:hover{box-shadow:0 0 20px #8b5cf699,0 0 40px #8b5cf666;filter:brightness(1.2);transform:translateY(-2px)}.glow-button:active{transform:translateY(0)}.ripple-button{background:var(--bg-secondary);border:2px solid var(--accent-purple);border-radius:8px;color:var(--text-primary);cursor:pointer;font-size:1rem;font-weight:600;overflow:hidden;padding:.875rem 2rem;position:relative;transition:all .3s ease}.ripple-button:hover{background:var(--bg-tertiary);transform:translateY(-2px)}.ripple-button:active{transform:translateY(0)}.ripple{animation:ripple-animation .6s ease-out;background:#8b5cf680;height:20px;width:20px}@keyframes ripple-animation{0%{opacity:1;transform:translate(-50%,-50%) scale(0)}to{opacity:0;transform:translate(-50%,-50%) scale(20)}}.magnetic-button{background:var(--bg-tertiary);border:2px solid var(--accent-purple);border-radius:8px;color:var(--text-primary);cursor:pointer;font-size:1rem;font-weight:600;padding:.875rem 2rem;transition:transform .2s ease;will-change:transform}.magnetic-button:hover,.pulse-button{background:var(--accent-purple);color:#fff}.pulse-button{border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:600;overflow:visible;padding:.875rem 2rem;position:relative}.pulse-ring{animation:pulse-animation 1.5s ease-out infinite;border:3px solid var(--accent-purple);border-radius:8px;height:100%;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}@keyframes pulse-animation{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}.neon-button{background:#0000;border:2px solid var(--accent-purple);border-radius:8px;box-shadow:0 0 10px #8b5cf680,inset 0 0 10px #8b5cf633;color:var(--accent-purple);cursor:pointer;font-size:1rem;font-weight:600;padding:.875rem 2rem;text-shadow:0 0 10px #8b5cf6cc;transition:all .3s ease}.neon-button:hover{box-shadow:0 0 20px #8b5cf6cc,inset 0 0 20px #8b5cf666}.loading-button,.neon-button:hover{background:var(--accent-purple);color:#fff}.loading-button{align-items:center;border:none;border-radius:8px;cursor:pointer;display:flex;font-size:1rem;font-weight:600;gap:.5rem;justify-content:center;min-width:140px;padding:.875rem 2rem;transition:all .2s ease}.loading-button:disabled{cursor:not-allowed;opacity:.7}.loading-spinner{animation:spin-animation .6s linear infinite;border:2px solid #ffffff4d;border-radius:50%;border-top-color:#fff;height:16px;width:16px}@keyframes spin-animation{to{transform:rotate(1turn)}}.gradient-shift-button{animation:gradient-shift 3s ease infinite;background:linear-gradient(45deg,var(--accent-purple),var(--accent-pink),var(--accent-purple));background-size:200% 200%;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:.875rem 2rem;transition:all .3s ease}.gradient-shift-button:hover{box-shadow:0 8px 20px #8b5cf666;transform:translateY(-2px)}.gradient-shift-button:active{transform:translateY(0)}@keyframes gradient-shift{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.icon-button{align-items:center;background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:8px;color:var(--text-primary);cursor:pointer;display:flex;font-size:1.25rem;height:48px;justify-content:center;padding:.75rem;transition:all .3s ease;width:48px}.icon-button:hover{background:var(--accent-purple);border-color:var(--accent-purple);color:#fff;transform:scale(1.1) rotate(5deg)}.icon-button:active{transform:scale(.95)}.split-button-container{border-radius:8px;display:flex;overflow:hidden}.split-button-main{background:var(--accent-purple);border:none;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:.875rem 1.5rem;transition:all .2s ease}.split-button-main:hover{background:var(--accent-purple-hover)}.split-button-dropdown{align-items:center;background:var(--accent-purple);border:none;border-left:1px solid #fff3;color:#fff;cursor:pointer;display:flex;font-size:1rem;justify-content:center;padding:.875rem .75rem;transition:all .2s ease}.split-button-dropdown:hover{background:var(--accent-purple-hover)}.split-button-menu{animation:slideDown .2s ease;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 8px 24px #0000004d;min-width:160px;position:absolute;right:0;top:calc(100% + 4px);z-index:100}.split-button-menu-item{color:var(--text-primary);cursor:pointer;font-size:.9375rem;padding:.75rem 1rem;transition:background .2s ease}.split-button-menu-item:first-child{border-radius:8px 8px 0 0}.split-button-menu-item:last-child{border-radius:0 0 8px 8px}.split-button-menu-item:hover{background:var(--bg-tertiary)}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.ghost-button{background:#0000;border:none;border-radius:8px;color:var(--accent-purple);cursor:pointer;font-size:1rem;font-weight:600;overflow:hidden;padding:.875rem 2rem;position:relative;transition:all .3s ease}.ghost-button:before{background:var(--accent-purple);content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .3s ease;width:100%;z-index:-1}.ghost-button:hover{color:#fff}.ghost-button:hover:before{opacity:1}.ghost-button:active{transform:scale(.95)}.outline-button{background:#0000;border:2px solid var(--accent-purple);border-radius:8px;color:var(--accent-purple);cursor:pointer;font-size:1rem;font-weight:600;overflow:hidden;padding:.875rem 2rem;position:relative;transition:all .3s ease}.outline-button:before{background:var(--accent-purple);border-radius:50%;content:"";height:0;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:width .5s ease,height .5s ease;width:0;z-index:-1}.outline-button:hover{border-color:var(--accent-purple);color:#fff}.outline-button:hover:before{height:300px;width:300px}.outline-button:active{transform:scale(.95)}.shimmer-button{background:linear-gradient(90deg,var(--accent-purple),var(--accent-pink),var(--accent-purple));background-size:200% 100%;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;overflow:hidden;padding:.875rem 2rem;position:relative;transition:all .3s ease}.shimmer-button:before{animation:shimmer-animation 2s infinite;background:linear-gradient(90deg,#0000,#fff6,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;width:100%}@keyframes shimmer-animation{0%{left:-100%}to{left:100%}}.shimmer-button:hover{box-shadow:0 8px 20px #8b5cf666;transform:translateY(-2px)}.three-d-button{background:var(--accent-purple);border:none;border-radius:8px;box-shadow:0 4px 0 #6b46c1,0 8px 12px #0000004d;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:.875rem 2rem;position:relative;top:0;transition:all .1s ease}.three-d-button:hover{box-shadow:0 2px 0 #6b46c1,0 6px 10px #0000004d;top:2px}.three-d-button:active{box-shadow:0 0 0 #6b46c1,0 2px 4px #0003;top:4px}.liquid-button{background:#0000;border:2px solid var(--accent-purple);border-radius:50px;color:var(--accent-purple);cursor:pointer;font-size:1rem;font-weight:600;overflow:hidden;padding:.875rem 2rem;position:relative;transition:all .4s ease}.liquid-button-text{position:relative;transition:color .4s ease;z-index:2}.liquid{background:var(--accent-purple);height:100%;left:0;position:absolute;top:100%;transition:top .5s cubic-bezier(.68,-.55,.265,1.55);width:100%;z-index:1}.liquid-button:hover .liquid{top:0}.liquid-button:hover .liquid-button-text{color:#fff}.morph-button{background:var(--bg-secondary);border:2px solid var(--accent-purple);border-radius:8px;color:var(--text-primary);cursor:pointer;font-size:1rem;font-weight:600;padding:.875rem 2rem;transition:all .5s cubic-bezier(.68,-.55,.265,1.55)}.morph-button.morphed{background:var(--accent-purple);border-radius:50px;color:#fff;transform:scale(1.1)}.morph-button:active{transform:scale(.95)}.social-button-group{display:flex;flex-wrap:wrap;gap:.75rem}.social-button{align-items:center;border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-size:.875rem;font-weight:600;gap:.5rem;padding:.625rem 1.25rem;transition:all .3s ease}.social-button.twitter{background:#1da1f2}.social-button.twitter:hover{background:#1a8cd8;box-shadow:0 4px 12px #1da1f266;transform:translateY(-2px)}.social-button.facebook{background:#4267b2}.social-button.facebook:hover{background:#365899;box-shadow:0 4px 12px #4267b266;transform:translateY(-2px)}.social-button.github{background:#333}.social-button.github:hover{background:#24292e;box-shadow:0 4px 12px #0006;transform:translateY(-2px)}.social-button.linkedin{background:#0077b5}.social-button.linkedin:hover{background:#006399;box-shadow:0 4px 12px #0077b566;transform:translateY(-2px)}.social-button:active{transform:translateY(0)}.toggle-icon-button{align-items:center;background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:50%;color:var(--text-primary);cursor:pointer;display:flex;font-size:1.5rem;height:56px;justify-content:center;padding:.75rem;transition:all .3s ease;width:56px}.toggle-icon-button:hover{border-color:var(--accent-purple);transform:scale(1.1)}.toggle-icon-button .icon{transition:transform .3s ease}.toggle-icon-button .icon.active{transform:scale(1.2)}.toggle-icon-button:active{transform:scale(.95)}.expand-button{align-items:center;background:var(--accent-gradient);border:none;border-radius:8px;color:#fff;cursor:pointer;display:inline-flex;font-size:1rem;font-weight:600;justify-content:center;min-width:48px;overflow:hidden;padding:.875rem 1.5rem;transition:all .4s ease;white-space:nowrap}.expand-button:hover{box-shadow:0 4px 15px #8b5cf666;min-width:180px;padding:.875rem 2rem}.expand-button .icon{transition:opacity .2s ease,transform .4s ease}.expand-button:hover .icon{opacity:0;transform:translateX(-10px)}.expand-button .text{max-width:0;opacity:0;transition:opacity .2s ease .1s,max-width .4s ease}.expand-button:hover .text{max-width:200px;opacity:1}.fab-container{align-items:flex-end;display:flex;flex-direction:column;gap:12px;padding:20px;position:relative}.fab-button{align-items:center;background:var(--accent-purple);border:none;border-radius:50%;box-shadow:0 4px 12px #8b5cf666;color:#fff;cursor:pointer;display:flex;font-size:24px;font-weight:300;height:56px;justify-content:center;transition:all .3s ease;width:56px}.fab-button:hover{box-shadow:0 6px 20px #8b5cf699;transform:scale(1.1)}.fab-button:active{transform:scale(.95)}.fab-menu{display:flex;flex-direction:column;gap:12px;opacity:0;pointer-events:none;transform:translateY(20px);transition:all .3s ease}.fab-menu-expanded{opacity:1;pointer-events:all;transform:translateY(0)}.fab-menu-item{align-items:center;background:var(--bg-secondary);border:2px solid var(--accent-purple);border-radius:50%;cursor:pointer;display:flex;font-size:20px;height:48px;justify-content:center;transition:all .2s ease;width:48px}.fab-menu-item:hover{background:var(--accent-purple);transform:scale(1.1)}.button-group-demo{display:flex;justify-content:center;padding:20px}.button-group{border:2px solid var(--border-color);border-radius:8px;display:inline-flex;overflow:hidden}.button-group-item{background:#0000;border:none;border-right:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;font-size:14px;font-weight:600;padding:12px 24px;transition:all .2s ease}.button-group-item:last-child{border-right:none}.button-group-item:hover{background:#8b5cf61a}.button-group-item-active{background:var(--accent-purple);color:#fff}.button-group-item-active:hover{background:#7c3aed}.segmented-control-demo{display:flex;justify-content:center;padding:20px}.segmented-control{background:var(--bg-secondary);border-radius:10px;display:inline-flex;gap:4px;padding:4px;position:relative}.segmented-control-item{background:#0000;border:none;border-radius:8px;color:var(--text-primary);cursor:pointer;font-size:14px;font-weight:600;padding:10px 24px;position:relative;transition:color .3s ease;z-index:2}.segmented-control-item-active{color:#fff}.segmented-control-indicator{background:var(--accent-purple);border-radius:8px;height:calc(100% - 8px);left:4px;position:absolute;top:4px;transition:transform .3s ease;width:calc(33.33% - 4px);z-index:1}@media (prefers-color-scheme:dark){.fab-menu-item,.segmented-control{background:#ffffff0d}}@media (max-width:768px){.button-group-item{font-size:13px;padding:10px 16px}.segmented-control-item{font-size:13px;padding:8px 16px}}.hover-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;cursor:pointer;padding:1.5rem;text-align:center;transition:all .3s ease}.hover-card:hover{border-color:var(--accent-purple);box-shadow:0 12px 24px #8b5cf64d;transform:translateY(-8px)}.hover-card-icon{font-size:2.5rem;margin-bottom:.75rem}.hover-card-title{color:var(--text-primary);font-size:1.125rem;font-weight:600;margin-bottom:.5rem}.hover-card-text{color:var(--text-secondary);font-size:.875rem;margin:0}.flip-card-container{cursor:pointer;perspective:1000px}.flip-card{height:150px;position:relative;transform-style:preserve-3d;transition:transform .6s;width:200px}.flip-card.flipped{transform:rotateY(180deg)}.flip-card-back,.flip-card-front{align-items:center;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;display:flex;flex-direction:column;height:100%;justify-content:center;padding:1rem;position:absolute;width:100%}.flip-card-back{background:var(--accent-gradient);transform:rotateY(180deg)}.flip-card-icon{font-size:2.5rem;margin-bottom:.5rem}.flip-hint{color:var(--text-muted);font-size:.75rem;margin-top:.5rem}.glass-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#8b5cf61a;border:1px solid #8b5cf633;border-radius:16px;padding:1.5rem;text-align:center;transition:all .3s ease}.glass-card:hover{background:#8b5cf626;border-color:#8b5cf666;transform:translateY(-4px)}.glass-card-icon{font-size:2.5rem;margin-bottom:.75rem}.glass-card-title{color:var(--text-primary);font-size:1.125rem;font-weight:600;margin-bottom:.5rem}.glass-card-text{color:var(--text-secondary);font-size:.875rem;margin:0}.tilt-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;cursor:pointer;padding:1.5rem;text-align:center;transform-style:preserve-3d;transition:transform .1s ease}.tilt-card-icon{font-size:2.5rem;margin-bottom:.75rem}.stacked-cards{height:150px;position:relative;width:200px}.stacked-card{align-items:center;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;display:flex;flex-direction:column;height:100%;justify-content:center;padding:1rem;position:absolute;transition:transform .3s ease;width:100%}.stacked-card-1{transform:translateY(0);z-index:3}.stacked-card-2{opacity:.7;transform:translateY(-8px) scale(.95);z-index:2}.stacked-card-3{opacity:.4;transform:translateY(-16px) scale(.9);z-index:1}.stacked-cards:hover .stacked-card-1{transform:translateY(-10px)}.stacked-cards:hover .stacked-card-2{transform:translateY(-16px) scale(.95)}.stacked-cards:hover .stacked-card-3{transform:translateY(-22px) scale(.9)}.stacked-card-icon{font-size:2rem;margin-bottom:.5rem}.parallax-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;cursor:pointer;overflow:hidden;padding:1.5rem;position:relative;text-align:center;transform-style:preserve-3d;transition:all .3s ease}.parallax-card:hover{box-shadow:0 12px 24px #8b5cf64d}.parallax-card-background{background:linear-gradient(135deg,#8b5cf61a,#ec48991a);height:120%;left:-10%;position:absolute;top:-10%;transition:transform .3s ease;width:120%;z-index:0}.parallax-card-content{position:relative;z-index:1}.parallax-card-icon{font-size:2.5rem;margin-bottom:.75rem;transition:transform .3s ease}.parallax-card-title{color:var(--text-primary);font-size:1.125rem;font-weight:600;margin-bottom:.5rem}.parallax-card-text{color:var(--text-secondary);font-size:.875rem;margin:0}.blur-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#1e1e1e99;border:1px solid #8b5cf64d;border-radius:16px;overflow:hidden;padding:1.5rem;position:relative;text-align:center;transition:all .3s ease}.blur-card:before{background:linear-gradient(135deg,#8b5cf61a,#ec48991a);content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .3s ease;width:100%}.blur-card:hover{-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);border-color:#8b5cf680;transform:translateY(-4px)}.blur-card:hover:before{opacity:1}.blur-card-content{position:relative;z-index:1}.blur-card-icon{font-size:2.5rem;margin-bottom:.75rem}.blur-card-title{color:var(--text-primary);font-size:1.125rem;font-weight:600;margin-bottom:.5rem}.blur-card-text{color:var(--text-secondary);font-size:.875rem;margin:0}.border-gradient-card{background:var(--bg-secondary);border-radius:12px;padding:1.5rem;position:relative;text-align:center;transition:all .3s ease}.border-gradient-card:before{background:linear-gradient(45deg,var(--accent-purple),var(--accent-pink));border-radius:12px;bottom:0;content:"";left:0;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;padding:2px;position:absolute;right:0;top:0;transition:opacity .3s ease}.border-gradient-card:hover{transform:translateY(-4px)}.border-gradient-card:hover:before{opacity:1}.border-gradient-card-icon{font-size:2.5rem;margin-bottom:.75rem}.border-gradient-card-title{color:var(--text-primary);font-size:1.125rem;font-weight:600;margin-bottom:.5rem}.border-gradient-card-text{color:var(--text-secondary);font-size:.875rem;margin:0}.expand-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;cursor:pointer;overflow:hidden;transition:all .3s ease}.expand-card:hover{border-color:var(--accent-purple);box-shadow:0 8px 20px #8b5cf633}.expand-card-header{align-items:center;display:flex;gap:1rem;padding:1.5rem}.expand-card-icon{font-size:2rem}.expand-card-header-text{flex:1 1}.expand-card-title{color:var(--text-primary);font-size:1.125rem;font-weight:600;margin-bottom:.25rem}.expand-card-subtitle{color:var(--text-secondary);font-size:.875rem;margin:0}.expand-card-toggle{background:#0000;border:none;color:var(--text-secondary);cursor:pointer;font-size:1.5rem;transition:all .3s ease}.expand-card-toggle.expanded{color:var(--accent-purple);transform:rotate(180deg)}.expand-card-content{max-height:0;overflow:hidden;transition:max-height .3s ease}.expand-card-content.expanded{max-height:500px}.expand-card-body{color:var(--text-secondary);line-height:1.6;padding:0 1.5rem 1.5rem}.neon-card{background:var(--bg-secondary);border:2px solid var(--accent-purple);border-radius:12px;box-shadow:0 0 10px #8b5cf64d,inset 0 0 10px #8b5cf61a;padding:1.5rem;transition:all .3s ease}.neon-card:hover{box-shadow:0 0 30px #8b5cf699,inset 0 0 20px #8b5cf633;transform:translateY(-4px)}.neon-card-title{color:var(--accent-purple);font-size:1.25rem;font-weight:600;margin-bottom:.75rem;text-shadow:0 0 10px #8b5cf680}.neon-card-description{color:var(--text-secondary);line-height:1.6;margin:0}.product-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;overflow:hidden;transition:all .3s ease;width:280px}.product-card:hover{box-shadow:0 8px 24px #0000004d;transform:translateY(-4px)}.product-image{align-items:center;background:var(--bg-tertiary);display:flex;height:180px;justify-content:center;position:relative}.product-image-placeholder{color:var(--text-tertiary)}.product-badge{background:var(--accent-pink);border-radius:12px;color:#fff;font-size:.75rem;font-weight:600;padding:.25rem .75rem;position:absolute;right:.75rem;top:.75rem}.product-content{padding:1.25rem}.product-title{color:var(--text-primary);font-size:1.125rem;font-weight:600;margin:0 0 .5rem}.product-description{color:var(--text-secondary);font-size:.875rem;line-height:1.5;margin:0 0 1rem}.product-footer{align-items:center;display:flex;gap:.75rem;justify-content:space-between}.product-price{align-items:baseline;display:flex;gap:.5rem}.product-price-old{color:var(--text-tertiary);font-size:.875rem;text-decoration:line-through}.product-price-new{color:var(--accent-purple);font-size:1.5rem;font-weight:700}.product-add-btn{background:var(--accent-purple);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:.875rem;font-weight:600;padding:.625rem 1rem;transition:all .3s ease;white-space:nowrap}.product-add-btn:hover{background:var(--accent-purple-hover);transform:scale(1.05)}.product-add-btn.added{background:#10b981;background:var(--accent-green,#10b981)}.profile-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;overflow:hidden;transition:all .3s ease;width:280px}.profile-card:hover{box-shadow:0 8px 24px #0000004d;transform:translateY(-4px)}.profile-header{align-items:flex-end;background:linear-gradient(135deg,var(--accent-purple),var(--accent-pink));height:100px;padding-bottom:2rem}.profile-avatar,.profile-header{display:flex;justify-content:center}.profile-avatar{align-items:center;background:var(--bg-secondary);border:4px solid var(--bg-primary);border-radius:50%;color:var(--accent-purple);height:80px;margin-bottom:-40px;position:relative;width:80px}.profile-content{padding:2.5rem 1.5rem 1.5rem;text-align:center}.profile-name{color:var(--text-primary);font-size:1.25rem;font-weight:600;margin:0 0 .25rem}.profile-title{color:var(--accent-purple);font-size:.875rem;margin:0 0 .75rem}.profile-bio{color:var(--text-secondary);font-size:.875rem;line-height:1.5;margin:0 0 1.25rem}.profile-stats{grid-gap:1rem;border-bottom:1px solid var(--border-color);border-top:1px solid var(--border-color);display:grid;gap:1rem;grid-template-columns:repeat(3,1fr);margin-bottom:1.25rem;padding:1rem 0}.profile-stat{text-align:center}.profile-stat-value{color:var(--text-primary);font-size:1.125rem;font-weight:700}.profile-stat-label{color:var(--text-tertiary);font-size:.75rem;margin-top:.25rem}.profile-follow-btn{background:var(--accent-purple);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;padding:.75rem;transition:all .3s ease;width:100%}.profile-follow-btn:hover{background:var(--accent-purple-hover);transform:scale(1.02)}.pricing-card{background:var(--bg-secondary);border:2px solid var(--accent-purple);border-radius:12px;padding:2rem;position:relative;transition:all .3s ease;width:280px}.pricing-card:hover{box-shadow:0 12px 32px #8b5cf64d;transform:translateY(-8px)}.pricing-badge{background:linear-gradient(135deg,var(--accent-purple),var(--accent-pink));border-radius:12px;color:#fff;font-size:.75rem;font-weight:700;padding:.375rem 1rem;position:absolute;right:1.5rem;text-transform:uppercase;top:-12px}.pricing-header{margin-bottom:1.5rem;text-align:center}.pricing-title{color:var(--text-primary);font-size:1.5rem;font-weight:700;margin:0 0 1rem}.pricing-price{align-items:baseline;display:flex;gap:.25rem;justify-content:center}.pricing-currency{color:var(--accent-purple);font-size:1.5rem;font-weight:600}.pricing-amount{color:var(--accent-purple);font-size:3rem;font-weight:700}.pricing-period{color:var(--text-secondary);font-size:1rem}.pricing-features{list-style:none;margin:0 0 1.5rem;padding:0}.pricing-feature{align-items:center;color:var(--text-primary);display:flex;font-size:.875rem;gap:.75rem;padding:.75rem 0}.pricing-feature svg{color:var(--accent-purple);flex-shrink:0}.pricing-cta{background:var(--accent-purple);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:1rem;transition:all .3s ease;width:100%}.pricing-cta:hover{background:var(--accent-purple-hover);transform:scale(1.02)}.timeline-card{margin-bottom:2rem;padding-left:2.5rem;position:relative}.timeline-marker{background:var(--accent-purple);border:3px solid var(--bg-primary);border-radius:50%;box-shadow:0 0 0 3px var(--accent-purple);height:16px;left:0;position:absolute;top:.25rem;width:16px}.timeline-marker:before{background:var(--border-color);content:"";height:100px;left:50%;position:absolute;top:16px;transform:translateX(-50%);width:2px}.timeline-content{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:1.25rem;transition:all .3s ease}.timeline-content:hover{border-color:var(--accent-purple);box-shadow:0 4px 12px #8b5cf633}.timeline-date{color:var(--accent-purple);font-size:.75rem;font-weight:600;margin-bottom:.5rem}.timeline-title{color:var(--text-primary);font-size:1.125rem;font-weight:600;margin:0 0 .5rem}.timeline-description{color:var(--text-secondary);font-size:.875rem;line-height:1.6;margin:0 0 .75rem}.timeline-tags{display:flex;flex-wrap:wrap;gap:.5rem}.timeline-tag{background:var(--bg-tertiary);border-radius:12px;color:var(--accent-purple);font-size:.75rem;font-weight:600;padding:.25rem .75rem}.comparison-card{grid-gap:1rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;display:grid;gap:1rem;grid-template-columns:1fr auto 1fr;padding:1.5rem}.comparison-item{text-align:center}.comparison-item h4{font-size:1.125rem;margin-bottom:.5rem}.comparison-item .price{color:var(--accent-purple);font-size:1.5rem;font-weight:700;margin-bottom:1rem}.comparison-item ul{font-size:.875rem;list-style:none;padding:0}.comparison-item ul li{padding:.375rem 0}.vs-divider{align-items:center;color:var(--text-secondary);display:flex;font-weight:700}.testimonial-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:1.5rem}.testimonial-header{display:flex;gap:1rem;margin-bottom:1rem}.testimonial-avatar{align-items:center;background:var(--accent-gradient);border-radius:50%;color:#fff;display:flex;font-weight:700;height:48px;justify-content:center;width:48px}.testimonial-header h4{margin-bottom:.25rem}.testimonial-rating{color:#fbbf24}.testimonial-text{color:var(--text-secondary);line-height:1.6}.skeleton-loading-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:1.5rem}.skeleton{animation:shimmer 1.5s infinite;background:linear-gradient(90deg,var(--bg-tertiary) 0,var(--bg-hover) 50%,var(--bg-tertiary) 100%);background-size:200% 100%;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton-image{height:120px;margin-bottom:1rem}.skeleton-title{height:20px;margin-bottom:.75rem;width:60%}.skeleton-text{height:14px;margin-bottom:.5rem;width:100%}.skeleton-text.short{width:80%}.stat-card{background:linear-gradient(135deg,var(--accent-purple),#ec4899);border-radius:16px;box-shadow:0 8px 24px #8b5cf64d;color:#fff;display:flex;flex-direction:column;gap:16px;padding:24px;transition:all .3s ease}.stat-card:hover{box-shadow:0 12px 32px #8b5cf666;transform:translateY(-4px)}.stat-icon{font-size:48px}.stat-content{flex:1 1}.stat-value{font-size:36px;font-weight:700;margin:0 0 8px}.stat-label{font-size:14px;margin:0 0 4px;opacity:.9}.stat-detail{font-size:12px;margin:0;opacity:.8}.stat-chart{align-items:flex-end;display:flex;gap:6px;height:50px}.stat-bar{background:#ffffff4d;border-radius:4px 4px 0 0;flex:1 1;transition:all .3s ease}.stat-card:hover .stat-bar{background:#ffffff80}.feature-card{background:var(--bg-primary);border:2px solid var(--border-color);border-radius:16px;padding:32px;text-align:center;transition:all .3s ease}.feature-card:hover{border-color:var(--accent-purple);box-shadow:0 12px 32px #8b5cf633;transform:translateY(-4px)}.feature-icon-wrapper{align-items:center;background:linear-gradient(135deg,var(--accent-purple),#ec4899);border-radius:20px;display:flex;height:80px;justify-content:center;margin:0 auto 20px;transition:all .3s ease;width:80px}.feature-card:hover .feature-icon-wrapper{transform:scale(1.1) rotate(5deg)}.feature-icon{font-size:40px}.feature-title{color:var(--text-primary);font-size:24px;font-weight:700;margin:0 0 12px}.feature-description{color:var(--text-secondary);font-size:14px;line-height:1.6;margin:0 0 20px}.feature-list{list-style:none;margin:0 0 24px;padding:0;text-align:left}.feature-item{border-bottom:1px solid var(--border-color);color:var(--text-primary);font-size:14px;padding:8px 0}.feature-item:last-child{border-bottom:none}.feature-button{background:var(--accent-purple);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:12px 32px;transition:all .2s ease}.feature-button:hover{background:#7c3aed;transform:translateX(4px)}@media (prefers-color-scheme:dark){.feature-card{background:#ffffff05}}@media (max-width:768px){.stat-card{padding:20px}.stat-value{font-size:28px}.feature-card{padding:24px}.feature-title{font-size:20px}}.floating-label-container{max-width:300px;position:relative;width:100%}.floating-label-input{background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:1rem;padding:1rem .75rem .5rem;transition:all .3s ease;width:100%}.floating-label-input:focus{background:var(--bg-hover);border-color:var(--accent-purple);outline:none}.floating-label{color:var(--text-secondary);font-size:1rem;left:.75rem;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:all .3s ease}.floating-label-active{font-size:.75rem;top:.5rem;transform:translateY(0)}.floating-label-active,.floating-label-input:focus+.floating-label{color:var(--accent-purple)}.animated-checkbox-container{align-items:center;cursor:pointer;display:flex;gap:.75rem;-webkit-user-select:none;user-select:none}.animated-checkbox-input{cursor:pointer;opacity:0;position:absolute}.animated-checkbox-custom{align-items:center;background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:6px;display:flex;height:24px;justify-content:center;position:relative;transition:all .3s ease;width:24px}.animated-checkbox-input:checked+.animated-checkbox-custom{background:var(--accent-purple);border-color:var(--accent-purple)}.animated-checkbox-icon{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;height:10px;opacity:0;transform:scale(0);transition:all .3s cubic-bezier(.68,-.55,.265,1.55);width:12px}.animated-checkbox-input:checked+.animated-checkbox-custom .animated-checkbox-icon{opacity:1;transform:scale(1)}.animated-checkbox-label{color:var(--text-primary);font-size:1rem}.search-input-container{max-width:300px;position:relative;width:100%}.search-input-icon{color:var(--text-muted);height:18px;left:1rem;position:absolute;top:50%;transform:translateY(-50%);transition:color .2s ease;width:18px}.search-input-container.focused .search-input-icon{color:var(--accent-purple)}.search-input{background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:24px;color:var(--text-primary);font-size:1rem;padding:.875rem 3rem;transition:all .3s ease;width:100%}.search-input:focus{background:var(--bg-hover);border-color:var(--accent-purple);outline:none}.search-input-clear{background:#0000;border:none;color:var(--text-muted);cursor:pointer;font-size:1rem;padding:.25rem;position:absolute;right:1rem;top:50%;transform:translateY(-50%);transition:color .2s ease}.search-input-clear:hover{color:var(--text-primary)}.password-input-container{max-width:300px;position:relative;width:100%}.password-input{background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:1rem;padding:.875rem 3rem .875rem 1rem;transition:all .3s ease;width:100%}.password-input:focus{background:var(--bg-hover);border-color:var(--accent-purple);outline:none}.password-toggle-btn{background:#0000;border:none;cursor:pointer;font-size:1.25rem;opacity:.7;padding:.25rem;position:absolute;right:1rem;top:50%;transform:translateY(-50%);transition:opacity .2s ease}.password-toggle-btn:hover{opacity:1}.range-slider-container{max-width:300px;width:100%}.range-slider-label{align-items:center;color:var(--text-primary);display:flex;font-size:.875rem;justify-content:space-between;margin-bottom:1rem}.range-slider-value{background:var(--accent-purple);border-radius:12px;color:#fff;font-size:.875rem;font-weight:600;padding:.25rem .75rem}.range-slider{-webkit-appearance:none;appearance:none;background:var(--bg-tertiary);border-radius:4px;height:8px;outline:none;position:relative;width:100%}.range-slider::-webkit-slider-track{background:var(--bg-tertiary);border-radius:4px;height:8px;width:100%}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--accent-purple);border-radius:50%;box-shadow:0 2px 8px #8b5cf64d;cursor:pointer;height:20px;-webkit-transition:all .2s ease;transition:all .2s ease;width:20px}.range-slider::-webkit-slider-thumb:hover{box-shadow:0 4px 12px #8b5cf680;transform:scale(1.2)}.range-slider::-moz-range-track{background:var(--bg-tertiary);border-radius:4px;height:8px;width:100%}.range-slider::-moz-range-thumb{background:var(--accent-purple);border:none;border-radius:50%;box-shadow:0 2px 8px #8b5cf64d;cursor:pointer;height:20px;-moz-transition:all .2s ease;transition:all .2s ease;width:20px}.range-slider::-moz-range-thumb:hover{box-shadow:0 4px 12px #8b5cf680;transform:scale(1.2)}.range-slider-progress{background:var(--accent-gradient);border-radius:4px;height:8px;left:0;pointer-events:none;position:absolute;top:0;transition:width .1s ease}.toggle-switch-container{align-items:center;cursor:pointer;display:flex;gap:.75rem;-webkit-user-select:none;user-select:none}.toggle-switch-input{cursor:pointer;opacity:0;position:absolute}.toggle-switch{background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:14px;height:28px;position:relative;transition:all .3s ease;width:52px}.toggle-switch-input:checked+.toggle-switch{background:var(--accent-purple);border-color:var(--accent-purple)}.toggle-switch-slider{background:#fff;border-radius:50%;box-shadow:0 2px 4px #0003;height:20px;left:2px;position:absolute;top:2px;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);width:20px}.toggle-switch-input:checked+.toggle-switch .toggle-switch-slider{left:26px}.toggle-switch-label{color:var(--text-primary);font-size:1rem}.radio-button-group{display:flex;flex-direction:column;gap:.75rem}.radio-button-container{align-items:center;cursor:pointer;display:flex;gap:.75rem;-webkit-user-select:none;user-select:none}.radio-button-input{cursor:pointer;opacity:0;position:absolute}.radio-button-custom{align-items:center;background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:50%;display:flex;height:24px;justify-content:center;position:relative;transition:all .3s ease;width:24px}.radio-button-input:checked+.radio-button-custom{background:var(--bg-tertiary);border-color:var(--accent-purple)}.radio-button-inner{background:var(--accent-purple);border-radius:50%;height:12px;transform:scale(0);transition:all .3s cubic-bezier(.68,-.55,.265,1.55);width:12px}.radio-button-input:checked+.radio-button-custom .radio-button-inner{transform:scale(1)}.radio-button-label{color:var(--text-primary);font-size:1rem}.file-upload-container{max-width:400px;width:100%}.file-upload-input{display:none}.file-upload-area{background:var(--bg-tertiary);border:2px dashed var(--border-color);border-radius:12px;cursor:pointer;padding:2rem;text-align:center;transition:all .3s ease}.file-upload-area:hover{background:var(--bg-hover);border-color:var(--accent-purple)}.file-upload-area.dragging{background:#8b5cf61a;border-color:var(--accent-purple)}.file-upload-icon{color:var(--text-secondary);font-size:3rem;margin-bottom:1rem}.file-upload-text{color:var(--text-primary);font-size:1rem;margin-bottom:.5rem}.file-upload-hint{color:var(--text-secondary);font-size:.875rem}.file-upload-selected{align-items:center;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;display:flex;gap:.75rem;margin-top:1rem;padding:1rem}.file-upload-file-icon{color:var(--accent-purple);font-size:1.5rem}.file-upload-file-info{flex:1 1}.file-upload-file-name{color:var(--text-primary);font-size:.875rem;font-weight:500;margin-bottom:.25rem}.file-upload-file-size{color:var(--text-secondary);font-size:.75rem}.file-upload-remove{background:#0000;border:none;color:var(--text-secondary);cursor:pointer;font-size:1.25rem;padding:.25rem;transition:color .2s ease}.file-upload-remove:hover{color:#ef4444}.auto-resize-textarea-container{max-width:400px;width:100%}.auto-resize-textarea-label{color:var(--text-primary);display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem}.auto-resize-textarea{background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-family:inherit;font-size:1rem;max-height:300px;min-height:80px;overflow-y:auto;padding:.875rem;resize:none;transition:all .3s ease;width:100%}.auto-resize-textarea:focus{background:var(--bg-hover);border-color:var(--accent-purple);outline:none}.auto-resize-textarea::placeholder{color:var(--text-secondary)}.auto-resize-textarea-char-count{color:var(--text-secondary);font-size:.75rem;margin-top:.5rem;text-align:right}.color-picker{display:flex;flex-direction:column;gap:1rem}.color-preview{align-items:center;border-radius:8px;box-shadow:0 4px 12px #0003;display:flex;height:80px;justify-content:center;transition:all .3s ease;width:100%}.color-value{color:#fff;font-size:1.125rem;font-weight:700;text-shadow:0 2px 4px #0000004d}.color-swatches{grid-gap:.75rem;display:grid;gap:.75rem;grid-template-columns:repeat(4,1fr)}.color-swatch{align-items:center;aspect-ratio:1;border:3px solid #0000;border-radius:8px;cursor:pointer;display:flex;justify-content:center;transition:all .3s ease;width:100%}.color-swatch:hover{box-shadow:0 4px 12px #0000004d;transform:scale(1.1)}.color-swatch.active{border-color:#fff;box-shadow:0 0 0 2px var(--bg-primary),0 4px 12px #0000004d}.color-input{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:1rem;padding:.75rem;text-align:center;transition:all .3s ease;width:100%}.color-input:focus{border-color:var(--accent-purple);outline:none}.date-picker{display:flex;flex-direction:column;gap:.75rem}.date-picker-label{align-items:center;color:var(--text-primary);display:flex;font-size:.875rem;font-weight:600;gap:.5rem}.date-picker-label svg{color:var(--accent-purple)}.date-picker-input{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:8px;color:var(--text-primary);cursor:pointer;font-size:1rem;padding:.875rem;transition:all .3s ease;width:100%}.date-picker-input:focus{border-color:var(--accent-purple);outline:none}.date-picker-input::-webkit-calendar-picker-indicator{cursor:pointer;filter:invert(.5)}.date-picker-display{background:var(--bg-tertiary);border-radius:8px;color:var(--text-secondary);font-size:.875rem;padding:.75rem;text-align:center}.tag-input{width:100%}.tag-input-container{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:8px;display:flex;flex-wrap:wrap;gap:.5rem;min-height:52px;padding:.75rem;transition:all .3s ease}.tag-input-container:focus-within{border-color:var(--accent-purple)}.tag{align-items:center;animation:tag-appear .2s ease;background:var(--accent-purple);border-radius:16px;color:#fff;display:flex;font-weight:500;gap:.5rem}@keyframes tag-appear{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.tag-text{-webkit-user-select:none;user-select:none}.tag-remove{align-items:center;background:#0000;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:1.25rem;height:18px;justify-content:center;line-height:1;padding:0;transition:background .2s ease;width:18px}.tag-remove:hover{background:#fff3}.tag-input-field{background:#0000;border:none;color:var(--text-primary);flex:1 1;font-size:.875rem;min-width:120px;outline:none;padding:.375rem 0}.tag-input-field::placeholder{color:var(--text-secondary)}.otp-input{align-items:center;display:flex;flex-direction:column;gap:1rem}.otp-input-group{display:flex;gap:.75rem}.otp-input-field{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:1.5rem;font-weight:700;height:56px;text-align:center;transition:all .3s ease;width:48px}.otp-input-field:focus{background:var(--bg-hover);border-color:var(--accent-purple);outline:none;transform:scale(1.05)}.otp-result{color:var(--text-secondary);font-family:Courier New,monospace;font-size:.875rem;font-weight:700;letter-spacing:.5em}.star-rating{align-items:center;display:flex;flex-direction:column;gap:.75rem}.star-rating-stars{display:flex;gap:.5rem}.star{background:#0000;border:none;color:var(--border-color);cursor:pointer;padding:0;transition:all .2s ease}.star:hover{transform:scale(1.2)}.star.filled{animation:star-fill .3s ease;color:#ffb800}@keyframes star-fill{0%{transform:scale(.8)}50%{transform:scale(1.3)}to{transform:scale(1)}}.star-rating-text{color:var(--text-secondary);font-size:.875rem;font-weight:600}.chip-input-container{width:100%}.chip-list{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;display:flex;flex-wrap:wrap;gap:.5rem;min-height:56px;padding:.75rem}.chip-item{align-items:center;background:var(--accent-purple);border-radius:16px;color:#fff;display:inline-flex;font-size:.875rem;gap:.375rem;padding:.375rem .75rem}.chip-item button{background:none;border:none;color:#fff;cursor:pointer;font-size:1.25rem;line-height:1;padding:0}.chip-input{background:none;font-size:1rem}.slider-with-marks{padding:1rem;width:100%}.slider-header{font-weight:600;margin-bottom:1rem}.slider-input{-webkit-appearance:none;background:var(--bg-tertiary);border-radius:3px;height:6px;outline:none;width:100%}.slider-input::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent-purple);border-radius:50%;cursor:pointer;height:20px;width:20px}.slider-marks{color:var(--text-secondary);display:flex;font-size:.75rem;justify-content:space-between;margin-top:.5rem}.masked-input-container{width:100%}.masked-input-label{display:block;font-size:.875rem;font-weight:600;margin-bottom:.5rem}.masked-input{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:1rem;padding:.75rem 1rem;transition:border-color .2s ease;width:100%}.masked-input:focus{border-color:var(--accent-purple);outline:none}.fade-in-scroll{opacity:0;padding:2rem;text-align:center;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}.fade-in-scroll-visible{opacity:1;transform:translateY(0)}.fade-in-scroll-icon{font-size:3rem;margin-bottom:1rem}.fade-in-scroll-text{color:var(--text-secondary);font-size:1rem;margin:0}.slide-in{opacity:0;padding:2rem;text-align:center;transform:translateX(-50px);transition:all .6s ease}.slide-in.visible{opacity:1;transform:translateX(0)}.bounce-in{opacity:0;padding:2rem;text-align:center;transform:scale(.3);transition:all .6s cubic-bezier(.68,-.55,.265,1.55)}.bounce-in.visible{opacity:1;transform:scale(1)}.scale-in{opacity:0;padding:2rem;text-align:center;transform:scale(0);transition:all .5s ease}.scale-in.visible{opacity:1;transform:scale(1)}.rotate-in{opacity:0;transform:rotate(-180deg) scale(.5);transition:all .8s cubic-bezier(.68,-.55,.265,1.55)}.rotate-in.visible{opacity:1;transform:rotate(0) scale(1)}.rotate-in-content{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:2rem;text-align:center}.rotate-in-content h3{color:var(--text-primary);margin:0 0 .5rem}.rotate-in-content p{color:var(--text-secondary);margin:0}.flip-in{opacity:0;transform:perspective(1000px) rotateY(90deg);transition:all .8s ease}.flip-in.visible{opacity:1;transform:perspective(1000px) rotateY(0)}.flip-in-content{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:2rem;text-align:center}.flip-in-content h3{color:var(--text-primary);margin:0 0 .5rem}.flip-in-content p{color:var(--text-secondary);margin:0}.reveal-text{color:var(--text-primary);display:flex;font-size:2rem;font-weight:700;justify-content:center}.reveal-text-letter{opacity:0;transform:translateY(20px);transition:all .5s ease}.reveal-text-letter.revealed{animation:letter-bounce .5s ease;opacity:1;transform:translateY(0)}@keyframes letter-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.typewriter-text{align-items:center;color:var(--text-primary);display:flex;font-size:1.5rem;font-weight:600;justify-content:center;min-height:40px}.typewriter-text-content{font-family:Courier New,monospace}.typewriter-cursor{animation:cursor-blink 1s infinite;font-weight:400;margin-left:2px}@keyframes cursor-blink{0%,49%{opacity:1}50%,to{opacity:0}}.counter-animation{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:2rem;text-align:center}.counter-value{-webkit-text-fill-color:#0000;background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;font-size:3rem;font-weight:700;margin-bottom:.5rem}.counter-label{color:var(--text-secondary);font-size:1rem;font-weight:500}.blur-reveal{background:var(--bg-secondary);border-radius:12px;filter:blur(10px);opacity:0;padding:2rem;transform:scale(.9);transition:all .6s ease}.blur-reveal.visible{filter:blur(0);opacity:1;transform:scale(1)}.stagger-container{display:flex;flex-direction:column;gap:.75rem}.stagger-item{animation:slideIn .5s forwards;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;opacity:0;padding:1rem}@keyframes slideIn{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}.parallax-container{border-radius:12px;height:200px;overflow:hidden;position:relative}.parallax-bg{background:var(--accent-gradient);color:#fff;inset:-50px;position:absolute}.parallax-bg,.parallax-fg{align-items:center;display:flex;font-weight:700;justify-content:center}.parallax-fg{height:100%;position:relative}.pulse-animation{opacity:0;padding:2rem;text-align:center;transition:opacity .6s ease}.pulse-animation.visible{opacity:1}.pulse-circle{animation:pulse 1.5s ease-in-out infinite;display:inline-block;font-size:4rem}.shake-animation{opacity:0;padding:2rem;text-align:center;transition:opacity .6s ease}.shake-animation.visible{opacity:1}.shake-box{animation:shake .6s ease-in-out;animation-iteration-count:3;display:inline-block;font-size:4rem}@keyframes shake{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-10px)}20%,40%,60%,80%{transform:translateX(10px)}}.transition-demo{align-items:center;display:flex;flex-direction:column;gap:1.5rem;min-height:300px;padding:2rem}.transition-toggle-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;box-shadow:0 4px 15px #667eea4d;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:.75rem 2rem;transition:all .3s ease}.transition-toggle-btn:hover{box-shadow:0 6px 20px #667eea66;transform:translateY(-2px)}.transition-toggle-btn:active{transform:translateY(0)}.transition-controls{align-items:center;display:flex;flex-direction:column;gap:1rem}.direction-buttons{display:flex;gap:.5rem}.direction-btn{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);cursor:pointer;font-size:.875rem;padding:.5rem 1rem;text-transform:capitalize;transition:all .2s ease}.direction-btn:hover{background:var(--bg-tertiary)}.direction-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#0000;color:#fff}.transition-content{background:var(--bg-secondary);border-radius:12px;box-shadow:0 4px 6px #0000001a;padding:2rem;text-align:center}.transition-icon{font-size:3rem;margin-bottom:1rem}.transition-content h3{color:var(--text-primary);font-size:1.5rem;margin:0 0 .5rem}.transition-content p{color:var(--text-secondary);font-size:1rem;margin:0}.fade-transition{opacity:0;pointer-events:none;transition:opacity .4s ease}.fade-transition-visible{opacity:1;pointer-events:auto}.slide-transition{opacity:0;pointer-events:none;transition:all .4s cubic-bezier(.4,0,.2,1)}.slide-transition-visible{opacity:1;pointer-events:auto}.slide-transition-left{transform:translateX(-100px)}.slide-transition-left.slide-transition-visible{transform:translateX(0)}.slide-transition-right{transform:translateX(100px)}.slide-transition-right.slide-transition-visible{transform:translateX(0)}.slide-transition-top{transform:translateY(-100px)}.slide-transition-top.slide-transition-visible{transform:translateY(0)}.slide-transition-bottom{transform:translateY(100px)}.slide-transition-bottom.slide-transition-visible{transform:translateY(0)}.scale-transition{opacity:0;pointer-events:none;transition:all .4s cubic-bezier(.4,0,.2,1)}.scale-transition-visible{opacity:1;pointer-events:auto}.scale-transition-grow{transform:scale(0)}.scale-transition-grow.scale-transition-visible{transform:scale(1)}.scale-transition-shrink{transform:scale(1.5)}.scale-transition-shrink.scale-transition-visible{transform:scale(1)}.scale-transition-zoom{transform:scale(.5)}.scale-transition-zoom.scale-transition-visible{transform:scale(1)}.collapse-transition{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1)}.collapse-transition-expanded{overflow:visible}.collapse-transition-content{transition:opacity .3s ease}.collapse-transition:not(.collapse-transition-expanded) .collapse-transition-content{opacity:0}.collapse-transition-expanded .collapse-transition-content{opacity:1}@media (max-width:768px){.transition-demo{padding:1rem}.transition-content{padding:1.5rem}.transition-icon{font-size:2.5rem}.transition-content h3{font-size:1.25rem}.transition-content p{font-size:.875rem}.direction-buttons{flex-wrap:wrap;justify-content:center}}.rotate-transition{max-height:0;opacity:0;overflow:hidden;transform:rotate(180deg);transition:all .5s cubic-bezier(.68,-.55,.265,1.55)}.rotate-transition-visible{max-height:500px;opacity:1;transform:rotate(0deg)}.zoom-transition{max-height:0;opacity:0;overflow:hidden;transform:scale(0);transition:all .4s cubic-bezier(.34,1.56,.64,1)}.zoom-transition-visible{max-height:500px;opacity:1;transform:scale(1)}.spin-loader{animation:spin-loader-animation .8s linear infinite;border:4px solid var(--border-color);border-radius:50%;border-top-color:var(--accent-purple);height:48px;width:48px}@keyframes spin-loader-animation{to{transform:rotate(1turn)}}.dot-loader{align-items:center;display:flex;gap:.5rem}.dot-loader .dot{animation:dot-loader-animation 1.4s ease-in-out infinite;background:var(--accent-purple);border-radius:50%;height:12px;width:12px}.dot-loader .dot:first-child{animation-delay:-.32s}.dot-loader .dot:nth-child(2){animation-delay:-.16s}@keyframes dot-loader-animation{0%,80%,to{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1.2)}}.bar-loader{align-items:flex-end;display:flex;gap:.375rem;height:48px}.bar-loader .bar{animation:bar-loader-animation 1.2s ease-in-out infinite;background:var(--accent-purple);border-radius:4px;width:8px}.bar-loader .bar:first-child{animation-delay:-.48s}.bar-loader .bar:nth-child(2){animation-delay:-.32s}.bar-loader .bar:nth-child(3){animation-delay:-.16s}@keyframes bar-loader-animation{0%,to{height:12px}50%{height:48px}}.pulse-loader{align-items:center;display:flex;gap:.5rem}.pulse-loader .pulse{animation:pulse-loader-animation 1.5s ease-in-out infinite;background:var(--accent-purple);border-radius:50%;height:16px;width:16px}.pulse-loader .pulse:first-child{animation-delay:0s}.pulse-loader .pulse:nth-child(2){animation-delay:.2s}.pulse-loader .pulse:nth-child(3){animation-delay:.4s}@keyframes pulse-loader-animation{0%,to{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}.wave-loader{align-items:center;display:flex;gap:.25rem;height:48px}.wave-loader .wave{animation:wave-loader-animation 1s ease-in-out infinite;background:var(--accent-purple);border-radius:3px;width:6px}.wave-loader .wave:first-child{animation-delay:0s}.wave-loader .wave:nth-child(2){animation-delay:.1s}.wave-loader .wave:nth-child(3){animation-delay:.2s}.wave-loader .wave:nth-child(4){animation-delay:.3s}.wave-loader .wave:nth-child(5){animation-delay:.4s}@keyframes wave-loader-animation{0%,to{height:12px}50%{height:48px}}.grid-loader{grid-gap:6px;display:grid;gap:6px;grid-template-columns:repeat(3,12px);grid-template-rows:repeat(3,12px)}.grid-loader .grid-item{animation:grid-loader-animation 1.5s ease-in-out infinite;background:var(--accent-purple);border-radius:2px;height:12px;width:12px}.grid-loader .grid-item:first-child{animation-delay:0s}.grid-loader .grid-item:nth-child(2){animation-delay:.1s}.grid-loader .grid-item:nth-child(3){animation-delay:.2s}.grid-loader .grid-item:nth-child(4){animation-delay:.3s}.grid-loader .grid-item:nth-child(5){animation-delay:.4s}.grid-loader .grid-item:nth-child(6){animation-delay:.5s}.grid-loader .grid-item:nth-child(7){animation-delay:.6s}.grid-loader .grid-item:nth-child(8){animation-delay:.7s}.grid-loader .grid-item:nth-child(9){animation-delay:.8s}@keyframes grid-loader-animation{0%,to{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}.skeleton-loader-container{align-items:center;display:flex;gap:1rem}.skeleton-loader{animation:shimmer 1.5s infinite;background:linear-gradient(90deg,var(--bg-tertiary) 0,var(--bg-hover) 50%,var(--bg-tertiary) 100%);background-size:200% 100%}.skeleton-circle{border-radius:50%;height:48px;width:48px}.skeleton-line{border-radius:4px;flex:1 1;height:16px}.skeleton-line.short{width:60%}.progress-bar-container{width:100%}.progress-bar{background:var(--bg-tertiary);border-radius:4px;height:8px;margin-bottom:.5rem;overflow:hidden;width:100%}.progress-bar-fill{background:var(--accent-gradient);height:100%;transition:width .3s ease}.progress-text{color:var(--text-secondary);font-size:.875rem;font-weight:600}.modal-trigger-btn{background:var(--accent-purple);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:.9375rem;font-weight:600;padding:.75rem 1.5rem;transition:all .2s ease}.modal-trigger-btn:hover{background:var(--accent-purple-hover);transform:translateY(-2px)}.slide-modal-overlay{align-items:flex-end;animation:fadeIn .3s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:2000}.slide-modal-content{animation:slideUp .3s ease;background:var(--bg-secondary);border-radius:16px 16px 0 0;margin:0 auto;max-width:500px;padding:2rem;position:relative;width:100%}.slide-modal-close{align-items:center;background:#0000;border:none;color:var(--text-secondary);cursor:pointer;display:flex;font-size:1.5rem;height:32px;justify-content:center;position:absolute;right:1rem;top:1rem;transition:color .2s ease;width:32px}.slide-modal-close:hover,.slide-modal-title{color:var(--text-primary)}.slide-modal-title{font-size:1.5rem;margin-bottom:1rem}.slide-modal-text{color:var(--text-secondary);line-height:1.6;margin-bottom:1.5rem}.slide-modal-action{background:var(--accent-purple);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:.75rem 2rem;transition:all .2s ease;width:100%}.slide-modal-action:hover{background:var(--accent-purple-hover)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-modal-overlay{align-items:center;animation:fadeIn .3s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000b3;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:2000}.fade-modal-content{animation:fadeIn .3s ease;background:var(--bg-secondary);border-radius:16px;box-shadow:0 20px 60px #00000080;max-width:450px;padding:2rem;position:relative;width:90%}.fade-modal-close{align-items:center;background:#0000;border:none;border-radius:50%;color:var(--text-secondary);cursor:pointer;display:flex;font-size:1.5rem;height:32px;justify-content:center;position:absolute;right:1rem;top:1rem;transition:all .2s ease;width:32px}.fade-modal-close:hover{background:var(--bg-tertiary);color:var(--text-primary)}.fade-modal-title{color:var(--text-primary);font-size:1.5rem;font-weight:600;margin-bottom:1rem}.fade-modal-text{color:var(--text-secondary);line-height:1.6;margin-bottom:1.5rem}.fade-modal-action{background:var(--accent-purple);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:.75rem 2rem;transition:all .2s ease;width:100%}.fade-modal-action:hover{background:var(--accent-purple-hover);transform:translateY(-2px)}.zoom-modal-overlay{align-items:center;animation:fadeIn .3s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000b3;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:2000}.zoom-modal-content{animation:zoomIn .3s cubic-bezier(.68,-.55,.265,1.55);background:var(--bg-secondary);border-radius:16px;box-shadow:0 20px 60px #00000080;max-width:450px;padding:2rem;position:relative;width:90%}@keyframes zoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.zoom-modal-close{align-items:center;background:#0000;border:none;border-radius:50%;color:var(--text-secondary);cursor:pointer;display:flex;font-size:1.5rem;height:32px;justify-content:center;position:absolute;right:1rem;top:1rem;transition:all .2s ease;width:32px}.zoom-modal-close:hover{background:var(--bg-tertiary);color:var(--text-primary)}.zoom-modal-title{color:var(--text-primary);font-size:1.5rem;font-weight:600;margin-bottom:1rem}.zoom-modal-text{color:var(--text-secondary);line-height:1.6;margin-bottom:1.5rem}.zoom-modal-action{background:var(--accent-purple);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:.75rem 2rem;transition:all .2s ease;width:100%}.zoom-modal-action:hover{background:var(--accent-purple-hover);transform:translateY(-2px)}.side-drawer-overlay{align-items:flex-start;animation:fadeIn .3s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;bottom:0;display:flex;justify-content:flex-end;left:0;position:fixed;right:0;top:0;z-index:2000}.side-drawer-content{animation:slideInRight .3s ease;background:var(--bg-secondary);box-shadow:-8px 0 32px #0000004d;height:100vh;max-width:400px;overflow-y:auto;padding:2rem;position:relative;width:100%}@keyframes slideInRight{0%{transform:translateX(100%)}to{transform:translateX(0)}}.side-drawer-close{align-items:center;background:#0000;border:none;border-radius:50%;color:var(--text-secondary);cursor:pointer;display:flex;font-size:1.5rem;height:32px;justify-content:center;position:absolute;right:1rem;top:1rem;transition:all .2s ease;width:32px}.side-drawer-close:hover{background:var(--bg-tertiary);color:var(--text-primary)}.side-drawer-title{color:var(--text-primary);font-size:1.5rem;font-weight:600;margin-bottom:1rem}.side-drawer-text{color:var(--text-secondary);line-height:1.6;margin-bottom:1.5rem}.side-drawer-action{background:var(--accent-purple);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:.75rem 2rem;transition:all .2s ease;width:100%}.side-drawer-action:hover{background:var(--accent-purple-hover);transform:translateY(-2px)}.bottom-sheet-trigger{background:var(--accent-purple);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;padding:.875rem 2rem}.bottom-sheet-overlay{align-items:flex-end;animation:fadeIn .2s;background:#00000080;display:flex;inset:0;position:fixed;z-index:1000}.bottom-sheet-content{animation:slideUp .3s;background:var(--bg-secondary);border-radius:16px 16px 0 0;padding:1.5rem;width:100%}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.bottom-sheet-handle{background:var(--border-color);border-radius:2px;height:4px;margin:0 auto 1rem;width:40px}.linear-progress-container{background:#2a2a2a;background:var(--bg-tertiary,#2a2a2a);border-radius:15px;height:30px;overflow:hidden;position:relative;width:100%}.linear-progress-bar{align-items:center;background:linear-gradient(90deg,var(--accent-purple) 0,var(--accent-pink) 100%);border-radius:15px;display:flex;height:100%;justify-content:center;min-width:30px;transition:width .3s ease}.linear-progress-text{color:#fff;font-size:12px;font-weight:700;text-shadow:0 1px 2px #0000004d}.circular-progress-container{align-items:center;display:flex;height:120px;justify-content:center;position:relative;width:120px}.circular-progress-svg{height:100%;transform:rotate(-90deg);width:100%}.circular-progress-bg{fill:none;stroke:var(--bg-tertiary);stroke-width:8}.circular-progress-bar{fill:none;stroke:url(#gradient);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .5s ease}.circular-progress-text{color:var(--text-primary);font-size:1.5rem;font-weight:700;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.step-progress-container{max-width:600px;width:100%}.step-progress-bar{display:flex;justify-content:space-between;margin-bottom:2rem;position:relative}.step-progress-line{background:var(--border-color);height:3px;left:0;position:absolute;right:0;top:20px;z-index:0}.step-progress-line-filled{background:var(--accent-gradient);height:100%;left:0;position:absolute;top:0;transition:width .5s ease}.step-progress-step{align-items:center;display:flex;flex:1 1;flex-direction:column;position:relative;z-index:1}.step-progress-circle{align-items:center;background:var(--bg-secondary);border:3px solid var(--border-color);border-radius:50%;color:var(--text-secondary);display:flex;font-weight:600;height:40px;justify-content:center;margin-bottom:.5rem;transition:all .3s ease;width:40px}.step-progress-circle.active{box-shadow:0 4px 12px #8b5cf666}.step-progress-circle.active,.step-progress-circle.completed{background:var(--accent-purple);border-color:var(--accent-purple);color:#fff}.step-progress-label{color:var(--text-secondary);font-size:.875rem;text-align:center;transition:color .3s ease}.step-progress-label.active{color:var(--text-primary);font-weight:600}.underline-tab-container{width:100%}.underline-tab-list{border-bottom:2px solid #333;border-bottom:2px solid var(--border-color,#333);display:flex;gap:1rem}.underline-tab{background:none;border:none;border-bottom:2px solid #0000;color:#888;color:var(--text-secondary,#888);cursor:pointer;font-size:14px;font-weight:500;margin-bottom:-2px;padding:.75rem 1.5rem;position:relative;transition:all .3s ease}.underline-tab:hover{color:#fff;color:var(--text-primary,#fff)}.underline-tab.active{border-bottom-color:#8b5cf6;border-bottom-color:var(--accent-purple,#8b5cf6);color:#8b5cf6;color:var(--accent-purple,#8b5cf6)}.pill-tab-container{width:100%}.pill-tab-list{background:var(--bg-tertiary);border-radius:12px;display:flex;gap:.5rem;padding:.375rem}.pill-tab{background:#0000;border:none;border-radius:8px;color:var(--text-secondary);cursor:pointer;flex:1 1;font-size:.9375rem;font-weight:500;padding:.75rem 1.5rem;transition:all .3s ease;white-space:nowrap}.pill-tab:hover{background:#8b5cf61a;color:var(--text-primary)}.pill-tab.active{background:var(--accent-purple);box-shadow:0 2px 8px #8b5cf64d;color:#fff}.pill-tab-content{padding:1.5rem 0}.vertical-tab-container{display:flex;gap:1.5rem;min-height:200px;width:100%}.vertical-tab-list{border-right:2px solid var(--border-color);display:flex;flex-direction:column;gap:.5rem;min-width:180px;padding-right:1rem}.vertical-tab{align-items:center;background:#0000;border:none;border-left:3px solid #0000;border-radius:0 6px 6px 0;color:var(--text-secondary);cursor:pointer;display:flex;font-size:.9375rem;font-weight:500;gap:.75rem;margin-left:-1rem;padding:.75rem 1rem;text-align:left;transition:all .3s ease}.vertical-tab:hover{background:var(--bg-tertiary);color:var(--text-primary)}.vertical-tab.active{background:#8b5cf61a;border-left-color:var(--accent-purple);color:var(--accent-purple)}.vertical-tab-icon{font-size:1.25rem}.vertical-tab-content{flex:1 1;padding:0 1rem}.basic-tooltip-container{display:inline-block;position:relative}.basic-tooltip-trigger{background:#8b5cf6;background:var(--accent-purple,#8b5cf6);border:none;border-radius:6px;color:#fff;cursor:pointer;padding:.5rem 1rem;transition:all .2s ease}.basic-tooltip-trigger:hover{background:#7c3aed;background:var(--accent-purple-hover,#7c3aed)}.basic-tooltip{animation:tooltip-fade-in .2s ease;background:#1e1e1e;background:var(--bg-secondary,#1e1e1e);border-radius:6px;bottom:calc(100% + 8px);box-shadow:0 4px 12px #0000004d;color:#fff;color:var(--text-primary,#fff);font-size:12px;padding:.5rem .75rem;white-space:nowrap}.basic-tooltip,.basic-tooltip:after{left:50%;position:absolute;transform:translateX(-50%)}.basic-tooltip:after{border:6px solid #0000;border-top:6px solid var(--bg-secondary,#1e1e1e);content:"";top:100%}@keyframes tooltip-fade-in{0%{opacity:0;transform:translateX(-50%) translateY(-4px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.animated-tooltip-container{display:inline-block;position:relative}.animated-tooltip-trigger{background:var(--accent-purple);border:none;border-radius:6px;color:#fff;cursor:pointer;padding:.5rem 1rem;transition:all .2s ease}.animated-tooltip-trigger:hover{background:var(--accent-purple-hover);transform:translateY(-2px)}.animated-tooltip{animation:tooltip-bounce .4s cubic-bezier(.68,-.55,.265,1.55);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;bottom:calc(100% + 12px);box-shadow:0 8px 24px #0006;color:var(--text-primary);font-size:.875rem;left:50%;padding:.75rem 1rem;position:absolute;transform:translateX(-50%);white-space:nowrap}.animated-tooltip:after{border:6px solid #0000;border-top:6px solid var(--bg-secondary);top:100%}.animated-tooltip:after,.animated-tooltip:before{content:"";left:50%;position:absolute;transform:translateX(-50%)}.animated-tooltip:before{border:7px solid #0000;border-top:7px solid var(--border-color);top:calc(100% + 1px)}@keyframes tooltip-bounce{0%{opacity:0;transform:translateX(-50%) translateY(10px) scale(.8)}50%{transform:translateX(-50%) translateY(-5px) scale(1.05)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}.arrow-tooltip-container{display:inline-block;position:relative}.arrow-tooltip-trigger{background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:6px;color:var(--text-primary);cursor:pointer;padding:.5rem 1rem;transition:all .2s ease}.arrow-tooltip-trigger:hover{background:var(--bg-hover);border-color:var(--accent-purple)}.arrow-tooltip{animation:tooltip-fade-slide .3s ease;background:linear-gradient(135deg,var(--accent-purple),var(--accent-pink));border-radius:8px;bottom:calc(100% + 12px);box-shadow:0 8px 24px #8b5cf666;color:#fff;font-size:.875rem;font-weight:500;padding:.75rem 1rem;white-space:nowrap}.arrow-tooltip,.arrow-tooltip:after{left:50%;position:absolute;transform:translateX(-50%)}.arrow-tooltip:after{border:8px solid #0000;border-top:8px solid var(--accent-pink);content:"";top:100%}@keyframes tooltip-fade-slide{0%{opacity:0;transform:translateX(-50%) translateY(-8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.toast-demo-container{display:flex;flex-direction:column;gap:1.5rem;width:100%}.toast-buttons{display:flex;flex-wrap:wrap;gap:.75rem}.toast-notification-trigger{background:var(--accent-purple);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:.9375rem;font-weight:600;padding:.75rem 1.5rem;transition:all .2s ease}.toast-notification-trigger:hover{background:var(--accent-purple-hover);transform:translateY(-2px)}.toast-notification-container{display:flex;flex-direction:column;gap:.75rem;position:fixed;right:1.5rem;top:1.5rem;z-index:3000}.toast-notification{align-items:flex-start;animation:toast-slide-in .3s ease;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;box-shadow:0 8px 24px #0000004d;display:flex;gap:.75rem;max-width:400px;min-width:300px;padding:1rem 1.25rem;position:relative}.toast-notification.success{border-left:4px solid #10b981}.toast-notification.error{border-left:4px solid #ef4444}.toast-notification.warning{border-left:4px solid #f59e0b}.toast-notification.info{border-left:4px solid #3b82f6}.toast-notification-icon{flex-shrink:0;font-size:1.25rem;margin-top:.125rem}.toast-notification.success .toast-notification-icon{color:#10b981}.toast-notification.error .toast-notification-icon{color:#ef4444}.toast-notification.warning .toast-notification-icon{color:#f59e0b}.toast-notification.info .toast-notification-icon{color:#3b82f6}.toast-notification-content{flex:1 1}.toast-notification-title{color:var(--text-primary);font-size:.9375rem;font-weight:600;margin-bottom:.25rem}.toast-notification-message{color:var(--text-secondary);font-size:.875rem;line-height:1.4;margin:0}.toast-notification-close{align-items:center;background:#0000;border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;display:flex;flex-shrink:0;font-size:1.25rem;height:24px;justify-content:center;padding:0;transition:color .2s ease;width:24px}.toast-notification-close:hover{background:var(--bg-tertiary);color:var(--text-primary)}@keyframes toast-slide-in{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}.alert-box{align-items:flex-start;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;display:flex;gap:.75rem;max-width:500px;padding:1rem 1.25rem;position:relative;width:100%}.alert-box.success{background:#10b9811a;border-color:#10b981}.alert-box.error{background:#ef44441a;border-color:#ef4444}.alert-box.warning{background:#f59e0b1a;border-color:#f59e0b}.alert-box.info{background:#3b82f61a;border-color:#3b82f6}.alert-box-icon{flex-shrink:0;font-size:1.5rem}.alert-box.success .alert-box-icon{color:#10b981}.alert-box.error .alert-box-icon{color:#ef4444}.alert-box.warning .alert-box-icon{color:#f59e0b}.alert-box.info .alert-box-icon{color:#3b82f6}.alert-box-content{flex:1 1}.alert-box-title{font-size:1rem;font-weight:600;margin-bottom:.25rem}.alert-box.success .alert-box-title{color:#10b981}.alert-box.error .alert-box-title{color:#ef4444}.alert-box.warning .alert-box-title{color:#f59e0b}.alert-box.info .alert-box-title{color:#3b82f6}.alert-box-message{color:var(--text-secondary);font-size:.875rem;line-height:1.5;margin:0}.alert-box-close{align-items:center;background:#0000;border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;display:flex;flex-shrink:0;font-size:1.25rem;height:24px;justify-content:center;padding:0;transition:all .2s ease;width:24px}.alert-box-close:hover{background:#0000001a;color:var(--text-primary)}.badge-demo-container{align-items:center;display:flex;flex-direction:column;gap:1.5rem}.badge-examples{display:flex;flex-wrap:wrap;gap:1.5rem}.badge-controls{display:flex;gap:.75rem}.badge-controls button{background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:6px;color:var(--text-primary);cursor:pointer;padding:.5rem 1rem;transition:all .2s ease}.badge-controls button:hover{background:var(--bg-hover);border-color:var(--accent-purple)}.badge-container{display:inline-block;position:relative}.badge-trigger{background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:8px;color:var(--text-primary);cursor:pointer;font-size:.9375rem;font-weight:500;padding:.5rem 1rem;transition:all .2s ease}.badge-trigger:hover{background:var(--bg-hover);border-color:var(--accent-purple)}.badge{align-items:center;animation:badge-pulse 2s ease-in-out infinite;background:#ef4444;border-radius:10px;box-shadow:0 2px 8px #ef444466;color:#fff;display:flex;font-size:.75rem;font-weight:700;height:20px;justify-content:center;min-width:20px;padding:0 6px;position:absolute;right:-8px;top:-8px}.badge.dot{border-radius:50%;height:12px;min-width:12px;padding:0}.badge.success{background:#10b981}.badge.warning{background:#f59e0b}.badge.info{background:#3b82f6}.show-alert-button{background:var(--accent-purple);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:.9375rem;font-weight:600;padding:.75rem 1.5rem;transition:all .2s ease}.show-alert-button:hover{background:var(--accent-purple-hover);transform:translateY(-2px)}.basic-dropdown-container{display:inline-block;position:relative}.basic-dropdown-trigger{align-items:center;background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:8px;color:var(--text-primary);cursor:pointer;display:flex;font-size:.9375rem;font-weight:500;gap:.5rem;justify-content:space-between;min-width:180px;padding:.75rem 1.25rem;transition:all .2s ease}.basic-dropdown-trigger:hover{background:var(--bg-hover)}.basic-dropdown-trigger.open,.basic-dropdown-trigger:hover{border-color:var(--accent-purple)}.basic-dropdown-arrow{font-size:.75rem;transition:transform .3s ease}.basic-dropdown-arrow.open{transform:rotate(180deg)}.basic-dropdown-menu{animation:dropdown-slide-down .2s ease;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 8px 24px #0000004d;left:0;overflow:hidden;position:absolute;right:0;top:calc(100% + 8px);z-index:100}.basic-dropdown-item{align-items:center;color:var(--text-primary);cursor:pointer;display:flex;font-size:.9375rem;gap:.5rem;padding:.75rem 1rem;transition:background .2s ease}.basic-dropdown-item:hover{background:var(--bg-tertiary)}.basic-dropdown-item.selected{background:#8b5cf61a;color:var(--accent-purple)}@keyframes dropdown-slide-down{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.menu-dropdown-container{display:inline-block;position:relative}.menu-dropdown-trigger{align-items:center;background:#0000;border:none;border-radius:6px;color:var(--text-primary);cursor:pointer;display:flex;font-size:1.25rem;height:36px;justify-content:center;padding:.5rem;transition:all .2s ease;width:36px}.menu-dropdown-trigger:hover{background:var(--bg-tertiary)}.menu-dropdown-menu{animation:dropdown-slide-down .2s ease;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 8px 24px #0000004d;min-width:200px;overflow:hidden;position:absolute;right:0;top:calc(100% + 8px);z-index:100}.menu-dropdown-item{align-items:center;border-bottom:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;display:flex;font-size:.9375rem;gap:.75rem;padding:.875rem 1rem;transition:background .2s ease}.menu-dropdown-item:last-child{border-bottom:none}.menu-dropdown-item:hover{background:var(--bg-tertiary)}.menu-dropdown-item.danger{color:#ef4444}.menu-dropdown-item.danger:hover{background:#ef44441a}.menu-dropdown-icon{align-items:center;display:flex;font-size:1.125rem;justify-content:center;width:20px}.menu-dropdown-divider{background:var(--border-color);height:1px;margin:.25rem 0}.select-dropdown-container{max-width:300px;position:relative;width:100%}.select-dropdown-label{color:var(--text-primary);display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem}.select-dropdown-trigger{align-items:center;background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:8px;color:var(--text-primary);cursor:pointer;display:flex;font-size:1rem;gap:.5rem;justify-content:space-between;padding:.875rem 1rem;transition:all .2s ease;width:100%}.select-dropdown-trigger:hover{background:var(--bg-hover)}.select-dropdown-trigger.open,.select-dropdown-trigger:hover{border-color:var(--accent-purple)}.select-dropdown-arrow,.select-dropdown-trigger.placeholder{color:var(--text-secondary)}.select-dropdown-arrow{font-size:.75rem;transition:transform .3s ease}.select-dropdown-arrow.open{color:var(--accent-purple);transform:rotate(180deg)}.select-dropdown-menu{animation:dropdown-slide-down .2s ease;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 8px 24px #0000004d;left:0;max-height:240px;overflow-y:auto;position:absolute;right:0;top:calc(100% + 8px);z-index:100}.select-dropdown-menu::-webkit-scrollbar{width:6px}.select-dropdown-menu::-webkit-scrollbar-track{background:var(--bg-tertiary);border-radius:3px}.select-dropdown-menu::-webkit-scrollbar-thumb{background:var(--accent-purple);border-radius:3px}.select-dropdown-search{background:var(--bg-secondary);border-bottom:1px solid var(--border-color);padding:.75rem;position:-webkit-sticky;position:sticky;top:0}.select-dropdown-search-input{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:.875rem;padding:.625rem .75rem;transition:all .2s ease;width:100%}.select-dropdown-search-input:focus{border-color:var(--accent-purple);outline:none}.select-dropdown-item{align-items:center;color:var(--text-primary);cursor:pointer;display:flex;font-size:.9375rem;gap:.5rem;padding:.75rem 1rem;transition:background .2s ease}.select-dropdown-item:hover{background:var(--bg-tertiary)}.select-dropdown-item.selected{background:#8b5cf61a;color:var(--accent-purple);font-weight:500}.select-dropdown-item-icon{align-items:center;display:flex;font-size:1rem;justify-content:center;width:20px}.select-dropdown-no-results{color:var(--text-secondary);font-size:.875rem;padding:1.5rem;text-align:center}.breadcrumb-container{flex-wrap:wrap}.breadcrumb-container,.breadcrumb-item{align-items:center;display:flex;gap:.5rem}.breadcrumb-item{font-size:.9375rem}.breadcrumb-link{align-items:center;border-radius:6px;color:var(--text-secondary);display:flex;gap:.375rem;padding:.375rem .75rem;text-decoration:none;transition:all .2s ease}.breadcrumb-link:hover{background:var(--bg-tertiary);color:var(--accent-purple)}.breadcrumb-link.active{background:#8b5cf61a;color:var(--text-primary);font-weight:600}.breadcrumb-icon{font-size:1rem}.breadcrumb-separator{color:var(--text-muted);font-size:.875rem;-webkit-user-select:none;user-select:none}.pagination-container{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.pagination-button{align-items:center;background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:8px;color:var(--text-primary);cursor:pointer;display:flex;font-size:.9375rem;font-weight:500;height:40px;justify-content:center;min-width:40px;padding:0 .75rem;transition:all .2s ease}.pagination-button:hover:not(:disabled):not(.active){background:var(--bg-hover);border-color:var(--accent-purple);color:var(--accent-purple)}.pagination-button.active{background:var(--accent-purple);border-color:var(--accent-purple);box-shadow:0 2px 8px #8b5cf64d;color:#fff;font-weight:600}.pagination-button:disabled{cursor:not-allowed;opacity:.4}.pagination-ellipsis{align-items:center;color:var(--text-secondary);display:flex;font-size:1rem;height:40px;justify-content:center;min-width:40px;-webkit-user-select:none;user-select:none}.pagination-info{color:var(--text-secondary);font-size:.875rem;padding:0 .5rem;white-space:nowrap}.stepper-container{max-width:800px;width:100%}.stepper-header{display:flex;justify-content:space-between;margin-bottom:2rem;position:relative}.stepper-line{background:var(--border-color);height:3px;left:0;position:absolute;right:0;top:24px;z-index:0}.stepper-line-progress{background:var(--accent-gradient);height:100%;left:0;position:absolute;top:0;transition:width .5s ease}.stepper-step{align-items:center;display:flex;flex:1 1;flex-direction:column;position:relative;z-index:1}.stepper-step-circle{align-items:center;background:var(--bg-secondary);border:3px solid var(--border-color);border-radius:50%;color:var(--text-secondary);display:flex;font-size:1rem;font-weight:700;height:48px;justify-content:center;margin-bottom:.75rem;transition:all .3s ease;width:48px}.stepper-step.active .stepper-step-circle{box-shadow:0 4px 12px #8b5cf666;transform:scale(1.1)}.stepper-step.active .stepper-step-circle,.stepper-step.completed .stepper-step-circle{background:var(--accent-purple);border-color:var(--accent-purple);color:#fff}.stepper-step-icon{font-size:1.25rem}.stepper-step-label{color:var(--text-secondary);font-size:.875rem;font-weight:500;text-align:center;transition:all .3s ease}.stepper-step.active .stepper-step-label{color:var(--text-primary);font-weight:600}.stepper-step-description{color:var(--text-muted);font-size:.75rem;margin-top:.25rem;text-align:center}.stepper-content{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;margin-bottom:1.5rem;padding:2rem}.stepper-content-title{color:var(--text-primary);font-size:1.25rem;font-weight:600;margin-bottom:1rem}.stepper-content-text{color:var(--text-secondary);line-height:1.6;margin-bottom:1.5rem}.stepper-actions{display:flex;gap:1rem;justify-content:space-between}.stepper-button{align-items:center;border:none;border-radius:8px;cursor:pointer;display:flex;font-size:.9375rem;font-weight:600;gap:.5rem;padding:.75rem 1.5rem;transition:all .2s ease}.stepper-button-back{background:var(--bg-tertiary);border:2px solid var(--border-color);color:var(--text-primary)}.stepper-button-back:hover{background:var(--bg-hover);border-color:var(--accent-purple)}.stepper-button-back:disabled{cursor:not-allowed;opacity:.4}.stepper-button-next{background:var(--accent-purple);color:#fff}.stepper-button-next:hover{background:var(--accent-purple-hover);transform:translateY(-2px)}.stepper-button-next:disabled{cursor:not-allowed;opacity:.6}.stepper-button-icon{font-size:1rem}@media (max-width:768px){.breadcrumb-container{font-size:.875rem}.pagination-container{justify-content:center}.pagination-button{font-size:.875rem;height:36px;min-width:36px}.stepper-step-circle{font-size:.875rem;height:40px;width:40px}.stepper-step-label{font-size:.75rem}.stepper-step-description{display:none}.stepper-content{padding:1.5rem}.stepper-actions{flex-direction:column-reverse}.stepper-button{justify-content:center;width:100%}}.image-slider{display:flex;flex-direction:column;gap:1rem;max-width:500px;width:100%}.slider-container{background:var(--bg-secondary);border-radius:12px;overflow:hidden;position:relative}.slider-track{display:flex;transition:transform .5s cubic-bezier(.68,-.55,.265,1.55)}.slider-slide{align-items:center;color:#fff;display:flex;font-size:2rem;font-weight:700;height:300px;justify-content:center;min-width:100%}.slider-slide-title{text-shadow:0 2px 8px #0000004d}.slider-arrow{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#00000080;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:40px;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);transition:all .3s ease;width:40px;z-index:10}.slider-arrow:hover{background:#000000b3;transform:translateY(-50%) scale(1.1)}.slider-arrow-left{left:1rem}.slider-arrow-right{right:1rem}.slider-dots{display:flex;gap:.5rem;justify-content:center}.slider-dot{background:var(--border-color);border:none;border-radius:50%;cursor:pointer;height:10px;padding:0;transition:all .3s ease;width:10px}.slider-dot.active{background:var(--accent-purple);border-radius:5px;width:32px}.slider-dot:hover{background:var(--accent-purple);opacity:.7}.content-slider{max-width:600px;width:100%}.content-slider-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.content-slider-title{color:var(--text-primary);font-size:1.25rem;font-weight:600;margin:0}.content-slider-controls{display:flex;gap:.5rem}.content-slider-btn{align-items:center;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);cursor:pointer;display:flex;height:32px;justify-content:center;transition:all .3s ease;width:32px}.content-slider-btn:disabled{cursor:not-allowed;opacity:.4}.content-slider-btn:not(:disabled):hover{background:var(--accent-purple);border-color:var(--accent-purple);color:#fff}.content-slider-viewport{border-radius:12px;overflow:hidden}.content-slider-track{display:flex;gap:1rem;transition:transform .5s cubic-bezier(.68,-.55,.265,1.55)}.content-slider-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;min-width:calc(50% - .5rem);padding:1.5rem;transition:all .3s ease}.content-slider-card:hover{border-color:var(--accent-purple);box-shadow:0 4px 12px #8b5cf633}.content-slider-card-title{color:var(--text-primary);font-size:1.125rem;font-weight:600;margin:0 0 .5rem}.content-slider-card-description{color:var(--text-secondary);font-size:.875rem;line-height:1.6;margin:0}.basic-accordion{display:flex;flex-direction:column;gap:.75rem;max-width:600px;width:100%}.accordion-item{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;overflow:hidden;transition:all .3s ease}.accordion-item.open{border-color:var(--accent-purple)}.accordion-header{align-items:center;background:#0000;border:none;cursor:pointer;display:flex;justify-content:space-between;padding:1rem 1.25rem;transition:all .3s ease;width:100%}.accordion-header:hover{background:var(--bg-hover)}.accordion-title{color:var(--text-primary);font-size:1rem;font-weight:600;text-align:left}.accordion-icon{color:var(--text-secondary);flex-shrink:0;transition:transform .3s ease}.accordion-item.open .accordion-icon{color:var(--accent-purple);transform:rotate(180deg)}.accordion-content{max-height:0;overflow:hidden;transition:max-height .3s ease}.accordion-item.open .accordion-content{max-height:500px}.accordion-text{color:var(--text-secondary);line-height:1.6;margin:0;padding:0 1.25rem 1.25rem}.nested-accordion{display:flex;flex-direction:column;gap:.75rem;max-width:600px;width:100%}.nested-accordion-parent{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;overflow:hidden;transition:all .3s ease}.nested-accordion-parent.open{border-color:var(--accent-purple)}.nested-accordion-parent-header{align-items:center;background:#0000;border:none;cursor:pointer;display:flex;justify-content:space-between;padding:1rem 1.25rem;transition:all .3s ease;width:100%}.nested-accordion-parent-header:hover{background:var(--bg-hover)}.nested-accordion-parent-title{color:var(--text-primary);font-size:1.125rem;font-weight:700;text-align:left}.nested-accordion-icon{color:var(--text-secondary);flex-shrink:0;transition:transform .3s ease}.nested-accordion-parent.open .nested-accordion-parent-header .nested-accordion-icon{color:var(--accent-purple);transform:rotate(180deg)}.nested-accordion-parent-content{max-height:0;overflow:hidden;padding:0;transition:max-height .3s ease}.nested-accordion-parent.open .nested-accordion-parent-content{max-height:1000px;padding:0 .5rem .5rem}.nested-accordion-child{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;margin-bottom:.5rem;overflow:hidden;transition:all .3s ease}.nested-accordion-child.open{background:var(--bg-secondary);border-color:var(--accent-purple)}.nested-accordion-child-header{align-items:center;background:#0000;border:none;cursor:pointer;display:flex;justify-content:space-between;padding:.75rem 1rem;transition:all .3s ease;width:100%}.nested-accordion-child-header:hover{background:var(--bg-hover)}.nested-accordion-child-title{color:var(--text-primary);font-size:.9375rem;font-weight:600;text-align:left}.nested-accordion-child.open .nested-accordion-child-header .nested-accordion-icon{color:var(--accent-purple);transform:rotate(180deg)}.nested-accordion-child-content{max-height:0;overflow:hidden;transition:max-height .3s ease}.nested-accordion-child.open .nested-accordion-child-content{max-height:300px}.nested-accordion-text{color:var(--text-secondary);font-size:.875rem;line-height:1.6;margin:0;padding:0 1rem 1rem}.login-form{background:var(--bg-secondary);border-radius:12px;box-shadow:0 4px 12px #0000001a;max-width:400px;padding:2rem}.login-form-title{color:var(--text-primary);font-size:1.5rem;margin:0 0 .5rem}.login-form-subtitle{color:var(--text-secondary);font-size:.875rem;margin:0 0 1.5rem}.login-form-group{margin-bottom:1.25rem}.login-form-group label{color:var(--text-primary);display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem}.login-form-group input{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:8px;color:var(--text-primary);font-size:.875rem;padding:.75rem;transition:all .2s ease;width:100%}.login-form-group input:focus{border-color:var(--accent-purple);box-shadow:0 0 0 3px #8b5cf61a;outline:none}.login-form-password{position:relative}.login-form-toggle{background:none;border:none;cursor:pointer;font-size:1.25rem;opacity:.6;position:absolute;right:.75rem;top:50%;transform:translateY(-50%);transition:opacity .2s ease}.login-form-toggle:hover{opacity:1}.login-form-options{align-items:center;display:flex;justify-content:space-between;margin-bottom:1.5rem}.login-form-checkbox{align-items:center;color:var(--text-secondary);cursor:pointer;display:flex;font-size:.875rem;gap:.5rem}.login-form-checkbox input{cursor:pointer;width:auto}.login-form-link{color:var(--accent-purple);font-size:.875rem;text-decoration:none;transition:opacity .2s ease}.login-form-link:hover{opacity:.8}.login-form-submit{background:linear-gradient(135deg,var(--accent-purple),var(--accent-pink));border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:.875rem;transition:transform .2s ease,box-shadow .2s ease;width:100%}.login-form-submit:hover{box-shadow:0 4px 12px #8b5cf666;transform:translateY(-2px)}.login-form-submit:active{transform:translateY(0)}.login-form-footer{color:var(--text-secondary);font-size:.875rem;margin-top:1.5rem;text-align:center}.signup-form{background:var(--bg-secondary);border-radius:12px;box-shadow:0 4px 12px #0000001a;max-width:500px;padding:2rem}.signup-form-title{color:var(--text-primary);font-size:1.5rem;margin:0 0 1.5rem;text-align:center}.signup-form-group{flex:1 1;margin-bottom:1.25rem}.signup-form-group label{color:var(--text-primary);display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem}.signup-form-group input{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:8px;color:var(--text-primary);font-size:.875rem;padding:.75rem;transition:all .2s ease;width:100%}.signup-form-group input:focus{border-color:var(--accent-purple);box-shadow:0 0 0 3px #8b5cf61a;outline:none}.signup-form-row{display:flex;gap:1rem}.signup-form-checkbox{align-items:center;color:var(--text-secondary);cursor:pointer;display:flex;font-size:.875rem;gap:.5rem;margin-bottom:1.5rem}.signup-form-checkbox input{cursor:pointer;width:auto}.signup-form-submit{background:linear-gradient(135deg,var(--accent-purple),var(--accent-pink));border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:.875rem;transition:transform .2s ease,box-shadow .2s ease;width:100%}.signup-form-submit:hover{box-shadow:0 4px 12px #8b5cf666;transform:translateY(-2px)}.contact-form{background:var(--bg-secondary);border-radius:12px;box-shadow:0 4px 12px #0000001a;max-width:600px;padding:2rem}.contact-form-title{color:var(--text-primary);font-size:1.5rem;margin:0 0 1.5rem}.contact-form-row{display:flex;gap:1rem;margin-bottom:1.25rem}.contact-form-group{flex:1 1;margin-bottom:1.25rem}.contact-form-group label{color:var(--text-primary);display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem}.contact-form-group input,.contact-form-group textarea{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:8px;color:var(--text-primary);font-family:inherit;font-size:.875rem;padding:.75rem;resize:vertical;transition:all .2s ease;width:100%}.contact-form-group input:focus,.contact-form-group textarea:focus{border-color:var(--accent-purple);box-shadow:0 0 0 3px #8b5cf61a;outline:none}.contact-form-submit{background:linear-gradient(135deg,var(--accent-purple),var(--accent-pink));border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:.875rem;transition:transform .2s ease,box-shadow .2s ease;width:100%}.contact-form-submit:hover{box-shadow:0 4px 12px #8b5cf666;transform:translateY(-2px)}.newsletter-form{background:linear-gradient(135deg,#8b5cf61a,#ec48991a);border-radius:12px;max-width:500px;padding:2rem;text-align:center}.newsletter-form-content{margin-bottom:1.5rem}.newsletter-form-icon{font-size:3rem;margin-bottom:1rem}.newsletter-form-title{color:var(--text-primary);font-size:1.5rem;margin:0 0 .5rem}.newsletter-form-subtitle{color:var(--text-secondary);font-size:.875rem;margin:0}.newsletter-form-input-wrapper{display:flex;gap:.5rem;margin-bottom:.75rem}.newsletter-form-input-wrapper input{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:8px;color:var(--text-primary);flex:1 1;font-size:.875rem;padding:.875rem;transition:all .2s ease}.newsletter-form-input-wrapper input:focus{border-color:var(--accent-purple);box-shadow:0 0 0 3px #8b5cf61a;outline:none}.newsletter-form-input-wrapper button{background:linear-gradient(135deg,var(--accent-purple),var(--accent-pink));border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:.875rem;font-weight:600;padding:.875rem 1.5rem;transition:transform .2s ease,box-shadow .2s ease;white-space:nowrap}.newsletter-form-input-wrapper button:hover:not(:disabled){box-shadow:0 4px 12px #8b5cf666;transform:translateY(-2px)}.newsletter-form-input-wrapper button:disabled{cursor:not-allowed;opacity:.7}.newsletter-form-privacy{color:var(--text-secondary);font-size:.75rem;margin:0}.multistep-form{background:var(--bg-secondary);border-radius:12px;box-shadow:0 4px 12px #0000001a;max-width:600px;padding:2rem}.multistep-form-progress{display:flex;justify-content:space-between;margin-bottom:2rem;position:relative}.multistep-form-progress:before{background:var(--border-primary);content:"";height:2px;left:20px;position:absolute;right:20px;top:20px;z-index:0}.multistep-form-step{align-items:center;display:flex;flex-direction:column;gap:.5rem;position:relative;z-index:1}.multistep-form-step-number{align-items:center;background:var(--bg-tertiary);border:2px solid var(--border-primary);border-radius:50%;color:var(--text-secondary);display:flex;font-weight:600;height:40px;justify-content:center;transition:all .3s ease;width:40px}.multistep-form-step.active .multistep-form-step-number{background:linear-gradient(135deg,var(--accent-purple),var(--accent-pink));border-color:var(--accent-purple);color:#fff}.multistep-form-step.completed .multistep-form-step-number{background:var(--accent-purple);border-color:var(--accent-purple);color:#fff}.multistep-form-step-label{color:var(--text-secondary);font-size:.75rem;white-space:nowrap}.multistep-form-content{margin-bottom:2rem}.multistep-form-title{color:var(--text-primary);font-size:1.25rem;margin:0 0 1.5rem}.multistep-form-group{margin-bottom:1.25rem}.multistep-form-group label{color:var(--text-primary);display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem}.multistep-form-group input{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:8px;color:var(--text-primary);font-size:.875rem;padding:.75rem;transition:all .2s ease;width:100%}.multistep-form-group input:focus{border-color:var(--accent-purple);box-shadow:0 0 0 3px #8b5cf61a;outline:none}.multistep-form-actions{display:flex;gap:1rem;justify-content:flex-end}.multistep-form-next,.multistep-form-prev{border:none;border-radius:8px;cursor:pointer;font-size:.875rem;font-weight:600;padding:.75rem 1.5rem;transition:transform .2s ease,box-shadow .2s ease}.multistep-form-prev{background:var(--bg-tertiary);color:var(--text-primary)}.multistep-form-prev:hover{background:var(--border-primary)}.multistep-form-next{background:linear-gradient(135deg,var(--accent-purple),var(--accent-pink));color:#fff}.multistep-form-next:hover{box-shadow:0 4px 12px #8b5cf666;transform:translateY(-2px)}.inline-form{align-items:center;background:var(--bg-secondary);border-radius:8px;display:flex;gap:1rem;max-width:500px;padding:1rem}.inline-form label{font-weight:500;white-space:nowrap}.inline-form input,.inline-form label{color:var(--text-primary);font-size:.875rem}.inline-form input{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:6px;flex:1 1;padding:.625rem .875rem;transition:all .2s ease}.inline-form input:focus{border-color:var(--accent-purple);box-shadow:0 0 0 3px #8b5cf61a;outline:none}.inline-form button{background:linear-gradient(135deg,var(--accent-purple),var(--accent-pink));border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.875rem;font-weight:600;padding:.625rem 1.25rem;transition:transform .2s ease,box-shadow .2s ease;white-space:nowrap}.inline-form button:hover:not(:disabled){box-shadow:0 4px 12px #8b5cf666;transform:translateY(-2px)}.inline-form button:disabled{cursor:not-allowed;opacity:.7}.action-table-container,.basic-table-container,.hover-table-container,.sortable-table-container,.striped-table-container{background:var(--bg-secondary);border-radius:12px;overflow-x:auto;padding:1rem;width:100%}.basic-table{border-collapse:collapse;width:100%}.basic-table thead tr{background:var(--bg-tertiary)}.basic-table th{border-bottom:2px solid var(--border-primary);color:var(--text-primary);font-weight:600;text-align:left}.basic-table td,.basic-table th{font-size:.875rem;padding:.875rem 1rem}.basic-table td{border-bottom:1px solid var(--border-primary);color:var(--text-secondary)}.basic-table tbody tr:last-child td{border-bottom:none}.basic-table-badge{background:#8b5cf61a;border-radius:12px;color:var(--accent-purple);font-size:.75rem;font-weight:500;padding:.25rem .75rem}.striped-table{border-collapse:collapse;width:100%}.striped-table thead tr{background:var(--bg-tertiary)}.striped-table th{color:var(--text-primary);font-size:.875rem;font-weight:600;padding:.875rem 1rem;text-align:left}.striped-table tbody tr{transition:background .2s ease}.striped-table tbody tr:nth-child(2n){background:var(--bg-tertiary)}.striped-table tbody tr:hover{background:#8b5cf60d}.striped-table td{color:var(--text-secondary);font-size:.875rem;padding:.875rem 1rem}.striped-table-status{border-radius:12px;font-size:.75rem;font-weight:500;padding:.25rem .75rem}.striped-table-status.in{background:#10b9811a;color:#10b981}.striped-table-status.low{background:#f59e0b1a;color:#f59e0b}.striped-table-status.out{background:#ef44441a;color:#ef4444}.sortable-table{border-collapse:collapse;width:100%}.sortable-table th{background:var(--bg-tertiary);color:var(--text-primary);cursor:pointer;font-size:.875rem;font-weight:600;padding:.875rem 1rem;text-align:left;transition:background .2s ease;-webkit-user-select:none;user-select:none}.sortable-table th:hover{background:var(--border-primary)}.sortable-table td{border-bottom:1px solid var(--border-primary);color:var(--text-secondary);font-size:.875rem;padding:.875rem 1rem}.sortable-table tbody tr:last-child td{border-bottom:none}.hover-table{border-collapse:collapse;width:100%}.hover-table th{background:var(--bg-tertiary);border-bottom:2px solid var(--border-primary);color:var(--text-primary);font-size:.875rem;font-weight:600;padding:.875rem 1rem;text-align:left}.hover-table tbody tr{transition:all .2s ease}.hover-table tbody tr:hover{background:#8b5cf60d;transform:translateX(4px)}.hover-table td{border-bottom:1px solid var(--border-primary);color:var(--text-secondary);font-size:.875rem;padding:.875rem 1rem}.hover-table-priority{border-radius:12px;font-size:.75rem;font-weight:500;padding:.25rem .75rem}.hover-table-priority.high{background:#ef44441a;color:#ef4444}.hover-table-priority.medium{background:#f59e0b1a;color:#f59e0b}.hover-table-priority.low{background:#3b82f61a;color:#3b82f6}.action-table{border-collapse:collapse;width:100%}.action-table th{background:var(--bg-tertiary);border-bottom:2px solid var(--border-primary);color:var(--text-primary);font-weight:600;text-align:left}.action-table td,.action-table th{font-size:.875rem;padding:.875rem 1rem}.action-table td{border-bottom:1px solid var(--border-primary);color:var(--text-secondary)}.action-table-status{border-radius:12px;font-size:.75rem;font-weight:500;padding:.25rem .75rem}.action-table-status.active{background:#10b9811a;color:#10b981}.action-table-status.pending{background:#f59e0b1a;color:#f59e0b}.action-table-status.completed{background:#8b5cf61a;color:var(--accent-purple)}.action-table-actions{display:flex;gap:.5rem}.action-table-btn{border:none;border-radius:6px;cursor:pointer;font-size:.75rem;font-weight:500;padding:.375rem .75rem;transition:transform .2s ease,box-shadow .2s ease}.action-table-btn.edit{background:#3b82f61a;color:#3b82f6}.action-table-btn.edit:hover{background:#3b82f633;transform:translateY(-2px)}.action-table-btn.delete{background:#ef44441a;color:#ef4444}.action-table-btn.delete:hover{background:#ef444433;transform:translateY(-2px)}.circle-avatar-showcase{align-items:center;display:flex;gap:1.5rem}.circle-avatar{align-items:center;background:var(--bg-tertiary);border-radius:50%;display:flex;justify-content:center;overflow:hidden}.circle-avatar img{height:100%;object-fit:cover;width:100%}.circle-avatar-sm{height:32px;width:32px}.circle-avatar-md{height:48px;width:48px}.circle-avatar-lg{height:64px;width:64px}.status-avatar-showcase{align-items:center;display:flex;gap:1.5rem}.status-avatar{border-radius:50%;height:48px;overflow:hidden;position:relative;width:48px}.status-avatar img{height:100%;object-fit:cover;width:100%}.status-avatar-badge{border:2px solid var(--bg-secondary);border-radius:50%;bottom:2px;height:12px;position:absolute;right:2px;width:12px}.status-avatar-badge.online{background:#10b981;box-shadow:0 0 0 2px #10b98133}.status-avatar-badge.away{background:#f59e0b;box-shadow:0 0 0 2px #f59e0b33}.status-avatar-badge.offline{background:#6b7280;box-shadow:0 0 0 2px #6b728033}.group-avatar-showcase{display:flex;flex-direction:column;gap:1rem}.group-avatar{align-items:center;display:flex}.group-avatar-item{background:var(--bg-tertiary);border:2px solid var(--bg-secondary);border-radius:50%;height:40px;margin-left:-12px;overflow:hidden;position:relative;transition:transform .2s ease,z-index 0s ease 0s;width:40px}.group-avatar-item:first-child{margin-left:0}.group-avatar-item:hover{transform:translateY(-4px);z-index:10}.group-avatar-item img{height:100%;object-fit:cover;width:100%}.group-avatar-more{align-items:center;background:var(--accent-purple);color:#fff;display:flex;font-size:.75rem;font-weight:600;justify-content:center}.initial-avatar-showcase{align-items:center;display:flex;gap:1rem}.initial-avatar{align-items:center;border-radius:50%;color:#fff;cursor:default;display:flex;font-size:1rem;font-weight:600;height:48px;justify-content:center;transition:transform .2s ease;width:48px}.initial-avatar:hover{transform:scale(1.1)}.border-avatar-showcase{align-items:center;display:flex;gap:1.5rem}.border-avatar{align-items:center;border-radius:50%;display:flex;height:64px;justify-content:center;overflow:hidden;padding:3px;transition:transform .2s ease;width:64px}.border-avatar:hover{transform:scale(1.05)}.border-avatar img{border-radius:50%;height:100%;object-fit:cover;width:100%}.border-avatar-solid{border:3px solid var(--accent-purple)}.border-avatar-gradient{background:linear-gradient(135deg,var(--accent-purple),var(--accent-pink))}.border-avatar-glow{border:3px solid var(--accent-purple);box-shadow:0 0 20px #8b5cf699}.color-badge-showcase{display:flex;flex-wrap:wrap;gap:.75rem}.color-badge{border-radius:16px;font-size:.75rem;font-weight:600;padding:.375rem .875rem;transition:transform .2s ease}.color-badge:hover{transform:translateY(-2px)}.color-badge-primary{background:#8b5cf61a;color:#8b5cf6}.color-badge-success{background:#10b9811a;color:#10b981}.color-badge-warning{background:#f59e0b1a;color:#f59e0b}.color-badge-error{background:#ef44441a;color:#ef4444}.color-badge-info{background:#3b82f61a;color:#3b82f6}.icon-badge-showcase{display:flex;flex-wrap:wrap;gap:.75rem}.icon-badge{align-items:center;border-radius:16px;display:inline-flex;font-size:.75rem;font-weight:600;gap:.375rem;padding:.375rem .875rem;transition:transform .2s ease}.icon-badge:hover{transform:translateY(-2px)}.icon-badge-success{background:#10b9811a;color:#10b981}.icon-badge-warning{background:#f59e0b1a;color:#f59e0b}.icon-badge-error{background:#ef44441a;color:#ef4444}.icon-badge-info{background:#3b82f61a;color:#3b82f6}.dot-badge-showcase{display:flex;flex-wrap:wrap;gap:1rem}.dot-badge{align-items:center;background:var(--bg-tertiary);border-radius:16px;color:var(--text-primary);display:inline-flex;font-size:.75rem;font-weight:500;gap:.5rem;padding:.375rem .875rem;transition:transform .2s ease}.dot-badge:hover{transform:translateY(-2px)}.dot-badge-dot{animation:pulse-dot 2s ease-in-out infinite;border-radius:50%;height:8px;width:8px}.dot-badge-online .dot-badge-dot{background:#10b981;box-shadow:0 0 0 2px #10b98133}.dot-badge-away .dot-badge-dot{background:#f59e0b;box-shadow:0 0 0 2px #f59e0b33}.dot-badge-busy .dot-badge-dot{background:#ef4444;box-shadow:0 0 0 2px #ef444433}.dot-badge-offline .dot-badge-dot{background:#6b7280;box-shadow:0 0 0 2px #6b728033}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.5}}.count-badge-showcase{display:flex;flex-wrap:wrap;gap:1.5rem}.count-badge-container{align-items:center;display:flex;gap:.75rem}.count-badge-text{color:var(--text-primary);font-size:.875rem;font-weight:500}.count-badge{align-items:center;background:var(--accent-purple);border-radius:10px;color:#fff;display:inline-flex;font-size:.625rem;font-weight:700;height:20px;justify-content:center;min-width:20px;padding:0 6px;transition:transform .2s ease}.count-badge:hover{transform:scale(1.1)}.count-badge-large{border-radius:12px;font-size:.75rem;height:24px;min-width:24px}.count-badge-max{animation:badge-pulse 2s ease-in-out infinite;background:#ef4444}@keyframes badge-pulse{0%,to{box-shadow:0 0 0 0 #ef4444b3}50%{box-shadow:0 0 0 4px #ef444400}}.outline-badge-showcase{display:flex;flex-wrap:wrap;gap:.75rem}.outline-badge{background:#0000;border:1.5px solid;border-radius:16px;font-size:.75rem;font-weight:600;padding:.375rem .875rem;transition:all .2s ease}.outline-badge:hover{transform:translateY(-2px)}.outline-badge-purple{border-color:#8b5cf6;color:#8b5cf6}.outline-badge-purple:hover{background:#8b5cf61a}.outline-badge-pink{border-color:#ec4899;color:#ec4899}.outline-badge-pink:hover{background:#ec48991a}.outline-badge-blue{border-color:#3b82f6;color:#3b82f6}.outline-badge-blue:hover{background:#3b82f61a}.outline-badge-red{border-color:#ef4444;color:#ef4444}.outline-badge-red:hover{background:#ef44441a}.vertical-timeline{padding-left:2rem;position:relative}.vertical-timeline:before{background:var(--border-primary);bottom:0;content:"";left:4px;position:absolute;top:0;width:2px}.vertical-timeline-item{margin-bottom:2rem;position:relative}.vertical-timeline-marker{background:var(--accent-purple);border:2px solid var(--bg-secondary);border-radius:50%;height:12px;left:-2rem;position:absolute;top:0;width:12px}.vertical-timeline-content{padding-left:1rem}.vertical-timeline-date{color:var(--text-secondary);font-size:.75rem;margin-bottom:.25rem}.vertical-timeline-title{color:var(--text-primary);font-size:1rem;margin:0 0 .25rem}.vertical-timeline-description{color:var(--text-secondary);font-size:.875rem;margin:0}.horizontal-timeline{padding:2rem 1rem;position:relative}.horizontal-timeline-line{background:var(--border-primary);height:2px;left:5%;position:absolute;right:5%;top:2.5rem}.horizontal-timeline-steps{display:flex;justify-content:space-between;position:relative}.horizontal-timeline-step{align-items:center;cursor:pointer;display:flex;flex:1 1;flex-direction:column;max-width:150px}.horizontal-timeline-marker{align-items:center;background:var(--bg-tertiary);border:2px solid var(--border-primary);border-radius:50%;color:var(--text-secondary);display:flex;font-weight:600;height:40px;justify-content:center;position:relative;transition:all .3s ease;width:40px;z-index:1}.horizontal-timeline-step.active .horizontal-timeline-marker{background:var(--accent-purple);border-color:var(--accent-purple);box-shadow:0 0 0 4px #8b5cf633;color:#fff}.horizontal-timeline-label{color:var(--text-secondary);font-size:.875rem;margin-top:.75rem;text-align:center}.horizontal-timeline-step.active .horizontal-timeline-label{color:var(--text-primary);font-weight:600}.activity-timeline{display:flex;flex-direction:column;gap:1rem}.activity-timeline-item{background:var(--bg-secondary);border-radius:8px;display:flex;gap:1rem;padding:1rem;transition:transform .2s ease,box-shadow .2s ease}.activity-timeline-item:hover{box-shadow:0 2px 8px #0000001a;transform:translateX(4px)}.activity-timeline-icon{align-items:center;background:var(--bg-tertiary);border-radius:50%;display:flex;flex-shrink:0;font-size:1.5rem;height:40px;justify-content:center;width:40px}.activity-timeline-content{flex:1 1}.activity-timeline-text{color:var(--text-primary);font-size:.875rem;margin-bottom:.25rem}.activity-timeline-time{color:var(--text-secondary);font-size:.75rem}.progress-timeline{align-items:center;display:flex;gap:.5rem;padding:1rem}.progress-timeline-item{align-items:center;display:flex;flex:1 1;flex-direction:column;position:relative}.progress-timeline-marker{align-items:center;background:var(--bg-tertiary);border:2px solid var(--border-primary);border-radius:50%;color:var(--text-secondary);display:flex;font-size:.875rem;font-weight:600;height:36px;justify-content:center;margin-bottom:.5rem;transition:all .3s ease;width:36px}.progress-timeline-item.completed .progress-timeline-marker{background:var(--accent-purple);border-color:var(--accent-purple);color:#fff}.progress-timeline-label{color:var(--text-secondary);font-size:.75rem;text-align:center}.progress-timeline-item.completed .progress-timeline-label{color:var(--text-primary);font-weight:600}.progress-timeline-connector{background:var(--border-primary);height:2px;left:50%;position:absolute;right:-50%;top:18px}.progress-timeline-progress{background:var(--accent-purple);height:100%;transition:width .5s ease}@keyframes skeleton-loading{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}.card-skeleton-image,.card-skeleton-text,.card-skeleton-title,.list-skeleton-avatar,.list-skeleton-subtitle,.list-skeleton-title,.table-skeleton-cell,.text-skeleton{animation:skeleton-loading 1.5s ease-in-out infinite;background:linear-gradient(90deg,var(--bg-tertiary) 0,#8b5cf61a 40px,var(--bg-tertiary) 80px);background-size:200px 100%;border-radius:4px}.text-skeleton-container{padding:1rem}.text-skeleton{height:16px;margin-bottom:.75rem}.text-skeleton-heading{height:24px;margin-bottom:1rem;width:60%}.text-skeleton-line{width:100%}.text-skeleton-short{width:70%}.card-skeleton{background:var(--bg-secondary);border-radius:12px;overflow:hidden;width:300px}.card-skeleton-image{height:180px;width:100%}.card-skeleton-content{padding:1rem}.card-skeleton-title{height:20px;margin-bottom:.75rem;width:70%}.card-skeleton-text{height:14px;margin-bottom:.5rem;width:100%}.card-skeleton-text-short{width:60%}.list-skeleton{background:var(--bg-secondary);border-radius:12px;padding:1rem}.list-skeleton-item{border-bottom:1px solid var(--border-primary);display:flex;gap:1rem;padding:.75rem 0}.list-skeleton-item:last-child{border-bottom:none}.list-skeleton-avatar{border-radius:50%;flex-shrink:0;height:48px;width:48px}.list-skeleton-content{display:flex;flex:1 1;flex-direction:column;gap:.5rem}.list-skeleton-title{height:16px;width:60%}.list-skeleton-subtitle{height:12px;width:40%}.table-skeleton{background:var(--bg-secondary);border-radius:12px;padding:1rem}.table-skeleton-header{border-bottom:2px solid var(--border-primary);margin-bottom:1rem;padding-bottom:1rem}.table-skeleton-header,.table-skeleton-row{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)}.table-skeleton-row{margin-bottom:.75rem}.table-skeleton-cell{height:20px}.bullet-list{list-style:none;margin:0;padding:0}.bullet-list-item{color:var(--text-primary);font-size:.875rem;padding:.75rem 0 .75rem 1.5rem;position:relative;transition:transform .2s ease}.bullet-list-item:before{color:var(--accent-purple);content:"•";font-size:1.25rem;left:.5rem;position:absolute}.bullet-list-item:hover{transform:translateX(4px)}.numbered-list{counter-reset:item;list-style:none;margin:0;padding:0}.numbered-list-item{color:var(--text-primary);counter-increment:item;font-size:.875rem;padding:.75rem 0 .75rem 2.5rem;position:relative;transition:transform .2s ease}.numbered-list-item:before{align-items:center;background:var(--accent-purple);border-radius:50%;color:#fff;content:counter(item);display:flex;font-size:.75rem;font-weight:600;height:28px;justify-content:center;left:0;position:absolute;width:28px}.numbered-list-item:hover{transform:translateX(4px)}.icon-list{list-style:none;margin:0;padding:0}.icon-list-item{align-items:center;border-radius:8px;display:flex;gap:.75rem;margin-bottom:.5rem;padding:.75rem;transition:all .2s ease}.icon-list-item:hover{transform:translateX(4px)}.icon-list-icon{align-items:center;border-radius:6px;display:flex;font-size:1rem;height:32px;justify-content:center;width:32px}.icon-list-text{flex:1 1;font-size:.875rem}.icon-list-success{background:#10b9810d}.icon-list-success .icon-list-icon{background:#10b9811a}.icon-list-success .icon-list-text{color:#10b981}.icon-list-warning{background:#f59e0b0d}.icon-list-warning .icon-list-icon{background:#f59e0b1a}.icon-list-warning .icon-list-text{color:#f59e0b}.icon-list-error{background:#ef44440d}.icon-list-error .icon-list-icon{background:#ef44441a}.icon-list-error .icon-list-text{color:#ef4444}.icon-list-info{background:#3b82f60d}.icon-list-info .icon-list-icon{background:#3b82f61a}.icon-list-info .icon-list-text{color:#3b82f6}.check-list{list-style:none;margin:0;padding:0}.check-list-item{padding:.5rem 0}.check-list-label{align-items:center;cursor:pointer;display:flex;gap:.75rem;transition:transform .2s ease}.check-list-label:hover{transform:translateX(4px)}.check-list-checkbox{accent-color:var(--accent-purple);cursor:pointer;height:20px;width:20px}.check-list-text{color:var(--text-primary);flex:1 1;font-size:.875rem;transition:all .2s ease}.check-list-text.checked{color:var(--text-secondary);text-decoration:line-through}.detail-list{background:var(--bg-secondary);border-radius:12px;list-style:none;margin:0;overflow:hidden;padding:0}.detail-list-item{align-items:center;border-bottom:1px solid var(--border-primary);display:flex;gap:1rem;padding:1rem;transition:all .2s ease}.detail-list-item:last-child{border-bottom:none}.detail-list-item:hover{background:var(--bg-tertiary);transform:translateX(4px)}.detail-list-avatar{border-radius:50%;flex-shrink:0;height:48px;overflow:hidden;width:48px}.detail-list-avatar img{height:100%;object-fit:cover;width:100%}.detail-list-content{flex:1 1}.detail-list-title{color:var(--text-primary);font-size:.875rem;font-weight:600;margin-bottom:.25rem}.detail-list-meta,.detail-list-subtitle{color:var(--text-secondary);font-size:.75rem}.detail-list-meta{flex-shrink:0}.basic-popover-container,.form-popover-container,.hover-popover-container,.menu-popover-container{display:inline-block;position:relative}.basic-popover-trigger{background:var(--accent-purple);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.875rem;font-weight:600;padding:.625rem 1.25rem;transition:transform .2s ease}.basic-popover-trigger:hover{transform:translateY(-2px)}.basic-popover{animation:popover-fade-in .2s ease;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:8px;box-shadow:0 4px 12px #00000026;left:0;min-width:250px;position:absolute;top:calc(100% + 8px);z-index:1000}.basic-popover-content{padding:1rem}.basic-popover-title{color:var(--text-primary);font-size:1rem;margin:0 0 .5rem}.basic-popover-text{color:var(--text-secondary);font-size:.875rem;line-height:1.5;margin:0}.hover-popover-trigger{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:6px;color:var(--text-primary);cursor:pointer;font-size:.875rem;padding:.625rem 1.25rem;transition:all .2s ease}.hover-popover-trigger:hover{border-color:var(--accent-purple)}.hover-popover{animation:popover-fade-in .2s ease;border:1px solid var(--border-primary);border-radius:6px;box-shadow:0 4px 12px #00000026;padding:.75rem 1rem;top:calc(100% + 12px);transform:translateX(-50%);white-space:nowrap;z-index:1000}.hover-popover,.hover-popover-arrow{background:var(--bg-secondary);left:50%;position:absolute}.hover-popover-arrow{border-left:1px solid var(--border-primary);border-top:1px solid var(--border-primary);height:12px;top:-6px;transform:translateX(-50%) rotate(45deg);width:12px}.hover-popover-content{color:var(--text-primary);font-size:.875rem}.menu-popover-trigger{align-items:center;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:6px;cursor:pointer;display:flex;font-size:1.25rem;height:36px;justify-content:center;transition:all .2s ease;width:36px}.menu-popover-trigger:hover{background:var(--border-primary)}.menu-popover{animation:popover-fade-in .2s ease;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:8px;box-shadow:0 4px 12px #00000026;min-width:160px;padding:.5rem 0;position:absolute;right:0;top:calc(100% + 8px);z-index:1000}.menu-popover-item{align-items:center;background:none;border:none;color:var(--text-primary);cursor:pointer;display:flex;font-size:.875rem;gap:.75rem;padding:.625rem 1rem;text-align:left;transition:background .2s ease;width:100%}.menu-popover-item:hover{background:var(--bg-tertiary)}.menu-popover-icon{font-size:1rem}.menu-popover-label{flex:1 1}.form-popover-trigger{background:linear-gradient(135deg,var(--accent-purple),var(--accent-pink));border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.875rem;font-weight:600;padding:.625rem 1.25rem;transition:transform .2s ease}.form-popover-trigger:hover{transform:translateY(-2px)}.form-popover{animation:popover-fade-in .2s ease;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:8px;box-shadow:0 4px 12px #00000026;left:0;min-width:280px;padding:1rem;position:absolute;top:calc(100% + 8px);z-index:1000}.form-popover-title{color:var(--text-primary);font-size:1rem;margin:0 0 1rem}.form-popover-input{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:6px;color:var(--text-primary);font-size:.875rem;margin-bottom:.75rem;padding:.625rem;transition:border-color .2s ease;width:100%}.form-popover-input:focus{border-color:var(--accent-purple);outline:none}.form-popover-submit{background:var(--accent-purple);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.875rem;font-weight:600;padding:.625rem;transition:opacity .2s ease;width:100%}.form-popover-submit:hover{opacity:.9}@keyframes popover-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.dialog-trigger{background:var(--accent-purple);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.875rem;font-weight:600;padding:.625rem 1.25rem;transition:transform .2s ease}.dialog-trigger:hover{transform:translateY(-2px)}.dialog-overlay{align-items:center;animation:overlay-fade-in .2s ease;background:#0009;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.confirm-dialog{animation:dialog-slide-up .3s ease;background:var(--bg-secondary);border-radius:12px;max-width:400px;padding:1.5rem;width:90%}.dialog-title{color:var(--text-primary);font-size:1.25rem;margin:0 0 1rem}.dialog-message{color:var(--text-secondary);font-size:.875rem;line-height:1.6;margin:0 0 1.5rem}.dialog-actions{display:flex;gap:.75rem;justify-content:flex-end}.dialog-btn{border:none;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:600;padding:.625rem 1.25rem;transition:opacity .2s ease}.dialog-btn:hover{opacity:.9}.dialog-btn-cancel{background:var(--bg-tertiary);color:var(--text-primary)}.dialog-btn-confirm,.dialog-btn-primary{background:var(--accent-purple);color:#fff}.dialog-btn-primary{width:100%}.alert-dialog{animation:dialog-slide-up .3s ease;background:var(--bg-secondary);border-radius:12px;max-width:400px;padding:2rem;text-align:center;width:90%}.alert-dialog-icon{font-size:3rem;margin-bottom:1rem}.form-dialog{animation:dialog-slide-up .3s ease;background:var(--bg-secondary);border-radius:12px;max-width:500px;padding:1.5rem;width:90%}.form-dialog-group{margin-bottom:1.25rem}.form-dialog-group label{color:var(--text-primary);display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem}.form-dialog-group input{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:6px;color:var(--text-primary);font-size:.875rem;padding:.625rem;transition:border-color .2s ease;width:100%}.form-dialog-group input:focus{border-color:var(--accent-purple);outline:none}.image-dialog{animation:dialog-slide-up .3s ease;background:var(--bg-secondary);border-radius:12px;max-width:800px;padding:1rem;position:relative;width:90%}.image-dialog-close{align-items:center;background:#00000080;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:1.5rem;height:36px;justify-content:center;position:absolute;right:1rem;top:1rem;transition:background .2s ease;width:36px}.image-dialog-close:hover{background:#000000b3}.image-dialog-img{border-radius:8px;display:block;margin-bottom:1rem;width:100%}.image-dialog-caption{color:var(--text-secondary);font-size:.875rem;margin:0;text-align:center}.fullscreen-dialog{animation:dialog-slide-up .3s ease;background:var(--bg-secondary);bottom:0;left:0;overflow-y:auto;position:fixed;right:0;top:0;z-index:1000}.fullscreen-dialog-header{align-items:center;background:var(--bg-secondary);border-bottom:1px solid var(--border-primary);display:flex;justify-content:space-between;padding:1.5rem;position:-webkit-sticky;position:sticky;top:0;z-index:10}.fullscreen-dialog-title{color:var(--text-primary);font-size:1.5rem;margin:0}.fullscreen-dialog-close{align-items:center;background:var(--bg-tertiary);border:none;border-radius:50%;color:var(--text-primary);cursor:pointer;display:flex;font-size:1.5rem;height:40px;justify-content:center;transition:background .2s ease;width:40px}.fullscreen-dialog-close:hover{background:var(--border-primary)}.fullscreen-dialog-content{margin:0 auto;max-width:800px;padding:2rem}.fullscreen-dialog-content p{color:var(--text-secondary);line-height:1.6;margin-bottom:1rem}@keyframes overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes dialog-slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.info-banner,.promo-banner,.success-banner,.warning-banner{align-items:center;animation:banner-slide-down .3s ease;border-radius:8px;display:flex;font-size:.875rem;gap:1rem;padding:1rem 1.5rem}.info-banner{background:#3b82f61a;border:1px solid #3b82f64d}.info-banner-icon{flex-shrink:0;font-size:1.25rem}.info-banner-content{color:#3b82f6;flex:1 1}.info-banner-close{align-items:center;background:none;border:none;border-radius:4px;color:#3b82f6;cursor:pointer;display:flex;font-size:1.25rem;height:28px;justify-content:center;transition:background .2s ease;width:28px}.info-banner-close:hover{background:#3b82f633}.success-banner{background:#10b9811a;border:1px solid #10b9814d}.success-banner-icon{align-items:center;background:#10b981;border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:.875rem;font-weight:700;height:24px;justify-content:center;width:24px}.success-banner-content{color:#10b981;flex:1 1}.success-banner-close{align-items:center;background:none;border:none;border-radius:4px;color:#10b981;cursor:pointer;display:flex;font-size:1.25rem;height:28px;justify-content:center;transition:background .2s ease;width:28px}.success-banner-close:hover{background:#10b98133}.warning-banner{background:#f59e0b1a;border:1px solid #f59e0b4d}.warning-banner-icon{flex-shrink:0;font-size:1.25rem}.warning-banner-content{color:#f59e0b;flex:1 1}.warning-banner-action{background:#f59e0b;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.75rem;font-weight:600;padding:.375rem .875rem;transition:opacity .2s ease}.warning-banner-action:hover{opacity:.9}.warning-banner-close{align-items:center;background:none;border:none;border-radius:4px;color:#f59e0b;cursor:pointer;display:flex;font-size:1.25rem;height:28px;justify-content:center;transition:background .2s ease;width:28px}.warning-banner-close:hover{background:#f59e0b33}.promo-banner{background:linear-gradient(135deg,#8b5cf626,#ec489926);border:1px solid #8b5cf64d}.promo-banner-content{color:var(--accent-purple);flex:1 1}.promo-banner-cta{background:linear-gradient(135deg,var(--accent-purple),var(--accent-pink));border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.875rem;font-weight:600;padding:.5rem 1rem;transition:transform .2s ease}.promo-banner-cta:hover{transform:translateY(-2px)}.promo-banner-close{align-items:center;background:none;border:none;border-radius:4px;color:var(--accent-purple);cursor:pointer;display:flex;font-size:1.25rem;height:28px;justify-content:center;transition:background .2s ease;width:28px}.promo-banner-close:hover{background:#8b5cf633}@keyframes banner-slide-down{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.empty-state,.error-state,.loading-state,.maintenance-state,.no-results-state,.success-state{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:300px;padding:3rem 2rem;text-align:center}.empty-state-icon,.error-state-icon,.maintenance-state-icon,.no-results-state-icon,.success-state-icon{font-size:4rem;margin-bottom:1rem}.empty-state-title,.error-state-title,.loading-state-title,.maintenance-state-title,.no-results-state-title,.success-state-title{color:var(--text-primary);font-size:1.5rem;margin:0 0 .75rem}.empty-state-description,.error-state-description,.loading-state-description,.maintenance-state-description,.no-results-state-description,.success-state-description{color:var(--text-secondary);font-size:.875rem;line-height:1.6;margin:0 0 1.5rem;max-width:400px}.empty-state-action,.error-state-action,.no-results-state-action,.success-state-action{background:var(--accent-purple);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:.875rem;font-weight:600;padding:.75rem 1.5rem;transition:transform .2s ease,box-shadow .2s ease}.empty-state-action:hover,.error-state-action:hover,.no-results-state-action:hover,.success-state-action:hover{box-shadow:0 4px 12px #8b5cf666;transform:translateY(-2px)}.empty-state{background:var(--bg-secondary);border:2px dashed var(--border-primary);border-radius:12px}.error-state{background:#ef44440d;border-radius:12px}.error-state-icon{color:#ef4444}.error-state-action{background:#ef4444}.error-state-action:hover{box-shadow:0 4px 12px #ef444466}.success-state{background:#10b9810d;border-radius:12px}.success-state-icon{align-items:center;background:#10b981;border-radius:50%;color:#fff;display:flex;font-size:2rem;font-weight:700;height:64px;justify-content:center;margin-bottom:1rem;width:64px}.success-state-action{background:#10b981}.success-state-action:hover{box-shadow:0 4px 12px #10b98166}.loading-state{background:var(--bg-secondary);border-radius:12px}.loading-state-spinner{animation:spinner-rotate .8s linear infinite;border:4px solid var(--border-primary);border-radius:50%;border-top-color:var(--accent-purple);height:48px;margin-bottom:1.5rem;width:48px}@keyframes spinner-rotate{to{transform:rotate(1turn)}}.no-results-state{background:var(--bg-secondary);border-radius:12px}.no-results-state-icon{color:var(--text-secondary)}.maintenance-state{background:#f59e0b0d;border-radius:12px}.maintenance-state-icon{color:#f59e0b}.maintenance-state-timer{background:#f59e0b1a;border:1px solid #f59e0b4d;border-radius:6px;color:#f59e0b;font-size:.875rem;font-weight:600;margin-top:1rem;padding:.625rem 1.25rem}.chip-demo-container{align-items:center;display:flex;flex-wrap:wrap;gap:12px}.chip-label{font-size:14px;font-weight:500}.chip-remove-btn{align-items:center;background:none;border:none;border-radius:50%;color:inherit;cursor:pointer;display:flex;font-size:20px;height:20px;justify-content:center;padding:0;transition:all .2s ease;width:20px}.chip-remove-btn:hover{background-color:#0000001a}.removable-chip{align-items:center;background:var(--accent-purple);border-radius:16px;color:#fff;display:inline-flex;font-size:14px;font-weight:500;gap:8px;padding:8px 12px;transition:all .2s ease}.removable-chip:hover{background:#7c3aed;transform:translateY(-2px)}.choice-chip{background:#0000;border:2px solid var(--border-color);border-radius:20px;color:var(--text-primary);cursor:pointer;font-size:14px;font-weight:500;padding:10px 20px;transition:all .2s ease}.choice-chip:hover{background:#8b5cf61a;border-color:var(--accent-purple)}.choice-chip-selected{background:var(--accent-purple);border-color:var(--accent-purple);color:#fff}.choice-chip-selected:hover{background:#7c3aed;border-color:#7c3aed}.filter-chip{align-items:center;background:#0000;border:2px solid var(--border-color);border-radius:16px;color:var(--text-primary);cursor:pointer;display:inline-flex;font-size:14px;font-weight:500;gap:6px;padding:8px 16px;transition:all .2s ease}.filter-chip:hover{background:#8b5cf60d;border-color:var(--accent-purple)}.filter-chip-active{background:var(--accent-purple);border-color:var(--accent-purple);color:#fff}.filter-chip-active:hover{background:#7c3aed;border-color:#7c3aed}.chip-checkmark{font-size:12px;font-weight:700}.input-chip-container{max-width:500px;width:100%}.input-chip-wrapper{background:var(--bg-primary);border:2px solid var(--border-color);border-radius:8px;display:flex;flex-wrap:wrap;gap:8px;padding:12px;transition:border-color .2s ease}.input-chip-wrapper:focus-within{border-color:var(--accent-purple);box-shadow:0 0 0 3px #8b5cf61a}.input-chip{align-items:center;background:var(--bg-secondary);border-radius:14px;color:var(--text-primary);display:inline-flex;font-size:14px;gap:6px;padding:6px 10px;transition:all .2s ease}.input-chip:hover{background:#8b5cf61a}.chip-input{background:#0000;border:none;color:var(--text-primary);flex:1 1;font-size:14px;min-width:120px;outline:none;padding:6px}.chip-input::placeholder{color:var(--text-secondary)}.avatar-chip{align-items:center;background:var(--bg-secondary);border:2px solid #0000;border-radius:24px;color:var(--text-primary);display:inline-flex;font-size:14px;font-weight:500;gap:8px;padding:6px 12px 6px 6px;transition:all .2s ease}.avatar-chip:hover{background:#8b5cf60d;border-color:var(--accent-purple)}.avatar-chip-avatar{align-items:center;border-radius:50%;color:#fff;display:flex;font-size:12px;font-weight:600;height:32px;justify-content:center;width:32px}@media (prefers-color-scheme:dark){.chip-remove-btn:hover{background-color:#ffffff1a}.avatar-chip,.input-chip{background:#ffffff0d}}@media (max-width:768px){.chip-demo-container{gap:8px}.chip-label{font-size:13px}.input-chip-container{max-width:100%}}.masonry-grid{grid-gap:12px;display:grid;gap:12px;grid-auto-rows:10px;grid-template-columns:repeat(3,1fr);max-width:400px;width:100%}.masonry-item{align-items:center;border-radius:8px;color:#fff;display:flex;font-size:18px;font-weight:600;justify-content:center;transition:transform .2s}.masonry-item:first-child{grid-row-end:span 20}.masonry-item:nth-child(2){grid-row-end:span 15}.masonry-item:nth-child(3){grid-row-end:span 25}.masonry-item:nth-child(4){grid-row-end:span 18}.masonry-item:nth-child(5){grid-row-end:span 22}.masonry-item:nth-child(6){grid-row-end:span 16}.masonry-item:hover{box-shadow:0 8px 16px #0003;transform:scale(1.05);z-index:1}.masonry-item-number{text-shadow:0 2px 4px #0000004d}.infinite-scroll-container{background:#f9f9f9;border:2px solid #e0e0e0;border-radius:8px;height:300px;max-width:300px;overflow-y:auto;padding:12px;width:100%}.infinite-scroll-item{background:#fff;border-radius:6px;box-shadow:0 2px 4px #0000001a;color:#333;font-weight:500;margin-bottom:8px;padding:16px}.infinite-scroll-loader{color:#666;font-style:italic;padding:16px;text-align:center}.virtual-scroll-container{background:#f9f9f9;border:2px solid #e0e0e0;border-radius:8px;max-width:300px;overflow-y:auto}.virtual-scroll-container,.virtual-scroll-spacer{position:relative;width:100%}.virtual-scroll-content{left:0;position:absolute;top:0;width:100%}.virtual-scroll-item{align-items:center;background:#fff;border-bottom:1px solid #e0e0e0;color:#333;display:flex;font-weight:500;padding:12px 16px}.virtual-scroll-item:hover{background:#f0f0f0}.parallax-scroll-container{background:#1a1a1a;border-radius:8px;height:250px;max-width:300px;overflow-y:auto;position:relative;width:100%}.parallax-layer{align-items:center;display:flex;height:100%;justify-content:center;position:absolute;width:100%}.parallax-bg{background:linear-gradient(135deg,#667eea,#764ba2);opacity:.6}.parallax-mid{background:linear-gradient(135deg,#f093fb,#f5576c);opacity:.5;top:50px}.parallax-fg{background:#0000;z-index:1}.parallax-content{color:#fff;font-size:18px;font-weight:700;padding:20px;text-align:center;text-shadow:0 2px 8px #00000080}.parallax-spacer{height:800px}.hover-glow-box{background:#1a1a1a;border-radius:12px;cursor:pointer;height:150px;overflow:hidden;position:relative;width:250px}.hover-glow-box:before{background:radial-gradient(circle,#8b5cf6cc 0,#0000 70%);content:"";height:200px;left:50%;left:var(--mouse-x,50%);opacity:0;pointer-events:none;position:absolute;top:50%;top:var(--mouse-y,50%);transform:translate(-50%,-50%);transition:opacity .3s;width:200px}.hover-glow-box:hover:before{opacity:1}.hover-glow-content{color:#fff;font-size:20px;font-weight:600;height:100%;position:relative;width:100%;z-index:1}.gradient-animation-container,.hover-glow-content{align-items:center;display:flex;justify-content:center}.gradient-animation-container{padding:20px}.gradient-animation-box{align-items:center;animation:gradientShift 5s ease infinite;background:linear-gradient(45deg,#ff6b6b,#4ecdc4,#45b7d1,#f7dc6f,#ff6b6b);background-size:300% 300%;border-radius:12px;box-shadow:0 8px 24px #0003;display:flex;height:150px;justify-content:center;width:250px}.gradient-animation-text{color:#fff;font-size:18px;font-weight:700;text-shadow:0 2px 8px #0000004d}@keyframes gradientShift{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.ripple-effect-container{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;box-shadow:0 8px 24px #0003;cursor:pointer;display:flex;height:200px;justify-content:center;overflow:hidden;position:relative;width:300px}.ripple-effect-content{color:#fff;font-size:18px;font-weight:700;pointer-events:none;position:relative;text-shadow:0 2px 8px #0000004d;z-index:1}.ripple{animation:ripple-expand 1s ease-out;background:#fff9;border-radius:50%;pointer-events:none;position:absolute;transform:translate(-50%,-50%)}@keyframes ripple-expand{0%{height:0;opacity:1;width:0}to{height:200px;opacity:0;width:200px}}.ui-showcase-page{background:var(--bg-primary);min-height:100vh;padding-bottom:4rem}.ui-showcase-top-controls{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1200px;padding:1rem 2rem 0}.ui-showcase-container{margin:0 auto;max-width:1200px;padding:2rem 2rem 80px}.ui-showcase-header{margin-bottom:3rem;text-align:center}.ui-showcase-header h1{-webkit-text-fill-color:#0000;background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;font-size:2.5rem;margin-bottom:.5rem}.ui-showcase-header p{color:var(--text-secondary);font-size:1.125rem}.interaction-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.interaction-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;color:inherit;cursor:pointer;display:block;font-family:inherit;padding:1.5rem;text-align:left;text-decoration:none;transition:all .2s ease;width:100%}.interaction-card:hover{border-color:var(--accent-purple);box-shadow:var(--shadow-lg);transform:translateY(-4px)}.interaction-card:focus-visible{outline:2px solid var(--accent-purple);outline-offset:2px}.interaction-card-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.interaction-card-title{font-size:1.25rem;margin:0}.difficulty-badge{font-size:.75rem;padding:.25rem .75rem}.interaction-card-demo{align-items:center;background:var(--bg-tertiary);border-radius:8px;display:flex;justify-content:center;margin-bottom:1rem;min-height:120px;padding:2rem}.interaction-card-description{color:var(--text-secondary);font-size:.9375rem;line-height:1.5;margin-bottom:1rem}.interaction-card-tags{display:flex;flex-wrap:wrap;gap:.5rem}.tag{font-size:.8125rem;padding:.25rem .625rem}.modal-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000c;bottom:0;display:flex;justify-content:center;left:0;padding:2rem;position:fixed;right:0;top:0;z-index:1000}.modal-content{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;max-height:90vh;max-width:900px;overflow-y:auto;padding:2rem;position:relative;width:100%}.modal-close{align-items:center;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:50%;color:var(--text-primary);cursor:pointer;display:flex;font-size:1.125rem;height:32px;justify-content:center;position:absolute;right:1rem;top:1rem;transition:all .2s ease;width:32px}.modal-close:hover{background:var(--bg-hover);border-color:var(--accent-purple)}.modal-title{font-size:1.75rem;margin-bottom:1.5rem}.modal-body{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:1fr 1fr;margin-bottom:1.5rem}.modal-code h3,.modal-demo h3{color:var(--text-secondary);font-size:1rem;letter-spacing:.05em;margin-bottom:1rem;text-transform:uppercase}.demo-area{border-radius:8px;min-height:200px}.modal-code{display:flex;flex-direction:column;gap:1rem}.copy-button{background:var(--accent-purple);border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.8125rem;font-weight:600;padding:.375rem .875rem;transition:all .2s ease}.copy-button:hover{background:var(--accent-purple-hover)}.copy-button:disabled{background:var(--bg-tertiary);color:#22c55e;cursor:default}.modal-footer{border-top:1px solid var(--border-color);padding-top:1.5rem}.modal-description{color:var(--text-secondary);margin-bottom:1rem}.modal-tags{display:flex;flex-wrap:wrap;gap:.5rem}@media (max-width:768px){.ui-showcase-container{padding:1rem}.ui-showcase-header h1{font-size:2rem}.interaction-grid{grid-template-columns:1fr}.modal-overlay{padding:1rem}.modal-content{padding:1.5rem}.modal-body{grid-template-columns:1fr}}@media (max-width:480px){.ui-showcase-header h1{font-size:1.75rem}.interaction-card{padding:1rem}.interaction-card-demo{padding:1.5rem}}.filters-section{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.search-bar{position:relative;width:100%}.search-bar-input{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:1rem;padding:.875rem 1rem .875rem 3rem;transition:all .2s ease;width:100%}.search-bar-input:focus{background:var(--bg-tertiary);border-color:var(--accent-purple);outline:none}.search-bar-icon,.search-bar-input::placeholder{color:var(--text-muted)}.search-bar-icon{height:18px;left:1rem;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);width:18px}.category-filter{display:flex;flex-wrap:wrap;gap:.75rem}.category-filter-btn{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:20px;color:var(--text-secondary);cursor:pointer;font-size:.875rem;font-weight:500;padding:.5rem 1rem;transition:all .2s ease}.category-filter-btn:hover{border-color:var(--accent-purple);color:var(--text-primary)}.category-filter-btn.active{background:var(--accent-purple);border-color:var(--accent-purple);color:#fff}.category-filter-btn:focus-visible{outline:2px solid var(--accent-purple);outline-offset:2px}.empty-state{padding:4rem 2rem;text-align:center}.empty-state-icon{font-size:4rem;margin-bottom:1rem;opacity:.5}.empty-state-message{color:var(--text-secondary);font-size:1.125rem}@media (max-width:768px){.category-filter{justify-content:center}}.tag-filter{display:flex;flex-direction:column;gap:.75rem}.tag-filter-label{color:var(--text-secondary);font-size:.875rem;font-weight:600}.tag-filter-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.tag-filter-btn{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:16px;color:var(--text-secondary);cursor:pointer;font-size:.8125rem;font-weight:500;padding:.375rem .75rem;transition:all .2s ease}.tag-filter-btn:hover{border-color:var(--accent-purple);color:var(--text-primary)}.tag-filter-btn.active{background:#8b5cf633;border-color:var(--accent-purple);color:var(--accent-purple)}.ui-detail-page{background:var(--bg-primary);min-height:100vh;padding-bottom:4rem}.ui-detail-top-controls{align-items:center;display:flex;justify-content:flex-end;margin:0 auto;max-width:1200px;padding:1rem 2rem 0}.ui-detail-container{margin:0 auto;max-width:1200px;padding:2rem 2rem 80px}.detail-header{margin-bottom:3rem}.back-button{align-items:center;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);cursor:pointer;display:inline-flex;font-size:.9375rem;font-weight:500;gap:.5rem;margin-bottom:2rem;padding:.75rem 1.5rem;transition:all .2s ease}.back-button:hover{background:var(--bg-hover);border-color:var(--accent-purple);transform:translateX(-4px)}.back-button:focus-visible{outline:2px solid var(--accent-purple);outline-offset:2px}.detail-title-section{align-items:center;display:flex;gap:1rem;margin-bottom:1rem}.detail-title{-webkit-text-fill-color:#0000;background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;font-size:2.5rem;margin:0}.difficulty-badge{border-radius:12px;flex-shrink:0;font-size:.8125rem;font-weight:600;padding:.375rem .875rem;text-transform:uppercase}.difficulty-easy{background:#22c55e33;color:#22c55e}.difficulty-medium{background:#fbbf2433;color:#fbbf24}.difficulty-hard{background:#ef444433;color:#ef4444}.detail-description{color:var(--text-secondary);font-size:1.125rem;line-height:1.6;margin-bottom:1rem}.detail-tags{display:flex;flex-wrap:wrap;gap:.5rem}.tag{background:var(--bg-tertiary);border-radius:4px;color:var(--text-secondary);font-size:.875rem;padding:.375rem .75rem}.detail-body{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:1fr 1fr}.code-section h2,.demo-section h2{color:var(--text-secondary);font-size:1rem;font-weight:600;letter-spacing:.05em;margin-bottom:1rem;text-transform:uppercase}.demo-section{align-self:start;position:-webkit-sticky;position:sticky;top:2rem}@media (max-width:1024px){.demo-section{position:static}}.demo-area{align-items:center;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:12px;display:flex;justify-content:center;min-height:300px;padding:3rem}.code-section{display:flex;flex-direction:column;gap:1.5rem}.code-block{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;overflow:hidden}.code-block-header{align-items:center;background:var(--bg-hover);border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;padding:.75rem 1rem}.code-block-filename{color:var(--text-secondary);font-family:Monaco,Courier New,monospace;font-size:.875rem}.code-block-content{margin:0;overflow-x:auto;padding:1rem}.code-block-content code{color:var(--text-primary);font-family:Monaco,Menlo,Courier New,monospace;font-size:.875rem;line-height:1.6}.ui-detail-not-found{align-items:center;background:var(--bg-primary);display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:2rem}.not-found-content{max-width:500px;text-align:center}.not-found-content h1{-webkit-text-fill-color:#0000;background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;font-size:6rem;margin-bottom:1rem}.not-found-content p{color:var(--text-secondary);font-size:1.25rem;margin-bottom:2rem}.back-to-list-button{background:var(--accent-purple);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:.875rem 2rem;transition:all .2s ease}.back-to-list-button:hover{background:var(--accent-purple-hover);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.back-to-list-button:focus-visible{outline:2px solid var(--accent-purple);outline-offset:2px}@media (max-width:768px){.ui-detail-container{padding:1rem}.detail-title{font-size:2rem}.detail-title-section{align-items:flex-start;flex-direction:column}.detail-body{grid-template-columns:1fr}.demo-area{padding:2rem}}@media (max-width:480px){.detail-title{font-size:1.75rem}.detail-description{font-size:1rem}.back-button{justify-content:flex-start;width:100%}.demo-area{min-height:150px;padding:1.5rem}.not-found-content h1{font-size:4rem}}.teto-page{background:linear-gradient(180deg,#fff0fb,#f8f0ff);color:#2d2d2d;font-family:Noto Sans KR,sans-serif;min-height:100vh;padding-bottom:80px;padding-top:0}.teto-header{align-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fff0fbf2;border-bottom:1px solid #c800801a;display:flex;gap:12px;left:0;padding:10px 16px;position:fixed;right:0;top:0;z-index:100}.teto-progress-bar{background:#f3e5f5;border-radius:3px;flex:1 1;height:6px;overflow:hidden}.teto-progress-fill{background:linear-gradient(90deg,#e91e8c,#9c27b0);border-radius:3px;height:100%;transition:width .4s ease}.teto-progress-text{color:#9c27b0;font-size:12px;font-weight:700;white-space:nowrap}.teto-intro{margin:0 auto;max-width:460px;padding:80px 20px 40px;text-align:center}.teto-icon-wrapper{display:inline-block;margin-bottom:24px;position:relative}.teto-main-emoji{animation:float 3s ease-in-out infinite;display:block;font-size:80px}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.teto-badge{animation:pulse 2s ease-in-out infinite;background:linear-gradient(135deg,#e91e8c,#9c27b0);border-radius:20px;color:#fff;font-size:11px;font-weight:900;letter-spacing:.5px;padding:3px 8px;position:absolute;right:-12px;top:-8px}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.teto-title{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#e91e8c,#9c27b0);-webkit-background-clip:text;background-clip:text;font-size:34px;font-weight:900;margin:0 0 8px}.teto-subtitle{color:#666;font-size:17px;line-height:1.5;margin:0 0 28px}.teto-rolling-banner{align-items:center;background:linear-gradient(135deg,#e91e8c,#9c27b0);border-radius:24px;box-shadow:0 4px 0 #9c27b04d;color:#fff;display:inline-flex;font-size:14px;font-weight:600;gap:8px;margin-bottom:32px;padding:10px 18px}.rolling-dot{animation:blink 1s ease-in-out infinite;background:#ff9800;border-radius:50%;height:8px;width:8px}@keyframes blink{50%{opacity:.2}}.teto-types-preview{grid-gap:10px;display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-bottom:32px}.type-preview-card{background:#fff;border:2px solid #0000;border-radius:16px;box-shadow:0 3px 12px #00000014;padding:14px 12px;text-align:center;transition:all .2s ease}.type-preview-card:first-child{border-color:#ffcdd2}.type-preview-card:nth-child(2){border-color:#e1bee7}.type-preview-card:nth-child(3){border-color:#ffccbc}.type-preview-card:nth-child(4){border-color:#f8bbd0}.type-preview-emoji{display:block;font-size:28px;margin-bottom:6px}.type-preview-name{display:block;font-size:15px;font-weight:900;margin-bottom:3px}.type-preview-desc{color:#888;font-size:11px}.teto-info-row{display:flex;gap:12px;justify-content:center;margin-bottom:36px}.teto-info-item{background:#fff;border-radius:14px;box-shadow:0 3px 10px #00000012;padding:14px 16px;text-align:center}.teto-info-item .info-icon{display:block;font-size:24px;margin-bottom:6px}.teto-info-item .info-label{color:#777;font-size:12px;font-weight:700;margin:0}.gender-select-section{margin:0 auto;max-width:460px;padding:20px 16px;text-align:center}.gender-select-title{color:#2d2d2d;font-size:24px;font-weight:900;margin:0 0 8px}.gender-select-sub{color:#888;font-size:15px;margin:0 0 28px}.gender-buttons{grid-gap:16px;display:grid;gap:16px;grid-template-columns:1fr 1fr}.gender-btn{background:#fff;border:3px solid #e8e8e8;border-radius:20px;box-shadow:0 4px 0 #e8e8e8;cursor:pointer;font-family:Noto Sans KR,sans-serif;padding:28px 16px;transition:all .2s ease}.gender-btn:hover{box-shadow:0 7px 0 #e8e8e8;transform:translateY(-3px)}.gender-btn:active{box-shadow:0 2px 0 #e8e8e8;transform:translateY(2px)}.gender-btn.male:hover{border-color:#e53935;box-shadow:0 7px 0 #ffcdd2}.gender-btn.female:hover{border-color:#d81b60;box-shadow:0 7px 0 #f8bbd0}.gender-emoji{display:block;font-size:52px;margin-bottom:10px}.gender-label{color:#2d2d2d;display:block;font-size:20px;font-weight:900;margin-bottom:4px}.gender-sublabel{color:#aaa;font-size:12px}.teto-start-btn{background:linear-gradient(135deg,#e91e8c,#9c27b0);border:none;border-radius:50px;box-shadow:0 6px 0 #7b1fa2;color:#fff;cursor:pointer;font-family:Noto Sans KR,sans-serif;font-size:20px;font-weight:900;margin-bottom:14px;padding:18px 56px;transition:all .15s ease}.teto-start-btn:hover{box-shadow:0 8px 0 #7b1fa2;transform:translateY(-2px)}.teto-start-btn:active{box-shadow:0 2px 0 #7b1fa2;transform:translateY(4px)}.teto-disclaimer{color:#9c27b0;font-size:13px;font-weight:600;margin:0}.teto-questions-container{margin:0 auto;max-width:500px;padding:20px 16px 40px}.teto-question-card{background:#fff;border:3px solid #e8d5f5;border-radius:22px;box-shadow:6px 6px 0 #e8d5f5;margin-bottom:24px;padding:28px 24px;transition:all .3s ease}.teto-question-card.hidden{opacity:.3;pointer-events:none;transform:scale(.95)}.teto-question-card.visible{opacity:1;transform:scale(1)}.teto-question-card.answered{border-color:#e0e0e0;box-shadow:4px 4px 0 #e0e0e0;opacity:.65}.teto-q-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.teto-q-number{background:linear-gradient(135deg,#e91e8c,#9c27b0);border-radius:20px;color:#fff;font-size:13px;font-weight:900;padding:4px 12px}.teto-q-phase{color:#bbb;font-size:12px;font-weight:500}.teto-q-icon{display:block;font-size:44px;margin-bottom:12px}.teto-q-text{color:#2d2d2d;font-size:20px;font-weight:700;line-height:1.4;margin:0 0 6px}.teto-q-sub{color:#999;font-size:13px;margin:0 0 20px}.teto-options{display:flex;flex-direction:column;gap:10px}.teto-option-btn{align-items:center;background:#fff;border:3px solid #e8d5f5;border-radius:14px;box-shadow:3px 3px 0 #e8d5f5;color:#2d2d2d;cursor:pointer;display:flex;font-family:Noto Sans KR,sans-serif;font-size:15px;font-weight:600;gap:10px;padding:14px 18px;text-align:left;transition:all .15s ease}.teto-option-btn .option-label{background:#f3e5f5;border-radius:8px;color:#9c27b0;flex-shrink:0;font-size:13px;font-weight:900;padding:2px 8px}.teto-option-btn:hover:not(.selected-btn){background:#fdf5ff;box-shadow:5px 5px 0 #e8d5f5;transform:translate(-2px,-2px)}.teto-option-btn:active:not(.selected-btn){box-shadow:1px 1px 0 #e8d5f5;transform:translate(2px,2px)}.teto-option-btn.selected-btn{background:linear-gradient(135deg,#e91e8c,#9c27b0);border-color:#0000;box-shadow:3px 3px 0 #7b1fa2;color:#fff}.teto-option-btn.selected-btn .option-label{background:#ffffff40;color:#fff}.teto-answer-badge{border-radius:20px;display:inline-block;font-size:13px;font-weight:700;margin-top:10px;padding:5px 14px}.teto-answer-badge.is-teto{background:#fff3e0;color:#e53935}.teto-answer-badge.is-agen{background:#f3e5f5;color:#8e24aa}.teto-result-section{margin:0 auto;max-width:500px;padding:20px 16px 40px}.teto-result-card{animation:resultPop .5s ease;background:#fff;border:4px solid;border-radius:26px;box-shadow:8px 8px 0;padding:32px 24px;text-align:center}@keyframes resultPop{0%{opacity:0;transform:scale(.8)}60%{transform:scale(1.03)}to{opacity:1;transform:scale(1)}}.result-type-badge{align-items:center;animation:stampDrop .6s ease;border-radius:50%;display:flex;flex-direction:column;height:100px;justify-content:center;margin:0 auto 20px;width:100px}@keyframes stampDrop{0%{opacity:0;transform:scale(2.5) rotate(-30deg)}60%{transform:scale(.9) rotate(5deg)}to{opacity:1;transform:scale(1) rotate(0)}}.result-type-emoji{display:block;font-size:38px;line-height:1}.result-type-label{color:#fff;font-size:13px;font-weight:900;letter-spacing:1px;margin-top:2px}.result-type-name{font-size:36px;font-weight:900;margin:0 0 6px}.result-tagline{color:#777;font-size:16px;font-style:italic;margin:0 0 24px}.result-gauge-wrap{margin-bottom:24px}.gauge-labels-top{color:#666;display:flex;font-size:13px;font-weight:700;justify-content:space-between;margin-bottom:6px}.gauge-track{background:#f3e5f5;border:2px solid #e0e0e0;border-radius:11px;height:22px;overflow:hidden;position:relative}.gauge-teto-fill{background:linear-gradient(90deg,#e53935,#ff7043);border-radius:9px 0 0 9px;left:0}.gauge-agen-fill,.gauge-teto-fill{height:100%;position:absolute;top:0;transition:width 1s ease-out}.gauge-agen-fill{background:linear-gradient(90deg,#ab47bc,#7b1fa2);border-radius:0 9px 9px 0;right:0}.gauge-center-label{color:#0006;font-size:11px;font-weight:900;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%)}.gauge-percentages{display:flex;font-size:14px;font-weight:900;justify-content:space-between;margin-top:8px}.gauge-percentages .teto-pct{color:#e53935}.gauge-percentages .agen-pct{color:#8e24aa}.result-description{background:#faf0ff;border-radius:14px;color:#555;font-size:15px;line-height:1.7;padding:16px}.result-description,.result-traits{margin-bottom:22px;text-align:left}.result-traits h3{color:#2d2d2d;font-size:16px;font-weight:900;margin:0 0 12px}.result-traits ul{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}.result-traits li{background:#fff;border-radius:10px;box-shadow:0 2px 6px #0000000f;color:#444;font-size:14px;padding:10px 14px}.result-compat{border-radius:16px;margin-bottom:22px;padding:18px;text-align:left}.result-compat h3{font-size:16px;font-weight:900;margin:0 0 8px}.result-compat p{color:#555;font-size:14px;line-height:1.6;margin:0}.compat-type-chip{border:2px solid;border-radius:20px;display:inline-block;font-size:16px;font-weight:900;margin-bottom:10px;padding:4px 14px}.result-celebrities{background:#fff9c4;border-radius:14px;margin-bottom:22px;padding:16px;text-align:left}.result-celebrities h3{color:#2d2d2d;font-size:15px;font-weight:900;margin:0 0 8px}.celebrity-chips{display:flex;flex-wrap:wrap;gap:8px}.celebrity-chip{background:#fff59d;border:2px solid #f9a825;border-radius:20px;color:#e65100;font-size:14px;font-weight:700;padding:5px 14px}.result-chain{background:#ede7f6;border-radius:14px;margin-bottom:24px;padding:16px}.result-chain h3{color:#4a148c;font-size:15px;font-weight:900;margin:0 0 12px;text-align:center}.chain-visual{flex-wrap:wrap;gap:4px;justify-content:center}.chain-item,.chain-visual{align-items:center;display:flex}.chain-item{flex-direction:column;gap:3px;opacity:.5;transition:opacity .2s}.chain-item.active{opacity:1}.chain-item-emoji{font-size:22px}.chain-item-name{color:#4a148c;font-size:10px;font-weight:700}.chain-arrow{color:#9c27b0;font-size:18px;opacity:.6}.result-funfact{background:#e8f5e9;border-radius:14px;color:#2e7d32;font-size:14px;line-height:1.6;margin-bottom:24px;padding:14px 16px}.result-funfact strong{display:block;font-size:15px;margin-bottom:4px}.result-actions{display:flex;flex-direction:column;gap:12px}.retry-btn{background:linear-gradient(135deg,#e91e8c,#9c27b0);border:none;border-radius:14px;box-shadow:0 4px 0 #7b1fa2;color:#fff;cursor:pointer;font-family:Noto Sans KR,sans-serif;font-size:17px;font-weight:900;padding:16px;transition:all .15s ease}.retry-btn:hover{box-shadow:0 6px 0 #7b1fa2;transform:translateY(-2px)}.share-btn{background:#fff;border:3px solid #2d2d2d;border-radius:14px;box-shadow:0 4px 0 #2d2d2d;color:#2d2d2d;cursor:pointer;font-family:Noto Sans KR,sans-serif;font-size:16px;font-weight:700;padding:14px;transition:all .15s ease}.share-btn:hover{box-shadow:0 6px 0 #2d2d2d;transform:translateY(-2px)}.result-footer-msg{color:#888;font-size:15px;margin-top:20px;text-align:center}@media (max-width:400px){.teto-title{font-size:26px}.teto-q-text{font-size:17px}.teto-types-preview{gap:8px;grid-template-columns:1fr 1fr}.teto-result-card{padding:24px 16px}.result-type-name{font-size:28px}.chain-visual{gap:2px}.chain-item-emoji{font-size:18px}}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:-webkit-sticky;position:sticky}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.\!grid{display:grid!important}.grid{display:grid}.inline-grid{display:inline-grid}.hidden{display:none}.shrink{flex-shrink:1}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-wrap{flex-wrap:wrap}.border{border-width:1px}.uppercase{text-transform:uppercase}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.blur{--tw-blur:blur(8px)}.blur,.drop-shadow{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}*{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#0a0a0b;--bg-secondary:#131316;--bg-tertiary:#1c1c21;--bg-hover:#252529;--border-color:#2a2a2e;--text-primary:#f5f5f7;--text-secondary:#a0a0a6;--text-muted:#6b6b70;--accent-purple:#8b5cf6;--accent-purple-hover:#a78bfa;--accent-blue:#5e8eff;--accent-gradient:linear-gradient(135deg,#8b5cf6,#5e8eff);--shadow:0 2px 8px #0006;--shadow-lg:0 8px 24px #00000080}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0a0a0b;background-color:var(--bg-primary);color:#f5f5f7;color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}::selection{background:#8b5cf6;background:var(--accent-purple);color:#fff}::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-track{background:#131316;background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:#2a2a2e;background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#6b6b70;background:var(--text-muted)}
/*# sourceMappingURL=main.a28f29b2.css.map*/