.service-float-btn {
  position: fixed;
  right: 22px;
  bottom: 26px;
  z-index: 96;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  padding: 0;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .74);
  border-radius: 50%;
  background: linear-gradient(145deg, #6639df, #a846df 58%, #ff668a);
  box-shadow: 0 14px 34px rgba(77, 39, 177, .42), inset 0 1px rgba(255, 255, 255, .38);
}
.service-float-btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
.service-float-btn:focus-visible { outline: 3px solid rgba(132, 93, 236, .35); outline-offset: 3px; }
.service-float-btn > svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.service-float-btn > b { position: absolute; top: -5px; right: -4px; display: grid; min-width: 21px; height: 21px; place-items: center; padding: 0 5px; color: #fff; border: 2px solid #fff; border-radius: 999px; background: #ec4867; font-size: 10px; line-height: 1; }
.service-panel-backdrop { position: fixed; inset: 0; z-index: 97; background: rgba(5, 10, 30, .24); backdrop-filter: blur(2px); }
.service-panel-backdrop[hidden], .service-panel[hidden] { display: none !important; }
.service-panel {
  position: fixed;
  right: 22px;
  bottom: 96px;
  z-index: 98;
  width: min(390px, calc(100vw - 28px));
  padding: 12px;
  color: #eef4ff;
  border: 1px solid rgba(111, 91, 225, .7);
  border-radius: 20px;
  background: #09152b;
  box-shadow: 0 24px 64px rgba(3, 7, 24, .58), 0 12px 0 rgba(75, 37, 133, .24);
}
.service-panel-header { display: flex; min-height: 50px; align-items: center; justify-content: space-between; padding: 2px 2px 10px; border-bottom: 1px solid rgba(97, 119, 179, .28); }
.service-panel-header > div { display: flex; align-items: center; gap: 10px; }
.service-panel-header strong { font-size: 18px; }
.service-panel-header span { display: inline-flex; align-items: center; gap: 6px; color: #aab8d7; font-size: 11px; }
.service-panel-header .service-panel-close { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; color: #b8c5df; border: 0; border-radius: 11px; background: #172845; font-size: 24px; line-height: 1; }
.service-list { display: grid; gap: 8px; padding-top: 10px; }
.service-item { position: relative; display: grid; min-width: 0; grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-areas: "icon copy contact"; align-items: center; gap: 10px; padding: 10px; color: #eef4ff; text-decoration: none; border: 1px solid #294461; border-radius: 14px; background: #0d2038; }
.service-item:hover { border-color: #7668e5; background: #142847; }
.service-item.is-recommended { border-color: #6656d8; background: #171f48; }
.service-item-icon { position: relative; grid-area: icon; display: grid; width: 46px; height: 46px; place-items: center; overflow: visible; border: 2px solid rgba(255, 255, 255, .78); border-radius: 14px; background: #2ca4e8; }
.service-item-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.service-item-icon svg { width: 28px; height: 28px; fill: #fff; }
.service-item-icon > i { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border: 2px solid #0d2038; border-radius: 50%; background: #18d398; }
.service-item-copy { grid-area: copy; display: grid; min-width: 0; }
.service-item-copy strong, .service-item-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-item-copy strong { font-size: 15px; }
.service-item-copy small { color: #91a3c2; font-size: 12px; }
.service-title-row { display: flex; min-width: 0; align-items: center; gap: 7px; }
.service-title-row strong { min-width: 0; }
.service-role-badge { flex: 0 0 auto; font-style: normal; }
.service-contact { grid-area: contact; display: inline-flex; min-width: 58px; height: 34px; align-items: center; justify-content: center; gap: 4px; color: #afc9f2; border: 1px solid #375b83; border-radius: 999px; font-size: 12px; }
body.service-panel-open { overflow: hidden; }
@media (max-width: 560px) {
  .service-float-btn { right: 14px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; }
  .service-panel { right: 10px; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 20px); max-height: min(72vh, 560px); overflow-y: auto; }
  .service-item { grid-template-columns: 44px minmax(0, 1fr) auto; padding: 9px; }
  .service-item-icon { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .service-float-btn { transition: none; } }