/* tomoy-apps-td.css — Transform Digits 固有CSS */
/* 同名クラスがFDと存在するが、別ファイルのため衝突なし */

/* -- RULE SCREEN -- */
    .rule-screen-label {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.5);
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 8px;
      font-weight: 500;
    }

    .rule-diff-badge {
      font-family: 'Space Mono', monospace;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.6);
      letter-spacing: 2px;
      margin-bottom: 4px;
    }

    .rule-vis-desc {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.65);
      margin-bottom: 14px;
      letter-spacing: 0.5px;
    }

    .rule-changed-badge {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1px;
      color: #fdcb6e;
      background: rgba(253, 203, 110, 0.15);
      border: 1px solid rgba(253, 203, 110, 0.4);
      border-radius: 20px;
      padding: 3px 14px;
      margin-bottom: 10px;
      text-transform: uppercase;
    }

    .rule-name-label {
      font-family: 'Space Mono', monospace;
      font-size: 18px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.5);
      letter-spacing: 2px;
      margin-bottom: 8px;
      text-transform: uppercase;
    }

    .rule-screen-badge {
      font-family: 'Space Mono', monospace;
      font-size: clamp(18px, 6vw, 28px);
      font-weight: 700;
      color: #fff;
      background: linear-gradient(135deg, #fd79a8, #e84393);
      padding: 16px 28px;
      border-radius: 16px;
      margin-bottom: 20px;
      box-shadow: 0 8px 28px rgba(232, 67, 147, 0.45);
      letter-spacing: 1px;
      animation: bounceIn 0.4s ease;
    }

/* -- RULE EXAMPLE -- */
    .rule-example {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 12px;
      padding: 10px 18px;
      margin-bottom: 22px;
      font-family: 'Space Mono', monospace;
      font-size: clamp(14px, 4vw, 20px);
      font-weight: 700;
      color: rgba(255, 255, 255, 0.85);
    }

    .rule-example-arrow {
      color: #fd79a8;
      font-size: clamp(16px, 5vw, 22px);
    }

    .rule-example-out {
      color: #74b9ff;
    }

/* -- INPUT SCREEN -- */
    .input-rule-badge {
      display: inline-block;
      font-family: 'Space Mono', monospace;
      font-weight: 700;
      letter-spacing: 1px;
      border-radius: 20px;
      margin-bottom: 8px;
      transition: opacity 0.2s;
    }

    .input-rule-badge.vis-full {
      background: rgba(232, 67, 147, 0.25);
      color: #fd79a8;
      font-size: 12px;
      padding: 4px 14px;
      border: 1px solid rgba(232, 67, 147, 0.4);
      opacity: 1;
    }

    .input-rule-badge.vis-short {
      background: rgba(232, 67, 147, 0.15);
      color: #fd79a8;
      font-size: 12px;
      padding: 3px 12px;
      border: 1px solid rgba(232, 67, 147, 0.25);
      opacity: 0.75;
    }

    .input-rule-badge.vis-hidden {
      display: none;
    }

/* -- RESULT SCREEN -- */
    .result-text span.rule-highlight {
      color: #fd79a8;
    }

/* -- RESPONSIVE (TD-specific overrides only) -- */
    @media (max-height: 700px) {
      .rule-screen-label {
        font-size: 11px;
        margin-bottom: 6px;
      }
      .rule-diff-badge {
        font-size: 11px;
        margin-bottom: 3px;
      }
      .rule-vis-desc {
        font-size: 11px;
        margin-bottom: 10px;
      }
      .rule-name-label {
        font-size: 15px;
        margin-bottom: 6px;
      }
      .rule-screen-badge {
        font-size: 16px;
        padding: 10px 18px;
        margin-bottom: 12px;
      }
      .rule-example {
        font-size: 13px;
        padding: 8px 12px;
        margin-bottom: 14px;
      }
    }

/* -- HELP MODAL -- */
    .help-example-rule {
      text-align: center;
      margin-bottom: 12px;
    }

    .help-example-transform {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-family: 'Space Mono', monospace;
      font-size: 18px;
      font-weight: 700;
      color: #333;
    }

    .help-example-arrow-text {
      color: #e84393;
      font-size: 20px;
    }

    .help-example-out-text {
      color: #0f3460;
    }

    .help-example-rule-badge {
      display: inline-block;
      background: linear-gradient(135deg, #fd79a8, #e84393);
      color: #fff;
      font-family: 'Space Mono', monospace;
      font-size: 12px;
      font-weight: 700;
      padding: 4px 14px;
      border-radius: 20px;
    }