.modal-content[data-v-2fa7fe2a]{background-color:#fff;padding:2rem;width:100%;max-width:24rem;text-align:center}.modal-header-title[data-v-2fa7fe2a]{font-size:1.25rem;line-height:1.75rem;font-weight:600;color:#8b5cf6;margin-bottom:1rem}.drawing-animation[data-v-2fa7fe2a]{margin-left:auto;margin-right:auto;margin-bottom:1rem;position:relative;width:150px;height:120px}.svg-element[data-v-2fa7fe2a]{width:100%;height:100%}.main-title[data-v-2fa7fe2a]{font-size:1.5rem;line-height:2rem;font-weight:700;color:#1f2937;margin-bottom:.5rem}.status-text[data-v-2fa7fe2a]{color:#6b7280;margin-bottom:1.5rem}.progress-bar-container[data-v-2fa7fe2a]{width:100%;background-color:#e5e7eb;border-radius:9999px;height:.75rem;margin-bottom:1rem;overflow:hidden}.progress-bar-inner[data-v-2fa7fe2a]{height:.75rem;border-radius:9999px;transition:width .5s ease-in-out,background-color .5s ease}.pencil[data-v-2fa7fe2a]{animation:float-2fa7fe2a 2s ease-in-out infinite;transform-origin:bottom right}.line[data-v-2fa7fe2a]{stroke-dasharray:500;stroke-dashoffset:500;animation:draw-2fa7fe2a 3s ease-in-out infinite}@keyframes float-2fa7fe2a{0%,to{transform:translate(0) rotate(-10deg)}50%{transform:translate(-5px,-15px) rotate(0deg)}}@keyframes draw-2fa7fe2a{20%{stroke-dashoffset:500}80%{stroke-dashoffset:0}to{stroke-dashoffset:0}}*{margin:0;padding:0;-webkit-tap-highlight-color:transparent}#app,*{font-family:Ma}#app{background:#f5f5f5;max-width:100vw;height:100vh}.el-overlay{background-color:rgba(0,0,0,.13);bottom:0;height:100%;left:0;overflow:auto;position:fixed;right:0;top:0;z-index:2000}.rounded-message-box{border-radius:20px!important}.paymyyik[data-v-cc2170f6]{border-radius:15px;overflow:hidden}.haert[data-v-cc2170f6]{height:16%;display:flex;justify-content:flex-start;align-items:flex-end;padding:10px 20px;color:#fff;background:linear-gradient(135deg,#5924fb 15%,#9708cc)}.haert .haert_1[data-v-cc2170f6]{width:20%;height:80%;display:flex;justify-content:center;align-items:flex-end}.haert .haert_100px[data-v-cc2170f6]{width:7vw;height:8vh;display:flex;justify-content:flex-end;align-items:center}.haert .haert_2[data-v-cc2170f6]{width:60%;margin-left:10px}.header-left[data-v-cc2170f6]{display:flex;align-items:center}.header-left img[data-v-cc2170f6]{width:30px;height:30px;margin-right:10px}.header-left span[data-v-cc2170f6]{font-size:18px;font-weight:400}.membership-types[data-v-cc2170f6]{display:flex;width:100%;min-height:140px!important;background-color:#f0f0f0}.membership-item[data-v-cc2170f6]{position:relative;display:flex;flex-direction:column;align-items:center;padding:15px 20px;background-color:#f0f0f0;border-radius:10px 10px 0 0;border-right:1px solid #d0d0d0;justify-content:flex-start;width:25%;cursor:pointer;transition:background-color .3s,border-color .3s,color .3s}.membership-item[data-v-cc2170f6]:hover{border-color:#d0d0d0}.membership-item.selected[data-v-cc2170f6]{background-color:#fff;border-color:#fff}.item-icon[data-v-cc2170f6]{width:30px;height:30px;margin-bottom:10px;filter:grayscale(80%);transition:filter .3s}.membership-item.selected .item-icon[data-v-cc2170f6]{filter:grayscale(0)}.item-title[data-v-cc2170f6]{font-size:30px;font-weight:500;margin-bottom:5px;color:#333;transition:color .3s}.item-description[data-v-cc2170f6]{font-size:14px;color:#666;text-align:center;transition:color .3s}.membership-item.selected .item-description[data-v-cc2170f6],.membership-item.selected .item-title[data-v-cc2170f6]{color:#000}.container[data-v-cc2170f6]{padding:20px;height:40vh;overflow-y:auto}.row[data-v-cc2170f6]{display:flex;align-items:flex-start;margin-bottom:20px}.label[data-v-cc2170f6]{min-width:90px;margin-right:15px;font-weight:400;font-size:20px;color:#333;line-height:1.5}.box-container[data-v-cc2170f6]{display:flex;gap:20px;flex-wrap:wrap}.box[data-v-cc2170f6]{width:6vw;min-width:105px;min-height:105px;height:6vw;background-color:#f8f8f8;box-shadow:0 2px 4px rgba(0,0,0,.05)}.box1[data-v-cc2170f6],.box[data-v-cc2170f6]{box-sizing:content-box;padding:15px;border-radius:8px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.box1[data-v-cc2170f6]{border:3px solid #7a59ff;box-shadow:4px 5px 4px rgba(0,0,0,.1)}.box1[data-v-cc2170f6],.box1_1[data-v-cc2170f6]{width:5.8vw;height:5.8vw;min-width:100px;min-height:100px;background-color:#fff}.box1_1[data-v-cc2170f6]{padding:15px;position:relative;border-radius:8px;text-align:center;box-shadow:0 2px 4px rgba(0,0,0,.05);border:3px solid #faa178;box-sizing:content-box;display:flex;flex-direction:column;align-items:center;justify-content:center}.title[data-v-cc2170f6]{font-size:20px;color:#666;margin-bottom:8px}.pricedd[data-v-cc2170f6]{font-size:30px;font-weight:400;color:#333;margin-bottom:5px}.price[data-v-cc2170f6]{font-size:20px;font-weight:400;margin-bottom:5px;color:#333}.price-green[data-v-cc2170f6]{font-size:30px;font-weight:400;display:flex;align-items:baseline;flex-wrap:wrap;justify-content:center}.monthly-price[data-v-cc2170f6]{font-size:12px;color:#999}.erwwl[data-v-cc2170f6]{box-sizing:content-box;background:#fff;padding:20px 2vw;display:flex;align-items:center;justify-content:flex-end;box-shadow:0 -5px 12px rgba(0,0,0,.03)}.erwwl .erwwl_1 p[data-v-cc2170f6]{text-align:right}.erwwl .erwwl_2[data-v-cc2170f6]{margin-left:20px}.erwwl .erwwl_2 div[data-v-cc2170f6]{width:150px;height:40px;background:#0052d9;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}.erwwl .erwwl_23[data-v-cc2170f6]{margin-left:20px}.erwwl .erwwl_23 div[data-v-cc2170f6]{width:150px;height:40px;background:#707070;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}.payment-dialog[data-v-cc2170f6]{border-radius:1rem;background:#fff;padding:20px}.order-info[data-v-cc2170f6],.payment-method[data-v-cc2170f6],.qr-code-section[data-v-cc2170f6]{margin-bottom:15px}.order-item[data-v-cc2170f6]{display:flex;justify-content:flex-start;align-items:center;font-size:14px;color:#333;line-height:1.8}.amount[data-v-cc2170f6],.detail-value[data-v-cc2170f6],.order-number[data-v-cc2170f6]{font-weight:400;color:#000}.detail-button[data-v-cc2170f6]{padding:0;margin-left:10px;font-size:14px;color:#666}.arrow-icon[data-v-cc2170f6]{font-size:12px;margin-left:2px}.order-detail[data-v-cc2170f6]{padding-top:10px}.detail-item[data-v-cc2170f6]{font-size:13px;color:#666;line-height:1.6}.payment-title[data-v-cc2170f6]{font-size:14px;font-weight:400;color:#333;margin-bottom:10px}.payment-options[data-v-cc2170f6]{display:flex;gap:10px}.payment-option[data-v-cc2170f6]{display:flex;align-items:center;padding:8px 15px;border:1px solid #ddd;border-radius:4px;cursor:pointer;transition:border-color .3s}.payment-option[data-v-cc2170f6]:hover{border-color:#999}.payment-option.selected[data-v-cc2170f6]{border-color:#409eff;background-color:#ecf5ff}.selected2[data-v-cc2170f6]{background-color:#f6e5ff}.payment-icon[data-v-cc2170f6]{width:20px;height:20px;margin-right:8px}.payment-text[data-v-cc2170f6]{font-size:14px;color:#333}.payment-option.selected .payment-text[data-v-cc2170f6]{color:#333}.payment-option.selected .selected-icon[data-v-cc2170f6]{color:#409eff;margin-left:5px}.selected-icon[data-v-cc2170f6]{display:none}.payment-option.selected .selected-icon[data-v-cc2170f6]{display:inline-block}.qr-code-section[data-v-cc2170f6]{display:flex;align-items:flex-start;gap:20px}.qr-code-left[data-v-cc2170f6]{text-align:center}.qr-code-img[data-v-cc2170f6],.qr-code-left[data-v-cc2170f6]{display:flex;flex-direction:column;align-items:center;justify-content:center}.qr-code-img[data-v-cc2170f6]{width:180px;height:180px;margin-bottom:10px}.qr-code-text[data-v-cc2170f6]{font-size:14px;color:#333;background-color:#e6f7ff;color:#1890ff;padding:8px 15px;border-radius:4px;display:inline-block}.phone-tip[data-v-cc2170f6]{flex-grow:1;text-align:right}.phone-tip-img[data-v-cc2170f6]{width:150px}.asdkasdj[data-v-cc2170f6]{border:3px solid #7a59ff;box-shadow:4px 5px 4px rgba(0,0,0,.1);background-color:#fff}.asdasd[data-v-cc2170f6]{padding:20px 0}.asdasd[data-v-cc2170f6],.jsdkashf[data-v-699ea048]{display:flex;flex-direction:column;justify-content:center;align-items:center}.jsdkashf[data-v-699ea048]{max-width:100vw;height:100vh;overflow-y:auto;background:#f5f5f5}.container[data-v-699ea048]{max-width:1200px;padding:20px;padding-top:0}.container_1[data-v-699ea048]{background:#f5f5f5}.ddddate[data-v-699ea048]{font-size:.8rem;color:#4f24ff;font-weight:700;display:flex;align-items:center;flex-wrap:wrap}.header[data-v-699ea048]{margin-bottom:20px}.header[data-v-699ea048],.headerdsadas[data-v-699ea048]{display:flex;align-items:center;justify-content:space-between;flex-direction:column;flex-wrap:nowrap;position:relative;width:95vw;max-width:1200px}.headerdsadas[data-v-699ea048]{margin-top:10px}.grade-button1111[data-v-699ea048],.grade-button[data-v-699ea048]{background-color:#f5f5f5;border:none;padding:10px 20px;cursor:pointer;border-radius:5px;font-size:clamp(12px,.9vw,20px)}.grade-button1111[data-v-699ea048]{color:#4f24ff}.grade-button.active[data-v-699ea048]{background-color:#fff;color:#4f24ff;font-weight:700;border:1px solid #ccc;border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;z-index:999}.search[data-v-699ea048]{width:95vw;max-width:1200px;font-size:16px;margin-bottom:10px}.card-wrapper[data-v-699ea048]{max-width:1200px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}.card[data-v-699ea048]{background-color:#fff;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,.1);overflow:hidden;flex:1 1 calc(49% - 20px);max-width:calc(49% - 20px);cursor:pointer}.card-img[data-v-699ea048]{width:100%;height:300px;-o-object-fit:cover;object-fit:cover}.card-content[data-v-699ea048]{padding:20px}.card h3[data-v-699ea048]{margin:0;font-size:1.5rem;color:#333}.date[data-v-699ea048]{color:#777;margin:5px 0}.description[data-v-699ea048]{color:#555}.sub-menu[data-v-699ea048]{width:95vw;max-width:1200px;box-sizing:border-box;background-color:#fff;border:1px solid #ccc;border-radius:5px;padding:10px clamp(9px,.9vw,11px);box-shadow:0 4px 8px rgba(0,0,0,.1);display:flex;flex-direction:row;gap:10px;position:relative;bottom:1px}.sub-menu-item[data-v-699ea048]{padding:10px;border:none;background-color:transparent;cursor:pointer;text-align:left;font-size:clamp(12px,1vw,20px)}.sub-menu-item[data-v-699ea048]:hover{background-color:#f5f5f5}@media(max-width:768px){.card[data-v-699ea048]{flex:1 1 calc(100% - 20px);max-width:100%}.sub-menu[data-v-699ea048]{flex-direction:column;width:100%}}@media(max-width:480px){.header[data-v-699ea048]{flex-direction:column;align-items:flex-start}.search[data-v-699ea048]{margin-left:0;margin-top:10px;width:100%}}.container_2[data-v-699ea048]{width:99vw;height:70px;position:sticky;top:0;background:#fff;display:flex;justify-content:center;align-items:center}.container_2 .container_2_1[data-v-699ea048]{width:98%;display:flex;align-items:center;font-size:2.5rem;font-weight:700;color:#7347e9}.rotating-image[data-v-699ea048]{animation:rotate-animation-699ea048 2s linear infinite;width:150px;height:150px}@keyframes rotate-animation-699ea048{0%{transform:rotate(0deg)}to{transform:rotate(-1turn)}}.el-input-group__prepend[data-v-699ea048],[data-v-699ea048] .el-input-group__append{align-items:center;background-color:#4f24ff;color:#fff}[data-v-699ea048] .el-select__wrapper{min-height:38px}.actidsadve[data-v-699ea048]{background-color:#4f24ff;color:#fff;font-weight:700;border:1px solid #ccc;z-index:999}.active[data-v-699ea048]{background-color:#f6e5ff}.li[data-v-699ea048]:hover{background-color:#f6e5ff;cursor:pointer}.circle-button[data-v-699ea048]{position:relative;width:50px;height:50px;border-radius:50%;border:none;background-color:#fff;color:#000;font-size:18px;font-weight:700;cursor:pointer}:root{--primary-50:#eff6ff;--primary-100:#dbeafe;--primary-200:#bfdbfe;--primary-300:#93c5fd;--primary-400:#60a5fa;--primary-500:#3b82f6;--primary-600:#2563eb;--primary-700:#1d4ed8;--primary-800:#1e40af;--primary-900:#1e3a8a;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--white:#fff;--black:#000;--red-400:#f87171;--red-500:#ef4444;--red-600:#dc2626;--red-700:#b91c1c;--green-600:#16a34a;--green-700:#15803d;--yellow-500:#eab308;--blue-200:#bfdbfe;--blue-400:#60a5fa;--spacing-1:0.25rem;--spacing-2:0.5rem;--spacing-3:0.75rem;--spacing-4:1rem;--spacing-6:1.5rem;--spacing-8:2rem;--spacing-10:2.5rem;--spacing-12:3rem;--spacing-16:4rem;--spacing-24:6rem;--spacing-32:8rem;--spacing-40:10rem;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-xl:1.25rem;--radius-sm:0.125rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-full:9999px;--shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--transition-colors:color 300ms ease-in-out;--transition-all:all 300ms ease-in-out;--transition-transform:transform 300ms ease-in-out}.dark{--bg-primary:var(--gray-900);--bg-secondary:var(--gray-800);--bg-tertiary:var(--gray-700);--text-primary:var(--gray-100);--text-secondary:var(--gray-300);--text-tertiary:var(--gray-400);--border-color:var(--gray-700)}.fixed{position:fixed}.relative{position:relative}.absolute{position:absolute}.top-0{top:0}.left-0{left:0}.right-0{right:0}.bottom-0{bottom:0}.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1}.flex-start{align-items:flex-start}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.flex-shrink-0{flex-shrink:0}.min-h-screen{min-height:100vh}.w-full{width:100%}.w-10{width:var(--spacing-10)}.w-6{width:var(--spacing-6)}.w-5{width:1.25rem}.w-4{width:var(--spacing-4)}.w-3{width:var(--spacing-3)}.h-6{height:var(--spacing-6)}.h-5{height:1.25rem}.h-4{height:var(--spacing-4)}.h-3{height:var(--spacing-3)}.h-8{height:var(--spacing-8)}.h-12{height:var(--spacing-12)}.max-w-4xl{max-width:56rem}.px-1{padding-left:var(--spacing-1);padding-right:var(--spacing-1)}.px-2{padding-left:var(--spacing-2);padding-right:var(--spacing-2)}.px-3{padding-left:var(--spacing-3);padding-right:var(--spacing-3)}.px-4{padding-left:var(--spacing-4);padding-right:var(--spacing-4)}.px-6{padding-left:var(--spacing-6);padding-right:var(--spacing-6)}.px-8{padding-left:var(--spacing-8);padding-right:var(--spacing-8)}.py-1{padding-top:var(--spacing-1);padding-bottom:var(--spacing-1)}.py-2{padding-top:var(--spacing-2);padding-bottom:var(--spacing-2)}.py-3{padding-top:var(--spacing-3);padding-bottom:var(--spacing-3)}.py-4{padding-top:var(--spacing-4);padding-bottom:var(--spacing-4)}.pt-24{padding-top:var(--spacing-24)}.pt-40{padding-top:var(--spacing-40)}.pb-32{padding-bottom:var(--spacing-32)}.mt-1{margin-top:var(--spacing-1)}.mt-2{margin-top:var(--spacing-2)}.mt-3{margin-top:var(--spacing-3)}.mt-4{margin-top:var(--spacing-4)}.mt-12{margin-top:var(--spacing-12)}.mb-2{margin-bottom:var(--spacing-2)}.mb-3{margin-bottom:var(--spacing-3)}.mb-4{margin-bottom:var(--spacing-4)}.space-x-1>*+*{margin-left:var(--spacing-1)}.space-x-2>*+*{margin-left:var(--spacing-2)}.space-x-3>*+*{margin-left:var(--spacing-3)}.space-y-3>*+*{margin-top:var(--spacing-3)}.bg-white{background-color:var(--white)}.bg-gray-50{background-color:var(--gray-50)}.bg-gray-100{background-color:var(--gray-100)}.bg-gray-200{background-color:var(--gray-200)}.bg-gray-300{background-color:var(--gray-300)}.bg-gray-600{background-color:var(--gray-600)}.bg-gray-700{background-color:var(--gray-700)}.bg-gray-800{background-color:var(--gray-800)}.bg-gray-900{background-color:var(--gray-900)}.bg-primary-50{background-color:var(--primary-50)}.bg-primary-100{background-color:var(--primary-100)}.bg-primary-600{background-color:var(--primary-600)}.bg-primary-700{background-color:var(--primary-700)}.bg-primary-900-40{background-color:rgba(30,58,138,.4)}.text-white{color:var(--white)}.text-gray-100{color:var(--gray-100)}.text-gray-300{color:var(--gray-300)}.text-gray-400{color:var(--gray-400)}.text-gray-500{color:var(--gray-500)}.text-gray-600{color:var(--gray-600)}.text-gray-700{color:var(--gray-700)}.text-gray-900{color:var(--gray-900)}.text-primary-400{color:var(--primary-400)}.text-primary-600{color:var(--primary-600)}.text-red-400{color:var(--red-400)}.text-red-500{color:var(--red-500)}.text-yellow-500{color:var(--yellow-500)}.text-blue-200{color:var(--blue-200)}.border{border-width:1px}.border-t{border-top-width:1px}.border-b{border-bottom-width:1px}.border-gray-200{border-color:var(--gray-200)}.border-gray-300{border-color:var(--gray-300)}.border-gray-600{border-color:var(--gray-600)}.border-gray-700{border-color:var(--gray-700)}.border-primary-300{border-color:var(--primary-300)}.border-primary-500{border-color:var(--primary-500)}.border-primary-700{border-color:var(--primary-700)}.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}.text-xl{font-size:var(--text-xl)}.font-medium{font-weight:500}.font-bold{font-weight:700}.leading-relaxed{line-height:1.625}.text-center{text-align:center}.mx-auto{margin-left:auto;margin-right:auto}.rounded{border-radius:var(--radius-sm)}.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-full{border-radius:var(--radius-full)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.transition-colors{transition:var(--transition-colors)}.transition-all{transition:var(--transition-all)}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:ease-in-out}.translate-x-0{transform:translateX(0)}.translate-x-4{transform:translateX(1rem)}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.hover-bg-gray-50:hover{background-color:var(--gray-50)}.hover-bg-gray-100:hover{background-color:var(--gray-100)}.hover-bg-gray-300:hover{background-color:var(--gray-300)}.hover-bg-gray-700:hover{background-color:var(--gray-700)}.hover-bg-primary-600:hover{background-color:var(--primary-600)}.hover-bg-primary-700:hover{background-color:var(--primary-700)}.focus-outline-none:focus{outline:none}.focus-ring-1:focus{box-shadow:0 0 0 1px var(--primary-500)}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}@media (min-width:640px){.sm-px-6{padding-left:var(--spacing-6);padding-right:var(--spacing-6)}}@media (min-width:1024px){.lg-px-8{padding-left:var(--spacing-8);padding-right:var(--spacing-8)}}.dark .bg-gray-900{background-color:var(--gray-900)}.dark .bg-gray-800{background-color:var(--gray-800)}.dark .bg-gray-700{background-color:var(--gray-700)}.dark .bg-gray-600{background-color:var(--gray-600)}.dark .bg-primary-700{background-color:var(--primary-700)}.dark .bg-primary-900-40{background-color:rgba(30,58,138,.4)}.dark .text-gray-100{color:var(--gray-100)}.dark .text-gray-300{color:var(--gray-300)}.dark .text-gray-400{color:var(--gray-400)}.dark .text-gray-500{color:var(--gray-500)}.dark .text-primary-400{color:var(--primary-400)}.dark .text-primary-600{color:var(--primary-600)}.dark .text-red-400{color:var(--red-400)}.dark .border-gray-700{border-color:var(--gray-700)}.dark .border-gray-600{border-color:var(--gray-600)}.dark .border-primary-700{border-color:var(--primary-700)}.dark .hover-bg-gray-700:hover{background-color:var(--gray-700)}.dark .hover-bg-gray-600:hover{background-color:var(--gray-600)}.dark .hover-bg-primary-600:hover{background-color:var(--primary-600)}#app-container{min-height:100vh;background-color:var(--gray-50);display:flex;flex-direction:column;transition:var(--transition-colors)}.dark #app-container{background-color:var(--gray-900)}.app-header{position:fixed;top:0;left:0;right:0;background-color:var(--white);box-shadow:var(--shadow-sm);border-bottom:1px solid var(--gray-200);transition:var(--transition-colors);z-index:40}.dark .app-header{background-color:var(--gray-800);border-bottom-color:var(--gray-700)}.audio-player{position:fixed;bottom:0;left:0;right:0;background-color:var(--white);border-top:1px solid var(--gray-200);box-shadow:var(--shadow-lg);z-index:50;transition:var(--transition-colors)}.dark .audio-player{background-color:var(--gray-800);border-top-color:var(--gray-700)}.progress-bar{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;background:var(--gray-200);border-radius:2px;outline:none}.dark .progress-bar{background:var(--gray-600)}.progress-bar::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--primary-500);border-radius:50%;cursor:pointer}.progress-bar::-moz-range-thumb{width:16px;height:16px;background:var(--primary-500);border-radius:50%;cursor:pointer;border:none}.sentence-card{padding:var(--spacing-4);border-radius:var(--radius-lg);border:1px solid var(--gray-200);cursor:pointer;transition:var(--transition-all)}.sentence-card:hover{background-color:var(--gray-50)}.dark .sentence-card{background-color:var(--gray-800);border-color:var(--gray-700)}.dark .sentence-card:hover{background-color:var(--gray-700)}.sentence-card.active{background-color:var(--primary-50);border-color:var(--primary-300)}.dark .sentence-card.active{background-color:rgba(30,58,138,.2);border-color:var(--primary-700)}.sentence-highlight{animation:highlight .3s ease-in-out}@keyframes highlight{0%{background-color:transparent}50%{background-color:rgba(59,130,246,.2)}to{background-color:rgba(59,130,246,.1)}}.dark .sentence-highlight{animation:highlight-dark .3s ease-in-out}@keyframes highlight-dark{0%{background-color:transparent}50%{background-color:rgba(59,130,246,.3)}to{background-color:rgba(59,130,246,.2)}}.btn-hover{transition:var(--transition-transform)}.btn-hover:hover{transform:translateY(-1px)}.btn-play{padding:var(--spacing-2);border-radius:var(--radius-full);background-color:var(--primary-600);color:var(--white);transition:var(--transition-colors)}.btn-play:hover,.dark .btn-play{background-color:var(--primary-700)}.dark .btn-play:hover{background-color:var(--primary-600)}.btn-stop{padding:var(--spacing-2);border-radius:var(--radius-full);background-color:var(--gray-200);color:var(--gray-700);transition:var(--transition-colors)}.btn-stop:hover{background-color:var(--gray-300)}.dark .btn-stop{background-color:var(--gray-700);color:var(--gray-300)}.dark .btn-stop:hover{background-color:var(--gray-600)}.btn-sentence-play{padding:var(--spacing-2);border-radius:var(--radius-full);transition:var(--transition-colors);background:none}.btn-sentence-play:hover{background-color:var(--gray-100)}.dark .btn-sentence-play:hover{background-color:var(--gray-700)}.btn-retry{margin-top:var(--spacing-4);padding:var(--spacing-4) var(--spacing-4);background-color:var(--primary-600);color:var(--white);border-radius:var(--radius-md);transition:var(--transition-colors)}.btn-retry:hover,.dark .btn-retry{background-color:var(--primary-700)}.dark .btn-retry:hover{background-color:var(--primary-600)}.toggle-switch{display:flex;align-items:flex-start;width:var(--spacing-10);height:var(--spacing-6);background-color:var(--gray-300);border-radius:var(--radius-full);transition:var(--transition-colors);position:relative;padding:var(--spacing-1)}.dark .toggle-switch{background-color:var(--gray-600)}.toggle-switch.active{background-color:var(--primary-600)}.toggle-dot{background-color:var(--white);width:var(--spacing-4);height:var(--spacing-4);border-radius:var(--radius-full);transition:var(--transition-all);box-shadow:var(--shadow-md)}.toggle-dot.active{transform:translateX(1rem)}.sentence-number{flex-shrink:0;width:1.5rem;height:1.5rem;background-color:var(--primary-100);color:var(--primary-600);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);font-weight:500}.dark .sentence-number{background-color:rgba(30,58,138,.4);color:var(--primary-400)}.btn-mode{padding:var(--spacing-2) var(--spacing-1);font-size:var(--text-xs);border-radius:var(--radius-sm);transition:var(--transition-colors);background-color:var(--gray-200);color:var(--gray-700)}.btn-mode:hover{background-color:var(--gray-300)}.btn-mode.active{background-color:var(--primary-600);color:var(--white)}.dark .btn-mode{background-color:var(--gray-700);color:var(--gray-300)}.dark .btn-mode:hover{background-color:var(--gray-600)}.dark .btn-mode.active{background-color:var(--primary-700)}.speed-select{width:4rem;font-size:var(--text-xs);border:1px solid var(--gray-300);background-color:var(--white);color:var(--gray-900);border-radius:var(--radius-sm);padding:var(--spacing-2) var(--spacing-1);text-align:center;transition:var(--transition-colors)}.speed-select:hover{background-color:var(--gray-50)}.speed-select:focus{outline:none;box-shadow:0 0 0 1px var(--primary-500)}.dark .speed-select{border-color:var(--gray-600);background-color:var(--gray-700);color:var(--gray-100)}.dark .speed-select:hover{background-color:var(--gray-600)}.dark .speed-select:focus{box-shadow:0 0 0 1px var(--primary-400)}.speed-dropdown{position:absolute;bottom:100%;right:0;margin-bottom:var(--spacing-2);width:6rem;background-color:var(--white);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);border:1px solid var(--gray-200);z-index:10}.dark .speed-dropdown{background-color:var(--gray-700);border-color:var(--gray-600)}.speed-option{padding:var(--spacing-2);font-size:var(--text-xs);color:var(--gray-700);cursor:pointer;transition:var(--transition-colors)}.speed-option:hover{background-color:var(--gray-100)}.dark .speed-option{color:var(--gray-300)}.dark .speed-option:hover{background-color:var(--gray-600)}.btn-ab-point{padding:var(--spacing-3) var(--spacing-3);font-size:var(--text-xs);background-color:var(--gray-200);color:var(--gray-700);border-radius:var(--radius-sm);transition:var(--transition-colors)}.btn-ab-point:hover{background-color:var(--gray-300)}.btn-ab-point.active{background-color:var(--green-600);color:var(--white)}.btn-ab-point.btn-b.active{background-color:var(--red-600)}.dark .btn-ab-point{background-color:var(--gray-700);color:var(--gray-300)}.dark .btn-ab-point:hover{background-color:var(--gray-600)}.btn-ab-clear{padding:var(--spacing-3) var(--spacing-3);font-size:var(--text-xs);background-color:var(--gray-200);color:var(--gray-700);border-radius:var(--radius-sm);transition:var(--transition-colors)}.btn-ab-clear:hover{background-color:var(--gray-300)}.dark .btn-ab-clear{background-color:var(--gray-700);color:var(--gray-300)}.dark .btn-ab-clear:hover{background-color:var(--gray-600)}.theme-toggle.active{background-color:var(--primary-600)}.theme-dot.active{transform:translateX(1rem)}