* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; padding: 10px 12px 78px; background: #f4f6f8; color: #4e6280; font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
a { color: inherit; }
.system-settings-button, .back-home-button { min-height: 41px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 6px; font-weight: 600; text-decoration: none; }
.system-settings-button { width: 100%; margin-bottom: 10px; border: 0; background: #3198e8; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
button.system-settings-button { width: 100% !important; }
.system-settings-button--load { margin-bottom: 16px; }
.back-home-button { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 20; margin: 0; background: #e8edf2; color: #26364c; }
.account-panel { width: 100%; overflow: hidden; border: 1px solid #d8dee5; border-radius: 7px; background: #fff; box-shadow: 0 2px 4px rgba(34,47,62,.14); }
.account-panel + .account-panel { margin-top: 16px; }
.account-panel__header { min-height: 48px; display: flex; align-items: center; padding: 0 15px; border-bottom: 1px solid #d9e0e7; }
.account-panel__header h1 { margin: 0; color: #26364c; font-size: 16px; font-weight: 600; }
.account-panel__header i { margin-right: 8px; color: #48a7eb; }
.account-panel__body, .account-form__body { padding: 17px 15px 15px; }
.account-panel__empty { margin: 10px 0 17px; text-align: center; color: #526987; font-size: 13px; }
.account-results { margin-bottom: 17px; }
.code-results { margin: 0 0 17px; padding: 12px; border: 1px solid #b9dff7; border-radius: 7px; background: #f1f9ff; }
.code-results__title { margin: 0 0 10px; color: #1d608f; font-weight: 700; }
.code-results .account-data:last-child { margin-bottom: 0; }
.account-data + .account-data { margin-top: 10px; }
.account-data__label, .account-form__hint, .mail-method { margin: 0 0 7px; color: #526987; }
.account-data__value { min-height: 38px; display: flex; align-items: center; gap: 8px; position: relative; padding: 8px 48px 8px 12px; border-radius: 6px; background: #e8edf2; color: #26364c; }
.account-data__part { overflow-wrap: anywhere; }
.account-data__countdown { margin-left: auto; color: #526987; font-size: 12px; white-space: nowrap; }
.account-data__copy { width: 47px; height: 38px; position: absolute; top: 0; right: 0; border: 0; border-left: 1px solid #d8dee5; border-radius: 0 6px 6px 0; background: #f8f9fa; color: #26364c; cursor: pointer; }
.account-panel__actions { display: grid; gap: 8px; }
.account-button, .save-settings { min-height: 41px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 6px; background: #4ba7ec; color: #fff; font-family: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.account-button:disabled { cursor: wait; opacity: .75; }
.account-button__spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: account-spin .7s linear infinite; }
@keyframes account-spin { to { transform: rotate(360deg); } }
.account-form__input { width: 100%; min-height: 122px; display: block; resize: vertical; padding: 10px; border: 1px solid #d8dee5; border-radius: 6px; background: #f8f9fa; color: #26364c; font: inherit; }
.account-form__save, .save-settings { width: 100%; margin-top: 16px; }
.saved-accounts { margin-top: 20px; padding-top: 18px; border-top: 1px solid #e2e8f0; }
.saved-accounts__title { margin: 0 0 12px; color: #1f334d; font-size: 15px; font-weight: 700; }
.saved-accounts__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid #dde6ef; border-radius: 8px; background: #f8fafc; }
.saved-accounts__select-all { display: flex; align-items: center; gap: 8px; color: #3d536e; font-weight: 600; cursor: pointer; }
.saved-accounts__select-all input, .saved-account__checkbox { width: 16px; height: 16px; margin: 0; accent-color: #2479f2; }
.saved-accounts__delete-selected { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 12px; border: 0; border-radius: 6px; background: #dc3545; color: #fff; font: inherit; font-weight: 600; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.saved-accounts__delete-selected:hover:not(:disabled) { background: #bd2130; transform: translateY(-1px); }
.saved-accounts__delete-selected:disabled { background: #d8e0e8; color: #8a9aab; cursor: not-allowed; }
.saved-account { min-height: 52px; display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 40px; align-items: center; gap: 10px; margin-top: 8px; padding: 6px 8px; border: 1px solid #e0e7ef; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(31,51,77,.05); transition: border-color .15s ease, box-shadow .15s ease; }
.saved-account:has(.saved-account__checkbox:checked) { border-color: #8bc5f0; background: #f2f9ff; box-shadow: 0 2px 5px rgba(49,152,232,.12); }
.saved-account__number { min-width: 0; color: #57708c; font-weight: 700; text-align: center; }
.saved-account > .account-data__part { min-width: 0; padding: 8px 10px; overflow-wrap: anywhere; color: #26364c; line-height: 1.45; }
.saved-account > .account-data__copy { width: 40px; height: 38px; position: relative; top: auto; right: auto; border: 1px solid #f1c2c7; border-radius: 6px; background: #fff5f5; color: #c0394b; }
.saved-account__remove:hover { border-color: #e89aa6; background: #fbe1e4; color: #9e2637; }
.quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.quick-action { min-height: 86px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 6px; background: #f7f8fa; color: #26364c; text-decoration: none; }
.quick-action i { color: #4ba7ec; font-size: 28px; }
.settings-panel__body { padding: 17px 15px 15px; }
.mail-method { display: flex; align-items: center; gap: 8px; }
.mail-method input { width: 16px; height: 16px; margin: 0; accent-color: #2479f2; }
.copied-notice { position: fixed; right: 16px; bottom: 16px; z-index: 10; padding: 10px 16px; border-radius: 6px; background: #26364c; color: #fff; font-weight: 600; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .15s ease, transform .15s ease; }
.copied-notice--visible { opacity: 1; transform: translateY(0); }
.status-notice { position: fixed; top: 16px; right: 16px; z-index: 30; max-width: min(360px, calc(100vw - 32px)); padding: 10px 14px; border-radius: 7px; color: #fff; font-weight: 600; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .15s ease, transform .15s ease; }
.status-notice--visible { opacity: 1; transform: translateY(0); }
.status-notice--success { background: #198754; }
.status-notice--error { background: #c0394b; }
@media (max-width: 600px) {
    .quick-actions { grid-template-columns: 1fr; }
    .saved-accounts__toolbar { align-items: stretch; flex-direction: column; }
    .saved-accounts__delete-selected { width: 100%; }
    .saved-account { grid-template-columns: 18px 24px minmax(0, 1fr) 38px; gap: 7px; padding: 6px; }
    .saved-account > .account-data__part { padding: 7px 4px; font-size: 13px; }
}