/* public/css/app.css START */

/* base */
:root{
  --hkf-bg: #efefef;
  --hkf-card: #ffffff;
  --hkf-text: rgba(0,0,0,0.87);
  --hkf-muted: #777;
  --hkf-border: #e5e5e5;
  --hkf-brand: #a40045;
  --hkf-navh: 64px;
}
html,body{margin:0;padding:0;background:var(--hkf-bg);color:var(--hkf-text);font-family:system-ui,-apple-system,Segoe UI,Roboto,"PingFang TC","Noto Sans TC",Arial;}
a{color:var(--hkf-brand);text-decoration:none;}
.hkf-muted{color:var(--hkf-muted);}
.hkf-lock{overflow:hidden;}

/* layout */
.hkf-page{
  padding-top: 10px;
  padding-bottom: calc(var(--hkf-navh) + env(safe-area-inset-bottom));
  min-height: 60vh;
}

/* header */
.hkf-header{
  position:fixed;left:0;right:0;top:0;z-index:200;
  background:var(--hkf-card);
  border-bottom:1px solid var(--hkf-border);
}
.hkf-header__inner{
  height:56px;display:flex;align-items:center;justify-content:space-between;
  padding:0 10px;box-sizing:border-box;
}
.hkf-logo{display:flex;align-items:center;gap:8px;max-width:70%;}
.hkf-logo__text{font-weight:700;letter-spacing:.2px;color:#111;}
.hkf-iconbtn{
  border:0;background:transparent;color:#111;
  width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;
}
.hkf-iconbtn__text{font-weight:700;font-size:14px;opacity:.85;}
.hkf-burger{
  width:18px;height:12px;display:inline-block;position:relative;
}
.hkf-burger:before,.hkf-burger:after,.hkf-burger i{
  content:"";position:absolute;left:0;right:0;height:2px;background:#333;border-radius:2px;
}
.hkf-burger:before{top:0;}
.hkf-burger:after{bottom:0;}
.hkf-burger i{top:5px;}
.hkf-wa-dot{
  width:10px;height:10px;border-radius:50%;
  background:#25D366;display:inline-block;margin-right:6px;
}

/* drawer */
.hkf-drawer{position:fixed;inset:0;display:none;z-index:500;}
.hkf-drawer.is-open{display:block;}
.hkf-drawer__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35);}
.hkf-drawer__panel{
  position:absolute;left:0;top:0;bottom:0;width:300px;max-width:86vw;
  background:var(--hkf-card);box-shadow:0 10px 30px rgba(0,0,0,.18);
  display:flex;flex-direction:column;
}
.hkf-drawer__top{display:flex;align-items:center;justify-content:space-between;padding:14px 12px;border-bottom:1px solid var(--hkf-border);}
.hkf-drawer__title{font-weight:700;}
.hkf-drawer__nav{padding:10px 8px;display:flex;flex-direction:column;gap:6px;}
.hkf-navitem{
  padding:12px 12px;border-radius:12px;color:#111;
  background:transparent;border:1px solid transparent;
}
.hkf-navitem:hover{background:#f6f6f6;border-color:#f0f0f0;}
.hkf-drawer__meta{margin-top:auto;padding:12px;color:var(--hkf-muted);border-top:1px solid var(--hkf-border);}

/* footer */
.hkf-footer{background:var(--hkf-card);border-top:1px solid var(--hkf-border);margin-top:20px;}
.hkf-footer__inner{padding:18px 12px;box-sizing:border-box;}
.hkf-footer__links{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:10px;}
.hkf-footer__links a{color:#333;}
.hkf-footer__note{font-size:13px;}

/* bottom nav (mobile-first; hide on desktop later) */
.hkf-bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:300;
  height:calc(var(--hkf-navh) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--hkf-border);
  display:flex;align-items:center;justify-content:space-around;
}
.hkf-bnavitem{
  flex:1;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:6px 2px;color:#444;position:relative;
}
.hkf-bnavicon{font-size:18px;line-height:18px;}
.hkf-bnavtext{font-size:12px;line-height:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:92%;}
.hkf-bnavitem.is-active{color:var(--hkf-brand);font-weight:700;}
.hkf-bnavbadge{
  position:absolute;top:6px;right:22%;
  min-width:18px;height:18px;border-radius:9px;
  background:var(--hkf-brand);color:#fff;
  font-size:12px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 5px;box-sizing:border-box;
}

/* desktop adjustments */
@media (min-width: 992px){
  .hkf-page{padding-bottom:30px;}
  .hkf-bottomnav{display:none;}
  .hkf-header__inner{padding:0 16px;}
}

/* debug */
.hkf-debug{
  position:fixed;left:12px;right:12px;bottom:calc(var(--hkf-navh) + 12px);
  z-index:9999;background:#111;color:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,.35);
}
.hkf-debug__bar{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:#1b1b1b;}
.hkf-debug__title{font-weight:700;font-size:12px;letter-spacing:.5px;}
.hkf-debug__btn{border:0;background:#333;color:#fff;border-radius:10px;padding:6px 10px;font-size:12px;}
.hkf-debug__log{margin:0;padding:10px;max-height:180px;overflow:auto;font-size:12px;white-space:pre-wrap;}

/* public/css/app.css END */