/* atne — app 外壳：手机底栏 / 桌面侧边栏。
   只负责导航与骨架，各工具内部样式一行不碰。 */

/* 跨页面过渡：不支持的浏览器自动降级成普通跳转 */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce){ @view-transition { navigation: none; } }

:root{
  --side-w: 208px;
  --tabbar-h: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* 覆盖原来的 body 纵向流式布局 */
body{display:block!important;min-height:100dvh}
.app{display:flex;min-height:100dvh}
.appmain{flex:1;min-width:0;display:flex;flex-direction:column}
.appmain > main{flex:1}

/* ------------------------------------------------ 侧边栏（桌面） */
.sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--side-w);z-index:30;
  border-right:.5px solid var(--line);background:var(--bg);
  display:flex;flex-direction:column;padding:26px 0 20px;
  padding-top:calc(26px + var(--safe-t));
}
.sidebar .sb-brand{
  font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;letter-spacing:4px;
  text-transform:uppercase;color:var(--ink);text-decoration:none;padding:0 22px 4px;
}
.sidebar .sb-brand .dot{color:var(--accent)}
.sidebar .sb-ey{
  font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:3px;color:var(--muted2);
  padding:0 22px 26px;
}
.sb-nav{display:flex;flex-direction:column;gap:2px;padding:0 12px}
.sb-item{
  display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:9px;
  font-family:'DM Sans','Noto Serif SC',sans-serif;font-size:12px;letter-spacing:1.5px;
  color:var(--muted);text-decoration:none;cursor:pointer;border:none;background:none;
  width:100%;text-align:left;transition:.15s;
}
.sb-item:hover{color:var(--ink2);background:#f4f2f7}
.sb-item.on{color:var(--ink);background:var(--card);box-shadow:0 0 0 .5px var(--line2)}
.sb-item .ic{width:17px;text-align:center;font-size:14px;color:var(--muted2);flex:none}
.sb-item.on .ic{color:var(--accent)}
.sb-foot{
  margin-top:auto;padding:0 22px;font-family:'DM Sans',sans-serif;font-size:9px;
  letter-spacing:2px;text-transform:uppercase;color:var(--muted2);line-height:2;
}
.sb-foot em{font-family:'Shippori Mincho','Noto Serif SC',serif;font-style:italic;
  letter-spacing:0;text-transform:none;color:var(--accent);font-size:12px}

/* ------------------------------------------------ 底栏（手机） */
.tabbar{
  position:fixed;inset:auto 0 0 0;z-index:40;display:none;
  background:rgba(250,249,247,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:.5px solid var(--line);
  padding-bottom:var(--safe-b);
}
.tabbar-in{display:flex;height:var(--tabbar-h)}
.tb-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:none;background:none;cursor:pointer;text-decoration:none;
  color:var(--muted2);transition:color .15s;
  -webkit-tap-highlight-color:transparent;
}
.tb-item .ic{font-size:17px;line-height:1}
.tb-item .lb{font-family:'DM Sans','Noto Serif SC',sans-serif;font-size:9.5px;letter-spacing:.5px}
.tb-item.on{color:var(--accent)}
.tb-item:active{opacity:.55}

/* ------------------------------------------------ 触摸目标 ≥44px（不改变观感） */
@media (pointer:coarse){
  .cp,.tab,.eye,.modal-close,.rmv{position:relative}
  .cp::after,.tab::after,.eye::after,.modal-close::after,.rmv::after{
    content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:max(100%,44px);height:max(100%,44px);
  }
}

.tabs{display:none}          /* 工具切换统一交给外壳导航 */

/* 门禁未通过：只留密钥页，导航壳全部收起 */
body.gated .sidebar,
body.gated .tabbar{display:none!important}
body.gated .appmain{padding-left:0!important;padding-bottom:0!important}

/* ------------------------------------------------ 响应式切换 */
@media (min-width:861px){
  .appmain{padding-left:var(--side-w)}
  .app > .appmain > header.nav{display:none}     /* 桌面用侧边栏，顶栏收起 */
  .appmain > .foot{display:none}                 /* 页脚也移到侧边栏 */
}
@media (max-width:860px){
  .sidebar{display:none}
  .tabbar{display:block}
  .appmain{padding-bottom:calc(var(--tabbar-h) + var(--safe-b))}
  header.nav{position:sticky;top:0;z-index:20;background:rgba(250,249,247,.92);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    padding-top:calc(16px + var(--safe-t))}
  main{padding-top:34px!important}
  /* 手机上把招牌收紧，让工具早点出现 */
  .hero{margin-bottom:18px}
  .ey{margin-bottom:12px;font-size:9px;letter-spacing:4px}
  .hr{margin-top:14px}
  .sub{margin-top:12px;font-size:10px}
}