html, body {
      margin: 0;
      padding: 0;
      background-color: #111;
      color: white;
      font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    }

    .config-panel {
      width: 90%;
      max-width: 600px;
      margin: 30px auto;
      background: #1c1c1c;
      padding: 25px;
      border-radius: 12px;
      box-shadow: 0 0 20px rgba(255,255,255,0.1);
    }

    h2 {
      text-align: center;
      color: #4ab3f4;
      font-weight: 700;
      margin-bottom: 0px;
    }

    label {
      font-weight: bold;
      display: block;
      margin-top: 12px;
      margin-bottom: 4px;
    }

    input, textarea, button, select {
      width: 100%;
      font-size: 16px;
      padding: 8px;
      box-sizing: border-box;
      border-radius: 6px;
      border: 1px solid #444;
      background: #1e1e1e;
      color: white;
    }

    input[type="color"] {
      padding: 0;
      height: 40px;
      border: none;
    }

    textarea {
      resize: vertical;
      min-height: 80px;
    }

    .row {
      display: flex;
      gap: 12px;
    }

    .row .half, .row .third {
      flex: 1;
    }

    button {
      background-color: #d00;
      color: white;
      border: none;
      margin-top: 20px;
      padding: 12px;
      cursor: pointer;
      font-weight: bold;
      transition: background-color 0.3s;
    }

    button:hover {
      background-color: #b00000;
    }

    .marquee-container {
      display: flex;
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 60px;
      z-index: 9999;
    }

    .marquee-label, .marquee-time {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      font-weight: bold;
    }

    .marquee-label {
      background-color: #8B0000;
      color: white;
      padding: 0 20px;
      font-size: 24px;
      text-shadow: 1px 1px 2px black;
      border-right: 3px solid #fff;
    }

    .marquee-content {
      flex: 1;
      background-color: red;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
    }

    .marquee-text {
      position: absolute;
      white-space: nowrap;
      font-size: 25px;
      color: white;
      text-shadow: 1px 1px 1px black;
      top: 15%;
      transform: translateY(-58%);
    }

    .marquee-time {
      background-color: #222;
      color: #fff;
      padding: 0 20px;
      font-size: 20px;
    }

    .fade-in {
      animation: fadein 1s ease-in;
    }

    .slide-in {
      animation: slidein 1s ease-in;
    }

    .tag-checkbox {
      margin-top: 20px;
    }

    .tag-checkbox input[type="checkbox"] {
      display: none;
    }

    .tag-checkbox label {
      display: inline-block;
      background-color: #333;
      color: #fff;
      padding: 8px 14px;
      border-radius: 20px;
      cursor: pointer;
      font-weight: 600;
      font-size: 14px;
      transition: all 0.3s ease;
      border: 2px solid transparent;
      user-select: none;
    }

    .tag-checkbox input[type="checkbox"]:checked + label {
      background-color: #ff3b3b;
      border-color: #ff3b3b;
      color: #fff;
      box-shadow: 0 0 5px rgba(255, 59, 59, 0.4);
    }

    .tag-checkbox label:hover {
      opacity: 0.85;
    }

    @keyframes fadein {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes slidein {
      from { transform: translateX(100%); }
      to { transform: translateX(0); }
    }

    @keyframes slidein-right {
      from { transform: translateX(100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }

    @keyframes slideout-right {
      from { transform: translateX(0); opacity: 1; }
      to { transform: translateX(100%); opacity: 0; }
    }

    .marquee-time.slide-in-right {
      animation: slidein-right 0.5s ease-out forwards;
    }

    .marquee-time.slide-out-right {
      animation: slideout-right 0.4s ease-in forwards;
    }

    @keyframes slidein-bottom {
      from { transform: translateY(100%); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    .marquee-container.slide-in-bottom {
      animation: slidein-bottom 0.5s ease-out;
    }