* { box-sizing: border-box; }
body { margin: 0; background: #0d1117; color: #e6edf3; font-family: Inter, Arial, sans-serif; }
.hidden { display: none !important; }
.container { max-width: 1180px; margin: 40px auto; padding: 0 20px; }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.header-actions { display: flex; align-items: center; gap: 10px; }
h1 { margin: 0; font-size: 30px; }
h2 { margin: 0; font-size: 18px; }
h3 { margin: 0; font-size: 18px; }
p { color: #8b949e; margin: 6px 0 0; }

.status { padding: 8px 14px; border-radius: 20px; font-size: 14px; }
.online { color: #3fb950; background: rgba(63,185,80,.12); }
.offline { color: #f85149; background: rgba(248,81,73,.12); }

.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 16px; }
.card, .panel { background: #161b22; border: 1px solid #30363d; border-radius: 12px; }
.card { padding: 20px; }
.card span { display: block; color: #8b949e; margin-bottom: 8px; }
.card strong { font-size: 18px; }
.panel { padding: 20px; margin-bottom: 16px; }
.panel-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 15px; }

code { color: #79c0ff; word-break: break-all; }

button { border: 1px solid #30363d; background: #21262d; color: #e6edf3; border-radius: 7px; padding: 8px 14px; cursor: pointer; }
button:hover { background: #30363d; }

input { border: 1px solid #30363d; background: #0d1117; color: #e6edf3; border-radius: 7px; padding: 10px 12px; }

.table-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px; border-bottom: 1px solid #21262d; white-space: nowrap; }
th { color: #8b949e; font-size: 13px; }
td { font-size: 14px; }
.empty { text-align: center; color: #8b949e; padding: 30px; }

.muted { color: #8b949e; font-size: 13px; margin-top: 6px; }

.gas-grid { display: grid; grid-template-columns: 1fr 220px; gap: 16px; margin-bottom: 16px; }
.gas-grid span { display: block; color: #8b949e; margin-bottom: 6px; }
.gas-form { display: flex; gap: 10px; }
.gas-form input { flex: 1; }

.networks-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(420px,1fr)); gap: 12px; margin-top: 14px; }
.network-item { border: 1px solid #30363d; border-radius: 10px; padding: 14px 16px; background: #0d1117; }
.network-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.network-left { min-width: 0; }
.network-name { font-weight: 600; font-size: 16px; line-height: 1.2; }
.network-chain { color: #8b949e; font-size: 13px; margin-top: 4px; }
.network-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.network-toggle { display: flex; align-items: center; gap: 8px; }
.network-toggle input { width: 16px; height: 16px; margin: 0; }
.network-enabled { color: #3fb950; font-weight: 600; }
.network-disabled { color: #8b949e; font-weight: 600; }
.network-edit-btn { padding: 6px 12px; }
.network-details { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid #21262d; }
.network-details.open { display: block; }
.network-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.network-fields label { display: block; color: #8b949e; font-size: 13px; margin-bottom: 6px; }
.network-fields input { width: 100%; }

.wallet-row { cursor: pointer; }
.wallet-row:hover { background: #1c2128; }
.permit-yes { color: #3fb950; font-weight: 600; }
.permit-warn { color: #d29922; font-weight: 600; }
.permit-no { color: #8b949e; }
.tx-success { color: #3fb950; font-weight: 600; }
.tx-failed { color: #f85149; font-weight: 600; }

.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.78); align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.modal.open { display: flex; }
.modal-box { width: 100%; max-width: 1320px; max-height: 90vh; overflow-y: auto; background: #161b22; border: 1px solid #30363d; border-radius: 12px; padding: 28px; }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 26px; }
.modal-header h2 { font-size: 24px; }
.modal-header code { display: block; margin-top: 8px; }
.modal-section + .modal-section { margin-top: 30px; padding-top: 26px; border-top: 1px solid #30363d; }
.modal-section h3 { margin-bottom: 14px; }

.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-box { width: 100%; max-width: 410px; background: #161b22; border: 1px solid #30363d; border-radius: 14px; padding: 28px; }
.login-box h1 { font-size: 26px; }
.login-box p { margin-bottom: 24px; }
.login-box label { display: block; color: #8b949e; font-size: 13px; margin: 14px 0 7px; }
.login-box input { width: 100%; }
.login-box button { width: 100%; margin-top: 18px; padding: 11px 14px; }
.login-status { min-height: 20px; color: #f85149; margin-top: 12px; font-size: 13px; }

@media (max-width: 900px) {
    .networks-list { grid-template-columns: 1fr; }
    .network-fields { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .cards { grid-template-columns: 1fr; }
    header { align-items: flex-start; gap: 15px; flex-direction: column; }
    .header-actions { width: 100%; justify-content: space-between; }
    .gas-grid { grid-template-columns: 1fr; }
    .gas-form { flex-direction: column; }
    .network-top { flex-direction: column; align-items: flex-start; }
    .network-actions { width: 100%; justify-content: space-between; }
    .modal-box { padding: 18px; }
}

.network-toolbar { display: flex; gap: 8px; }
.tokens-header { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid #21262d; }
.token-add-btn { padding: 6px 10px; }
.token-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.token-row { display: grid; grid-template-columns: 100px minmax(220px,1fr) 80px 130px 90px 70px 42px; gap: 8px; align-items: center; }
.token-row input, .token-row select { width: 100%; }
.token-enabled { display: flex; align-items: center; gap: 5px; color: #8b949e; font-size: 12px; }
.token-enabled input { width: 16px; height: 16px; margin: 0; }
.token-remove { padding: 8px 0; }
@media (max-width: 900px) { .token-row { grid-template-columns: 90px 1fr 80px; } .token-enabled, .token-remove { grid-column: auto; } }
@media (max-width: 700px) { .network-toolbar { width: 100%; } .network-toolbar button { flex: 1; } .token-row { grid-template-columns: 1fr; } }

.network-bootstrap-log {
    margin: 12px 0 4px;
    padding: 10px 12px;
    min-height: 54px;
    max-height: 170px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid #21262d;
    border-radius: 8px;
    background: #010409;
    color: #8b949e;
    font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Router Manager redesign */
.network-card-v2 { padding: 0; overflow: hidden; }
.network-top-v2 { padding: 16px 18px; background: linear-gradient(180deg, rgba(255,255,255,.015), transparent); }
.network-name-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.network-pill { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .05em; border: 1px solid #30363d; }
.pill-on { color: #3fb950; background: rgba(63,185,80,.08); border-color: rgba(63,185,80,.3); }
.pill-off { color: #8b949e; background: rgba(139,148,158,.06); }
.network-router-summary { display: flex; align-items: center; gap: 8px; margin-top: 8px; min-width: 0; }
.network-router-summary span { color: #8b949e; font-size: 12px; }
.network-router-summary code { font-size: 12px; }
.network-actions-v2 { gap: 8px; }
.network-details { padding: 16px 18px 18px; margin-top: 0; }
.network-control-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 14px; }
.network-config-box, .router-manager-box { border: 1px solid #21262d; border-radius: 10px; background: #0b1016; padding: 14px; min-width: 0; }
.section-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.section-title-row strong { display: block; font-size: 14px; }
.section-title-row span { display: block; color: #8b949e; font-size: 12px; margin-top: 4px; line-height: 1.35; }
.network-fields-v2 { grid-template-columns: 1fr 1fr; }
.network-fields-v2 .field-wide { grid-column: 1 / -1; }
.setting-toggle { display: flex !important; align-items: center; gap: 8px; margin: 0 !important; padding: 9px 10px; border: 1px solid #30363d; border-radius: 7px; background: #0d1117; color: #c9d1d9 !important; cursor: pointer; }
.setting-toggle input { width: 16px !important; height: 16px; margin: 0; }
.active-router-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid #30363d; border-radius: 9px; background: #0d1117; }
.active-router-card > div { min-width: 0; }
.active-router-card span { display: block; color: #8b949e; font-size: 11px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.active-router-address { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.primary-action { border-color: rgba(88,166,255,.55); background: rgba(88,166,255,.12); color: #79c0ff; font-weight: 600; }
.primary-action:hover { background: rgba(88,166,255,.2); }
button:disabled { opacity: .5; cursor: not-allowed; }
.mini-button { padding: 5px 9px; font-size: 11px; }
.router-note { margin: 10px 0; padding: 9px 10px; border-left: 3px solid #d29922; background: rgba(210,153,34,.06); color: #b1bac4; font-size: 12px; line-height: 1.4; border-radius: 0 6px 6px 0; }
.router-register-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin: 10px 0; }
.router-register-row input { min-width: 0; }
.router-list { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; max-height: 300px; overflow: auto; }
.router-list-empty { padding: 14px; border: 1px dashed #30363d; border-radius: 8px; color: #8b949e; font-size: 12px; text-align: center; }
.router-history-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid #21262d; border-radius: 8px; background: #0d1117; }
.router-history-row.is-active { border-color: rgba(63,185,80,.38); background: rgba(63,185,80,.035); }
.router-history-main { min-width: 0; }
.router-history-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.router-history-title code { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.router-history-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; color: #8b949e; font-size: 10px; }
.router-history-actions { display: flex; gap: 6px; align-items: center; }
.router-badge { display: inline-flex; align-items: center; border: 1px solid #30363d; border-radius: 999px; padding: 2px 5px; color: #8b949e; font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.router-badge.active { color: #3fb950; border-color: rgba(63,185,80,.35); background: rgba(63,185,80,.08); }
.log-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; }
.log-header strong { font-size: 12px; }
.log-header span { color: #8b949e; font-size: 11px; }
.network-bootstrap-log { margin-top: 7px; }

@media (max-width: 980px) {
    .network-control-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .network-fields-v2 { grid-template-columns: 1fr; }
    .network-fields-v2 .field-wide { grid-column: auto; }
    .active-router-card { grid-template-columns: 1fr; }
    .router-register-row { grid-template-columns: 1fr; }
    .router-history-row { grid-template-columns: 1fr; }
    .router-history-actions { justify-content: flex-start; flex-wrap: wrap; }
    .network-router-summary { align-items: flex-start; flex-direction: column; gap: 3px; }
}

/* ========================================================================== */
/* Networks workspace redesign                                                 */
/* ========================================================================== */

.networks-panel { padding: 0; overflow: hidden; }
.networks-panel-header { margin: 0; padding: 20px; border-bottom: 1px solid #30363d; }
.networks-panel-header .network-toolbar { flex-wrap: wrap; }

.network-workspace {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    min-height: 650px;
}

.network-sidebar {
    min-width: 0;
    background: #0d1117;
    border-right: 1px solid #30363d;
    padding: 14px 10px;
}
.network-sidebar-title {
    padding: 2px 10px 10px;
    color: #8b949e;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.network-nav { display: flex; flex-direction: column; gap: 6px; }
.network-nav-empty { padding: 18px 10px; color: #8b949e; font-size: 13px; line-height: 1.5; }
.network-nav-item {
    width: 100%;
    display: block;
    padding: 11px 12px;
    text-align: left;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 9px;
    color: #e6edf3;
}
.network-nav-item:hover { background: #161b22; border-color: #21262d; }
.network-nav-item.is-selected {
    background: rgba(88,166,255,.09);
    border-color: rgba(88,166,255,.42);
    box-shadow: inset 3px 0 0 #58a6ff;
}
.network-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.network-nav-name { min-width: 0; display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 13px; }
.network-state-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #484f58; }
.network-state-dot.is-on { background: #3fb950; box-shadow: 0 0 0 3px rgba(63,185,80,.08); }
.network-state-dot.is-off { background: #6e7681; }
.network-unsaved-dot { color: #d29922; font-size: 12px; }
.network-nav-meta { display: block; margin: 5px 0 0 16px; color: #8b949e; font-size: 11px; line-height: 1.3; }
.network-nav-meta.meta-ok { color: #7ee787; }
.network-nav-meta.meta-muted { color: #6e7681; }

.network-detail { min-width: 0; background: #161b22; }
.network-empty-state { display: grid; place-items: center; min-height: 420px; padding: 40px; color: #8b949e; text-align: center; }
.network-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 92px;
    padding: 19px 22px;
    border-bottom: 1px solid #30363d;
}
.network-detail-identity { min-width: 0; }
.network-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.network-title-row h2 { font-size: 20px; }
.network-detail-meta { margin-top: 7px; color: #8b949e; font-size: 12px; word-break: break-word; }
.network-pill { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 999px; font-size: 10px; font-weight: 750; letter-spacing: .04em; border: 1px solid #30363d; }
.pill-on { color: #7ee787; border-color: rgba(63,185,80,.35); background: rgba(63,185,80,.08); }
.pill-off { color: #8b949e; background: rgba(139,148,158,.05); }
.pill-dirty { color: #e3b341; border-color: rgba(210,153,34,.38); background: rgba(210,153,34,.08); }

.network-power-control { display: flex; align-items: center; gap: 12px; cursor: pointer; flex-shrink: 0; }
.power-copy { text-align: right; }
.power-copy strong, .power-copy small { display: block; }
.power-copy strong { font-size: 12px; }
.power-copy small { margin-top: 3px; color: #8b949e; font-size: 10px; }
.switch { position: relative; display: inline-flex; width: 42px; height: 23px; flex: 0 0 42px; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track { width: 100%; height: 100%; border: 1px solid #484f58; border-radius: 999px; background: #21262d; transition: .18s ease; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 4px; width: 15px; height: 15px; border-radius: 50%; background: #8b949e; transition: .18s ease; }
.switch input:checked + .switch-track { background: rgba(46,160,67,.28); border-color: #3fb950; }
.switch input:checked + .switch-track::after { left: 22px; background: #7ee787; }
.switch input:focus-visible + .switch-track { outline: 2px solid #58a6ff; outline-offset: 2px; }
.switch input:disabled + .switch-track { opacity: .55; cursor: wait; }

.network-tabs {
    display: flex;
    gap: 3px;
    padding: 0 18px;
    overflow-x: auto;
    border-bottom: 1px solid #30363d;
    background: #0d1117;
}
.network-tab {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 12px 10px 10px;
    background: transparent;
    color: #8b949e;
    font-size: 12px;
    white-space: nowrap;
}
.network-tab:hover { background: transparent; color: #e6edf3; }
.network-tab.is-active { color: #f0f6fc; border-bottom-color: #58a6ff; }
.network-tab-content { padding: 18px 20px 4px; }
.network-section-stack { display: flex; flex-direction: column; gap: 14px; }

.detail-section {
    padding: 16px;
    border: 1px solid #30363d;
    border-radius: 10px;
    background: #0d1117;
}
.detail-section h3 { font-size: 14px; }
.detail-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.detail-section-header p, .section-description { margin-top: 5px; color: #8b949e; font-size: 12px; line-height: 1.55; }
.compact-info-section { background: rgba(88,166,255,.025); }
.danger-section { border-color: rgba(248,81,73,.32); }
.error-box { margin-top: 10px; padding: 10px 12px; color: #ff7b72; background: rgba(248,81,73,.07); border-radius: 7px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.error-text { color: #ff7b72 !important; }

.health-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.health-card { min-width: 0; padding: 12px; border: 1px solid #21262d; border-radius: 8px; background: #161b22; }
.health-card-label { color: #8b949e; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.health-card-value { margin-top: 6px; font-size: 13px; font-weight: 700; word-break: break-word; }
.health-card-description { margin-top: 5px; color: #8b949e; font-size: 10px; line-height: 1.4; word-break: break-word; }
.health-ok { color: #7ee787; }
.health-warn { color: #e3b341; }
.health-bad { color: #ff7b72; }
.health-neutral { color: #c9d1d9; }

.info-callout { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; padding: 11px 12px; border: 1px solid #30363d; border-left-width: 3px; border-radius: 7px; font-size: 12px; line-height: 1.45; }
.info-callout strong { font-size: 12px; color: #e6edf3; }
.info-callout span { color: #8b949e; }
.info-callout.success { border-left-color: #3fb950; background: rgba(63,185,80,.045); }
.info-callout.neutral { border-left-color: #6e7681; background: rgba(139,148,158,.025); }
.info-callout.warning { border-left-color: #d29922; background: rgba(210,153,34,.055); }
.info-callout.policy { border-left-color: #58a6ff; background: rgba(88,166,255,.055); }

.quick-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.quick-actions button { font-size: 11px; }

.config-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { display: block; min-width: 0; }
.form-field > input { width: 100%; }
.field-label { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; color: #c9d1d9; font-size: 11px; font-weight: 650; }
.field-badge { padding: 2px 5px; border: 1px solid #30363d; border-radius: 999px; color: #8b949e; font-size: 8px; letter-spacing: .05em; }
.field-help { display: block; margin-top: 6px; color: #6e7681; font-size: 10px; line-height: 1.45; }
.mono-input { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.input-with-suffix { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: stretch; }
.input-with-suffix input { min-width: 0; width: 100%; border-radius: 7px 0 0 7px; }
.input-with-suffix > span { display: flex; align-items: center; padding: 0 10px; border: 1px solid #30363d; border-left: 0; border-radius: 0 7px 7px 0; background: #161b22; color: #8b949e; font-size: 10px; }
.setting-card { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: flex-start; gap: 10px; margin-top: 10px; padding: 12px; border: 1px solid #30363d; border-radius: 8px; background: #161b22; cursor: pointer; }
.setting-card input { width: 16px; height: 16px; margin: 2px 0 0; }
.setting-card strong, .setting-card small { display: block; }
.setting-card strong { font-size: 12px; }
.setting-card small { margin-top: 5px; color: #8b949e; font-size: 10px; line-height: 1.5; }

.current-router-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 14px; border: 1px solid rgba(88,166,255,.28); border-radius: 9px; background: rgba(88,166,255,.04); }
.current-router-main { min-width: 0; }
.eyebrow { display: block; margin-bottom: 7px; color: #79c0ff; font-size: 9px; font-weight: 750; letter-spacing: .08em; }
.current-router-address { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.current-router-stats { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; color: #8b949e; font-size: 10px; }
.current-router-stats strong { color: #c9d1d9; font-weight: 650; }
.action-help { margin-top: 8px; color: #d29922; font-size: 10px; line-height: 1.4; }
.router-register-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-top: 12px; }
.router-register-row input { min-width: 0; }
.router-list { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; max-height: none; overflow: visible; }
.router-list-empty { padding: 18px; border: 1px dashed #30363d; border-radius: 8px; color: #8b949e; font-size: 11px; text-align: center; }
.router-history-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid #21262d; border-radius: 8px; background: #161b22; }
.router-history-main { min-width: 0; }
.router-history-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.router-history-title code { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.router-history-meta { display: flex; gap: 8px 14px; flex-wrap: wrap; margin-top: 7px; color: #8b949e; font-size: 9px; }
.router-history-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.router-badge { display: inline-flex; padding: 2px 5px; border: 1px solid #30363d; border-radius: 999px; color: #8b949e; font-size: 8px; font-weight: 750; letter-spacing: .04em; flex: 0 0 auto; }

.token-help { margin-bottom: 12px; }
.token-editor-table { width: 100%; overflow-x: auto; border: 1px solid #21262d; border-radius: 8px; }
.token-editor-head, .token-row {
    min-width: 800px;
    display: grid;
    grid-template-columns: 95px minmax(230px,1fr) 78px 115px 72px 80px 34px;
    gap: 8px;
    align-items: center;
}
.token-editor-head { padding: 8px 9px; border-bottom: 1px solid #21262d; background: #161b22; color: #8b949e; font-size: 9px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.token-list { display: flex; flex-direction: column; gap: 0; margin: 0; }
.token-row { padding: 8px 9px; border-bottom: 1px solid #21262d; }
.token-row:last-child { border-bottom: 0; }
.token-row input, .token-row select { min-width: 0; width: 100%; padding: 8px 9px; border: 1px solid #30363d; background: #0d1117; color: #e6edf3; border-radius: 6px; font-size: 11px; }
.token-enabled { display: flex; align-items: center; gap: 5px; color: #8b949e; font-size: 10px; white-space: nowrap; }
.token-enabled input { width: 15px; height: 15px; margin: 0; }
.token-remove { min-width: 30px; padding: 7px 0; }
.token-empty { min-width: 800px; padding: 20px; color: #8b949e; font-size: 11px; text-align: center; }
.danger-button { color: #ff7b72; border-color: rgba(248,81,73,.28); background: rgba(248,81,73,.04); }
.danger-button:hover { color: #ffa198; border-color: rgba(248,81,73,.45); background: rgba(248,81,73,.09); }

.network-save-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px 20px 20px; padding: 12px 14px; border: 1px solid rgba(210,153,34,.35); border-radius: 9px; background: rgba(210,153,34,.055); }
.network-save-bar strong, .network-save-bar span { display: block; }
.network-save-bar strong { color: #e3b341; font-size: 12px; }
.network-save-bar span { margin-top: 3px; color: #8b949e; font-size: 10px; }
.save-bar-actions { display: flex; gap: 8px; flex-shrink: 0; }
.saved-state { margin: 10px 20px 18px; color: #6e7681; font-size: 10px; text-align: right; }
.primary-action { border-color: rgba(88,166,255,.55); background: rgba(88,166,255,.13); color: #79c0ff; font-weight: 650; }
.primary-action:hover { background: rgba(88,166,255,.21); }

.network-bootstrap-log { margin: 12px 0 0; min-height: 200px; max-height: 360px; }

@media (max-width: 1040px) {
    .network-workspace { grid-template-columns: 225px minmax(0,1fr); }
    .health-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .config-form { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .networks-panel-header { align-items: flex-start; flex-direction: column; }
    .network-workspace { display: block; }
    .network-sidebar { border-right: 0; border-bottom: 1px solid #30363d; padding: 10px; }
    .network-nav { flex-direction: row; overflow-x: auto; padding-bottom: 2px; }
    .network-nav-item { width: 190px; flex: 0 0 190px; }
    .network-detail-header { align-items: flex-start; flex-direction: column; gap: 14px; }
    .network-power-control { width: 100%; justify-content: space-between; }
    .power-copy { text-align: left; }
    .network-tab-content { padding: 14px 12px 2px; }
    .health-grid { grid-template-columns: 1fr 1fr; }
    .detail-section-header { flex-direction: column; }
    .current-router-card { grid-template-columns: 1fr; }
    .router-register-row { grid-template-columns: 1fr; }
    .router-history-row { grid-template-columns: 1fr; }
    .router-history-actions { justify-content: flex-start; }
    .network-save-bar { align-items: flex-start; flex-direction: column; margin: 12px; }
    .save-bar-actions { width: 100%; }
    .save-bar-actions button { flex: 1; }
    .saved-state { margin: 10px 12px 16px; }
}

@media (max-width: 520px) {
    .health-grid { grid-template-columns: 1fr; }
    .quick-actions { flex-direction: column; }
    .quick-actions button { width: 100%; }
}

/* Temporary TestAutoTransferRouter admin panel */
.test-transfer-panel { border-color: rgba(248,81,73,.28); }
.test-only-badge { display: inline-flex; padding: 4px 8px; border: 1px solid rgba(248,81,73,.38); border-radius: 999px; background: rgba(248,81,73,.07); color: #ff7b72; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.test-transfer-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.test-transfer-actions { margin-top: 14px; }
.test-transfer-message { min-height: 18px; margin-top: 10px; color: #8b949e; font-size: 11px; word-break: break-word; }
.test-transfer-message.success { color: #7ee787; }
.test-transfer-message.error { color: #ff7b72; }
.test-transfer-status { margin-top: 12px; }
.test-transfer-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 10px; }
.test-transfer-summary > div { min-width: 0; padding: 10px; border: 1px solid #21262d; border-radius: 8px; background: #161b22; }
.test-transfer-summary span { display: block; margin-bottom: 5px; color: #8b949e; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.test-transfer-summary code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c9d1d9; font-size: 10px; }
.test-transfer-health { margin-top: 0; }
@media (max-width: 760px) {
    .test-transfer-form, .test-transfer-summary { grid-template-columns: 1fr; }
}

/* Unified EVM / TRON AUTO TRANSFER */
.auto-transfer-panel { border-color: rgba(88,166,255,.26); }
.auto-transfer-header { align-items: flex-start; }
.auto-chain-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid #30363d; border-radius: 9px; background: #0d1117; }
.auto-chain-tab { min-width: 76px; padding: 7px 12px; border: 0; background: transparent; color: #8b949e; font-weight: 700; }
.auto-chain-tab:hover { background: #161b22; color: #e6edf3; }
.auto-chain-tab.active { background: #21262d; color: #79c0ff; box-shadow: inset 0 0 0 1px rgba(88,166,255,.28); }
.auto-transfer-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 14px; }
.auto-transfer-grid .form-field { min-width: 0; }
.auto-transfer-grid select, .auto-transfer-grid input { width: 100%; }
.auto-recipient-field { grid-column: 1 / -1; }
.auto-recipient-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.auto-recipient-row button { white-space: nowrap; }
.auto-transfer-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.auto-transfer-actions .muted { margin: 0 0 0 auto; }
.auto-health-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.auto-transfer-panel .info-callout { margin-top: 10px; }

/* Managed Wallet Vault */
.managed-wallet-modal-box { max-width: 1500px; }
.managed-wallet-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.managed-wallet-filters, .managed-wallet-create, .managed-wallet-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.managed-filter.active { color: #79c0ff; border-color: rgba(88,166,255,.38); background: rgba(88,166,255,.09); }
.managed-wallet-create select { min-width: 220px; border: 1px solid #30363d; background: #0d1117; color: #e6edf3; border-radius: 7px; padding: 8px 10px; }
.managed-wallet-table code { display: inline-block; max-width: 285px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.managed-balance-native { color: #e6edf3; font-weight: 650; }
.managed-balance-tokens { margin-top: 4px; color: #8b949e; font-size: 11px; white-space: normal; }
.managed-balance-error { margin-top: 4px; color: #ff7b72; font-size: 10px; white-space: normal; }
.managed-status { display: inline-flex; padding: 3px 7px; border: 1px solid #30363d; border-radius: 999px; color: #8b949e; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.managed-status-used { color: #7ee787; border-color: rgba(63,185,80,.28); background: rgba(63,185,80,.06); }
.managed-status-failed { color: #ff7b72; border-color: rgba(248,81,73,.28); background: rgba(248,81,73,.06); }
.managed-status-unused { color: #d2a8ff; border-color: rgba(163,113,247,.28); background: rgba(163,113,247,.06); }
.managed-wallet-actions button { padding: 6px 9px; font-size: 10px; }
.managed-secret { margin-top: 7px; max-width: 420px; white-space: normal; }
.managed-secret:empty { display: none; }
.managed-secret code { display: block; max-width: none; padding: 7px 8px; border: 1px solid rgba(248,81,73,.24); border-radius: 6px; background: rgba(248,81,73,.05); color: #ffa198; word-break: break-all; white-space: normal; }
.managed-copy-secret { margin-top: 5px; }

@media (max-width: 900px) {
    .auto-health-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .managed-wallet-toolbar { align-items: flex-start; flex-direction: column; }
    .managed-wallet-create { width: 100%; }
}

@media (max-width: 700px) {
    .auto-transfer-header { flex-direction: column; }
    .auto-chain-tabs { width: 100%; }
    .auto-chain-tab { flex: 1; }
    .auto-transfer-grid { grid-template-columns: 1fr; }
    .auto-recipient-field { grid-column: auto; }
    .auto-recipient-row { grid-template-columns: 1fr; }
    .auto-transfer-actions { align-items: stretch; flex-direction: column; }
    .auto-transfer-actions button { width: 100%; }
    .auto-transfer-actions .muted { margin-left: 0; }
    .auto-health-grid { grid-template-columns: 1fr; }
    .managed-wallet-create { align-items: stretch; flex-direction: column; }
    .managed-wallet-create select, .managed-wallet-create button { width: 100%; }
}
.auto-transfer-grid select { border: 1px solid #30363d; background: #0d1117; color: #e6edf3; border-radius: 7px; padding: 10px 12px; }

/* Network-aware Relayer Vault */
.relayer-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.relayer-toolbar label { min-width: 280px; }
.relayer-toolbar label > span { display: block; color: #8b949e; font-size: 12px; margin-bottom: 6px; }
.relayer-toolbar select { width: 100%; border: 1px solid #30363d; background: #0d1117; color: #e6edf3; border-radius: 7px; padding: 9px 10px; }
.relayer-source { color: #8b949e; font-size: 12px; text-align: right; }
.relayer-gas-grid { grid-template-columns: minmax(0,1.2fr) minmax(180px,.6fr); }
.relayer-actions-row { flex-wrap: wrap; }
.relayer-actions-row input { min-width: 280px; }
.relayer-owner-ok { color: #3fb950; }
.relayer-owner-warn { color: #d29922; }
.relayer-owner-bad { color: #f85149; }
.muted-inline { color: #8b949e; font-size: 12px; font-weight: 400; }
.relayer-secret { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 10px; border: 1px solid #30363d; border-radius: 7px; background: #0d1117; }
.relayer-secret code { flex: 1; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) {
    .relayer-toolbar { align-items: stretch; flex-direction: column; }
    .relayer-toolbar label { min-width: 0; }
    .relayer-source { text-align: left; }
    .relayer-gas-grid { grid-template-columns: 1fr; }
    .relayer-actions-row input { min-width: 0; width: 100%; }
    .relayer-secret { align-items: stretch; flex-direction: column; }
}

/* Connected Wallets: compact chain + current/previous Router state */
.field-badge-evm {
    color: #79c0ff;
    border-color: rgba(88, 166, 255, .35);
    background: rgba(56, 139, 253, .08);
}

.field-badge-tron {
    color: #ff7b72;
    border-color: rgba(248, 81, 73, .35);
    background: rgba(248, 81, 73, .08);
}

.router-status-stack {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    min-width: 150px;
}

.router-status-line {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 20px;
    white-space: nowrap;
}

.router-context-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid #30363d;
    background: #161b22;
    color: #8b949e;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.35;
}

.router-context-prev {
    cursor: help;
    color: #79c0ff;
    border-color: rgba(88, 166, 255, .35);
    background: rgba(56, 139, 253, .08);
}

.router-recorded-note {
    color: #8b949e;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: help;
}