/* ==========================================================
   AGONI · 深色设计系统
   深绿黑画布 / 浅色文字 / 提亮森林绿 / 琥珀焦点
   ========================================================== */

/* ========== 全局变量与重置 ========== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}
::-webkit-scrollbar{display:none;width:0;height:0}
:root{
  /* 画布 */
  --bg:#faf9f6;
  --bg-gradient:linear-gradient(180deg,#fcfbf8 0%,#f6f4ef 100%);
  --card:#ffffff;
  --card-solid:#ffffff;
  /* 品牌色：森林绿 */
  --primary:#2f6e4f;
  --primary-dark:#25593f;
  --primary-light:rgba(47,110,79,.08);
  /* 焦点色：琥珀 */
  --accent:#b58a3e;
  --accent-light:rgba(181,138,62,.10);
  /* 文字：墨色三级 */
  --ink:#1a1916;
  --text:#2b2922;
  --text2:#6e6a5e;
  --text3:#a29d8e;
  /* 边框 */
  --border:#ebe8df;
  --hairline:rgba(26,25,22,.06);
  /* 语义色 */
  --danger:#b0443e;
  --success:#2e7d5b;
  --warning:#b58a3e;
  --tag-bg:#f3f1ea;
  /* 圆角 */
  --radius:14px;
  --radius-sm:9px;
  /* 阴影 */
  --shadow:0 1px 2px rgba(26,25,22,.04),0 1px 3px rgba(26,25,22,.03);
  --shadow-md:0 4px 12px rgba(26,25,22,.06),0 2px 4px rgba(26,25,22,.04);
  --shadow-lg:0 12px 32px rgba(26,25,22,.08);
  /* 毛玻璃 */
  --glass-blur:blur(12px);
  /* 应用壳 */
  --nav-w:220px;
}
html,body{height:100%}
html{overflow-y:scroll}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg-gradient);
  background-attachment:fixed;
  color:var(--text);
  font-size:14.5px;line-height:1.7;
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* 背景极淡品牌色晕染 */
body::before{
  content:'';
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:radial-gradient(900px 400px at 25% -5%, rgba(47,110,79,.03) 0%, transparent 60%);
  pointer-events:none;
  z-index:0;
}
/* 光粒子（极淡） */
.particles{
  position:fixed;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:0;overflow:hidden;
}
.particle{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle, rgba(47,110,79,.15) 0%, rgba(47,110,79,0) 70%);
  animation:float linear infinite;
}
@keyframes float{
  0%{transform:translateY(100vh) scale(0);opacity:0}
  15%{opacity:.5}
  85%{opacity:.5}
  100%{transform:translateY(-80px) scale(1);opacity:0}
}
a{text-decoration:none;color:inherit;transition:color .15s ease}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font-family:inherit;font-size:inherit}
img{max-width:100%;display:block}
::selection{background:rgba(47,110,79,.12)}
:focus-visible{outline:2px solid rgba(181,138,62,.5);outline-offset:2px}

/* PC 端细滚动条 */
@media(hover:hover) and (pointer:fine){
  ::-webkit-scrollbar{width:9px;height:9px}
  ::-webkit-scrollbar-thumb{background:#d6d2c4;border-radius:8px}
  ::-webkit-scrollbar-thumb:hover{background:#c4bfb0}
  ::-webkit-scrollbar-track{background:transparent}
}

/* ========== 顶部导航栏 ========== */
.top-nav{
  position:fixed;top:20px;left:0;right:0;
  margin:0 auto;
  width:calc(100% - 80px);max-width:1120px;
  height:64px;
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 4px 20px rgba(26,25,22,.08),0 1px 3px rgba(26,25,22,.04);
  z-index:100;
}
.tn-inner{
  height:100%;
  display:flex;align-items:center;
  padding:0 10px 0 24px;
  gap:32px;
}
.tn-brand{
  display:flex;align-items:center;gap:10px;
  flex-shrink:0;
}
.tn-logo{
  width:32px;height:32px;border-radius:9px;
  background:var(--primary);
  color:#fffefb;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;
}
.tn-brand-text{color:var(--ink);font-size:15px;font-weight:650;letter-spacing:-.01em}
/* 导航组：整体容器，右边 */
.tn-items{
  display:flex;align-items:center;
  margin-left:auto;
  height:46px;
  position:relative;
  background:var(--tag-bg);
  border-radius:12px;
  padding:4px;
}
/* 浮动指示块 */
.tn-indicator{
  position:absolute;
  top:4px;left:0;
  height:calc(100% - 8px);
  background:#fff;
  border-radius:9px;
  box-shadow:0 2px 6px rgba(26,25,22,.1),0 1px 2px rgba(26,25,22,.06);
  transition:transform .35s cubic-bezier(0.34, 1.56, 0.64, 1), width .35s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events:none;
  z-index:0;
  opacity:0;
}



.tn-indicator.ready{opacity:1}
.tn-item{
  display:flex;align-items:center;gap:7px;
  padding:0 18px;
  height:100%;
  border-radius:9px;
  color:var(--text2);
  font-size:13.5px;font-weight:500;
  position:relative;
  z-index:1;
  cursor:pointer;
  transition:color .25s ease;
  white-space:nowrap;
}
.tn-item .tn-icon{font-size:15px;line-height:1}
.tn-item .tn-label{
  position:relative;
  display:inline-block;
}
/* 加粗叠加层：默认透明，激活时淡入 */
.tn-item .tn-label::after{
  content:attr(data-text);
  position:absolute;
  left:0;top:0;
  font-weight:600;
  color:inherit;
  opacity:0;
  transition:opacity .5s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events:none;
  white-space:nowrap;
}
/* hover */
.tn-item:hover{color:var(--primary)}
/* 激活：加粗层淡入 */
.tn-item.active{color:var(--primary)}
.tn-item.active .tn-label::after{opacity:1}
/* 按压 */
.tn-item.pressed{transform:scale(0.96)}
.tn-item{transition:color .25s ease, transform .1s ease}

/* ========== 应用容器（内容区限宽） ========== */
.app{
  min-height:100vh;
  padding:100px max(32px, calc((100vw - 960px) / 2)) 80px;
  position:relative;z-index:1;
}

@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* 设置页：内容自然高度，收紧底部留白 */
.app.settings-page{
  min-height:0;
  padding-bottom:32px;
}