/* ========================================

   Aibao AI 绘本定制系统 - 主样式表

   浅奶蓝 + 暖米白 儿童治愈风格

   ======================================== */



/* ===== CSS 变量 ===== */

:root {

  --primary: #6EC6E8;

  --primary-dark: #4AB5DE;

  --primary-light: #A8DCF0;

  --primary-lighter: #E8F6FC;

  --secondary: #FFD89C;

  --secondary-dark: #FFC070;

  --bg-cream: #FFF9F0;

  --bg-white: #FFFFFF;

  --bg-gray: #F5F7FA;

  --text-dark: #2D3748;

  --text-medium: #4A5568;

  --text-light: #718096;

  --text-lighter: #A0AEC0;

  --border: #E2E8F0;

  --border-light: #EDF2F7;

  --success: #48BB78;

  --warning: #F6AD55;

  --danger: #FC8181;

  --danger-dark: #E53E3E;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);

  --shadow: 0 2px 8px rgba(0,0,0,0.08);

  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);

  --radius-sm: 6px;

  --radius: 12px;

  --radius-lg: 20px;

  --radius-xl: 30px;

  --transition: all 0.3s ease;

  --font: 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', sans-serif;

}



/* ===== 重置 ===== */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {

  font-family: var(--font);

  color: var(--text-dark);

  background: var(--bg-cream);

  line-height: 1.6;

  -webkit-font-smoothing: antialiased;

  overflow-x: hidden;

  width: 100%;

  max-width: 100vw;

}

#app { overflow-x: hidden; max-width: 100vw; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; height: auto; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

input, textarea, select { font-family: inherit; outline: none; max-width: 100%; }

ul { list-style: none; }

table { max-width: 100%; }



/* ===== 滚动条 ===== */

::-webkit-scrollbar { width: 8px; height: 8px; }

::-webkit-scrollbar-track { background: var(--bg-gray); }

::-webkit-scrollbar-thumb { background: var(--primary-light); border-radius: 4px; }

::-webkit-scrollbar-thumb:hover { background: var(--primary); }



/* ===== 通用容器 ===== */

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.container-sm { max-width: 760px; margin: 0 auto; padding: 0 20px; }



/* ===== 顶部导航 ===== */

.navbar {

  position: sticky; top: 0; z-index: 1000;

  background: rgba(255,255,255,0.95);

  backdrop-filter: blur(10px);

  border-bottom: 1px solid var(--border-light);

  box-shadow: var(--shadow-sm);

}

.navbar-inner {

  max-width: 1200px; margin: 0 auto; padding: 0 20px;

  height: 64px; display: flex; align-items: center; justify-content: space-between;

}

.logo { display: flex; align-items: center; gap: 10px; cursor: pointer; }

.logo-icon {

  width: 40px; height: 40px;

  background: linear-gradient(135deg, var(--primary), var(--primary-dark));

  border-radius: var(--radius-sm);

  display: flex; align-items: center; justify-content: center;

  color: white; font-size: 22px; font-weight: 700;

  box-shadow: 0 2px 8px rgba(110,198,232,0.4);

  overflow: hidden;

}

.logo-icon img { width: 100%; height: 100%; object-fit: cover; }

.logo-text { font-size: 22px; font-weight: 700; color: #fc8f66; letter-spacing: 0.5px; }

.nav-links { display: flex; align-items: center; gap: 28px; }

.nav-links a {

  font-size: 15px; color: var(--text-medium); font-weight: 500;

  transition: var(--transition); position: relative;

}

.nav-links a:hover, .nav-links a.active { color: var(--primary-dark); }

.nav-links a.active::after {

  content: ''; position: absolute; bottom: -22px; left: 0; right: 0;

  height: 3px; background: var(--primary); border-radius: 2px;

}

.nav-toggle { display: none; font-size: 24px; color: var(--text-dark); background: none; border: none; }



/* ===== 按钮 ===== */

.btn {

  display: inline-flex; align-items: center; justify-content: center; gap: 6px;

  padding: 10px 24px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 600;

  transition: var(--transition); white-space: nowrap; cursor: pointer;

}

.btn-primary { background: var(--primary); color: white; }

.btn-primary:hover { background: var(--primary-dark); box-shadow: 0 4px 12px rgba(110,198,232,0.4); }

.btn-secondary { background: var(--secondary); color: var(--text-dark); }

.btn-secondary:hover { background: var(--secondary-dark); }

.btn-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary-dark); }

.btn-outline:hover { background: var(--primary); color: white; }

.btn-danger { background: var(--danger); color: white; }

.btn-danger:hover { background: var(--danger-dark); }

.btn-ghost { background: transparent; color: var(--text-medium); }

.btn-ghost:hover { background: var(--bg-gray); }

.btn-sm { padding: 6px 16px; font-size: 13px; }

.btn-lg { padding: 14px 36px; font-size: 17px; }

.btn:disabled { opacity: 0.5; cursor: not-allowed; }



/* ===== 首页 Hero ===== */

.hero {

  background: linear-gradient(135deg, var(--primary-lighter) 0%, var(--bg-cream) 50%, #FFF5E6 100%);

  padding: 60px 0 80px; text-align: center; position: relative; overflow: hidden;

}

.hero::before {

  content: ''; position: absolute; top: -50px; right: -50px;

  width: 200px; height: 200px; background: var(--primary-light);

  border-radius: 50%; opacity: 0.3; filter: blur(40px);

}

.hero::after {

  content: ''; position: absolute; bottom: -30px; left: -30px;

  width: 150px; height: 150px; background: var(--secondary);

  border-radius: 50%; opacity: 0.2; filter: blur(30px);

}

.hero-content { position: relative; z-index: 1; }

.hero h1 {

  font-size: 42px; font-weight: 800; color: var(--text-dark);

  margin-bottom: 16px; line-height: 1.3;

}

.hero h1 .highlight { color: var(--primary-dark); }

.hero p {

  font-size: 18px; color: var(--text-light); max-width: 600px; margin: 0 auto 36px;

}

.hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }



/* ===== 业务分区卡片 ===== */

.section { padding: 60px 0; }

.section-title {

  text-align: center; margin-bottom: 40px;

}

.section-title h2 {

  font-size: 30px; font-weight: 700; color: var(--text-dark); margin-bottom: 10px;

}

.section-title p { font-size: 16px; color: var(--text-light); }



.feature-grid {

  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;

}

.feature-card {

  background: var(--bg-white); border-radius: var(--radius-lg); padding: 36px 28px;

  text-align: center; box-shadow: var(--shadow); transition: var(--transition);

  border: 1px solid var(--border-light);

}

.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.feature-icon {

  width: 64px; height: 64px; border-radius: var(--radius);

  display: flex; align-items: center; justify-content: center;

  font-size: 28px; margin: 0 auto 20px;

}

.feature-icon.blue { background: var(--primary-lighter); color: var(--primary-dark); }

.feature-icon.orange { background: #FFF5E6; color: var(--secondary-dark); }

.feature-icon.green { background: #E6F9F0; color: var(--success); }

.feature-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }

.feature-card p { font-size: 14px; color: var(--text-light); }



/* ===== 模板展厅 ===== */

.template-grid {

  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;

}

.template-card {

  background: var(--bg-white); border-radius: var(--radius); overflow: hidden;

  box-shadow: var(--shadow); transition: var(--transition); cursor: pointer;

  border: 1px solid var(--border-light);

}

.template-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.template-cover {

  width: 100%; aspect-ratio: 3/4; background: var(--bg-gray);

  position: relative; overflow: hidden;

}

.template-cover img { width: 100%; height: 100%; object-fit: cover; }

.template-badge {

  position: absolute; top: 10px; right: 10px;

  background: rgba(255,255,255,0.9); padding: 3px 10px;

  border-radius: 20px; font-size: 12px; font-weight: 600;

  color: var(--primary-dark);

}

.template-badge.ai { background: rgba(110,198,232,0.2); color: var(--primary-dark); }

.template-badge.photo { background: rgba(255,216,156,0.3); color: var(--secondary-dark); }

.template-info { padding: 16px; }

.template-info h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }

.template-info p { font-size: 13px; color: var(--text-light); }

.template-price {

  display: flex; justify-content: space-between; align-items: center;

  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-light);

}

.template-price .price { font-size: 16px; font-weight: 700; color: var(--primary-dark); }

.template-price .pages { font-size: 12px; color: var(--text-lighter); }



/* 分类筛选 */

.category-bar {

  display: flex; flex-direction: column; gap: 12px; align-items: center; margin-bottom: 30px;

}

.category-bar .cat-row {

  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center;

}

.category-bar .cat-row + .cat-row {

  margin-top: 4px;

}

.category-bar button {

  padding: 8px 18px; border-radius: 20px; font-size: 14px; font-weight: 500;

  background: var(--bg-white); border: 1px solid var(--border); color: var(--text-medium);

  transition: var(--transition);

  white-space: nowrap;

}

.category-bar .cat-row:last-child button,

.category-bar #cat-row-children button {

  padding: 6px 14px; font-size: 12px; font-weight: 400;

  background: var(--bg-light); color: var(--text-medium);

}

.category-bar button.active { background: var(--primary); color: white; border-color: var(--primary); }

.category-bar button:hover:not(.active) { border-color: var(--primary); color: var(--primary-dark); }



/* ===== 后台模板分类选择器（创建/编辑模板弹窗） ===== */

.cat-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }

.cat-picker-col { display: flex; flex-direction: column; gap: 4px; padding: 2px; border: none !important; background: transparent; }

.cat-picker-children { display: flex; flex-direction: column; gap: 3px; }

.cat-picker-btn {

  position: relative;

  display: block;

  cursor: pointer;

  font-size: 11px !important;

  font-weight: 500 !important;

  text-align: center;

  padding: 4px 6px;

  border: 1px solid var(--border);

  border-radius: 6px;

  background: var(--bg-white);

  white-space: nowrap;

  transition: all 0.15s;

  user-select: none;

}

.cat-picker-btn:hover { border-color: var(--primary); }

.cat-picker-parent { color: var(--danger); border-color: rgba(239, 68, 68, 0.3); font-weight: 600 !important; }

.cat-picker-parent:hover { border-color: var(--danger); }

.cat-picker-child { color: var(--primary-dark); border-color: rgba(59, 130, 246, 0.3); font-weight: 400 !important; font-size: 11px !important; }

.cat-picker-child:hover { border-color: var(--primary); }

.cat-picker-btn input {

  position: absolute;

  top: 0; left: 0;

  width: 100%; height: 100%;

  margin: 0; padding: 0;

  opacity: 0;

  cursor: pointer;

  z-index: 1;

}

.cat-picker-btn:has(input:checked),

.cat-picker-btn.selected {

  background: var(--primary);

  color: white;

  border-color: var(--primary);

}



/* ===== 登录页 ===== */

.login-page {

  min-height: calc(100vh - 64px); display: flex; align-items: center; justify-content: center;

  padding: 40px 20px; background: linear-gradient(135deg, var(--primary-lighter), var(--bg-cream));

}

.login-card {

  background: var(--bg-white); border-radius: var(--radius-lg); padding: 40px;

  max-width: 460px; width: 100%; box-shadow: var(--shadow-lg);

}

.login-card .logo { justify-content: center; margin-bottom: 24px; }

.login-card h2 { text-align: center; font-size: 24px; margin-bottom: 8px; }

.login-card .subtitle { text-align: center; color: var(--text-light); margin-bottom: 28px; font-size: 14px; }



.tab-group {

  display: flex; background: var(--bg-gray); border-radius: var(--radius-sm);

  padding: 4px; margin-bottom: 24px;

}

.tab-group button {

  flex: 1; padding: 10px; border-radius: 6px; font-size: 14px; font-weight: 600;

  color: var(--text-light); transition: var(--transition);

}

.tab-group button.active { background: var(--bg-white); color: var(--primary-dark); box-shadow: var(--shadow-sm); }



.form-group { margin-bottom: 18px; }

.form-group label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--text-medium); }

.form-group input, .form-group select, .form-group textarea {

  width: 100%; padding: 12px 16px; border: 2px solid var(--border);

  border-radius: var(--radius-sm); font-size: 15px; transition: var(--transition);

  background: var(--bg-white);

}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {

  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(110,198,232,0.1);

}

.form-group .hint { font-size: 12px; color: var(--text-lighter); margin-top: 6px; }



/* 余额信息卡 */

.balance-card {

  background: linear-gradient(135deg, var(--primary-lighter), #E8F6FC);

  border-radius: var(--radius); padding: 20px; margin-bottom: 24px;

}

.balance-card .balance-amount { font-size: 32px; font-weight: 800; color: var(--primary-dark); }

.balance-card .balance-label { font-size: 14px; color: var(--text-light); }

.balance-card .balance-row { display: flex; justify-content: space-between; margin-top: 12px; }

.balance-card .balance-row div { text-align: center; }

.balance-card .balance-row .val { font-size: 18px; font-weight: 700; color: var(--text-dark); }

.balance-card .balance-row .lbl { font-size: 12px; color: var(--text-light); }



/* ===== 工作台 ===== */

.workbench { min-height: calc(100vh - 64px); background: var(--bg-gray); }

.workbench-header {

  background: var(--bg-white); border-bottom: 1px solid var(--border-light);

  padding: 16px 0; position: sticky; top: 64px; z-index: 900;

}

.workbench-header-inner {

  max-width: 1400px; margin: 0 auto; padding: 0 20px;

  display: flex; align-items: center; justify-content: space-between;

}

.workbench-header h2 { font-size: 20px; font-weight: 700; }

.workbench-header .code-info { font-size: 13px; color: var(--text-light); }



.workbench-body {

  max-width: 1400px; margin: 0 auto; padding: 20px;

  display: grid; grid-template-columns: 280px 1fr 300px; gap: 20px; align-items: start;

}

.panel {

  background: var(--bg-white); border-radius: var(--radius); padding: 20px;

  box-shadow: var(--shadow-sm); border: 1px solid var(--border-light);

}

.panel-title {

  font-size: 15px; font-weight: 700; margin-bottom: 16px;

  display: flex; align-items: center; gap: 8px;

  padding-bottom: 12px; border-bottom: 1px solid var(--border-light);

}



/* 表单步骤 */

.step-list { display: flex; flex-direction: column; gap: 16px; }

.step-item { padding: 12px; border-radius: var(--radius-sm); transition: var(--transition); }

.step-item.active { background: var(--primary-lighter); }

.step-item.completed { opacity: 0.6; }

.step-num {

  width: 24px; height: 24px; border-radius: 50%; background: var(--border);

  color: white; font-size: 12px; font-weight: 700; display: inline-flex;

  align-items: center; justify-content: center; margin-right: 8px;

}

.step-item.active .step-num { background: var(--primary); }

.step-item.completed .step-num { background: var(--success); }

.step-name { font-size: 14px; font-weight: 600; }



/* 画布区域 */

.canvas-area {

  background: var(--bg-white); border-radius: var(--radius); padding: 20px;

  box-shadow: var(--shadow-sm); min-height: 600px;

}

.canvas-toolbar {

  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;

  margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border-light);

}

.canvas-main {

  width: 100%; max-width: 720px; margin: 0 auto;

  background: transparent; border-radius: var(--radius); position: relative;

  display: block;

}

.canvas-main > div { width: 100%; }

.canvas-main img { display: block; width: 100%; height: auto; max-width: 720px; }



/* 生成进度 */

.gen-progress {

  background: var(--primary-lighter); border-radius: var(--radius); padding: 20px; margin: 20px 0;

}

.gen-progress-bar {

  height: 8px; background: var(--border-light); border-radius: 4px; overflow: hidden; margin: 12px 0;

}

.gen-progress-bar-fill {

  height: 100%; background: var(--primary); border-radius: 4px; transition: width 0.5s ease;

}

.gen-status { font-size: 14px; color: var(--text-medium); }

.gen-status .check { color: var(--success); }



/* 缩略图列表 */

.thumb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 24px 10px; }

.thumb-item {

  display: flex; flex-direction: column; align-items: center;

  cursor: pointer; background: transparent; transition: var(--transition);

}

.thumb-item .thumb-img-wrap {

  position: relative; width: 100%; aspect-ratio: 3/4;

  border-radius: var(--radius-sm); overflow: hidden;

  border: 3px solid transparent; background: var(--bg-gray);

  transition: var(--transition);

}

.thumb-item.active .thumb-img-wrap { border-color: var(--primary); }

.thumb-item .thumb-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

.thumb-item .thumb-label { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--text-medium); text-align: center; }

.thumb-item.active .thumb-label { color: var(--primary); }

.thumb-item .thumb-num {

  position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,0.5);

  color: white; font-size: 10px; padding: 2px 6px; border-radius: 4px;

}

.thumb-item .thumb-status {

  position: absolute; top: 4px; right: 4px; width: 16px; height: 16px;

  border-radius: 50%; display: flex; align-items: center; justify-content: center;

  font-size: 10px; color: white;

}

.thumb-item .thumb-status.done { background: var(--success); }

.thumb-item .thumb-status.pending { background: var(--text-lighter); }



/* 水印 - 全图覆盖 */

.watermark {

  position: absolute; top: 0; left: 0; width: 100%; height: 100%;

  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;

  font-size: 18px; color: rgba(255,255,255,0.15);

  text-shadow: 0 1px 3px rgba(0,0,0,0.2);

  pointer-events: none; z-index: 5;

  background: repeating-linear-gradient(

    0deg,

    transparent,

    transparent 80px,

    rgba(255,255,255,0.03) 80px,

    rgba(255,255,255,0.03) 160px

  );

  overflow: hidden;

}

.watermark::before {

  content: '';

  position: absolute;

  top: -50%; left: -50%;

  width: 200%; height: 200%;

  background-image: repeating-linear-gradient(

    translate(0, 0),

    translate(100px, 0),

    translate(100px, 100px),

    translate(0, 100px),

    translate(-50px, -50px)

  );

  background: repeating-linear-gradient(

    45deg,

    transparent,

    transparent 120px,

    rgba(0,0,0,0.03) 120px,

    rgba(0,0,0,0.03) 240px

  );

  pointer-events: none;

}

/* 水印文字平铺 */

.watermark-text {

  position: absolute;

  font-size: 16px;

  color: rgba(0,0,0,0.08);

  transform: rotate(-30deg);

  white-space: nowrap;

  pointer-events: none;

  user-select: none;

}



/* ===== 作品中心 ===== */

.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.work-card {

  background: var(--bg-white); border-radius: var(--radius); overflow: hidden;

  box-shadow: var(--shadow); border: 1px solid var(--border-light);

  transition: var(--transition);

}

.work-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.work-cover {

  width: 100%; aspect-ratio: 3/4; background: var(--bg-gray); position: relative;

  display: flex; align-items: center; justify-content: center; color: var(--text-lighter);

}

.work-cover img { width: 100%; height: 100%; object-fit: cover; }

.work-status-badge {

  position: absolute; top: 10px; left: 10px; padding: 4px 12px;

  border-radius: 20px; font-size: 12px; font-weight: 600;

}

.work-status-badge.making { background: var(--secondary); color: var(--text-dark); }

.work-status-badge.done { background: var(--success); color: white; }

.work-status-badge.expired { background: var(--text-lighter); color: white; }

.work-info { padding: 16px; }

.work-info h3 { font-size: 15px; margin-bottom: 6px; }

.work-info p { font-size: 12px; color: var(--text-light); }

.work-actions { display: flex; gap: 8px; padding: 0 16px 16px; }



/* ===== 页面切换 ===== */

.page { display: none; }

.page.active { display: block; }



/* ===== 空状态 ===== */

.empty-state {

  text-align: center; padding: 60px 20px; color: var(--text-lighter);

}

.empty-state .icon { font-size: 48px; margin-bottom: 16px; }

.empty-state p { font-size: 15px; }



/* ===== 提示框 ===== */

.alert {

  padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px;

  font-size: 14px; display: flex; align-items: center; gap: 8px;

}

.alert-info { background: var(--primary-lighter); color: var(--primary-dark); }

.alert-success { background: #E6F9F0; color: var(--success); }

.alert-warning { background: #FFF5E6; color: var(--warning); }

.alert-danger { background: #FFF0F0; color: var(--danger-dark); }



/* ===== Toast ===== */

.toast-container {

  position: fixed; top: 80px; right: 20px; z-index: 9999;

  display: flex; flex-direction: column; gap: 10px;

}

.toast {

  background: var(--bg-white); border-radius: var(--radius-sm); padding: 14px 20px;

  box-shadow: var(--shadow-lg); font-size: 14px; display: flex; align-items: center; gap: 10px;

  animation: slideIn 0.3s ease; min-width: 250px; border-left: 4px solid var(--primary);

}

.toast.success { border-left-color: var(--success); }

.toast.error { border-left-color: var(--danger); }

.toast.warning { border-left-color: var(--warning); }

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



/* ===== 模态框 ===== */

.modal-overlay {

  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 2000;

  display: flex; align-items: center; justify-content: center; padding: 20px;

  animation: fadeIn 0.2s ease;

}

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

.modal {

  background: var(--bg-white); border-radius: var(--radius-lg); padding: 30px;

  max-width: 560px; width: 100%; max-height: 85vh; overflow-y: auto;

  animation: modalIn 0.3s ease;

}

@keyframes modalIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }

.modal-header h3 { font-size: 20px; font-weight: 700; }

.modal-close { font-size: 24px; color: var(--text-light); cursor: pointer; }

.modal-footer { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; }



/* ===== 底部 ===== */

.footer {

  background: var(--text-dark); color: var(--text-lighter); padding: 48px 0 24px;

}

.footer-grid {

  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 32px;

}

.footer-brand .logo-text { color: #fc8f66; }

.footer-brand p { font-size: 14px; margin-top: 12px; line-height: 1.7; }

.footer-col h4 { font-size: 16px; color: white; margin-bottom: 16px; }

.footer-col ul li { margin-bottom: 10px; }

.footer-col ul li a { font-size: 14px; transition: var(--transition); }

.footer-col ul li a:hover { color: var(--primary-light); }

.footer-bottom {

  border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; text-align: center;

  font-size: 13px; color: var(--text-lighter);

}



/* ===== 加载动画 ===== */

.spinner {

  width: 40px; height: 40px; border: 3px solid var(--border-light);

  border-top-color: var(--primary); border-radius: 50%;

  animation: spin 0.8s linear infinite; margin: 0 auto;

}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-overlay {

  position: fixed; inset: 0; background: rgba(255,255,255,0.8); z-index: 5000;

  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;

}

.loading-overlay p { font-size: 15px; color: var(--text-light); }



/* ===== 标签 ===== */

.tag {

  display: inline-block; padding: 3px 10px; border-radius: 20px;

  font-size: 12px; font-weight: 600;

}

.tag-blue { background: var(--primary-lighter); color: var(--primary-dark); }

.tag-green { background: #E6F9F0; color: var(--success); }

.tag-orange { background: #FFF5E6; color: var(--secondary-dark); }

.tag-gray { background: var(--bg-gray); color: var(--text-light); }

.tag-red { background: #FFF0F0; color: var(--danger-dark); }



/* ===== 表格 ===== */

.table-wrap { overflow-x: auto; }

table.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }

table.data-table th {

  background: var(--bg-gray); padding: 12px 16px; text-align: left;

  font-weight: 600; color: var(--text-medium); border-bottom: 2px solid var(--border);

  white-space: nowrap;

}

table.data-table td {

  padding: 12px 16px; border-bottom: 1px solid var(--border-light); color: var(--text-medium);

}

table.data-table tr:hover td { background: var(--bg-gray); }



/* ===== 统计卡片 ===== */

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.stat-card {

  background: var(--bg-white); border-radius: var(--radius); padding: 24px;

  box-shadow: var(--shadow-sm); border: 1px solid var(--border-light);

}

.stat-card .stat-icon {

  width: 48px; height: 48px; border-radius: var(--radius-sm);

  display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px;

}

.stat-card .stat-value { font-size: 28px; font-weight: 800; color: var(--text-dark); }

.stat-card .stat-label { font-size: 13px; color: var(--text-light); }

.stat-card .stat-change { font-size: 12px; margin-top: 6px; }

.stat-card .stat-change.up { color: var(--success); }

.stat-card .stat-change.down { color: var(--danger); }



/* ===== 响应式 ===== */

@media (max-width: 1200px) {

  .workbench-body { grid-template-columns: 220px 1fr 260px; gap: 14px; padding: 14px; }

}

@media (max-width: 1024px) {

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

  .template-grid { grid-template-columns: repeat(3, 1fr); }

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

  .workbench-body { grid-template-columns: 200px 1fr; }

  .workbench-body .panel.right-panel { grid-column: 1 / -1; }

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

  .canvas-toolbar { flex-wrap: wrap; gap: 8px; }

}



@media (max-width: 768px) {

  /* ★ 全局防溢出 */

  html, body, #app { max-width: 100vw; overflow-x: hidden; }

  .workbench, .workbench-body, .canvas-area { max-width: 100vw !important; overflow-x: hidden; }

  /* ★ 画布链：每一层限定宽度 + flex子元素可收缩 */

  .canvas-main, .canvas-main > div, .canvas-done-wrapper { max-width: 100% !important; overflow: hidden !important; width: 100% !important; box-sizing: border-box !important; }

  .canvas-main [style*="display:flex"],

  .canvas-main [style*="display:flex"] > * { min-width: 0 !important; }

  /* ★ 图片：width保持内联的100%，只加高度上限 */

  .canvas-main img, .canvas-done-wrapper img { max-height: 60vh; object-fit: contain; }

  /* 历史版本和缩略图不缩放 */

  .history-strip img, .hist-thumb-wrap img, .thumb-list img { max-height: none !important; min-width: auto !important; }

  /* ★ 768px 导航：横向条目常驻显示 */

  .nav-links { display: flex !important; flex-direction: row; align-items: center; gap: 12px; }

  .nav-links a { font-size: 12px; padding: 4px 0; }

  .nav-links a.active::after { bottom: -8px; }

  .navbar-inner { height: 48px; padding: 0 10px; }

  .logo-icon { width: 28px; height: 28px; }

  .logo-text { font-size: 14px; }

  .nav-toggle { display: none; }

  .nav-toggle { display: none; }

  .hero h1 { font-size: 24px; }

  .hero p { font-size: 14px; }

  .feature-grid { grid-template-columns: 1fr; }

  .template-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .works-grid { grid-template-columns: 1fr; }

  .workbench-body { grid-template-columns: 1fr; padding: 10px; gap: 10px; }

  .workbench-body .panel.left-panel,

  .workbench-body .panel.right-panel { grid-column: 1 / -1; }

  .workbench-header { position: relative; top: 0; }

  .workbench-header-inner { flex-wrap: wrap; gap: 8px; height: auto; padding: 12px 16px; }

  .workbench-header-inner h2 { font-size: 16px; }

  .workbench-header-inner .code-info { font-size: 11px; width: 100%; }

  .workbench-header-inner > div:last-child { width: 100%; justify-content: flex-end; }

  .workbench-header-inner > div:last-child .btn { font-size: 12px; padding: 6px 10px; }

  .footer-grid { grid-template-columns: 1fr; gap: 20px; }

  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  .section { padding: 30px 0; }

  .section-title h2 { font-size: 22px; }

  .container { padding: 0 12px; }

  /* 缩略图：横滑条（mobile.css 控制） */

  .thumb-list { display: flex !important; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }

  .thumb-list .thumb-item { flex: 0 0 auto; width: 65px; }

  .modal { padding: 18px; max-height: 95vh; }

  .modal-header h3 { font-size: 16px; }

  .login-card { padding: 24px 18px; }

  .login-card h2 { font-size: 20px; }

  .form-group input, .form-group select, .form-group textarea { font-size: 14px; padding: 10px 12px; }

  .canvas-main { max-width: 100%; min-height: 300px; }

  .canvas-toolbar { font-size: 12px; }

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

  .navbar-inner { padding: 0 12px; }

  .logo-text { font-size: 14px; }

  .alert { font-size: 13px; padding: 10px 12px; }

  .table-wrap { margin: 0 -12px; padding: 0 12px; }

  .stat-card { padding: 16px; }

  .stat-card .stat-value { font-size: 22px; }

  .balance-card { padding: 16px; }

  .balance-card .balance-amount { font-size: 26px; }

  .btn { padding: 8px 18px; font-size: 14px; }

  .btn-lg { padding: 12px 24px; font-size: 15px; }

  .hero { padding: 40px 0 50px; }

  .hero-buttons { gap: 10px; }

  .category-bar { gap: 6px; }

  .category-bar button { padding: 6px 14px; font-size: 12px; }

  /* 通用：让所有内联 grid 自动折叠为单列 */

  div[style*="grid-template-columns:1fr 1fr"],

  div[style*="grid-template-columns: 1fr 1fr"],

  div[style*="grid-template-columns:1fr 1fr 1fr"],

  div[style*="grid-template-columns: 1fr 1fr 1fr"],

  div[style*="grid-template-columns:1fr 350px"],

  div[style*="grid-template-columns: 1fr 350px"] {

    grid-template-columns: 1fr !important;

  }

  /* 修复 modal 在手机端的最大宽度 */

  .modal-overlay { padding: 10px !important; }

  .modal { max-width: 100% !important; width: 100% !important; }



  /* === 后台管理响应式：侧边栏 → 顶部栏 === */

  /* 强制 flex 容器改为竖直 */

  #app > div[style*="display:flex"][style*="min-height:100vh"] {

    flex-direction: column !important;

  }

  /* 侧边栏：取消固定，改为顶部横条 */

  #app > div > aside[style*="position:fixed"] {

    position: static !important;

    width: 100% !important;

    height: auto !important;

    display: flex !important;

    flex-direction: column !important;

  }

  /* 侧边栏内部：logo区 + 导航 + 用户区 排成一行 */

  #app > div > aside > div:first-child {

    display: flex !important;

    align-items: center !important;

    padding: 8px 12px !important;

    border-bottom: none !important;

  }

  #app > div > aside nav {

    display: flex !important;

    flex-wrap: wrap !important;

    gap: 2px !important;

    padding: 4px 8px !important;

    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch !important;

  }

  /* 导航项缩小为标签 */

  #app > div > aside nav > a {

    flex: 0 0 auto !important;

    padding: 4px 8px !important;

    font-size: 11px !important;

    margin: 1px !important;

    border-radius: 4px !important;

  }

  /* 用户区隐藏在导航右侧 */

  #app > div > aside > div:last-child {

    position: static !important;

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    padding: 4px 12px 8px !important;

    border-top: 1px solid rgba(255,255,255,0.1) !important;

    font-size: 12px !important;

  }

  #app > div > aside > div:last-child .btn {

    width: auto !important;

    font-size: 11px !important;

    padding: 4px 10px !important;

  }

  /* 主内容区：取消左边距，缩小内边距 */

  #app > div > main[style*="margin-left:220px"] {

    margin-left: 0 !important;

    padding: 12px !important;

  }

  /* 表格自适应 */

  .data-table { font-size: 12px !important; }

  .data-table th, .data-table td { padding: 6px 4px !important; }

}



@media (max-width: 480px) {

  .template-grid { grid-template-columns: 1fr; }

  .works-grid { grid-template-columns: 1fr; }

  .stat-grid { grid-template-columns: 1fr; }

  .workbench-header-inner > div:last-child .btn { font-size: 11px; padding: 4px 6px; }

  .hero h1 { font-size: 20px; }

  .footer-grid { grid-template-columns: 1fr; }

}