/* ============================================================================
 * 香港藥房 · 藥行搜尋 — 外掛樣式
 * 所有選擇器均已限定在 .hkp-app 容器內，不會影響顧客網站的既有樣式。
 * 本檔由 style.css 自動加作用域產生，請勿手改（改來源再重生）。
 * ==========================================================================*/
#hkpApp{
  --bg:        #f4f7f8;
  --card:      #ffffff;
  --ink:       #16232b;
  --ink-2:     #5b6b75;
  --ink-3:     #8a99a3;
  --line:      #e3eaee;
  --primary:   #0f766e;
  --primary-d: #0b5d57;
  --primary-l: #e6f4f2;
  --accent:    #c2410c;
  --warn-bg:   #fff8ed;
  --warn-line: #f3d9a4;
  --pharm:     #0f766e;
  --pharm-bg:  #e6f4f2;
  --retail:    #7c3aed;
  --retail-bg: #f1ebfe;
  --radius:    14px;
  --shadow:    0 1px 2px rgba(16,35,45,.06), 0 8px 24px rgba(16,35,45,.06);
  --shadow-lg: 0 24px 60px rgba(16,35,45,.18);
}#hkpApp *{ box-sizing: border-box; }#hkpApp [hidden]{ display: none !important; }#hkpApp{
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang HK",
               "Microsoft JhengHei", "Noto Sans HK", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.55;
}#hkpApp button, #hkpApp input, #hkpApp select, #hkpApp textarea{ font: inherit; color: inherit; }#hkpApp button{ cursor: pointer; }#hkpApp h1, #hkpApp h2, #hkpApp h3, #hkpApp h4, #hkpApp h5, #hkpApp h6{
  background: none;
  border: 0;
  border-left: 0;
  padding: 0;
  text-shadow: none;
  box-shadow: none;
  color: inherit;
}#hkpApp img{ max-width: 100%; height: auto; box-shadow: none; }#hkpApp a{ text-decoration: none; }#hkpApp .demo-bar{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #1f2d36; color: #e8eef1;
  padding: 9px 16px; font-size: 13px;
  position: relative;
}#hkpApp .demo-bar strong{
  background: var(--accent); color: #fff;
  padding: 2px 8px; border-radius: 999px; font-size: 12px; letter-spacing: .3px;
}#hkpApp .demo-bar span{ color: #b9c6cd; }#hkpApp .demo-bar u{ color: #ffd9a8; }#hkpApp .demo-bar-close{
  margin-left: auto; background: none; border: 0; color: #93a3ac;
  font-size: 14px; padding: 4px 8px; border-radius: 6px;
}#hkpApp .demo-bar-close:hover{ background: rgba(255,255,255,.1); color: #fff; }#hkpApp .hkp-topbar{
  background: linear-gradient(135deg, var(--primary) 0%, #12857b 60%, #16a394 100%);
  color: #fff;
  padding: 20px 20px 22px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}#hkpApp .brand{ display: flex; align-items: center; gap: 13px; min-width: 0; }#hkpApp .brand-mark{
  width: 46px; height: 46px; flex: none;
  border-radius: 13px; background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.3);
  display: grid; place-items: center;
  font-weight: 700; font-size: 17px; letter-spacing: .5px;
}#hkpApp .brand-text h1{ margin: 0; font-size: 19px; font-weight: 700; letter-spacing: .2px; }#hkpApp .brand-text p{ margin: 2px 0 0; font-size: 12.5px; color: rgba(255,255,255,.8); }#hkpApp .topbar-stats{
  margin-left: auto; text-align: right; line-height: 1.1;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22);
  padding: 8px 14px; border-radius: 12px;
}#hkpApp .stat-num{ display: block; font-size: 22px; font-weight: 700; }#hkpApp .stat-label{ font-size: 11.5px; color: rgba(255,255,255,.8); }#hkpApp .toolbar{
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 16px 20px 14px;
  position: sticky; top: 0; z-index: 30;
  box-shadow: 0 4px 14px rgba(16,35,45,.04);
}#hkpApp .search-row{ display: flex; gap: 10px; align-items: stretch; }#hkpApp .search-box{
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  background: var(--bg); border: 1.5px solid var(--line);
  border-radius: 12px; padding: 0 12px;
  transition: border-color .15s, background .15s;
}#hkpApp .search-box:focus-within{ border-color: var(--primary); background: #fff; }#hkpApp .search-icon{ font-size: 15px; opacity: .7; }#hkpApp .search-box input{
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  padding: 12px 0; font-size: 15px;
}#hkpApp .search-box input::placeholder{ color: var(--ink-3); }#hkpApp .clear-btn{
  border: 0; background: var(--line); color: var(--ink-2);
  width: 22px; height: 22px; border-radius: 50%; font-size: 12px; line-height: 1;
  display: grid; place-items: center;
}#hkpApp .clear-btn:hover{ background: #d3dee4; }#hkpApp .chip-demo{
  flex: none;
  border: 1.5px dashed var(--warn-line); background: var(--warn-bg); color: var(--accent);
  border-radius: 12px; padding: 0 14px; font-size: 13px; font-weight: 600;
  white-space: nowrap;
}#hkpApp .chip-demo:hover{ background: #fdeed6; }#hkpApp .filter-block{ margin-top: 10px; display: grid; gap: 6px; }#hkpApp .filter-line{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }#hkpApp .filter-label{
  flex: none; font-size: 12px; color: var(--ink-3); font-weight: 600;
  width: 34px;
}#hkpApp .chips{ display: flex; flex-wrap: wrap; gap: 6px; }#hkpApp .select-wrap{ flex: 1; min-width: 0; display: flex; }#hkpApp .select{
  flex: 1; min-width: 0;
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235b6b75' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  padding: 8px 34px 8px 12px; font-size: 14px; color: var(--ink);
  cursor: pointer;
}#hkpApp .select:focus{ border-color: var(--primary); outline: none; }#hkpApp .chip{
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  border-radius: 999px; padding: 5px 12px; font-size: 13px;
  transition: all .14s;
}#hkpApp .chip:hover{ border-color: #bcd3d0; color: var(--ink); }#hkpApp .chip.on{
  background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600;
}#hkpApp .chip .zh{ opacity: .72; font-size: 12px; margin-left: 3px; }#hkpApp .view-row{
  margin-top: 10px; display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 10px;
}#hkpApp .result-count{ font-size: 13px; color: var(--ink-2); }#hkpApp .result-count b{ color: var(--primary); font-size: 15px; }#hkpApp .view-settings{ margin-left: auto; display: flex; gap: 14px; font-size: 13px; color: var(--ink-2); }#hkpApp .view-settings select{
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px;
  background: #fff; font-size: 13px;
}#hkpApp .notice{
  max-width: 1240px; margin: 16px auto 0; padding: 16px 18px;
  background: var(--warn-bg); border: 1.5px solid var(--warn-line);
  border-left: 5px solid var(--accent);
  border-radius: 12px; font-size: 14px;
}#hkpApp .notice-title{ font-weight: 700; color: var(--accent); margin-bottom: 6px; }#hkpApp .notice p{ margin: 6px 0; color: #5a4432; }#hkpApp .notice ol{ margin: 6px 0 10px; padding-left: 20px; color: #5a4432; }#hkpApp .notice .notice-list{ margin: 6px 0 10px; padding-left: 20px; color: #5a4432; }#hkpApp .notice .notice-list li{ margin: 4px 0; }#hkpApp .notice .notice-result{
  background: #e9f7ef; border: 1px solid #bfe4cf; color: #1d6b45;
  border-radius: 9px; padding: 9px 12px;
}#hkpApp .notice code{
  background: #fff; border: 1px solid var(--warn-line);
  padding: 1px 6px; border-radius: 5px; font-size: 13px;
}#hkpApp .notice-close{
  border: 0; background: var(--accent); color: #fff;
  padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
}#hkpApp main{ max-width: 1240px; margin: 0 auto; padding: 18px 20px 6px; }#hkpApp .grid{
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px) {#hkpApp .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }#hkpApp .grid[style]{ --cols: 2 !important; } }
@media (max-width: 620px) {#hkpApp .grid, #hkpApp .grid[style]{ grid-template-columns: 1fr !important; } }#hkpApp .card{
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 16px 13px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 9px;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}#hkpApp .card:hover{ transform: translateY(-2px); border-color: #cfdedd; box-shadow: var(--shadow-lg); }#hkpApp .card-head{ display: flex; align-items: flex-start; gap: 9px; }#hkpApp .card-name{
  margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.35;
  word-break: break-word;
}#hkpApp .card-name-zh{
  display: block; margin-top: 2px;
  font-size: 13px; font-weight: 600; color: var(--primary);
  word-break: break-word;
}#hkpApp .card-name-zh.none{ color: var(--ink-3); font-weight: 400; font-style: italic; font-size: 12.5px; }#hkpApp .badge{
  flex: none; margin-left: auto;
  font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  white-space: nowrap;
}#hkpApp .badge.pharmacy{ background: var(--pharm-bg); color: var(--pharm); }#hkpApp .badge.retailer{ background: var(--retail-bg); color: var(--retail); }#hkpApp .card-addr{ font-size: 13px; color: var(--ink-2); display: flex; gap: 7px; }#hkpApp .card-phone{ font-size: 14px; font-weight: 600; display: flex; gap: 7px; align-items: center; }#hkpApp .card-phone a{ color: var(--primary); text-decoration: none; }#hkpApp .card-phone a:hover{ text-decoration: underline; }#hkpApp .ico{ flex: none; opacity: .65; font-size: 13px; }#hkpApp .card-foot{
  margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}#hkpApp .dist-tag{ font-size: 12px; color: var(--ink-3); }#hkpApp .stars{ color: #f59e0b; font-size: 13px; letter-spacing: 1px; }#hkpApp .stars .off{ color: #d9e2e6; }#hkpApp .rev-n{ font-size: 12px; color: var(--ink-3); }#hkpApp .btn-detail{
  margin-left: auto; border: 1px solid var(--primary); background: #fff; color: var(--primary);
  border-radius: 9px; padding: 6px 13px; font-size: 13px; font-weight: 600;
}#hkpApp .btn-detail:hover{ background: var(--primary); color: #fff; }#hkpApp .empty{ text-align: center; padding: 60px 20px; color: var(--ink-2); }#hkpApp .empty-icon{ font-size: 34px; opacity: .5; }#hkpApp .empty h3{ margin: 10px 0 4px; font-size: 16px; color: var(--ink); }#hkpApp .empty p{ margin: 0 0 16px; font-size: 13.5px; }#hkpApp .btn{
  border: 1px solid var(--line); background: #fff; border-radius: 9px;
  padding: 8px 15px; font-size: 13.5px; font-weight: 600;
}#hkpApp .btn-ghost{ color: var(--primary); border-color: var(--primary); }#hkpApp .btn-ghost:hover{ background: var(--primary-l); }#hkpApp .pager-wrap{
  max-width: 1240px; margin: 0 auto; padding: 8px 20px 34px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}#hkpApp .nav-btn{
  border: 1px solid var(--line); background: #fff; border-radius: 9px;
  padding: 7px 13px; font-size: 13px; color: var(--ink-2);
}#hkpApp .nav-btn:hover:not(:disabled){ border-color: var(--primary); color: var(--primary); }#hkpApp .nav-btn:disabled{ opacity: .4; cursor: default; }#hkpApp .pager{ display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }#hkpApp .pg{
  border: 1px solid var(--line); background: #fff; border-radius: 9px;
  min-width: 36px; padding: 7px 9px; font-size: 13px; color: var(--ink-2);
}#hkpApp .pg:hover{ border-color: var(--primary); color: var(--primary); }#hkpApp .pg.on{ background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }#hkpApp .pg.dots{ border: 0; background: none; color: var(--ink-3); cursor: default; }#hkpApp .modal-mask{
  position: fixed; inset: 0; background: rgba(12,24,30,.55);
  backdrop-filter: blur(2px);
  z-index: 100; padding: 24px 16px; overflow-y: auto;
  display: flex; align-items: flex-start; justify-content: center;
}#hkpApp .modal{
  background: var(--card); border-radius: 18px; width: min(760px, 100%);
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
  animation: pop .18s ease-out;
}
@keyframes pop { from { transform: translateY(10px) scale(.985); opacity: 0; } }#hkpApp .modal-close{
  position: absolute; top: 12px; right: 12px; z-index: 2;
  border: 0; background: rgba(255,255,255,.9); color: var(--ink-2);
  width: 32px; height: 32px; border-radius: 50%; font-size: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}#hkpApp .modal-close:hover{ background: #fff; color: var(--ink); }#hkpApp .m-head{
  background: linear-gradient(135deg, #0f766e, #16a394);
  color: #fff; padding: 22px 24px 18px;
}#hkpApp .m-head h2{ margin: 6px 0 4px; font-size: 20px; line-height: 1.3; }#hkpApp .m-head .badge{ background: rgba(255,255,255,.2) !important; color: #fff !important; margin: 0; }#hkpApp .m-meta{ font-size: 12.5px; color: rgba(255,255,255,.82); }#hkpApp .m-body{ padding: 20px 24px 24px; }#hkpApp .m-rows{ display: grid; gap: 10px; margin-bottom: 16px; }#hkpApp .m-row{ display: flex; gap: 10px; font-size: 14px; align-items: flex-start; }#hkpApp .m-row .k{ flex: none; width: 62px; color: var(--ink-3); font-size: 13px; padding-top: 1px; }#hkpApp .m-actions{ display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 22px; }#hkpApp .m-actions a, #hkpApp .m-actions button{
  border: 1px solid var(--primary); background: var(--primary); color: #fff;
  border-radius: 10px; padding: 9px 16px; font-size: 13.5px; font-weight: 600;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}#hkpApp .m-actions .ghost{ background: #fff; color: var(--primary); }#hkpApp .m-actions a:hover, #hkpApp .m-actions button:hover{ filter: brightness(1.06); }#hkpApp .demo-tag{
  display: inline-block; font-size: 11.5px; font-weight: 700;
  background: var(--warn-bg); color: var(--accent);
  border: 1px solid var(--warn-line); border-radius: 999px;
  padding: 2px 9px; margin-left: 8px; vertical-align: middle;
}#hkpApp .sec-title{
  font-size: 15px; font-weight: 700; margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
}#hkpApp .sec-title .count{ font-size: 12.5px; font-weight: 500; color: var(--ink-3); }#hkpApp .rating-summary{
  display: flex; align-items: center; gap: 12px;
  background: var(--bg); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px;
}#hkpApp .rating-big{ font-size: 30px; font-weight: 700; line-height: 1; color: var(--ink); }#hkpApp .rating-side{ font-size: 12.5px; color: var(--ink-3); }#hkpApp .review{
  border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 14px; margin-bottom: 9px;
}#hkpApp .review-top{ display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-3); }#hkpApp .review-top b{ color: var(--ink); font-size: 13px; }#hkpApp .review p{ margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); }#hkpApp .form-box{
  border: 1px solid var(--line); border-radius: 12px; padding: 14px;
  background: #fbfdfd;
}#hkpApp .form-box h4{ margin: 0 0 10px; font-size: 13.5px; }#hkpApp .field{ display: grid; gap: 6px; margin-bottom: 10px; }#hkpApp .field label{ font-size: 12.5px; color: var(--ink-3); }#hkpApp .field input, #hkpApp .field textarea, #hkpApp .field select{
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px;
  font-size: 14px; background: #fff; outline: none; width: 100%;
}#hkpApp .field input:focus, #hkpApp .field textarea:focus, #hkpApp .field select:focus{ border-color: var(--primary); }#hkpApp .field textarea{ min-height: 74px; resize: vertical; }#hkpApp .form-row{ display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }#hkpApp .btn-primary{
  border: 0; background: var(--primary); color: #fff;
  border-radius: 9px; padding: 9px 18px; font-size: 13.5px; font-weight: 600;
}#hkpApp .btn-primary:hover{ background: var(--primary-d); }#hkpApp .hint{ font-size: 12px; color: var(--ink-3); }#hkpApp hr.sep{ border: 0; border-top: 1px solid var(--line); margin: 22px 0; }#hkpApp .toast{
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: #16232b; color: #fff; padding: 11px 20px; border-radius: 11px;
  font-size: 13.5px; opacity: 0; pointer-events: none; transition: all .2s; z-index: 200;
  box-shadow: var(--shadow-lg);
}#hkpApp .toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }#hkpApp .site-footer{
  border-top: 1px solid var(--line); background: #fff;
  padding: 20px; text-align: center;
}#hkpApp .site-footer p{ margin: 4px 0; font-size: 12.5px; color: var(--ink-3); }


@media (max-width: 640px) {#hkpApp .demo-bar{
    padding: 5px 12px; font-size: 11.5px; gap: 7px; flex-wrap: nowrap;
  }#hkpApp .demo-bar strong{ font-size: 10.5px; padding: 1px 7px; flex: none; white-space: nowrap; }#hkpApp .demo-bar span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }#hkpApp .demo-bar-close{ padding: 2px 6px; font-size: 12px; }#hkpApp .hkp-topbar{ padding: 11px 14px 13px; gap: 10px; }#hkpApp .brand{ gap: 10px; }#hkpApp .brand-mark{ width: 36px; height: 36px; border-radius: 10px; font-size: 14px; }#hkpApp .brand-text h1{ font-size: 16px; }#hkpApp .brand-text p{ display: none; }#hkpApp .topbar-stats{ padding: 5px 11px; border-radius: 10px; }#hkpApp .stat-num{ font-size: 18px; }#hkpApp .stat-label{ font-size: 10.5px; }#hkpApp .toolbar{ padding: 10px 14px 9px; }#hkpApp .search-box input{ padding: 10px 0; font-size: 14.5px; }#hkpApp .chip-demo{ padding: 0 11px; font-size: 12.5px; }#hkpApp .filter-block{ margin-top: 8px; gap: 5px; }#hkpApp .filter-label{ display: none; }#hkpApp .select-wrap{ flex: 1 1 130px; }#hkpApp .chip{ padding: 4px 10px; font-size: 12.5px; }#hkpApp .select{ padding: 7px 30px 7px 10px; font-size: 13.5px; }#hkpApp .view-row{ margin-top: 8px; padding-top: 8px; gap: 8px; }#hkpApp .result-count{ font-size: 12.5px; }#hkpApp .view-settings{ gap: 10px; font-size: 12.5px; }#hkpApp main{ padding: 10px 14px 4px; }#hkpApp .grid{ gap: 10px; }#hkpApp .card{ padding: 11px 13px 10px; gap: 7px; }#hkpApp .card-name{ font-size: 15px; }#hkpApp .card-name-zh{ font-size: 12.5px; margin-top: 1px; }#hkpApp .card-foot{ padding-top: 8px; gap: 7px; }#hkpApp .btn-detail{ padding: 5px 11px; font-size: 12.5px; }#hkpApp .pager-wrap{ padding: 6px 14px 26px; gap: 7px; }#hkpApp .nav-btn, #hkpApp .pg{ padding: 6px 10px; font-size: 12.5px; }#hkpApp .hkp-map{ height: 200px; }
}#hkpApp .hkp-loading{ text-align: center; padding: 30px 16px; color: var(--ink-3); font-size: 14px; }#hkpApp .hkp-error{
  color: var(--accent); background: var(--warn-bg);
  border: 1px solid var(--warn-line); border-radius: 10px; padding: 14px 16px;
}#hkpApp .map-head{
  margin: 18px 0 8px; font-size: 13.5px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}#hkpApp .hkp-map{
  height: 260px; border-radius: 12px; border: 1px solid var(--line);
  background: #eef3f5; overflow: hidden; position: relative; z-index: 0;
}#hkpApp .map-none{
  height: 100%; display: grid; place-items: center;
  color: var(--ink-3); font-size: 13px; padding: 16px; text-align: center;
}#hkpApp .prec{ font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }#hkpApp .prec.ok{ background: var(--pharm-bg); color: var(--pharm); }#hkpApp .prec.warn{ background: var(--warn-bg); color: var(--accent); }#hkpApp .prec.none{ background: #eef1f3; color: var(--ink-3); }#hkpApp .nophone{ color: var(--ink-3); font-weight: 400; font-size: 13px; }#hkpApp .m-zh{ font-size: 14px; color: rgba(255, 255, 255, .92); margin-top: 2px; }#hkpApp .m-tel{ color: var(--primary); font-weight: 600; text-decoration: none; }#hkpApp .rev-list{ margin-bottom: 4px; }#hkpApp .hkp-banner{
  margin: 0;
  padding: 0;
  line-height: 0;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}#hkpApp .hkp-banner img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
@media (max-width: 640px) {#hkpApp .hkp-banner img{ border-radius: 0; }
}#hkpApp .hkp-totop{
  position: fixed; right: 18px; bottom: 24px; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--primary);
  font-size: 20px; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(16, 35, 45, .18); cursor: pointer;
  transition: background .18s, color .18s, transform .18s;
}#hkpApp .hkp-totop:hover{ background: var(--primary); color: #fff; transform: translateY(-2px); }#hkpApp .hkp-totop:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 640px) {#hkpApp .hkp-totop{ right: 12px; bottom: 16px; width: 42px; height: 42px; font-size: 18px; }
}#hkpApp .hkp-hp{ position: absolute !important; left: -9999px !important; height: 1px; overflow: hidden; }