@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600&display=swap");

:root {
  --ink: #0b1020;
  --muted: #727988;
  --line: #dde1e8;
  --soft: #f4f6f8;
  --blue: #195cff;
  --green: #0a9c68;
  --red: #d54848;
  --orange: #d97a17;
  --side: #0a0e18;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: "Manrope", "Noto Sans SC", "Microsoft YaHei", sans-serif; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

/* 登录 / 注册 */
.auth-body { min-height: 100vh; overflow-x: hidden; background: #f3f4f7; }
.auth-brand { position: fixed; z-index: 5; top: 30px; left: 38px; display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.auth-brand > span, .work-brand > span { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid rgba(255,255,255,.34); font-family: serif; font-size: 18px; }
.auth-brand b, .work-brand b { font-size: 16px; font-weight: 600; letter-spacing: .12em; }
.auth-brand small, .work-brand small { display: block; margin-top: 3px; font-size: 7px; font-weight: 500; letter-spacing: .27em; opacity: .55; }
.auth-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(440px, 1.2fr) minmax(420px, .8fr); }
.auth-vision { position: relative; display: flex; overflow: hidden; min-height: 100vh; padding: 160px 7vw 70px; flex-direction: column; justify-content: center; color: #fff; background: radial-gradient(circle at 48% 48%, rgba(32,94,255,.2), transparent 28%), linear-gradient(145deg, #050812, #0c1328 72%, #101a37); }
.auth-vision::before, .auth-vision::after { position: absolute; content: ""; pointer-events: none; }
.auth-vision::before { inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px); background-size: 80px 80px; }
.auth-vision::after { right: 11%; bottom: -20%; width: 420px; height: 420px; border: 1px solid rgba(66,117,255,.3); border-radius: 50%; }
.auth-vision > * { position: relative; z-index: 1; }
.auth-vision > p, .auth-kicker { color: #7597f3; font-size: 11px; letter-spacing: .27em; }
.auth-vision h1 { margin: 24px 0 50px; font-family: "Noto Sans SC", sans-serif; font-size: clamp(42px, 4vw, 72px); font-weight: 500; line-height: 1.28; letter-spacing: -.03em; }
.auth-vision > small { color: rgba(255,255,255,.48); font-size: 12px; letter-spacing: .22em; }
.auth-orbit { position: relative; width: 150px; height: 150px; margin: 0 0 54px 14px; }
.auth-orbit i { position: absolute; inset: 0; border: 1px solid rgba(94,135,255,.28); border-radius: 50%; animation: orbit 8s linear infinite; }
.auth-orbit i:nth-child(2) { inset: 20px; animation-direction: reverse; animation-duration: 6s; }
.auth-orbit i:nth-child(3) { inset: 44px; border-color: rgba(255,255,255,.2); animation-duration: 4s; }
.auth-orbit i::after { position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: #4d82ff; box-shadow: 0 0 14px #4d82ff; content: ""; }
.auth-orbit b { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 30px; font-weight: 400; }
@keyframes orbit { to { transform: rotate(360deg); } }
.auth-panel { display: flex; min-height: 100vh; padding: 80px clamp(38px, 7vw, 108px); flex-direction: column; justify-content: center; background: #fff; }
.auth-tabs { display: flex; gap: 28px; margin-bottom: 64px; border-bottom: 1px solid var(--line); }
.auth-tabs button { position: relative; padding: 0 2px 15px; border: 0; color: #8b909b; background: transparent; cursor: pointer; }
.auth-tabs button.active { color: var(--ink); font-weight: 600; }
.auth-tabs button.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--blue); content: ""; }
.auth-panel h2 { margin: 12px 0 38px; font-size: 30px; font-weight: 500; letter-spacing: -.04em; }
.auth-panel form { display: grid; gap: 23px; }
.auth-panel label { display: grid; gap: 9px; color: #666e7d; font-size: 12px; }
.auth-panel input { width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid #cfd4dd; border-radius: 0; outline: none; color: var(--ink); background: transparent; font-size: 15px; transition: border-color .2s; }
.auth-panel input:focus { border-color: var(--blue); }
.challenge { display: grid; align-items: center; grid-template-columns: 1fr 90px; gap: 18px; }
.challenge b { padding: 13px 16px; color: var(--ink); background: var(--soft); font-size: 15px; font-weight: 500; }
#auth-message { min-height: 18px; margin: -6px 0 0; color: var(--red); font-size: 12px; }
#auth-message.success { color: var(--green); }
.auth-submit { display: flex; min-height: 52px; padding: 0 22px; align-items: center; justify-content: space-between; border: 0; color: #fff; background: var(--ink); cursor: pointer; transition: background .2s, transform .2s; }
.auth-submit:hover { background: var(--blue); transform: translateY(-1px); }
.auth-submit:disabled { opacity: .55; cursor: wait; transform: none; }
.auth-submit span { font-size: 20px; }
.back-site { margin-top: 30px; color: #89909d; font-size: 12px; text-decoration: none; }
.back-site:hover { color: var(--ink); }

/* 站内总工作台 */
.workspace-body { min-height: 100vh; background: #f3f5f7; }
.work-sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; display: flex; width: 248px; padding: 30px 20px 24px; flex-direction: column; color: #fff; background: var(--side); }
.work-sidebar::after { position: absolute; right: 0; bottom: 0; width: 1px; height: 36%; background: linear-gradient(transparent, #245cd1); content: ""; }
.work-brand { display: flex; height: 68px; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.work-sidebar nav { display: grid; gap: 4px; margin-top: 62px; }
.work-sidebar nav button { position: relative; display: grid; min-height: 56px; padding: 0 15px; align-items: center; grid-template-columns: 35px 1fr; border: 0; color: #818a9f; background: transparent; text-align: left; cursor: pointer; transition: color .2s, background .2s; }
.work-sidebar nav button::before { position: absolute; top: 50%; left: -20px; width: 2px; height: 0; background: #4e81ff; content: ""; transition: height .2s, top .2s; }
.work-sidebar nav button i { color: #4f5970; font-size: 9px; font-style: normal; }
.work-sidebar nav button span { font-size: 14px; letter-spacing: .04em; }
.work-sidebar nav button:hover { color: #fff; background: rgba(255,255,255,.035); }
.work-sidebar nav button.active { color: #fff; background: linear-gradient(90deg, rgba(37,91,230,.17), transparent); }
.work-sidebar nav button.active::before { top: 14px; height: 28px; }
.side-foot { display: grid; margin-top: auto; gap: 9px; color: #777f91; font-size: 10px; letter-spacing: .06em; }
.side-foot span { color: #a5adbc; }
.side-foot span i { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #39c68a; box-shadow: 0 0 9px rgba(57,198,138,.7); }
.side-foot a { margin-top: 9px; color: #7899ec; text-decoration: none; }
.work-main { min-height: 100vh; margin-left: 248px; }
.work-topbar { display: flex; height: 86px; padding: 0 clamp(25px, 4vw, 66px); align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92); backdrop-filter: blur(16px); }
.work-topbar > div:first-of-type { display: grid; gap: 5px; }
.work-topbar > div:first-of-type span { color: #9298a4; font-size: 8px; letter-spacing: .25em; }
.work-topbar > div:first-of-type b { font-size: 17px; font-weight: 500; }
.user-box { display: flex; align-items: center; gap: 15px; color: #69717f; font-size: 11px; }
.user-box b { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid #d5d9e0; color: var(--ink); font-size: 12px; font-weight: 500; }
.user-box button { padding: 6px 0; border: 0; color: #7f8794; background: none; font-size: 11px; cursor: pointer; }
.user-box button:hover { color: var(--red); }
.mobile-menu { display: none; border: 0; background: none; font-size: 20px; cursor: pointer; }
.work-view { display: none; max-width: 1500px; min-height: calc(100vh - 86px); padding: clamp(36px, 4.2vw, 68px) clamp(25px, 4vw, 66px) 72px; }
.work-view.active { display: block; animation: fadeView .35s ease both; }
@keyframes fadeView { from { opacity: 0; transform: translateY(8px); } }
.view-heading { display: flex; margin-bottom: 30px; align-items: flex-end; justify-content: space-between; gap: 28px; }
.view-heading > div > span { color: var(--blue); font-size: 9px; letter-spacing: .26em; }
.view-heading h1 { margin: 8px 0 10px; font-size: clamp(28px, 3vw, 42px); font-weight: 500; letter-spacing: -.045em; }
.view-heading p { max-width: 670px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.connect-button, .ghost-action { min-width: 156px; padding: 13px 17px; border: 1px solid var(--ink); color: #fff; background: var(--ink); cursor: pointer; }
.connect-button span { float: right; margin-left: 20px; }
.ghost-action { color: var(--ink); background: transparent; }
.connect-button:hover, .ghost-action:hover { border-color: var(--blue); color: #fff; background: var(--blue); }
.notice { display: flex; min-height: 42px; margin-bottom: 22px; padding: 11px 15px; align-items: center; gap: 10px; border: 1px solid #dbe1ee; color: #657089; background: #f8faff; font-size: 11px; }
.notice i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--blue); }
.notice.warning { border-color: #eee1d0; color: #8a6a41; background: #fffaf4; }
.notice.warning i { background: var(--orange); }
.metric-grid { display: grid; margin-bottom: 22px; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.metric-grid article { min-height: 139px; padding: 23px 25px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.metric-grid small, .risk-dashboard small { display: block; color: #7f8794; font-size: 10px; }
.metric-grid strong { display: block; margin: 17px 0 9px; font-size: 25px; font-weight: 500; }
.metric-grid span, .risk-dashboard span { color: #a0a5af; font-size: 10px; }
.overview-grid { display: grid; margin-bottom: 22px; grid-template-columns: minmax(0, 2fr) minmax(280px, .75fr); gap: 22px; }
.panel { border: 1px solid var(--line); background: #fff; }
.panel-head { display: flex; min-height: 65px; padding: 0 22px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e4e7ec; }
.panel-head > div { display: grid; gap: 4px; }
.panel-head span { font-size: 13px; font-weight: 500; }
.panel-head small { color: #9298a4; font-size: 8px; letter-spacing: .16em; }
.panel-head > b { color: #8492b0; font-size: 9px; font-weight: 500; }
.chart-panel svg { display: block; width: 100%; height: 250px; padding: 27px 21px 21px; overflow: visible; }
.chart-panel .gridline { fill: none; stroke: #edf0f4; stroke-width: 1; }
.chart-panel .area { fill: url(#area); }
.chart-panel .line { fill: none; stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
.system-panel ul { margin: 0; padding: 4px 21px; list-style: none; }
.system-panel li { display: grid; min-height: 49px; align-items: center; grid-template-columns: 18px 1fr auto; border-bottom: 1px solid #edf0f3; font-size: 11px; }
.system-panel li:last-child { border: 0; }
.system-panel li i { width: 6px; height: 6px; border-radius: 50%; background: #aeb4bf; }
.system-panel li i.on { background: var(--green); box-shadow: 0 0 7px rgba(10,156,104,.35); }
.system-panel li b { color: #959ba6; font-size: 9px; font-weight: 500; }
.module-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.module-grid button { position: relative; display: grid; min-height: 170px; padding: 23px; align-content: start; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); background: #fff; text-align: left; cursor: pointer; transition: color .25s, background .25s; }
.module-grid i { margin-bottom: 28px; color: #a6acb8; font-size: 9px; font-style: normal; }
.module-grid b { margin-bottom: 8px; font-size: 14px; font-weight: 500; }
.module-grid span { max-width: 180px; color: #858c98; font-size: 10px; line-height: 1.65; }
.module-grid em { position: absolute; right: 20px; bottom: 17px; font-size: 18px; font-style: normal; }
.module-grid button:hover { color: #fff; background: var(--blue); }
.module-grid button:hover i, .module-grid button:hover span { color: rgba(255,255,255,.72); }

/* 复盘 */
.review-layout { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(260px, .75fr); gap: 22px; }
.trade-row { display: grid; min-height: 68px; padding: 0 22px; align-items: center; grid-template-columns: 2fr .8fr 1fr .8fr; border-bottom: 1px solid #edf0f3; font-size: 11px; }
.trade-row:last-child { border: 0; }
.trade-row.head { min-height: 40px; color: #979da8; background: #fafbfc; font-size: 9px; }
.trade-row small { display: block; margin-top: 5px; color: #8d94a0; font-size: 9px; }
.trade-row .long { color: var(--green); }
.trade-row .short, .negative { color: var(--red); }
.positive { color: var(--green); }
.score-panel { padding-bottom: 22px; }
.score-ring { display: flex; width: 132px; height: 132px; margin: 27px auto 19px; align-items: center; justify-content: center; border: 9px solid #e8eeff; border-top-color: var(--blue); border-right-color: var(--blue); border-radius: 50%; transform: rotate(24deg); }
.score-ring > * { transform: rotate(-24deg); }
.score-ring strong { font-size: 35px; font-weight: 500; }
.score-ring small { margin: 12px 0 0 4px; color: #9ca2ad; font-size: 8px; }
.score-panel ul { margin: 0; padding: 0 22px; list-style: none; }
.score-panel li { display: flex; padding: 11px 0; justify-content: space-between; border-bottom: 1px solid #edf0f3; color: #6f7682; font-size: 10px; }
.score-panel li b { color: var(--ink); }

/* 风控 */
.risk-dashboard { display: grid; margin-bottom: 22px; grid-template-columns: 1.35fr repeat(2, .7fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.risk-dashboard article { min-height: 150px; padding: 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.risk-dashboard strong { display: block; margin: 21px 0 12px; font-size: 28px; font-weight: 500; }
.risk-gauge div { position: relative; height: 5px; margin: 22px 0 11px; background: #ebedf1; }
.risk-gauge div i { position: absolute; inset: 0 auto 0 0; background: var(--blue); }
.risk-gauge div b { position: absolute; top: -4px; width: 1px; height: 13px; background: var(--red); }
.risk-rules { padding-bottom: 22px; }
.rule { display: grid; min-height: 78px; padding: 0 25px; align-items: center; grid-template-columns: minmax(150px, .5fr) 1.5fr 70px; gap: 24px; border-bottom: 1px solid #edf0f3; font-size: 11px; }
.rule input { width: 100%; accent-color: var(--blue); }
.rule b { text-align: right; font-size: 11px; font-weight: 500; }
.rule.locked { opacity: .58; }
.risk-rules > p { margin: 20px 25px 0; color: #9399a4; font-size: 10px; }

/* 跟单 */
.strategy-list { display: grid; gap: 13px; }
.strategy-list article { display: grid; min-height: 102px; padding: 19px 22px; align-items: center; grid-template-columns: 2fr repeat(3, .8fr) 120px; gap: 20px; border: 1px solid var(--line); background: #fff; }
.strategy-name { display: flex; align-items: center; gap: 14px; }
.strategy-name > i { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #ccd7ef; color: var(--blue); font-size: 10px; font-style: normal; }
.strategy-name div { display: grid; gap: 6px; }
.strategy-name b { font-size: 13px; font-weight: 500; }
.strategy-name small, .strategy-list article > div > small { color: #9298a4; font-size: 9px; }
.strategy-list article > div:not(.strategy-name) { display: grid; gap: 8px; }
.strategy-list article > div > b { font-size: 11px; font-weight: 500; }
.risk-low { color: var(--green); }
.risk-mid { color: var(--orange); }
.strategy-list button { padding: 11px; border: 1px solid #dce0e6; color: #9aa0aa; background: #f7f8fa; font-size: 10px; }

/* 策略购买 */
.market-filter { display: flex; margin-bottom: 24px; gap: 8px; }
.market-filter button { padding: 8px 16px; border: 1px solid #d9dde4; color: #7e8591; background: #fff; font-size: 10px; cursor: pointer; }
.market-filter button.active { border-color: var(--ink); color: #fff; background: var(--ink); }
.market-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.market-grid article { position: relative; min-height: 352px; padding: 27px; border: 1px solid var(--line); background: #fff; transition: border-color .2s, transform .2s; }
.market-grid article:hover { border-color: #9db6ee; transform: translateY(-3px); }
.market-grid article.featured::before { position: absolute; top: -1px; right: 22px; width: 39px; height: 3px; background: var(--blue); content: ""; }
.market-grid article > span { color: var(--blue); font-size: 8px; letter-spacing: .2em; }
.market-grid h2 { margin: 25px 0 16px; font-size: 20px; font-weight: 500; }
.market-grid p { min-height: 73px; margin: 0; color: #767e8a; font-size: 11px; line-height: 1.85; }
.market-grid ul { margin: 22px 0 25px; padding: 16px 0; border-top: 1px solid #eceef2; border-bottom: 1px solid #eceef2; color: #747c88; font-size: 10px; line-height: 2.15; list-style: none; }
.market-grid article > div { display: flex; align-items: center; justify-content: space-between; }
.market-grid article > div b { font-weight: 500; }
.market-grid article > div button { padding: 9px 12px; border: 1px solid #d9dde4; color: #9ba1ab; background: #f8f9fa; font-size: 9px; }
.market-disclaimer { margin-top: 21px; padding: 15px 18px; border-left: 2px solid #ccd2dc; color: #8a909b; background: rgba(255,255,255,.55); font-size: 10px; line-height: 1.7; }

@media (max-width: 1100px) {
  .metric-grid, .module-grid { grid-template-columns: repeat(2, 1fr); }
  .market-grid { grid-template-columns: 1fr 1fr; }
  .strategy-list article { grid-template-columns: 1.6fr repeat(2, .7fr) 105px; }
  .strategy-list article > div:nth-child(4) { display: none; }
}

@media (max-width: 760px) {
  .auth-brand { position: absolute; top: 22px; left: 22px; }
  .auth-shell { display: block; }
  .auth-vision { min-height: 43vh; padding: 110px 26px 44px; }
  .auth-vision h1 { margin: 12px 0 25px; font-size: 36px; }
  .auth-orbit { display: none; }
  .auth-vision > small { letter-spacing: .11em; }
  .auth-panel { min-height: 57vh; padding: 43px 26px; }
  .auth-tabs { margin-bottom: 38px; }
  .work-sidebar { width: 230px; transform: translateX(-100%); transition: transform .25s; box-shadow: 18px 0 50px rgba(0,0,0,.18); }
  .work-sidebar.open { transform: translateX(0); }
  .work-main { margin-left: 0; }
  .work-topbar { height: 72px; padding: 0 18px; }
  .mobile-menu { display: block; }
  .user-box #clock { display: none; }
  .work-view { min-height: calc(100vh - 72px); padding: 31px 18px 50px; }
  .view-heading { align-items: flex-start; flex-direction: column; }
  .view-heading .connect-button, .view-heading .ghost-action { width: 100%; }
  .metric-grid, .module-grid, .overview-grid, .review-layout, .risk-dashboard, .market-grid { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric-grid article { min-height: 118px; padding: 18px; }
  .module-grid button { min-height: 142px; }
  .trade-row { padding: 0 14px; grid-template-columns: 1.6fr .7fr .8fr; }
  .trade-row > span:nth-child(3) { display: none; }
  .rule { padding: 17px; grid-template-columns: 1fr 58px; gap: 12px; }
  .rule input { grid-row: 2; grid-column: 1 / -1; }
  .strategy-list article { grid-template-columns: 1fr 1fr; }
  .strategy-list article > div:nth-child(3), .strategy-list article > div:nth-child(4) { display: none; }
  .strategy-list article button { grid-column: 2; grid-row: 1; }
}

@media (max-width: 430px) {
  .metric-grid { grid-template-columns: 1fr; }
  .user-box #current-user { display: none; }
  .market-filter { overflow-x: auto; }
  .market-filter button { flex: 0 0 auto; }
}

/* 复盘增强 */
.review-filters { display: grid; margin-bottom: 18px; padding: 17px 20px; align-items: end; grid-template-columns: repeat(3, minmax(130px, 1fr)) auto; gap: 14px; border: 1px solid var(--line); background: #fff; }
.review-filters label { display: grid; gap: 7px; color: #7d8490; font-size: 9px; }
.review-filters select { width: 100%; padding: 10px 11px; border: 1px solid #e0e3e8; outline: none; color: #565e6b; background: #f8f9fa; font-size: 10px; }
.review-filters > span { padding-bottom: 10px; color: #a1a7b0; font-size: 9px; white-space: nowrap; }
.review-metrics { display: grid; margin-bottom: 22px; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.review-metrics article { min-height: 104px; padding: 18px 21px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.review-metrics small { display: block; color: #828995; font-size: 9px; }
.review-metrics strong { display: block; margin: 13px 0 6px; font-size: 20px; font-weight: 500; }
.review-metrics span { color: #9ca2ac; font-size: 8px; }
.journal-grid { display: grid; margin-top: 22px; grid-template-columns: minmax(0, 1.65fr) minmax(270px, .75fr); gap: 22px; }
.calendar-week, .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendar-week { padding: 13px 18px 8px; color: #969ca7; font-size: 8px; text-align: center; }
.calendar-days { padding: 0 18px 18px; }
.calendar-days > * { display: grid; min-height: 61px; padding: 9px; align-content: start; border: 1px solid #edf0f3; border-right: 0; color: #656d7a; font-size: 9px; font-style: normal; font-weight: 500; }
.calendar-days > *:nth-child(7n) { border-right: 1px solid #edf0f3; }
.calendar-days b small { display: block; margin-top: 13px; font-size: 8px; font-weight: 500; }
.calendar-days .win { color: var(--green); background: #f4fcf8; }
.calendar-days .loss { color: var(--red); background: #fff7f7; }
.tag-note-panel { padding-bottom: 21px; }
.tag-cloud { display: flex; padding: 22px; flex-wrap: wrap; gap: 8px; }
.tag-cloud span { padding: 8px 10px; border: 1px solid #dce1e9; color: #687080; background: #fafbfc; font-size: 9px; }
.tag-note-panel blockquote { margin: 2px 22px 21px; padding: 14px 16px; border-left: 2px solid var(--blue); color: #707887; background: #f7f9fe; font-size: 10px; line-height: 1.8; }
.tag-note-panel > button { margin: 0 22px; padding: 10px 13px; border: 1px solid #dce0e6; color: #9ba1aa; background: #f8f9fa; font-size: 9px; }

/* API 管理 */
.api-stats { display: grid; margin-bottom: 22px; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.api-stats article { min-height: 120px; padding: 22px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.api-stats small { display: block; color: #808794; font-size: 9px; }
.api-stats strong { display: block; margin: 15px 0 8px; font-size: 22px; font-weight: 500; }
.api-stats span { color: #9ba1ab; font-size: 9px; }
.api-layout { display: grid; margin-bottom: 22px; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .72fr); gap: 22px; }
.panel-head button { padding: 7px 11px; border: 1px solid #dce0e7; color: #737b89; background: #fff; font-size: 9px; cursor: pointer; }
.panel-head button:hover { border-color: var(--blue); color: var(--blue); }
.connection-list { min-height: 226px; }
.empty-state { display: flex; min-height: 226px; align-items: center; flex-direction: column; justify-content: center; color: #969ca6; text-align: center; }
.empty-state::before { display: grid; width: 48px; height: 48px; margin-bottom: 15px; place-items: center; border: 1px solid #d9dee6; color: var(--blue); content: "+"; font-size: 20px; }
.empty-state b { margin-bottom: 7px; color: #606875; font-size: 11px; font-weight: 500; }
.empty-state span { font-size: 9px; }
.connection-card { display: grid; min-height: 88px; padding: 16px 20px; align-items: center; grid-template-columns: 43px minmax(130px, 1.4fr) 1fr 1fr 50px; gap: 15px; border-bottom: 1px solid #edf0f3; }
.connection-card:last-child { border-bottom: 0; }
.connection-card > i { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid #ccd8ef; color: var(--blue); font-size: 9px; font-style: normal; }
.connection-card > div { display: grid; gap: 5px; }
.connection-card > div b { font-size: 10px; font-weight: 500; }
.connection-card > div span, .connection-card > div small { color: #8d94a0; font-size: 8px; }
.connection-card .saved-status { color: var(--green); }
.delete-connection { padding: 7px 0; border: 0; color: #9b6e6e; background: transparent; font-size: 9px; cursor: pointer; }
.delete-connection:hover { color: var(--red); }
.api-flow-panel ol { margin: 0; padding: 10px 22px 18px; list-style: none; }
.api-flow-panel li { display: grid; min-height: 57px; align-items: center; grid-template-columns: 35px 1fr; border-bottom: 1px solid #edf0f3; }
.api-flow-panel li:last-child { border: 0; }
.api-flow-panel li > i { color: var(--blue); font-size: 8px; font-style: normal; }
.api-flow-panel li > div { display: grid; gap: 5px; }
.api-flow-panel li b { font-size: 10px; font-weight: 500; }
.api-flow-panel li span { color: #9298a3; font-size: 8px; }
.api-form-card { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.api-form-card > .panel-head, .api-steps, .exchange-picker { grid-column: 1 / -1; }
.api-steps { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.api-steps span { display: flex; min-height: 60px; padding: 0 22px; align-items: center; gap: 11px; border-right: 1px solid #edf0f3; color: #9298a3; font-size: 9px; }
.api-steps span:last-child { border: 0; }
.api-steps i { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid #d7dce4; font-size: 8px; font-style: normal; }
.api-steps .active { color: var(--ink); }
.api-steps .active i { border-color: var(--blue); color: #fff; background: var(--blue); }
.exchange-picker { display: grid; padding: 20px 22px; grid-template-columns: repeat(5, 1fr); gap: 9px; border-bottom: 1px solid var(--line); }
.exchange-picker button { display: grid; min-height: 65px; padding: 12px; align-content: center; gap: 6px; border: 1px solid #dde1e7; color: #626a77; background: #fff; text-align: left; cursor: pointer; }
.exchange-picker button b { font-size: 10px; font-weight: 500; }
.exchange-picker button small { color: #9ba1ac; font-size: 7px; }
.exchange-picker button.active { border-color: var(--blue); color: var(--blue); background: #f6f8ff; box-shadow: inset 0 -2px var(--blue); }
#exchange-form { display: grid; padding: 25px 28px 29px; grid-template-columns: 1fr 1fr; gap: 18px 22px; border-right: 1px solid var(--line); }
#exchange-form > label { display: grid; gap: 8px; color: #6d7581; font-size: 9px; }
#exchange-form input:not([type="checkbox"]) { width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid #d5d9e0; outline: none; color: var(--ink); background: transparent; font-size: 11px; }
#exchange-form input:not([type="checkbox"]):focus { border-color: var(--blue); }
.readonly-confirm { display: flex !important; grid-column: 1 / -1; align-items: flex-start; gap: 9px !important; color: #747c88 !important; line-height: 1.6; }
.readonly-confirm input { width: 14px; height: 14px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--blue); }
#api-form-message { min-height: 16px; margin: 0; grid-column: 1 / -1; color: var(--red); font-size: 9px; }
#api-form-message.success { color: var(--green); }
#save-api { grid-column: 1 / -1; }
.api-guide { padding: 25px 24px; background: #f8f9fb; }
.api-guide > b { font-size: 11px; font-weight: 500; }
.api-guide ol { margin: 19px 0; padding-left: 20px; color: #68717f; font-size: 9px; line-height: 2.2; }
.api-guide p { margin: 0; padding-top: 17px; border-top: 1px solid #dfe3e9; color: #8a919c; font-size: 8px; line-height: 1.75; }

@media (max-width: 1180px) {
  .module-grid { grid-template-columns: repeat(3, 1fr); }
  .api-form-card { grid-template-columns: 1fr 260px; }
}

@media (max-width: 900px) {
  .review-filters { grid-template-columns: 1fr 1fr 1fr; }
  .review-filters > span { display: none; }
  .review-metrics { grid-template-columns: 1fr 1fr; }
  .journal-grid, .api-layout { grid-template-columns: 1fr; }
  .api-form-card { grid-template-columns: 1fr; }
  #exchange-form { border-right: 0; border-bottom: 1px solid var(--line); }
  .api-guide { grid-column: 1; }
  .exchange-picker { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .module-grid, .api-stats { grid-template-columns: 1fr; }
  .review-filters { grid-template-columns: 1fr; }
  .review-metrics { grid-template-columns: 1fr 1fr; }
  .journal-grid { grid-template-columns: 1fr; }
  .calendar-days > * { min-height: 51px; padding: 6px; }
  .calendar-days b small { margin-top: 8px; }
  .exchange-picker { grid-template-columns: 1fr 1fr; padding: 15px; }
  .api-steps span { padding: 0 10px; flex-direction: column; justify-content: center; gap: 5px; text-align: center; }
  #exchange-form { padding: 21px 18px; grid-template-columns: 1fr; }
  #exchange-form > *, .readonly-confirm, #api-form-message, #save-api { grid-column: 1; }
  .connection-card { grid-template-columns: 42px 1fr 45px; }
  .connection-card > div:nth-of-type(2), .connection-card > div:nth-of-type(3) { display: none; }
}

@media (max-width: 430px) {
  .review-metrics { grid-template-columns: 1fr; }
}