refactor(frontend): extract oauth secondary page styles #63

+3 -104

frontend/src/routes/OAuth2FA.svelte

··· 84 84 {/if} 85 85 86 86 <form onsubmit={handleSubmit}> 87 87 - <div class="field"> 87 87 + <div> 88 88 <label for="code">{$_('oauth.twoFactorCode.codeLabel')}</label> 89 89 <input 90 90 id="code" ··· 101 101 </div> 102 102 103 103 <div class="actions"> 104 104 - <button type="button" class="cancel-btn" onclick={handleCancel} disabled={submitting}> 104 104 + <button type="button" class="cancel" onclick={handleCancel} disabled={submitting}> 105 105 {$_('common.cancel')} 106 106 </button> 107 107 - <button type="submit" class="submit-btn" disabled={submitting || code.trim().length !== 6}> 107 107 + <button type="submit" disabled={submitting || code.trim().length !== 6}> 108 108 {submitting ? $_('common.verifying') : $_('common.verify')} 109 109 </button> 110 110 </div> 111 111 </form> 112 112 </div> 113 113 - 114 114 - <style> 115 115 - .oauth-2fa-container { 116 116 - max-width: var(--width-sm); 117 117 - margin: var(--space-9) auto; 118 118 - padding: var(--space-7); 119 119 - } 120 120 - 121 121 - h1 { 122 122 - margin: 0 0 var(--space-2) 0; 123 123 - } 124 124 - 125 125 - .subtitle { 126 126 - color: var(--text-secondary); 127 127 - margin: 0 0 var(--space-7) 0; 128 128 - } 129 129 - 130 130 - form { 131 131 - display: flex; 132 132 - flex-direction: column; 133 133 - gap: var(--space-4); 134 134 - } 135 135 - 136 136 - .field { 137 137 - display: flex; 138 138 - flex-direction: column; 139 139 - gap: var(--space-1); 140 140 - } 141 141 - 142 142 - label { 143 143 - font-size: var(--text-sm); 144 144 - font-weight: var(--font-medium); 145 145 - } 146 146 - 147 147 - input { 148 148 - padding: var(--space-3); 149 149 - border: 1px solid var(--border-color); 150 150 - border-radius: var(--radius-md); 151 151 - font-size: var(--text-xl); 152 152 - letter-spacing: 0.5em; 153 153 - text-align: center; 154 154 - background: var(--bg-input); 155 155 - color: var(--text-primary); 156 156 - } 157 157 - 158 158 - input:focus { 159 159 - outline: none; 160 160 - border-color: var(--accent); 161 161 - } 162 162 - 163 163 - .error { 164 164 - padding: var(--space-3); 165 165 - background: var(--error-bg); 166 166 - border: 1px solid var(--error-border); 167 167 - border-radius: var(--radius-md); 168 168 - color: var(--error-text); 169 169 - margin-bottom: var(--space-4); 170 170 - } 171 171 - 172 172 - .actions { 173 173 - display: flex; 174 174 - gap: var(--space-4); 175 175 - margin-top: var(--space-2); 176 176 - } 177 177 - 178 178 - .actions button { 179 179 - flex: 1; 180 180 - padding: var(--space-3); 181 181 - border: none; 182 182 - border-radius: var(--radius-md); 183 183 - font-size: var(--text-base); 184 184 - cursor: pointer; 185 185 - transition: background-color var(--transition-fast); 186 186 - } 187 187 - 188 188 - .actions button:disabled { 189 189 - opacity: 0.6; 190 190 - cursor: not-allowed; 191 191 - } 192 192 - 193 193 - .cancel-btn { 194 194 - background: var(--bg-secondary); 195 195 - color: var(--text-primary); 196 196 - border: 1px solid var(--border-color); 197 197 - } 198 198 - 199 199 - .cancel-btn:hover:not(:disabled) { 200 200 - background: var(--error-bg); 201 201 - border-color: var(--error-border); 202 202 - color: var(--error-text); 203 203 - } 204 204 - 205 205 - .submit-btn { 206 206 - background: var(--accent); 207 207 - color: var(--text-inverse); 208 208 - } 209 209 - 210 210 - .submit-btn:hover:not(:disabled) { 211 211 - background: var(--accent-hover); 212 212 - } 213 213 - </style>

-88

frontend/src/routes/OAuthAccounts.svelte

··· 146 146 </button> 147 147 {/if} 148 148 </div> 149 149 - 150 150 - <style> 151 151 - .oauth-accounts-container { 152 152 - max-width: var(--width-sm); 153 153 - margin: var(--space-9) auto; 154 154 - padding: var(--space-7); 155 155 - } 156 156 - 157 157 - h1 { 158 158 - margin: 0 0 var(--space-6) 0; 159 159 - } 160 160 - 161 161 - .loading { 162 162 - display: flex; 163 163 - align-items: center; 164 164 - justify-content: center; 165 165 - min-height: 200px; 166 166 - color: var(--text-secondary); 167 167 - } 168 168 - 169 169 - .error-container { 170 170 - text-align: center; 171 171 - } 172 172 - 173 173 - .error { 174 174 - padding: var(--space-3); 175 175 - background: var(--error-bg); 176 176 - border: 1px solid var(--error-border); 177 177 - border-radius: var(--radius-md); 178 178 - color: var(--error-text); 179 179 - margin-bottom: var(--space-4); 180 180 - } 181 181 - 182 182 - .accounts-list { 183 183 - display: flex; 184 184 - flex-direction: column; 185 185 - gap: var(--space-2); 186 186 - margin-bottom: var(--space-4); 187 187 - } 188 188 - 189 189 - .account-item { 190 190 - display: flex; 191 191 - align-items: center; 192 192 - padding: var(--space-4); 193 193 - background: var(--bg-secondary); 194 194 - border: 1px solid var(--border-color); 195 195 - border-radius: var(--radius-xl); 196 196 - cursor: pointer; 197 197 - text-align: left; 198 198 - width: 100%; 199 199 - transition: border-color var(--transition-fast), background var(--transition-fast); 200 200 - } 201 201 - 202 202 - .account-item:hover:not(.disabled) { 203 203 - border-color: var(--accent); 204 204 - background: var(--bg-tertiary); 205 205 - } 206 206 - 207 207 - .account-item.disabled { 208 208 - opacity: 0.6; 209 209 - cursor: not-allowed; 210 210 - } 211 211 - 212 212 - .account-info { 213 213 - display: flex; 214 214 - flex-direction: column; 215 215 - gap: var(--space-1); 216 216 - } 217 217 - 218 218 - .account-handle { 219 219 - font-weight: var(--font-medium); 220 220 - color: var(--text-primary); 221 221 - } 222 222 - 223 223 - .account-email { 224 224 - font-size: var(--text-sm); 225 225 - color: var(--text-secondary); 226 226 - } 227 227 - 228 228 - .different-account { 229 229 - margin-top: var(--space-4); 230 230 - width: 100%; 231 231 - } 232 232 - 233 233 - .different-account { 234 234 - margin-top: var(--space-4); 235 235 - } 236 236 - </style>

+3 -115

frontend/src/routes/OAuthDelegation.svelte

··· 158 158 {/if} 159 159 160 160 <form onsubmit={handleSubmit}> 161 161 - <div class="field"> 161 161 + <div> 162 162 <label for="controller-identifier">{$_('oauthDelegation.controllerHandle')}</label> 163 163 <input 164 164 id="controller-identifier" ··· 172 172 </div> 173 173 174 174 <div class="actions"> 175 175 - <button type="button" class="cancel-btn" onclick={handleCancel} disabled={submitting}> 175 175 + <button type="button" class="cancel" onclick={handleCancel} disabled={submitting}> 176 176 {$_('common.cancel')} 177 177 </button> 178 178 - <button type="submit" class="submit-btn" disabled={submitting || !controllerIdentifier.trim()}> 178 178 + <button type="submit" disabled={submitting || !controllerIdentifier.trim()}> 179 179 {submitting ? $_('oauthDelegation.checking') : $_('common.continue')} 180 180 </button> 181 181 </div> 182 182 </form> 183 183 {/if} 184 184 </div> 185 185 - 186 186 - <style> 187 187 - .delegation-container { 188 188 - max-width: var(--width-md); 189 189 - margin: var(--space-9) auto; 190 190 - padding: var(--space-7); 191 191 - } 192 192 - 193 193 - .loading { 194 194 - display: flex; 195 195 - align-items: center; 196 196 - justify-content: center; 197 197 - min-height: 200px; 198 198 - color: var(--text-secondary); 199 199 - } 200 200 - 201 201 - .page-header { 202 202 - margin-bottom: var(--space-6); 203 203 - } 204 204 - 205 205 - h1 { 206 206 - margin: 0 0 var(--space-2) 0; 207 207 - } 208 208 - 209 209 - .subtitle { 210 210 - color: var(--text-secondary); 211 211 - margin: 0; 212 212 - line-height: 1.6; 213 213 - } 214 214 - 215 215 - form { 216 216 - display: flex; 217 217 - flex-direction: column; 218 218 - gap: var(--space-4); 219 219 - } 220 220 - 221 221 - .field { 222 222 - display: flex; 223 223 - flex-direction: column; 224 224 - gap: var(--space-1); 225 225 - } 226 226 - 227 227 - label { 228 228 - font-size: var(--text-sm); 229 229 - font-weight: var(--font-medium); 230 230 - } 231 231 - 232 232 - input[type="text"] { 233 233 - padding: var(--space-3); 234 234 - border: 1px solid var(--border-color); 235 235 - border-radius: var(--radius-md); 236 236 - font-size: var(--text-base); 237 237 - background: var(--bg-input); 238 238 - color: var(--text-primary); 239 239 - } 240 240 - 241 241 - input:focus { 242 242 - outline: none; 243 243 - border-color: var(--accent); 244 244 - } 245 245 - 246 246 - .error { 247 247 - padding: var(--space-3); 248 248 - background: var(--error-bg); 249 249 - border: 1px solid var(--error-border); 250 250 - border-radius: var(--radius-md); 251 251 - color: var(--error-text); 252 252 - margin-bottom: var(--space-4); 253 253 - } 254 254 - 255 255 - .actions { 256 256 - display: flex; 257 257 - gap: var(--space-4); 258 258 - margin-top: var(--space-2); 259 259 - } 260 260 - 261 261 - .actions button { 262 262 - flex: 1; 263 263 - padding: var(--space-3); 264 264 - border: none; 265 265 - border-radius: var(--radius-md); 266 266 - font-size: var(--text-base); 267 267 - cursor: pointer; 268 268 - transition: background-color var(--transition-fast); 269 269 - } 270 270 - 271 271 - .actions button:disabled { 272 272 - opacity: 0.6; 273 273 - cursor: not-allowed; 274 274 - } 275 275 - 276 276 - .cancel-btn { 277 277 - background: var(--bg-secondary); 278 278 - color: var(--text-primary); 279 279 - border: 1px solid var(--border-color); 280 280 - } 281 281 - 282 282 - .cancel-btn:hover:not(:disabled) { 283 283 - background: var(--error-bg); 284 284 - border-color: var(--error-border); 285 285 - color: var(--error-text); 286 286 - } 287 287 - 288 288 - .submit-btn { 289 289 - background: var(--accent); 290 290 - color: var(--text-inverse); 291 291 - } 292 292 - 293 293 - .submit-btn:hover:not(:disabled) { 294 294 - background: var(--accent-hover); 295 295 - } 296 296 - </style>

-33

frontend/src/routes/OAuthError.svelte

··· 48 48 </button> 49 49 </div> 50 50 </div> 51 51 - 52 52 - <style> 53 53 - h1 { 54 54 - margin: 0 0 var(--space-6) 0; 55 55 - color: var(--error-text); 56 56 - } 57 57 - 58 58 - .error-box { 59 59 - padding: var(--space-6); 60 60 - background: var(--error-bg); 61 61 - border: 1px solid var(--error-border); 62 62 - border-radius: var(--radius-xl); 63 63 - margin-bottom: var(--space-6); 64 64 - } 65 65 - 66 66 - .error-code { 67 67 - font-family: var(--font-mono); 68 68 - font-size: var(--text-base); 69 69 - color: var(--error-text); 70 70 - margin-bottom: var(--space-2); 71 71 - } 72 72 - 73 73 - .error-description { 74 74 - color: var(--text-secondary); 75 75 - font-size: var(--text-sm); 76 76 - } 77 77 - 78 78 - .actions { 79 79 - display: flex; 80 80 - gap: var(--space-3); 81 81 - justify-content: center; 82 82 - } 83 83 - </style>

+2 -103

frontend/src/routes/OAuthPasskey.svelte

··· 127 127 <div class="passkey-status"> 128 128 {#if loading} 129 129 <div class="loading-indicator"> 130 130 - <div class="spinner"></div> 131 130 <p>{t('oauth.passkey.waiting')}</p> 132 131 </div> 133 132 {:else} 134 134 - <button type="button" class="passkey-btn" onclick={startPasskeyAuth} disabled={loading}> 133 133 + <button type="button" style="width: 100%" onclick={startPasskeyAuth} disabled={loading}> 135 134 {t('oauth.passkey.title')} 136 135 </button> 137 136 {/if} 138 137 </div> 139 138 140 139 <div class="actions"> 141 141 - <button type="button" class="cancel-btn" onclick={handleCancel} disabled={loading}> 140 140 + <button type="button" class="secondary" onclick={handleCancel} disabled={loading}> 142 141 {t('common.cancel')} 143 142 </button> 144 143 </div> 145 144 </div> 146 146 - 147 147 - <style> 148 148 - .oauth-passkey-container { 149 149 - max-width: 400px; 150 150 - margin: 4rem auto; 151 151 - padding: 2rem; 152 152 - text-align: center; 153 153 - } 154 154 - 155 155 - h1 { 156 156 - margin: 0 0 1.5rem 0; 157 157 - } 158 158 - 159 159 - .error { 160 160 - padding: 0.75rem; 161 161 - background: var(--error-bg); 162 162 - border: 1px solid var(--error-border); 163 163 - border-radius: 4px; 164 164 - color: var(--error-text); 165 165 - margin-bottom: 1.5rem; 166 166 - text-align: left; 167 167 - } 168 168 - 169 169 - .passkey-status { 170 170 - padding: 2rem; 171 171 - background: var(--bg-secondary); 172 172 - border-radius: 8px; 173 173 - margin-bottom: 1.5rem; 174 174 - } 175 175 - 176 176 - .loading-indicator { 177 177 - display: flex; 178 178 - flex-direction: column; 179 179 - align-items: center; 180 180 - gap: 1rem; 181 181 - } 182 182 - 183 183 - .spinner { 184 184 - width: 40px; 185 185 - height: 40px; 186 186 - border: 3px solid var(--border-color); 187 187 - border-top-color: var(--accent); 188 188 - border-radius: 50%; 189 189 - animation: spin 1s linear infinite; 190 190 - } 191 191 - 192 192 - .loading-indicator p { 193 193 - margin: 0; 194 194 - color: var(--text-secondary); 195 195 - } 196 196 - 197 197 - .passkey-btn { 198 198 - width: 100%; 199 199 - padding: 1rem; 200 200 - background: var(--accent); 201 201 - color: white; 202 202 - border: none; 203 203 - border-radius: 4px; 204 204 - font-size: 1rem; 205 205 - cursor: pointer; 206 206 - transition: background-color 0.15s; 207 207 - } 208 208 - 209 209 - .passkey-btn:hover:not(:disabled) { 210 210 - background: var(--accent-hover); 211 211 - } 212 212 - 213 213 - .passkey-btn:disabled { 214 214 - opacity: 0.6; 215 215 - cursor: not-allowed; 216 216 - } 217 217 - 218 218 - .actions { 219 219 - display: flex; 220 220 - justify-content: center; 221 221 - margin-bottom: 1.5rem; 222 222 - } 223 223 - 224 224 - .cancel-btn { 225 225 - padding: 0.75rem 2rem; 226 226 - background: var(--bg-secondary); 227 227 - color: var(--text-primary); 228 228 - border: 1px solid var(--border-color); 229 229 - border-radius: 4px; 230 230 - font-size: 1rem; 231 231 - cursor: pointer; 232 232 - transition: background-color 0.15s; 233 233 - } 234 234 - 235 235 - .cancel-btn:hover:not(:disabled) { 236 236 - background: var(--error-bg); 237 237 - border-color: var(--error-border); 238 238 - color: var(--error-text); 239 239 - } 240 240 - 241 241 - .cancel-btn:disabled { 242 242 - opacity: 0.6; 243 243 - cursor: not-allowed; 244 244 - } 245 245 - </style>

+3 -182

frontend/src/routes/OAuthSsoRegister.svelte

··· 292 292 293 293 <div class="sso-register-container"> 294 294 {#if loading} 295 295 - <div class="loading"> 296 296 - <div class="spinner"></div> 297 297 - <p>{$_('common.loading')}</p> 298 298 - </div> 295 295 + <div class="loading"></div> 299 296 {:else if error && !pending} 300 297 <div class="error-container"> 301 298 <div class="error-icon">!</div> ··· 324 321 <div class="split-layout sidebar-right"> 325 322 <div class="form-section"> 326 323 <form onsubmit={handleSubmit}> 327 327 - <div class="field"> 324 324 + <div> 328 325 <label for="handle">{$_('sso_register.handle_label')}</label> 329 326 <HandleInput 330 327 value={handle} ··· 478 475 </fieldset> 479 476 480 477 {#if serverInfo?.inviteCodeRequired} 481 481 - <div class="field"> 478 478 + <div> 482 479 <label for="invite-code">{$_('register.inviteCode')} <span class="required">{$_('register.inviteCodeRequired')}</span></label> 483 480 <input 484 481 id="invite-code" ··· 509 506 </div> 510 507 {/if} 511 508 </div> 512 512 - 513 513 - <style> 514 514 - .sso-register-container { 515 515 - max-width: var(--width-lg); 516 516 - margin: var(--space-9) auto; 517 517 - padding: var(--space-7); 518 518 - } 519 519 - 520 520 - .loading { 521 521 - display: flex; 522 522 - flex-direction: column; 523 523 - align-items: center; 524 524 - gap: var(--space-4); 525 525 - padding: var(--space-8); 526 526 - } 527 527 - 528 528 - .loading p { 529 529 - color: var(--text-secondary); 530 530 - } 531 531 - 532 532 - .error-container { 533 533 - text-align: center; 534 534 - padding: var(--space-8); 535 535 - } 536 536 - 537 537 - .error-icon { 538 538 - width: 48px; 539 539 - height: 48px; 540 540 - border-radius: 50%; 541 541 - background: var(--error-text); 542 542 - color: var(--text-inverse); 543 543 - display: flex; 544 544 - align-items: center; 545 545 - justify-content: center; 546 546 - font-size: 24px; 547 547 - font-weight: bold; 548 548 - margin: 0 auto var(--space-4); 549 549 - } 550 550 - 551 551 - .error-container h2 { 552 552 - margin-bottom: var(--space-2); 553 553 - } 554 554 - 555 555 - .error-container p { 556 556 - color: var(--text-secondary); 557 557 - margin-bottom: var(--space-6); 558 558 - } 559 559 - 560 560 - .back-link { 561 561 - color: var(--accent); 562 562 - text-decoration: none; 563 563 - } 564 564 - 565 565 - .back-link:hover { 566 566 - text-decoration: underline; 567 567 - } 568 568 - 569 569 - .page-header { 570 570 - margin-bottom: var(--space-6); 571 571 - } 572 572 - 573 573 - .page-header h1 { 574 574 - margin: 0 0 var(--space-3) 0; 575 575 - } 576 576 - 577 577 - .subtitle { 578 578 - color: var(--text-secondary); 579 579 - margin: 0; 580 580 - } 581 581 - 582 582 - .form-section { 583 583 - min-width: 0; 584 584 - } 585 585 - 586 586 - form { 587 587 - display: flex; 588 588 - flex-direction: column; 589 589 - gap: var(--space-5); 590 590 - } 591 591 - 592 592 - .contact-fields { 593 593 - display: flex; 594 594 - flex-direction: column; 595 595 - gap: var(--space-4); 596 596 - } 597 597 - 598 598 - .contact-fields .field { 599 599 - margin-bottom: 0; 600 600 - } 601 601 - 602 602 - .hint.success { 603 603 - color: var(--success-text); 604 604 - } 605 605 - 606 606 - .hint.error { 607 607 - color: var(--error-text); 608 608 - } 609 609 - 610 610 - .info-panel { 611 611 - background: var(--bg-secondary); 612 612 - border-radius: var(--radius-xl); 613 613 - padding: var(--space-6); 614 614 - } 615 615 - 616 616 - .info-panel h3 { 617 617 - margin: 0 0 var(--space-4) 0; 618 618 - font-size: var(--text-base); 619 619 - font-weight: var(--font-semibold); 620 620 - } 621 621 - 622 622 - .info-list { 623 623 - margin: 0; 624 624 - padding-left: var(--space-5); 625 625 - } 626 626 - 627 627 - .info-list li { 628 628 - margin-bottom: var(--space-2); 629 629 - font-size: var(--text-sm); 630 630 - color: var(--text-secondary); 631 631 - line-height: var(--leading-relaxed); 632 632 - } 633 633 - 634 634 - .info-list li:last-child { 635 635 - margin-bottom: 0; 636 636 - } 637 637 - 638 638 - .provider-info { 639 639 - margin-bottom: var(--space-6); 640 640 - } 641 641 - 642 642 - .provider-badge { 643 643 - display: flex; 644 644 - align-items: center; 645 645 - gap: var(--space-3); 646 646 - padding: var(--space-4); 647 647 - background: var(--bg-secondary); 648 648 - border-radius: var(--radius-md); 649 649 - } 650 650 - 651 651 - .provider-details { 652 652 - display: flex; 653 653 - flex-direction: column; 654 654 - } 655 655 - 656 656 - .provider-name { 657 657 - font-weight: var(--font-semibold); 658 658 - } 659 659 - 660 660 - .provider-username { 661 661 - font-size: var(--text-sm); 662 662 - color: var(--text-secondary); 663 663 - } 664 664 - 665 665 - .required { 666 666 - color: var(--error-text); 667 667 - } 668 668 - 669 669 - button[type="submit"] { 670 670 - margin-top: var(--space-3); 671 671 - } 672 672 - 673 673 - .spinner { 674 674 - width: 32px; 675 675 - height: 32px; 676 676 - border: 3px solid var(--border-color); 677 677 - border-top-color: var(--accent); 678 678 - border-radius: 50%; 679 679 - animation: spin 1s linear infinite; 680 680 - } 681 681 - 682 682 - @keyframes spin { 683 683 - to { 684 684 - transform: rotate(360deg); 685 685 - } 686 686 - } 687 687 - </style>

+3 -122

frontend/src/routes/OAuthTotp.svelte

··· 80 80 {/if} 81 81 82 82 <form onsubmit={handleSubmit}> 83 83 - <div class="field"> 83 83 + <div> 84 84 <label for="code">{$_('oauth.totp.codePlaceholder')}</label> 85 85 <input 86 86 id="code" ··· 110 110 </label> 111 111 112 112 <div class="actions"> 113 113 - <button type="button" class="cancel-btn" onclick={handleCancel} disabled={submitting}> 113 113 + <button type="button" class="cancel" onclick={handleCancel} disabled={submitting}> 114 114 {$_('common.cancel')} 115 115 </button> 116 116 - <button type="submit" class="submit-btn" disabled={submitting || !canSubmit}> 116 116 + <button type="submit" disabled={submitting || !canSubmit}> 117 117 {submitting ? $_('common.verifying') : $_('common.verify')} 118 118 </button> 119 119 </div> 120 120 </form> 121 121 </div> 122 122 - 123 123 - <style> 124 124 - .oauth-totp-container { 125 125 - max-width: var(--width-sm); 126 126 - margin: var(--space-9) auto; 127 127 - padding: var(--space-7); 128 128 - } 129 129 - 130 130 - h1 { 131 131 - margin: 0 0 var(--space-6) 0; 132 132 - } 133 133 - 134 134 - form { 135 135 - display: flex; 136 136 - flex-direction: column; 137 137 - gap: var(--space-4); 138 138 - } 139 139 - 140 140 - .field { 141 141 - display: flex; 142 142 - flex-direction: column; 143 143 - gap: var(--space-1); 144 144 - } 145 145 - 146 146 - label { 147 147 - font-size: var(--text-sm); 148 148 - font-weight: var(--font-medium); 149 149 - } 150 150 - 151 151 - input { 152 152 - padding: var(--space-3); 153 153 - border: 1px solid var(--border-color); 154 154 - border-radius: var(--radius-md); 155 155 - font-size: var(--text-xl); 156 156 - letter-spacing: 0.25em; 157 157 - text-align: center; 158 158 - background: var(--bg-input); 159 159 - color: var(--text-primary); 160 160 - text-transform: uppercase; 161 161 - } 162 162 - 163 163 - input:focus { 164 164 - outline: none; 165 165 - border-color: var(--accent); 166 166 - } 167 167 - 168 168 - .hint { 169 169 - font-size: var(--text-xs); 170 170 - color: var(--text-muted); 171 171 - margin: var(--space-1) 0 0 0; 172 172 - text-align: center; 173 173 - } 174 174 - 175 175 - .error { 176 176 - padding: var(--space-3); 177 177 - background: var(--error-bg); 178 178 - border: 1px solid var(--error-border); 179 179 - border-radius: var(--radius-md); 180 180 - color: var(--error-text); 181 181 - margin-bottom: var(--space-4); 182 182 - } 183 183 - 184 184 - .actions { 185 185 - display: flex; 186 186 - gap: var(--space-4); 187 187 - margin-top: var(--space-2); 188 188 - } 189 189 - 190 190 - .actions button { 191 191 - flex: 1; 192 192 - padding: var(--space-3); 193 193 - border: none; 194 194 - border-radius: var(--radius-md); 195 195 - font-size: var(--text-base); 196 196 - cursor: pointer; 197 197 - transition: background-color var(--transition-fast); 198 198 - } 199 199 - 200 200 - .actions button:disabled { 201 201 - opacity: 0.6; 202 202 - cursor: not-allowed; 203 203 - } 204 204 - 205 205 - .cancel-btn { 206 206 - background: var(--bg-secondary); 207 207 - color: var(--text-primary); 208 208 - border: 1px solid var(--border-color); 209 209 - } 210 210 - 211 211 - .cancel-btn:hover:not(:disabled) { 212 212 - background: var(--error-bg); 213 213 - border-color: var(--error-border); 214 214 - color: var(--error-text); 215 215 - } 216 216 - 217 217 - .submit-btn { 218 218 - background: var(--accent); 219 219 - color: var(--text-inverse); 220 220 - } 221 221 - 222 222 - .submit-btn:hover:not(:disabled) { 223 223 - background: var(--accent-hover); 224 224 - } 225 225 - 226 226 - .trust-device-label { 227 227 - display: flex; 228 228 - align-items: center; 229 229 - gap: var(--space-2); 230 230 - cursor: pointer; 231 231 - font-size: var(--text-sm); 232 232 - color: var(--text-secondary); 233 233 - margin-top: var(--space-2); 234 234 - } 235 235 - 236 236 - .trust-device-label input[type="checkbox"] { 237 237 - width: auto; 238 238 - margin: 0; 239 239 - } 240 240 - </style>