: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;}

/* topbar */
.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; padding:0 16px;}
.brand{display:flex; align-items:center; gap:10px; min-width:0;}
.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);} 
.home{font-weight:800; font-size:13px; white-space:nowrap;}
.sep{color: rgba(31,41,51,.38)}
.title{font-weight:700; font-size:13px; color: rgba(31,41,51,.72); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.tabs{display:flex; align-items:center; gap:8px; padding:6px; border-radius: 999px; border:1px solid var(--line); background: rgba(255,255,255,.70)}
.tab{appearance:none; border:0; background: transparent; padding:8px 10px; border-radius: 999px; font-weight:800; font-size:12px; color: rgba(31,41,51,.62); cursor:pointer;}
.tab.active{background: rgba(31,41,51,.92); color: var(--paper);}

.right{display:flex; align-items:center; gap:8px;}
.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:800; font-size:12px; box-shadow: var(--shadow2); cursor:pointer;}
.btn.ghost{background: rgba(255,255,255,.62);}
.btn:hover{filter: brightness(.98)}

/* layout */
.wrap{padding: 18px 16px 44px;}
.panel{max-width: 1080px; margin: 0 auto; border-radius: var(--r); border:1px solid var(--line); background: var(--card); box-shadow: var(--shadow2); padding:14px;}
.panel + .panel{margin-top:14px;}

.h2{margin:0 0 10px; font-size:14px; letter-spacing:.2px;}

.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:12px;}
.card{border-radius: var(--r); border:1px solid var(--line); background: var(--card2); box-shadow: var(--shadow2); padding:12px;}

.row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 10px; border-radius:16px; border:1px solid rgba(31,41,51,.10); background: rgba(255,255,255,.55);}
.label{font-size:12px; font-weight:800; color: rgba(31,41,51,.68); min-width: 72px;}

.input,.select{
  width: 100%;
  height: 38px;
  border-radius: 14px;
  border:1px solid rgba(31,41,51,.14);
  background: rgba(255,255,255,.78);
  padding: 0 12px;
  font-size: 13px;
  color: var(--ink);
  outline: none;
}
.input:focus,.select:focus{box-shadow: 0 0 0 4px rgba(37,99,235,.12); border-color: rgba(37,99,235,.28)}

.output{width:100%; min-height:38px; display:flex; align-items:center; padding: 0 12px; border-radius: 14px; border:1px solid rgba(31,41,51,.14); background: rgba(255,255,255,.78); font-weight:900; font-size:13px;}

.muted{font-size:12px; color: rgba(31,41,51,.58);}

.help{margin-top:12px; border-radius: 16px; border:1px solid rgba(31,41,51,.10); background: rgba(255,255,255,.58); padding: 10px 12px;}
.help summary{cursor:pointer; font-weight:900; font-size:12px; color: rgba(31,41,51,.70)}
.help ul{margin:8px 0 0; padding-left: 18px; color: rgba(31,41,51,.62); font-size:12px; line-height:1.7;}
.fx{display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap;}

.quick{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px;}
.quick .q{border-radius:16px; border:1px solid rgba(31,41,51,.10); background: rgba(255,255,255,.62); padding:10px 12px; cursor:pointer;}
.quick .q:hover{background: rgba(255,255,255,.82)}
.quick .q .qt{font-weight:900; font-size:12px;}
.quick .q .qm{margin-top:4px; font-size:12px; color: rgba(31,41,51,.58);}

.footer{max-width:1080px; margin: 14px auto 0; 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: 920px){
  .grid2{grid-template-columns: 1fr;}
  .label{min-width: 64px;}
}
@media (max-width: 520px){
  .topbar .inner{height:auto; padding:10px 12px; align-items:flex-start; flex-direction:column;}
  .tabs{width:100%; justify-content:center;}
  .right{width:100%;}
  .right .btn{flex:1;}
  .quick{grid-template-columns: 1fr;}
}