/* ============================================================
   哆啦A梦旅游攻略工作台 —— 主题与基础样式
   配色：哆啦A梦标志蓝 + 白肚皮 + 红鼻子项圈 + 黄铃铛，明快清爽
   ============================================================ */
:root {
  /* —— 中性阶（冷调蓝灰，与主色同源） —— */
  --dora-900: #0B2E45;
  --dora-800: #123B57;
  --dora-700: #1A4C6B;
  --dora-600: #2E6A8C;
  --dora-500: #5C889F;
  --dora-400: #8FADBF;
  --dora-300: #BAD1DE;
  --dora-200: #DBE9F1;
  --dora-100: #EBF3F8;
  --dora-50:  #F5FAFD;

  /* —— 哆啦A梦蓝（主色 / 强调色） —— */
  --blue-900: #044E77;
  --blue-800: #06699C;
  --blue-700: #0B84C4;
  --blue-600: #13A0E0;
  --blue-500: #4FBAEA;
  --blue-200: #C0E5F8;
  --blue-100: #E9F6FE;

  /* —— 哆啦A梦点睛色 —— */
  --nose: #E60012;        /* 红鼻子 / 红项圈 */
  --nose-soft: #FF6B6F;
  --nose-200: #F9CFD1;
  --nose-100: #FDECEC;
  --bell: #FFC800;        /* 黄铃铛 */
  --bell-dark: #E0A200;
  --belly: #FFFFFF;       /* 白肚皮 */

  /* —— 语义色 —— */
  --bg-app: #EFF6FB;
  --bg-card: #FFFFFF;
  --bg-sub: #F7FBFE;
  --border: #DEEAF2;
  --border-strong: #C6DBE8;
  --text-1: #16303F;
  --text-2: #5A7484;
  --text-3: #8CA3B1;
  --ok: #2E8B57;
  --warn: #C98A2E;

  /* —— 尺寸 —— */
  --sidebar-w: 234px;
  --sidebar-w-collapsed: 62px;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow-sm: 0 1px 2px rgba(11, 46, 69, .06);
  --shadow: 0 2px 10px rgba(11, 46, 69, .09);
  --shadow-lg: 0 12px 40px rgba(11, 46, 69, .2);
  --t: .22s cubic-bezier(.4, 0, .2, 1);
}

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

html, body {
  height: 100%;
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.62;
  color: var(--text-1);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--dora-300); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--dora-400); }

a { color: var(--blue-700); text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }

/* ---------------- 通用文字 ---------------- */
.t-2 { color: var(--text-2); }
.t-3 { color: var(--text-3); }
.t-sm { font-size: 12.5px; }
.t-xs { font-size: 11.5px; }
.t-bold { font-weight: 600; }
.t-red { color: var(--blue-700); }
.t-mono { font-family: "JetBrains Mono", "SF Mono", Consolas, monospace; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- 按钮 ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-card); color: var(--text-1);
  font-size: 13px; white-space: nowrap;
  transition: all var(--t);
}
.btn:hover { border-color: var(--dora-400); background: var(--dora-50); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.btn-primary:hover { background: var(--blue-600); border-color: var(--blue-600); }
.btn-dark { background: var(--dora-700); border-color: var(--dora-700); color: #fff; }
.btn-dark:hover { background: var(--dora-600); border-color: var(--dora-600); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--dora-100); color: var(--text-1); }
.btn-danger { color: var(--nose); border-color: var(--nose-200); background: var(--nose-100); }
.btn-danger:hover { background: var(--nose-200); }
.btn-bell { background: var(--bell); border-color: var(--bell-dark); color: #6A4B00; font-weight: 600; }
.btn-bell:hover { background: var(--bell-dark); color: #fff; }
.btn-sm { height: 26px; padding: 0 10px; font-size: 12px; border-radius: 6px; }
.btn-lg { height: 38px; padding: 0 20px; font-size: 14px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------- 表单 ---------------- */
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.input, .select, .textarea {
  height: 32px; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg-card); width: 100%;
  transition: border-color var(--t), box-shadow var(--t);
  font-size: 13px;
}
.textarea { height: auto; min-height: 76px; padding: 8px 10px; resize: vertical; line-height: 1.6; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(19, 160, 224, .16);
}
.select { appearance: none; padding-right: 26px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238CA3B1' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }

/* ---------------- 卡片 ---------------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: 16px; }

/* 卡片网格容器（美食/景点/住宿列表） */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 14px;
}

/* 工具栏内字段小标签 */
.lbl { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 5px; }


/* ---------------- 标签 / 徽章 ---------------- */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 21px; padding: 0 8px;
  border-radius: 11px; font-size: 11.5px; line-height: 1;
  background: var(--dora-100); color: var(--text-2);
  border: 1px solid transparent; white-space: nowrap;
}
.tag-red { background: var(--blue-100); color: var(--blue-800); border-color: var(--blue-200); }
.tag-nose { background: var(--nose-100); color: var(--nose); border-color: var(--nose-200); }
.tag-bell { background: #FFF6D6; color: #8A6100; border-color: #F5DE9A; }
.tag-dark { background: var(--dora-700); color: #fff; }
.tag-ok { background: #E6F5EC; color: var(--ok); }
.tag-warn { background: #FDF4E3; color: var(--warn); }
.tag-line { background: transparent; border-color: var(--border-strong); color: var(--text-2); }
.tag-x { cursor: pointer; opacity: .5; font-size: 13px; }
.tag-x:hover { opacity: 1; color: var(--nose); }

/* ---------------- 空状态 ---------------- */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 54px 20px; color: var(--text-3); text-align: center;
}
.empty img { width: 54px; opacity: .3; }
.empty-title { font-size: 14px; color: var(--text-2); }

/* ---------------- 加载 ---------------- */
.spinner {
  width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid var(--dora-200); border-top-color: var(--blue-700);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- 分隔 ---------------- */
.hr { height: 1px; background: var(--border); border: 0; margin: 14px 0; }

/* ---------------- 星级 ---------------- */
.stars { display: inline-flex; gap: 1px; cursor: pointer; user-select: none; }
.stars i { font-style: normal; color: var(--dora-300); font-size: 14px; transition: color .12s; }
.stars i.on { color: var(--bell); text-shadow: 0 1px 0 var(--bell-dark); }
.stars:hover i { color: #FFDC63; }
.stars i:hover ~ i { color: var(--dora-300); }

/* ---------------- 滚动容器 ---------------- */
.scroll-y { overflow-y: auto; }

/* ---------------- 动画 ---------------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp .26s ease both; }