.header{text-align:center;margin-bottom:48px;animation:fadeIn .5s ease-out}.header-content{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-radius:24px;padding:28px 40px;box-shadow:var(--shadow-subtle),inset 0 1px #ffffffe6;border:1px solid var(--glass-border);display:inline-block;position:relative;overflow:hidden}.header-content:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--liquid-glass-gradient);animation:shimmer 3s ease-in-out infinite;pointer-events:none}@keyframes shimmer{0%,to{left:-100%;opacity:0}50%{left:100%;opacity:.3}}.title{font-size:40px;font-weight:700;color:var(--text-primary);margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:16px;letter-spacing:-.03em}.logo-icon{width:64px;height:64px;flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.08));animation:floatUpDown 3s ease-in-out infinite}@keyframes floatUpDown{0%,to{transform:translateY(6px)}50%{transform:translateY(-6px)}}.subtitle{font-size:15px;color:var(--text-secondary);font-weight:400;line-height:1.6}@keyframes fadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.title{font-size:28px}.logo-icon{width:72px;height:72px}.subtitle{font-size:14px}.header-content{padding:25px 20px}}@media (max-width: 480px){.title{font-size:24px;gap:10px}.logo-icon{width:64px;height:64px}.subtitle{font-size:13px}.header-content{padding:20px 15px}}.category-selector{display:flex;gap:12px;justify-content:center;margin-bottom:48px;flex-wrap:wrap}.category-btn{padding:10px 20px;font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--text-primary);border:1px solid var(--glass-border);border-radius:6px;background:var(--glass-bg);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);box-shadow:var(--shadow-button);display:flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.category-btn .ico-bg{color:transparent;transition:color .3s cubic-bezier(.4,0,.2,1)}.category-btn .ico-fg{color:var(--brand-primary);transition:color .3s cubic-bezier(.4,0,.2,1)}.category-btn:hover{background:var(--glass-bg-hover);transform:translateY(-2px);box-shadow:0 8px 32px #10b98133,0 0 0 1px #10b98140}.category-btn.active{color:var(--brand-primary);border:none;background:radial-gradient(ellipse 80% 80% at 10% 10%,rgba(146,255,222,.38) 0%,transparent 50%),radial-gradient(ellipse 80% 80% at 90% 90%,rgba(255,233,160,.518) 0%,transparent 50%),radial-gradient(ellipse 25% 25% at 50% 50%,rgba(255,255,255,.18) 0%,transparent 50%),radial-gradient(circle at 50% 50%,rgba(14,165,120,0) 0%,transparent 100%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 1px 1px 1px #10b98173,0 8px 24px -4px #10b98173,0 20px 48px -8px #f59e0b40,0 32px 64px -12px #10b98126;transform:translateY(-2px) scale(1.03)}.category-btn.active .ico-bg{color:#fff}.category-btn.active .ico-fg{color:#fdc838d0}.category-icon{display:flex;justify-content:center;align-items:center}@media (max-width:768px){.category-btn{padding:12px 20px;font-size:14px}}.card{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-radius:20px;padding:24px;box-shadow:var(--shadow-card),inset 0 1px #ffffffe6;border:1px solid var(--glass-border);transition:all .3s cubic-bezier(.4,0,.2,1);animation:slideIn .4s ease-out forwards;opacity:0;cursor:pointer;position:relative;overflow:hidden}.card:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.3) 0%,transparent 70%);opacity:0;transition:opacity .5s ease;pointer-events:none;z-index:0}.card:hover:before{opacity:1}.card>*{position:relative;z-index:1}.card:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 8px 24px #10b98126,0 0 0 1px #10b9811a,inset 0 1px #fff;border-color:#10b98133}.card.collapsed{padding:20px 25px}.card.collapsed .card-header{margin-bottom:0;padding-bottom:0;border-bottom:none}.expand-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;transition:all .35s cubic-bezier(.4,0,.2,1);position:relative}.expand-icon svg{transition:all .4s cubic-bezier(.34,1.56,.64,1)}.card.expanded .card-header:after{display:block}.card:hover .expand-icon svg{transform:scale(1.08)}.card.collapsed:hover .expand-icon svg{transform:rotate(-2deg) translateY(-1px) scale(1.08)}.card.expanded:hover .expand-icon svg{transform:scale(1.12);filter:drop-shadow(0 2px 4px rgba(245,158,11,.2))}.card-content{animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.card-header{position:relative;margin-bottom:18px;padding-bottom:18px;display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.card-header:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--strip-start, #fff159) 20%,var(--strip-end, #ffbb46) 80%,transparent);border-radius:1px;display:none}.card-title{font-size:24px;font-weight:700;color:var(--text-dark);margin:0;flex:1;line-height:1.3;display:flex;align-items:center}.topic-tag-icon{flex-shrink:0;margin-right:8px}.sentence-title{font-size:20px;line-height:1.4}.pattern-title{color:var(--brand-primary)}.card-content{line-height:1.8}.definition{margin-bottom:12px;display:flex;gap:10px}.part-of-speech{font-weight:600;color:var(--brand-accent);min-width:50px;font-size:16px}.meaning{color:var(--text-medium);font-size:16px;flex:1}.meaning-text{font-size:18px;color:var(--text-medium);margin-bottom:15px;font-weight:500}.sentence-text{font-size:18px;color:var(--text-dark);font-style:italic;margin-bottom:12px;line-height:1.6}.translation-text{font-size:16px;color:var(--text-secondary);padding:14px 18px;background:linear-gradient(135deg,#c2ffe714,#10b98114);backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);border-radius:14px;margin-top:20px;margin-bottom:10px;border:1px solid rgba(16,185,129,.15);box-shadow:0 2px 8px #10b9810d;transition:all .3s ease}.translation-text:hover{background:linear-gradient(135deg,#01ffaa1f,#00ffaa0d);border-color:#10b98140}.example-text{font-size:15px;color:var(--text-secondary);font-style:italic;padding:14px 18px;background:linear-gradient(135deg,#f59e0b14,#f59e0b08);backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);border-radius:14px;margin-top:10px;border:1px solid rgba(245,158,11,.15);box-shadow:0 2px 8px #f59e0b0d;transition:all .3s ease}.example-text:hover{background:linear-gradient(135deg,#f59e0b1f,#f59e0b0d);border-color:#f59e0b40}.note-text{font-size:14px;color:var(--text-secondary);margin-top:10px;padding:14px 18px;background:linear-gradient(135deg,#fbbf241a,#f59e0b0d);backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);border-left:3px solid var(--brand-accent);border-radius:10px;box-shadow:0 2px 8px #fbbf240d;transition:all .3s ease}.note-text:hover{background:linear-gradient(135deg,#fbbf2426,#f59e0b14)}.description-text{font-size:16px;color:var(--text-secondary);margin-bottom:15px}.example-section{margin-top:15px}.topic-card{background:linear-gradient(135deg,#fef08a1f,#fbbf2414,#a7f3d01f);backdrop-filter:blur(24px) saturate(200%);-webkit-backdrop-filter:blur(24px) saturate(200%);border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 32px #fbbf2414,0 2px 8px #a7f3d00f,inset 0 1px #fff6,inset 0 -1px #0000000d;position:relative;overflow:hidden}.topic-card:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 30%,rgba(254,240,138,.18) 0%,rgba(251,191,36,.12) 30%,transparent 70%);opacity:0;transition:opacity .6s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:0}.topic-card:after{content:"";position:absolute;bottom:-30%;right:-30%;width:150%;height:150%;background:radial-gradient(circle at 70% 70%,rgba(167,243,208,.15) 0%,transparent 60%);opacity:0;transition:opacity .6s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:0}.topic-card:hover{border-color:#ffffff59;background:linear-gradient(135deg,#fef08a2e,#fbbf241f,#a7f3d02e);box-shadow:0 12px 48px #fbbf2426,0 4px 16px #a7f3d01f,inset 0 1px #ffffff80,inset 0 -1px #00000014,0 0 0 1px #ffffff1a;transform:translateY(-2px)}.topic-card:hover:before{opacity:1}.topic-card:hover:after{opacity:1}@media (max-width: 768px){.card{padding:20px}.card.collapsed{padding:15px 20px}.card-title{font-size:20px}.sentence-title{font-size:18px}.expand-icon{font-size:16px;min-width:18px}.sentence-text,.meaning-text{font-size:16px}}.related-tag{display:inline-block;padding:6px 12px;border-radius:12px;font-size:13px;font-weight:500;margin:4px 4px 0 0;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid;white-space:nowrap;-webkit-user-select:none;user-select:none}.related-tag-pattern{background:linear-gradient(135deg,#fbbf242e,#f59e0b26);color:var(--brand-accent-text);border:1px solid rgba(251,191,36,.3);box-shadow:0 2px 6px #fbbf241f;transition:all .25s ease}.related-tag-pattern:hover{background:linear-gradient(135deg,#fee8b047,#ffc25971);border-color:#fbbf2473;transform:translateY(-2px);box-shadow:0 4px 12px #fbbf2438}.related-tag-word{background:linear-gradient(135deg,#2ef4b226,#0affb21f);color:#10b981e6;border-color:#10b98140;box-shadow:0 2px 6px #10b9811a}.related-tag-word:hover{background:linear-gradient(135deg,#b7f7e240,#00ffae33);border-color:#10b98166;transform:translateY(-2px);box-shadow:0 4px 12px #10b98133}.related-tag-phrase{background:linear-gradient(135deg,#6bd3ff2e,#25baff26);color:#0284c7eb;border:1px solid rgba(56,189,248,.3);box-shadow:0 2px 6px #38bdf81f;transition:all .25s ease}.related-tag-phrase:hover{background:linear-gradient(135deg,#baeaff47,#3fc2ff40);border-color:#38bdf873;transform:translateY(-2px);box-shadow:0 4px 12px #38bdf838}.related-tag-category{background:linear-gradient(135deg,#adeade33,#7acdbe29);color:#22615ce6;border-color:#adeade59;box-shadow:0 2px 6px #adeade26;transition:all .25s ease;cursor:default}.related-tag-category:hover{background:linear-gradient(135deg,#bcf2de47,#adeade3d);border-color:#adeade73;transform:translateY(-1px);box-shadow:0 3px 8px #adeade33}.detail-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000073;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease}.detail-modal-content{background:#fffffff2;backdrop-filter:blur(40px) saturate(120%);-webkit-backdrop-filter:blur(40px) saturate(120%);border-radius:20px;width:90%;max-width:600px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 50px -10px #00000026,inset 0 1px #ffffffe6;border:1px solid rgba(255,255,255,.8);animation:slideUp .2s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.detail-modal-header{display:flex;justify-content:space-between;align-items:center;padding:28px 32px;border-bottom:.5px solid rgba(229,231,235,.5)}.detail-modal-header h2{margin:0;font-size:22px;color:#111827;font-weight:600;letter-spacing:-.02em}.detail-modal-close{background:none;border:1px solid rgba(0,0,0,.1);font-size:20px;color:#0000004d;cursor:pointer;padding:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s cubic-bezier(.4,0,.2,1)}.detail-modal-close:hover{background:#0000000a;color:#0009;border-color:#00000026}.detail-modal-body{padding:32px;overflow-y:auto;flex:1;line-height:1.8;color:#111827;font-size:15px;font-weight:400}@media (max-width: 768px){.detail-modal-content{width:95%;max-height:90vh}.detail-modal-header{padding:16px 20px}.detail-modal-header h2{font-size:18px}.detail-modal-body{padding:20px;font-size:14px}}.floating-particles{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}.particle{position:absolute;width:24px;height:24px;background:linear-gradient(135deg,var(--brand-light-primary),var(--brand-light-accent));border-radius:50%;opacity:0;animation:float 8s infinite;animation-delay:calc(var(--i) * 1s);box-shadow:0 0 10px #10b9814d}.particle:nth-child(1){left:10%;top:20%}.particle:nth-child(2){left:20%;top:80%}.particle:nth-child(3){left:30%;top:40%}.particle:nth-child(4){left:40%;top:60%}.particle:nth-child(5){left:60%;top:30%}.particle:nth-child(6){left:70%;top:70%}.particle:nth-child(7){left:80%;top:50%}.particle:nth-child(8){left:90%;top:10%}@keyframes float{0%,to{opacity:0;transform:translateY(0) scale(.5)}50%{opacity:.6;transform:translateY(-100px) scale(1.2)}}.wave-loader{position:relative;display:inline-flex;gap:8px;align-items:center;justify-content:center}.wave-circle{width:12px;height:12px;background:linear-gradient(135deg,var(--brand-primary),var(--brand-mint-light),var(--brand-accent));border-radius:50%;animation:wave 1.4s ease-in-out infinite;box-shadow:0 0 15px #10b9814d}.wave-circle:nth-child(1){animation-delay:0s}.wave-circle:nth-child(2){animation-delay:.2s}.wave-circle:nth-child(3){animation-delay:.4s}@keyframes wave{0%,60%,to{transform:scale(.6);opacity:.4}30%{transform:scale(1.2);opacity:1}}.shine-effect{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transition:left .5s ease;pointer-events:none}.background-pattern{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}.pattern-circle{position:absolute;border-radius:50%;opacity:.03;animation:rotate 30s linear infinite}.pattern-1{width:600px;height:600px;top:-200px;right:-200px;background:linear-gradient(135deg,var(--brand-primary),var(--brand-accent))}.pattern-2{width:400px;height:400px;bottom:-100px;left:-100px;background:linear-gradient(225deg,var(--brand-mint-light),var(--brand-primary));animation-direction:reverse;animation-duration:40s}.pattern-3{width:300px;height:300px;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(45deg,var(--brand-accent),var(--brand-primary));animation-duration:35s}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.stats-decoration{position:relative;padding:20px 24px;background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:16px;border:1px solid rgba(16,185,129,.2);overflow:hidden;text-align:center;transition:all .3s cubic-bezier(.4,0,.2,1)}.stats-decoration:hover{transform:translateY(-2px);box-shadow:0 8px 24px #10b98126}.stats-number{font-size:32px;font-weight:700;background:linear-gradient(135deg,var(--brand-primary),var(--brand-accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px}.stats-label{font-size:14px;color:var(--text-secondary);font-weight:500}.stats-glow{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:60%;height:2px;background:linear-gradient(90deg,transparent,var(--brand-primary),transparent);opacity:.5}.liquid-glass-btn{position:relative;padding:12px 28px;background:var(--btn-glass-bg);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--btn-glass-border);border-radius:14px;color:var(--text-primary);font-weight:600;font-size:15px;cursor:pointer;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-button),inset 0 1px #ffffff80}.liquid-glass-btn:hover{background:var(--btn-glass-hover);transform:translateY(-2px);box-shadow:0 8px 24px #10b98126,inset 0 1px #fffc}.liquid-glass-btn:hover .shine-effect{left:100%}.liquid-glass-btn:active{transform:translateY(0);background:var(--btn-glass-active)}@media (max-width: 768px){.particle{width:12px;height:12px}.pattern-1{width:400px;height:400px}.pattern-2{width:300px;height:300px}.pattern-3{width:200px;height:200px}.stats-number{font-size:24px}.stats-decoration{padding:16px 20px}}.liquid-button{position:relative;padding:12px 24px;border:none;border-radius:16px;font-size:15px;font-weight:600;cursor:pointer;overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1);background:transparent;border:1px solid rgba(255,255,255,.3)}.liquid-button-bg{position:absolute;top:0;left:0;right:0;bottom:0;background:#fff6;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-radius:inherit;transition:all .4s ease;z-index:0}.liquid-button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,transparent 100%);transform:translate(-50%,-50%);transition:width .6s ease,height .6s ease;pointer-events:none;z-index:1}.liquid-button:hover:before{width:300px;height:300px}.liquid-button:hover .shine-effect{left:100%}.liquid-button-content{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-primary);letter-spacing:.3px}.liquid-button-icon{display:flex;align-items:center;justify-content:center}.liquid-button-primary .liquid-button-bg{background:linear-gradient(135deg,#10b9814d,#10b98126);box-shadow:0 4px 12px #10b98126,inset 0 1px #ffffff80}.liquid-button-primary:hover .liquid-button-bg{background:linear-gradient(135deg,#10b98166,#10b98133);box-shadow:0 6px 20px #10b98140,inset 0 1px #fff9}.liquid-button-primary:active{transform:scale(.98)}.liquid-button-secondary .liquid-button-bg{background:linear-gradient(135deg,#fad15a4d,#fad15a26);box-shadow:0 4px 12px #fad15a26,inset 0 1px #ffffff80}.liquid-button-secondary:hover .liquid-button-bg{background:linear-gradient(135deg,#fad15a66,#fad15a33);box-shadow:0 6px 20px #fad15a40,inset 0 1px #fff9}.liquid-button-accent .liquid-button-bg{background:linear-gradient(135deg,#f59e0b4d,#f59e0b26);box-shadow:0 4px 12px #f59e0b26,inset 0 1px #ffffff80}.liquid-button-accent:hover .liquid-button-bg{background:linear-gradient(135deg,#f59e0b66,#f59e0b33);box-shadow:0 6px 20px #f59e0b40,inset 0 1px #fff9}.liquid-button:hover{transform:translateY(-2px);border-color:#ffffff80}.liquid-button.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.liquid-button{padding:10px 20px;font-size:14px}}.loading-spinner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:40px}.spinner-ring{position:relative;width:60px;height:60px}.loading-spinner-small .spinner-ring{width:40px;height:40px}.loading-spinner-large .spinner-ring{width:80px;height:80px}.spinner-segment{position:absolute;width:100%;height:100%;border:3px solid transparent;border-radius:50%;animation:spin 1.5s cubic-bezier(.5,0,.5,1) infinite}.spinner-segment:nth-child(1){border-top-color:var(--brand-primary);animation-delay:-.45s}.spinner-segment:nth-child(2){border-right-color:var(--brand-accent);animation-delay:-.3s}.spinner-segment:nth-child(3){border-bottom-color:#f59e0b;animation-delay:-.15s}.spinner-segment:nth-child(4){border-left-color:var(--brand-primary);opacity:.6}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{font-size:14px;color:var(--text-secondary);font-weight:500;letter-spacing:.3px;animation:pulse-text 2s ease-in-out infinite}@keyframes pulse-text{0%,to{opacity:.6}50%{opacity:1}}.loading-spinner-liquid{display:flex;gap:8px;padding:40px}.liquid-dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--brand-primary),var(--brand-accent));animation:liquid-bounce 1.4s ease-in-out infinite}.liquid-dot:nth-child(1){animation-delay:-.32s}.liquid-dot:nth-child(2){animation-delay:-.16s}@keyframes liquid-bounce{0%,80%,to{transform:scale(.8);opacity:.5}40%{transform:scale(1.2);opacity:1}}.category-dropdown-wrapper{display:flex;align-items:center;gap:12px}.category-dropdown-wrapper label{font-weight:500;color:var(--text-secondary);font-size:14px;white-space:nowrap}.category-select{position:relative;min-width:180px;-webkit-user-select:none;user-select:none;z-index:10001}.category-select-trigger{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border:1.5px solid rgba(229,231,235,.6);border-radius:12px;background:#ffffffb3;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);min-height:44px;box-shadow:0 2px 8px #0000000a,inset 0 1px #fffc}.category-select-trigger:hover:not(.disabled){border-color:#10b98166;background:#ffffffd9;box-shadow:0 4px 16px #10b9811a,inset 0 1px #ffffffe6;transform:translateY(-1px)}.category-select-trigger.open{border-color:#10b98180;background:#fffffff2;box-shadow:0 0 0 3px #10b9811a,0 8px 24px #10b9811f}.category-select-trigger.disabled{opacity:.6;cursor:not-allowed}.category-select-value{flex:1;font-size:14px;font-weight:500;color:#111827d9;transition:color .3s;letter-spacing:-.01em}.category-select-trigger.placeholder .category-select-value{color:#6b7280b3;font-weight:400;font-style:italic}.category-select-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:12px;color:#10b981b3;transition:all .3s cubic-bezier(.4,0,.2,1)}.category-select-trigger:hover:not(.disabled) .category-select-arrow{color:var(--brand-primary)}.category-select-trigger.open .category-select-arrow{transform:rotate(180deg)}.category-select-trigger.disabled .category-select-arrow{color:#9ca3af}.category-select-dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:10000;background:#fffffff2;backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-radius:14px;box-shadow:0 20px 60px #0000001f,0 8px 24px #10b98114,0 0 0 1px #fffc,inset 0 1px #ffffffe6;border:1px solid rgba(229,231,235,.5);overflow:hidden;animation:slideDown .3s cubic-bezier(.4,0,.2,1);max-height:320px;overflow-y:auto;padding-right:4px}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.category-select-options{padding:8px 4px 8px 8px}.category-select-option{display:flex;align-items:center;padding:12px 16px;border-radius:10px;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;gap:12px;margin:2px 6px;color:#111827cc}.category-select-option:hover{background:linear-gradient(135deg,#10b98114,#34d3990f);color:#111827f2;transform:translate(3px)}.category-select-option.selected{background:linear-gradient(135deg,#10b9811f,#0596691a);color:#10b981f2;font-weight:600;border:1px solid rgba(16,185,129,.2);box-shadow:0 2px 8px #10b9811a,inset 0 1px #ffffff80}.category-select-option.selected:hover{background:linear-gradient(135deg,#10b98129,#05966921);border-color:#10b9814d;box-shadow:0 4px 12px #10b98126,inset 0 1px #fff9;transform:translate(3px)}.category-select-option.default-option{background:linear-gradient(135deg,#f9fafb99,#f3f4f666);border-bottom:1px solid rgba(229,231,235,.6);margin-bottom:6px;padding-bottom:14px}.category-select-option.default-option:hover{background:linear-gradient(135deg,#f9fafbcc,#f3f4f699)}.option-label{flex:1;font-size:14px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em;transition:color .2s ease}.category-select-option.selected .option-label{color:#10b981f2;font-weight:600}.option-check{font-size:18px;font-weight:600;color:#10b981e6;margin-left:auto;opacity:.9;animation:checkIn .3s cubic-bezier(.4,0,.2,1)}@keyframes checkIn{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.category-select-dropdown::-webkit-scrollbar{width:5px}.category-select-dropdown::-webkit-scrollbar-track{background:transparent;margin:8px 0}.category-select-dropdown::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#10b98166,#10b9814d);border-radius:10px;border:none;transition:background .2s ease}.category-select-dropdown::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#10b98180,#10b98166)}@media (max-width: 768px){.category-select-trigger{padding:10px 14px;min-height:42px}.category-select-value{font-size:13px}.category-select-dropdown{max-height:280px}.category-select-option{padding:14px 12px}}.content-display{animation:fadeIn .5s ease-in}.controls{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-radius:20px;padding:20px 28px;margin-bottom:40px;display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;box-shadow:var(--shadow-card),inset 0 1px #ffffffe6;border:1px solid var(--glass-border);position:relative;z-index:100}.controls:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--liquid-glass-gradient);opacity:0;transition:opacity .4s ease,left .8s ease;pointer-events:none}.controls:hover:before{opacity:1;left:100%}.count-control{display:flex;align-items:center;gap:12px}.count-control label{font-weight:500;color:var(--text-secondary);font-size:14px}.count-control input{width:80px;height:40px;padding:0 12px;border:1px solid var(--line-divider);border-radius:12px;font-size:15px;font-weight:500;text-align:center;transition:all .15s ease-out;background:var(--glass-bg);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);color:var(--text-primary)}.count-control input:focus{outline:none;border-color:var(--brand-primary);background:var(--glass-bg-hover)}.refresh-btn{height:40px;padding:0 24px;background:var(--glass-bg);color:var(--btn-warm-text);border:1px solid var(--btn-warm-border);border-radius:12px;font-size:15px;font-weight:500;box-shadow:var(--btn-warm-shadow);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);letter-spacing:-.01em;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);overflow:hidden}.refresh-text{display:flex;align-items:center;justify-content:center}.hint-strip{position:absolute;left:12px;bottom:50%;transform:translateY(0);transition:all .3s ease-out}.refresh-btn:hover{background:var(--btn-warm-hover);border-color:#ffb74dcc;box-shadow:0 8px 32px #ffc21a33,0 0 0 1px #b96a1040}.refresh-btn:hover .hint-strip{transform:translateY(50%)}.strip-amber{--strip-start: #FAD15A;--strip-end: #F59E0B}.strip-mint{--strip-start: #A7F3D0;--strip-end: #34D399}.strip-warm{--strip-start: #FED7AA;--strip-end: #FB923C}.refresh-btn:hover:not(:disabled){background:var(--glass-bg-hover)}.refresh-btn:hover:not(:disabled):after{width:24px}.refresh-btn:disabled{opacity:.4;cursor:not-allowed}.loading-state{text-align:center;padding:60px 20px;color:var(--brand-primary)}.spinner{width:50px;height:50px;border:4px solid rgba(16,185,129,.2);border-top-color:var(--brand-primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}@keyframes spin{to{transform:rotate(360deg)}}.loading-state p{font-size:18px;font-weight:600;color:var(--text-medium)}.empty-state{text-align:center;padding:80px 20px;background:#ffffffd9;backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border-radius:20px;box-shadow:0 8px 32px #06b6d426,0 0 0 1px #06b6d414;border:2px dashed rgba(6,182,212,.25)}.empty-state h3{font-size:26px;margin-bottom:12px;color:var(--text-dark);font-weight:700}.empty-state p{color:var(--text-light);font-size:16px;font-weight:500}.masonry-grid{display:flex;width:auto;animation:fadeIn .5s ease-in;margin-left:-25px}.masonry-grid-column{padding-left:25px;background-clip:padding-box}.masonry-grid-column>*{margin-bottom:25px}.load-more-trigger{text-align:center;padding:40px 20px;color:var(--brand-primary);animation:fadeIn .5s ease-in}.spinner-small{width:30px;height:30px;border:3px solid rgba(16,185,129,.2);border-top-color:var(--brand-primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 15px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 768px){.controls{flex-direction:column}.masonry-grid{margin-left:0}.masonry-grid-column{padding-left:0}}.statistics-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:40px;animation:slideInDown .6s ease-out}.stat-card{background:var(--glass-bg);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-radius:20px;padding:24px;border:1px solid var(--btn-glass-bg);display:flex;align-items:flex-start;gap:16px;position:relative;overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #68686814}.stat-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.1) 50%,transparent 100%);opacity:0;transition:opacity .4s ease;pointer-events:none}.stat-card:hover:before{opacity:1}.stat-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 8px 24px #b3b3b326,0 0 0 1px #a7a7a71a}.stat-card-primary{background:linear-gradient(135deg,#10b98126,#10b9810d)}.stat-card-secondary{background:linear-gradient(135deg,#fad15a26,#fad15a0d)}.stat-card-accent{background:linear-gradient(135deg,#f5780b26,#f59e0b0d)}.stat-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#fffc;color:var(--brand-primary);flex-shrink:0;box-shadow:0 2px 8px #10b9811a}.stat-card-secondary .stat-icon{background:#fffc;color:var(--brand-accent)}.stat-card-accent .stat-icon{background:#fffc;color:#f59e0b}.stat-content{flex:1;min-width:0}.stat-label{font-size:13px;color:var(--text-secondary);font-weight:500;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.stat-value{font-size:32px;font-weight:700;color:var(--text-primary);line-height:1;margin-bottom:8px;letter-spacing:-.02em}.stat-trend{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--brand-primary)}.stat-trend svg{width:16px;height:16px}.stat-subtitle{font-size:13px;color:var(--text-secondary);font-weight:500}@keyframes slideInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.statistics-container{grid-template-columns:1fr;gap:16px;margin-bottom:32px}.stat-card{padding:20px}.stat-icon{width:44px;height:44px}.stat-value{font-size:28px}}.nav-toggle{position:fixed;bottom:20px;left:20px;width:56px;height:56px;border-radius:50%;background:#fffc;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(16,185,129,.3);box-shadow:0 4px 16px #10b98126,0 0 0 1px #10b9811a,inset 0 1px #ffffffe6;cursor:pointer;z-index:1000;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);animation:bounceIn .6s ease-out}.nav-toggle:hover{transform:scale(1.05);box-shadow:0 6px 24px #10b98140,0 0 0 1px #10b98133,inset 0 1px #fff;border-color:#10b98166}.nav-toggle.hidden{opacity:0;pointer-events:none;transform:scale(.5)}.toggle-icon{color:var(--brand-primary);display:flex;align-items:center;justify-content:center;transition:transform .3s ease}.nav-toggle:hover .toggle-icon{transform:rotate(90deg)}.toggle-badge{position:absolute;top:4px;right:4px;width:20px;height:20px;background:linear-gradient(135deg,var(--brand-primary),var(--brand-accent));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;box-shadow:0 2px 8px #10b9814d}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:1001;padding:0 20px 20px;pointer-events:none;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s ease}.bottom-nav.collapsed{transform:translateY(150%);opacity:0;pointer-events:none}.bottom-nav.expanded{transform:translateY(0);opacity:1;pointer-events:all}.bottom-nav-container{max-width:650px;margin:0 auto;background:#ffffffd9;backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border-radius:24px;padding:12px 16px;display:flex;justify-content:space-around;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.8);box-shadow:0 8px 32px #10b9812e,0 0 0 1px #10b98114,inset 0 1px #ffffffe6;pointer-events:all}.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 12px;background:transparent;border:none;border-radius:16px;color:var(--text-secondary);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;cursor:pointer;min-width:60px}.nav-item:hover{background:#10b9811a;transform:translateY(-2px)}.nav-item.active{color:var(--brand-primary);background:linear-gradient(135deg,#10b9812e,#10b9811a)}.nav-item.nav-collapse{flex:0;min-width:auto;padding:8px 16px;color:var(--text-secondary);border-left:1px solid rgba(16,185,129,.15);margin-left:8px}.nav-item.nav-collapse:hover{color:var(--brand-primary);background:#e8ffb386}.nav-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;transition:transform .3s ease}.nav-item.active .nav-icon{transform:scale(1.1)}.nav-label{font-size:12px;font-weight:500;letter-spacing:.2px}.nav-indicator{position:absolute;top:4px;width:4px;height:4px;background:var(--brand-primary);border-radius:50%;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}@media (max-width: 768px){.nav-toggle{width:50px;height:50px;bottom:16px;left:16px}.toggle-badge{width:18px;height:18px;font-size:10px}.bottom-nav{padding:0 12px 12px}.bottom-nav-container{padding:10px 12px;border-radius:20px;max-width:100%}.nav-item{padding:6px 8px;min-width:50px}.nav-label{font-size:11px}.nav-item.nav-collapse{padding:6px 12px}}body{padding-bottom:env(safe-area-inset-bottom)}.app{min-height:100vh;padding:20px 20px 120px;position:relative}.app>*:not(.floating-particles):not(.background-pattern):not(.nav-toggle):not(.bottom-nav){position:relative;z-index:1}.container{max-width:1200px;margin:0 auto;animation:fadeIn .5s ease-out}.tab-content{animation:fadeIn .4s ease-out}.tab-title{font-size:28px;font-weight:700;color:var(--text-primary);margin-bottom:12px;letter-spacing:-.02em}.tab-description{font-size:15px;color:var(--text-secondary);margin-bottom:32px}.analytics-placeholder,.settings-placeholder{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-radius:20px;padding:60px 40px;text-align:center;border:1px solid var(--glass-border);box-shadow:var(--shadow-card);margin-top:40px}.analytics-placeholder p,.settings-placeholder p{font-size:15px;color:var(--text-secondary)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.app{padding:15px 10px 100px}.tab-title{font-size:24px}.analytics-placeholder,.settings-placeholder{padding:40px 20px}}*{margin:0;padding:0;box-sizing:border-box}:root{--brand-primary: #10B981;--brand-accent: #FAD15A;--brand-accent-text: #ff9720;--brand-light-primary: rgb(108, 255, 206);--brand-light-accent: rgb(250, 229, 90);--brand-mint-light: rgba(167, 243, 208, .8);--btn-glass-bg: rgba(255, 255, 255, .5);--btn-glass-hover: rgba(255, 255, 255, .65);--btn-glass-active: rgba(255, 255, 255, .45);--btn-glass-border: rgba(16, 185, 129, .2);--btn-warm-bg: rgba(255, 224, 178, .45);--btn-warm-border: rgba(255, 183, 77, .6);--btn-warm-text: #B45309;--btn-warm-hover: rgba(255, 236, 179, .65);--btn-warm-shadow: 0 6px 24px rgba(255, 167, 38, .18);--button-checked: #fff4d6;--surface-ground: #FDFBF8;--surface-card: rgba(255, 255, 255, .9);--surface-elevated: rgba(255, 255, 255, .95);--text-primary: #111827;--text-secondary: #4B5563;--line-divider: rgba(229, 231, 235, .5);--glass-bg: rgba(255, 255, 255, .5);--glass-bg-hover: rgba(255, 255, 255, .7);--glass-border: rgba(255, 255, 255, .8);--glass-blur: blur(20px) saturate(180%);--liquid-glass-gradient: linear-gradient(135deg, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .1) 100%);--shadow-subtle: 0 2px 16px rgba(16, 185, 129, .06);--shadow-elevated: 0 8px 24px rgba(16, 185, 129, .12);--shadow-button: 0 4px 12px rgba(16, 185, 129, .1);--shadow-card: 0 4px 16px rgba(16, 185, 129, .08)}html{scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar{display:none}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(ellipse 800px 600px at 10% 20%,rgba(16,185,129,.04) 0%,transparent 60%),radial-gradient(circle 500px at 90% 15%,rgba(245,158,11,.03) 0%,transparent 55%),radial-gradient(ellipse 700px 900px at 75% 85%,rgba(251,191,36,.025) 0%,transparent 50%),radial-gradient(circle 400px at 30% 70%,rgba(52,211,153,.03) 0%,transparent 60%),#fdfbf8;background-attachment:fixed;color:var(--text-primary);min-height:100vh}@media (max-width: 768px){body{font-size:16px}}#root{min-height:100vh}button{cursor:pointer;font-family:inherit}input{font-family:inherit}