:root {
    --btc-tab-bg: #6C8C6C;
}
:root[data-theme="dark"] {
    --btc-tab-bg: #4f6b52;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --btc-tab-bg: #4f6b52;
    }
}

#main { font-family: Arial; position: relative; text-align: center; }

.wallets { position: relative; max-width: 600px; width: 100%; margin: auto; }

.right { text-align: right; }

.keyarea {
    font-family: Courier New;
    min-height: 100px;
    text-align: left;
    position: relative;
    padding: 5px;
}

.keyarea .public { float: left; }
.keyarea .pubaddress { float: left; }
.keyarea .privwif { float: left; }

.keyarea .label { text-decoration: underline; }

.keyarea .output { display: block; }

/* Local color modifier for the global .btn-device base. Hover handled by global .btn-device:hover. */
.btn-device-generate { background: var(--color-primary) }

#brainarea {
    display: block;
}

#brainarea .keyarea { display: none; border: 2px solid var(--color-primary); }

/* Copy buttons */
.btc-copy-btn {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--bg-surface-alt);
    color: var(--text-primary, #333);
}
.btc-copy-btn:hover { background: var(--color-primary); color: var(--text-inverse); }

/* Strength bar — 10px side inset keeps the label off the panel border when the bar fills. */
.btc-strength-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 10px 0;
}
.commands .btc-strength-row span { padding: 0; }
.btc-strength-label { font-size: var(--font-size-sm); color: var(--text-secondary, #555); white-space: nowrap; }
.btc-strength-text { font-size: var(--font-size-sm); min-width: 52px; text-align: left; }
.btc-strength-text.weak   { color: var(--color-danger); }
.btc-strength-text.medium { color: var(--color-warning); }
.btc-strength-text.strong { color: var(--color-success); }
#btc-strength-bar-wrap {
    width: 160px;
    height: 6px;
    background: var(--border, #ccc);
    border-radius: 3px;
    overflow: hidden;
}
#btc-strength-bar {
    height: 100%;
    width: 0;
    border-radius: 3px;
    transition: width 0.2s, background 0.2s;
}
#btc-strength-bar.weak   { background: var(--color-danger); }
#btc-strength-bar.medium { background: var(--color-warning); }
#btc-strength-bar.strong { background: var(--color-success); }

@media screen {
    .menu {
        text-align: left;
        margin: auto;
        max-width: 600px;
        width: 100%;
        position: relative;
        left: -2px;
    }

    .menu .tab {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        display: inline-block;
        background-color: var(--btc-tab-bg);
        border: 2px solid var(--color-primary);
        padding: 5px;
        margin: 0 2px 0 0;
        position: relative;
        top: 2px;
        z-index: 100;
        cursor: pointer;
    }

    .menu .tab:hover { color: var(--text-inverse); }

    .menu .tab.selected {
        background-color: var(--bg-surface);
        border-bottom: 2px solid var(--bg-surface);
        cursor: default;
    }

    .menu .tab.selected:hover { color: var(--text-primary); }

    .commands {
        max-width: 600px;
        width: 100%;
        margin: auto;
        padding: 10px 0;
        border: 2px solid var(--color-primary);
        box-sizing: border-box;
        font-size: 0.95rem; /* one base size inside the panel; secondary rows use --font-size-sm */
    }

    .commands span { padding: 0 10px; }

    #braincommands .row.notes {
        font-size: var(--font-size-sm);
        padding: 6px 0 0 0;
    }

    #braincommands .error {
        font-size: var(--font-size-sm);
        margin: 10px 10px 4px;
    }

    #brainpassphrase { width: 220px; }
}

@media (max-width: 720px) {
    .menu { left: 0; }

    .keyarea .public,
    .keyarea .pubaddress,
    .keyarea .privwif { float: none; display: block; width: 100%; box-sizing: border-box; }

    .keyarea { height: auto; }

    #btc-strength-bar-wrap { width: 100%; }
}