:root {
    --bg: #f4f7fb;
    --panel: #ffffff;
    --text: #1a2a3a;
    --muted: #5b6b7c;
    --line: #d8e1eb;
    --line-dark: #c6d1de;
    --primary: #2f6fed;
    --primary-soft: #e9f0ff;
    --danger-soft: #ffe3e3;
    --danger-text: #8b2222;
    --shadow: 0 6px 20px rgba(17, 38, 68, 0.06);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

h1, h2, h3 { margin: 0 0 10px; }
h2 { font-size: 26px; }
h3 { font-size: 18px; }

p { margin: 0; color: var(--muted); }

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(6px);
}

.brand { font-weight: 700; color: #10223a; }

.topbar nav { display: flex; gap: 14px; align-items: center; }

.topbar a {
    color: #354b63;
    text-decoration: none;
    font-weight: 500;
    padding: 6px 8px;
    border-radius: 6px;
}

.topbar a:hover { background: #f1f5fb; }
.topbar .logout { color: #954848; }
.topbar .nav-disabled {
    color: #9aa7b5;
    background: #f2f5f8;
    border: 1px solid #e1e7ef;
    padding: 6px 8px;
    border-radius: 6px;
    font-weight: 600;
    cursor: not-allowed;
    user-select: none;
}

.container { max-width: 1360px; margin: 24px auto; padding: 0 18px; }

.page-header { margin-bottom: 14px; }
.page-subtitle { margin-top: 4px; font-size: 14px; }
.page-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.mode-switch {
    display: grid;
    gap: 6px;
    justify-items: end;
    font-size: 12px;
    color: #556a82;
    font-weight: 600;
}

.mode-switch-buttons {
    display: flex;
    gap: 6px;
}

.mode-btn.active {
    background: #2f6fed;
    border-color: #2f6fed;
    color: #fff;
}

.panel,
.card,
.login-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--shadow);
}

.card-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
}

.card-grid.four { grid-template-columns: repeat(4, minmax(200px, 1fr)); }
.card-grid.three { grid-template-columns: repeat(3, minmax(220px, 1fr)); }

.card {
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}

.card:hover {
    border-color: #aac0ea;
    transform: translateY(-1px);
}
.card.tool-card-disabled {
    color: #7b8794;
    background: #f5f7fa;
    border-color: #d9e0e8;
    box-shadow: none;
    cursor: not-allowed;
    filter: grayscale(0.35);
}
.card.tool-card-disabled:hover {
    border-color: #d9e0e8;
    transform: none;
}
.tool-card-disabled .tool-icon {
    background: #e9edf2;
    color: #7b8794;
}
.tool-card-disabled .enter-btn,
.enter-btn.disabled {
    background: #d7dee7;
    color: #647386;
}

.tool-card { display: grid; gap: 8px; }
.dashboard-tools { max-width: 1100px; margin: 0 auto 18px; }
.dashboard-tool { padding: 22px; border-radius: 16px; gap: 12px; }
.tool-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #edf3ff;
    color: #1f4ea2;
    font-size: 20px;
}
.enter-btn {
    display: inline-flex;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    background: #1f4ea2;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}
.tool-tag {
    color: #2f6fed;
    font-size: 12px;
    font-weight: 600;
    background: var(--primary-soft);
    display: inline-block;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
}

.two-col { display: grid; gap: 12px; grid-template-columns: 1.25fr 1fr; }

.loan-layout .panel { min-height: 100%; }

.loan-form-stack { display: grid; gap: 14px; }
.form-section {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
    background: #fcfdff;
}

.form-section h3 { font-size: 15px; margin-bottom: 10px; }

.grid-form { display: grid; gap: 10px; }
.grid-form.dense { grid-template-columns: repeat(2, minmax(220px, 1fr)); align-items: end; }

.grid-form label {
    font-size: 12px;
    font-weight: 600;
    color: #43566c;
    margin-bottom: 6px;
    display: block;
}

input, select, button, textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--line-dark);
    border-radius: 8px;
    font: inherit;
    color: var(--text);
    background: #fff;
}

input:focus, select:focus, textarea:focus {
    border-color: #8fb0ee;
    outline: 2px solid #e2ebfe;
}

button {
    cursor: pointer;
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    font-weight: 600;
}

button:hover { filter: brightness(0.97); }

.btn-secondary,
#copySummaryBtn {
    background: #fff;
    color: #31527f;
    border-color: #b9c9df;
}

.btn-inline,
#copySummaryBtn {
    width: auto;
    min-width: 110px;
    padding: 8px 12px;
}

.row-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 8px;
}

.metric-grid {
    margin-bottom: 14px;
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(160px, 1fr));
}

.metric-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f9fbff;
    padding: 10px;
}
.result-cards .metric-card.warn { border-color: #f3c16c; background: #fff7ea; }
.result-cards .metric-card.danger { border-color: #f2a2a2; background: #fff0f0; }
.result-cards .metric-card.info { border-color: #b8cef6; background: #eff4ff; }

.metric-label {
    font-size: 12px;
    font-weight: 600;
    color: #53667f;
    margin-bottom: 6px;
}

.metric-value {
    font-size: 18px;
    font-weight: 700;
    color: #17273d;
}

.summary-header-row,
.section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

textarea { resize: vertical; line-height: 1.45; }

table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--line); padding: 10px 8px; text-align: left; font-size: 13px; }
th { color: #41566f; font-weight: 600; }

td button {
    width: auto;
    padding: 6px 10px;
    margin-right: 6px;
}

.module-pill {
    background: #edf3ff;
    color: #2d5fc0;
    border: 1px solid #d6e3fb;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 600;
}

.text-link {
    color: #406bb7;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.text-link:hover { text-decoration: underline; }

.result-grid { margin-top: 10px; display: grid; gap: 6px; font-size: 14px; color: #2b3c50; }
.hidden { display: none !important; }

.login-card { max-width: 420px; margin: 80px auto; }
.hint { margin-bottom: 16px; }
.test-account {
    margin-top: 14px;
    background: #f6f8fc;
    border: 1px dashed #c3cedc;
    border-radius: 8px;
    padding: 10px;
    font-size: 13px;
    color: #405367;
}

.flash-wrap { margin-bottom: 10px; }
.flash { padding: 9px 10px; border-radius: 8px; margin-bottom: 6px; border: 1px solid transparent; }
.flash.error { background: var(--danger-soft); color: var(--danger-text); border-color: #f2b5b5; }

pre {
    background: #f4f7fc;
    color: #33475d;
    border: 1px solid var(--line);
    padding: 12px;
    border-radius: 8px;
    overflow-x: auto;
}

@media (max-width: 1080px) {
    .card-grid.four { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
    .card-grid.three { grid-template-columns: 1fr; }
    .two-col { grid-template-columns: 1fr; }
    .row-actions { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
    .miner-ticker-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
    .miner-layout,
    .miner-detail-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .topbar { flex-direction: column; align-items: flex-start; }
    .topbar nav { flex-wrap: wrap; }
    .grid-form.dense,
    .metric-grid { grid-template-columns: 1fr; }
    .miner-page-header { display: block; }
    .miner-header-actions { justify-content: flex-start; margin-top: 10px; }
    .miner-ticker-grid { grid-template-columns: 1fr; }
    .ticker-card strong { font-size: 18px; }
    .step-row { display: grid; }
}

.section-block {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
    background: #fcfdff;
    margin-bottom: 12px;
}

.field-help {
    font-size: 12px;
    margin-bottom: 10px;
}

.collateral-rows {
    display: grid;
    gap: 10px;
}

.collateral-row {
    display: grid;
    gap: 8px;
    grid-template-columns: 1.2fr 1fr 1fr 1fr auto;
    align-items: end;
    border: 1px dashed #c7d4e8;
    border-radius: 10px;
    padding: 10px;
    background: #f9fbff;
}

.notice-box {
    border: 1px solid #f0d99c;
    background: #fff9e9;
    color: #7f5f1b;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
    font-size: 13px;
}
.mode-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.mode-tab {
    width: auto;
    background: #fff;
    color: #31527f;
    border: 1px solid #b9c9df;
    padding: 8px 14px;
    border-radius: 999px;
}
.mode-tab.active {
    background: #2f6fed;
    color: #fff;
    border-color: #2f6fed;
}
.single-row { grid-template-columns: repeat(6, minmax(120px, 1fr)); }
.sync-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 14px;
    color: #334a64;
}
.checkbox-row input { width: auto; }
.hero-result {
    border: 1px solid #d5e0f1;
    background: #f8fbff;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 12px;
}
.hero-label { color: #4a6280; font-size: 12px; font-weight: 600; }
#heroResultCard h3 { margin: 6px 0; font-size: 20px; }
#heroResultValue { font-size: 34px; font-weight: 800; color: #15345f; }
.quote-summary-wrap { background: #f9fbfe; }
.quote-summary {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    min-height: 170px;
}

.miner-page-header {
    align-items: center;
}

.miner-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.data-time {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.miner-ticker-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    margin-bottom: 14px;
}

.ticker-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff, #f7fbff);
    box-shadow: var(--shadow);
    padding: 14px;
}

.ticker-card span {
    display: block;
    color: #5a6f86;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
}

.ticker-card strong {
    color: #12243b;
    font-size: 22px;
    line-height: 1.1;
}

.miner-layout {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .9fr);
    margin-bottom: 14px;
}

.miner-detail-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.miner-control-panel,
.miner-result-panel {
    min-height: 100%;
}

.miner-form {
    display: grid;
    gap: 14px;
}

.miner-actions {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
}

.miner-hero {
    background: linear-gradient(180deg, #f8fbff, #eef5ff);
}

#minerHeroValue {
    font-size: 34px;
    font-weight: 800;
    color: #15345f;
}

.miner-steps {
    display: grid;
    gap: 8px;
}

.step-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f9fbff;
    padding: 10px 12px;
}

.step-row span {
    color: #50657d;
    font-size: 13px;
    font-weight: 650;
}

.step-row strong {
    color: #142a45;
    white-space: nowrap;
}

.muted-panel {
    background: #f5f7fa;
    color: #6c7886;
    box-shadow: none;
}

.feature-badge-disabled {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #d7dee7;
    color: #647386;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.capacity-item {
    padding: 10px 0;
    border-bottom: 1px dashed #d5dfed;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #2d4361;
}
.capacity-item:last-child { border-bottom: none; }
.capacity-item strong { color: #13355f; font-size: 18px; }

.table-wrap {
    overflow-x: auto;
}

.module-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.model-explain {
    margin-top: 8px;
    margin-bottom: 8px;
    border: 1px dashed #b6c6de;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    color: #4b6077;
    background: #f5f8ff;
}

.event-flags {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
}

.event-flags label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.event-flags input {
    width: auto;
}

@media (max-width: 960px) {
    .collateral-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* 2026 UI refresh */
:root {
    --bg: #eef3f8;
    --panel: #ffffff;
    --text: #172333;
    --muted: #667589;
    --line: #dbe4ee;
    --line-dark: #c3cfdd;
    --primary: #2459d6;
    --primary-soft: #eaf1ff;
    --accent: #0f8a7a;
    --accent-soft: #e5f7f3;
    --amber-soft: #fff4df;
    --danger-soft: #ffeded;
    --danger-text: #932c2c;
    --shadow: 0 14px 34px rgba(28, 43, 63, 0.08);
}

body {
    min-height: 100vh;
    background: linear-gradient(180deg, #f7fafc 0%, var(--bg) 42%, #edf2f7 100%);
    letter-spacing: 0;
}

.topbar {
    min-height: 58px;
    padding: 10px 22px;
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(199, 211, 225, 0.75);
    box-shadow: 0 8px 28px rgba(37, 53, 73, 0.06);
}

.brand,
.brand:hover {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #152236;
    text-decoration: none;
    font-weight: 800;
    padding: 0;
    background: transparent;
}

.brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-grid;
    place-items: center;
    background: #162033;
    color: #fff;
    font-size: 15px;
    line-height: 1;
    font-weight: 800;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.12);
}

.topbar nav {
    gap: 6px;
    padding: 3px;
    border: 1px solid #e0e7f0;
    border-radius: 10px;
    background: #f7f9fc;
}

.topbar a,
.topbar .nav-disabled {
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 14px;
    color: #344960;
    white-space: nowrap;
}

.topbar a.is-active {
    color: #102a56;
    background: #fff;
    box-shadow: 0 1px 5px rgba(26, 42, 61, 0.08);
}

.topbar .logout {
    color: #9b3d3d;
}

.topbar .nav-disabled {
    border: 0;
}

.container {
    max-width: 1440px;
    margin: 20px auto 36px;
    padding: 0 22px;
}

.page-header {
    margin-bottom: 16px;
    padding: 2px 2px 0;
}

h1, h2, h3 {
    color: #162236;
    letter-spacing: 0;
}

h2 {
    font-size: 28px;
    line-height: 1.15;
}

.page-subtitle,
.hint {
    color: #667589;
}

.panel,
.card,
.login-card,
.form-section,
.section-block,
.collateral-row,
.metric-card,
.ticker-card,
.hero-result,
pre,
.test-account,
.notice-box,
.model-explain {
    border-radius: 8px;
}

.panel,
.card,
.login-card {
    border-color: rgba(199, 211, 225, 0.9);
    box-shadow: var(--shadow);
}

.panel {
    padding: 18px;
}

.form-section,
.section-block {
    border-color: #dce6f1;
    background: #fbfdff;
}

.form-section {
    padding: 14px;
}

.form-section h3,
.section-title-row h3 {
    font-size: 16px;
    color: #1f3046;
}

input, select, button, textarea {
    min-height: 42px;
    border-radius: 8px;
    border-color: #c5d1df;
}

input, select, textarea {
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(20, 36, 54, 0.03);
}

input:hover, select:hover, textarea:hover {
    border-color: #aebdd0;
}

input:focus, select:focus, textarea:focus {
    border-color: #739bea;
    outline: 3px solid #e7efff;
}

button {
    min-height: 42px;
    box-shadow: 0 6px 14px rgba(36, 89, 214, 0.16);
}

.btn-secondary,
#copySummaryBtn,
.mode-tab {
    box-shadow: none;
}

.btn-secondary:hover,
#copySummaryBtn:hover,
.mode-tab:hover {
    background: #f7faff;
}

.row-actions {
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.loan-layout {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
    align-items: start;
}

.input-panel,
.result-panel {
    position: relative;
}

.result-panel {
    position: sticky;
    top: 78px;
}

.hero-result {
    border-color: #c9d8ea;
    background: #f5f9ff;
}

#heroResultValue,
#minerHeroValue {
    color: #102b57;
}

.metric-grid {
    gap: 10px;
}

.metric-card {
    padding: 12px;
    background: #f8fbff;
    border-color: #d9e3f0;
}

.result-cards .metric-card.warn {
    border-color: #f1c875;
    background: var(--amber-soft);
}

.result-cards .metric-card.info {
    border-color: #9bcfc7;
    background: var(--accent-soft);
}

.metric-label {
    color: #607087;
}

.metric-value {
    color: #152236;
}

.notice-box {
    border-color: #edd18b;
    background: #fff7e8;
}

.mode-tabs {
    padding: 4px;
    width: fit-content;
    border: 1px solid #dbe5f0;
    border-radius: 10px;
    background: #f4f7fb;
}

.mode-tab {
    min-height: 36px;
    border: 0;
    background: transparent;
}

.mode-tab.active {
    background: #fff;
    color: #133c87;
    box-shadow: 0 1px 6px rgba(35, 53, 78, 0.1);
}

.collateral-row {
    border-style: solid;
    background: #f8fbff;
}

.single-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.single-row > div {
    min-width: 0;
}

.sync-col {
    justify-content: end;
}

.sync-col button {
    white-space: nowrap;
}

.quote-summary {
    color: #26384d;
    background: #f7f9fc;
}

details summary {
    cursor: pointer;
    color: #344960;
    font-weight: 700;
}

.dashboard-tools {
    max-width: none;
}

.dashboard-tool {
    min-height: 190px;
    padding: 18px;
    border-radius: 8px;
    position: relative;
    align-content: start;
}

.dashboard-tool h3 {
    margin-top: 4px;
}

.dashboard-tool p {
    min-height: 42px;
}

.tool-card {
    gap: 10px;
}

.tool-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #152236;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}

.tool-tag {
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 7px;
}

.tool-tag.accent {
    background: #fff1dc;
    color: #945d08;
}

.tool-tag.muted {
    color: #6e7d8d;
    background: #eceff4;
}

.enter-btn {
    border-radius: 7px;
    background: #2459d6;
}

.enter-btn.disabled,
.tool-card-disabled .enter-btn {
    background: #d7dee8;
    color: #657488;
}

.tool-card-disabled .tool-icon {
    background: #d8dee8;
}

.miner-ticker-grid {
    gap: 12px;
}

.ticker-card {
    background: #fff;
}

.ticker-card strong {
    font-size: 21px;
}

.miner-layout {
    gap: 16px;
}

.miner-hero {
    background: #f5f9ff;
}

.step-row {
    border-radius: 8px;
    background: #fbfdff;
}

.muted-panel {
    border-style: dashed;
    background: #f3f6fa;
}

.feature-badge-disabled {
    border-radius: 7px;
}

.history-layout {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    align-items: start;
}

.history-detail-panel {
    position: sticky;
    top: 78px;
}

table {
    min-width: 680px;
}

th {
    background: #f6f8fb;
    color: #52657b;
}

th, td {
    padding: 11px 10px;
}

tbody tr:hover {
    background: #fafcff;
}

td button {
    min-height: 34px;
    background: #fff;
    color: #31527f;
    border-color: #b9c9df;
    box-shadow: none;
}

.module-pill {
    border-radius: 7px;
    background: var(--primary-soft);
}

.auth-shell {
    background: #eef3f8;
}

.auth-shell .container {
    max-width: 1120px;
    min-height: 100vh;
    display: grid;
    align-items: center;
    margin: 0 auto;
    padding: 34px 22px;
}

.login-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .72fr);
    gap: 18px;
    width: 100%;
}

.login-hero-panel,
.login-card {
    min-height: 470px;
}

.login-hero-panel {
    border: 1px solid #d7e1ec;
    border-radius: 8px;
    background: #152236;
    color: #fff;
    padding: 34px;
    display: grid;
    align-content: space-between;
    box-shadow: var(--shadow);
}

.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
}

.login-hero-panel .brand-mark {
    background: #fff;
    color: #152236;
}

.login-hero-panel h1 {
    color: #fff;
    font-size: 42px;
    line-height: 1.08;
    max-width: 520px;
}

.login-hero-panel p {
    color: #c9d4e2;
    font-size: 16px;
    max-width: 520px;
}

.login-signal-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.login-signal-grid span {
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 7px;
    color: #eef4fb;
    padding: 8px 10px;
    background: rgba(255,255,255,.06);
    font-weight: 700;
}

.login-card {
    margin: 0;
    max-width: none;
    padding: 26px;
    display: grid;
    align-content: center;
    gap: 18px;
}

.login-card-head {
    display: grid;
    gap: 4px;
}

.eyebrow {
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
}

.login-form {
    gap: 12px;
}

.login-form label {
    margin-bottom: 6px;
}

.test-account {
    display: grid;
    gap: 4px;
    background: #f7f9fc;
    color: #4c6076;
}

@media (max-width: 1320px) {
    .loan-layout {
        grid-template-columns: 1fr;
    }

    .result-panel,
    .history-detail-panel {
        position: static;
    }

    .single-row {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }
}

@media (max-width: 1180px) {
    .miner-layout,
    .miner-detail-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .topbar {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        padding: 10px 14px;
    }

    .topbar nav {
        overflow-x: auto;
        justify-content: flex-start;
    }

    .container {
        margin-top: 16px;
        padding: 0 14px;
    }

    .page-header {
        display: block;
    }

    .card-grid.three,
    .card-grid.four,
    .history-layout,
    .login-layout {
        grid-template-columns: 1fr;
    }

    .login-hero-panel,
    .login-card {
        min-height: auto;
    }

    .login-hero-panel h1 {
        font-size: 34px;
    }

    .single-row,
    .collateral-row {
        grid-template-columns: 1fr 1fr;
    }

    .miner-page-header {
        display: block;
    }

    .miner-header-actions {
        justify-content: flex-start;
        margin-top: 10px;
    }

    .miner-ticker-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    h2 {
        font-size: 24px;
    }

    .panel,
    .login-card,
    .login-hero-panel {
        padding: 14px;
    }

    .topbar .brand span:last-child {
        white-space: normal;
    }

    .grid-form.dense,
    .single-row,
    .collateral-row,
    .row-actions,
    .miner-actions,
    .metric-grid {
        grid-template-columns: 1fr;
    }

    .mode-tabs {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .miner-ticker-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-tool {
        min-height: 0;
    }

    .login-hero-panel h1 {
        font-size: 30px;
    }

    .auth-shell .container {
        padding: 18px 12px;
    }
}