.nettv {
        max-width: -webkit-fill-available;
      }

      .container {
        max-width: 1340px;
        margin: 0 auto;
        padding: 0 15px;
      }

      .title {
        text-align: center;
        margin: 20px 0 20px 0;
      }

      /* 主内容区样式 */
      main {
        flex: 1;
        padding: 32px 0;
      }

      .intro-card {
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        padding: 24px;
        margin-bottom: 32px;
        transition: all 0.3s ease;
      }

      .intro-card:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
      }

      .intro-card h2 {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .intro-card h2 i {
        color: #165DFF;
      }

      .intro-card p {
        color: #666;
        margin-bottom: 16px;
        line-height: 1.5;
      }

      .rules-container {
        background-color: #F5F7FA;
        border-radius: 8px;
        padding: 16px;
      }

      .rules-container h3 {
        font-size: 16px;
        margin-bottom: 8px;
        font-weight: 500;
      }

      .rules-container ul {
        color: #666;
        list-style: none;
        max-height: 115px;
        overflow: hidden;
        transition: max-height 0.5s ease;
        padding: 0;
        margin: 0;
      }
      
      .rules-container ul.expanded {
          max-height: 1000px;
      }
      
      .rules-container li {
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .rules-container li i {
        color: #36CFC9;
      }

      .show-more-btn {
        background: none;
        border: none;
        color: #165DFF;
        cursor: pointer;
        font-size: 14px;
        margin-top: 8px;
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .show-more-btn:hover {
        color: #f00;
        text-decoration: none;
      }

      /* 输入输出区域 */
      .input-output {
        display: flex;
        flex-direction: column;
        gap: 32px;
      }

      .card {
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        transition: all 0.3s ease;
      }

      .card:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
      }

      .card-header {
        padding: 16px;
        color: white;
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
      }

      .input-card .card-header {
        background-color: #165DFF;
      }

      .output-card .card-header {
        background-color: #36CFC9;
      }

      .card-body {
        padding: 15px;
      }

      textarea {
        width: -webkit-fill-available;
        width: -moz-available;
        height: 300px;
        padding: 16px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        resize: none;
        font-family: inherit;
        font-size: 14px;
        line-height: 1.5;
        transition: all 0.3s ease;
      }

      textarea:focus {
        outline: none;
        border-color: #165DFF;
        box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2);
      }

      .button-group {
        margin-top: 16px;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }

      .btn {
        padding: 8px 16px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        transition: all 0.3s ease;
        font-family: inherit;
      }

      .btn-primary {
        background-color: #165DFF;
        color: white;
      }

      .btn-primary:hover {
        background-color: #0E4CD1;
        transform: scale(1.05);
      }

      .btn-primary:active {
        transform: scale(0.95);
      }

      .btn-secondary {
        background-color: #36CFC9;
        color: white;
      }

      .btn-secondary:hover {
        background-color: #2DB8B2;
      }

      .btn-gray {
        background-color: #F44336;
        color: #ffffff;
      }

      .btn-gray:hover {
        background-color: #d32f2f;
      }

      .btn-green {
        background-color: #22c55e;
        color: white;
      }

      .btn-green:hover {
        background-color: #16a34a;
      }

      .btn-dark {
        background-color: #333;
        color: white;
      }

      .btn-dark:hover {
        background-color: #222;
      }

      .btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      .output-container {
        width: -webkit-fill-available;
        height: 300px;
        padding: 16px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        background-color: #f9f9f9;
        overflow: auto;
        font-size: 14px;
        line-height: 1.5;
      }

      .output-container pre {
        color: #333;
        white-space: pre-wrap;
        font-family: inherit;
        margin: 0;
      }

      .output-placeholder {
        color: #aaa;
        text-align: center;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .output-actions {
        margin-top: 16px;
        display: flex;
        justify-content: flex-end;
        gap: 12px;
      }

      /* 历史记录区域 */
      .history-section {
        margin-top: 32px;
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        overflow: hidden;
      }

      .history-header {
        padding: 16px;
        background-color: #333;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
      }

      .history-header h2 {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        margin: 0;
      }

      .history-header button {
        background: none;
        border: none;
        color: white;
        cursor: pointer;
        font-size: 14px;
        transition: color 0.3s ease;
        font-family: inherit;
      }

      .history-header button:hover {
        color: #ddd;
      }

      .history-container {
        padding: 24px;
        max-height: 240px;
        overflow: auto;
      }

      .history-item {
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 16px;
        margin-bottom: 16px;
      }

      .history-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
      }

      .history-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
      }

      .history-time {
        font-size: 12px;
        color: #888;
      }

      .history-load {
        font-size: 12px;
        color: #165DFF;
        background: none;
        border: none;
        cursor: pointer;
        text-decoration: underline;
        font-family: inherit;
      }

      .history-content {
        font-size: 14px;
        color: #555;
        overflow: hidden;
        white-space: pre-line;
      }

      .history-placeholder {
        color: #aaa;
        text-align: center;
        padding: 32px 0;
      }

      /* 提示框样式 */
      .toast {
        position: fixed;
        bottom: 24px;
        right: 24px;
        background-color: #1D2129;
        color: white;
        padding: 12px 24px;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        display: flex;
        align-items: center;
        gap: 8px;
        transform: translateY(80px);
        opacity: 0;
        transition: all 0.3s ease;
        z-index: 100;
      }

      .toast.show {
        transform: translateY(0);
        opacity: 1;
      }

      /* 预加载的规则内容 */
      #rulesContent {
        display: none;
      }

      /* 响应式样式 */
      @media (min-width: 768px) {
        .input-output {
          flex-direction: row;
        }

        .card {
          flex: 1;
        }
      }