body{font-family:system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Microsoft YaHei", sans-serif; margin:22px; background:#fafafa;}
    .top{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
    .pill{display:inline-block; padding:3px 10px; border-radius:999px; background:#fff; border:1px solid #e6e6e6; font-size:12px;}
    .tabs{display:flex; gap:8px; margin:14px 0; flex-wrap:wrap;}
    .tab{padding:8px 12px; border:1px solid #e6e6e6; background:#fff; border-radius:10px; cursor:pointer; user-select:none;}
    .tab.active{border-color:#bbb; font-weight:600;}
    .grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px;}
    .card{background:#fff; border:1px solid #e6e6e6; border-radius:14px; padding:14px;}
    table{width:100%; border-collapse:collapse; font-size:13px;}
    th,td{border-bottom:1px solid #f0f0f0; padding:8px; text-align:left; vertical-align:top;}
    .muted{color:#666;}
    .right{text-align:right;}
    .row{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
    select,input,button,textarea{padding:8px 10px; border-radius:10px; border:1px solid #e6e6e6; background:#fff; font-family:inherit;}
    textarea{width:100%; min-height:340px; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px;}
    button{cursor:pointer;}
    button.primary{border-color:#bbb; font-weight:600;}
    canvas{width:100%; height:220px; border:1px solid #f0f0f0; border-radius:12px;}
    .kpi{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:10px;}
    .kpi .box{border:1px solid #f0f0f0; border-radius:12px; padding:10px;}
    .kpi .v{font-size:18px; font-weight:700;}
    .toast{position:fixed; right:18px; bottom:18px; background:#111; color:#fff; padding:10px 12px; border-radius:12px; opacity:0; transform:translateY(8px); transition:all .2s;}
    .toast.show{opacity:1; transform:translateY(0);}
    @media (max-width: 900px){ .grid{grid-template-columns:1fr;} .kpi{grid-template-columns:1fr 1fr;} }
  
    .modal{position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; align-items:center; justify-content:center; padding:18px;}
    .modal.show{display:flex;}
    .modal .panel{width:min(1100px, 98vw); max-height:90vh; overflow:auto; background:#fff; border-radius:16px; border:1px solid #e6e6e6; padding:14px;}
    pre{white-space:pre; overflow:auto;}
    .diff{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px; line-height:1.35;}
    .diff .line{display:flex;}
    .diff .n{width:52px; color:#999; text-align:right; padding-right:10px; user-select:none;}
    .diff .t{flex:1;}
    .diff .chg{background:#fff7e6;}
    .diff .add{background:#ecfff1;}
    .diff .del{background:#ffecec;}
    .top_a{
      text-decoration: none;
      color: #666;
    }
      .ws-item { padding:8px; border:1px solid #eee; border-radius:6px; margin-bottom:8px; cursor:pointer; background:#fff; transition:0.2s }
      .ws-item:hover { border-color:#aaa; }
      .ws-item.active { border-color:#007bff; background:#f0f7ff; }

      /* Session Bar Improvements */
      .session-pill {
        display: flex;
        align-items: center;
        padding: 4px 10px;
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
        gap: 6px;
      }
      .session-pill:hover {
        border-color: #aaa;
        background: #f5f5f5;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      }
      .session-pill.profit { background: #f6ffed; border-color: #b7eb8f; }
      .session-pill.loss { background: #fff1f0; border-color: #ffa39e; }
      .session-pill.active { background: #e6f7ff; border-color: #91d5ff; font-weight: 600; }
      
      .session-tag {
        padding: 0px 4px;
        border-radius: 3px;
        font-size: 10px;
        font-weight: bold;
        text-transform: uppercase;
      }
      .tag-buy { background: #e6f7ff; color: #1890ff; border: 1px solid #91d5ff; }
      .tag-sell { background: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; }

      /* Scrollbar for Session Bar */
      .pills-wrapper::-webkit-scrollbar { height: 4px; }
      .pills-wrapper::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
      .pills-wrapper::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }
      .pills-wrapper::-webkit-scrollbar-thumb:hover { background: #999; }

      /* Chart Legend Styling */
      .chart-legend {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 2;
        font-size: 12px;
        color: #333;
        background: rgba(255, 255, 255, 0.85);
        padding: 8px 12px;
        border-radius: 6px;
        pointer-events: none;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        line-height: 1.4;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        border: 1px solid rgba(0,0,0,0.05);
      }
      .chart-legend b { color: #666; margin-right: 4px; font-weight: 500; }
      .chart-legend span { margin-right: 12px; font-weight: 600; }
      .price-live-box {
        display: inline-block;
        padding: 2px 8px;
        background: #26a69a;
        color: #fff;
        border-radius: 4px;
        margin-right: 12px;
        font-weight: bold;
        font-size: 14px;
        transition: background 0.3s;
      }
      .price-live-box.down { background: #ef5350; }
      .legend-up { color: #26a69a; }
      .legend-down { color: #ef5350; }

      /* Session Pills Styling */
      .session-pill {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 6px;
        cursor: pointer;
        white-space: nowrap;
        font-size: 12px;
        transition: all 0.2s;
        height: 52px; /* 增加高度以容纳两行文字 */
        box-sizing: border-box;
      }
      .session-pill:hover { border-color: #2196F3; background: #f0f7ff; }
      .session-pill.active { border-color: #2196F3; background: #e3f2fd; box-shadow: 0 2px 4px rgba(33, 150, 243, 0.1); }
      .session-pill.profit { border-left: 4px solid #26a69a; }
      .session-pill.loss { border-left: 4px solid #ef5350; }

      /* Filter Buttons for Sessions */
      .session-filter-btn {
        padding: 4px 12px;
        border: 1px solid #e0e0e0;
        background: #fff;
        border-radius: 6px;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.2s;
        color: #666;
      }
      .session-filter-btn:hover { border-color: #bbb; background: #f9f9f9; }
      .session-filter-btn.active {
        background: #2196F3;
        color: #fff;
        border-color: #2196F3;
        font-weight: 600;
      }
      .session-filter-btn.profit.active { background: #26a69a; border-color: #26a69a; }
      .session-filter-btn.loss.active { background: #ef5350; border-color: #ef5350; }

      /* Fullscreen Mode */
      .chart-main-area.fullscreen {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 9999 !important;
        background: #fff !important;
        padding: 15px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
      }
      .fullscreen-btn {
        padding: 4px 10px;
        font-size: 12px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
      }
      .fullscreen-btn:hover { background: #f5f5f5; border-color: #bbb; }
      .fullscreen-btn.active { background: #eee; border-color: #999; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }

      /* Trade Log Area */
      .trade-log-container {
        margin-top: 12px;
        /* border: 1px solid #e6e6e6; */
        border-radius: 10px;
        background: #fff;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .trade-log-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 14px;
        background: #fcfcfc;
        border-bottom: 1px solid #f0f0f0;
        font-size: 13px;
        font-weight: 600;
      }
      .trade-log-content {
        padding: 12px;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: 12px;
        line-height: 1.5;
        max-height: 200px;
        overflow-y: auto;
        white-space: pre-wrap;
        background: #fafafa;
      }
      .trade-log-content.collapsed {
        display: none;
      }
      .log-btn {
        padding: 2px 8px;
        font-size: 11px;
        margin-left: 8px;
        border-radius: 4px;
        background: #fff;
        border: 1px solid #ddd;
        cursor: pointer;
      }
      .log-btn:hover { background: #f0f0f0; }