/* ============================================================
   地方门户系统 (LP) · 设计令牌系统 v1.0
   视觉方向：暖橙活力 · 生活服务
   品牌主色 #FF8A00（区别于 laos #FF5A1F 的红橙，更金黄、更"城市朝阳"）
   适用范围：总后台 / 城市分站运营后台 / 前台门户(H5) 三端共用
   ============================================================ */

:root {
  /* ---------- 品牌橙（主色，唯一品牌色相） ---------- */
  --lp-brand: #FF8A00;
  --lp-brand-hover: #F27700;
  --lp-brand-active: #DD6A00;
  --lp-brand-soft: #FFF4E6;   /* 浅橙底 */
  --lp-brand-tint: #FFE0B2;   /* 橙描边/浅填充 */
  --lp-brand-grad: linear-gradient(135deg, #FFA12C 0%, #FF8A00 55%, #F27700 100%);

  /* 暖阳金（次强调，用于评分/高亮/活力点缀，非品牌主色） */
  --lp-accent: #FFB43D;
  --lp-accent-soft: #FFF8E8;

  /* ---------- 中性暖灰（与橙配对） ---------- */
  --lp-ink-1: #1D2129;   /* 一级文字 */
  --lp-ink-2: #4E5969;   /* 二级文字 */
  --lp-ink-3: #86909C;   /* 三级/辅助 */
  --lp-ink-4: #C9CDD4;   /* 禁用 */
  --lp-line: #E5E6EB;    /* 边框 */
  --lp-line-2: #F2F3F5;  /* 浅分割线 */
  --lp-bg: #F7F8FA;      /* 页面底 */
  --lp-bg-card: #FFFFFF;
  --lp-bg-soft: #FBFBFC;
  --lp-bg-hover: #F4F5F7;

  /* ---------- 语义色 ---------- */
  --lp-success: #00B42A; --lp-success-soft: #E8FFEA;
  --lp-warning: #FFC53D; --lp-warning-soft: #FFFBE6;  /* 警示黄，避免与品牌橙混淆 */
  --lp-danger:  #F53F3F; --lp-danger-soft:  #FFECE8;
  --lp-info:    #165DFF; --lp-info-soft:    #E8F3FF;

  /* ---------- 字体阶梯 ---------- */
  --lp-ff: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
           "Noto Sans SC", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --lp-ff-num: "DIN Alternate", "Helvetica Neue", var(--lp-ff);
  --lp-fz-display: 28px;
  --lp-fz-h1: 22px;
  --lp-fz-h2: 18px;
  --lp-fz-h3: 16px;
  --lp-fz-body: 14px;
  --lp-fz-sm: 13px;
  --lp-fz-xs: 12px;
  --lp-lh-tight: 1.25;
  --lp-lh: 1.5;
  --lp-lh-loose: 1.7;

  /* ---------- 间距（4px 基） ---------- */
  --lp-sp-1: 4px;  --lp-sp-2: 8px;  --lp-sp-3: 12px; --lp-sp-4: 16px;
  --lp-sp-5: 20px; --lp-sp-6: 24px; --lp-sp-8: 32px; --lp-sp-10: 40px;
  --lp-sp-12: 48px;

  /* ---------- 圆角 ---------- */
  --lp-r-sm: 4px; --lp-r: 8px; --lp-r-md: 10px; --lp-r-lg: 12px;
  --lp-r-xl: 16px; --lp-r-round: 999px;

  /* ---------- 阴影 ---------- */
  --lp-shadow-sm: 0 1px 2px rgba(29,33,41,.04), 0 1px 4px rgba(29,33,41,.04);
  --lp-shadow: 0 2px 8px rgba(29,33,41,.08);
  --lp-shadow-lg: 0 4px 16px rgba(29,33,41,.12);
  --lp-shadow-brand: 0 6px 16px rgba(255,138,0,.28);

  /* ---------- 布局（后台） ---------- */
  --lp-side-w: 220px;
  --lp-top-h: 56px;
  --lp-content-max: 1440px;
  --lp-gutter: 16px;
  /* 前台 H5 */
  --lp-h5-w: 375px;

  --lp-tr: .18s cubic-bezier(.4,0,.2,1);
}

/* ===================== 基础重置 ===================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--lp-ff);
  font-size: var(--lp-fz-body);
  line-height: var(--lp-lh);
  color: var(--lp-ink-1);
  background: var(--lp-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,p { margin: 0; }
a { color: var(--lp-info); text-decoration: none; }
a:hover { text-decoration: underline; }
.num { font-family: var(--lp-ff-num); font-variant-numeric: tabular-nums; }

/* ===================== 按钮 ===================== */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--lp-r);
  font-size: var(--lp-fz-body); font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: var(--lp-tr); user-select: none; line-height: 1;
}
.lp-btn:hover { text-decoration: none; }
.lp-btn-primary { background: var(--lp-brand); color: #fff; box-shadow: var(--lp-shadow-brand); }
.lp-btn-primary:hover { background: var(--lp-brand-hover); }
.lp-btn-primary:active { background: var(--lp-brand-active); }
.lp-btn-secondary { background: #fff; color: var(--lp-ink-1); border-color: var(--lp-line); }
.lp-btn-secondary:hover { border-color: var(--lp-brand); color: var(--lp-brand); }
.lp-btn-ghost { background: transparent; color: var(--lp-ink-2); }
.lp-btn-ghost:hover { background: var(--lp-bg-hover); color: var(--lp-ink-1); }
.lp-btn-danger { background: #fff; color: var(--lp-danger); border-color: var(--lp-danger-soft); }
.lp-btn-danger:hover { background: var(--lp-danger-soft); }
.lp-btn-text { background: transparent; color: var(--lp-brand); padding: 0 4px; height: auto; }
.lp-btn-text:hover { color: var(--lp-brand-hover); }
.lp-btn-sm { height: 28px; padding: 0 12px; font-size: var(--lp-fz-sm); }
.lp-btn-lg { height: 40px; padding: 0 22px; font-size: var(--lp-fz-h3); }
.lp-btn-block { width: 100%; }
.lp-btn:disabled, .lp-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ===================== 表单 ===================== */
.lp-field { margin-bottom: var(--lp-sp-4); }
.lp-label { display: block; font-size: var(--lp-fz-sm); color: var(--lp-ink-2); margin-bottom: 6px; font-weight: 500; }
.lp-label .req { color: var(--lp-danger); margin-left: 2px; }
.lp-input, .lp-select, .lp-textarea {
  width: 100%; height: 36px; padding: 0 12px; font-size: var(--lp-fz-body);
  color: var(--lp-ink-1); background: #fff; border: 1px solid var(--lp-line);
  border-radius: var(--lp-r); transition: var(--lp-tr); outline: none; font-family: inherit;
}
.lp-textarea { height: auto; padding: 8px 12px; resize: vertical; line-height: var(--lp-lh); }
.lp-input:hover, .lp-select:hover, .lp-textarea:hover { border-color: var(--lp-brand-tint); }
.lp-input:focus, .lp-select:focus, .lp-textarea:focus {
  border-color: var(--lp-brand); box-shadow: 0 0 0 3px var(--lp-brand-soft);
}
.lp-input::placeholder, .lp-textarea::placeholder { color: var(--lp-ink-4); }
.lp-input:disabled { background: var(--lp-bg-soft); color: var(--lp-ink-3); cursor: not-allowed; }
.lp-form-inline { display: flex; flex-wrap: wrap; gap: var(--lp-sp-3); align-items: flex-end; }

/* ===================== 卡片 ===================== */
.lp-card { background: var(--lp-bg-card); border: 1px solid var(--lp-line-2); border-radius: var(--lp-r-lg); box-shadow: var(--lp-shadow-sm); }
.lp-card-hd { display: flex; align-items: center; justify-content: space-between; padding: var(--lp-sp-4) var(--lp-sp-5); border-bottom: 1px solid var(--lp-line-2); }
.lp-card-hd h3 { font-size: var(--lp-fz-h3); font-weight: 600; }
.lp-card-bd { padding: var(--lp-sp-5); }
.lp-card-bd.tight { padding: var(--lp-sp-3) var(--lp-sp-4); }

/* ===================== 统计卡 ===================== */
.lp-stat { background: #fff; border: 1px solid var(--lp-line-2); border-radius: var(--lp-r-lg); padding: var(--lp-sp-5); box-shadow: var(--lp-shadow-sm); position: relative; overflow: hidden; }
.lp-stat::after { content: ""; position: absolute; right: -20px; top: -20px; width: 90px; height: 90px; border-radius: 50%; background: var(--lp-brand-soft); opacity: .6; }
.lp-stat .label { font-size: var(--lp-fz-sm); color: var(--lp-ink-3); position: relative; }
.lp-stat .value { font-family: var(--lp-ff-num); font-size: 30px; font-weight: 700; margin-top: 8px; position: relative; letter-spacing: .5px; }
.lp-stat .value .unit { font-size: var(--lp-fz-sm); font-weight: 500; color: var(--lp-ink-3); margin-left: 4px; }
.lp-stat .delta { font-size: var(--lp-fz-xs); margin-top: 6px; position: relative; }
.lp-stat .delta.up { color: var(--lp-success); }
.lp-stat .delta.down { color: var(--lp-danger); }

/* ===================== 表格 ===================== */
.lp-table { width: 100%; border-collapse: collapse; font-size: var(--lp-fz-body); }
.lp-table thead th { text-align: left; padding: 10px var(--lp-sp-4); color: var(--lp-ink-3); font-weight: 500; background: var(--lp-bg-soft); border-bottom: 1px solid var(--lp-line); white-space: nowrap; }
.lp-table tbody td { padding: 12px var(--lp-sp-4); border-bottom: 1px solid var(--lp-line-2); color: var(--lp-ink-1); }
.lp-table tbody tr:hover { background: var(--lp-bg-soft); }
.lp-table tbody tr:last-child td { border-bottom: none; }
.lp-table .col-act { text-align: right; white-space: nowrap; }
.lp-table .col-act .lp-btn-text { margin-left: 4px; }

/* ===================== 标签 / 徽标 ===================== */
.lp-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; font-size: var(--lp-fz-xs); border-radius: var(--lp-r-sm); background: var(--lp-bg-soft); color: var(--lp-ink-2); border: 1px solid var(--lp-line); }
.lp-tag.brand { background: var(--lp-brand-soft); color: var(--lp-brand-active); border-color: var(--lp-brand-tint); }
.lp-tag.success { background: var(--lp-success-soft); color: var(--lp-success); border-color: #B7EBBE; }
.lp-tag.warning { background: var(--lp-warning-soft); color: #AD6800; border-color: #FFE58F; }
.lp-tag.danger { background: var(--lp-danger-soft); color: var(--lp-danger); border-color: #FFB4AE; }
.lp-tag.info { background: var(--lp-info-soft); color: var(--lp-info); border-color: #BFD3FF; }
.lp-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.lp-dot.green { background: var(--lp-success); }
.lp-dot.orange { background: var(--lp-brand); }
.lp-dot.red { background: var(--lp-danger); }
.lp-dot.gray { background: var(--lp-ink-4); }

/* ===================== Tabs ===================== */
.lp-tabs { display: flex; gap: var(--lp-sp-5); border-bottom: 1px solid var(--lp-line); margin-bottom: var(--lp-sp-4); }
.lp-tabs a { padding: 10px 2px; color: var(--lp-ink-2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.lp-tabs a.active { color: var(--lp-brand); border-bottom-color: var(--lp-brand); }
.lp-tabs a:hover { color: var(--lp-brand); text-decoration: none; }

/* ===================== 分页 ===================== */
.lp-page { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: var(--lp-sp-4) 0; color: var(--lp-ink-3); font-size: var(--lp-fz-sm); }
.lp-page .pg { min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--lp-line); border-radius: var(--lp-r); background: #fff; cursor: pointer; }
.lp-page .pg.active { background: var(--lp-brand); color: #fff; border-color: var(--lp-brand); }
.lp-page .pg:hover:not(.active) { border-color: var(--lp-brand); color: var(--lp-brand); }

/* ===================== 空态 ===================== */
.lp-empty { text-align: center; padding: var(--lp-sp-10) var(--lp-sp-4); color: var(--lp-ink-3); }
.lp-empty .ico { width: 64px; height: 64px; margin: 0 auto var(--lp-sp-4); border-radius: 50%; background: var(--lp-bg-soft); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.lp-empty p { font-size: var(--lp-fz-sm); }

/* ===================== 后台布局骨架 ===================== */
.lp-shell { display: flex; min-height: 100vh; }
.lp-side { width: var(--lp-side-w); flex: 0 0 var(--lp-side-w); background: #1F2430; color: #C9CDD4; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.lp-side .brand { display: flex; align-items: center; gap: 10px; height: var(--lp-top-h); padding: 0 var(--lp-sp-5); border-bottom: 1px solid rgba(255,255,255,.06); }
.lp-side .brand .logo { width: 30px; height: 30px; border-radius: 8px; background: var(--lp-brand-grad); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; }
.lp-side .brand .name { color: #fff; font-weight: 600; font-size: 15px; }
.lp-side .brand .sub { color: var(--lp-ink-4); font-size: 11px; }
.lp-nav { padding: var(--lp-sp-3) 0; flex: 1; overflow-y: auto; }
.lp-nav .grp { font-size: 11px; color: #6B7280; padding: 12px var(--lp-sp-5) 6px; letter-spacing: .5px; }
.lp-nav a { display: flex; align-items: center; gap: 10px; padding: 9px var(--lp-sp-5); color: #C9CDD4; font-size: var(--lp-fz-body); cursor: pointer; border-left: 3px solid transparent; }
.lp-nav a .ni { width: 18px; text-align: center; opacity: .85; }
.lp-nav a:hover { background: rgba(255,255,255,.04); color: #fff; text-decoration: none; }
.lp-nav a.active { background: rgba(255,138,0,.14); color: #fff; border-left-color: var(--lp-brand); }
.lp-side .foot { padding: var(--lp-sp-3) var(--lp-sp-5); border-top: 1px solid rgba(255,255,255,.06); font-size: 11px; color: #6B7280; }
.lp-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lp-top { height: var(--lp-top-h); background: #fff; border-bottom: 1px solid var(--lp-line); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--lp-sp-6); position: sticky; top: 0; z-index: 10; }
.lp-top .crumb { color: var(--lp-ink-2); font-size: var(--lp-fz-body); }
.lp-top .crumb b { color: var(--lp-ink-1); }
.lp-top .right { display: flex; align-items: center; gap: var(--lp-sp-4); }
.lp-top .right .bell { position: relative; color: var(--lp-ink-2); cursor: pointer; }
.lp-top .right .bell .badge { position: absolute; top: -4px; right: -6px; background: var(--lp-danger); color: #fff; font-size: 10px; min-width: 15px; height: 15px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
.lp-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--lp-brand-soft); color: var(--lp-brand-active); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; cursor: pointer; }
.lp-content { padding: var(--lp-sp-6); max-width: var(--lp-content-max); width: 100%; margin: 0 auto; }
.lp-page-title { font-size: var(--lp-fz-h1); font-weight: 700; margin-bottom: 4px; }
.lp-page-desc { color: var(--lp-ink-3); font-size: var(--lp-fz-sm); margin-bottom: var(--lp-sp-5); }
.lp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--lp-sp-4); margin-bottom: var(--lp-sp-4); flex-wrap: wrap; }
.lp-toolbar .left { display: flex; gap: var(--lp-sp-3); flex-wrap: wrap; align-items: center; }
.lp-grid { display: grid; gap: var(--lp-sp-4); }
.lp-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.lp-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.lp-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.lp-mt { margin-top: var(--lp-sp-4); }
.lp-mt-lg { margin-top: var(--lp-sp-6); }

/* ===================== 工具类 ===================== */
.lp-flex { display: flex; }
.lp-between { display: flex; align-items: center; justify-content: space-between; }
.lp-center { display: flex; align-items: center; }
.lp-gap-2 { gap: var(--lp-sp-2); } .lp-gap-3 { gap: var(--lp-sp-3); } .lp-gap-4 { gap: var(--lp-sp-4); }
.lp-muted { color: var(--lp-ink-3); }
.lp-sm { font-size: var(--lp-fz-sm); }
.lp-xs { font-size: var(--lp-fz-xs); }
.lp-right { text-align: right; }
.lp-nowrap { white-space: nowrap; }
.lp-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-section { margin-bottom: var(--lp-sp-5); }

/* 步骤条（开城市站流程） */
.lp-steps { display: flex; align-items: center; margin: var(--lp-sp-5) 0; }
.lp-steps .step { display: flex; align-items: center; gap: var(--lp-sp-3); flex: 1; }
.lp-steps .step .dot { width: 28px; height: 28px; border-radius: 50%; background: var(--lp-bg-soft); color: var(--lp-ink-3); display: flex; align-items: center; justify-content: center; font-weight: 600; border: 1px solid var(--lp-line); flex: 0 0 28px; }
.lp-steps .step.done .dot { background: var(--lp-success); color: #fff; border-color: var(--lp-success); }
.lp-steps .step.active .dot { background: var(--lp-brand); color: #fff; border-color: var(--lp-brand); box-shadow: var(--lp-shadow-brand); }
.lp-steps .step .txt { font-size: var(--lp-fz-sm); color: var(--lp-ink-3); }
.lp-steps .step.active .txt, .lp-steps .step.done .txt { color: var(--lp-ink-1); }
.lp-steps .bar { flex: 1; height: 2px; background: var(--lp-line); margin: 0 8px; }
.lp-steps .bar.done { background: var(--lp-success); }

/* 提示条 */
.lp-alert { display: flex; gap: 10px; padding: 10px 14px; border-radius: var(--lp-r); font-size: var(--lp-fz-sm); margin-bottom: var(--lp-sp-4); }
.lp-alert.info { background: var(--lp-info-soft); color: #0E42B8; }
.lp-alert.brand { background: var(--lp-brand-soft); color: var(--lp-brand-active); }
.lp-alert.warn { background: var(--lp-warning-soft); color: #AD6800; }

/* 前台 H5 容器 */
.lp-h5 { width: var(--lp-h5-w); margin: 0 auto; background: #fff; min-height: 100vh; box-shadow: var(--lp-shadow-lg); position: relative; overflow-x: hidden; }
.lp-h5 .topbar { height: 48px; background: var(--lp-brand-grad); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; position: sticky; top: 0; z-index: 5; }
.lp-h5 .topbar .t { font-weight: 600; font-size: 16px; }
.lp-h5 .topbar .ic { font-size: 18px; cursor: pointer; }
.lp-h5 .search { margin: var(--lp-sp-3); }
.lp-h5 .search input { width: 100%; height: 38px; border: none; border-radius: var(--lp-r-round); background: rgba(255,255,255,.9); padding: 0 16px; font-size: var(--lp-fz-body); outline: none; color: var(--lp-ink-1); }
.lp-h5 .sec { padding: 0 var(--lp-sp-3) var(--lp-sp-4); }
.lp-h5 .sec-hd { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px 8px; }
.lp-h5 .sec-hd .t { font-size: 16px; font-weight: 700; color: var(--lp-ink-1); }
.lp-h5 .sec-hd .more { font-size: 12px; color: var(--lp-ink-3); }
.lp-h5 .grid9 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px 0; }
.lp-h5 .ent { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.lp-h5 .ent .ei { width: 46px; height: 46px; border-radius: 14px; background: var(--lp-brand-soft); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.lp-h5 .ent .et { font-size: 12px; color: var(--lp-ink-2); }
.lp-h5 .banner { margin: var(--lp-sp-3); border-radius: var(--lp-r-lg); background: var(--lp-brand-grad); color: #fff; padding: var(--lp-sp-4); box-shadow: var(--lp-shadow-brand); }
.lp-h5 .banner h3 { font-size: 17px; font-weight: 700; }
.lp-h5 .banner p { font-size: 12px; opacity: .9; margin-top: 4px; }
.lp-h5 .news { background: #fff; border-radius: var(--lp-r-md); }
.lp-h5 .news .row { display: flex; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--lp-line-2); }
.lp-h5 .news .row:last-child { border-bottom: none; }
.lp-h5 .news .row .thumb { width: 76px; height: 56px; border-radius: var(--lp-r); background: linear-gradient(135deg,#FFD9A8,#FFB43D); flex: 0 0 76px; }
.lp-h5 .news .row .tt { font-size: 13px; color: var(--lp-ink-1); line-height: 1.4; font-weight: 500; }
.lp-h5 .news .row .meta { font-size: 11px; color: var(--lp-ink-3); margin-top: 6px; }
.lp-h5 .tabbar { position: sticky; bottom: 0; display: flex; background: #fff; border-top: 1px solid var(--lp-line); }
.lp-h5 .tabbar a { flex: 1; text-align: center; padding: 7px 0; font-size: 11px; color: var(--lp-ink-3); cursor: pointer; text-decoration: none; }
.lp-h5 .tabbar a .ti { font-size: 20px; display: block; margin-bottom: 2px; }
.lp-h5 .tabbar a.active { color: var(--lp-brand); }
.lp-h5 .card-lg { background: #fff; border-radius: var(--lp-r-lg); padding: var(--lp-sp-4); margin: var(--lp-sp-3); box-shadow: var(--lp-shadow-sm); }

@media (max-width: 768px) {
  .lp-grid.cols-4, .lp-grid.cols-3, .lp-grid.cols-2 { grid-template-columns: 1fr; }
  .lp-side { display: none; }
}