.font-selector-container{width:100%;display:inline-block;position:relative}.font-selector-trigger{background:var(--bg-input,#fffc);border:1px solid var(--border-color,#0000001a);width:100%;height:38px;color:var(--color-text,#1e293b);cursor:pointer;box-sizing:border-box;border-radius:8px;outline:none;justify-content:space-between;align-items:center;padding:0 12px;font-family:inherit;font-size:13px;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex}.dark-mode .font-selector-trigger{background:var(--bg-input,#1e293b99);border-color:var(--border-color,#ffffff14);color:var(--color-text,#f1f5f9)}.font-selector-trigger:hover{border-color:var(--color-primary,#4a90e2);background:var(--bg-input-hover,#fffffff2);box-shadow:0 2px 8px #0000000d}.dark-mode .font-selector-trigger:hover{background:var(--bg-input-hover,#1e293bcc);box-shadow:0 2px 8px #0000004d}.font-selector-container.is-open .font-selector-trigger{border-color:var(--color-primary,#4a90e2);box-shadow:0 0 0 2px #4a90e226}.trigger-content{flex:1;align-items:center;gap:8px;min-width:0;display:flex}.font-icon{opacity:.65;flex-shrink:0;font-size:15px}.selected-font-name{white-space:nowrap;text-overflow:ellipsis;text-align:left;font-weight:500;overflow:hidden}.trigger-actions{flex-shrink:0;align-items:center;gap:6px;display:flex}.clear-action{opacity:.4;padding:2px;font-size:13px;transition:opacity .2s,transform .2s}.clear-action:hover{opacity:.85;color:#ef4444;transform:scale(1.15)}.arrow-icon{opacity:.5;font-size:15px;transition:transform .25s cubic-bezier(.16,1,.3,1)}.font-selector-container.is-open .arrow-icon{transform:rotate(180deg)}.font-dropdown-panel{-webkit-backdrop-filter:blur(20px);z-index:10001;color:#1e293b;box-sizing:border-box;background:#f1f5f9f7;border:1px solid #0000001f;border-radius:14px;flex-direction:column;gap:12px;max-width:calc(100vw - 24px);max-height:430px;padding:14px;display:flex;position:fixed;box-shadow:0 12px 32px #00000029,0 1px 3px #0000000f;container-type:inline-size}.dark-mode .font-dropdown-panel{color:#f1f5f9;background:#141821f5;border:1px solid #ffffff14;box-shadow:0 12px 36px #0000008c,0 2px 8px #0000004d}.dropdown-header{text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid #0000000f;justify-content:space-between;align-items:center;padding:2px 4px 6px;font-size:12px;font-weight:700;display:flex}.dark-mode .dropdown-header{border-bottom:1px solid #ffffff17}.clear-font-btn{color:#ef4444;cursor:pointer;background:#ef44440f;border:1px solid #ef444424;border-radius:100px;align-items:center;gap:4px;padding:4px 10px;font-size:11px;font-weight:600;transition:all .2s;display:flex}.clear-font-btn:hover{background:#ef44441f;border-color:#ef444440;transform:scale(1.02)}.dropdown-actions-toolbar{gap:6px;padding:0 2px;display:flex}.action-btn{color:#334155;cursor:pointer;background:#fff;border:1px solid #0000001f;border-radius:9px;outline:none;flex:1;justify-content:center;align-items:center;gap:6px;height:34px;font-size:12px;font-weight:500;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex}.action-btn:hover{color:var(--color-primary,#4a90e2);background:#4a90e214;border-color:#4a90e24d;transform:translateY(-.5px)}.dark-mode .action-btn{color:#94a3b8;background:#ffffff09;border-color:#ffffff0f}.dark-mode .action-btn:hover{color:#60a5fa;background:#4a90e21f;border-color:#4a90e266;box-shadow:0 0 8px #4a90e226}.action-btn-online{position:relative;overflow:visible}.action-btn-online:before{content:"";border-radius:inherit;-webkit-mask-composite:xor;pointer-events:none;background:linear-gradient(90deg,#3b82f6,#06b6d4,#60a5fa,#93c5fd,#3b82f6) 0 0/300% 100%;padding:1.5px;animation:2.4s linear infinite online-border-flow;position:absolute;top:-1.5px;bottom:-1.5px;left:-1.5px;right:-1.5px;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.action-btn-online:hover:before{animation-duration:1.2s}@keyframes online-border-flow{0%{background-position:0%}to{background-position:300%}}.dropdown-preview-input-wrapper{box-sizing:border-box;background:#fff;border:1px solid #0000001f;border-radius:9px;align-items:center;height:34px;padding:0 10px;display:flex;position:relative}.dark-mode .dropdown-preview-input-wrapper{background:#0000004d;border-color:#ffffff0f}.preview-input-icon{opacity:.5;flex-shrink:0;justify-content:center;align-items:center;margin-right:8px;font-size:17px;display:inline-flex}.preview-input{color:inherit;background:0 0;border:none;outline:none;flex:1;width:100%;height:100%;padding:0;font-size:13px}.preview-input::placeholder{color:#0000006b}.dark-mode .preview-input::placeholder{color:#ffffff61}.preview-input-clear{opacity:.4;cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;padding:2px;font-size:15px;transition:all .2s;display:inline-flex}.preview-input-clear:hover{opacity:.85;color:#ef4444}.dropdown-body{flex-direction:column;flex:1;gap:14px;max-height:260px;padding-right:6px;display:flex;overflow-y:auto}.scrollbar-thin::-webkit-scrollbar{width:4px}.scrollbar-thin::-webkit-scrollbar-track{background:0 0}.scrollbar-thin::-webkit-scrollbar-thumb{background:#00000014;border-radius:10px}.dark-mode .scrollbar-thin::-webkit-scrollbar-thumb{background:#ffffff1f}.font-group-section{flex-direction:column;gap:8px;display:flex}.font-group-label{color:#475569;text-transform:uppercase;letter-spacing:.06em;padding:0 6px;font-size:11px;font-weight:700}.dark-mode .font-group-label{color:#94a3b8}.font-items-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;display:grid}.font-items-grid.is-single-column{grid-template-columns:1fr}.font-card-actions{-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;z-index:2;background:#f8fafcf5;border:1px solid #0000001f;border-radius:8px;flex-shrink:0;align-items:center;gap:2px;padding:2px 4px;transition:opacity .16s;display:flex;position:absolute;top:50%;right:4px;transform:translateY(-50%);box-shadow:0 2px 8px #0000001a}.font-item-card:hover .font-card-actions{opacity:1;pointer-events:auto}.font-card-actions .font-fav-btn,.font-card-actions .font-edit-btn{opacity:1}.dark-mode .font-card-actions{background:#1e293be6;border-color:#ffffff1f;box-shadow:0 2px 8px #0000004d}.font-item-card.is-fav:after{content:"";pointer-events:none;z-index:1;background:#f59e0b;border-radius:50%;width:7px;height:7px;position:absolute;top:4px;right:4px;box-shadow:0 0 0 2px #ffffffe6}.dark-mode .font-item-card.is-fav:after{box-shadow:0 0 0 2px #0f172ae6}.font-weight-badge{background:var(--color-primary,#4a90e2);color:#fff;vertical-align:middle;border-radius:100px;flex-shrink:0;margin-left:6px;padding:0 6px;font-size:9px;font-weight:600;line-height:15px;display:inline-block}.font-variable-badge{color:#3b82f6;vertical-align:middle;background:#3b82f61a;border:1px solid #3b82f68c;border-radius:100px;flex-shrink:0;margin-left:6px;padding:0 7px;font-size:9px;font-weight:700;line-height:13px;display:inline-block}.dark-mode .font-variable-badge{color:#93c5fd;background:#3b82f629;border-color:#60a5fa99}.font-weight-list-badge{color:#8b5cf6;vertical-align:middle;background:#8b5cf61a;border:1px solid #8b5cf68c;border-radius:100px;flex-shrink:0;margin-left:6px;padding:0 7px;font-size:9px;font-weight:700;line-height:13px;display:inline-block}.dark-mode .font-weight-list-badge{color:#c4b5fd;background:#8b5cf629;border-color:#a78bfa99}.font-weight-menu-backdrop{z-index:10020;background:0 0;position:fixed;top:0;bottom:0;left:0;right:0}.font-weight-menu{z-index:10021;box-sizing:border-box;background:#fffffff7;border:1px solid #0000001a;border-radius:10px;max-height:320px;padding:6px;position:fixed;overflow-y:auto;box-shadow:0 12px 32px #0000002e,0 2px 8px #0000000f}.dark-mode .font-weight-menu{background:#161b26fa;border-color:#ffffff1a;box-shadow:0 14px 40px #0000008c}.font-weight-menu-title{color:#475569;border-bottom:1px solid #0000000f;margin-bottom:4px;padding:4px 8px 6px;font-size:11px;font-weight:700}.dark-mode .font-weight-menu-title{color:#94a3b8;border-bottom-color:#ffffff14}.font-weight-menu-item{cursor:pointer;border-radius:8px;align-items:center;gap:10px;min-width:0;padding:8px 10px;transition:background .15s;display:flex}.font-weight-menu-item:hover{background:#4a90e214}.font-weight-menu-item.active{background:var(--color-primary,#4a90e2);color:#fff}.dark-mode .font-weight-menu-item.active{color:#60a5fa;background:#3b82f640}.font-weight-menu-variant{color:var(--color-primary,#4a90e2);background:#4a90e21f;border-radius:100px;flex-shrink:0;padding:2px 8px;font-size:10px;font-weight:700}.font-weight-menu-item.active .font-weight-menu-variant{color:#fff;background:#ffffff40}.font-weight-menu-family{white-space:nowrap;text-overflow:ellipsis;min-width:0;font-size:12.5px;overflow:hidden}.font-weight-menu-preview{white-space:nowrap;text-overflow:ellipsis;max-width:64px;color:inherit;opacity:.92;flex-shrink:0;margin-left:auto;font-size:16px;line-height:1;overflow:hidden}.font-weight-menu-item.active .font-weight-menu-preview{color:#fff;opacity:1}.font-weight-menu-preview-text{white-space:nowrap;text-overflow:ellipsis;min-width:0;color:inherit;flex:1;font-size:13px;font-weight:500;line-height:1.2;overflow:hidden}.font-weight-menu-item.active .font-weight-menu-preview-text{color:#fff}.variable-weight-control{padding:10px 12px 12px}.variable-weight-slider{accent-color:#3b82f6;cursor:pointer;width:100%;margin:0}.variable-weight-scale{color:#64748b;justify-content:space-between;align-items:center;margin-top:4px;font-size:10px;display:flex}.variable-weight-scale .variable-weight-value{color:#3b82f6;font-size:13px;font-weight:700}.dark-mode .variable-weight-scale{color:#94a3b8}.dark-mode .variable-weight-scale .variable-weight-value{color:#93c5fd}.font-item-card{cursor:pointer;box-sizing:border-box;background:#fff;border:1px solid #0000000f;border-radius:9px;align-items:center;gap:8px;padding:5px 8px;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex;position:relative;overflow:hidden}.dark-mode .font-item-card{color:#ffffffe6;background:#ffffff0d;border:1px solid #ffffff14}.font-item-card:hover{background:#fff;border-color:#4a90e273;box-shadow:0 2px 8px #00000014}.font-item-card.flash-new{animation:2.4s ease-in-out font-card-flash}@keyframes font-card-flash{0%{outline-offset:-1px;outline:2px solid #4a90e2e6;box-shadow:0 0 0 4px #4a90e259,0 4px 16px #4a90e24d}45%{outline-offset:-1px;outline:2px solid #4a90e240;box-shadow:0 0 0 4px #4a90e214}70%{outline-offset:-1px;outline:2px solid #4a90e2d9;box-shadow:0 0 0 4px #4a90e24d,0 4px 16px #4a90e240}to{outline:2px solid #0000;box-shadow:0 0 0 4px #4a90e200}}.dark-mode .font-item-card:hover{color:#fff;background:#ffffff17;border-color:#60a5fa66}.font-item-card.active{box-shadow:0 4px 12px #4a90e24d;background:var(--color-primary,#4a90e2)!important;color:#fff!important;border-color:var(--color-primary,#4a90e2)!important}.dark-mode .font-item-card.active{color:#60a5fa!important;background:#3b82f624!important;border-color:#60a5fa8c!important;box-shadow:0 0 12px #3b82f640!important}.font-preview-char{white-space:nowrap;background:#0000000f;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:26px;height:26px;font-size:14px;font-weight:500;transition:all .2s;display:flex;overflow:hidden}.dark-mode .font-preview-char{color:#fffffff2;background:#ffffff12}.font-item-card.active .font-preview-char{color:#fff;background:#fff3}.dark-mode .font-item-card.active .font-preview-char{color:#60a5fa!important;background:#3b82f640!important}.font-preview-char.has-custom-text{box-sizing:border-box;flex:auto;width:auto;min-width:0;max-width:65%;height:auto;min-height:26px;padding:3px 5px;font-size:11px;line-height:1.35}.font-preview-char .preview-char-inner{white-space:normal;overflow-wrap:break-word;text-align:center;max-width:100%;display:inline-block}.font-info{text-align:left;flex-direction:column;flex:1;gap:0;min-width:0;display:flex}.font-name{white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:600;line-height:1.25;overflow:hidden}.font-family-name{opacity:.7;flex-wrap:wrap;align-items:center;row-gap:4px;min-width:0;font-size:9px;line-height:1.3;display:flex}.family-name-scroll{flex:auto;min-width:0;max-width:100%;overflow:hidden}.family-name-scroll .family-name-inner{text-overflow:ellipsis;white-space:nowrap;max-width:100%;display:inline-block;overflow:hidden}.family-name-scroll.is-overflow .family-name-inner{text-overflow:clip;max-width:none;padding-right:20px;animation:5s linear infinite alternate font-name-marquee}@keyframes font-name-marquee{0%,12%{transform:translate(0)}88%,to{transform:translateX(calc(-1 * var(--marquee-x,40px)))}}.font-item-card.active .font-family-name{opacity:.9}.font-edit-btn{color:#475569;cursor:pointer;opacity:.5;background:#0000000a;border:none;border-radius:7px;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;padding:0;transition:all .18s cubic-bezier(.16,1,.3,1);display:inline-flex}.font-edit-btn:hover{opacity:1;color:var(--color-primary,#4a90e2);background:#4a90e224}.dark-mode .font-edit-btn{color:#94a3b8;background:#ffffff14}.dark-mode .font-edit-btn:hover{color:#60a5fa;background:#60a5fa33}.font-del-btn:hover{color:#ef4444!important;background:#ef444424!important}.dark-mode .font-del-btn:hover{color:#f87171!important;background:#ef444438!important}.font-fav-btn{color:#475569;cursor:pointer;opacity:.5;background:#0000000a;border:none;border-radius:7px;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;padding:0;transition:all .18s cubic-bezier(.16,1,.3,1);display:inline-flex}.font-fav-btn:hover{opacity:1;color:#f59e0b;background:#facc1529}.font-fav-btn.is-fav{opacity:1;color:#f59e0b;background:#facc1524}.font-item-card.active .font-fav-btn.is-fav{color:#ffd60a;background:#facc153d}.dark-mode .font-fav-btn{color:#94a3b8;background:#ffffff14}.dark-mode .font-fav-btn:hover{color:#fbbf24;background:#facc152e}.dark-mode .font-fav-btn.is-fav{color:#fbbf24;background:#facc1529}.font-edit-overlay{-webkit-backdrop-filter:blur(3px);z-index:10002;background:#0006;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.font-edit-modal{box-sizing:border-box;background:#fff;border-radius:14px;flex-direction:column;gap:12px;width:320px;max-width:100%;padding:18px;display:flex;box-shadow:0 14px 44px #00000038,0 2px 8px #00000014}.dark-mode .font-edit-modal{background:#161b26;border:1px solid #ffffff14}.font-edit-header{color:#1e293b;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;display:flex}.dark-mode .font-edit-header{color:#f1f5f9}.font-edit-close{opacity:.45;cursor:pointer;border-radius:6px;padding:2px;font-size:18px;transition:all .18s}.font-edit-close:hover{opacity:1;color:#ef4444;background:#ef44441a}.font-edit-preview{text-align:center;color:#1e293b;padding:8px 0 2px;font-size:40px;line-height:1.15}.dark-mode .font-edit-preview{color:#f1f5f9}.font-edit-family-name{text-align:center;color:#64748b;opacity:.75;word-break:break-all;margin-bottom:2px;font-size:11px}.font-edit-field{flex-direction:column;gap:5px;display:flex}.font-edit-label{color:#475569;font-size:11px;font-weight:600}.dark-mode .font-edit-label{color:#94a3b8}.font-edit-input,.font-edit-textarea{box-sizing:border-box;color:#1e293b;background:#00000008;border:1px solid #00000014;border-radius:8px;outline:none;width:100%;padding:8px 10px;font-family:inherit;font-size:12px;transition:border-color .2s,box-shadow .2s}.font-edit-textarea{resize:vertical;min-height:56px}.font-edit-input:focus,.font-edit-textarea:focus{border-color:var(--color-primary,#4a90e2);box-shadow:0 0 0 2px #4a90e226}.dark-mode .font-edit-input,.dark-mode .font-edit-textarea{color:#f1f5f9;background:#00000059;border-color:#ffffff14}.font-edit-input::placeholder,.font-edit-textarea::placeholder{color:#0000004d}.dark-mode .font-edit-input::placeholder,.dark-mode .font-edit-textarea::placeholder{color:#ffffff47}.font-edit-actions{justify-content:flex-end;gap:8px;margin-top:4px;display:flex}.font-edit-cancel,.font-edit-save{cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:4px;height:32px;padding:0 14px;font-size:12px;font-weight:600;transition:all .2s cubic-bezier(.16,1,.3,1);display:inline-flex}.font-edit-cancel{color:#64748b;background:#0000000d}.font-edit-cancel:hover{background:#0000001a}.font-edit-save{background:var(--color-primary,#4a90e2);color:#fff;box-shadow:0 4px 12px #4a90e24d}.font-edit-save:hover{filter:brightness(1.08);transform:translateY(-.5px)}.dark-mode .font-edit-cancel{color:#94a3b8;background:#ffffff14}.dark-mode .font-edit-cancel:hover{background:#ffffff24}.slide-fade-enter-active{transition:all .22s cubic-bezier(.16,1,.3,1)}.slide-fade-leave-active{transition:all .18s cubic-bezier(.16,1,.3,1)}.slide-fade-enter-from,.slide-fade-leave-to{opacity:0;transform:translateY(6px)scale(.97)}@media (max-width:576px){.font-dropdown-panel.is-mobile-panel{z-index:100000;padding-bottom:env(safe-area-inset-bottom,24px);position:fixed;top:auto;bottom:0;left:0;right:0;box-shadow:0 -8px 24px #00000026;border-bottom:none!important;border-radius:18px 18px 0 0!important;width:100%!important;max-width:100%!important;max-height:64vh!important;transform:none!important}.font-selector-overlay-mask{-webkit-backdrop-filter:blur(3px);z-index:99999;background:#00000059;animation:.2s ease-out fadeIn;position:fixed;top:0;bottom:0;left:0;right:0}.dropdown-body{max-height:44vh!important}.font-items-grid{grid-template-columns:1fr}.font-card-actions{opacity:1;pointer-events:auto;box-shadow:none;-webkit-backdrop-filter:none;background:0 0;margin-left:auto;padding:0;position:static;transform:none}.font-item-card.is-fav:after{display:none}.font-card-actions .font-fav-btn,.font-card-actions .font-edit-btn{opacity:.85;width:28px;height:28px}.slide-fade-enter-active,.slide-fade-leave-active{transition:transform .28s cubic-bezier(.16,1,.3,1)!important}.slide-fade-enter-from,.slide-fade-leave-to{opacity:1!important;transform:translateY(100%)!important}}@media (hover:none) and (min-width:577px){.font-items-grid{grid-template-columns:1fr}.font-card-actions{opacity:1;pointer-events:auto;box-shadow:none;-webkit-backdrop-filter:none;background:0 0;margin-left:auto;padding:0;position:static;transform:none}.font-item-card.is-fav:after{display:none}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@container (width<=296px){.font-dropdown-panel:not(.is-mobile-panel) .font-items-grid:not(.is-single-column){grid-template-columns:1fr}}@container (width>=432px){.font-dropdown-panel:not(.is-mobile-panel) .font-items-grid:not(.is-single-column){grid-template-columns:repeat(3,minmax(0,1fr))}}