/* ==========================================================================
   pages.css —— 账号页 / 个人主页 / 后台 共用样式
   只用 styles.css 里已有的设计变量，不引入任何新颜色、不加载外部资源。
   在 styles.css 之后引入。
   ========================================================================== */

/* --------------------------------------------------------------- 页面骨架 */
.page{ padding: 30px 0 0; }
.page__head{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.page__head h1{ font-size: clamp(22px, 4vw, 28px); margin: 0 0 6px; letter-spacing: -.01em; }
.page__head p{ margin: 0; color: var(--ink-70); font-size: 14.5px; }
.page__actions{ display: flex; gap: 8px; flex-wrap: wrap; }

/* --------------------------------------------------------------- 登录 / 注册
   这里只剩密码重置页（reset.html）在用的几条。
   标签页、记住我、旧登录弹窗的那几组规则已经清掉了 ——
   它们依赖的独立登录页和旧弹窗都已删除（备份见 pages.css.bak-删死代码前）。 */
.auth{ max-width: 430px; margin: 26px auto 0; }
.auth form{ display: grid; gap: 16px; }
.auth__form{ display: grid; gap: 16px; }

/* --------------------------------------------------------------- 订单卡 */
.orders{ display: grid; gap: 14px; }
.order{ background: var(--shell); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.order__top{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 13px 16px; border-bottom: 1px solid var(--line);
  background: var(--shell-2);
}
.order__code{
  font-family: var(--mono); font-size: 17px; font-weight: 700; letter-spacing: .03em;
  background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer;
  border-bottom: 1.5px dashed var(--bed-line);
}
@media (hover: hover){ .order__code:hover{ border-bottom-color: var(--ink); } }
.order__body{ padding: 16px; display: grid; gap: 14px; }
.order__grid{ display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: 14.5px; margin: 0; }
.order__grid dt{ color: var(--ink-45); }
.order__grid dd{ margin: 0; }
.order__sum{ font-family: var(--mono); font-weight: 700; }

/* 状态徽章：颜色全部取自全站判定色，不新增色值 */
.st{ font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.st--pending  { background: var(--shell-2); color: var(--ink-70); }
.st--confirmed{ background: var(--luck-bg); color: var(--luck); }
.st--queued   { background: var(--luck-bg); color: var(--luck); }
.st--shipped  { background: var(--ok-bg);   color: var(--ok); }
.st--done     { background: var(--ok-bg);   color: var(--ok); }
.st--cancelled{ background: var(--black-bg);color: var(--black); }

/* 订单卡里的小标题 */
.order__tl-h{ font-size: 13.5px; color: var(--ink-45); margin-bottom: 10px; }

/* --------------------------------------------------------------- 时间线 */
.tl{ list-style: none; margin: 0; padding: 0; }
.tl li{ position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px; padding-bottom: 14px; }
.tl li:last-child{ padding-bottom: 0; }
.tl li::before{
  content: ''; position: absolute; left: 5px; top: 16px; bottom: 0; width: 1px; background: var(--line);
}
.tl li:last-child::before{ display: none; }
.tl__dot{
  width: 11px; height: 11px; border-radius: 50%; margin-top: 4px;
  border: 2px solid var(--line); background: var(--shell); position: relative; z-index: 1;
}
.tl li.is-cur .tl__dot{ border-color: var(--ink); background: var(--ink); }
.tl__t{ font-size: 14.5px; font-weight: 600; }
.tl__time{ font-family: var(--mono); font-size: 12.5px; color: var(--ink-45); margin-left: 8px; }
.tl__note{ font-size: 13.5px; color: var(--ink-70); margin-top: 2px; }

/* --------------------------------------------------------------- 数字卡片 */
.stats{ display: grid; gap: 14px; grid-template-columns: 1fr; }
.stat{ background: var(--shell); border: 1px solid var(--line); border-radius: var(--r); padding: 15px 17px; }
.stat__n{
  font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stat__n small{ font-size: 14.5px; font-weight: 600; margin-left: 3px; color: var(--ink-70); letter-spacing: 0; }
.stat__t{ font-size: 13.5px; color: var(--ink-70); margin-top: 6px; }
.stat__s{ font-size: 12.5px; color: var(--ink-45); margin-top: 3px; }
.stat--live .stat__n{ color: var(--ok); }

/* --------------------------------------------------------------- 趋势柱 */
.bars{ display: flex; align-items: flex-end; gap: 4px; height: 132px; margin-top: 4px; }
.bars__i{ flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.bars__b{
  width: 100%; background: var(--bed-line); border-radius: 4px 4px 0 0;
  min-height: 2px; transition: background-color .18s ease;
}
@media (hover: hover){ .bars__i:hover .bars__b{ background: var(--ink); } }
.bars__x{ font-size: 10.5px; font-family: var(--mono); color: var(--ink-45); white-space: nowrap; }
.bars__none{ color: var(--ink-45); font-size: 14px; padding: 34px 0; text-align: center; }

/* --------------------------------------------------------------- 横向条 */
.bars2{ display: grid; gap: 11px; }
.bar{ display: grid; grid-template-columns: minmax(84px, auto) 1fr auto; gap: 12px; align-items: center; font-size: 14px; }
.bar__t{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar__track{ height: 8px; background: var(--shell-2); border-radius: 999px; overflow: hidden; }
.bar__fill{ height: 100%; background: var(--ink); border-radius: 999px; min-width: 3px; }
.bar__n{ font-family: var(--mono); font-size: 13px; color: var(--ink-70); white-space: nowrap; }

/* --------------------------------------------------------------- 板块内的小标题 */
.subhead{
  margin: 36px 0 6px; padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 17px; letter-spacing: -.01em;
}

/* --------------------------------------------------------------- 投稿卡
   竖屏卡片：编号 + 模型名 + 参数纵向排下来，一屏能扫好几张。
   宽度自适应，最窄 228px，屏幕越宽一行放越多。 */
.subgrid{
  display: grid; gap: 14px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
}
.subgrid:empty{ display: none; }

.subcard{
  display: flex; flex-direction: column;
  background: var(--shell); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.subcard__top{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 13px; border-bottom: 1px solid var(--line); background: var(--shell-2);
}
.subcard__code{
  font-family: var(--mono); font-weight: 700; font-size: 14px;
  background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer;
  border-bottom: 1.5px dashed var(--bed-line);
}
@media (hover: hover){ .subcard__code:hover{ border-bottom-color: var(--ink); } }

.subcard__body{ padding: 13px; display: grid; gap: 10px; flex: 1; align-content: start; }
.subcard__name{ margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.subcard__nick{ margin: -7px 0 0; font-size: 12.5px; color: var(--ink-45); }
.subcard__kv{
  display: grid; grid-template-columns: auto 1fr; gap: 5px 10px;
  margin: 0; font-size: 12.5px;
}
.subcard__kv dt{ color: var(--ink-45); white-space: nowrap; }
.subcard__kv dd{ margin: 0; overflow-wrap: anywhere; }

.subcard__foot{
  padding: 11px 13px; border-top: 1px solid var(--line);
  display: grid; gap: 8px;
}

/* 投稿状态：沿用判定色，和订单状态同一套观感 */
.st--accepted{ background: var(--ok-bg); color: var(--ok); }
.st--listed  { background: var(--ok-bg); color: var(--ok); }
.st--rejected{ background: var(--black-bg); color: var(--black); }

/* --------------------------------------------------------------- 表格 */
.tbl__wrap{ overflow-x: auto; }
.tbl{ width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th{
  text-align: left; font-size: 12.5px; font-weight: 600; color: var(--ink-45);
  padding: 0 10px 8px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tbl td{ padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td{ border-bottom: 0; }
@media (hover: hover){ .tbl tr:hover td{ background: var(--shell-2); } }
.mono{ font-family: var(--mono); }
.nowrap{ white-space: nowrap; }
.dim{ color: var(--ink-45); }
/* 操作格：原来所有按钮挤在一行、不许折行，整张表被撑得比面板还宽，
   电脑上最右边的按钮要横着滚才看得到，「模型」「颜色」还被压成一字一行。
   现在按钮排成两列（订单：状态 + 保存 / 备注 + 删除），表格在 1000px 以上一屏放得下。 */
.ops{ display: grid; grid-template-columns: auto auto; gap: 6px; }
.ops select.mini{ min-width: 6.5em; }
@media (min-width: 700px){
  .tbl td[data-label="模型"]{ min-width: 7.5em; }
  .tbl td[data-label="颜色"]{ min-width: 5.5em; }
  /* 长账号名、长微信号、「订单号 + 详情」、日期时间原来都不许折行，是把表撑宽的主力。
     放开折行，太长时才换行，普通长度照样一行 */
  #orderRows td[data-slot="head"],
  #orderRows td[data-label="下单时间"]{ white-space: normal; }
  #orderRows td[data-slot="head"] .mini{ margin: 2px 0; white-space: nowrap; }   /* 编号本身不断开 */
  #userRows td[data-label="注册时间"],
  #userRows td[data-label="最后登录"]{ white-space: normal; }
  #orderRows td[data-label="账号"]{ overflow-wrap: anywhere; min-width: 7em; }
  #orderRows td[data-label="联系方式"] .mini{
    white-space: normal; overflow-wrap: anywhere; text-align: left; max-width: 11em;
    min-width: 9em;                                            /* 11 位手机号不被拆开 */
  }
}
/* 1000–1100px 的窄电脑窗口再省一点，表格才放得进面板 */
@media (min-width: 700px) and (max-width: 1099.98px){
  .tbl td[data-label="模型"]{ min-width: 6em; }
  .tbl td[data-label="颜色"]{ min-width: 4.5em; }
  .tbl th, .tbl td{ padding-left: 7px; padding-right: 7px; }
}
/* 账号表的邮箱：长邮箱只能在「-」处断，会把整张表撑宽，最右边的操作按钮就得横着滚才看得到。
   允许任意处断行；min-width 让普通长度的邮箱照样一行放下。 */
.tbl td[data-label="邮箱"]{ overflow-wrap: anywhere; min-width: 12em; }

/* --------------------------------------------------------------- 小控件 */
.mini{
  font: inherit; font-size: 13px; padding: 6px 11px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--shell); color: var(--ink); cursor: pointer;
  transition: background-color .18s ease;
}
.mini--danger{ color: var(--black); border-color: rgba(156,58,45,.35); }
/* 悬停只给有鼠标的设备，手机上点完不会"粘"着变色 */
@media (hover: hover){
  .mini:hover{ background: var(--shell-2); }
  .mini--danger:hover{ background: var(--black-bg); }
}
select.mini{ padding: 6px 8px; }
.chip{
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  padding: 3px 9px; border-radius: 999px; background: var(--shell-2); color: var(--ink-70); white-space: nowrap;
}
.chip--admin{ background: var(--ink); color: var(--shell); }
.chip--off{ background: var(--black-bg); color: var(--black); }
.row{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.empty{ text-align: center; padding: 40px 20px; color: var(--ink-45); font-size: 14.5px; }

/* --------------------------------------------------------------- 提示 */
.note{
  border: 1px solid var(--line); border-left: 3px solid var(--ink);
  background: var(--shell); border-radius: 10px; padding: 12px 14px;
  font-size: 14px; color: var(--ink-70);
}
.note--warn{ border-left-color: var(--luck); }
.note--gap{ margin-bottom: 18px; }
.note__act{ margin-top: 10px; }
.warn-txt{ color: var(--black); }
.note b{ color: var(--ink); }
.toast{
  position: fixed; left: 50%; bottom: 26px; z-index: 200;
  transform: translateX(-50%) translateY(10px);
  background: var(--ink); color: var(--shell); font-size: 14px;
  padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; max-width: 86vw; text-align: center;
}
.toast.is-on{ opacity: 1; transform: translateX(-50%) translateY(0); }

/* --------------------------------------------------------------- 分段控件 */
.seg{ display: flex; gap: 6px; flex-wrap: wrap; }
.seg button{
  font: inherit; font-size: 13.5px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--shell); color: var(--ink-70); cursor: pointer;
}
.seg button[aria-pressed="true"]{ background: var(--ink); border-color: var(--ink); color: var(--shell); font-weight: 600; }

/* --------------------------------------------------------------- 响应式 */
@media (min-width: 700px){
  .stats{ grid-template-columns: repeat(4, 1fr); }
  .order__body{ grid-template-columns: 1.15fr .85fr; gap: 20px; }
  .order__body > .order__grid{ align-content: start; }
}
@media (min-width: 1000px){
  .two{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .two--wide{ grid-template-columns: 1.35fr 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .bars__b, .mini, .toast{ transition: none; }
}

/* ==========================================================================
   手机 / 平板适配（个人订单页、后台、重置密码页）
   ⚠️ 全部包在窄屏媒体查询里，电脑端（≥1000px）一条都不命中。
   ========================================================================== */
@media (max-width: 999.98px){
  /* .page 的 padding 简写把 .wrap 的左右留白盖掉了，窄屏上内容贴边 */
  .wrap.page{
    padding-left:  max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  }
  .toast{ bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }

  /* 两列键值表：标签不许被挤成一字一行，长邮箱 / 长备注自己断行 */
  .order__grid dt{ white-space: nowrap; }
  .order__grid dd{ min-width: 0; overflow-wrap: anywhere; }
  .tl__note, .subcard__name, .subcard__nick{ overflow-wrap: anywhere; }

  /* iOS 聚焦字号小于 16px 的输入框会整页放大，所以窄屏一律 16px */
  input.mini, select.mini, textarea.mini{ font-size: 16px; }
}

@media (max-width: 699.98px){
  .page{ padding-top: 22px; }

  /* 今日数字两两一排，一屏看完四个 */
  .stats{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat{ padding: 13px 14px; min-width: 0; }
  .stat__n{ font-size: clamp(22px, 7vw, 30px); overflow-wrap: anywhere; }

  /* 小按钮、分段按钮：手指点得中，彼此留开 */
  .mini{ min-height: 40px; padding: 8px 12px; }
  .seg button{ min-height: 40px; padding: 8px 14px; }

  /* 筛选条：状态按钮一行横向滑，搜索框 + 按钮在下一行 */
  .row{ gap: 8px; }
  .row > .seg{
    flex: 1 1 100%; min-width: 0; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .row > .seg::-webkit-scrollbar{ display: none; }
  .row > .seg button{ flex: none; }
  .row > input.mini{ flex: 1 1 140px; min-width: 0; width: auto; }

  /* 页头右边那组（统计范围 + 预览）独占一行 */
  .page__actions{ width: 100%; }

  /* ---- 表格 → 一行一张卡片 ----
     手机上九列的订单表横着滑也看不全，操作按钮还在最右边够不着。
     每个单元格前面用 data-label 补上列名（admin.html 拼行时带上的）。 */
  .panel--tbl{ background: transparent; border: 0; padding: 0; }
  .tbl--stack, .tbl--stack tbody{ display: block; }
  .tbl--stack thead{
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .tbl--stack tr{
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    background: var(--shell); border: 1px solid var(--line); border-radius: 12px;
    padding: 6px 14px 12px; margin-bottom: 10px;
  }
  /* 列名挂在左边一条固定宽的栏里；单元格本身保持普通文字流，
     「模型名 + 编号」「档位 + 价格」这类拼在一格里的内容不会被拆开 */
  .tbl--stack td{
    grid-column: 1 / -1; position: relative; display: block;
    padding: 7px 0 7px calc(5.2em + 10px); border-bottom: 1px solid var(--line);
    white-space: normal; overflow-wrap: anywhere; min-width: 0;
  }
  .tbl--stack td::before{
    content: attr(data-label); position: absolute; left: 0; top: 9px; width: 5.2em;
    font-size: 12.5px; color: var(--ink-45); white-space: nowrap;
  }
  .tbl--stack tr:last-child td{ border-bottom: 1px solid var(--line); }
  /* 卡片头：第一格（编号 + 详情）在左，状态徽章在右 */
  .tbl--stack td[data-slot="head"]{
    grid-column: 1; grid-row: 1;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 6px 0 10px;
  }
  .tbl--stack td[data-slot="badge"]{
    grid-column: 2; grid-row: 1; display: flex; align-items: center; padding: 6px 0 10px 10px;
  }
  .tbl--stack td[data-slot="head"]::before,
  .tbl--stack td[data-slot="badge"]::before{ content: none; }
  /* 操作格：没有列名，按钮排开、可折行 */
  .tbl--stack td[data-slot="ops"]{
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    border-bottom: 0; padding: 12px 0 0;
  }
  .tbl--stack td[data-slot="ops"]::before{ content: none; }
  .tbl--stack td[data-slot="ops"] .ops{ display: contents; }
  .tbl--stack td[data-slot="ops"] select.mini{ flex: 1 1 100%; }
  .tbl--stack td[data-slot="ops"] .mini{ flex: 1 1 auto; }
  /* 展开的详情行：贴在它那张卡片下面 */
  .tbl--stack tr.order-detail{
    display: block; margin: -10px 0 10px; padding: 12px 14px;
    border-top: 1px dashed var(--line); border-radius: 0 0 12px 12px;
  }
  .tbl--stack tr.order-detail td{ display: block; padding: 0; border: 0; }
  .tbl--stack tr.order-detail td::before{ content: none; }

  .subgrid{ grid-template-columns: 1fr; }
  .subcard__foot .row .mini{ flex: 1 1 auto; }

  .bar{ grid-template-columns: minmax(64px, 30%) 1fr auto; gap: 10px; }
  .bars{ gap: 2px; }
  /* 14 天视图里倒数第二根和最后一根都标了日期，窄屏上两个日期叠在一起：让给最后一天 */
  .bars__i:nth-child(n+8):nth-last-child(2) .bars__x{ visibility: hidden; }

  /* 状态筛选条横向滑到屏幕边，不在留白处被切一刀 */
  .row > .seg{
    margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1);
    padding-left: var(--gutter); padding-right: var(--gutter);
  }
}

/* --------------------------------------------------------------- 后台手机确认框
   admin.html 的 ask()：只在窄屏创建，电脑上用浏览器自带的 confirm / prompt。 */
.dlg{
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(30,35,31,.42); touch-action: none;
}
.dlg__box{
  width: 100%; background: var(--bed); border: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  padding: 20px max(var(--gutter, 18px), env(safe-area-inset-right, 0px))
           calc(16px + env(safe-area-inset-bottom, 0px)) max(var(--gutter, 18px), env(safe-area-inset-left, 0px));
  display: grid; gap: 14px; animation: rise .22s ease-out;
}
.dlg__msg{ margin: 0; font-size: 15px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere;
  max-height: 55vh; overflow-y: auto; }
.dlg__input{
  width: 100%; font: inherit; font-size: 16px; padding: 12px 13px; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--shell); color: var(--ink);
}
.dlg__input:focus{ border-color: var(--ink); outline: none; }
.dlg__btns{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dlg__btns .mini{ min-height: 46px; font-size: 15px; }
.dlg__ok{ background: var(--ink); border-color: var(--ink); color: var(--shell); font-weight: 600; }
.dlg__ok.mini--danger{ background: var(--black); border-color: var(--black); color: #fff; }