/* ═══════════════════════════════════════════════════════════
   优品优语 Design System v2.0 — 全站统一设计规范
   主题：浅色清爽 · 蓝青渐变 · 紧凑功能
   学习135editor：卡片式模块、悬停反馈、清爽配色
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. CSS变量：全站统一色板 ─── */
:root{
  /* 主色系 */
  --primary:#2b6cff;
  --primary-light:#5a8dff;
  --primary-lighter:#e8f0ff;
  --primary-dark:#1a56db;
  --accent:#00c6a7;
  --accent-light:#33d4b9;
  --accent-lighter:#e6faf6;
  --purple:#8b5cf6;
  --purple-lighter:#f3efff;
  --gold:#f59e0b;
  --gold-lighter:#fef6e6;

  /* 中性色 - 背景层级 */
  --bg:#f6f8fb;
  --bg-alt:#f1f4f9;
  --bg-card:#ffffff;
  --bg-hover:#f8fafc;
  --bg-input:#fafbfd;

  /* 中性色 - 文字层级 */
  --text:#0f2b46;
  --text2:#334155;
  --text3:#5b6b83;
  --text4:#94a3b8;
  --text5:#cbd5e1;

  /* 边框 */
  --border:#e6eaf2;
  --border-light:#eef1f6;
  --border-focus:#2b6cff;

  /* 状态色 */
  --success:#10b981;
  --success-bg:#ecfdf5;
  --warning:#f59e0b;
  --warning-bg:#fffbeb;
  --danger:#ef4444;
  --danger-bg:#fef2f2;
  --info:#3b82f6;
  --info-bg:#eff6ff;

  /* 圆角 */
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-pill:20px;

  /* 阴影 */
  --shadow-xs:0 1px 2px rgba(15,43,70,.04);
  --shadow-sm:0 1px 4px rgba(15,43,70,.06);
  --shadow:0 2px 12px rgba(15,43,70,.06);
  --shadow-md:0 4px 16px rgba(15,43,70,.08);
  --shadow-lg:0 8px 30px rgba(15,43,70,.12);
  --shadow-primary:0 4px 14px rgba(43,108,255,.25);

  /* 字阶 */
  --font-xs:11px;
  --font-sm:12px;
  --font-base:13px;
  --font-md:14px;
  --font-lg:15px;
  --font-xl:18px;
  --font-2xl:22px;
  --font-3xl:28px;

  /* 间距 */
  --space-xs:6px;
  --space-sm:10px;
  --space:16px;
  --space-md:20px;
  --space-lg:24px;
  --space-xl:32px;

  /* 动效 */
  --transition:all .25s cubic-bezier(.4,0,.2,1);
  --transition-fast:all .15s ease;

  /* 字体 */
  --font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
}

/* ─── 2. Reset & Base ─── */
*{margin:0;padding:0;box-sizing:border-box}
img,video,iframe,canvas{max-width:100%;height:auto}
body{
  font-family:var(--font-family);
  background:var(--bg);
  color:var(--text2);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
a{color:var(--primary);text-decoration:none;transition:var(--transition-fast)}
a:hover{color:var(--primary-light)}

/* ─── 3. 统一顶部导航条（覆盖所有头部变体）─── */

/* 3a. .topbar 模式（中型工具页）*/
.topbar{
  background:var(--bg-card)!important;
  border-bottom:1px solid var(--border)!important;
  padding:0 var(--space-md)!important;
  position:sticky!important;
  top:0!important;
  z-index:100!important;
  box-shadow:var(--shadow-xs)!important;
  backdrop-filter:blur(12px);
}
.topbar-inner{
  max-width:860px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  gap:12px;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-size:var(--font-lg);font-weight:700;color:var(--text);
  text-decoration:none;flex-shrink:0;
}
.brand .logo{
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;
}
.page-title{
  font-size:var(--font-md);font-weight:600;color:var(--text);
  flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.back-btn{
  font-size:var(--font-sm);color:var(--text3);
  text-decoration:none;background:var(--bg-alt);
  padding:6px 14px;border-radius:var(--radius-pill);
  transition:var(--transition-fast);flex-shrink:0;
  border:1px solid var(--border-light);
}
.back-btn:hover{background:var(--primary-lighter);color:var(--primary);border-color:var(--primary-lighter)}

/* 3b. .header 渐变模式（小型工具页）→ 统一为白色顶栏
   仅作用于body直接子元素的.header（导航条），不影响页面内标题区 */
body > .header{
  background:var(--bg-card)!important;
  border-bottom:1px solid var(--border)!important;
  padding:12px var(--space-md)!important;
  position:sticky!important;
  top:0!important;
  z-index:100!important;
  box-shadow:var(--shadow-xs)!important;
  color:var(--text)!important;
}
body > .header h1{
  font-size:var(--font-lg)!important;
  font-weight:700!important;
  color:var(--text)!important;
  margin-bottom:0!important;
  display:flex;align-items:center;gap:8px;
}
body > .header p{
  font-size:var(--font-sm)!important;
  color:var(--text3)!important;
  opacity:1!important;
  margin-top:2px;
}

/* 3c. .app-header 模式（大型工具页）*/
.app-header{
  background:var(--bg-card)!important;
  border-bottom:1px solid var(--border)!important;
  padding:0 var(--space-md)!important;
  height:56px!important;
  position:sticky!important;
  top:0!important;
  z-index:100!important;
  box-shadow:var(--shadow-xs)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}
.app-header .logo{font-size:var(--font-lg);font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.app-header .logo .dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent))}
.app-header .left{display:flex;align-items:center;gap:10px}
.app-header .header-actions,.app-header .user-area{display:flex;align-items:center;gap:8px}
.menu-toggle{
  background:none;border:none;font-size:18px;cursor:pointer;
  padding:6px 8px;border-radius:var(--radius-sm);color:var(--text3);
  transition:var(--transition-fast);display:flex;align-items:center;
}
.menu-toggle:hover{background:var(--bg-alt);color:var(--primary)}
.header-btn{
  background:var(--bg-alt);border:1px solid var(--border-light);
  padding:6px 12px;border-radius:var(--radius-sm);font-size:var(--font-sm);
  color:var(--text3);cursor:pointer;transition:var(--transition-fast);
  display:flex;align-items:center;gap:4px;font-family:inherit;
}
.header-btn:hover{background:var(--primary-lighter);color:var(--primary);border-color:var(--primary-lighter)}
.user-info{font-size:var(--font-sm);color:var(--text3)}
.vip-badge{
  background:linear-gradient(135deg,var(--gold),#f97316);
  color:#fff;font-size:10px;font-weight:700;
  padding:2px 8px;border-radius:var(--radius-pill);
}

/* ─── 4. 容器与布局 ─── */
.container{max-width:860px;margin:0 auto;padding:var(--space-md) 16px 60px}
.container-sm{max-width:640px;margin:0 auto;padding:var(--space-md) 16px 60px}
.container-lg{max-width:1100px;margin:0 auto;padding:var(--space-md) 16px 60px}
.container-fluid{padding:var(--space-md) 16px 60px}

/* ─── 5. 卡片（135editor风格：清爽、悬停反馈）─── */
.card{
  background:var(--bg-card);
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
  margin-bottom:var(--space);
  box-shadow:var(--shadow);
  border:1px solid var(--border-light);
  transition:var(--transition);
}
.card:hover{box-shadow:var(--shadow-md);border-color:var(--border)}
.card-title{
  font-size:var(--font-md);font-weight:700;color:var(--text);
  margin-bottom:var(--space);display:flex;align-items:center;gap:8px;
}
.card-title .icon{font-size:16px}

/* Hero卡片 */
.hero{
  background:var(--bg-card);
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
  margin-bottom:var(--space);
  box-shadow:var(--shadow);
  border:1px solid var(--border-light);
  display:flex;gap:var(--space);align-items:flex-start;
  transition:var(--transition);
}
.hero:hover{box-shadow:var(--shadow-md)}
.hero-icon{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;flex-shrink:0;
  background:linear-gradient(135deg,var(--primary-lighter),var(--accent-lighter));
}
.hero h1{font-size:var(--font-2xl);font-weight:800;color:var(--text);margin-bottom:4px;letter-spacing:-.01em}
.hero p{font-size:var(--font-md);color:var(--text3);line-height:1.6}
.badge{
  display:inline-block;background:var(--primary-lighter);color:var(--primary);
  font-size:var(--font-xs);font-weight:600;padding:3px 10px;
  border-radius:var(--radius-pill);margin-top:8px;
}

/* 结果卡片 */
.result-card{
  background:var(--bg-card);border-radius:var(--radius-lg);
  padding:var(--space-lg);margin-bottom:var(--space);
  box-shadow:var(--shadow);border:1px solid var(--border-light);
  border-top:3px solid var(--primary);
}
.result-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space)}
.result-title{font-size:var(--font-md);font-weight:700;color:var(--text)}
.result-content{font-size:var(--font-md);line-height:1.9;color:var(--text2);white-space:pre-wrap;word-break:break-word}

/* ─── 6. 按钮 ─── */
.btn,.gen-btn,.generate-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 24px;background:linear-gradient(135deg,var(--primary),var(--primary-light));
  color:#fff;border:none;border-radius:var(--radius);
  font-size:var(--font-md);font-weight:600;cursor:pointer;
  transition:var(--transition);box-shadow:var(--shadow-primary);
  font-family:inherit;
}
.btn:hover,.gen-btn:hover,.generate-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(43,108,255,.35)}
.btn:active,.gen-btn:active,.generate-btn:active{transform:translateY(0)}
.btn:disabled,.gen-btn:disabled,.generate-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

.btn-secondary{
  background:var(--bg-card);color:var(--text2);
  border:1px solid var(--border);box-shadow:var(--shadow-xs);
}
.btn-secondary:hover{background:var(--bg-alt);color:var(--text);border-color:var(--text4)}

.btn-ghost{background:none;color:var(--text3);border:1px solid var(--border-light);box-shadow:none}
.btn-ghost:hover{background:var(--bg-alt);color:var(--primary)}

.btn-sm{padding:7px 14px;font-size:var(--font-sm);border-radius:var(--radius-sm)}
.btn-lg{padding:15px 32px;font-size:var(--font-lg);border-radius:var(--radius-lg)}

.copy-btn,.result-btn{
  background:var(--primary-lighter);color:var(--primary);
  border:none;padding:7px 14px;border-radius:var(--radius-sm);
  font-size:var(--font-sm);cursor:pointer;font-weight:600;
  transition:var(--transition-fast);font-family:inherit;
}
.copy-btn:hover,.result-btn:hover{background:var(--primary);color:#fff}

/* ─── 7. 表单 ─── */
.form-group{margin-bottom:var(--space)}
.form-group label{
  display:block;font-size:var(--font-sm);font-weight:600;
  color:var(--text2);margin-bottom:6px;
}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:11px 14px;
  border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-size:var(--font-md);outline:none;font-family:inherit;
  transition:var(--transition-fast);background:var(--bg-input);color:var(--text);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  border-color:var(--primary);background:var(--bg-card);
  box-shadow:0 0 0 3px rgba(43,108,255,.1);
}
.form-group textarea{resize:vertical;min-height:80px;line-height:1.6}
.form-group select{cursor:pointer}
.form-hint{font-size:var(--font-xs);color:var(--text4);margin-top:4px}

/* ─── 8. 网格选择器（类型/时长/风格）─── */
.type-grid,.length-grid,.style-grid{display:grid;gap:8px}
.type-grid{grid-template-columns:repeat(5,1fr)}
.length-grid,.style-grid{grid-template-columns:repeat(4,1fr)}
.type-item,.length-item,.style-item{
  padding:10px 6px;text-align:center;
  border:1.5px solid var(--border);border-radius:var(--radius-sm);
  cursor:pointer;transition:var(--transition-fast);
  font-size:var(--font-sm);color:var(--text3);background:var(--bg-card);
  user-select:none;
}
.type-item:hover,.length-item:hover,.style-item:hover{border-color:var(--primary-light);color:var(--primary);background:var(--primary-lighter)}
.type-item.active,.length-item.active,.style-item.active{
  background:var(--primary);color:#fff;border-color:var(--primary);font-weight:600;
}
.type-item .icon{font-size:18px;display:block;margin-bottom:4px}

/* ─── 9. 标签/徽章 ─── */
.tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:var(--radius-pill);
  font-size:var(--font-xs);font-weight:500;
}
.tag-primary{background:var(--primary-lighter);color:var(--primary)}
.tag-success{background:var(--success-bg);color:var(--success)}
.tag-warning{background:var(--warning-bg);color:var(--warning)}
.tag-danger{background:var(--danger-bg);color:var(--danger)}
.tag-purple{background:var(--purple-lighter);color:var(--purple)}

/* ─── 10. 加载与空状态 ─── */
.loading{text-align:center;padding:36px var(--space);color:var(--text3)}
.spinner{
  width:32px;height:32px;border:3px solid var(--border-light);
  border-top-color:var(--primary);border-radius:50%;
  animation:spin .8s linear infinite;margin:0 auto 12px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{
  text-align:center;padding:36px var(--space);color:var(--text4);
  font-size:var(--font-md);
}
.empty .icon{font-size:36px;display:block;margin-bottom:8px;opacity:.5}

/* ─── 11. 提示框 ─── */
.tips{
  background:var(--bg-alt);border:1px dashed var(--border);
  border-radius:var(--radius-sm);padding:12px 16px;
  font-size:var(--font-sm);color:var(--text3);
  margin-top:var(--space);line-height:1.8;
}
.tips strong{color:var(--text2)}

/* ─── 12. 页脚 ─── */
.footer{text-align:center;font-size:var(--font-xs);color:var(--text4);padding:var(--space-lg) var(--space)}

/* ─── 13. Toast通知 ─── */
.toast{
  position:fixed;top:20px;left:50%;transform:translateX(-50%);
  background:rgba(15,43,70,.9);color:#fff;
  padding:10px 20px;border-radius:var(--radius-sm);
  font-size:var(--font-sm);z-index:9999;
  backdrop-filter:blur(8px);box-shadow:var(--shadow-lg);
  animation:toastIn .3s ease;
}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ─── 14. 表格包裹（响应式）─── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:600px;width:100%;border-collapse:collapse;font-size:var(--font-sm)}
.table-wrap th{background:var(--bg-alt);padding:10px 12px;text-align:left;font-weight:600;color:var(--text2);border-bottom:2px solid var(--border)}
.table-wrap td{padding:10px 12px;border-bottom:1px solid var(--border-light);color:var(--text3)}
.table-wrap tr:hover td{background:var(--bg-hover)}

/* ─── 15. 移动端适配 ─── */
@media(max-width:768px){
  .topbar-inner{padding:10px 0}
  .brand span{display:none}
  .page-title{font-size:var(--font-sm);text-align:left}
  .container,.container-sm,.container-lg{padding:var(--space) 12px 40px}
  .card,.hero,.result-card{padding:var(--space);border-radius:var(--radius)}
  .hero{flex-direction:column;gap:12px}
  .hero-icon{width:44px;height:44px;font-size:22px}
  .hero h1{font-size:var(--font-xl)}
  .type-grid{grid-template-columns:repeat(3,1fr)}
  .length-grid,.style-grid{grid-template-columns:repeat(2,1fr)}
  .app-header{padding:0 12px!important;height:50px!important}
  .app-header .logo{font-size:var(--font-md)}
  .header-btn .btn-text{display:none}
  .back-btn{padding:5px 10px;font-size:var(--font-xs)}
}

@media(max-width:480px){
  .type-grid{grid-template-columns:repeat(2,1fr)}
  .gen-btn,.generate-btn,.btn{padding:12px 16px;font-size:var(--font-md)}
}