/* ============================================================
   Lumen Gallery — 后台专有样式
   设计 tokens 与共享组件（.shell .header .btn .field .modal
   .backdrop .banner .empty .chips .toast ...）在 tokens.css。
   这里只放后台页面自己的东西。
   Owned by: ui-admin.
   ============================================================ */

.admin-main{padding:26px 0 0;min-height:calc(100vh - var(--header-h))}
.ic{display:inline-grid;place-items:center;flex:none;line-height:0}
.ic svg{display:block}
.grow{flex:1;min-width:0}
.muted{color:var(--muted)}

/* ---------------- 三态卡片 ---------------- */
.state-wrap{display:flex;justify-content:center;padding:7vh 0 10vh}
.panel{width:min(460px,100%);padding:26px;border-radius:var(--radius-xl);border:var(--ring-w) solid var(--border);background:var(--card);box-shadow:var(--shadow-md)}
.panel.center{display:grid;place-items:center;gap:12px;text-align:center}
.panel h1{margin:0 0 6px;font-size:21px;letter-spacing:-.025em;color:var(--fg-strong)}
.panel p.sub{margin:0 0 20px;color:var(--muted);font-size:13.5px;line-height:1.65}
.panel .modal-actions{margin-top:20px}
.spin{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------- 控制台头部 ---------------- */
.admin-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:18px}
.admin-title{margin:0;font-size:24px;letter-spacing:-.025em;color:var(--fg-strong)}
.admin-sub{margin:5px 0 0;font-size:13px;color:var(--muted)}
.admin-actions{display:flex;flex-wrap:wrap;gap:8px}

/* ---------------- 状态条 ---------------- */
.banner + .banner{margin-top:10px}
.banner .grow{flex:1;min-width:0}
.banner-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.banner code{padding:1px 6px;border-radius:6px;border:var(--ring-w) solid var(--border);background:var(--card-hover);font-family:var(--font-mono);font-size:12px;color:var(--fg)}

/* ---------------- 工具条 ---------------- */
.admin-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:18px 0 8px}
.admin-toolbar .field{flex:1 1 190px;max-width:320px}
.admin-toolbar .field input{width:100%}
.vis-chips{flex:none}
.chip i{position:relative;font-style:normal;font-family:var(--font-mono);font-size:10.5px;color:var(--muted-strong);margin-left:6px;font-variant-numeric:tabular-nums}
.list-meta{display:flex;justify-content:flex-end;margin-bottom:10px}
#listCount{color:var(--muted)}

/* ---------------- 图集列表 ---------------- */
.album-list{display:flex;flex-direction:column;gap:8px}
.album-row{display:flex;align-items:center;gap:14px;padding:10px;border-radius:16px;border:var(--ring-w) solid var(--border);background:var(--card);transition:background var(--dur-fast),border-color var(--dur-fast)}
@media (hover:hover) and (pointer:fine){
  .album-row:hover{background:var(--card-hover);border-color:color-mix(in srgb,var(--accent) 26%,var(--border))}
}
.album-row.is-private{border-color:color-mix(in srgb,var(--accent) 22%,var(--border))}

.thumb{position:relative;flex:none;width:78px;height:58px;border-radius:11px;overflow:hidden;border:1px solid var(--border-soft);background:var(--skeleton);display:grid;place-items:center}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .ph{color:var(--muted);display:grid;place-items:center}
.thumb .ph svg{width:20px;height:20px}

.album-row .info{flex:1;min-width:0}
.t-row{display:flex;align-items:center;gap:8px;min-width:0}
.album-row .t{min-width:0;font-size:14.5px;font-weight:550;letter-spacing:-.01em;color:var(--fg-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.album-row .s{display:flex;align-items:center;gap:7px;margin-top:3px;font-size:12.5px;color:var(--muted);min-width:0}
.album-row .s .au{max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted-strong)}
.album-row .s .dot{opacity:.45}
.album-row .acts{display:flex;align-items:center;gap:6px;flex:none}

.vis-badge{display:inline-flex;align-items:center;gap:4px;flex:none;padding:2px 8px;border-radius:999px;font-size:11.5px;line-height:1.7;border:var(--ring-w) solid var(--border);background:var(--card-hover);color:var(--muted-strong);white-space:nowrap}
.vis-badge svg{width:11px;height:11px}
.vis-badge.private{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--border));background:color-mix(in srgb,var(--accent) 12%,transparent)}
.vis-badge.public{color:var(--muted)}

.icon-btn.sm{width:32px;height:32px;border-radius:9px}
.icon-btn.sm svg{width:15px;height:15px}
.icon-btn.danger:hover{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--border))}

.sk-row{height:78px;margin-bottom:8px}

.empty .empty-ic{display:grid;place-items:center;margin:0 auto 14px;color:var(--muted)}
.empty .empty-ic svg{width:34px;height:34px}

/* ---------------- 弹窗内的表单 ---------------- */
.modal-head h2{margin:0}
.modal-head .sub{margin:2px 0 18px}
/* tokens.css 里 .lbl 只作用于 <label>，这里补上非 label 的用法（如分段控件标题） */
span.lbl{display:block;font-size:12.5px;color:var(--muted);margin:0 0 7px;font-weight:500}
.lbl-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.counter{font-family:var(--font-mono);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.counter.over{color:var(--bad)}

/* 分段控件（借鉴原站 .seg） */
.seg{display:flex;gap:5px;padding:4px;border-radius:13px;border:var(--ring-w) solid var(--border);background:var(--card)}
.seg-btn{flex:1;min-width:0;padding:8px 10px;border-radius:9px;font-size:13px;line-height:1.35;text-align:center;overflow-wrap:break-word;color:var(--muted);transition:color var(--dur-fast),background var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-fast) var(--ease-spring)}
.seg-btn[aria-checked="true"],.seg-btn[aria-pressed="true"]{color:var(--fg-strong);background:var(--card-hover);box-shadow:inset 0 0 0 1px var(--border)}
.seg-btn:active{transform:scale(.98)}

/* 图片链接实时反馈 */
.preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin-top:10px}
.pv{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--skeleton);display:grid;place-items:center}
.pv img{width:100%;height:100%;object-fit:cover}
.pv .ph{color:var(--muted);display:grid;place-items:center}
.pv .ph svg{width:18px;height:18px}
.pv.more{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);border-style:dashed;background:transparent}
.hint.warn-text{color:var(--bad)}

/* 选填折叠区 */
.more{margin:0 0 16px;border:var(--ring-w) solid var(--border);border-radius:14px;background:var(--card);overflow:hidden}
.more>summary{display:flex;align-items:center;gap:9px;padding:11px 14px;font-size:13px;color:var(--muted);cursor:pointer;list-style:none;transition:color var(--dur-fast),background var(--dur-fast)}
.more>summary::-webkit-details-marker{display:none}
.more>summary::before{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform var(--dur-fast) var(--ease-spring)}
.more[open]>summary::before{transform:rotate(45deg)}
.more>summary:hover{color:var(--fg);background:var(--card-hover)}
.more-body{padding:16px 14px 2px;border-top:1px solid var(--border-soft)}

/* ---------------- 访客态：拒绝进入后台 ---------------- */
.guest-panel{width:min(520px,100%);text-align:center;display:flex;flex-direction:column;align-items:center}
.guest-ic{display:grid;place-items:center;width:54px;height:54px;margin:2px 0 16px;border-radius:16px;border:var(--ring-w) solid color-mix(in srgb,var(--accent) 34%,var(--border));background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.guest-ic svg{width:24px;height:24px}
.guest-panel h1{font-size:19px;line-height:1.45}
.guest-panel p.sub{margin-bottom:12px}
.guest-panel p.sub:last-of-type{margin-bottom:0}
.guest-panel .modal-actions{margin-top:22px;width:100%;flex-wrap:wrap}
.guest-panel .modal-actions .btn{text-decoration:none}

/* ---------------- 弹窗内的访客密码小节 ---------------- */
.gp-state{display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:10px 13px;border-radius:12px;border:var(--ring-w) solid var(--border);background:var(--card)}
.gp-label{font-size:12.5px;color:var(--muted)}
.gp-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:12px;line-height:1.6;border:var(--ring-w) solid var(--border);background:var(--card-hover);color:var(--muted-strong);white-space:nowrap}
.gp-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.gp-badge.set{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 42%,var(--border));background:color-mix(in srgb,var(--ok) 12%,transparent)}
.gp-badge.unset{color:var(--muted-strong)}
.field.gp-field{width:100%;height:42px}
.field.gp-field input{flex:1;min-width:0;width:auto;height:100%;border:0;background:none;padding:0}
.gp-eye{flex:none;display:grid;place-items:center;height:28px;padding:0 10px;border-radius:8px;border:var(--ring-w) solid var(--border);background:var(--card-hover);color:var(--muted);font-size:12px;line-height:1;transition:color var(--dur-fast),background var(--dur-fast),border-color var(--dur-fast)}
@media (hover:hover) and (pointer:fine){ .gp-eye:hover{color:var(--fg);background:var(--bg-soft)} }
.gp-eye[aria-pressed="true"]{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--border));background:color-mix(in srgb,var(--accent) 12%,transparent)}
#guestModal .modal-actions{flex-wrap:wrap}
.modal-actions .btn-danger.narrow{flex:none;padding:0 16px}

/* ---------------- 响应式 ---------------- */
@media (max-width:900px){
  .admin-toolbar .field{max-width:none}
}
@media (max-width:640px){
  .admin-main{padding-top:18px}
  .admin-title{font-size:20px}
  .admin-head{align-items:flex-start}
  .admin-actions{width:100%}
  .admin-actions .btn{flex:1}
  .thumb{width:64px;height:50px}
  .album-row{flex-wrap:wrap;row-gap:10px}
  .album-row .acts{width:100%;justify-content:flex-end}
  .album-row .s .au{max-width:46%}
  .panel{padding:20px}
  .seg-btn{font-size:12.5px;padding:8px 6px}
}
@media (max-width:380px){
  .thumb{width:56px;height:46px}
  .album-row .s{flex-wrap:wrap;gap:5px}
  .seg-btn{font-size:12px;padding:8px 5px}
}