/* ============================================================
   手机端专用样式（≤ 768px 生效）
   桌面端不受影响
   ============================================================ */

@media (max-width: 768px) {

  /* ============ 全局 ============ */
  html, body {
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
  }

  /* ============ 顶部广告条 ============ */
  .ad-top-banner { padding: 0; }
  .ad-top-inner { padding: 8px 44px 8px 12px; gap: 10px; }
  .ad-top-banner .ad-icon { width: 28px; height: 28px; border-radius: 8px; font-size: 15px; }
  .ad-top-banner .ad-title { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ad-top-banner .ad-sub { display: none; }
  .ad-top-banner .ad-btn { padding: 6px 12px; font-size: 11.5px; }
  .ad-top-banner .ad-close { right: 8px; width: 22px; height: 22px; font-size: 14px; }

  /* ============ 顶部工具栏 ============ */
  .topbar {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
    position: sticky;
    top: 0;
  }
  .brand { gap: 8px; flex: 1; min-width: 0; }
  .brand-logo { width: 34px; height: 34px; border-radius: 9px; font-size: 17px; }
  .brand-title { font-size: 14px; }
  .brand-sub { display: none; }

  /* 用户区紧凑 */
  .topbar-actions { width: 100%; gap: 6px; flex-wrap: wrap; }
  .user-box {
    width: 100%;
    padding-left: 0;
    margin-left: 0;
    border-left: none;
    padding-bottom: 8px;
    border-bottom: 1px solid #eaeef4;
    flex-wrap: wrap;
    gap: 6px;
  }
  .user-name { font-size: 12.5px; padding: 5px 8px; }
  .user-upgrade, .user-vip, .user-admin, .user-logout { font-size: 11.5px; padding: 6px 10px; }
  .user-guest-tip { font-size: 11.5px; }
  .user-login-btn, .user-register-btn { font-size: 12px; padding: 6px 12px; }

  /* 工具栏分组 */
  .tb-group {
    width: 100%;
    padding: 6px;
    gap: 6px;
    flex-wrap: wrap;
  }
  .tb-group-label { display: none; }
  .tb-btn {
    flex: 1;
    min-width: 0;
    padding: 8px 6px;
    font-size: 12px;
    gap: 3px;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ============ 主布局：单列堆叠 ============ */
  .main-grid {
    grid-template-columns: 1fr !important;
    padding: 0 10px;
    gap: 10px;
    margin: 12px auto;
    height: auto !important;
  }
  .col { gap: 10px; }
  .col-mid, .col-right { height: auto !important; }
  .col-mid > .card, .col-right > .card { min-height: auto !important; height: auto !important; }

  /* ============ 卡片 ============ */
  .card { border-radius: 12px; }
  .card-head { padding: 12px 14px; font-size: 13px; }
  .card-body { padding: 12px 14px; }

  /* ============ 我的内容 Tab ============ */
  .my-tabs { padding: 3px; margin-bottom: 10px; }
  .my-tab { padding: 8px 6px; font-size: 12px; }
  .my-tab-count { min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }

  /* ============ 快捷语法网格 ============ */
  .qs-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 5px; }
  .qs-btn { padding: 9px 3px; font-size: 11px; }

  /* ============ 主题网格 ============ */
  .theme-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 6px; }
  .theme-btn { padding: 8px 4px; font-size: 10.5px; }
  .theme-dot { width: 16px; height: 16px; }

  /* ============ 颜色网格 ============ */
  .color-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 6px; }
  .color-item { padding: 8px 4px; font-size: 10.5px; gap: 4px; }
  .color-item input[type=color] { width: 100%; height: 28px; }

  /* ============ 排版参数 ============ */
  .ctrl { margin-bottom: 14px; }
  .ctrl-label { font-size: 12px; margin-bottom: 8px; }
  .ctrl input[type=range] { height: 6px; }
  .ctrl input[type=range]::-webkit-slider-thumb { width: 22px; height: 22px; }
  .ctrl select { padding: 10px 12px; font-size: 13px; }

  /* ============ 工具网格 ============ */
  .tool-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; }
  .tool-btn { height: 44px; font-size: 11.5px; padding: 0 6px; }

  /* ============ 编辑器 ============ */
  .editor-tools { padding: 8px 12px; gap: 5px; }
  .editor-tools .btn {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    padding: 7px 4px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #mdInput { min-height: 260px; padding: 14px 12px; font-size: 14px; line-height: 1.75; }
  .editor-foot { padding: 10px 12px; gap: 6px; font-size: 11px; }
  .foot-item { padding: 0 8px; font-size: 11px; }
  .foot-item b { font-size: 12px; }

  /* ============ 预览区 ============ */
  #preview { min-height: 320px; padding: 14px 12px; font-size: 14px; }
  #preview section { font-size: 14px !important; }

  /* ============ 语法帮助 ============ */
  .syntax-help { font-size: 11.5px; line-height: 1.9; }
  .syntax-help code { font-size: 10.5px; padding: 1px 5px; }

  /* ============ 底部广告条 ============ */
  .ad-bottom-inner {
    padding: 10px 12px;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
  .ad-bottom-banner .ad-icon { width: 32px; height: 32px; border-radius: 9px; font-size: 16px; }
  .ad-bottom-banner .ad-title { font-size: 13px; }
  .ad-bottom-banner .ad-sub { font-size: 11px; }
  .ad-bottom-banner .ad-btn { padding: 7px 14px; font-size: 12px; }

  /* ============ 来访统计 ============ */
  .visit-stats { padding: 14px 10px; font-size: 11.5px; }
  .visit-stats-inner { gap: 0; }
  .vs-item {
    padding: 5px 10px;
    font-size: 11px;
    border-right: none;
    border-bottom: 1px solid #334155;
    width: 100%;
    justify-content: space-between;
  }
  .vs-item:last-child { border-bottom: none; }
  .vs-label { font-size: 11px; }
  .vs-value { font-size: 12px; }

  /* ============ 版权行 ============ */
  .copyright-bar { padding: 14px 12px; font-size: 11px; line-height: 1.8; }

  /* ============ 联系方式 ============ */
  .contact-bar { padding: 16px 12px; }
  .contact-list { grid-template-columns: 1fr !important; gap: 8px; }
  .contact-title { font-size: 12.5px; }
  .contact-item { font-size: 12px; }

  /* ============ 弹窗（手机全屏底部弹出） ============ */
  .tpl-modal, .phone-modal, .upgrade-modal, .guest-modal, .help-modal, .ai-modal {
    padding: 12px;
    align-items: flex-end;
  }
  .tpl-wrap, .phone-wrap, .upgrade-card, .guest-card, .help-card, .ai-card {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
  }
  .tpl-head, .help-head, .ai-head { padding: 14px 16px; }
  .tpl-title, .help-title, .ai-title { font-size: 15px; }
  .tpl-sub { font-size: 11.5px; }
  .tpl-cats { padding: 10px 12px; gap: 4px; overflow-x: auto; flex-wrap: nowrap; }
  .tpl-cat { padding: 7px 12px; font-size: 12px; flex-shrink: 0; }
  .tpl-body { padding: 14px; }
  .tpl-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .tpl-card { border-radius: 12px; }
  .tpl-card-thumb { height: 72px; }
  .tpl-card-emoji { font-size: 32px; }
  .tpl-card-info { padding: 10px 10px 6px; }
  .tpl-card-name { font-size: 13px; }
  .tpl-card-desc { display: none; }
  .tpl-card-use { margin: 6px 10px 10px; padding: 6px 0; font-size: 11.5px; }
  .tpl-foot { padding: 10px 14px; font-size: 11px; }
  .tpl-foot-tip { flex: 1 1 100%; text-align: center; }

  /* 手机预览弹窗里的手机框全屏 */
  .phone-frame { width: 100%; height: auto; max-height: calc(100vh - 100px); border-radius: 24px; padding: 8px; }
  .phone-screen { border-radius: 18px; padding: 20px 14px; }

  /* 升级/游客弹窗 */
  .upgrade-card, .guest-card { padding: 24px 20px; }
  .upgrade-card .ico, .guest-ico { width: 56px; height: 56px; font-size: 28px; margin-bottom: 12px; }
  .upgrade-card h3, .guest-title { font-size: 16px; }
  .upgrade-card .price { font-size: 22px; }
  .guest-btn, .upgrade-btn { padding: 12px; font-size: 13.5px; }

  /* ============ Toast ============ */
  .toast {
    top: auto;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%, 30px);
    font-size: 13px;
    padding: 10px 18px;
    max-width: 90vw;
  }
  .toast.show { transform: translate(-50%, 0); }

  /* ============ 教程页手机优化 ============ */
  .tutorial-container { grid-template-columns: 1fr !important; }
  .tutorial-nav {
    position: static !important;
    margin-bottom: 14px;
    padding: 12px;
    overflow-x: auto;
    white-space: nowrap;
    display: flex;
    gap: 6px;
  }
  .tutorial-nav-title { display: none; }
  .tutorial-nav-item {
    display: inline-block;
    padding: 7px 12px;
    margin-bottom: 0;
    font-size: 12px;
    flex-shrink: 0;
  }
  .tutorial-hero { padding: 28px 20px; border-radius: 14px; }
  .tutorial-hero-title { font-size: 22px; }
  .tutorial-hero-sub { font-size: 13px; }
  .tutorial-hero-stats { gap: 20px; }
  .tutorial-section { padding: 20px 16px; border-radius: 14px; }
  .tutorial-section-title h2 { font-size: 18px; }
  .ts-num { width: 30px; height: 30px; font-size: 14px; }
  .tutorial-table { display: block; overflow-x: auto; white-space: nowrap; }
  .tutorial-cheatsheet { grid-template-columns: 1fr !important; }
}

/* ============ 极窄屏（≤ 400px） ============ */
@media (max-width: 400px) {
  .qs-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .tpl-grid { grid-template-columns: 1fr !important; }
  .tb-btn { font-size: 11px; }
  .brand-title { font-size: 13px; }
}
/* ============ 手机端：顶栏紧凑 ============ */
@media (max-width: 768px) {

  /* 顶栏：logo 左、用户按钮右，同行显示 */
  .topbar{
    padding:10px 12px;
    gap:8px;
    flex-wrap:nowrap;
    align-items:center;
  }
  .brand{
    flex-shrink:0;
    gap:6px;
  }
  .brand-logo{
    width:32px;
    height:32px;
    border-radius:8px;
    font-size:16px;
  }
  .brand-title{
    font-size:13.5px;
    font-weight:700;
  }
  .brand-sub{
    display:none;
  }
  .topbar-actions{
    flex:1;
    justify-content:flex-end;
    gap:6px;
    flex-wrap:nowrap;
    min-width:0;
  }
  .user-box{
    display:flex;
    align-items:center;
    gap:5px;
    padding-left:0;
    margin-left:0;
    border-left:none;
    flex-wrap:nowrap;
  }
  .user-guest-tip{
    display:none;   /* 手机隐藏"游客"文字 */
  }
  .user-login-btn{
    padding:6px 12px;
    font-size:12px;
    border-radius:16px;
    white-space:nowrap;
  }
  .user-register-btn{
    padding:6px 12px;
    font-size:12px;
    border-radius:16px;
    white-space:nowrap;
  }
  .user-name{
    font-size:12.5px;
    padding:5px 8px;
    white-space:nowrap;
    max-width:90px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .user-upgrade,
  .user-vip,
  .user-admin,
  .user-logout{
    padding:6px 10px;
    font-size:11.5px;
    border-radius:16px;
    white-space:nowrap;
  }

  /* 功能工具栏 */
  .toolbar-row{
    padding:8px 12px;
    top:54px;
  }
  .toolbar-inner{
    gap:6px;
  }
  .tb-group{
    flex:1;
    min-width:0;
    padding:4px;
    gap:4px;
    flex-wrap:nowrap;
  }
  .tb-group-label{
    display:none;
  }
  .tb-btn{
    flex:1;
    min-width:0;
    padding:7px 4px;
    font-size:11px;
    gap:3px;
    justify-content:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:center;
  }
}
/* ============ 手机端：登录/注册靠右 ============ */
@media (max-width: 768px) {

  /* 顶栏：logo 左，登录按钮右 */
  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:nowrap;
    gap:8px;
    padding:10px 12px;
  }
  .brand{
    flex:1;
    min-width:0;
    gap:6px;
    overflow:hidden;
  }
  .brand-title{
    font-size:13.5px;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .brand-sub{
    display:none;
  }

  /* 用户区：靠右，无下划线 */
  .topbar-actions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    flex-wrap:nowrap;
    border:none;
    text-decoration:none;
  }
  .user-box{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    padding:0;
    margin:0;
    border:none;
    text-decoration:none;
    flex-wrap:nowrap;
  }

  /* 去掉所有下划线 */
  .topbar-actions a,
  .user-box a,
  .user-name,
  .user-login-btn,
  .user-register-btn{
    text-decoration:none !important;
    border-bottom:none !important;
    box-shadow:none !important;
  }

  /* 游客提示隐藏（手机上不显示"游客"文字） */
  .user-guest-tip{
    display:none;
  }

  /* 登录按钮 */
  .user-login-btn{
    padding:6px 12px;
    font-size:12px;
    border-radius:16px;
    white-space:nowrap;
    text-decoration:none;
  }

  /* 免费注册按钮 */
  .user-register-btn{
    padding:6px 14px;
    font-size:12px;
    border-radius:16px;
    white-space:nowrap;
    text-decoration:none;
  }

  /* 已登录用户名 */
  .user-name{
    font-size:12.5px;
    padding:5px 8px;
    white-space:nowrap;
    max-width:90px;
    overflow:hidden;
    text-overflow:ellipsis;
    text-decoration:none;
  }
  .user-upgrade,
  .user-vip,
  .user-admin,
  .user-logout{
    padding:6px 10px;
    font-size:11.5px;
    border-radius:16px;
    white-space:nowrap;
    text-decoration:none;
  }

  /* 功能工具栏：整行独立 */
  .toolbar-row{
    padding:8px 12px;
    top:54px;
    border-top:1px solid #eaeef4;
  }
  .toolbar-inner{
    gap:6px;
    justify-content:space-between;
  }
  .tb-group{
    flex:1;
    min-width:0;
    padding:4px;
    gap:4px;
    flex-wrap:nowrap;
  }
  .tb-group-label{
    display:none;
  }
  .tb-btn{
    flex:1;
    min-width:0;
    padding:7px 4px;
    font-size:11px;
    gap:3px;
    justify-content:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:center;
  }
}
/* ============================================================
   手机端：顶栏 & 工具栏
   ============================================================ */
@media (max-width: 768px){

  .topbar{
    padding:10px 12px;
    gap:8px;
    flex-wrap:nowrap;
    align-items:center;
  }
  .brand{flex:1 1 auto;min-width:0;gap:8px;overflow:hidden}
  .brand-logo{width:32px;height:32px;border-radius:9px;font-size:16px;flex-shrink:0}
  .brand-text{min-width:0;overflow:hidden}
  .brand-title{
    font-size:13.5px;font-weight:700;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .brand-sub{display:none}

  .topbar-actions{flex:0 0 auto;display:flex;align-items:center;gap:4px;flex-wrap:nowrap}
  .user-box{gap:4px;padding-left:0;margin-left:0;border-left:none;flex-wrap:nowrap}
  .user-guest-tip{display:none}
  .user-login-btn{padding:6px 12px;font-size:12px;border-radius:14px;white-space:nowrap}
  .user-register-btn{padding:6px 12px;font-size:12px;border-radius:14px;white-space:nowrap}
  .user-name{font-size:12.5px;padding:5px 8px;max-width:80px;overflow:hidden;text-overflow:ellipsis}
  .user-upgrade,.user-vip,.user-admin,.user-logout{padding:6px 10px;font-size:11.5px;border-radius:14px}

  .toolbar-row{padding:8px 12px;top:54px}
  .toolbar-inner{gap:8px;justify-content:space-between;flex-wrap:nowrap}
  .tb-group{padding:4px 6px;gap:3px;border-radius:10px;flex-shrink:1;min-width:0}
  .tb-group-label{display:none}
  .tb-btn{padding:6px 8px;font-size:11px;gap:3px;white-space:nowrap;flex-shrink:0}
  .tb-group:first-child .tb-btn{padding:6px 6px;font-size:10.5px}
  .tb-group-primary{flex-shrink:0}
  .tb-btn.primary{padding:6px 10px;font-size:11px}
}

@media (max-width: 400px){
  .tb-group:first-child .tb-btn{padding:6px 4px;font-size:10px}
  .brand-title{font-size:12.5px}
  .user-login-btn,.user-register-btn{padding:6px 10px;font-size:11.5px}
}