/* atne — 共用设计层。从 index.html 抽出，供各工具页复用。
   先与 index.html 内联样式并存；等布局重做时再把 index.html 切过来。 */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@300;400;500&family=DM+Sans:wght@300;400;500&family=Noto+Serif+SC:wght@200;300;400;500&display=swap');

:root{
  --bg:#faf9f7; --card:#ffffff; --ink:#3c3845; --ink2:#585366;
  --muted:#938aa1; --muted2:#b9afb8; --line:#e7e3ec; --line2:#ddd6e2;
  --accent:#9b8fb0; --deep:#403a4d; --warn:#b58a5e; --ok:#7f96a0; --err:#b3788c;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:'Noto Serif SC','PingFang SC',serif;color:var(--ink2);background:var(--bg);
     display:flex;flex-direction:column;min-height:100vh;-webkit-font-smoothing:antialiased}

/* 顶栏 */
.nav{display:flex;align-items:center;justify-content:space-between;padding:20px 36px;border-bottom:.5px solid var(--line)}
.brand{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;letter-spacing:4px;text-transform:uppercase;color:var(--ink);text-decoration:none}
.brand .dot{color:var(--accent)}
.nav-r{font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:.15s;display:flex;align-items:center;gap:6px;text-decoration:none}
.nav-r:hover{color:var(--ink)}
.nav-r.back::before{content:'\2196\FE0E';font-size:11px;color:var(--muted2)}

/* 主体骨架 */
main{flex:1;display:flex;flex-direction:column;align-items:center;padding:64px 20px 44px}
.hero{text-align:center;margin-bottom:30px;position:relative}
.ey{display:flex;align-items:center;justify-content:center;gap:14px;font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:5px;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.ey i{display:block;width:26px;height:.5px;background:var(--line2)}
.ti{font-family:'Shippori Mincho','Noto Serif SC','Songti SC',serif;font-size:42px;font-weight:300;line-height:1.16;color:var(--ink);letter-spacing:1px}
.hr{width:38px;height:.5px;background:var(--line2);margin:22px auto 0}
.sub{font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:18px}
.panel{width:480px;max-width:100%}
.panel.wide{width:760px}
.viewidx{font-family:'DM Sans',sans-serif;font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--muted2);margin-bottom:12px;padding-left:2px}
.foot{text-align:center;padding:30px 20px;border-top:.5px solid var(--line);font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted2)}
.foot em{font-family:'Shippori Mincho','Noto Serif SC',serif;font-style:italic;letter-spacing:0;text-transform:none;color:var(--accent);font-size:13px}

/* tabs */
.tabs{display:flex;justify-content:center;gap:6px;margin:0 auto 26px;flex-wrap:wrap}
.tab{font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);background:none;border:.5px solid transparent;border-radius:20px;padding:7px 16px;cursor:pointer;transition:.15s;text-decoration:none;display:inline-block}
.tab:hover{color:var(--ink2)}
.tab.active{color:var(--ink);border-color:var(--line2);background:var(--card)}

/* 表单件 */
.fl{font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:7px;display:block}
.inp{width:100%;padding:12px 14px;border:.5px solid var(--line2);border-radius:8px;background:var(--card);font-family:'Noto Serif SC',serif;font-size:13px;color:var(--ink);outline:none;transition:border-color .15s}
.inp:focus{border-color:var(--accent)}
.inp::placeholder{color:var(--muted2)}
.btn{width:100%;margin-top:16px;padding:13px;border:none;border-radius:8px;background:var(--deep);color:#f7f5fa;font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:3px;text-transform:uppercase;cursor:pointer;transition:.15s}
.btn:hover:not(:disabled){background:#34303f}
.btn:disabled{opacity:.5;cursor:default}
.cp{border:.5px solid var(--line2);background:transparent;color:var(--ink2);font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:9px 12px;border-radius:8px;cursor:pointer;transition:.15s}
.cp:hover:not(:disabled){border-color:var(--accent);background:#fbfafd}
.cp.done{color:var(--ok);border-color:#bcccd0}
.cp:disabled{opacity:.4;cursor:default}
.drop{display:block;position:relative;border:.5px dashed var(--line2);border-radius:13px;padding:50px 20px;text-align:center;cursor:pointer;background:var(--card);transition:.18s}
.drop:hover,.drop.over{border-color:var(--accent);background:#fdfcfe}
.drop .mark{font-family:'Shippori Mincho','Noto Serif SC',serif;font-size:36px;font-weight:300;color:var(--muted2);line-height:1;margin-bottom:14px}
.drop .big{font-size:14px;color:var(--ink);margin-bottom:6px}
.drop .en{font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.drop input{display:none}
.list{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.row{border:.5px solid var(--line);border-radius:10px;background:var(--card);padding:13px 14px;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* 轻提示 */
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);background:var(--deep);color:#f7f5fa;font-family:'DM Sans','Noto Serif SC',sans-serif;font-size:12px;letter-spacing:.5px;padding:11px 20px;border-radius:10px;z-index:60;box-shadow:0 10px 30px rgba(40,36,48,.25);max-width:80vw;text-align:center}
.logout{text-align:center;margin-top:24px;font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2);line-height:1.9}
.logout a{display:inline-block;margin-top:7px;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.hidden{display:none!important}

@media(max-width:640px){
  .nav{padding:16px 20px}
  main{padding:40px 16px 32px}
  .ti{font-size:30px}
  .panel.wide{width:100%}
}