#qortal-account-root { max-width: none; width: 100%; min-height: 0; overflow-y: auto; padding: 0 6px 0; margin-bottom: 0; } #app-content #qortal-account-root, #app-content-vue #qortal-account-root, #body-settings #qortal-account-root { height: calc(100dvh - 96px); max-height: calc(100dvh - 96px); } #qortal-account-root .qortal-hidden { display: none !important; } #qortal-account-root .qortal-page-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } #qortal-account-root .qortal-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; } #qortal-account-root .qortal-page-primary-actions, #qortal-account-root .qortal-page-utility-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #qortal-account-root .qortal-page-primary-actions { flex: 0 1 auto; } #qortal-account-root .qortal-page-utility-actions { margin-left: auto; justify-content: flex-end; } #qortal-account-root .qortal-powered-brand { display: flex; align-items: center; justify-content: flex-end; max-width: 220px; } #qortal-account-root .qortal-powered-brand picture, #qortal-account-root .qortal-powered-brand img { display: block; width: 100%; height: auto; } #qortal-account-root .qortal-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } #qortal-account-root .qortal-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 38px; min-width: 38px; height: 38px; padding: 0; border-radius: 999px; position: relative; } #qortal-account-root .qortal-button-with-icon { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 0; padding: 0 14px; gap: 8px; border-radius: var(--border-radius-large); text-align: center; } #qortal-account-root .qortal-icon-button::before, #qortal-account-root .qortal-inline-icon { display: inline-block; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: contain; content: ''; } #qortal-account-root .qortal-inline-icon { flex: 0 0 auto; } #qortal-account-root .qortal-auth-file-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; } #qortal-account-root .qortal-icon-button--refresh::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300695c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E"); } #qortal-account-root .qortal-icon-button--settings::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300695c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .34 1.87l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 1.54V21a2 2 0 0 1-4 0v-.09A1.7 1.7 0 0 0 9 19.4a1.7 1.7 0 0 0-1.87.34l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-1.54-1H3a2 2 0 0 1 0-4h.09A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.34-1.87L4.2 7.07a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09A1.7 1.7 0 0 0 15 4.6a1.7 1.7 0 0 0 1.87-.34l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.7 1.7 0 0 0 19.4 9c.2.58.76.98 1.38 1H21a2 2 0 0 1 0 4h-.09c-.62.02-1.18.42-1.51 1Z'/%3E%3C/svg%3E"); } #qortal-account-root .qortal-icon-button--install::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300695c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v11'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E"); } #qortal-account-root .qortal-icon-button--status::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300695c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 10v6'/%3E%3Cpath d='M12 7h.01'/%3E%3C/svg%3E"); } #qortal-account-root .qortal-icon-button--send::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300695c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22l-4-9-9-4Z'/%3E%3C/svg%3E"); } #qortal-account-root .qortal-inline-icon--download { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2300695c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3v8m0 0 3-3m-3 3L7 8m-3 7h12'/%3E%3C/svg%3E"); } #qortal-account-root .qortal-node-status-grid { display: grid; grid-template-columns: repeat(5, minmax(98px, 1fr)); gap: 5px; flex: 1 1 520px; } #qortal-account-root .qortal-node-status-card { border: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent); border-radius: var(--border-radius-large); padding: 7px 8px; background: color-mix(in srgb, var(--color-main-background) 92%, var(--color-primary) 8%); min-height: 62px; } #qortal-account-root .qortal-node-status-card .qortal-label { margin-bottom: 2px; font-size: 10px; } #qortal-account-root .qortal-node-status-card .qortal-value { font-size: 13px; line-height: 1.25; } #qortal-account-root .qortal-node-status-card--warn { border-color: color-mix(in srgb, #d9a441 68%, var(--color-border)); background: color-mix(in srgb, #d9a441 12%, var(--color-main-background)); } #qortal-account-root .qortal-node-status-card--error { border-color: color-mix(in srgb, #ff5a5f 70%, var(--color-border)); background: color-mix(in srgb, #ff5a5f 14%, var(--color-main-background)); } #qortal-account-root .qortal-page-header h2 { margin: 0; font-weight: 800; letter-spacing: 0.01em; } #qortal-account-root .qortal-help { margin: 4px 0 0; color: var(--color-text-maxcontrast); font-size: 14px; } #qortal-account-root .qortal-card { border: 1px solid var(--color-border); border-radius: var(--border-radius-large); padding: 14px; margin: 12px 0; background: var(--color-main-background); box-shadow: 0 2px 12px color-mix(in srgb, var(--color-text-maxcontrast) 8%, transparent); } #qortal-account-root .qortal-card-hero { background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--color-primary) 24%, transparent), transparent 42%), linear-gradient(120deg, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 58%), var(--color-main-background); } #qortal-account-root .qortal-card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } #qortal-account-root .qortal-card-title h3, #qortal-account-root .qortal-card-title h4 { margin: 0; } #qortal-account-root .qortal-card-title--compact { margin-bottom: 6px; } #qortal-account-root .qortal-card-actions-inline { display: flex; flex-wrap: wrap; gap: 8px; } #qortal-account-root .qortal-label { display: block; color: var(--color-text-maxcontrast); font-size: 11px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; } #qortal-account-root .qortal-value { display: block; font-weight: 760; word-break: break-word; font-size: 15px; line-height: 1.35; } #qortal-account-root .qortal-note { margin: 0 0 10px 0; color: var(--color-text-maxcontrast); font-size: 12px; line-height: 1.4; } #qortal-account-root .qortal-error { color: var(--color-error); } #qortal-account-root .qortal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; align-items: end; margin-bottom: 10px; } #qortal-account-root .qortal-grid input, #qortal-account-root .qortal-grid select, #qortal-account-root .qortal-grid textarea { width: 100%; } #qortal-account-root .qortal-grid select { padding: 8px 10px; border-radius: var(--border-radius); border: 1px solid var(--color-border); background: var(--color-main-background); color: var(--color-main-text); } #qortal-account-root .qortal-wallet-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 10px; } #qortal-account-root .qortal-wallet-summary__item { border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); border-radius: var(--border-radius-large); padding: 10px; background: linear-gradient(160deg, color-mix(in srgb, var(--color-main-background) 75%, var(--color-primary) 25%), var(--color-main-background)); display: flex; flex-direction: column; justify-content: space-between; min-height: 132px; box-shadow: 0 1px 10px color-mix(in srgb, var(--color-text-maxcontrast) 8%, transparent); } #qortal-account-root .qortal-wallet-summary__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; } #qortal-account-root .qortal-wallet-summary__item--address { border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border)); } #qortal-account-root .qortal-wallet-summary__item--primary { border-color: color-mix(in srgb, var(--color-success) 28%, var(--color-border)); } #qortal-account-root .qortal-highlight-target { border-color: color-mix(in srgb, #ffb703 82%, var(--color-border)); box-shadow: 0 0 0 2px color-mix(in srgb, #ffb703 58%, transparent), 0 0 0 6px color-mix(in srgb, #ffb703 24%, transparent); animation: qortal-register-highlight-pulse 1.3s ease-in-out 6; } #qortal-account-root .qortal-highlight-action { box-shadow: 0 0 0 2px color-mix(in srgb, #ffb703 64%, transparent), 0 0 0 6px color-mix(in srgb, #ffb703 26%, transparent); animation: qortal-register-highlight-pulse 1.3s ease-in-out 6; } @keyframes qortal-register-highlight-pulse { 0% { transform: translateY(0); } 50% { transform: translateY(-1px); } 100% { transform: translateY(0); } } #qortal-account-root .qortal-wallet-summary__item--balance { border-color: color-mix(in srgb, var(--color-border) 76%, transparent); } #qortal-account-root .qortal-wallet-summary__item--balance-good { border-color: color-mix(in srgb, #2cb67d 72%, var(--color-border)); background: linear-gradient(165deg, color-mix(in srgb, #2cb67d 18%, var(--color-main-background)), var(--color-main-background)); } #qortal-account-root .qortal-wallet-summary__item--balance-good .qortal-value { color: #2cb67d; } #qortal-account-root .qortal-wallet-summary__item--balance-warn { border-color: color-mix(in srgb, #d9a441 65%, var(--color-border)); background: linear-gradient(165deg, color-mix(in srgb, #d9a441 16%, var(--color-main-background)), var(--color-main-background)); } #qortal-account-root .qortal-wallet-summary__item--balance-warn .qortal-value { color: #d9a441; } #qortal-account-root .qortal-wallet-summary__item--balance-bad { border-color: color-mix(in srgb, #ff5a5f 66%, var(--color-border)); background: linear-gradient(165deg, color-mix(in srgb, #ff5a5f 18%, var(--color-main-background)), var(--color-main-background)); } #qortal-account-root .qortal-wallet-summary__item--balance-bad .qortal-value { color: #ff5a5f; } #qortal-account-root .qortal-item-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } #qortal-account-root #qortal-account-address { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; } #qortal-account-root #qortal-account-balance { font-size: 21px; line-height: 1.2; } #qortal-account-root #qortal-account-request-wrap { padding: 8px; border-radius: var(--border-radius-large); background: color-mix(in srgb, var(--color-main-background) 76%, var(--color-primary) 24%); } #qortal-account-root .qortal-item-actions .button { width: 100%; font-weight: 700; } #qortal-account-root #qortal-account-low-balance-wrap { margin-top: 12px; } #qortal-account-root .qortal-list { display: flex; flex-direction: column; gap: 8px; } #qortal-account-root .qortal-item-actions.qortal-activity-actions, #qortal-account-root .qortal-item-actions.qortal-activity-debug-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; } #qortal-account-root .qortal-item-actions.qortal-activity-actions .button, #qortal-account-root .qortal-item-actions.qortal-activity-debug-actions .button { width: auto; } #qortal-account-root .qortal-item-actions.qortal-activity-helper-actions { justify-content: flex-end; } #qortal-account-root .qortal-item-actions.qortal-activity-helper-actions .button { width: auto; } #qortal-account-root .qortal-activity-groups-grid { grid-template-columns: minmax(260px, 1fr) minmax(260px, auto); align-items: end; } #qortal-account-root .qortal-activity-groups-grid .qortal-item-actions.qortal-activity-helper-actions { flex-direction: column; align-items: stretch; justify-content: flex-end; margin-top: 0; } #qortal-account-root .qortal-activity-groups-grid .qortal-item-actions.qortal-activity-helper-actions .button { width: 100%; } #qortal-account-root .qortal-item-actions.qortal-activity-add-row { align-items: flex-start; } #qortal-account-root .qortal-activity-add-button { width: auto !important; min-width: 220px; border: 1px solid color-mix(in srgb, var(--color-primary) 70%, var(--color-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 30%, transparent) inset; } #qortal-account-root .qortal-button-warn { border: 1px solid color-mix(in srgb, #d9a441 68%, var(--color-border)); background: color-mix(in srgb, #d9a441 16%, var(--color-main-background)); color: var(--color-main-text); } #qortal-account-root .qortal-button-compact { width: auto !important; padding: 4px 10px; min-height: 30px; font-size: 12px; } #qortal-account-root .qortal-activity-tracked-item { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; } #qortal-account-root .qortal-activity-tracked-summary { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; min-width: 0; } #qortal-account-root .qortal-activity-tracked-toggle { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--color-primary); } #qortal-account-root .qortal-activity-tracked-enabled-label { font-size: 12px; font-weight: 700; color: var(--color-text-maxcontrast); min-width: 62px; } #qortal-account-root .qortal-activity-tracked-text { min-width: 0; word-break: break-word; } #qortal-account-root .qortal-activity-tracked-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; } #qortal-account-root .qortal-activity-remove-button { width: 34px !important; min-width: 34px; min-height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; font-weight: 800; border: 1px solid color-mix(in srgb, #ff5a5f 70%, var(--color-border)); color: #ff5a5f; background: color-mix(in srgb, #ff5a5f 8%, var(--color-main-background)); } #qortal-account-root .qortal-activity-tracked-details { width: 100%; } #qortal-account-root .qortal-chip-list { display: flex; flex-wrap: wrap; gap: 8px; } #qortal-account-root .qortal-chip { border: 1px solid var(--color-border); border-radius: 999px; padding: 6px 12px; font-weight: 620; background: color-mix(in srgb, var(--color-main-background) 85%, var(--color-primary) 15%); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #qortal-account-root .qortal-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } #qortal-account-root .qortal-account-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } #qortal-account-root .qortal-account-actions__left, #qortal-account-root .qortal-account-actions__right { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } #qortal-account-root .qortal-send-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; align-items: end; margin-bottom: 10px; } #qortal-account-root .qortal-send-grid input { width: 100%; } #qortal-account-root .qortal-send-grid__actions { display: flex; gap: 8px; align-items: end; } #qortal-account-root .qortal-send-grid__actions .button { flex: 1 1 auto; min-height: 38px; font-weight: 700; } #qortal-account-root .qortal-send-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } #qortal-account-root .qortal-send-icon { width: 16px; height: 16px; background-image: url('../img/QORT-logo-512.png'); background-repeat: no-repeat; background-position: center; background-size: contain; } #qortal-account-root .qortal-status { background: var(--color-background-dark); border: 1px solid color-mix(in srgb, var(--color-border) 45%, transparent); border-radius: var(--border-radius-large); padding: 12px; min-height: 92px; max-height: 44vh; overflow: auto; white-space: pre-wrap; word-break: break-word; } #qortal-account-root .qortal-compact-status { min-height: 76px; } #qortal-account-root .qortal-transactions { margin-top: 12px; border-top: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent); padding-top: 12px; } #qortal-account-root .qortal-unconfirmed-transactions { border-top: 0; padding-top: 0; margin-top: 0; } #qortal-account-root .qortal-transactions-list { display: grid; gap: 8px; max-height: 46vh; overflow: auto; padding-right: 4px; } #qortal-account-root .qortal-unconfirmed-item { border: 1px solid color-mix(in srgb, var(--color-success) 45%, var(--color-border)); border-radius: var(--border-radius-large); background: color-mix(in srgb, var(--color-success) 12%, var(--color-main-background)); padding: 10px; } #qortal-account-root .qortal-unconfirmed-item-chat { border-color: color-mix(in srgb, var(--color-primary) 46%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 11%, var(--color-main-background)); } #qortal-account-root .qortal-unconfirmed-section { border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); border-radius: var(--border-radius-large); padding: 10px; background: color-mix(in srgb, var(--color-main-background) 90%, var(--color-background-dark) 10%); } #qortal-account-root .qortal-unconfirmed-section + .qortal-unconfirmed-section { margin-top: 8px; } #qortal-account-root .qortal-unconfirmed-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } #qortal-account-root .qortal-unconfirmed-section-title { margin: 0; font-size: 13px; font-weight: 700; } #qortal-account-root .qortal-unconfirmed-section-count { font-size: 12px; color: var(--color-text-maxcontrast); background: color-mix(in srgb, var(--color-primary) 20%, transparent); border-radius: 999px; padding: 2px 8px; } #qortal-account-root .qortal-unconfirmed-section-toggle { margin-left: auto; min-height: 26px; padding: 2px 10px; } #qortal-account-root .qortal-unconfirmed-section-body { display: grid; gap: 8px; } #qortal-account-root .qortal-unconfirmed-type { font-weight: 700; font-size: 13px; } #qortal-account-root .qortal-unconfirmed-meta { color: var(--color-text-maxcontrast); font-size: 12px; } #qortal-account-root .qortal-request-list, #qortal-account-root .qortal-admin-request-list { display: grid; gap: 10px; margin-top: 10px; } #qortal-account-root .qortal-request-item { border: 2px solid color-mix(in srgb, var(--color-border) 72%, transparent); border-radius: var(--border-radius-large); padding: 10px; background: color-mix(in srgb, var(--color-main-background) 90%, var(--color-background-dark) 10%); } #qortal-account-root .qortal-request-item.status-pending { border-color: #e8c547; } #qortal-account-root .qortal-request-item.status-sent { border-color: #2cb67d; } #qortal-account-root .qortal-request-item.status-denied { border-color: #ff5a5f; } #qortal-account-root .qortal-request-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } #qortal-account-root .qortal-request-title { font-size: 14px; font-weight: 700; margin: 0; } #qortal-account-root .qortal-request-date { font-size: 12px; color: var(--color-text-maxcontrast); } #qortal-account-root .qortal-request-meta { font-size: 12px; color: var(--color-text-maxcontrast); line-height: 1.45; } #qortal-account-root .qortal-request-message-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; } #qortal-account-root .qortal-request-message { font-size: 12px; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent); border-radius: var(--border-radius-large); background: color-mix(in srgb, var(--color-main-background) 78%, var(--color-primary) 22%); } #qortal-account-root .qortal-request-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 8px; } #qortal-account-root .qortal-request-send-control { display: grid; gap: 4px; min-width: 150px; } #qortal-account-root .qortal-request-send-control input { max-width: 180px; } #qortal-account-root .qortal-request-actions .button { font-weight: 700; } #qortal-account-root .qortal-request-actions .button.button-error { background: #ff5a5f; border-color: #ff5a5f; color: #fff; } #qortal-account-root .qortal-request-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; } #qortal-account-root .qortal-admin-ops-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 10px 0 12px; } #qortal-account-root .qortal-admin-ops-item { border: 1px solid color-mix(in srgb, var(--color-border) 68%, transparent); border-radius: var(--border-radius-large); padding: 10px; background: color-mix(in srgb, var(--color-main-background) 88%, var(--color-primary) 12%); } #qortal-account-root .qortal-admin-ops-item--wide { grid-column: 1 / -1; } #qortal-account-root .qortal-admin-ops-actions { display: flex; flex-wrap: wrap; gap: 8px; } #qortal-account-root .qortal-invite-card { border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border)); background: linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 48%), var(--color-main-background); } #qortal-account-root .qortal-invite-create-grid { grid-template-columns: minmax(220px, 1.4fr) minmax(150px, 0.6fr); } #qortal-account-root .qortal-invite-table-wrap { margin-top: 12px; overflow: auto; border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); border-radius: var(--border-radius-large); background: color-mix(in srgb, var(--color-main-background) 94%, var(--color-primary) 6%); } #qortal-account-root .qortal-invite-table { width: 100%; min-width: 780px; border-collapse: collapse; } #qortal-account-root .qortal-invite-table th, #qortal-account-root .qortal-invite-table td { padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 58%, transparent); text-align: left; vertical-align: top; } #qortal-account-root .qortal-invite-table th { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--color-text-maxcontrast); background: color-mix(in srgb, var(--color-main-background) 80%, var(--color-background-dark) 20%); } #qortal-account-root .qortal-invite-row:last-child td { border-bottom: 0; } #qortal-account-root .qortal-invite-token { display: inline-block; max-width: 240px; padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent); border-radius: var(--border-radius); background: var(--color-background-dark); color: var(--color-main-text); white-space: normal; word-break: break-all; } #qortal-account-root .qortal-invite-comment, #qortal-account-root .qortal-invite-date, #qortal-account-root .qortal-invite-used-by { color: var(--color-main-text); font-size: 13px; line-height: 1.35; } #qortal-account-root .qortal-invite-used-by code { display: inline-block; max-width: 180px; white-space: normal; word-break: break-all; } #qortal-account-root .qortal-invite-status { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--color-border) 62%, transparent); border-radius: 999px; background: var(--color-main-background); font-size: 12px; font-weight: 700; line-height: 1; } #qortal-account-root .qortal-invite-status--active { border-color: color-mix(in srgb, var(--color-success) 42%, var(--color-border)); background: color-mix(in srgb, var(--color-success) 12%, var(--color-main-background)); color: var(--color-success); } #qortal-account-root .qortal-invite-status--used { border-color: color-mix(in srgb, var(--color-primary) 44%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 12%, var(--color-main-background)); color: var(--color-primary); } #qortal-account-root .qortal-invite-status--expired, #qortal-account-root .qortal-invite-status--revoked { border-color: color-mix(in srgb, var(--color-error) 36%, var(--color-border)); background: color-mix(in srgb, var(--color-error) 10%, var(--color-main-background)); color: var(--color-error); } #qortal-account-root .qortal-invite-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 220px; } #qortal-account-root .qortal-invite-action { min-height: 32px; font-weight: 700; } #qortal-account-root .qortal-invite-action--danger:not(:disabled) { border-color: color-mix(in srgb, var(--color-error) 45%, var(--color-border)); color: var(--color-error); } #qortal-account-root .qortal-purchase-section { margin-top: 14px; } #qortal-account-root .qortal-purchase-grid { display: grid; gap: 12px; } #qortal-account-root .qortal-purchase-grid--subscriptions { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } #qortal-account-root .qortal-purchase-grid--onetime { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } #qortal-account-root .qortal-purchase-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--border-radius-large); border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border) 76%); background: linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 11%, transparent 89%), transparent 58%), var(--color-main-background); min-height: 225px; } #qortal-account-root .qortal-purchase-card--onetime { min-height: 165px; } #qortal-account-root .qortal-purchase-card h5 { margin: 0; font-size: 16px; } #qortal-account-root .qortal-purchase-price { font-size: 19px; font-weight: 700; margin: 0; } #qortal-account-root .qortal-purchase-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-primary) 42%, var(--color-border) 58%); width: fit-content; } #qortal-account-root .qortal-purchase-features { margin: 0; padding-left: 16px; color: var(--color-text-maxcontrast); font-size: 12px; line-height: 1.4; } #qortal-account-root .qortal-purchase-meta { margin: 0; font-size: 12px; color: var(--color-text-maxcontrast); } #qortal-account-root .qortal-purchase-actions { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; } #qortal-account-root .qortal-purchases-status { margin-bottom: 12px; } #qortal-account-root .qortal-purchases-support { margin: 0 0 12px 0; padding: 12px; border-radius: var(--border-radius-large); border: 1px solid color-mix(in srgb, var(--color-warning, #d9a441) 44%, var(--color-border)); background: color-mix(in srgb, var(--color-warning, #d9a441) 10%, var(--color-main-background)); display: grid; gap: 10px; } #qortal-account-root .qortal-purchases-support textarea { width: 100%; min-height: 108px; resize: vertical; } #qortal-account-root .qortal-purchases-support-actions { display: flex; flex-wrap: wrap; gap: 8px; } #qortal-account-root .qortal-purchases-support-actions .button { width: auto; } #qortal-account-root .qortal-loading-inline { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px 0; padding: 10px 12px; border-radius: var(--border-radius-large); background: color-mix(in srgb, var(--color-main-background) 82%, var(--color-primary) 18%); border: 1px solid color-mix(in srgb, var(--color-primary) 32%, var(--color-border) 68%); } #qortal-account-root .qortal-loading-inline__spinner { width: 14px; height: 14px; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--color-primary) 22%, transparent); border-top-color: var(--color-primary); animation: qortal-account-spin 0.9s linear infinite; } @keyframes qortal-account-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #qortal-account-root .qortal-purchase-actions .button { width: 100%; } #qortal-account-root .qortal-purchase-current { border-color: color-mix(in srgb, var(--color-success) 44%, var(--color-border) 56%); background: linear-gradient(145deg, color-mix(in srgb, var(--color-success) 14%, transparent 86%), transparent 58%), var(--color-main-background); } #qortal-account-root .qortal-backups-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } #qortal-account-root .qortal-backup-item { border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); border-radius: var(--border-radius-large); padding: 10px; background: color-mix(in srgb, var(--color-main-background) 90%, var(--color-primary) 10%); } #qortal-account-root .qortal-backup-item h5 { margin: 0 0 6px 0; font-size: 14px; } #qortal-account-root .qortal-backup-status { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } #qortal-account-root .qortal-backup-status--available { border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border)); color: var(--color-main-text); } #qortal-account-root .qortal-backup-status--preview { border-color: color-mix(in srgb, var(--color-primary) 48%, var(--color-border)); } #qortal-account-root .qortal-backup-status--planned, #qortal-account-root .qortal-backup-status--requires_link, #qortal-account-root .qortal-backup-status--admin_only { border-color: color-mix(in srgb, #d9a441 42%, var(--color-border)); } #qortal-account-root .qortal-backup-detail { margin: 0; font-size: 12px; color: var(--color-text-maxcontrast); line-height: 1.4; } #qortal-account-root .qortal-announcement-item { border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent); border-radius: var(--border-radius-large); padding: 10px; background: color-mix(in srgb, var(--color-main-background) 90%, var(--color-primary) 10%); } #qortal-account-root .qortal-announcement-item--warning { border-color: color-mix(in srgb, #d9a441 62%, var(--color-border)); } #qortal-account-root .qortal-announcement-item--critical { border-color: color-mix(in srgb, #ff5a5f 68%, var(--color-border)); } #qortal-account-root .qortal-announcement-item--success { border-color: color-mix(in srgb, #2cb67d 60%, var(--color-border)); } #qortal-account-root .qortal-announcement-title { margin: 0 0 6px 0; font-size: 14px; font-weight: 760; } #qortal-account-root .qortal-announcement-message { margin: 0; font-size: 13px; line-height: 1.45; white-space: pre-wrap; } #qortal-account-root .qortal-announcement-meta { margin: 8px 0 0 0; font-size: 11px; color: var(--color-text-maxcontrast); } #qortal-account-root .qortal-qapp-embed-wrap { border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); border-radius: var(--border-radius-large); background: color-mix(in srgb, var(--color-main-background) 90%, var(--color-background-dark) 10%); overflow: hidden; min-height: 340px; position: relative; } #qortal-account-root .qortal-qapp-embed-frame { display: block; width: 100%; height: min(66vh, 780px); border: 0; background: transparent; } #qortal-account-root .qortal-loading-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.18); z-index: 2; pointer-events: none; } #qortal-account-root .qortal-loading-card { width: min(420px, calc(100% - 24px)); padding: 14px 16px; border-radius: var(--border-radius-large); border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(14, 18, 26, 0.9); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35); color: #f4f7fb; text-align: center; } #qortal-account-root .qortal-loading-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; } #qortal-account-root .qortal-loading-status { font-size: 13px; font-weight: 600; color: #8bd9ff; margin-bottom: 8px; } #qortal-account-root .qortal-loading-progress-track { width: 100%; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; } #qortal-account-root .qortal-loading-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #2fa8ff, #40e0d0); border-radius: 999px; transition: width 200ms ease; } #qortal-account-root .qortal-loading-meta { margin-top: 8px; font-size: 12px; color: rgba(244, 247, 251, 0.85); min-height: 1.1em; } #qortal-account-root #qortal-account-request-feedback { margin-top: 6px; font-weight: 600; } #qortal-account-root .qortal-app-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 10px; } #qortal-account-root .qortal-app-card { --qortal-app-outline: color-mix(in srgb, #9fd8ff 62%, var(--color-border)); --qortal-app-outline-strong: color-mix(in srgb, #c7ebff 78%, var(--color-primary)); position: relative; width: clamp(110px, 16vw, 250px); aspect-ratio: 1 / 1; border: 1px solid var(--qortal-app-outline); border-radius: max(var(--border-radius-large), 14px); overflow: hidden; background: color-mix(in srgb, var(--color-main-background) 90%, var(--color-primary) 10%); box-shadow: 0 4px 16px color-mix(in srgb, var(--color-text-maxcontrast) 12%, transparent); cursor: pointer; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 42px 10px 10px; } #qortal-account-root .qortal-app-card:hover, #qortal-account-root .qortal-app-card:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 22px color-mix(in srgb, var(--color-primary) 24%, transparent); border-color: var(--qortal-app-outline-strong); } #qortal-account-root .qortal-app-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } #qortal-account-root .qortal-app-card__image { width: 75%; height: 75%; object-fit: contain; display: block; border: 1px solid var(--qortal-app-outline); border-radius: 12px; background: color-mix(in srgb, var(--color-main-background) 92%, transparent); padding: 6px; box-sizing: border-box; } #qortal-account-root .qortal-app-card__title { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: calc(100% - 20px); padding: 6px 8px; font-weight: 760; font-size: 13px; color: var(--color-main-text); background: color-mix(in srgb, var(--color-main-background) 86%, transparent); border-radius: 10px; border: 1px solid var(--qortal-app-outline); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } #qortal-account-root .qortal-app-card__desc { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; background: linear-gradient( 180deg, color-mix(in srgb, var(--color-main-background) 20%, transparent), color-mix(in srgb, var(--color-main-background) 92%, var(--color-primary) 8%) ); color: var(--color-main-text); font-size: 12px; line-height: 1.4; max-height: 48%; overflow: hidden; text-overflow: ellipsis; transform: translateY(100%); transition: transform 120ms ease-in-out; } #qortal-account-root .qortal-app-card:hover .qortal-app-card__desc, #qortal-account-root .qortal-app-card:focus-visible .qortal-app-card__desc { transform: translateY(0); } #qortal-account-root .qortal-app-card__fallback { width: 75%; height: 75%; padding: 10px; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: 12px; color: var(--color-main-text); border: 1px solid var(--qortal-app-outline); border-radius: 12px; background: color-mix(in srgb, var(--color-main-background) 92%, transparent); box-sizing: border-box; } #qortal-account-root .qortal-tx-item { border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent); border-radius: var(--border-radius-large); background: color-mix(in srgb, var(--color-main-background) 90%, var(--color-background-dark) 10%); overflow: hidden; } #qortal-account-root .qortal-tx-item--incoming { border-color: color-mix(in srgb, #2cb67d 62%, var(--color-border)); } #qortal-account-root .qortal-tx-item--incoming .qortal-tx-meta { color: #2cb67d; } #qortal-account-root .qortal-tx-item--outgoing { border-color: color-mix(in srgb, #d9a441 65%, var(--color-border)); } #qortal-account-root .qortal-tx-item--outgoing .qortal-tx-meta { color: #d9a441; } #qortal-account-root .qortal-tx-item--neutral { border-color: color-mix(in srgb, var(--color-border) 78%, transparent); } #qortal-account-root .qortal-tx-item[open] { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); } #qortal-account-root .qortal-tx-summary { padding: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 12px; } #qortal-account-root .qortal-tx-item summary.qortal-tx-summary { cursor: pointer; list-style: none; } #qortal-account-root .qortal-tx-item summary::-webkit-details-marker { display: none; } #qortal-account-root .qortal-tx-title { font-weight: 700; font-size: 13px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #qortal-account-root .qortal-tx-main { min-width: 0; display: grid; gap: 4px; } #qortal-account-root .qortal-tx-meta { font-size: 12px; color: var(--color-text-maxcontrast); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #qortal-account-root .qortal-tx-time { font-size: 11px; line-height: 1.35; color: var(--color-text-maxcontrast); text-align: right; white-space: nowrap; } #qortal-account-root .qortal-transactions-load-more { margin-top: 10px; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } #qortal-account-root .qortal-tx-detail { margin: 0; padding: 10px; border-top: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent); background: var(--color-background-dark); white-space: pre-wrap; word-break: break-word; font-size: 12px; color: var(--color-main-text); } #qortal-account-root .qortal-transactions-pending { margin-top: 8px; padding: 8px 10px; border-radius: var(--border-radius-large); border: 1px solid color-mix(in srgb, var(--color-primary) 46%, var(--color-border)); background: color-mix(in srgb, var(--color-main-background) 84%, var(--color-primary) 16%); } #qortal-account-root .qortal-transactions-pending .button { width: auto; min-width: 220px; } @media (max-width: 720px) { #qortal-account-root .qortal-tx-summary { grid-template-columns: minmax(0, 1fr); } #qortal-account-root .qortal-tx-time { text-align: left; } } #qortal-account-root .qortal-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 12000; padding: 16px; } #qortal-account-root .qortal-modal.qortal-hidden { display: none; } #qortal-account-root .qortal-modal__dialog { width: min(620px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--color-main-background); border: 1px solid var(--color-border); border-radius: var(--border-radius-large); padding: 16px; } #qortal-account-root .qortal-modal__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; } #qortal-account-root .qortal-modal__actions--stacked { flex-direction: column; align-items: stretch; } #qortal-account-root .qortal-modal__helper-actions, #qortal-account-root .qortal-modal__primary-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } #qortal-account-root .qortal-backup-modal-toggle { display: flex; gap: 8px; align-items: center; margin: 0 0 10px 0; } #qortal-account-root .qortal-register-success { color: var(--color-success); font-weight: 700; } #qortal-account-root .qortal-wallet-status { padding: 6px 8px; border-radius: var(--border-radius-large); background: var(--color-background-dark); } #qortal-account-root .qortal-wallet-status-ok { color: #2cb67d; } #qortal-account-root .qortal-wallet-status-locked { color: #ff5a5f; } #qortal-account-root .qortal-wallet-status-unknown { color: var(--color-text-maxcontrast); } @media (max-width: 980px) { #qortal-account-root .qortal-page-header { flex-direction: column; align-items: stretch; } #qortal-account-root .qortal-page-actions { display: grid; grid-template-columns: 1fr; } #qortal-account-root .qortal-page-primary-actions, #qortal-account-root .qortal-page-utility-actions { width: 100%; } #qortal-account-root .qortal-page-actions .button { width: 100%; } #qortal-account-root .qortal-page-actions .qortal-icon-button { width: 38px; } #qortal-account-root .qortal-page-actions .qortal-button-with-icon { width: 100%; justify-content: center; } #qortal-account-root .qortal-powered-brand { max-width: 180px; } #qortal-account-root .qortal-node-status-grid { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); } } @media (max-width: 860px) { #qortal-account-root { padding: 0 2px 12px; } #qortal-account-root .qortal-card { padding: 12px; margin: 10px 0; } #qortal-account-root .qortal-wallet-summary, #qortal-account-root .qortal-send-grid, #qortal-account-root .qortal-grid, #qortal-account-root .qortal-kv { grid-template-columns: 1fr; } #qortal-account-root .qortal-purchase-grid--subscriptions, #qortal-account-root .qortal-purchase-grid--onetime { grid-template-columns: 1fr; } #qortal-account-root .qortal-item-actions .button, #qortal-account-root .qortal-card-title .button, #qortal-account-root .qortal-send-grid__actions .button, #qortal-account-root .qortal-admin-ops-actions .button { width: 100%; } #qortal-account-root .qortal-item-actions.qortal-activity-actions .button, #qortal-account-root .qortal-item-actions.qortal-activity-debug-actions .button, #qortal-account-root .qortal-item-actions.qortal-activity-helper-actions .button, #qortal-account-root .qortal-transactions-pending .button { width: auto; } #qortal-account-root .qortal-activity-tracked-item { flex-direction: column; } #qortal-account-root .qortal-activity-tracked-actions { margin-left: 0; align-self: flex-end; } #qortal-account-root .qortal-card-title { flex-direction: column; align-items: stretch; } #qortal-account-root .qortal-send-grid__actions { flex-direction: column; } #qortal-account-root .qortal-modal__helper-actions, #qortal-account-root .qortal-modal__primary-actions { flex-direction: column; } #qortal-account-root .qortal-app-card { width: min(100%, 250px); } #qortal-account-root .qortal-activity-groups-grid { grid-template-columns: 1fr; } #qortal-account-root .qortal-status { max-height: 36vh; } }