/* ==========================================================================
   Cosmos Echo 统一账号 · 门户端样式
   --------------------------------------------------------------------------
   只使用 theme.css 里已定义的 CSS 变量，因此两套主题（neon / portal）
   都会自动适配，这里不需要写任何颜色字面量。
   ========================================================================== */

.account-area {
  position: relative;
  display: flex;
  align-items: center;
}

.account-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.account-btn:hover {
  border-color: var(--card-border-hover);
  background: var(--card-bg-hover);
  transform: translateY(-1px);
}

.account-btn.signed {
  border-color: var(--card-border-hover);
}

/* 自动登录握手期间（见 account.js 的 setBooting）：
   账号入口还在向 api.cosmosecho.cn 询问"这个浏览器是谁"，
   此时禁用点击，避免用户抢在结果前面手点登录。 */
.account-btn.booting {
  cursor: progress;
  opacity: 0.75;
}

.account-btn.booting:hover {
  transform: none;
}

.acct-avatar {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-text);
  font-size: 12px;
  line-height: 1;
}

.acct-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 已登录后展开的小菜单 ---------- */

.acct-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  min-width: 190px;
  padding: 12px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: var(--bg-2);
  box-shadow: var(--shadow);
}

.acct-menu[hidden] {
  display: none;
}

.acct-menu-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 8px;
}

.acct-menu-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.acct-menu-chip {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  font-size: 11px;
  color: var(--text-muted);
}

.acct-menu-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

.acct-menu-item:hover {
  background: var(--card-bg-hover);
}

.acct-menu-item.danger {
  color: #ff6b7a;
}

/* 管理后台入口：仅管理员可见（由 account.js 按 role 决定是否渲染）。
   用品牌紫突出，与「退出登录」的红色区分开。 */
.acct-menu-item.admin {
  color: #b39dff;
  margin-bottom: 4px;
  border: 1px solid rgba(179, 157, 255, 0.28);
  background: rgba(179, 157, 255, 0.08);
}

.acct-menu-item.admin:hover {
  background: rgba(179, 157, 255, 0.18);
  color: #d9ccff;
}

/* ---------- 登录 / 注册弹窗 ---------- */

.acct-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
}

.acct-layer[hidden] {
  display: none;
}

.acct-card {
  position: relative;
  width: min(360px, 100%);
  padding: 26px 24px 22px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--bg-2);
  box-shadow: var(--shadow);
  box-sizing: border-box;
}

.acct-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.acct-close:hover {
  color: var(--text);
}

.acct-title {
  margin: 0 0 6px;
  font-size: 19px;
  color: var(--text-strong);
}

.acct-sub {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--text-muted);
}

.acct-input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 11px 12px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  box-sizing: border-box;
}

.acct-input:focus {
  outline: none;
  border-color: var(--accent);
}

.acct-err {
  margin: 0 0 10px;
  color: #ff6b7a;
  font-size: 13px;
}

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

.acct-submit {
  display: block;
  width: 100%;
  padding: 11px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;
}

.acct-submit:hover:not(:disabled) {
  filter: brightness(1.08);
}

.acct-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.acct-switch {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 6px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.acct-switch:hover {
  color: var(--text);
}

/* ---------- 兑换会员码（2026-09-30）----------
   入口在账号菜单里，弹层复用登录弹窗的全部基类（.acct-layer/.acct-card/
   .acct-input/.acct-submit），这里只补菜单项配色与「成功回执」两块。 */

.acct-menu-item.redeem {
  color: #ffd479;
  border: 1px solid rgba(255, 212, 121, 0.26);
  background: rgba(255, 212, 121, 0.07);
  margin-bottom: 6px;
}

.acct-menu-item.redeem:hover {
  background: rgba(255, 212, 121, 0.16);
  color: #ffe6a8;
}

/* 免费用户的兑换项再亮一档：这是他们唯一能自助升级的入口，不能埋没。
   已是会员的人不加 highlight（他们要的是续费/升级，不需要被"招揽"）。 */
.acct-menu-item.redeem.highlight {
  color: #11131f;
  border-color: transparent;
  background: linear-gradient(135deg, #ffd479, #ffb347);
  font-weight: 600;
}

.acct-menu-item.redeem.highlight:hover {
  background: linear-gradient(135deg, #ffe3a1, #ffc266);
  color: #11131f;
  filter: brightness(1.03);
}

/* 兑换码输入框：等宽字体 + 字距，15 位码好核对（O/0、I/1 的误读很伤体验） */
.acct-input.code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  letter-spacing: 1.5px;
  text-align: center;
  text-transform: uppercase;
}

.acct-input.code[hidden] {
  display: none;
}

.acct-submit[hidden] {
  display: none;
}

/* 爱发电外链：兑换弹层里「没有会员码？去获取」的引导。
   新开标签（rel=noopener 在 JS 侧设置），样式低调、hover 提亮。 */
.acct-afdian {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.acct-afdian:hover {
  color: #ffd479;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 成功回执 */
.acct-ok {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 212, 121, 0.3);
  border-radius: 12px;
  background: rgba(255, 212, 121, 0.08);
}

.acct-ok[hidden] {
  display: none;
}

.acct-ok-title {
  font-size: 15px;
  font-weight: 650;
  color: #ffd479;
  margin-bottom: 6px;
}

.acct-ok-line {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.acct-ok-perks {
  margin: 9px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text);
}

.acct-ok-perks li {
  margin-bottom: 2px;
}

/* ---------- 工单 / 反馈（2026-10-05）----------
   入口在页脚（#ticketEntry），弹层复用 .acct-* 基类，与登录/兑换弹窗同源。
   卡片比登录框宽：工单要读一屏正文和时间线，360px 会让人不停滚动。 */

.tk-card {
  width: min(640px, 100%);
  max-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
}

.tk-head {
  position: relative;
  flex: 0 0 auto;
}

.tk-head .acct-title {
  margin-bottom: 0;
  padding-right: 32px;
}

.tk-body {
  margin-top: 14px;
  overflow-y: auto;
  flex: 1 1 auto;
  /* 内容不足时不留大片空白，超出时才滚动 */
  min-height: 0;
}

.tk-empty {
  margin: 18px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.tk-bar {
  margin-bottom: 10px;
}

.tk-primary {
  display: block;
  width: 100%;
  padding: 9px;
  border: 1px dashed var(--card-border);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.tk-primary:hover {
  background: var(--card-bg-hover);
}

/* ---------- 列表 ---------- */

.tk-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tk-item {
  display: block;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.tk-item:hover {
  background: var(--card-bg-hover);
}

.tk-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.tk-no {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  color: var(--text-muted);
}

.tk-item-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  /* 标题过长时截断，避免把列表撑成一条条高低不齐的卡片 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tk-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
}

/* 未读红点：用户最需要一眼看到的"有回复了" */
.tk-dot {
  margin-left: auto;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #ff5c72;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  box-sizing: border-box;
}

/* ---------- 状态标签 ---------- */

.tk-status {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  white-space: nowrap;
}

.tk-status.s-open {
  color: #ffd479;
  border-color: rgba(255, 212, 121, 0.35);
  background: rgba(255, 212, 121, 0.1);
}

.tk-status.s-in_progress {
  color: #7cc4ff;
  border-color: rgba(124, 196, 255, 0.35);
  background: rgba(124, 196, 255, 0.1);
}

.tk-status.s-resolved {
  color: #6ee7a8;
  border-color: rgba(110, 231, 168, 0.35);
  background: rgba(110, 231, 168, 0.1);
}

.tk-status.s-closed {
  color: var(--text-muted);
  border-color: var(--card-border);
  background: var(--chip-bg);
}

/* ---------- 表单 ---------- */

.tk-form,
.tk-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tk-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tk-label {
  font-size: 12px;
  color: var(--text-muted);
}

/* textarea 复用 .acct-input 的边框/底色，但高度与换行行为要单独给 */
.tk-textarea {
  resize: vertical;
  line-height: 1.6;
  font-family: inherit;
  /* 新工单描述可以贴报错堆栈，等宽更易读；正文气泡里也保持 */
}

select.acct-input {
  appearance: none;
  cursor: pointer;
}

/* ---------- 详情 ---------- */

.tk-detail-head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--card-border);
}

.tk-detail-head .tk-item-title {
  white-space: normal;
  font-size: 16px;
  margin-bottom: 8px;
}

.tk-time {
  font-size: 11.5px;
  color: var(--text-muted);
}

.tk-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tk-bubble {
  padding: 10px 12px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--bg);
}

/* 管理员回复左侧加一道竖线：扫一眼就能分清谁说的 */
.tk-bubble.admin {
  border-left: 3px solid rgba(124, 196, 255, 0.6);
}

.tk-bubble.main {
  background: var(--card-bg-hover);
}

.tk-bubble-who {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}

.tk-bubble-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.tk-bubble-body {
  font-size: 13.5px;
  line-height: 1.65;
  /* 保留用户输入的换行，同时允许超长串（如 URL）换行不撑破卡片 */
  white-space: pre-wrap;
  word-break: break-word;
}

.tk-internal {
  margin-bottom: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 212, 121, 0.12);
  color: #ffd479;
  font-size: 11px;
}

.tk-reply {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.tk-close {
  margin-top: 2px;
}