* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html {
      font-size: 13.33333vw;
    }
    
    body {
      background: #f5f5f5;
      font-family: PingFangSC-Regular, 'Microsoft YaHei', Helvetica, sans-serif;
      font-size: 14px;
      color: #333;
    }
    
    .lottery-vertical-container {
      display: flex;
      flex-direction: column;
      width: 100%;
      overflow: hidden;
      background: #f5f5f5;
      padding: 0.1rem 0.16rem 0.08rem 0.16rem;
    }
    
    .lottery-tabs {
      display: flex;
      justify-content: space-between;
      background: #f5f5f5;
      padding: 0;
      gap: 0.04rem;
    }
    
    .lottery-tab {
      flex: 1;
      padding: 0.1rem 0;
      text-align: center;
      font-size: 14px;
      font-weight: bold;
      color: #333;
      cursor: pointer;
      transition: all 0.3s;
      position: relative;
      background: #fff;
      border: none;
      border-radius: 0.16rem 0.16rem 0 0;
      height: 0.86rem;
      overflow: hidden;
      margin-right: 0.04rem;
    }
    
    .lottery-tab:last-child {
      margin-right: 0;
    }
    
    .lottery-tab.active {
      color: #fff;
      background: #07c160;
    }
    
    .lottery-tab .sub-text {
      font-size: 10px;
      font-weight: normal;
      display: block;
      margin-top: 2px;
      opacity: 0.8;
    }
    
    .lottery-tab.active .sub-text {
      opacity: 1;
    }
    
    .lottery-content {
      background: #fff;
      border-radius: 0 0 0.08rem 0.08rem;
      border: 0.02rem solid #07c160;
      padding: 0.12rem 0.12rem 0.08rem 0.12rem;
      margin-bottom: 0.7rem;
    }
    
    .lottery-panel {
      display: none;
    }
    
    .lottery-panel.active {
      display: block;
    }
    
    .lottery-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      padding-bottom: 10px;
      border-bottom: 1px dashed #eee;
    }
    
    .period-info {
      font-size: 14px;
      color: #333;
      font-weight: 400;
      font-style: normal;
      line-height: 1;
    }
    
    .period-info .period-num {
      color: #07c160;
      font-size: 14px;
      font-weight: 400;
      line-height: 1;
    }
    
    .countdown-box {
      display: flex;
      align-items: center;
      gap: 5px;
      color: red;
      font-style: normal;
      font-weight: 400;
    }
    
    .countdown-label {
      font-size: 0.32rem;
      color: red;
    }
    
    .countdown-time {
      font-size: 0.24rem;
      font-weight: 400;
      color: red;
      font-family: PingFangSC-Regular, 'Microsoft YaHei', Helvetica, sans-serif;
    }
    
    .history-link {
      font-size: 0.26rem;
      color: #07c160;
      font-style: normal;
      font-weight: 400;
      text-decoration: none;
    }
    
    .balls-container {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-wrap: nowrap;
      gap: 0.05rem;
      padding: 0.15rem 0 0.1rem 0;
    }
    
    .number-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 0;
      flex-shrink: 0;
    }
    
    .number-ball {
      width: 0.8rem;
      height: 0.8rem;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: bold;
      font-size: 0.4rem;
      margin-bottom: 0.05rem;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      background-size: 100% 100%;
      background-position: center;
      background-repeat: no-repeat;
    }
    
    .ball-red {
      background-image: url('/static/img/ball-red.png');
      color: #000;
    }
    
    .ball-blue {
      background-image: url('/static/img/ball-blue.png');
      color: #000;
    }
    
    .ball-green {
      background-image: url('/static/img/ball-green.png');
      color: #000;
    }
    
    .ball-gray {
      background: linear-gradient(145deg, #ccc, #999);
      color: #fff;
    }
    
    .sxwx-text {
      font-size: 0.24rem;
      color: #666;
      text-align: center;
      white-space: nowrap;
    }
    
    .plus-sign {
      font-size: 0.45rem;
      font-weight: bold;
      color: #999;
      display: flex;
      align-items: center;
      height: 0.8rem;
      margin: 0 0.02rem;
      flex-shrink: 0;
    }
    
    .next-draw-info {
      margin-top: 0.08rem;
      margin-bottom: 0;
      padding-top: 0.08rem;
      padding-bottom: 0;
      border-top: 1px dashed #eee;
      font-size: 0.24rem;
      color: #e71607;
      text-align: center;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
    }
    
    .next-draw-info .highlight {
      color: #e71607;
      font-weight: 400;
    }
    
    /* 加载和错误状态 */
    .loading {
      text-align: center;
      padding: 20px;
      color: #999;
    }
    
    .error-message {
      color: #e74c3c;
      text-align: center;
      padding: 20px;
    }
    
    /* 响应式 */
    @media (max-width: 450px) {
      .lottery-header {
        flex-wrap: wrap;
        gap: 8px;
      }
      .countdown-label { font-size: 11px; }
      .countdown-time { font-size: 14px; }
      .history-link { font-size: 11px; }
    }
    
    @media (max-width: 400px) {
      .lottery-vertical-container { padding: 0.08rem 0.12rem; }
      .lottery-tab { font-size: 12px; padding: 0.08rem 0; height: 0.76rem; }
      .lottery-tab .sub-text { font-size: 9px; }
      .lottery-content { padding: 10px; }
      .balls-container { gap: 0.08rem; }
      .countdown-box { flex-wrap: wrap; justify-content: center; }
    }
    
    @media (max-width: 350px) {
      .lottery-vertical-container { padding: 0.05rem 0.1rem; }
      .lottery-tab { font-size: 11px; padding: 0.06rem 0; height: 0.7rem; }
      .lottery-tab .sub-text { font-size: 8px; }
      .lottery-content { padding: 8px; }
      .balls-container { gap: 0.05rem; }
      .lottery-header { flex-direction: column; align-items: flex-start; }
      .countdown-box { width: 100%; justify-content: space-between; }
      .history-link { align-self: flex-end; }
    }