/* ============================================================
   订阅管家 base.css —— 与风格无关的骨架层：
   启动屏 / 对话框 / 表单 / Toast / 通用 chrome 控件。
   皮肤（skins/<style>.css）负责页面主体视觉；对话框体系
   自带深色配色，在任何风格下都保持一致的浮层观感。
   ============================================================ */

.app-splash {
  min-height: 60vh; display: flex; align-items: center; justify-content: center; gap: 12px;
  font: 14px/1.4 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  color: #8b95a7;
}
.brand-mark {
  width: 30px; height: 30px; border-radius: 10px; display: inline-grid; place-items: center;
  font-weight: 800; font-size: 15px; color: #08110d;
  background: linear-gradient(135deg, #2dd4a7, #5eead4); box-shadow: 0 4px 16px rgba(45,212,167,.3);
}
.ki-error {
  margin: 32px auto; max-width: 560px; padding: 18px 22px; border-radius: 14px;
  font-size: 13px; color: #ffb3b3; background: rgba(242,109,109,.08); border: 1px solid rgba(242,109,109,.35);
}

/* ── 通用 chrome 控件（风格切换 / 连接状态 / 刷新 / 退出）── */
.app-chrome { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.app-chrome select {
  font: inherit; font-size: 12px; color: inherit; background: rgba(127,127,127,.12);
  border: 1px solid rgba(127,127,127,.35); border-radius: 8px; padding: 4px 8px; outline: none;
}
.app-conn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; opacity: .85; }
.app-dot { width: 8px; height: 8px; border-radius: 50%; background: #9aa4b0; }
.app-dot.is-online { background: #2dd4a7; box-shadow: 0 0 8px rgba(45,212,167,.8); }
.app-dot.is-offline { background: #f26d6d; box-shadow: 0 0 8px rgba(242,109,109,.8); }
.app-sync { font-size: 12px; opacity: .75; }
.app-chrome-btn {
  font: inherit; font-size: 12px; padding: 5px 12px; cursor: pointer; border-radius: 999px;
  color: inherit; background: rgba(127,127,127,.10); border: 1px solid rgba(127,127,127,.35);
}
.app-chrome-btn:hover { background: rgba(127,127,127,.2); }
.app-chrome-btn:disabled { opacity: .45; cursor: default; }

/* ── 单次订阅时长输入 ── */
.duration-row { display: grid; grid-template-columns: 1fr 96px; gap: 8px; }
.duration-row input, .duration-row select {
  font-family: inherit; font-size: 13px; color: #e8eefb;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px; padding: 9px 12px; outline: none; min-width: 0;
}
.duration-row input:focus, .duration-row select:focus {
  border-color: rgba(45,212,167,.55); box-shadow: 0 0 0 3px rgba(45,212,167,.12);
}
.duration-row select option { background: #1b2536; color: #e8eefb; }

/* ── 按钮 ── */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 999px; cursor: pointer; text-decoration: none;
  font-size: 12.5px; font-weight: 700; line-height: 1;
  padding: 9px 16px; border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.button-small { padding: 6px 12px; font-size: 11.5px; }
.button-block { width: 100%; }
.button-primary {
  color: #08110d; background: linear-gradient(135deg, #2dd4a7, #5eead4);
  box-shadow: 0 4px 16px rgba(45, 212, 167, .3);
}
.button-primary:hover { filter: brightness(1.07); }
.button-primary:disabled { opacity: .5; cursor: default; filter: none; }
.button-ghost {
  color: #aab6c8; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14);
}
.button-ghost:hover { color: #e8eefb; background: rgba(255,255,255,.09); }
.button-ghost:disabled { opacity: .45; cursor: default; }
.button-danger {
  color: #fff; background: #f26d6d; border-color: #f26d6d;
  box-shadow: 0 4px 16px rgba(242, 109, 109, .3);
}
.button-danger:hover { filter: brightness(1.07); }

.icon-button {
  width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  display: grid; place-items: center; font-size: 16px; line-height: 1;
  color: #aab6c8; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
}
.icon-button:hover { color: #e8eefb; background: rgba(255,255,255,.09); }

/* ── 表单 ── */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.field > span { color: #aab6c8; font-weight: 600; }
.field input, .field select {
  font-family: inherit; font-size: 13px; color: #e8eefb;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px; padding: 9px 12px; outline: none; min-width: 0;
}
.field input:focus, .field select:focus { border-color: rgba(45,212,167,.55); box-shadow: 0 0 0 3px rgba(45,212,167,.12); }
.field select option { background: #1b2536; color: #e8eefb; }
.field small { color: #7c8899; font-size: 11.5px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-error { min-height: 18px; margin: 10px 0 0; font-size: 12px; color: #ff9d9d; }

/* ── 对话框 ── */
.modal { border: 0; padding: 0; background: none; max-width: min(480px, calc(100vw - 40px)); }
.modal::backdrop { background: rgba(10, 15, 25, .62); backdrop-filter: blur(6px); }
.modal-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px 28px;
  background: rgba(24, 33, 50, .94); border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px; backdrop-filter: blur(22px);
  box-shadow: 0 24px 64px rgba(8, 12, 20, .55);
  color: #e8eefb;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
}
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal-heading h2 { font-size: 17px; margin: 0; }
.modal-card > p { font-size: 12.5px; color: #aab6c8; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.section-kicker { font-size: 10.5px; letter-spacing: .16em; color: #7c8899; font-weight: 700; }
.danger-symbol {
  width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center; font-weight: 800; font-size: 16px;
  color: #fff; background: rgba(242,109,109,.16); border: 1px solid rgba(242,109,109,.4);
}
.danger-note { font-size: 12.5px; color: #aab6c8; }

/* ── 登录框 ── */
.auth-modal .modal-card { align-items: stretch; text-align: left; }
.modal-brand { display: flex; justify-content: center; margin-bottom: 2px; }
.auth-modal h2 { font-size: 18px; text-align: center; margin: 0; }
.auth-modal .section-kicker { text-align: center; }
.auth-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
}
.auth-tab {
  padding: 7px 0; border-radius: 999px; border: 0; cursor: pointer;
  background: transparent; color: #aab6c8; font-size: 12.5px; font-weight: 700;
}
.auth-tab.is-active { color: #1b2536; background: #e8eefb; }
.auth-panel { display: flex; flex-direction: column; gap: 12px; }
.auth-panel > p { font-size: 12px; color: #7c8899; margin: 0; }
.email-code-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.email-code-field { grid-template-columns: none; }

/* ── Toast ── */
.toast-region {
  position: fixed; z-index: 90; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
.toast {
  padding: 10px 18px; border-radius: 999px; font-size: 12.5px; color: #e8eefb;
  background: rgba(24, 33, 50, .94); border: 1px solid rgba(45,212,167,.4);
  box-shadow: 0 10px 32px rgba(8, 12, 20, .5);
}
.toast.is-error { border-color: rgba(242,109,109,.5); color: #ffb3b3; }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .app-chrome { gap: 6px; }
}

/* ── 火山登录弹窗（可交互实况中继） ── */
/* 弹窗默认 max-width 480px 放不下验证操作，火山弹窗单独放大 */
#volcLoginDialog.modal { max-width: min(920px, calc(100vw - 32px)); }
.volc-qr {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(127, 127, 127, .3);
  background: #fff;
  min-height: 120px;
  cursor: crosshair;
  touch-action: none;      /* 拖拽滑块时屏蔽页面滚动手势 */
  user-select: none;
  -webkit-user-drag: none;
}
.volc-qr:active { outline: 2px solid rgba(255, 122, 61, .55); outline-offset: 1px; }
.volc-qr[src=""] { display: none; }
#volcLoginImg[src=""] + #volcLoginHint { display: none; }

/* 未登录锁定界面：隐藏主界面壳，只留登录框（对齐原版锁屏行为） */
body.is-unauthenticated #root { visibility: hidden; }

/* ── 单次订阅续订记录（编辑弹窗内）── */
.renewal-block { margin: 2px 0 6px; padding: 12px 14px; border: 1px solid rgba(127,127,127,.25); border-radius: 12px; }
.renewal-block > small { display: block; margin-top: 8px; color: #7c8899; font-size: 11.5px; }
.renewal-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.renewal-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: #c6d0de; background: rgba(127,127,127,.08);
  border: 1px solid rgba(127,127,127,.18); border-radius: 8px; padding: 7px 10px;
}
.renewal-row.renewal-empty { color: #8b95a7; border-style: dashed; background: none; }
.payment-list { max-height: 176px; overflow-y: auto; }
.payment-tweaked { font-style: normal; font-size: 11px; color: #f5b54a; margin-left: 6px; }
.payment-row.is-payment-deleted .payment-deleted { color: #8b95a7; text-decoration: line-through; text-decoration-color: rgba(242,109,109,.6); }
.log-list { max-height: 150px; overflow-y: auto; }
.log-row {
  display: flex; gap: 10px; align-items: baseline; font-size: 12px;
  color: #aab6c8; padding: 4px 2px; border-bottom: 1px dashed rgba(127,127,127,.15);
}
.log-row:last-child { border-bottom: 0; }
.log-row time { color: #7c8899; font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── 订阅明细拖拽排序手柄（aurora legacy 表 / ki-spend-table / ledger 通用） ── */
th.drag-col, td.drag-cell { width: 30px; padding-left: 6px; padding-right: 2px; text-align: center; }
.drag-handle {
  display: inline-block; padding: 7px 5px; margin: -7px -5px; /* 扩大命中区不占行高 */
  cursor: grab; touch-action: none; /* 触屏拖手柄时不滚动页面 */
  user-select: none; -webkit-user-select: none;
  font-size: 13px; line-height: 1; letter-spacing: -1px;
  opacity: .38; border-radius: 6px;
}
.drag-handle:hover { opacity: .85; }
.drag-handle:active, tr.is-dragging .drag-handle { cursor: grabbing; opacity: 1; }
tr.is-dragging > td { background: rgba(127, 127, 127, .16); }
body.is-sub-dragging { cursor: grabbing; }
body.is-sub-dragging * { user-select: none !important; -webkit-user-select: none !important; }
@media (hover: none) {
  .drag-handle { opacity: .55; } /* 触屏无 hover 态，手柄常显更明显 */
}

/* ── 订阅明细分类分组：组头行（aurora legacy 表 / ki-spend-table / ledger 通用） ── */
tr.cat-group-row > td {
  padding: 10px 10px 4px;
  font-size: 11px;
  white-space: nowrap;
}
tbody tr.cat-group-row:first-child > td { padding-top: 4px; }
.cat-group-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: 0; flex: none;
}
.cat-group-name { font-weight: 600; letter-spacing: .5px; }
.cat-group-meta { color: rgba(128, 134, 148, .95); margin-left: 8px; font-size: 10.5px; }