:root{
  --paper:#f7f5ef;
  --ink:#1f2933;
  --muted: rgba(31,41,51,.62);
  --line: rgba(31,41,51,.10);
  --card: rgba(255,255,255,.65);
  --card2: rgba(255,255,255,.78);
  --shadow: 0 18px 60px rgba(2,6,23,.10);
  --shadow2: 0 10px 28px rgba(2,6,23,.08);
  --r: 20px;
  color-scheme: light;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  background: var(--paper);
  color: var(--ink);
}
a{color:inherit; text-decoration:none;}
::selection{background: rgba(37,99,235,.18);}

.container{max-width: 1080px; margin: 0 auto;}
.wrap{min-height:100%; padding: 18px 16px 44px;}

.topbar{position: sticky; top:0; z-index: 10; backdrop-filter: blur(10px); background: rgba(247,245,239,.82); border-bottom: 1px solid var(--line);}
.topbar .inner{height:56px; display:flex; align-items:center; justify-content:space-between; gap:12px;}
.brand{display:flex; align-items:center; gap:10px;}
.logo{width:36px;height:36px;border-radius:14px; background: url('/tools/haoge-logo.png') center/cover no-repeat; box-shadow: var(--shadow2); border:1px solid rgba(31,41,51,.10);} 
.brand .t{font-weight:700; font-size:14px; letter-spacing:.2px;}
.brand .s{font-size:12px; color: var(--muted); margin-top:2px;}

.pill{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid var(--line); background: rgba(255,255,255,.70); font-size:12px; color: rgba(31,41,51,.72)}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:10px 12px; border-radius: 14px; border:1px solid var(--line); background: rgba(255,255,255,.72); font-weight:700; font-size:13px; box-shadow: var(--shadow2); cursor:pointer;}
.btn.primary{background: rgba(31,41,51,.92); color: var(--paper); border-color: transparent;}
.btn.ghost{background: rgba(255,255,255,.62);}
.btn:hover{filter: brightness(.98)}

.panel{border-radius: var(--r); border:1px solid var(--line); background: var(--card); box-shadow: var(--shadow2); overflow:hidden;}
.panelHead{padding:16px 16px 12px; border-bottom:1px solid var(--line); background: rgba(255,255,255,.48)}
.kicker{font-size:12px; letter-spacing:.18em; font-weight:800; color: rgba(31,41,51,.55)}
.subhead{margin-top:8px; font-size:13px; color: rgba(31,41,51,.70)}

.card{border-radius: var(--r); border:1px solid var(--line); background: var(--card2); box-shadow: var(--shadow2); padding:16px;}
.row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid rgba(31,41,51,.10); border-radius:16px; background: rgba(255,255,255,.50);}
.row:hover{background: rgba(255,255,255,.78)}

.footer{margin-top: 16px; padding-top: 14px; border-top:1px solid rgba(31,41,51,.10); color: rgba(31,41,51,.52); font-size:12px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;}

@media (max-width: 520px){
  .topbar .inner{height:auto; padding:10px 0; align-items:flex-start; flex-direction:column;}
  .pill{width:100%; justify-content:center;}
}