/* ==========================================================================
   工作台（我的网站）
   颜色变量来自 auth.css（由 auth.js 自动引入）
   ========================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--au-bg);
  color: var(--au-ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

.db-top {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 60px;
  padding: 0 22px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--au-line);
}

.db-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--au-ink);
  text-decoration: none;
}

.db-brand .brand-logo {
  height: 26px;
  width: auto;
  display: block;
}

.db-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.db-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--au-line);
  border-radius: 10px;
  background: #fff;
  color: var(--au-ink);
  font-size: 13px;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .14s, background .14s;
}

.db-btn:hover { border-color: #cfd4e2; }
.db-btn.primary {
  border: 0;
  background: var(--au-brand);
  color: #fff;
}
.db-btn.primary:hover { opacity: .93; }
.db-btn.danger:hover { border-color: #e8b9b9; color: var(--au-danger); }

.db-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 30px 22px 80px;
}

.db-hero h1 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 500;
}

.db-hero p {
  margin: 0 0 24px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--au-ink-2);
}

/* ------------------------------ 页脚 ------------------------------ */

/* 已注册用户要能随时回看条款，不给入口就只能靠记忆 */
.db-foot {
  padding: 22px 22px 34px;
  text-align: center;
}

.db-foot-link {
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--au-ink-3);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: color .14s, background .14s;
}

.db-foot-link:hover { color: var(--au-ink-2); background: rgba(0, 0, 0, .04); }

/* ------------------------------ 概览 ------------------------------ */

.db-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}

.db-card {
  padding: 16px 18px;
  border: 1px solid var(--au-line);
  border-radius: 14px;
  background: #fff;
}

.db-card span {
  display: block;
  font-size: 12.5px;
  color: var(--au-ink-3);
  margin-bottom: 7px;
}

.db-card strong {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
}

.db-card em {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-style: normal;
  color: var(--au-ink-2);
}

/* ------------------------------ 站点列表 ------------------------------ */

.db-list {
  display: grid;
  gap: 14px;
}

.db-site {
  border: 1px solid var(--au-line);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  transition: border-color .14s;
}

.db-site:hover { border-color: #d5d9e6; }

.db-site-main {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
}

.db-thumb {
  flex: 0 0 auto;
  width: 92px;
  height: 62px;
  border: 1px solid var(--au-line);
  border-radius: 10px;
  background: var(--au-bg) center/cover no-repeat;
  overflow: hidden;
  position: relative;
}

.db-thumb iframe {
  width: 320px;
  height: 214px;
  border: 0;
  transform: scale(.2875);
  transform-origin: 0 0;
  pointer-events: none;
}

.db-site-info { flex: 1; min-width: 0; }

.db-site-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.db-site-title strong {
  font-size: 15px;
  font-weight: 500;
  word-break: break-all;
}

.db-badge {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  line-height: 1.7;
  white-space: nowrap;
}

.db-badge.live { background: #e6f5ee; color: #1c7a54; }
.db-badge.draft { background: #f1f3f9; color: #6b7280; }
.db-badge.expired { background: #fdeeee; color: #a33b3b; }

.db-site-url {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--au-brand);
  text-decoration: none;
  word-break: break-all;
}

.db-site-url:hover { text-decoration: underline; }

.db-site-meta {
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--au-ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.db-site-meta b {
  font-weight: 500;
  color: var(--au-ink-2);
}

/* 到期的日子要能被一眼看见，别混在灰色元信息里 */
.db-site-meta .is-warn {
  color: var(--au-danger);
}

.db-site-meta .is-warn b {
  color: var(--au-danger);
}

/* 45 天内算「该准备了」：橙色，不用红的。红是「这就快断了」的意思，
   提前一个半月就开始红，真到 15 天时反而没了分量。 */
.db-site-meta .is-due {
  color: #b45309;
}

.db-site-meta .is-due b {
  color: #b45309;
}

.db-site-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* 提交收录的结果常驻在卡片里：toast 只有几秒，接口慢时用户根本等不到 */
.db-seo-note {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.65;
  background: rgba(59, 130, 246, .07);
  color: var(--au-ink-2, #34405c);
  border-left: 3px solid rgba(59, 130, 246, .55);
}
.db-seo-note.is-pending {
  background: rgba(59, 130, 246, .07);
  border-left-color: #3b82f6;
  color: #2f5fbf;
}
.db-seo-note.is-ok {
  background: rgba(22, 163, 74, .08);
  border-left-color: #16a34a;
  color: #15803d;
}
.db-seo-note.is-warn {
  background: rgba(217, 119, 6, .09);
  border-left-color: #d97706;
  color: #a16207;
}
.db-seo-note[hidden] { display: none; }

.db-act {
  /* 一排按钮里 <a> 和 <button> 混用：<a> 是行内元素，height 不生效，
     基线对齐会让它们高低不齐。统一成 inline-flex 才能真正等高居中。 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--au-line);
  border-radius: 9px;
  background: #fff;
  color: var(--au-ink);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .14s, color .14s;
}

.db-act:hover { border-color: var(--au-brand); color: var(--au-brand); }
.db-act.danger:hover { border-color: #e8b9b9; color: var(--au-danger); }

/* 付费入口（发布 / 续费）是主行动，给它实心样式，别和其他按钮长一样 */
.db-act.primary {
  border: 0;
  background: var(--au-brand);
  color: #fff;
}

.db-act.primary:hover { opacity: .93; color: #fff; }

/* 客户留言的未读徽标：红点 + 数字。
   用红色而不是品牌蓝 —— 这是"有人在等你回电"，不是普通入口。 */
.db-act.is-hot { border-color: #f3c9c4; color: #b42318; }
.db-act.is-hot:hover { border-color: #e6a9a2; color: #96170e; }

.db-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  margin-left: 6px;
  padding: 0 4px;
  border-radius: 99px;
  background: #d92d20;
  color: #fff;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
}

/* 已读但总数大于 0：灰数字，说明"有记录，没新消息" */
.db-num {
  margin-left: 6px;
  font-size: 11.5px;
  font-style: normal;
  color: var(--au-ink-3);
}

/* ------------------------------ 统计面板 ------------------------------ */

.db-stats-panel {
  border-top: 1px solid var(--au-line-2);
  padding: 18px 20px 20px;
  background: #fcfcfe;
}

.db-stats-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.db-stats-head strong { font-size: 13.5px; font-weight: 500; }
.db-stats-head span { font-size: 12.5px; color: var(--au-ink-3); }

.db-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 132px;
  padding-top: 22px;
}

.db-chart .col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
}

.db-chart .bar {
  width: 100%;
  max-width: 34px;
  min-height: 3px;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(180deg, var(--au-brand), var(--au-brand-2));
  position: relative;
  transition: height .3s ease;
}

.db-chart .bar.is-zero { background: #e8eaf3; }

.db-chart .pv {
  position: absolute;
  top: -19px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--au-ink-2);
  white-space: nowrap;
}

.db-chart .day {
  font-size: 10.5px;
  color: var(--au-ink-3);
  white-space: nowrap;
}

.db-chart-empty {
  padding: 26px 0;
  text-align: center;
  font-size: 13px;
  color: var(--au-ink-3);
}

/* ------------------------------ 空 / 未登录 ------------------------------ */

.db-empty {
  padding: 54px 26px;
  text-align: center;
  border: 1px dashed #dcdfea;
  border-radius: 16px;
  background: #fff;
}

.db-empty h2 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 500;
}

.db-empty p {
  margin: 0 auto 20px;
  max-width: 420px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--au-ink-2);
}

.db-loading {
  padding: 60px 0;
  text-align: center;
  color: var(--au-ink-3);
  font-size: 13.5px;
}

/* 列表没加载出来：先说人话，再给一个能点的按钮 —— 别让用户对着「正在加载…」干等 */
.db-error {
  padding: 46px 26px;
  text-align: center;
  border: 1px solid #f3d6d6;
  border-radius: 16px;
  background: #fff8f8;
}

.db-error p {
  margin: 0 auto 16px;
  max-width: 420px;
  font-size: 13.5px;
  line-height: 1.8;
  color: #a13b3b;
}

@media (max-width: 620px) {
  .db-thumb { display: none; }
  .db-main { padding: 22px 14px 70px; }
  .db-top { padding: 0 14px; }
}

/* ------------------------------ 申请退款弹窗 ------------------------------ */

.db-dialog {
  width: min(460px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: var(--au-ink);
  box-shadow: 0 24px 64px rgba(15, 23, 42, .18);
}

.db-dialog::backdrop { background: rgba(15, 23, 42, .42); }

.db-dialog-body { padding: 24px 24px 20px; }

.db-dialog h2 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
}

.db-dialog-sub {
  margin: 0 0 16px;
  color: var(--au-ink-2);
  font-size: 13px;
  line-height: 1.6;
}

.db-refund-amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--au-brand-soft);
  margin-bottom: 12px;
}

.db-refund-amount b {
  font-size: 24px;
  font-weight: 600;
  color: var(--au-brand-ink);
  letter-spacing: -.4px;
}

.db-refund-amount span {
  font-size: 12.5px;
  color: var(--au-ink-2);
}

.db-refund-notes {
  margin: 0 0 16px;
  padding-left: 18px;
  color: var(--au-ink-2);
  font-size: 12.5px;
  line-height: 1.75;
}

.db-refund-notes li::marker { color: var(--au-ink-3); }

.db-field {
  display: block;
  margin-bottom: 12px;
}

.db-field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  color: var(--au-ink-2);
}

.db-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--au-line);
  border-radius: 10px;
  background: #fff;
  color: var(--au-ink);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  resize: vertical;
}

.db-field textarea:focus {
  outline: none;
  border-color: var(--au-brand);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}

/* 必填项没填：红框 + 下方一行说明。只弹 toast 用户不知道是哪一项的问题 */
.db-field textarea.is-invalid {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}

.db-field-err {
  display: block;
  margin-top: 6px;
  color: #dc2626;
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
}

.db-field-err[hidden] { display: none; }

.db-dialog-tip {
  margin: 0 0 18px;
  color: var(--au-ink-3);
  font-size: 12px;
  line-height: 1.7;
}

.db-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.db-act.warn { color: #b45309; }
.db-act.warn:hover { border-color: #f0d3a8; }

/* ================================ Toast ================================ */
/*
   工作台只引了 dashboard.css（没有 styles.css），而 .toast 的样式一直只写在
   styles.css 里 —— 于是 #toast 在这个页面上没有任何定位，hidden 取消之后
   它按普通 div 排进文档流，落在 <body> 最末、页脚下面。
   表现就是「点了按钮没任何反应」：提示确实出来了，只是出在页面最底部，
   站在这屏上根本看不见（2026-10-29 查「打包下载没反应」时挖出来的，
   影响的是工作台所有 toast，不止下载）。

   这里必须留一份自己的定义，别再依赖 styles.css。
*/
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 900;
  max-width: min(560px, 86vw);
  padding: 10px 18px;
  background: rgba(20, 22, 28, .92);
  color: #fff;
  font-size: 13px;
  line-height: 1.65;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  animation: dbToastIn .22s cubic-bezier(.3, 1.2, .5, 1);
}
.toast[hidden] { display: none; }

@keyframes dbToastIn {
  from { opacity: 0; transform: translate(-50%, 10px); }
}

/* ------------------------------------------------------------------ */
/* 域名到期与续费                                                      */
/* ------------------------------------------------------------------ */

/* 卡片上那行「独立域名 cafe.com · 2027-10-30 到期」。
   常驻显示，所以样式要克制：不抢标题，只让日期能一眼找到。 */
.db-domain {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--au-ink-2);
}
.db-domain b {
  font-weight: 600;
  color: var(--au-ink);
  word-break: break-all;
}
.db-domain i {
  font-style: normal;
  color: var(--au-ink-3);
}
/* 45 天内：橙。提醒但不吓人 */
.db-domain.is-warn i { color: #b45309; font-weight: 600; }
/* 15 天内 / 已过期：红 */
.db-domain.is-hot i,
.db-domain.is-dead i { color: #b42318; font-weight: 600; }

/* 续费按钮：和普通按钮同尺寸，只在临期时出现 */
.db-act.is-urgent {
  border-color: #f0c9a0;
  background: #fff8f0;
  color: #b45309;
  font-weight: 600;
}
.db-act.is-urgent:hover {
  border-color: #e0a86a;
  background: #fff2e2;
  color: #9a4406;
}

/* 续费弹层：跟 auth.js 那套自绘弹窗同一套脾气（居中、遮罩、Esc 关），
   但内容是自己的一层 —— 它有年数选择、价格、二维码。 */
.db-renew-mask {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(16, 18, 24, .45);
  animation: dbRenewFade .16s ease-out;
}
@keyframes dbRenewFade { from { opacity: 0; } }

.db-renew-card {
  width: min(420px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 24px 24px 20px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(16, 18, 24, .22);
  animation: dbRenewIn .18s cubic-bezier(.3, 1.15, .5, 1);
}
@keyframes dbRenewIn { from { opacity: 0; transform: translateY(8px); } }

.db-renew-card h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  color: var(--au-ink);
}
.db-renew-card h3 b { font-weight: 700; word-break: break-all; }
.db-renew-sub {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--au-ink-2);
}

.db-renew-years {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.db-renew-y {
  flex: 1;
  padding: 9px 0;
  border: 1px solid var(--au-line);
  border-radius: 10px;
  background: #fff;
  color: var(--au-ink-2);
  font-size: 13.5px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.db-renew-y:hover { border-color: #c9d2ea; }
.db-renew-y.is-on {
  border-color: #2563eb;
  background: #eff4ff;
  color: #1d4ed8;
  font-weight: 600;
}

.db-renew-price {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--au-bg);
  font-size: 16px;
  font-weight: 600;
  color: var(--au-ink);
}
.db-renew-after {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--au-ink-3);
  min-height: 18px;
}
.db-renew-tip {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--au-ink-3);
}

.db-renew-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.db-renew-cancel,
.db-renew-go {
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  font-family: inherit;
  cursor: pointer;
}
.db-renew-cancel {
  border: 1px solid var(--au-line);
  background: #fff;
  color: var(--au-ink-2);
}
.db-renew-cancel:hover { background: var(--au-bg); }
.db-renew-go {
  border: 1px solid #2563eb;
  background: #2563eb;
  color: #fff;
  font-weight: 600;
}
.db-renew-go:hover { background: #1d4ed8; }
.db-renew-go:disabled {
  border-color: var(--au-line);
  background: var(--au-bg);
  color: var(--au-ink-3);
  cursor: not-allowed;
}

.db-renew-qr {
  display: flex;
  justify-content: center;
  padding: 14px 0 6px;
}
.db-renew-qr img {
  width: 190px;
  height: 190px;
  border-radius: 8px;
}
.db-renew-qrtext {
  font-size: 12px;
  word-break: break-all;
  color: var(--au-ink-2);
}
.db-renew-status {
  margin: 6px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--au-ink-2);
}