/* ============================================================
   Dreampix Gallery · 主题 tokens + 共享壳样式（阶段③）
   色值与 dreampix-prompts-hub viewer / DreampixAI2.0 对齐：
   深色系 + 品牌主色 --acc:#e8543a
   ============================================================ */
:root{
  --bg:#0f1115;          /* 页面背景 */
  --card:#181b22;        /* 卡片/输入框 */
  --well:#0a0c10;        /* 深井（代码块/图片底） */
  --line:#262b36;        /* 边框 */
  --txt:#e8eaf0;         /* 主文字 */
  --mut:#8b93a3;         /* 次要文字 */
  --acc:#e8543a;         /* 品牌主色（ DreampixAI2.0 同源） */
  --ok:#3fb27f;
  --r-lg:14px;--r-md:10px;--r-sm:8px;
  --font:14px/1.6 system-ui,"Segoe UI","Microsoft YaHei",sans-serif;
}

/* ---- 基础 ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--txt);font:var(--font)}
button{font-family:inherit}
input{font-family:inherit}
a{color:inherit}

/* ---- 共享细滚动条 ---- */
.dg-scroll{scrollbar-width:thin;scrollbar-color:#3a4150 transparent}
.dg-scroll::-webkit-scrollbar{width:8px}
.dg-scroll::-webkit-scrollbar-track{background:transparent}
.dg-scroll::-webkit-scrollbar-thumb{background:#333a48;border-radius:4px}
.dg-scroll::-webkit-scrollbar-thumb:hover{background:#4a5265}

/* ============================================================
   统一顶栏 Header（shell.js 挂载）
   ============================================================ */
.dg-head{display:flex;align-items:center;gap:14px;max-width:1280px;margin:0 auto;width:100%}
.dg-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.dg-brand img{width:26px;height:26px;border-radius:6px;display:block}
.dg-brand b{font-size:17px;font-weight:600;white-space:nowrap}
.dg-brand b span{color:var(--acc)}
.dg-count{color:var(--mut);font-size:13px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg-spacer{flex:1}

/* 顶栏常驻导航（创作中心/我的收藏） */
.dg-nav{display:flex;align-items:center;gap:8px;flex:none}
.dg-nav a{display:flex;align-items:center;gap:5px;background:var(--card);border:1px solid var(--line);border-radius:999px;color:var(--mut);padding:7px 14px;cursor:pointer;font-size:13px;text-decoration:none;white-space:nowrap;transition:border-color .15s,color .15s}
.dg-nav a:hover{color:var(--txt);border-color:var(--acc)}
.dg-nav a.on{color:var(--acc);border-color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent)}
@media (max-width:860px){.dg-nav a{padding:7px 10px}.dg-nav a[data-nav="account"]::after{content:none}}

/* 灵感库 pill（B1：已上线，直跳 gallery.pojuai.com，线上站自身隐藏） */
.dg-sib{display:flex;align-items:center;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:999px;color:var(--mut);padding:7px 14px;cursor:pointer;font-size:13px;text-decoration:none;white-space:nowrap;flex:none;transition:border-color .15s,color .15s}
.dg-sib:hover{color:var(--txt);border-color:var(--acc)}

/* 用户下拉菜单（.dg-user 内） */
.dg-menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);min-width:190px;padding:6px;display:none;box-shadow:0 12px 32px rgba(0,0,0,.5);z-index:60}
.dg-menu.show{display:block}
.dg-menu a,.dg-menu button{display:flex;width:100%;align-items:center;gap:8px;background:none;border:0;color:var(--txt);font-size:13px;padding:8px 10px;border-radius:6px;cursor:pointer;text-decoration:none;text-align:left}
.dg-menu a:hover,.dg-menu button:hover{background:#22262f}
.dg-menu .cur{color:var(--acc)}
.dg-menu .sub{color:var(--mut);font-size:11px;margin-left:auto}
.dg-menu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}

/* 登录区 */
.dg-auth{flex:none;display:flex;align-items:center;gap:8px}
.dg-login-btn{background:var(--acc);border:0;border-radius:999px;color:#fff;padding:8px 18px;cursor:pointer;font-size:13px;font-weight:500}
.dg-login-btn:hover{opacity:.9}
.dg-user{position:relative}
.dg-user>button{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:999px;color:var(--txt);padding:5px 12px 5px 5px;cursor:pointer;font-size:13px}
.dg-user>button:hover{border-color:var(--acc)}
.dg-avatar{width:26px;height:26px;border-radius:50%;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex:none}
img.dg-avatar{object-fit:cover;border:1px solid var(--line)}

/* 确认弹层（core/ui.js confirmPop，替代原生 confirm） */
.cf-mask{position:fixed;inset:0;background:rgba(0,0,0,.66);display:flex;align-items:center;justify-content:center;z-index:120;padding:20px;opacity:0;transition:opacity .16s}
.cf-mask.show{opacity:1}
.cf-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);max-width:340px;width:100%;padding:22px;transform:scale(.95);transition:transform .16s}
.cf-mask.show .cf-box{transform:scale(1)}
.cf-box h3{font-size:15px;font-weight:600;margin-bottom:6px}
.cf-box p{color:var(--mut);font-size:13px;margin-bottom:18px;line-height:1.6}
.cf-acts{display:flex;gap:10px;justify-content:flex-end}
.cf-acts button{border-radius:999px;padding:8px 20px;font-size:13px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--txt)}
.cf-acts button:not(.danger):hover{border-color:var(--acc);color:var(--acc)}
.cf-acts .danger{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:500}
.cf-acts .danger:hover{opacity:.9}
.cf-acts .danger:disabled{opacity:.5;cursor:not-allowed}

/* 登录/注册弹层（假壳） */
.dg-mask{position:fixed;inset:0;background:rgba(0,0,0,.66);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.dg-mask.show{display:flex}
.dg-modal{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);width:100%;max-width:360px;padding:24px;position:relative}
.dg-modal h2{font-size:17px;font-weight:600;margin-bottom:4px}
.dg-modal .tip{color:var(--mut);font-size:12px;margin-bottom:16px}
.dg-modal .x{position:absolute;top:10px;right:12px;background:none;border:0;color:var(--mut);font-size:18px;cursor:pointer;padding:6px}
.dg-modal .x:hover{color:var(--txt)}
.dg-tabs{display:flex;background:var(--well);border:1px solid var(--line);border-radius:999px;padding:3px;margin-bottom:16px}
.dg-tabs button{flex:1;border:0;background:none;color:var(--mut);font-size:13px;padding:7px 0;border-radius:999px;cursor:pointer}
.dg-tabs button.on{background:var(--acc);color:#fff;font-weight:500}
.dg-field{margin-bottom:12px}
.dg-field label{display:block;font-size:12px;color:var(--mut);margin-bottom:5px}
.dg-field input{width:100%;background:var(--well);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--txt);padding:9px 12px;font-size:14px;outline:none}
.dg-field input:focus{border-color:var(--acc)}
.dg-submit{width:100%;background:var(--acc);border:0;border-radius:var(--r-sm);color:#fff;padding:10px 0;cursor:pointer;font-size:14px;font-weight:500;margin-top:6px}
.dg-submit:hover{opacity:.9}
.dg-form-tip{display:none;margin-top:10px;font-size:12px;color:var(--ok);text-align:center}

/* ---- 统一 Header 移动端（720px 断点） ---- */
@media(max-width:720px){
  .dg-head{gap:10px}
  .dg-brand b{font-size:15px}
  .dg-count{display:none}
  .dg-sib{padding:6px 10px}
  .dg-menu{position:fixed;left:12px;right:12px;top:auto;min-width:0}
}
@media(max-width:480px){
  .dg-head{gap:8px}
  .dg-brand b{font-size:13px}
  .dg-brand img{width:22px;height:22px}
  .dg-sib{display:none}
  .dg-login-btn{padding:7px 12px;font-size:12px}
}