/* ==========================================================================
   我的中心 / 商家后台 / 管理后台 共用布局
   ========================================================================== */

.acct-layout { display:grid; grid-template-columns:196px 1fr; gap:24px; align-items:start; }
@media (max-width: 860px) { .acct-layout { grid-template-columns:1fr; } }

.acct-side {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; position:sticky; top:88px;
}
.acct-user { display:flex; gap:11px; align-items:center; padding:16px 14px; border-bottom:1px solid var(--line-2); background:var(--surface-2); }
.acct-nav { padding:8px; }
.acct-nav a {
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  border-radius:var(--r-sm); font-size:13.5px; color:var(--ink-2);
  transition:all .14s var(--ease); margin-bottom:1px;
}
.acct-nav a .kzp-ico { color:var(--ink-4); flex:none; }
.acct-nav a:hover { background:var(--brand-50); color:var(--brand); }
.acct-nav a.on { background:var(--brand); color:#fff; font-weight:500; }
.acct-nav a.on .kzp-ico { color:#fff; }
.acct-nav a span:nth-child(2) { flex:1; }
.acct-nav .side-badge {
  margin-left:auto; min-width:18px; height:17px; padding:0 5px; border-radius:999px;
  background:var(--danger); color:#fff; font-size:10.5px; display:grid; place-items:center; font-weight:600;
}
.acct-nav a.on .side-badge { background:rgba(255,255,255,.3); }
@media (max-width: 860px) {
  .acct-side { position:static; }
  .acct-nav { display:flex; overflow-x:auto; gap:2px; }
  .acct-nav a { white-space:nowrap; }
  .acct-nav a span:nth-child(2) { flex:none; }
}

.acct-main { min-width:0; }

/* 订单状态卡 */
.order-card { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); margin-bottom:16px; overflow:hidden; }
.order-card-hd {
  padding:12px 18px; background:var(--surface-2); border-bottom:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.order-card-bd { padding:16px 18px; display:flex; gap:14px; align-items:flex-start; }
.order-card-ft { padding:12px 18px; border-top:1px solid var(--line-2); display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }

.tabs-line { display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:20px; overflow-x:auto; }
.tabs-line a {
  padding:10px 16px; font-size:14px; color:var(--ink-3); white-space:nowrap;
  border-bottom:2px solid transparent; transition:all .14s var(--ease);
  display:flex; align-items:center; gap:6px;
}
.tabs-line a:hover { color:var(--brand); }
.tabs-line a.on { color:var(--brand); border-bottom-color:var(--brand); font-weight:600; }
.tabs-line a .n {
  min-width:17px; height:16px; padding:0 4px; border-radius:999px;
  background:var(--muted-bg); color:var(--ink-4); font-size:10.5px;
  display:grid; place-items:center; font-weight:600;
}
.tabs-line a.on .n { background:var(--brand-50); color:var(--brand); }

/* 状态过滤胶囊 */
.pill-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.pill {
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 14px;
  border-radius:999px; font-size:13px; background:var(--surface);
  border:1px solid var(--line); color:var(--ink-2); transition:all .14s var(--ease);
}
.pill:hover { border-color:var(--brand-300); color:var(--brand); }
.pill.on { background:var(--brand); border-color:var(--brand); color:#fff; font-weight:500; }
.pill .n { font-size:11px; opacity:.85; }

/* 信息卡 */
.info-card { display:flex; gap:14px; padding:16px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); }
.info-card .ic { width:40px;height:40px;border-radius:11px;background:var(--brand-50);color:var(--brand);display:grid;place-items:center;flex:none; }

/* 我的发布列表 */
.my-post {
  display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-2); align-items:flex-start;
}
.my-post:last-child { border-bottom:0; }
.my-post .thumbs { display:flex; gap:6px; flex:none; }
.my-post .thumbs img { width:64px;height:64px;border-radius:8px;object-fit:cover;background:var(--muted-bg);border:1px solid var(--line); }

/* 预约时间轴卡 */
.appt-card { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); padding:18px; margin-bottom:14px; }
.appt-card .ap-no { font-size:11.5px; color:var(--ink-4); font-family:ui-monospace,monospace; }
.appt-meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:14px 0; }
.appt-meta .m .k { font-size:11.5px; color:var(--ink-4); margin-bottom:2px; display:flex; align-items:center; gap:5px; }
.appt-meta .m .v { font-size:13.5px; color:var(--ink-2); font-weight:500; }

/* 流水条目 */
.flow-item { display:flex; gap:13px; padding:14px 0; border-bottom:1px solid var(--line-2); align-items:center; }
.flow-item:last-child { border-bottom:0; }
.flow-ic { width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none; background:var(--ok-bg); color:var(--ok); }
.flow-ic.out { background:var(--danger-bg); color:var(--danger); }

/* 地址卡 */
.addr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.addr-item { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); padding:17px 18px; position:relative; }
.addr-item.is-def { border-color:var(--brand); background:var(--brand-50); }
.addr-item .badge-def { position:absolute; top:0; right:0; }
.addr-phone { font-family:ui-monospace,monospace; letter-spacing:.3px; }

/* 表单布局 */
.form-grid { display:grid; gap:0 20px; }
.form-cols-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:0 20px; }
.form-cols-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:0 20px; }
@media (max-width:860px){ .form-cols-2,.form-cols-3{ grid-template-columns:1fr; } }

/* 提交栏 */
.submit-bar {
  position:sticky; bottom:0; z-index:40; margin:24px -22px -22px;
  padding:14px 22px; background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;
}

/* 步骤条（管理端复用） */
.steps-3 { display:flex; gap:8px; margin-bottom:20px; }
.steps-3 .st {
  flex:1; padding:12px 14px; border-radius:var(--r); background:var(--muted-bg);
  font-size:13px; color:var(--ink-4); display:flex; align-items:center; gap:9px;
}
.steps-3 .st.on { background:var(--brand-50); color:var(--brand); font-weight:600; }
.steps-3 .st.done { background:var(--ok-bg); color:var(--ok); }

/* 星级输入 */
.star-input { display:flex; gap:5px; }
.star-input label { cursor:pointer; color:#D8E0DE; transition:color .14s; }
.star-input label.on, .star-input label:hover { color:#F0A030; }
.star-input input { display:none; }
.star-input label .kzp-ico { fill: currentColor; }
.star-view { display:flex; gap:2px; color:#F0A030; }
.star-view .off { color:#D8E0DE; }

/* 详情头 */
.detail-head { display:flex; gap:18px; align-items:flex-start; margin-bottom:20px; flex-wrap:wrap; }
.detail-head .ic { width:56px;height:56px;border-radius:14px;background:var(--brand-50);color:var(--brand);display:grid;place-items:center;flex:none; }