/* 融资融券维持担保比例：暖米底 + 墨绿仪表盘 + 大圆角卡片
   与期权页的冷灰终端风格刻意区分，仅本页加载 */

:root {
    --mg-bg: #f7f3ec;
    --mg-card: #fffdf9;
    --mg-soft: #f2ece1;
    --mg-ink: #1b1712;
    --mg-ink2: #4c443a;
    --mg-mut: #8b8175;
    --mg-line: #e8dfd0;
    --mg-line2: #d6c9b6;
    --mg-brand: #0f6157;
    --mg-brand-soft: #e6f2ef;
    --mg-safe: #15803d;
    --mg-warn: #b45309;
    --mg-danger: #b3261e;
    --mg-r: 20px;
    --mg-r-sm: 12px;
    --mg-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mg-shadow: 0 1px 2px rgba(27, 23, 18, .04), 0 20px 40px -34px rgba(27, 23, 18, .5);
}

[data-theme="dark"] {
    --mg-bg: #12100d;
    --mg-card: #1b1814;
    --mg-soft: #221e19;
    --mg-ink: #f4efe6;
    --mg-ink2: #cdc3b4;
    --mg-mut: #968b7c;
    --mg-line: #2c2721;
    --mg-line2: #3b342b;
    --mg-brand: #58cfc0;
    --mg-brand-soft: rgba(88, 207, 192, .12);
    --mg-safe: #4ade80;
    --mg-warn: #fbbf24;
    --mg-danger: #f87171;
    --mg-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 22px 44px -34px rgba(0, 0, 0, .9);
}

body { background: var(--mg-bg); }

.mrg {
    font-family: var(--mg-font);
    color: var(--mg-ink);
    background: var(--mg-bg);
    font-size: 14px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}
.mrg *, .mrg *::before, .mrg *::after { box-sizing: border-box; }
.mrg [hidden] { display: none !important; }
.mrg h1, .mrg h2, .mrg h3 { margin: 0; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.mrg p { margin: 0; }
.mrg a { color: var(--mg-brand); text-decoration: none; }
.mrg a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mrg button { font-family: inherit; }
.mrg em { font-style: normal; }
.mrg-shell { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.mrg-sr {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 顶部 ---------- */
.mrg-hero {
    padding: 20px 0 34px;
    border-bottom: 1px solid var(--mg-line);
    background:
        radial-gradient(120% 120% at 88% 0%, rgba(15, 97, 87, .1) 0%, rgba(15, 97, 87, 0) 58%),
        linear-gradient(180deg, #fbf8f2 0%, var(--mg-bg) 100%);
}
[data-theme="dark"] .mrg-hero {
    background:
        radial-gradient(120% 120% at 88% 0%, rgba(88, 207, 192, .12) 0%, rgba(88, 207, 192, 0) 58%),
        linear-gradient(180deg, #17140f 0%, var(--mg-bg) 100%);
}
.mrg-topline {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.mrg-crumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    font-size: 12px; color: var(--mg-mut);
}
.mrg-crumb a { color: var(--mg-mut); }
.mrg-crumb a:hover { color: var(--mg-brand); }
.mrg-crumb span { opacity: .55; }
.mrg-crumb i { font-style: normal; color: var(--mg-ink2); }

.mrg-theme {
    display: inline-flex; flex: none; gap: 2px;
    padding: 3px;
    border: 1px solid var(--mg-line);
    border-radius: 999px;
    background: var(--mg-card);
}
.mrg-theme button {
    padding: 4px 10px;
    border: 0; border-radius: 999px;
    background: transparent; color: var(--mg-mut);
    font-size: 11.5px; cursor: pointer;
    transition: background-color .15s, color .15s;
}
.mrg-theme button:hover { color: var(--mg-ink); }
.mrg-theme button[aria-pressed="true"] { background: var(--mg-brand); color: #fff; }

.mrg-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 40px;
    align-items: start;
    margin-top: 22px;
}
.mrg-h1 { font-size: clamp(29px, 3.5vw, 44px); letter-spacing: -.035em; }
.mrg-h1 span { display: block; margin-top: 4px; color: var(--mg-brand); font-size: .62em; letter-spacing: -.01em; }
.mrg-lede {
    margin-top: 14px; max-width: 36em;
    font-size: 15px; line-height: 1.9; color: var(--mg-ink2);
}
.mrg-lede strong { color: var(--mg-ink); font-weight: 700; }

.mrg-formula-card {
    padding: 18px 20px 16px;
    border: 1px solid var(--mg-line);
    border-radius: var(--mg-r);
    background: var(--mg-card);
    box-shadow: var(--mg-shadow);
}
.mrg-formula-k {
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--mg-mut);
}
.mrg-formula {
    margin-top: 7px;
    font-size: 14.5px; line-height: 1.9; color: var(--mg-ink2);
}
.mrg-formula b { color: var(--mg-brand); font-weight: 700; padding: 0 4px; }
.mrg-formula-note {
    display: grid; gap: 5px;
    margin: 12px 0 0; padding: 12px 0 0; list-style: none;
    border-top: 1px dashed var(--mg-line2);
    font-size: 12px; color: var(--mg-ink2);
}
.mrg-formula-note li { display: flex; align-items: center; gap: 7px; }
.mrg-formula-note i { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.i-safe { background: var(--mg-safe); }
.i-warn { background: var(--mg-warn); }
.i-danger { background: var(--mg-danger); }

/* ---------- 输入 ---------- */
.mrg-body { padding-bottom: 56px; }
.mrg-inputs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}
.mrg-card {
    padding: 18px 20px 20px;
    border: 1px solid var(--mg-line);
    border-radius: var(--mg-r);
    background: var(--mg-card);
    box-shadow: var(--mg-shadow);
}
.mrg-card-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    margin-bottom: 12px;
}
.mrg-card-head h2 { font-size: 14.5px; }
.mrg-card-head span { font-size: 11.5px; color: var(--mg-mut); }

.mrg-field + .mrg-field { margin-top: 11px; }
.mrg-field label {
    display: block;
    font-size: 12.5px; font-weight: 600; color: var(--mg-ink2);
}
.mrg-box {
    display: flex; align-items: center;
    margin-top: 5px;
    border: 1px solid var(--mg-line2);
    border-radius: var(--mg-r-sm);
    background: var(--mg-card);
    transition: border-color .15s, box-shadow .15s;
}
.mrg-box:focus-within {
    border-color: var(--mg-brand);
    box-shadow: 0 0 0 3px var(--mg-brand-soft);
}
.mrg-box.is-bad { border-color: var(--mg-danger); box-shadow: 0 0 0 3px rgba(179, 38, 30, .1); }
.mrg-box input, .mrg-box select {
    flex: 1; min-width: 0;
    padding: 9px 4px 9px 12px;
    border: 0; background: transparent;
    font-family: inherit;
    font-size: 14.5px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mg-ink);
    outline: none;
}
.mrg-box input::placeholder { color: var(--mg-mut); font-weight: 400; }
.mrg-box select { cursor: pointer; appearance: none; }
.mrg-box em {
    flex: none; padding: 0 12px 0 6px;
    font-style: normal; font-size: 12px; color: var(--mg-mut);
}
.mrg-card-lines .mrg-box { position: relative; }
.mrg-card-lines .mrg-box select { padding-right: 34px; }
.mrg-card-lines .mrg-box::after {
    content: "";
    position: absolute; right: 14px; top: 50%;
    width: 7px; height: 7px; margin-top: -5px;
    border-right: 1.8px solid var(--mg-mut);
    border-bottom: 1.8px solid var(--mg-mut);
    transform: rotate(45deg);
    pointer-events: none;
}
.mrg-tip {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px dashed var(--mg-line);
    font-size: 11.5px; line-height: 1.75; color: var(--mg-mut);
}

.mrg-samples {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-top: 14px;
    font-size: 12px; color: var(--mg-mut);
}
.mrg-samples button {
    padding: 5px 13px;
    border: 1px dashed var(--mg-line2);
    border-radius: 999px;
    background: transparent;
    color: var(--mg-ink2);
    font-size: 12px; cursor: pointer;
    transition: border-color .15s, color .15s, background-color .15s;
}
.mrg-samples button:hover {
    border-style: solid;
    border-color: var(--mg-brand);
    color: var(--mg-brand);
    background: var(--mg-brand-soft);
}

.mrg-err {
    margin-top: 14px; padding: 10px 14px;
    border: 1px solid rgba(179, 38, 30, .35);
    border-radius: var(--mg-r-sm);
    background: rgba(179, 38, 30, .07);
    font-size: 12.5px; color: var(--mg-danger);
}

/* ---------- 仪表盘 ---------- */
.mrg-board {
    position: relative;
    margin-top: 18px;
    padding: 24px 26px 20px;
    border: 1px solid #0a4a43;
    border-radius: var(--mg-r);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(88, 207, 192, .22) 0%, rgba(88, 207, 192, 0) 55%),
        linear-gradient(160deg, #12594f 0%, #0a3f39 100%);
    color: #f2f7f4;
    box-shadow: 0 24px 48px -36px rgba(9, 60, 54, .9);
}
[data-theme="dark"] .mrg-board {
    border-color: #2e5f56;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(88, 207, 192, .16) 0%, rgba(88, 207, 192, 0) 55%),
        linear-gradient(160deg, #14332e 0%, #0d211f 100%);
    box-shadow: 0 24px 48px -36px #000;
}
.mrg-board-top {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 28px;
    flex-wrap: wrap;
}
.mrg-board-k {
    font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(226, 243, 238, .72);
}
.mrg-ratio {
    display: flex; align-items: baseline; gap: 4px;
    margin-top: 2px;
    font-size: clamp(44px, 6.4vw, 68px);
    font-weight: 800; line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}
.mrg-ratio em { font-size: 18px; font-weight: 600; color: rgba(226, 243, 238, .7); }
.mrg-status {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px; font-weight: 700;
    background: rgba(255, 255, 255, .14);
    color: #f2f7f4;
}
.mrg-status.is-safe { background: rgba(74, 222, 128, .22); color: #c9f7d8; }
.mrg-status.is-warn { background: rgba(251, 191, 36, .22); color: #fde9b8; }
.mrg-status.is-danger { background: rgba(248, 113, 113, .26); color: #ffd5d5; }
.mrg-status.is-idle { background: rgba(255, 255, 255, .1); color: rgba(242, 247, 244, .75); }

.mrg-sums {
    display: grid;
    gap: 6px;
    margin: 0;
    min-width: 240px;
}
.mrg-sums > div {
    display: flex; align-items: baseline; justify-content: space-between; gap: 22px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.mrg-sums > div:last-child { border-bottom: 0; padding-bottom: 0; }
.mrg-sums dt { font-size: 12px; color: rgba(226, 243, 238, .66); }
.mrg-sums dd {
    margin: 0;
    font-size: 14px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mrg-gauge { margin-top: 20px; }
.mrg-gauge-track {
    position: relative;
    display: flex; gap: 3px;
    height: 12px;
}
.mrg-zone { height: 100%; border-radius: 4px; }
.mrg-zone.z-danger { flex: 0 0 32.5%; background: #c9433a; }
.mrg-zone.z-warn { flex: 0 0 5%; background: #e0a33a; }
.mrg-zone.z-safe { flex: 0 0 37.5%; background: #4ea87a; }
.mrg-zone.z-over { flex: 1; background: #5bd0c0; }
.mrg-mark {
    position: absolute; top: -6px;
    width: 3px; height: 24px;
    border-radius: 2px;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(9, 60, 54, .55);
    transform: translateX(-1.5px);
    transition: left .28s cubic-bezier(.22, .61, .36, 1);
}
.mrg-gauge-scale {
    position: relative;
    height: 16px;
    margin-top: 8px;
    font-size: 11px; color: rgba(226, 243, 238, .6);
    font-variant-numeric: tabular-nums;
}
.mrg-gauge-scale span {
    position: absolute; top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}
.mrg-gauge-scale span:first-child { left: 0; transform: none; }
.mrg-gauge-scale span:nth-child(4) { left: 75%; }
.mrg-gauge-scale span:last-child { left: 100%; transform: translateX(-100%); }
.mrg-gauge-scale #mgScaleCall { transform: translateX(-100%); padding-right: 2px; }
.mrg-gauge-scale #mgScaleWarn { transform: none; padding-left: 2px; }
.mrg-gauge-note {
    margin-top: 6px;
    font-size: 12px; color: rgba(226, 243, 238, .78);
}

/* ---------- 指标卡 ---------- */
.mrg-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}
.mrg-metric {
    position: relative;
    padding: 16px 18px 15px;
    border: 1px solid var(--mg-line);
    border-radius: var(--mg-r-sm);
    background: var(--mg-card);
    box-shadow: var(--mg-shadow);
    overflow: hidden;
}
.mrg-metric::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--mg-line2);
}
.mrg-metric.is-safe::before { background: var(--mg-safe); }
.mrg-metric.is-warn::before { background: var(--mg-warn); }
.mrg-metric.is-danger::before { background: var(--mg-danger); }
.mrg-metric-k {
    display: block;
    font-size: 11.5px; color: var(--mg-mut);
}
.mrg-metric b {
    display: block; margin-top: 4px;
    font-size: 21px; font-weight: 800; line-height: 1.3;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.mrg-metric p { margin-top: 3px; font-size: 11.5px; line-height: 1.7; color: var(--mg-mut); }

/* ---------- 面板与表格 ---------- */
.mrg-panel {
    margin-top: 18px;
    padding: 20px 22px 22px;
    border: 1px solid var(--mg-line);
    border-radius: var(--mg-r);
    background: var(--mg-card);
    box-shadow: var(--mg-shadow);
}
.mrg-panel-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.mrg-panel-head h2 { font-size: 15px; }
.mrg-panel-head span { font-size: 12px; color: var(--mg-mut); }
.mrg-panel-note { font-size: 12.5px; color: var(--mg-mut); }
.mrg-tablewrap {
    margin-top: 12px;
    overflow-x: auto;
    border: 1px solid var(--mg-line);
    border-radius: var(--mg-r-sm);
}
.mrg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mrg-table th, .mrg-table td {
    padding: 10px 14px;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid var(--mg-line);
    font-variant-numeric: tabular-nums;
}
.mrg-table th {
    background: var(--mg-soft);
    font-size: 11.5px; font-weight: 600; color: var(--mg-mut);
}
.mrg-table th:first-child, .mrg-table td:first-child { text-align: left; }
.mrg-table tbody tr:last-child td { border-bottom: 0; }
.mrg-table tr.is-call { background: rgba(179, 38, 30, .07); }
.mrg-table tr.is-call td { color: var(--mg-danger); }
.mrg-table tr.is-warn-row { background: rgba(180, 83, 9, .06); }
.mrg-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
}
.mrg-tag.t-safe { background: rgba(21, 128, 61, .12); color: var(--mg-safe); }
.mrg-tag.t-warn { background: rgba(180, 83, 9, .13); color: var(--mg-warn); }
.mrg-tag.t-danger { background: rgba(179, 38, 30, .12); color: var(--mg-danger); }
.mrg-empty { text-align: center !important; color: var(--mg-mut); }

/* ---------- 持仓明细 ---------- */
.mrg-mini {
    padding: 5px 12px;
    border: 1px solid var(--mg-line2);
    border-radius: 999px;
    background: var(--mg-card); color: var(--mg-ink2);
    font-size: 12px; cursor: pointer;
    transition: border-color .15s, color .15s;
}
.mrg-mini:hover { border-color: var(--mg-brand); color: var(--mg-brand); }
.mrg-rows { display: grid; gap: 8px; margin-top: 12px; }
.mrg-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}
.mrg-row input {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--mg-line2);
    border-radius: 10px;
    background: var(--mg-card); color: var(--mg-ink);
    font-family: inherit; font-size: 13px;
    font-variant-numeric: tabular-nums;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.mrg-row input:focus { border-color: var(--mg-brand); box-shadow: 0 0 0 3px var(--mg-brand-soft); }
.mrg-row input::placeholder { color: var(--mg-mut); }
.mrg-del {
    width: 30px; height: 30px;
    border: 1px solid var(--mg-line);
    border-radius: 9px;
    background: var(--mg-card); color: var(--mg-mut);
    font-size: 15px; line-height: 1; cursor: pointer;
    transition: border-color .15s, color .15s;
}
.mrg-del:hover { border-color: var(--mg-danger); color: var(--mg-danger); }
.mrg-hold-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px dashed var(--mg-line);
    font-size: 12.5px; color: var(--mg-mut);
}
.mrg-hold-foot b { font-size: 14px; color: var(--mg-ink); font-variant-numeric: tabular-nums; }
.mrg-btn {
    padding: 9px 18px;
    border: 1px solid var(--mg-brand);
    border-radius: 10px;
    background: var(--mg-brand); color: #fff;
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: filter .15s;
}
.mrg-btn:hover { filter: brightness(1.08); }
.mrg-btn-ghost {
    background: transparent; color: var(--mg-brand);
}
.mrg-btn-ghost:hover { background: var(--mg-brand-soft); }

/* ---------- 说明 ---------- */
.mrg-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 26px;
    margin-top: 4px;
}
.mrg-guide-item {
    padding-left: 14px;
    border-left: 2px solid var(--mg-brand-soft);
}
.mrg-guide-item h3 {
    font-size: 13.5px; margin-bottom: 5px;
    color: var(--mg-ink);
}
.mrg-guide-item p { font-size: 13.5px; line-height: 1.95; color: var(--mg-ink2); }
.mrg-guide-item p em { color: var(--mg-brand); font-weight: 700; }

.mrg-faq { margin-top: 22px; }
.mrg-faq details {
    margin-top: 8px;
    border: 1px solid var(--mg-line);
    border-radius: var(--mg-r-sm);
    background: var(--mg-soft);
    overflow: hidden;
}
.mrg-faq summary {
    position: relative;
    padding: 12px 40px 12px 15px;
    font-size: 13.5px; font-weight: 700;
    list-style: none; cursor: pointer;
}
.mrg-faq summary::-webkit-details-marker { display: none; }
.mrg-faq summary::after {
    content: "+"; position: absolute; right: 16px; top: 10px;
    font-size: 17px; font-weight: 400; color: var(--mg-mut);
}
.mrg-faq details[open] summary::after { content: "−"; color: var(--mg-brand); }
.mrg-faq details > div {
    padding: 0 15px 14px;
    font-size: 13px; line-height: 1.9; color: var(--mg-ink2);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1020px) {
    .mrg-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .mrg-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mrg-card-lines { grid-column: span 2; }
    .mrg-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .mrg-shell { padding: 0 16px; }
    .mrg-hero { padding: 16px 0 26px; }
    .mrg-inputs { grid-template-columns: minmax(0, 1fr); }
    .mrg-card-lines { grid-column: auto; }
    .mrg-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .mrg-board { padding: 20px 18px 18px; }
    .mrg-board-top { gap: 18px; }
    .mrg-sums { width: 100%; min-width: 0; }
    .mrg-ratio { font-size: 46px; }
    .mrg-guide-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .mrg-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
    .mrg-table th, .mrg-table td { padding: 9px 11px; }
}
@media (max-width: 480px) {
    .mrg-topline { align-items: flex-start; flex-direction: column; gap: 10px; }
    .mrg-theme { align-self: flex-end; }
    .mrg-metrics { grid-template-columns: minmax(0, 1fr); }
    .mrg-h1 { font-size: 27px; }
    .mrg-ratio { font-size: 42px; }
}