.header{text-align:center;padding:40px 20px 24px}.header__top{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px}.header__title{font-size:1.75rem;font-weight:700;color:#111827;margin:0;display:flex;align-items:center;justify-content:center;gap:10px}.header__icon{font-size:1.6rem}.header__subtitle{font-size:.85rem;font-weight:400;color:#9ca3af;margin-left:4px}.header__lang-toggle{background:#f3f4f6;border:1px solid #d1d5db;color:#374151;font-size:.85rem;font-weight:600;padding:4px 10px;border-radius:16px;cursor:pointer;transition:background .2s,color .2s;line-height:1.4;flex-shrink:0}.header__lang-toggle:hover{background:#e5e7eb;color:#111827}.header__desc{font-size:.95rem;color:#6b7280;margin:0}.header__auth{margin-top:10px;display:flex;align-items:center;justify-content:center}.header__auth-loading{color:#999;font-size:14px}.header__auth-user{display:flex;align-items:center;gap:10px}.header__auth-name{font-weight:500;color:#333;font-size:14px}.header__auth-btn{padding:4px 14px;border-radius:4px;border:1px solid;font-size:13px;cursor:pointer;transition:all .2s;background:none}.header__auth-btn--login{color:#1677ff;border-color:#1677ff}.header__auth-btn--login:hover{background:#1677ff;color:#fff}.header__auth-btn--logout{color:#999;border-color:#ddd}.header__auth-btn--logout:hover{color:#ff4d4f;border-color:#ff4d4f}.text-input-wrapper{position:relative}.text-input{width:100%;padding:14px 16px;border:2px solid #e5e7eb;border-radius:10px;font-size:1rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang HK,Microsoft YaHei,sans-serif;line-height:1.6;resize:vertical;outline:none;transition:border-color .2s ease;background:#fff;color:#1f2937;box-sizing:border-box}.text-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f626}.text-input:disabled{background:#f9fafb;color:#9ca3af;cursor:not-allowed}.text-input::placeholder{color:#9ca3af}.text-input__count{position:absolute;bottom:8px;right:12px;font-size:.75rem;color:#9ca3af;background:#ffffffd9;padding:2px 6px;border-radius:4px}.action-bar{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.btn{padding:10px 24px;border:none;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;transition:background .2s ease,transform .1s ease,opacity .2s ease}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn--primary{background:#3b82f6;color:#fff}.btn--primary:hover:not(:disabled){background:#2563eb}.btn--secondary{background:#f97316;color:#fff}.btn--secondary:hover:not(:disabled){background:#ea580c}.btn--ghost{background:transparent;color:#6b7280;border:1px solid #d1d5db}.btn--ghost:hover:not(:disabled){background:#f3f4f6;color:#374151}.action-bar__align-toggle{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:.9rem;color:#374151;cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color .2s ease,background .2s ease}.action-bar__align-toggle:hover{border-color:#9ca3af;background:#f9fafb}.action-bar__align-toggle input[type=checkbox]{width:16px;height:16px;accent-color:#3b82f6;cursor:pointer;margin:0}.status-indicator{display:flex;align-items:center;gap:8px;font-size:.85rem;padding:8px 0;min-height:36px}.status-indicator--loading{color:#3b82f6}.status-indicator--error{color:#dc2626}.status-indicator--success{color:#16a34a}.status-indicator__icon{font-size:1rem}.spinner{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.input-section{background:#fff;border-radius:16px;padding:24px;box-shadow:0 1px 3px #0000000f}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:#9ca3af}.empty-state__icon{font-size:3rem;margin-bottom:16px;opacity:.6}.empty-state__title{font-size:1rem;font-weight:500;margin:0 0 8px;color:#6b7280}.empty-state__hint{font-size:.85rem;margin:0;color:#9ca3af}.tone-chip{display:inline-flex;flex-direction:column;align-items:center;padding:4px 6px;border-radius:8px;min-width:40px;transition:transform .15s ease,background .15s ease}.tone-chip:hover{transform:translateY(-2px)}.tone-chip__jyutping{font-size:.75rem;font-weight:500;line-height:1.2}.tone-chip__char{font-size:1.25rem;font-weight:600;color:#1f2937;line-height:1.3}.tone-0{background:#f3f4f6}.tone-0 .tone-chip__jyutping{color:#9ca3af}.tone-1{background:#1e40af14}.tone-1 .tone-chip__jyutping{color:#1e40af}.tone-2{background:#3b82f614}.tone-2 .tone-chip__jyutping{color:#3b82f6}.tone-3{background:#93c5fd1f}.tone-3 .tone-chip__jyutping{color:#93c5fd}.tone-4{background:#c2410c14}.tone-4 .tone-chip__jyutping{color:#c2410c}.tone-5{background:#f9731614}.tone-5 .tone-chip__jyutping{color:#f97316}.tone-6{background:#fdba741f}.tone-6 .tone-chip__jyutping{color:#fdba74}.segment-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px 20px;box-shadow:0 1px 3px #0000000a;transition:box-shadow .2s ease}.segment-card:hover{box-shadow:0 4px 12px #00000014}.segment-card__chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.segment-card__jyutping-row{font-size:.85rem;color:#6b7280;letter-spacing:.5px;padding-top:8px;border-top:1px solid #f3f4f6}.output-section{min-height:200px}.output-section__results{display:flex;flex-direction:column;gap:16px}.token-usage{font-size:.8rem;color:#9ca3af;white-space:nowrap}.token-usage strong{font-weight:600;color:#6b7280}.token-usage--loading{color:#d1d5db}.token-usage--high{color:#f59e0b}.token-usage--high strong{color:#d97706}.app{max-width:720px;margin:0 auto;padding:0 20px 60px}.main-layout{display:flex;flex-direction:column;gap:24px}.app-footer{text-align:center;padding:32px 0 16px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang HK,Microsoft YaHei,Noto Sans HK,sans-serif;background:linear-gradient(135deg,#f0f4ff,#fef9f0,#f5f5f5);color:#1f2937;min-height:100vh}@media (max-width: 768px){.app{padding:0 12px 40px}}