/* ============================================================
   公开导航页 — 123ONE 标准组件库设计令牌
   使用 --dsd-* 变量体系，蓝色主题 #4F6EF7
   ============================================================ */

.dsu-pnav-body{
  --dsd-bg:#f6f7fb; --dsd-panel:#ffffff; --dsd-panel-2:#fbfbfe;
  --dsd-line:#e7e8ec; --dsd-line-strong:#dadce2;
  --dsd-ink:#1f2430; --dsd-ink-600:#454b57; --dsd-ink-400:#8a909c; --dsd-ink-200:#bcc0c8;
  --dsd-accent:#4F6EF7; --dsd-accent-2:#3a56d4; --dsd-accent-soft:#eef0ff;
  --dsd-ok:#0f9d58; --dsd-ok-bg:#ecfdf5;
  --dsd-bad:#e23b5a; --dsd-bad-bg:#fff5f5;
  --dsd-radius-3:8px; --dsd-radius-4:10px; --dsd-radius-5:12px; --dsd-radius-6:14px; --dsd-radius-full:999px;
  --dsd-shadow-sm:0 2px 8px rgba(20,24,40,.04);
  --dsd-shadow-md:0 10px 30px rgba(20,24,40,.08);
  --dsd-shadow-lg:0 18px 44px rgba(20,24,40,.14);
  --dsd-font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,sans-serif;
  --dsd-fs-xs:11px; --dsd-fs-sm:13px; --dsd-fs-md:14px; --dsd-fs-lg:15px;
  --dsd-fs-xl:16px; --dsd-fs-2xl:19px; --dsd-fs-3xl:24px;
  --dsd-fw-semi:600; --dsd-fw-bold:700; --dsd-fw-xbold:800;
  --dsd-t-fast:.12s; --dsd-t-normal:.15s;
  background:var(--dsd-bg); min-height:100vh; display:flex; flex-direction:column;
  color:var(--dsd-ink); font-family:var(--dsd-font-sans);
}
.dsu-pnav-body *{box-sizing:border-box}
.dsu-pnav-body a{color:inherit;text-decoration:none}
.dsu-pnav-body img{display:block;max-width:100%}

/* ============================================================
   顶栏
   ============================================================ */
.dsu-pnav-body .dsu-pnav-topbar{
  background:rgba(255,255,255,.85); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--dsd-line); padding:0 24px; position:sticky; top:0; z-index:100;
}
.dsu-pnav-body .dsu-pnav-tb-in{
  max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:56px;
}
.dsu-pnav-body .dsu-pnav-logo{display:flex;align-items:center;gap:8px;font-weight:var(--dsd-fw-bold);font-size:15px;color:var(--dsd-ink)}
.dsu-pnav-body .dsu-pnav-logo-img{height:32px;width:auto}
.dsu-pnav-body .dsu-pnav-logo-sq{
  width:28px; height:28px; border-radius:var(--dsd-radius-3);
  background:linear-gradient(135deg,var(--dsd-accent),var(--dsd-accent-2)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:var(--dsd-fw-xbold);
}
.dsu-pnav-body .dsu-pnav-tb-rt{display:flex;align-items:center;gap:10px}
.dsu-pnav-body .dsu-pnav-url-tag{
  font-family:"SF Mono",ui-monospace,Consolas,monospace; font-size:var(--dsd-fs-sm); color:var(--dsd-ink-400);
  padding:3px 10px; border-radius:var(--dsd-radius-3); background:var(--dsd-panel-2);
}
.dsu-pnav-body .dsu-pnav-mgmt-btn{
  display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border-radius:var(--dsd-radius-full);
  border:1.5px solid var(--dsd-line-strong); background:var(--dsd-panel); color:var(--dsd-ink-600);
  font-size:var(--dsd-fs-sm); font-weight:var(--dsd-fw-semi); font-family:var(--dsd-font-sans); text-decoration:none;
  transition:background var(--dsd-t-fast),color var(--dsd-t-fast);
}
.dsu-pnav-body .dsu-pnav-mgmt-btn:hover{background:var(--dsd-panel-2);color:var(--dsd-ink)}

/* ============================================================
   主内容区
   ============================================================ */
.dsu-pnav-body .dsu-pnav-main{flex:1;padding:40px 24px 60px}

/* ---- 个人信息卡 ---- */
.dsu-pnav-body .dsu-pnav-info{
  display:flex; align-items:center; gap:20px; max-width:1280px; margin:0 auto 32px;
  padding:24px 28px; background:var(--dsd-panel); border:none; border-radius:var(--dsd-radius-5);
}
.dsu-pnav-body .dsu-pnav-avatar{
  width:64px; height:64px; border-radius:50%; flex:0 0 auto; overflow:hidden;
  border:3px solid var(--dsd-accent-soft); box-shadow:0 0 0 1px var(--dsd-line);
  display:flex; align-items:center; justify-content:center;
}
.dsu-pnav-body .dsu-pnav-avatar img{width:100%;height:100%;object-fit:cover}
.dsu-pnav-body .dsu-pnav-avatar span{font-size:28px;font-weight:800;color:var(--dsd-accent)}
.dsu-pnav-body .dsu-pnav-info-body{flex:1;min-width:0}
.dsu-pnav-body .dsu-pnav-name{font-size:var(--dsd-fs-2xl);font-weight:var(--dsd-fw-bold);color:var(--dsd-ink);margin:0 0 2px}
.dsu-pnav-body .dsu-pnav-handle{
  font-family:"SF Mono",ui-monospace,Consolas,monospace; font-size:var(--dsd-fs-sm);
  color:var(--dsd-accent); font-weight:var(--dsd-fw-semi);
}
.dsu-pnav-body .dsu-pnav-bio{font-size:var(--dsd-fs-md);color:var(--dsd-ink-400);margin:6px 0 0;line-height:1.65}
.dsu-pnav-body .dsu-pnav-bio--empty{font-size:var(--dsd-fs-sm);font-style:italic}
.dsu-pnav-body .dsu-pnav-bio--empty a{color:var(--dsd-accent);font-weight:var(--dsd-fw-semi)}
.dsu-pnav-body .dsu-pnav-stats{display:flex;gap:24px;flex:0 0 auto}
.dsu-pnav-body .dsu-pnav-stat{text-align:center}
.dsu-pnav-body .dsu-pnav-stat-num{display:block;font-size:var(--dsd-fs-3xl);font-weight:var(--dsd-fw-xbold);color:var(--dsd-ink);line-height:1}
.dsu-pnav-body .dsu-pnav-stat-label{display:block;font-size:var(--dsd-fs-xs);color:var(--dsd-ink-400);font-weight:var(--dsd-fw-semi);margin-top:2px}

/* ============================================================
   双栏布局
   ============================================================ */
.dsu-pnav-body .dsu-pnav-layout{display:grid;grid-template-columns:200px 1fr;gap:24px;max-width:1280px;margin:0 auto;align-items:start}

/* ---- 左侧分类菜单 ---- */
.dsu-pnav-body .dsu-pnav-sidebar{
  position:sticky; top:76px; background:var(--dsd-panel); border:none;
  border-radius:var(--dsd-radius-5); padding:16px;
}
.dsu-pnav-body .dsu-pnav-sidebar-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding:0 4px}
.dsu-pnav-body .dsu-pnav-sidebar-hd h3{font-size:var(--dsd-fs-sm);font-weight:var(--dsd-fw-bold);color:var(--dsd-ink-400);text-transform:uppercase;letter-spacing:.06em;margin:0}
.dsu-pnav-body .dsu-pnav-count{font-size:var(--dsd-fs-xs);color:var(--dsd-ink-400);font-weight:var(--dsd-fw-semi);background:var(--dsd-panel-2);padding:1px 8px;border-radius:var(--dsd-radius-full)}
.dsu-pnav-body .dsu-pnav-sidebar-nav{display:flex;flex-direction:column;gap:2px}
.dsu-pnav-body .dsu-pnav-cat{
  display:flex; align-items:center; gap:8px; padding:9px 12px; border:none; border-radius:var(--dsd-radius-3);
  font-size:var(--dsd-fs-sm); font-weight:var(--dsd-fw-semi); color:var(--dsd-ink-600);
  cursor:pointer; background:transparent; text-align:left; width:100%; font-family:var(--dsd-font-sans);
  transition:background var(--dsd-t-fast),color var(--dsd-t-fast);
}
.dsu-pnav-body .dsu-pnav-cat svg{width:15px;height:15px;flex-shrink:0;opacity:.7}
.dsu-pnav-body .dsu-pnav-cat:hover{background:var(--dsd-panel-2);color:var(--dsd-ink)}
.dsu-pnav-body .dsu-pnav-cat.active{background:var(--dsd-accent);color:#fff}
.dsu-pnav-body .dsu-pnav-cat.active svg{opacity:1}
.dsu-pnav-body .dsu-pnav-cat--child{padding-left:28px;font-size:var(--dsd-fs-xs);font-weight:var(--dsd-fw-semi)}
.dsu-pnav-body .dsu-pnav-sidebar-add{
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin-top:8px; padding:9px 12px;
  border:1.5px dashed var(--dsd-line-strong); border-radius:var(--dsd-radius-3);
  background:transparent; color:var(--dsd-ink-400); font-size:var(--dsd-fs-sm); font-weight:var(--dsd-fw-semi);
  cursor:pointer; font-family:var(--dsd-font-sans);
  transition:border-color var(--dsd-t-fast),color var(--dsd-t-fast),background var(--dsd-t-fast);
}
.dsu-pnav-body .dsu-pnav-sidebar-add:hover{border-color:var(--dsd-accent);color:var(--dsd-accent);background:var(--dsd-accent-soft)}
.dsu-pnav-body .dsu-pnav-sidebar-add svg{width:14px;height:14px}

/* ---- 右侧内容 ---- */
.dsu-pnav-body .dsu-pnav-content{min-width:0}

/* 添加面板 */
.dsu-pnav-body .dsu-pnav-add-panel{background:var(--dsd-panel);border:none;border-radius:var(--dsd-radius-5);padding:20px;margin-bottom:16px}
.dsu-pnav-body .dsu-pnav-add-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dsu-pnav-body .dsu-pnav-add-field label{display:block;font-size:var(--dsd-fs-sm);font-weight:var(--dsd-fw-semi);color:var(--dsd-ink-600);margin-bottom:4px}
.dsu-pnav-body .dsu-pnav-add-field label span{color:var(--dsd-bad)}
.dsu-pnav-body .dsu-pnav-add-field label em{font-weight:400;color:var(--dsd-ink-400)}
.dsu-pnav-body .dsu-pnav-add-field input,
.dsu-pnav-body .dsu-pnav-add-field select{
  width:100%; padding:10px 13px; border:1.5px solid var(--dsd-line-strong); border-radius:var(--dsd-radius-3);
  font-size:var(--dsd-fs-md); font-family:var(--dsd-font-sans); color:var(--dsd-ink); background:var(--dsd-panel); outline:none;
  transition:border-color var(--dsd-t-fast),box-shadow var(--dsd-t-fast);
}
.dsu-pnav-body .dsu-pnav-add-field input:focus,
.dsu-pnav-body .dsu-pnav-add-field select:focus{
  border-color:var(--dsd-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--dsd-accent) 15%,transparent);
}
.dsu-pnav-body .dsu-pnav-add-field--wide{grid-column:1/-1}
.dsu-pnav-body .dsu-pnav-add-actions{display:flex;gap:8px;margin-top:12px}
.dsu-pnav-body .dsu-pnav-add-actions .dsu-btn,
.dsu-pnav-body .dsu-mgmt-nav-empty .dsu-btn{
  padding:11px 24px; border:0; border-radius:var(--dsd-radius-full);
  background:linear-gradient(135deg,var(--dsd-accent),var(--dsd-accent-2)); color:#fff;
  font-size:var(--dsd-fs-md); font-weight:var(--dsd-fw-bold); cursor:pointer; font-family:var(--dsd-font-sans);
  transition:filter var(--dsd-t-normal); display:inline-flex; align-items:center; gap:6px;
}
.dsu-pnav-body .dsu-pnav-add-actions .dsu-btn:hover,
.dsu-pnav-body .dsu-mgmt-nav-empty .dsu-btn:hover{filter:brightness(1.08)}
.dsu-pnav-body .dsu-pnav-add-actions .dsu-btn--outline{background:transparent;color:var(--dsd-ink);border:1.5px solid var(--dsd-line-strong)}
.dsu-pnav-body .dsu-pnav-add-actions .dsu-btn--outline:hover{background:var(--dsd-panel-2);filter:none}

/* 卡片网格（与管理页共享 .dsu-mgmt-nav-card） */
.dsu-pnav-body .dsu-mgmt-nav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.dsu-pnav-body .dsu-mgmt-nav-card,
.dsu-pnav-body .pnav-card,
.dsu-pnav-body .js-pnav-card{
  display:flex; align-items:center; gap:14px; padding:16px 18px;
  background:var(--dsd-panel); border:none; border-radius:var(--dsd-radius-5);
  transition:border-color var(--dsd-t-fast),box-shadow var(--dsd-t-normal),transform var(--dsd-t-normal);
  text-decoration:none; color:inherit;
}
/* 内容模块不显示网址（标题 + 图标 + 简介即可） */
.dsu-pnav-body .dsu-mgmt-nav-card-url{display:none}
.dsu-pnav-body .dsu-mgmt-nav-card:hover,
.dsu-pnav-body .pnav-card:hover,
.dsu-pnav-body .js-pnav-card:hover{transform:translateY(-2px);box-shadow:var(--dsd-shadow-md)}
.dsu-pnav-body .dsu-mgmt-nav-card-inner{display:flex;align-items:center;gap:14px;width:100%;min-width:0;position:relative}
.dsu-pnav-body .dsu-mgmt-nav-card-icon{
  width:42px; height:42px; border-radius:var(--dsd-radius-3); flex:0 0 auto;
  background:var(--dsd-accent-soft); border:none;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.dsu-pnav-body .dsu-mgmt-nav-card-icon img{width:24px;height:24px;object-fit:contain}
.dsu-pnav-body .dsu-mgmt-nav-card-letter{font-size:18px;font-weight:var(--dsd-fw-bold);color:var(--dsd-accent)}
.dsu-pnav-body .dsu-mgmt-nav-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-right:4px}
.dsu-pnav-body .dsu-mgmt-nav-card-title{font-size:var(--dsd-fs-md);font-weight:var(--dsd-fw-bold);color:var(--dsd-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsu-pnav-body .dsu-mgmt-nav-card-url{font-size:var(--dsd-fs-sm);color:var(--dsd-ink-400)}
.dsu-pnav-body .dsu-mgmt-nav-card-desc{font-size:var(--dsd-fs-xs);color:var(--dsd-ink-400);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsu-pnav-body .dsu-pnav-card-body-link{flex:1;min-width:0}
.dsu-pnav-body .dsu-mgmt-nav-card-actions{
  position:absolute; bottom:6px; right:8px; display:flex; align-items:center; gap:2px;
  opacity:0; transition:opacity var(--dsd-t-fast); pointer-events:none;
}
.dsu-pnav-body .dsu-mgmt-nav-card:hover .dsu-mgmt-nav-card-actions,
.dsu-pnav-body .js-pnav-card:hover .dsu-mgmt-nav-card-actions{opacity:1;pointer-events:auto}
.dsu-pnav-body .dsu-mgmt-nav-card-visit,
.dsu-pnav-body .js-pnav-edit,
.dsu-pnav-body .js-pnav-delete{
  display:flex; align-items:center; justify-content:center; width:28px; height:28px; border:none;
  border-radius:var(--dsd-radius-3); background:rgba(255,255,255,.9); color:var(--dsd-ink-400);
  transition:background var(--dsd-t-fast),color var(--dsd-t-fast); flex:0 0 auto; text-decoration:none; cursor:pointer; padding:0;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.dsu-pnav-body .dsu-mgmt-nav-card-visit:hover,
.dsu-pnav-body .js-pnav-edit:hover{background:var(--dsd-accent-soft);color:var(--dsd-accent)}
.dsu-pnav-body .js-pnav-delete:hover{background:var(--dsd-bad-bg);color:var(--dsd-bad)}

/* 空状态 */
.dsu-pnav-body .dsu-mgmt-nav-empty{text-align:center;padding:48px 20px}
.dsu-pnav-body .dsu-mgmt-nav-empty-icon{margin-bottom:16px;color:var(--dsd-ink-200)}
.dsu-pnav-body .dsu-mgmt-nav-empty-icon svg{width:56px;height:56px}
.dsu-pnav-body .dsu-mgmt-nav-empty p{font-size:var(--dsd-fs-lg);color:var(--dsd-ink-400);margin:0 0 20px;font-weight:var(--dsd-fw-semi)}

/* ---- 未公开导航页（他人访问时） ---- */
.dsu-pnav-body .dsu-pnav-private{
  max-width:560px; margin:0 auto; padding:56px 40px; text-align:center;
  background:var(--dsd-panel); border:1px solid var(--dsd-line); border-radius:var(--dsd-radius-6);
}
.dsu-pnav-body .dsu-pnav-private-icon{
  width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  background:var(--dsd-accent-soft); color:var(--dsd-accent);
  display:flex; align-items:center; justify-content:center;
}
.dsu-pnav-body .dsu-pnav-private-icon svg{width:28px;height:28px}
.dsu-pnav-body .dsu-pnav-private h1{font-size:var(--dsd-fs-2xl);font-weight:var(--dsd-fw-xbold);color:var(--dsd-ink);margin:0 0 8px}
.dsu-pnav-body .dsu-pnav-private p{font-size:var(--dsd-fs-md);color:var(--dsd-ink-400);margin:0 0 4px;line-height:1.7}
.dsu-pnav-body .dsu-pnav-private .dsu-pnav-private-sub{margin-top:8px}
.dsu-pnav-body .dsu-pnav-private-btn{
  display:inline-flex; margin-top:18px; padding:11px 26px; border-radius:var(--dsd-radius-full);
  background:linear-gradient(135deg,var(--dsd-accent),var(--dsd-accent-2)); color:#fff;
  font-size:var(--dsd-fs-md); font-weight:var(--dsd-fw-bold);
  transition:filter var(--dsd-t-normal);
}
.dsu-pnav-body .dsu-pnav-private-btn:hover{filter:brightness(1.08)}

/* ---- 本人查看未公开页时的提示条 ---- */
.dsu-pnav-body .dsu-pnav-notice{
  max-width:1280px; margin:0 auto 16px; padding:11px 16px;
  display:flex; align-items:center; gap:8px;
  background:#fef3c7; color:#92400e; border-radius:var(--dsd-radius-3);
  font-size:var(--dsd-fs-sm);
}
.dsu-pnav-body .dsu-pnav-notice svg{flex:0 0 auto;opacity:.8}
.dsu-pnav-body .dsu-pnav-notice strong{font-weight:var(--dsd-fw-bold)}
.dsu-pnav-body .dsu-pnav-notice a{margin-left:auto;color:var(--dsd-accent);font-weight:var(--dsd-fw-semi);text-decoration:underline;text-underline-offset:3px;flex:0 0 auto}
.dsu-pnav-body .dsu-pnav-notice a:hover{text-decoration:none}

/* ============================================================
   页脚
   ============================================================ */
.dsu-pnav-body .dsu-pnav-footer{flex:0 0 auto;text-align:center;padding:28px 20px;border-top:1px solid var(--dsd-line)}
.dsu-pnav-body .dsu-pnav-footer p{font-size:var(--dsd-fs-xs);color:var(--dsd-ink-400);margin:0}
.dsu-pnav-body .dsu-pnav-footer a{color:var(--dsd-accent);font-weight:var(--dsd-fw-semi)}

/* ============================================================
   响应式
   ============================================================ */
@media(max-width:880px){
  .dsu-pnav-body .dsu-pnav-info{flex-direction:column;text-align:center;gap:12px;padding:20px}
  .dsu-pnav-body .dsu-pnav-stats{justify-content:center}
  .dsu-pnav-body .dsu-pnav-layout{grid-template-columns:1fr;gap:16px}
  .dsu-pnav-body .dsu-pnav-sidebar{position:static}
  .dsu-pnav-body .dsu-pnav-sidebar-nav{flex-direction:row;flex-wrap:wrap;gap:6px}
  .dsu-pnav-body .dsu-pnav-cat{flex-shrink:0}
  .dsu-pnav-body .dsu-pnav-cat--child{padding-left:12px}
}
@media(max-width:560px){
  .dsu-pnav-body .dsu-pnav-main{padding:24px 16px 40px}
  .dsu-pnav-body .dsu-pnav-info{padding:16px;gap:10px}
  .dsu-pnav-body .dsu-pnav-avatar{width:56px;height:56px}
  .dsu-pnav-body .dsu-pnav-name{font-size:var(--dsd-fs-xl)}
  .dsu-pnav-body .dsu-pnav-stats{gap:16px}
  .dsu-pnav-body .dsu-mgmt-nav-grid{grid-template-columns:1fr}
  .dsu-pnav-body .dsu-pnav-add-grid{grid-template-columns:1fr}
}