/* =============================================================
 * 站点用户登录/注册 UI 样式（导航条部分）
 * 依赖页面已存在的设计变量：--c-primary / --c-accent / --c-bg / --c-border / --c-border-2 / --c-text / --c-text-2 / --c-text-3 / --c-bg-2 / --radius-sm / --radius-md
 * 登录页(login.html)的表单样式为独立内联样式,不在此文件。
 * ============================================================= */

/* --- 1. 导航条登录/注册按钮 --- */
.nav-auth{ display:flex; align-items:center; gap:14px; }

/* 登录:次按钮 — 蓝色描边幽灵按钮(已有账号,轻量入口)
   与注册形成「蓝描边 vs 琥珀实心」的强对比,避免混淆 */
.nav-login{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:13px; font-weight:500; line-height:1;
  color:var(--c-primary);
  padding:7px 15px;
  background:#fff;
  border:1px solid var(--c-primary);
  border-radius:var(--radius-sm);
  text-decoration:none; cursor:pointer;
  transition:color .18s ease, background .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.nav-login:hover{
  color:#0c447c;
  border-color:#0c447c;
  background:rgba(24,95,165,.08);
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(24,95,165,.12);
}
.nav-login:active{
  transform:translateY(0);
  background:rgba(24,95,165,.14);
  box-shadow:inset 0 1px 4px rgba(12,68,124,.22);
}
.nav-login:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(24,95,165,.25);
}

/* 注册:主按钮 — 琥珀实心(加入平台,强引导 CTA)
   颜色/填充/字号/内边距 均区别于登录;左侧竖向分隔线在做布局分离 */
.nav-register{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:13px; font-weight:700; line-height:1;
  color:#fff;
  padding:9px 20px;
  margin-left:14px;
  background:var(--c-accent);
  border:1px solid var(--c-accent);
  border-radius:var(--radius-sm);
  text-decoration:none; cursor:pointer;
  box-shadow:0 2px 8px rgba(239,159,39,.22);
  transition:background .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
}
/* 与登录按钮之间的竖向分隔线,把两个入口在布局上清晰分开 */
.nav-register::before{
  content:""; position:absolute; left:-8px; top:50%; transform:translateY(-50%);
  width:1px; height:18px; background:var(--c-border-2);
}
.nav-register:hover{
  background:#d98e1a; border-color:#d98e1a;
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(239,159,39,.34);
}
.nav-register:active{
  transform:translateY(0);
  background:#c87f12; border-color:#c87f12;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.22);
}
.nav-register:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(239,159,39,.30);
}

/* --- 已登录：头像 + 用户名（整块可点击,跳转个人主页 dashboard.html） --- */
.nav-user{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; cursor:pointer;
  color:var(--c-text);
  padding:6px 10px 6px 6px; border-radius:24px;
  transition:background .2s;
}
.nav-user:hover{ background:var(--c-bg-2); }
/* 修复「首字重复」视觉问题:头像圆点显示姓名首字符,与右侧全名首字相邻时
   会被误读为「张张三」。隐藏头像,导航条仅展示干净的用户名文本(张三)。 */
.nav-avatar{
  display:none;
  width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(135deg,var(--c-primary) 0%,var(--c-accent) 100%);
  color:#fff; font-size:13px; font-weight:600;
  align-items:center; justify-content:center;
  letter-spacing:0;
}
.nav-name{
  font-size:14px; color:var(--c-text); font-weight:500;
  max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* --- 状态切换（默认未登录显示,未登录时用户名 hidden；反之亦然） --- */
.nav-auth[data-state="logged-out"] .nav-user{ display:none; }
.nav-auth[data-state="logged-in"] .nav-login,
.nav-auth[data-state="logged-in"] .nav-register{ display:none; }

/* --- 3. 响应式 --- */
@media (max-width:1024px){
  .nav-auth{ gap:10px; }
  .nav-register{ margin-left:10px; }
  /* 头像已隐藏,中等屏直接展示用户名(避免空白);过长用省略号截断 */
}
@media (max-width:640px){
  .nav-auth{ display:none; }   /* 移动端:Hamburger 菜单展开后,登录/注册出现在 nav-menu 末尾 */
  .nav-login,
  .nav-register{ padding:9px 16px; font-size:14px; width:100%; max-width:280px; }
  /* 移动端竖排:去掉左边距与竖向分隔线,改为上下间距区分 */
  .nav-register{ margin-left:0; }
  .nav-register::before{ display:none; }
  .nav-menu.is-open ~ .nav-auth,
  .nav-menu.is-open + .nav-auth{ display:flex; flex-direction:column; align-items:stretch; gap:12px; padding:16px 20px; border-top:1px solid var(--c-border); width:100%; }
}

/* ===================== 通用弹窗（全站：通知编辑等共用，原仅 dashboard 内联） ===================== */
/* 说明：dashboard.html 内联也有等价定义，本段为单一来源，供所有公开页复用。 */
.modal-scrim {position:fixed; inset:0; z-index:1000;
  background:rgba(15,23,42,.45);
  display:none; align-items:center; justify-content:center;
  padding:20px; overflow:auto;}

.modal-scrim.show {display:flex;}

.modal-box {position:relative; width:100%; max-width:420px;
  background:#fff; border-radius:16px; padding:28px 26px;
  box-shadow:0 20px 60px rgba(15,23,42,.20);}

.modal-close {position:absolute; top:12px; right:14px;
  border:none; background:transparent; cursor:pointer;
  font-size:22px; line-height:1; color:var(--c-text-3);}

.modal-field {margin-bottom:14px;}

.modal-field label {display:block; font-size:13px; color:var(--c-text-2); margin-bottom:6px;}

.modal-field input {width:100%; padding:10px 12px; font-size:14px;
  border:1px solid var(--c-border); border-radius:var(--radius-sm);
  box-sizing:border-box;}

.modal-tip {font-size:12px; min-height:16px; margin:2px 0 8px;}

.modal-actions {display:flex; gap:10px; justify-content:flex-end; margin-top:6px;}

.modal-title {margin:0 0 18px; font-size:18px; font-weight:600;}

.modal-field input[readonly] {background:var(--c-bg-2); color:var(--c-text-3); cursor:not-allowed;}

.modal-tip.is-err {color:#d93025;}

.modal-tip.is-ok {color:var(--c-green);}

.btn-primary {background:var(--c-primary); color:#fff;}

.btn-primary:hover {background:#0c447c; transform:translateY(-1px);}

.btn-ghost {background:transparent; color:var(--c-text-2);
  border:1px solid var(--c-border); padding:8px 16px;
  font-size:13px;}

.btn-ghost:hover {background:var(--c-bg-2); color:var(--c-text);}

/* ===================== 通知中心弹窗（全站共享，原仅 dashboard 内联） ===================== */
.notif-modal {max-width:480px; max-height:82vh; display:flex; flex-direction:column;}

.notif-toolbar {display:flex; justify-content:space-between; gap:8px; margin-bottom:10px;}

.notif-toolbar .btn {font-size:12px; padding:6px 12px;}

.notif-list {overflow:auto; margin:0 -8px; flex:1; min-height:60px;}

.notif-item {display:flex; gap:10px; padding:12px 8px; border-top:1px solid var(--c-border);
  cursor:pointer; border-radius:8px; transition:background .15s;}

.notif-item:first-child {border-top:none;}

.notif-item:hover {background:var(--c-bg-2);}

.notif-dot {width:8px; height:8px; border-radius:50%; background:var(--c-accent); margin-top:6px; flex-shrink:0;}

.notif-item.is-read .notif-dot {background:transparent;}

.notif-main {flex:1; min-width:0;}

.notif-title {font-size:14px; font-weight:600; color:var(--c-text); margin-bottom:3px;}

.notif-item.is-read .notif-title {font-weight:500; color:var(--c-text-2);}

.notif-body {font-size:13px; color:var(--c-text-2); line-height:1.5; margin-bottom:5px;}

.notif-time {font-size:11px; color:var(--c-text-3);}

.notif-empty {padding:40px 20px; text-align:center; color:var(--c-text-3); font-size:13px;}

.notif-settings {border-top:1px solid var(--c-border); margin-top:12px; padding-top:14px;}

.notif-settings[hidden] {display:none !important;}

/* 报名回复通知：列表项「查看回复」提示 + 正文截断 */
.notif-view {font-size:12px; color:var(--c-accent); font-weight:500; margin-left:6px;}

.notif-body--reply {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

/* 报名回复详情弹窗（点击站内「报名回复」通知弹出） */
.reply-detail-modal {max-width:460px; max-height:80vh; display:flex; flex-direction:column;}

.reply-detail-sub {font-size:13px; color:var(--c-text-2); margin-bottom:10px; line-height:1.5;}

.reply-detail-body {overflow:auto; flex:1; min-height:40px; margin-bottom:12px;}

.reply-msg {padding:10px 12px; border:1px solid var(--c-border); border-radius:10px; background:var(--c-bg-2); margin-bottom:10px;}

.reply-meta {display:flex; justify-content:space-between; gap:8px; font-size:11px; color:var(--c-text-3); margin-bottom:6px;}

.reply-ch {color:var(--c-accent); flex-shrink:0;}

.reply-text {font-size:14px; color:var(--c-text); line-height:1.6; white-space:pre-wrap; word-break:break-word;}

.reply-loading, .reply-empty {padding:24px; text-align:center; color:var(--c-text-3); font-size:13px;}

/* 回复页面：发件人上下文 + 用户回复输入区 + 双向气泡 */
.reply-detail-sender {font-size:13px; color:var(--c-text-2); margin-bottom:4px;}

.reply-detail-sub {font-size:13px; color:var(--c-text-2); margin-bottom:10px; line-height:1.5;}

.reply-compose {border-top:1px solid var(--c-border); margin-top:12px; padding-top:12px;}

.reply-compose textarea {width:100%; box-sizing:border-box; border:1px solid var(--c-border); border-radius:8px;
  padding:10px; font-size:14px; line-height:1.5; resize:vertical; background:var(--c-bg); color:var(--c-text);}

.reply-compose-actions {display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:8px;}

.reply-compose-tip {font-size:12px; color:var(--c-text-3); margin-right:auto;}
.reply-compose-tip.is-err {color:#e0483c;}
.reply-compose-tip.is-ok {color:#2ba471;}

.reply-msg--user {background:#eef5ff !important; border-color:#2b7de9 !important;}
.reply-msg--user .reply-meta span:first-child {color:#2b7de9; font-weight:600;}

/* 移动端：回复页面接近全屏，与桌面端体验一致 */
@media (max-width:560px) {
  .reply-detail-modal {max-width:100%; width:100%; max-height:92vh; border-radius:14px 14px 0 0; align-self:flex-end;}
  .modal-scrim {display:flex; align-items:flex-end;}
}