/* First-visit disclaimer (see disclaimer.js) - deliberately not closable
   except via the accept button (no X, no click-outside-to-dismiss), and
   above everything else including the mainnet banner. */
.disclaimer-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(2px);
}

.disclaimer-box {
    display: flex;
    flex-direction: column;
    gap: 1em;
    max-width: 640px;
    max-height: 85vh;
    padding: 1.5em 1.8em;
    background: var(--color-raised);
    border: none;
    border-radius: 0.7em;
    box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.35), -2px -2px 7px rgba(255, 255, 255, 0.02);
    color: #d1d4dc;
}

.disclaimer-box h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(18px, 3vw, 24px);
    text-align: center;
}

.disclaimer-text {
    overflow-y: auto;
    padding-right: 0.4em;
    font-size: clamp(13px, 1.6vw, 15px);
    line-height: 1.5;
}

.disclaimer-text p {
    margin: 0 0 0.6em;
}

.disclaimer-text ul {
    margin: 0 0 0.6em;
    padding-left: 1.2em;
}

.disclaimer-text li {
    margin-bottom: 0.4em;
}

.disclaimer-text hr {
    margin: 1em 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.disclaimer-accept-btn {
    flex-shrink: 0;
    padding: 0.7em 1em;
    background-color: rgba(38, 166, 154, 0.25) !important;
    border-color: rgba(38, 166, 154, 0.6) !important;
    color: #a5e8a8 !important;
    font-weight: 600;
    font-size: clamp(14px, 1.8vw, 17px);
}

.disclaimer-accept-btn:hover {
    background-color: rgba(38, 166, 154, 0.4) !important;
}

/* "Tutorial" window (see tutorialOverlay.js) - opened by a short click on
   the global ❓ (top-right corner of the chart, see .help-toggle-btn). A real,
   opaque full-page overlay - not a centered popup/dialog like the
   disclaimer above it - for more room, since it's sidebar-navigated
   content meant to be read, not a quick confirmation. Freely dismissible
   (✕ button, Escape) unlike the disclaimer. */
.tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
}

.tutorial-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #131722;
    color: #d1d4dc;
    overflow: hidden;
}

.tutorial-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    flex-shrink: 0;
    padding: 1em 1.2em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.tutorial-header h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(15px, 2.4vw, 19px);
}

.tutorial-close-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: 1.3em;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    user-select: none;
    -webkit-user-select: none;
}

.tutorial-close-btn:hover {
    opacity: 1;
}

/* #legal-overlay's own inline language switcher (legalOverlay.js) - sits
   in its .tutorial-header between the title and ✕, so language can be
   changed right where the legal text is being read instead of needing
   Settings two menus away. Small/muted to read as a secondary control
   next to the title, matching .top-bar-select's own dark-select look. */
.legal-language-select {
    flex-shrink: 0;
    background-color: #1e222d;
    color: #d1d4dc;
    border: 1px solid #363a45;
    border-radius: 4px;
    padding: 0.3em 0.5em;
    font-size: clamp(12px, 1.5vw, 14px);
    cursor: pointer;
}

.tutorial-body {
    display: flex;
    flex: 1;
    min-height: 0; /* lets .tutorial-content scroll instead of overflowing the box */
}

.tutorial-sidebar {
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.02);
}

/* Same grip look as .drawing-panel-grip - a thin, always-visible strip that
   stays put (it's outside .tutorial-sidebar-content) so it can still be
   clicked to expand again once collapsed. */
.tutorial-sidebar-grip {
    flex: 0 0 auto;
    width: 1.4em;
    align-self: stretch;
    border: none;
    background: #333;
    color: #ccc;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
}

.tutorial-sidebar-grip:hover {
    background: #444;
}

.tutorial-sidebar-content {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    width: 220px;
    max-width: 220px;
    padding: 0.8em;
    opacity: 1;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    transition: width 0.2s ease, max-width 0.2s ease, opacity 0.15s ease, padding 0.2s ease;
}

/* Collapsed: shrink the content away to nothing, leaving just the grip
   (same approach as .drawing-panel.collapsed .drawing-panel-content) */
.tutorial-sidebar.collapsed .tutorial-sidebar-content {
    width: 0;
    max-width: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.tutorial-nav-item {
    text-align: left;
    background: none;
    border: none;
    border-radius: 0.4em;
    padding: 0.6em 0.7em;
    color: #b8bcc4;
    font-size: clamp(12.5px, 1.5vw, 14px);
    line-height: 1.3;
    cursor: pointer;
}

.tutorial-nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.tutorial-nav-item.active {
    background: rgba(41, 98, 255, 0.2);
    color: #90caf9;
    font-weight: 600;
}

/* The two "Start" topics (Features, Radial menu) - marked as the place to
   begin: amber bar on the left plus a warm tint, same amber as the ❓'s
   first-visit highlight (.help-toggle-btn.first-visit, components/tools.css). */
.tutorial-nav-item.tutorial-nav-start {
    box-shadow: inset 3px 0 0 #ffb74d;
    background: rgba(255, 183, 77, 0.1);
    color: #ffd699;
    font-weight: 600;
}

.tutorial-nav-item.tutorial-nav-start:hover {
    background: rgba(255, 183, 77, 0.18);
    color: #fff;
}

.tutorial-nav-item.tutorial-nav-start.active {
    background: rgba(255, 183, 77, 0.24);
    color: #ffe0b2;
}

.tutorial-content {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 1.2em 1.5em;
}

.tutorial-content h3 {
    margin: 0 0 0.7em;
    color: #fff;
    font-size: clamp(14px, 1.8vw, 17px);
}

.tutorial-content p {
    margin: 0 0 0.8em;
    font-size: clamp(13px, 1.5vw, 15px);
    line-height: 1.55;
}

/* The "Features" tutorial topic's bullet list */
.features-list {
    margin: 0;
    padding-left: 1.2em;
    font-size: clamp(13px, 1.5vw, 15px);
    line-height: 1.55;
}

.features-list li {
    margin-bottom: 0.5em;
}

/* The "Support" tutorial topic's forms (see supportTickets.js) */
.feedback-form {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    max-width: 420px;
}

.feedback-textarea,
.feedback-contact {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6em 0.8em;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.5em;
    color: inherit;
    font: inherit;
    resize: vertical;
}

.feedback-submit-btn {
    align-self: flex-start;
    padding: 0.6em 1.4em;
}

.feedback-status {
    margin: 0;
    color: #81c784;
    font-size: 0.9em;
}

.feedback-status-error {
    color: #ef9a9a;
}

/* The "Support" tutorial topic (see supportTickets.js) - reuses the
   feedback-* form styles above for its inputs. */
#support-status {
    margin-top: 0.6em;
}

.support-community-link {
    color: #9fa8ff;
    font-weight: 600;
}

.support-link-btn {
    margin-top: 0.6em;
    padding: 0.45em 0.9em;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.5em;
    color: inherit;
    font: inherit;
    font-size: 0.9em;
    cursor: pointer;
}

.support-link-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.support-linked-note,
.support-empty {
    color: #999;
    font-size: 0.9em;
}

.support-ticket-list {
    display: flex;
    flex-direction: column;
    gap: 0.9em;
    max-width: 560px;
}

.support-ticket {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.6em;
    padding: 0.7em 0.9em;
}

.support-ticket-closed {
    opacity: 0.7;
}

.support-ticket-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em;
    align-items: baseline;
    margin-bottom: 0.5em;
    font-size: 0.9em;
}

.support-ticket-status,
.support-ticket-time,
.support-ticket-linked {
    color: #999;
}

.support-msg {
    margin: 0.4em 0;
    padding: 0.5em 0.7em;
    border-radius: 0.5em;
    background: rgba(255, 255, 255, 0.05);
}

.support-msg-support {
    background: rgba(88, 101, 242, 0.18);
    border-left: 3px solid #5865f2;
}

.support-msg-author {
    color: #999;
    font-size: 0.8em;
    margin-bottom: 0.2em;
}

.support-msg-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.support-reply-form {
    display: flex;
    gap: 0.5em;
    align-items: flex-end;
    margin-top: 0.6em;
}

.support-reply-form .feedback-submit-btn {
    align-self: auto;
    padding: 0.5em 1em;
}

.support-code-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    align-items: center;
    margin-top: 0.5em;
    color: #999;
    font-size: 0.85em;
}

.support-code-row .support-link-btn {
    margin-top: 0;
}

.support-code-form {
    display: flex;
    gap: 0.5em;
    align-items: flex-start;
    margin-top: 1em;
    max-width: 560px;
}

.support-code-form .support-link-btn {
    margin-top: 0;
    white-space: nowrap;
}

/* Unread support reply: a dot on the ❓ button and the Support nav item. */
.help-toggle-btn.support-unread,
.tutorial-nav-item.support-unread {
    position: relative;
}

.help-toggle-btn.support-unread::after,
.tutorial-nav-item.support-unread::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #5865f2;
    box-shadow: 0 0 0 2px #0e0f11;
}

/* Backlog list on the "Planned Updates" tutorial topic - a priority badge
   (the urgency number the list is sorted by) plus the note text, one row
   per item. Deliberately outside the .tutorial-lang-en/-de pairing above:
   this content isn't translated, so it should stay visible no matter which
   tutorial language is selected. */
.planned-updates-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.planned-updates-list li {
    display: flex;
    align-items: baseline;
    gap: 0.7em;
    font-size: clamp(13px, 1.5vw, 15px);
    line-height: 1.5;
}

/* Purely visual topic-group separators within the backlog list - the
   priority numbering itself stays one continuous sequence across groups
   (see the comment above .planned-updates-list in index.html), this just
   breaks the flat list up visually. Deliberately light-touch: a thin,
   faint rule and slightly muted text, not a bold section title - these
   groups are a loose grouping, not a hard break in the list. */
.pu-group-header {
    margin-top: 0.5em;
    padding-top: 0.4em;
    border-top: 1px solid rgba(144, 202, 249, 0.12);
    font-size: 0.8em;
    font-style: italic;
    opacity: 0.55;
}

.pu-group-header:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.pu-priority {
    flex-shrink: 0;
    min-width: 1.6em;
    text-align: center;
    padding: 0.1em 0.4em;
    border-radius: 0.4em;
    background: rgba(41, 98, 255, 0.2);
    color: #90caf9;
    font-size: 0.8em;
    font-weight: 600;
}

.pu-text {
    color: inherit;
}

/* The start question "not an EU user?" (nonEuConfirm.js) sits above the
   disclaimer it's asked together with. */
#non-eu-overlay {
    z-index: 1001;
}

/* One language at a time (unlike the rest of this app, shown bilingually)
   - see tutorialLanguage.js, which sets data-tutorial-lang on every
   element that carries it (#tutorial-overlay, #profile-overlay and
   #legal-overlay all share the .tutorial-overlay class so this single
   rule covers all three; #disclaimer-overlay doesn't share that class, so
   it needs its own copy of the selector below). Every .tutorial-lang-en/
   .tutorial-lang-de pair in index.html holds the same text twice, once
   per language; whichever doesn't match the current attribute is hidden
   here. */
html[data-tutorial-lang="en"] .tutorial-lang-de,
.tutorial-overlay[data-tutorial-lang="en"] .tutorial-lang-de,
#disclaimer-overlay[data-tutorial-lang="en"] .tutorial-lang-de {
    display: none;
}

html[data-tutorial-lang="de"] .tutorial-lang-en,
.tutorial-overlay[data-tutorial-lang="de"] .tutorial-lang-en,
#disclaimer-overlay[data-tutorial-lang="de"] .tutorial-lang-en {
    display: none;
}

/* Phone widths: narrow the sidebar instead of switching its layout - it
   stays a vertical column of tabs on the left (same as desktop), just
   with less width and tighter padding so .tutorial-content keeps room. */
@media (max-width: 640px) {
    .tutorial-sidebar-content {
        width: 130px;
        max-width: 130px;
        padding: 0.6em 0.4em;
    }

    .tutorial-nav-item {
        padding: 0.5em 0.5em;
    }
}

/* Tool settings window (ui/toolSettings.js) - the tutorial's shell, with
   a category's tools as a list of rows and a tool's own page behind each. */
.tool-settings-list {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    max-width: 420px;
}

.tool-settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6em;
    text-align: left;
    padding: 0.65em 0.9em;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5em;
    background: rgba(255, 255, 255, 0.03);
    color: #d1d4dc;
    font-size: clamp(13px, 1.5vw, 15px);
    cursor: pointer;
}

.tool-settings-item:hover {
    background: rgba(41, 98, 255, 0.15);
    border-color: rgba(41, 98, 255, 0.5);
    color: #fff;
}

/* A category's icon (ui/toolSettings.js iconEl) - an emoji, or the anvil,
   which sits inline here instead of as a block like in the wheel. */
.tool-settings-icon .anvil-icon {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
    filter: none;
}

/* "Just for fun"'s groups (toolSettings.js showGroups): a row per group -
   its name, what its Fast Lane holds, › into it. */
.tool-group-list {
    margin-bottom: 1.1em;
}

.tool-group-row {
    gap: 0.8em;
}

.tool-group-name {
    flex-shrink: 0;
}

.tool-group-lane {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: #6f7686;
    font-size: 12.5px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tool-group-chevron {
    flex-shrink: 0;
    color: #6f7686;
    font-size: 18px;
    line-height: 1;
}

.tool-settings-back {
    margin: 0 0 0.8em;
    padding: 0.3em 0;
    border: none;
    background: none;
    color: #90caf9;
    font-size: clamp(12.5px, 1.5vw, 14px);
    cursor: pointer;
}

.tool-settings-back:hover {
    color: #fff;
}

.tool-settings-none {
    color: #6f7686;
}

/* A tool's settings form (ui/toolSettings.js settingsForm). */
.tool-settings-form {
    display: flex;
    flex-direction: column;
    gap: 0.9em;
    max-width: 520px;
    margin-top: 0.9em;
}

.tool-settings-field {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    font-size: clamp(13px, 1.5vw, 14px);
}

.tool-settings-label {
    color: #b8bcc4;
}

.tool-settings-input {
    width: 110px;
    padding: 0.35em 0.6em;
    border: 1px solid #363a45;
    border-radius: 4px;
    background: #1e222d;
    color: #d1d4dc;
    font-size: 14px;
    outline: none;
}

.tool-settings-input:focus {
    border-color: #2962ff;
}

.tool-settings-input.invalid,
.tool-settings-hint.invalid {
    border-color: #ef5350;
    color: #ef5350;
}

.tool-settings-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 1em;
}

.tool-settings-check {
    display: flex;
    align-items: center;
    gap: 0.35em;
    cursor: pointer;
}

.tool-settings-rows {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}

.tool-settings-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.tool-settings-row .tool-settings-input {
    width: 90px;
}

.tool-settings-hint {
    color: #6f7686;
    font-size: 12.5px;
}

.tool-settings-reset {
    align-self: flex-start;
    padding: 0.45em 0.9em;
    border: 1px solid #363a45;
    border-radius: 0.4em;
    background: none;
    color: #b8bcc4;
    cursor: pointer;
}

.tool-settings-reset:hover {
    border-color: #2962ff;
    color: #fff;
}

/* Tool rows (ui/toolSettings.js toolRow): the name opens the tool's page,
   the icons on the right - ⚙️ options, Fast Lane circle, 👆 place it. */
.tool-row {
    padding: 0.3em 0.45em 0.3em 0.9em;
    cursor: default;
}

.tool-row-name {
    flex: 1;
    min-width: 0;
    padding: 0.35em 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tool-row-actions {
    display: flex;
    align-items: center;
    gap: 0.4em;
    flex-shrink: 0;
}

.tool-row-icon {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.4em;
    background: none;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.tool-row-icon:hover {
    border-color: #2962ff;
    background: rgba(41, 98, 255, 0.15);
}

.tool-row-icon:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* A category's Fast Lane on top of its list - a faint heading, set
   slightly apart from the full list below. */
.fast-lane-group {
    max-width: 420px;
    margin-bottom: 1.1em;
    padding-bottom: 1.1em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fast-lane-heading {
    margin-bottom: 0.45em;
    color: #6f7686;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fast-lane-circle {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 2px solid #5d6475;
    border-radius: 50%;
    background: none;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.fast-lane-circle:hover {
    border-color: #2962ff;
}

.fast-lane-circle.in {
    border-color: #2962ff;
    background: #2962ff;
}

/* In the alphabetic list: a tool already shown in the Fast Lane above. */
.tool-row.in-lane {
    opacity: 0.45;
}

.tool-row.in-lane:hover,
.tool-row.in-lane:focus-within {
    opacity: 0.85;
}

/* A tool's keyboard shortcut on its ⌨️ (ui/toolSettings.js) - the combo
   itself once one is set. */
.tool-row-icon.has-shortcut {
    width: auto;
    min-width: 30px;
    padding: 0 0.45em;
}

.tool-row-icon kbd {
    color: #d1d4dc;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.shortcut-recorder {
    align-items: center;
}

.shortcut-recorder-text {
    padding: 0 0.5em;
    color: #d1d4dc;
    font-size: 13px;
    white-space: nowrap;
}

/* The slot menu a circle opens - positioned by JS. */
.fast-lane-picker {
    position: fixed;
    z-index: 1;
    display: flex;
    gap: 0.3em;
    padding: 0.35em;
    border: 1px solid #363a45;
    border-radius: 0.5em;
    background: #1e222d;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.fast-lane-picker button {
    min-width: 34px;
    height: 34px;
    padding: 0 0.6em;
    border: 1px solid #363a45;
    border-radius: 0.4em;
    background: none;
    color: #d1d4dc;
    font-weight: 700;
    cursor: pointer;
}

.fast-lane-picker button:hover {
    border-color: #2962ff;
    color: #fff;
}

.fast-lane-picker button.active {
    background: #2962ff;
    border-color: #2962ff;
    color: #fff;
}

.fast-lane-picker button.out {
    color: #ef9a9a;
}

/* Settings window (ui/settingsOverlay.js, partials/settings.html) - the
   tutorial's shell; its tabs look like .tutorial-nav-item (own class, see
   the partial's comment), its fields are a .params-popup form. */
.settings-nav-item {
    text-align: left;
    background: none;
    border: none;
    border-radius: 0.4em;
    padding: 0.6em 0.7em;
    color: #b8bcc4;
    font-size: clamp(12.5px, 1.5vw, 14px);
    line-height: 1.3;
    cursor: pointer;
}

.settings-nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.settings-nav-item.active {
    background: rgba(41, 98, 255, 0.2);
    color: #90caf9;
    font-weight: 600;
}

.settings-fields {
    max-width: 420px;
    box-shadow: none;
    font-size: clamp(13px, 1.5vw, 15px);
}

@media (max-width: 640px) {
    .settings-nav-item {
        padding: 0.5em 0.5em;
    }
}

/* "Waiting for your wallet" (ui/walletSignPrompt.js) - while a signature or
   network switch waits on the visitor in their wallet. Top centre, above
   everything, doesn't block the page. */
.wallet-sign-prompt {
    position: fixed;
    top: 16px;
    left: 50%;
    z-index: 3000;
    display: flex;
    align-items: flex-start;
    gap: 0.7em;
    width: min(440px, calc(100vw - 32px));
    padding: 0.85em 0.9em 0.85em 1em;
    border: 1px solid rgba(255, 213, 79, 0.55);
    border-radius: 0.7em;
    background: #1e222d;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
    color: #d1d4dc;
    font-size: 14px;
    line-height: 1.4;
    transform: translateX(-50%);
    animation: wallet-sign-prompt-in 0.2s ease-out;
}

.wallet-sign-prompt[hidden] {
    display: none;
}

.wallet-sign-prompt-icon {
    font-size: 22px;
    line-height: 1;
    animation: wallet-sign-prompt-pulse 1.4s ease-in-out infinite;
}

.wallet-sign-prompt-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.2em;
    min-width: 0;
}

.wallet-sign-prompt-body strong {
    color: #ffd54f;
}

.wallet-sign-prompt-open {
    align-self: flex-start;
    margin-top: 0.4em;
    padding: 0.3em 0.8em;
    min-height: 0;
    white-space: nowrap;
}

.wallet-sign-prompt-open[hidden] {
    display: none;
}

.wallet-sign-prompt-close {
    flex-shrink: 0;
    padding: 0 0.2em;
    border: none;
    background: none;
    color: #8a8f9c;
    font-size: 15px;
    cursor: pointer;
}

.wallet-sign-prompt-close:hover {
    color: #fff;
}

/* The connect checklist (ui/connectSteps.js) - the same box, a list of the
   wallet's confirmations instead of one line. */
.connect-steps[data-state="done"] {
    border-color: rgba(38, 166, 154, 0.7);
}

.connect-steps[data-state="done"] .connect-steps-title {
    color: #26a69a;
}

.connect-steps-list {
    display: flex;
    flex-direction: column;
    gap: 0.45em;
    margin: 0.35em 0 0;
    padding: 0;
    list-style: none;
}

.connect-steps-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55em;
    color: #8a8f9c;
}

.connect-steps-item[data-state="active"],
.connect-steps-item[data-state="done"],
.connect-steps-item[data-state="failed"] {
    color: #d1d4dc;
}

.connect-steps-mark {
    flex: none;
    width: 1.2em;
    text-align: center;
    font-weight: 700;
}

.connect-steps-item[data-state="active"] .connect-steps-mark {
    animation: wallet-sign-prompt-pulse 1.4s ease-in-out infinite;
}

.connect-steps-item[data-state="done"] .connect-steps-mark {
    color: #26a69a;
}

.connect-steps-item[data-state="failed"] .connect-steps-mark {
    color: #ef5350;
}

.connect-steps-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.connect-steps-text small {
    color: #ffd54f;
    font-size: 0.88em;
}

.connect-steps-item[data-state="done"] .connect-steps-text small {
    color: #8a8f9c;
}

.connect-steps-actions {
    display: flex;
    gap: 0.5em;
}

.connect-steps-actions:not(:has(button:not([hidden]))) {
    display: none;
}

@keyframes wallet-sign-prompt-in {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to { opacity: 1; transform: translateX(-50%); }
}

@keyframes wallet-sign-prompt-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}

/* API key connect dialog (exchanges/connectDialog.js) */
/* Its fields/buttons set their own display - [hidden] must still win. */
#key-connect-overlay [hidden] {
    display: none;
}

.key-connect-network {
    font-size: 0.7em;
    color: var(--color-text-dim);
}

.key-connect-note {
    color: var(--color-text-dim);
}

.key-connect-steps li {
    margin-bottom: 10px;
}

.key-connect-steps .btn {
    margin: 6px 6px 0 0;
}

.key-connect-field {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    background: var(--color-raised);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    padding: 6px;
}

.key-connect-status {
    min-height: 1.2em;
}

.key-connect-status.error {
    color: var(--color-down);
}

.key-connect-status.ok {
    color: var(--color-up);
}