/* =========================
   Mobile CSS
   番号工具移动端优化版（整理版）
========================= */

/* =========================
   全局基础修复
========================= */

html, body {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

* {
  box-sizing: border-box;
}

.card {
  white-space: normal !important;
  word-break: break-word;
}

/* =========================
   768px 以下：主移动端布局
========================= */

@media (max-width: 768px) {

  body {
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
  }

  /* 顶部 */
  .top {
    padding: 10px;
  }

  .input-area {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    max-width: 100%;
  }

  .input-area input[type="text"],
  input {
    width: 100%;
    font-size: 16px;
    padding: 10px;
  }

  /* 按钮区 */
  .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .btn-group button {
    flex: 1 1 45%;
    font-size: 12px;
    padding: 10px 8px;
    border-radius: 8px;
  }

  /* 字母区 */
  .letter-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .letter-bar {
    gap: 6px;
    overflow-x: auto;
    max-width: 100%;
  }

  .letter {
    font-size: 13px;
  }

  .prefixes {
    gap: 6px;
  }

  .prefix-btn {
    font-size: 12px;
    padding: 4px 8px;
  }

  /* 快捷按钮（默认2列） */
  .quick-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
  }

  .quick-buttons button {
    flex: 1 1 45%;
    font-size: 12px;
    padding: 8px 6px;
  }

  /* 卡片 */
  .grid {
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    overflow-x: hidden;
  }

  .card {
    font-size: 13px;
    padding: 10px;
    border-radius: 12px;
  }

  .card:active {
    transform: scale(0.98);
  }

  /* 底部统计栏 */
  .fixed-bar {
    top: auto;
    bottom: 10px;
    left: 10px;
    right: 10px;

    flex-direction: row;
    justify-content: space-between;

    font-size: 12px;
    padding: 8px 10px;
    border-radius: 12px;
  }

  /* tooltip */
  #tooltip {
    max-width: 90vw;
    font-size: 12px;
    padding: 10px 12px;
  }

  /* 防 iOS 点击高亮 */
  button,
  .card,
  .prefix-btn,
  .letter {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* 滚动优化 */
  .result {
    padding: 12px;
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================
   快捷按钮（关键响应式区）
========================= */

/* 桌面 */
.quick-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

/* 768 ~ 881：3列 */
@media (max-width: 881px) and (min-width: 768px) {

  .quick-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
  }

  .quick-buttons button {
    flex: 1 1 30%;
    min-width: 0;
    font-size: 12px;
    padding: 8px 6px;
  }
}

/* <275px：1列 */
@media (max-width: 275px) {

  .quick-buttons button {
    flex: 1 1 100%;
  }
}

/* =========================
   switch（开关区域）
========================= */

.inline-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* <700：3列 */
@media (max-width: 700px) {

  .inline-toggles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 8px;
    width: 100%;
  }
}

/* <467：2列 */
@media (max-width: 467px) {

  .inline-toggles {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* <325：1列 */
@media (max-width: 325px) {

  .inline-toggles {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* =========================
   字母栏（<441 自动换行）
========================= */

@media (max-width: 441px) {

  .letter-bar {
    display: flex;
    flex-wrap: wrap;
    overflow-x: hidden;
    gap: 6px;
  }

  .letter {
    flex: 0 0 auto;
    font-size: 13px;
  }
}

/* =========================
   超小屏（<230）按钮竖排
========================= */

@media (max-width: 230px) {

  .btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-group button {
    flex: 1 1 100%;
    width: 100%;
  }
}