.fa,
.fab,
.far,
.fas {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1
}

.fa.fa-pull-left,
.fab.fa-pull-left,
.far.fa-pull-left,
.fas.fa-pull-left {
  margin-right: .3em
}

.fa.fa-pull-right,
.fab.fa-pull-right,
.far.fa-pull-right,
.fas.fa-pull-right {
  margin-left: .3em
}

.fa-spin {
  -webkit-animation: fa-spin 2s linear infinite;
  animation: fa-spin 2s linear infinite
}

.fa-android:before {
  content: "\f17b"
}

.fa-arrow-left:before {
  content: "\f060"
}

.fa-arrow-right:before {
  content: "\f061"
}

.fa-arrow-up:before {
  content: "\f062"
}

.fa-arrows-alt-h:before {
  content: "\f337"
}

.fa-award:before {
  content: "\f559"
}

.fa-balance-scale:before {
  content: "\f24e"
}

.fa-bolt:before {
  content: "\f0e7"
}

.fa-book-open:before {
  content: "\f518"
}

.fa-building:before {
  content: "\f1ad"
}

.fa-calendar-alt:before {
  content: "\f073"
}

.fa-chart-bar:before {
  content: "\f080"
}

.fa-chart-line:before {
  content: "\f201"
}

.fa-check:before {
  content: "\f00c"
}

.fa-check-circle:before {
  content: "\f058"
}

.fa-chevron-left:before {
  content: "\f053"
}

.fa-chevron-right:before {
  content: "\f054"
}

.fa-chevron-up:before {
  content: "\f077"
}

.fa-circle:before {
  content: "\f111"
}

.fa-clipboard-list:before {
  content: "\f46d"
}

.fa-clock:before {
  content: "\f017"
}

.fa-clone:before {
  content: "\f24d"
}

.fa-cloud:before {
  content: "\f0c2"
}

.fa-code:before {
  content: "\f121"
}

.fa-cog:before {
  content: "\f013"
}

.fa-coins:before {
  content: "\f51e"
}

.fa-columns:before {
  content: "\f0db"
}

.fa-comment:before {
  content: "\f075"
}

.fa-comment-dots:before {
  content: "\f4ad"
}

.fa-comments:before {
  content: "\f086"
}

.fa-copy:before {
  content: "\f0c5"
}

.fa-crown:before {
  content: "\f521"
}

.fa-database:before {
  content: "\f1c0"
}

.fa-download:before {
  content: "\f019"
}

.fa-envelope-open-text:before {
  content: "\f658"
}

.fa-exclamation-circle:before {
  content: "\f06a"
}

.fa-exclamation-triangle:before {
  content: "\f071"
}

.fa-external-link-alt:before {
  content: "\f35d"
}

.fa-eye:before {
  content: "\f06e"
}

.fa-eye-slash:before {
  content: "\f070"
}

.fa-file-contract:before {
  content: "\f56c"
}

.fa-file-invoice-dollar:before {
  content: "\f571"
}

.fa-fire:before {
  content: "\f06d"
}

.fa-flag-usa:before {
  content: "\f74d"
}

.fa-flask:before {
  content: "\f0c3"
}

.fa-frown:before {
  content: "\f119"
}

.fa-gavel:before {
  content: "\f0e3"
}

.fa-gem:before {
  content: "\f3a5"
}

.fa-globe:before {
  content: "\f0ac"
}

.fa-globe-asia:before {
  content: "\f57e"
}

.fa-hand-holding-usd:before {
  content: "\f4c0"
}

.fa-hand-pointer:before {
  content: "\f25a"
}

.fa-handshake:before {
  content: "\f2b5"
}

.fa-hashtag:before {
  content: "\f292"
}

.fa-hdd:before {
  content: "\f0a0"
}

.fa-headset:before {
  content: "\f590"
}

.fa-heart:before {
  content: "\f004"
}

.fa-history:before {
  content: "\f1da"
}

.fa-home:before {
  content: "\f015"
}

.fa-inbox:before {
  content: "\f01c"
}

.fa-info-circle:before {
  content: "\f05a"
}

.fa-key:before {
  content: "\f084"
}

.fa-layer-group:before {
  content: "\f5fd"
}

.fa-life-ring:before {
  content: "\f1cd"
}

.fa-lightbulb:before {
  content: "\f0eb"
}

.fa-lock:before {
  content: "\f023"
}

.fa-map-marker-alt:before {
  content: "\f3c5"
}

.fa-memory:before {
  content: "\f538"
}

.fa-microchip:before {
  content: "\f2db"
}

.fa-mobile-alt:before {
  content: "\f3cd"
}

.fa-moon:before {
  content: "\f186"
}

.fa-network-wired:before {
  content: "\f6ff"
}

.fa-newspaper:before {
  content: "\f1ea"
}

.fa-paper-plane:before {
  content: "\f1d8"
}

.fa-percentage:before {
  content: "\f541"
}

.fa-play:before {
  content: "\f04b"
}

.fa-play-circle:before {
  content: "\f144"
}

.fa-plug:before {
  content: "\f1e6"
}

.fa-plus-circle:before {
  content: "\f055"
}

.fa-puzzle-piece:before {
  content: "\f12e"
}

.fa-question-circle:before {
  content: "\f059"
}

.fa-receipt:before {
  content: "\f543"
}

.fa-redo:before {
  content: "\f01e"
}

.fa-robot:before {
  content: "\f544"
}

.fa-route:before {
  content: "\f4d7"
}

.fa-search:before {
  content: "\f002"
}

.fa-server:before {
  content: "\f233"
}

.fa-share-alt:before {
  content: "\f1e0"
}

.fa-shield-alt:before {
  content: "\f3ed"
}

.fa-shopping-cart:before {
  content: "\f07a"
}

.fa-sign-out-alt:before {
  content: "\f2f5"
}

.fa-signal:before {
  content: "\f012"
}

.fa-smile:before {
  content: "\f118"
}

.fa-spinner:before {
  content: "\f110"
}

.fa-star:before {
  content: "\f005"
}

.fa-star-half-alt:before {
  content: "\f5c0"
}

.fa-store:before {
  content: "\f54e"
}

.fa-sun:before {
  content: "\f185"
}

.fa-tachometer-alt:before {
  content: "\f3fd"
}

.fa-tag:before {
  content: "\f02b"
}

.fa-tags:before {
  content: "\f02c"
}

.fa-telegram-plane:before {
  content: "\f3fe"
}

.fa-temperature-low:before {
  content: "\f76b"
}

.fa-th-large:before {
  content: "\f009"
}

.fa-thumbs-up:before {
  content: "\f164"
}

.fa-times:before {
  content: "\f00d"
}

.fa-tools:before {
  content: "\f7d9"
}

.fa-trash-alt:before {
  content: "\f2ed"
}

.fa-trophy:before {
  content: "\f091"
}

.fa-tv:before {
  content: "\f26c"
}

.fa-undo:before {
  content: "\f0e2"
}

.fa-user:before {
  content: "\f007"
}

.fa-user-check:before {
  content: "\f4fc"
}

.fa-user-circle:before {
  content: "\f2bd"
}

.fa-user-plus:before {
  content: "\f234"
}

.fa-user-shield:before {
  content: "\f505"
}

.fa-users:before {
  content: "\f0c0"
}

.fa-wallet:before {
  content: "\f555"
}

.fa-yen-sign:before {
  content: "\f157"
}

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px
}

@font-face {
  font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/public/webfonts/fa-brands-400.woff2?v=20261021a) format("woff2"), url(/public/webfonts/fa-brands-400.woff?v=20261021a) format("woff");
}

.fab {
  font-family: "Font Awesome 5 Brands"
}

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/public/webfonts/fa-regular-400.woff2?v=20261021a) format("woff2"), url(/public/webfonts/fa-regular-400.woff?v=20261021a) format("woff");
}

.fab,
.far {
  font-weight: 400
}

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/public/webfonts/fa-solid-900.woff2?v=20261021a) format("woff2"), url(/public/webfonts/fa-solid-900.woff?v=20261021a) format("woff");
}

.fa,
.far,
.fas {
  font-family: "Font Awesome 5 Free"
}

.fa,
.fas {
  font-weight: 900
}

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

*,
::after,
::before {
  box-sizing: border-box
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: .5rem
}

p {
  margin-top: 0;
  margin-bottom: 1rem
}

dl,
ol,
ul {
  margin-top: 0;
  margin-bottom: 1rem
}

dt {
  font-weight: 700
}

dd {
  margin-bottom: .5rem;
  margin-left: 0
}

b,
strong {
  font-weight: bolder
}

small {
  font-size: 80%
}

a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent
}

img {
  vertical-align: middle;
  border-style: none
}

svg {
  overflow: hidden;
  vertical-align: middle
}

label {
  display: inline-block;
  margin-bottom: .5rem
}

button {
  border-radius: 0
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit
}

button,
input {
  overflow: visible
}

button,
select {
  text-transform: none
}

select {
  word-wrap: normal
}

textarea {
  overflow: auto;
  resize: vertical
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button
}

[hidden] {
  display: none !important
}

.h1,
.h2,
.h3,
.h4,
.h5,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: .5rem;
  font-weight: 500;
  line-height: 1.2
}

.h1,
h1 {
  font-size: 2.5rem
}

.h2,
h2 {
  font-size: 2rem
}

.h3,
h3 {
  font-size: 1.75rem
}

.h4,
h4 {
  font-size: 1.5rem
}

.small,
small {
  font-size: 80%;
  font-weight: 400
}

.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff
}

.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

@media print {

  *,
  ::after,
  ::before {
    text-shadow: none !important;
    box-shadow: none !important
  }

  a:not(.btn) {
    text-decoration: underline
  }

  img,
  tr {
    page-break-inside: avoid
  }

  h2,
  h3,
  p {
    orphans: 3;
    widows: 3
  }

  h2,
  h3 {
    page-break-after: avoid
  }

  body {
    min-width: 992px !important
  }
}

:root {
  --theme-color: #f1404b;
  --focus-color: var(--theme-color);
  --main-radius: 8px;
  --main-bg-color: #fff;
  --main-border-color: rgba(130, 130, 130, 0.15);
  --muted-border-color: rgba(88, 88, 88, 0.05)
}

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

body {
  width: 100%;
  min-height: 100vh;
  vertical-align: baseline;
  word-wrap: break-word;
  color: #282a2d;
  background: #fff;
  transition: background-color .3s
}

body,
input,
button,
select,
optgroup,
option,
textarea,
blockquote,
dd,
dl,
figure,
form,
pre,
.h1,
.h2,
.h3,
.h4,
.h5,
h1,
h2,
h3,
h4,
h5,
h6 {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased
}

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0
}

a {
  color: #282a2d;
  outline: 0 !important;
  text-decoration: none
}

p {
  color: #1d232b;
  margin: 0;
  white-space: normal
}

em,
i {
  font-style: normal
}

.sidebar-item {
  position: relative;
  display: block
}

@media only screen and (min-device-width:768px) {
  ::-webkit-scrollbar-thumb {
    background-color: rgba(130, 130, 130, .5);
    -webkit-border-radius: 4px;
    border-radius: 4px
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #f1404b;
    -webkit-border-radius: 4px;
    border-radius: 4px
  }

  ::-webkit-scrollbar {
    width: 5px;
    height: 5px
  }

  ::-webkit-scrollbar-thumb:active {
    background-color: #f1404b;
    -webkit-border-radius: 4px;
    border-radius: 4px
  }

  ::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0);
    border-radius: 0 0 8px 0
  }

  ::-webkit-scrollbar-button {
    background-color: rgba(0, 0, 0, 0);
    height: 2px;
    width: 2px
  }
}

:root {
  --c-primary: #1e293b;
  --c-primary-h: #0f172a;
  --c-primary-soft: #f1f5f9;
  --c-accent: #334155;
  --c-bg: #f4f6f9;
  --c-bg-soft: #eceff4;
  --c-bg-muted: #e2e8f0;
  --c-bg-card: #ffffff;
  --c-bg-elevated: #ffffff;
  --c-action-rgb: 234, 88, 12;
  --c-action: #ea580c;
  --c-action-hover: #c2410c;
  --c-action-soft: rgba(var(--c-action-rgb), 0.09);
  --c-action-muted: rgba(var(--c-action-rgb), 0.16);
  --trial-accent: #f97316;
  --trial-accent-deep: #ea580c;
  --c-danger: #dc2626;
  --c-success: #059669;
  --c-text: #0f172a;
  --c-text-2: #475569;
  --c-text-3: #64748b;
  --c-line: #e2e8f0;
  --c-line-strong: #cbd5e1;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --s-xs: 0 1px 3px rgba(15, 23, 42, 0.05);
  --s-sm: 0 2px 8px rgba(15, 23, 42, 0.07);
  --s-md: 0 8px 24px rgba(15, 23, 42, 0.09);
  --s-card: 0 4px 6px rgba(15, 23, 42, 0.04), 0 12px 28px rgba(15, 23, 42, 0.08);
  --font: 'Inter', 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2rem;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --ls-tight: -0.025em;
  --ls-normal: 0;
  --ls-wide: 0.06em;
  --lh-tight: 1.3;
  --lh-normal: 1.6;
  --lh-loose: 1.75;
  --ease: .16s cubic-bezier(.4, 0, .2, 1);
  --header-h: 60px;
  --anchor-offset: calc(var(--header-h) + 24px);
  --layout-sidebar-w: 220px;
  --layout-split-gap: 24px;
  --layout-main-pad-x: 24px;
  --layout-main-pad-y-top: 24px;
  --layout-main-pad-y-bottom: 40px;
  --layout-main-pad-x-sm: 16px;
  --layout-main-pad-y-top-sm: 20px;
  --layout-main-pad-y-bottom-sm: 32px;
  --layout-main-pad-x-xs: 12px;
  --layout-float-clearance: 120px
}

@media (max-width:767px) {
  :root {
    --layout-main-pad-y-bottom-sm: 4px;
    --layout-float-clearance: 0.5rem
  }
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%
}

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-text);
  letter-spacing: var(--ls-tight);
  margin: 0
}

h1 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extrabold)
}

h2 {
  font-size: var(--fs-2xl)
}

h3 {
  font-size: var(--fs-xl)
}

h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold)
}

p {
  margin: 0 0 1em;
  line-height: var(--lh-normal);
  color: var(--c-text-2)
}

p:last-child {
  margin-bottom: 0
}

a {
  color: var(--c-primary);
  text-decoration: none;
  transition: color var(--ease)
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--c-bg)
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-h);
  background: var(--c-bg-elevated);
  border-bottom: 1px solid var(--c-line);
  box-shadow: var(--s-xs);
  overflow: visible
}

.site-header .container-inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--layout-main-pad-x);
  gap: 0;
  overflow: visible
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--c-text) !important;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 28px;
  letter-spacing: -.01em
}

.site-logo--brand {
  gap: 5.7px;
  line-height: 0;
  margin-right: 32px
}

.site-logo--brand .site-logo-img--light,
.site-logo--brand .site-logo-img--dark {
  height: 23.7px;
  width: auto;
  max-width: min(124px, 35vw);
  object-fit: contain;
  vertical-align: middle;
  transition: opacity 0.22s ease, transform 0.22s ease
}

.site-logo--brand .site-logo-img--light {
  display: block !important
}

.site-logo--brand .site-logo-img--dark {
  display: none !important
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0;
  box-sizing: border-box;
  height: 100%;
  flex: 1;
  overflow: visible;
  padding-top: 6px
}

.site-nav a {
  display: flex;
  align-items: center;
  align-self: stretch;
  box-sizing: border-box;
  height: 100%;
  padding: 4px 16px 11px;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--c-text-2);
  border-bottom: 2px solid transparent;
  transition: color var(--ease), border-color var(--ease);
  white-space: nowrap
}

.site-nav a.active {
  color: var(--c-primary-h);
  border-bottom-color: var(--c-primary);
  font-weight: 600
}

.site-nav--with-types {
  flex-wrap: nowrap;
  gap: 0;
  min-width: 0;
  overflow: visible
}

.site-nav--with-types > a:first-child {
  flex-shrink: 0
}

.site-nav-types {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  flex-wrap: nowrap;
  gap: 0;
  min-width: 0;
  flex: 1;
  overflow: visible
}

.site-nav-type-item {
  position: relative;
  flex-shrink: 0;
  outline: none
}

.site-nav-type-parent {
  display: flex;
  align-items: center;
  align-self: stretch;
  box-sizing: border-box;
  height: 100%;
  padding: 4px 15px 11px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--c-text-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--ease), border-color var(--ease);
  white-space: nowrap
}

a.site-nav-type-parent {
  text-decoration: none;
  color: var(--c-text-2)
}

.site-nav-type-parent.active {
  color: var(--c-primary-h);
  font-weight: 600;
  border-bottom-color: var(--c-primary)
}

.site-nav-type-submenu {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  width: max-content;
  min-width: 184px;
  max-width: min(100vw - 40px, 480px);
  padding: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.10), 0 4px 12px rgba(15, 23, 42, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 1200
}

.site-nav-type-submenu.site-nav-type-submenu--cols2 {
  grid-template-columns: repeat(2, minmax(128px, max-content))
}

.site-nav-type-submenu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px
}

.site-nav-type-submenu::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -5px;
  width: 9px;
  height: 9px;
  background: var(--c-bg-card);
  border-left: 1px solid var(--c-line);
  border-top: 1px solid var(--c-line);
  transform: translateX(-50%) rotate(45deg);
  border-top-left-radius: 2px
}

.site-nav-type-submenu .site-nav-type-sub {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 30px 9px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--c-text);
  text-decoration: none;
  border: none !important;
  border-radius: 9px;
  height: auto !important;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease
}

.site-nav-type-submenu .site-nav-type-sub::after {
  content: '›';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  color: var(--c-primary);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease
}

.site-nav-type-submenu .site-nav-type-sub.active {
  color: var(--c-action);
  font-weight: var(--fw-semibold);
  background: var(--c-action-soft)
}

.site-nav-type-submenu .site-nav-type-sub.active::after {
  color: var(--c-action);
  opacity: 1;
  transform: translateY(-50%) translateX(0)
}

.site-nav-types > a.site-nav-type-leaf {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 100%;
  padding: 4px 15px 11px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--c-text-2);
  border-bottom: 2px solid transparent;
  transition: color var(--ease), border-color var(--ease);
  white-space: nowrap;
  text-decoration: none
}

@media (min-width:768px) and (max-width:900px) {

  .site-nav > a,
  .site-nav-type-item > .site-nav-type-parent,
  .site-nav-types > a.site-nav-type-leaf {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 0.875rem
  }
}

@media (min-width:768px) and (max-width:810px) {

  .site-nav > a,
  .site-nav-type-item > .site-nav-type-parent,
  .site-nav-types > a.site-nav-type-leaf {
    padding-left: 4px;
    padding-right: 4px;
    font-size: 0.8125rem
  }
}

@media (max-width:767px) and (prefers-reduced-motion:reduce) {
  .site-nav {
    transition: none
  }
}

.mobile-nav-toggle {
  display: none;
  box-sizing: border-box
}

.mobile-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(15, 18, 28, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer
}

.header-more {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-left: 12px
}

.header-more-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--c-text-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--ease), color var(--ease), transform var(--ease)
}

.header-more-toggle-bar {
  display: block;
  width: 19px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--ease), opacity var(--ease)
}

.header-more-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  padding: 10px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--s-card);
  z-index: 1003;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px
}

.header-more-panel a {
  display: flex;
  align-items: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-2);
  text-decoration: none;
  border-radius: var(--r-md);
  transition: background var(--ease), color var(--ease);
  white-space: nowrap
}

.nav-sidebar {
  width: var(--layout-sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--c-bg-elevated);
  border-right: 1px solid var(--c-line);
  box-shadow: var(--s-xs);
  padding: 16px 0 0;
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto
}

.nav-sidebar::-webkit-scrollbar {
  width: 4px
}

.nav-sidebar::-webkit-scrollbar-track {
  background: transparent
}

.nav-sidebar::-webkit-scrollbar-thumb {
  background: var(--c-line);
  border-radius: 99px
}

.sidebar-group {
  margin-bottom: 6px
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-2);
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
  border-left: 2px solid transparent;
  text-decoration: none
}

.sidebar-item.active {
  background: var(--c-primary-soft);
  color: var(--c-primary);
  border-left-color: var(--c-primary);
  font-weight: 600
}

.sidebar-member {
  margin-top: auto;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 12px;
  padding-top: 12px
}

.sidebar-member__guest {}

.sidebar-member__hint {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  line-height: 1.5;
  margin: 0 0 12px;
  padding: 0 4px
}

.sidebar-member__login-btn {
  width: 100%;
  padding: 9px 16px;
  background: #2d3748;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--ease), opacity var(--ease), transform var(--ease)
}

.sidebar-member__user {
  position: relative
}

.sidebar-member__user-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px 8px 12px;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
  text-align: left
}

.sidebar-member__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-bg-soft);
  color: var(--c-text-3);
  font-size: .95rem;
  flex-shrink: 0
}

.sidebar-member__name {
  flex: 1;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3
}

.sidebar-member__toggle-icon {
  display: flex;
  align-items: center;
  color: var(--c-text-3);
  font-size: .65rem;
  transition: transform .25s ease;
  flex-shrink: 0
}

.sidebar-member__panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: -6px;
  right: -6px;
  z-index: 100;
  background: var(--c-bg-card);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  box-shadow: 0 -4px 6px rgba(15, 23, 42, .04), 0 -8px 30px rgba(15, 23, 42, .14);
  overflow: hidden;
  animation: smPanelUp .22s ease both
}

.sidebar-member__menu {
  list-style: none;
  margin: 0;
  padding: 6px 0
}

.sidebar-member__menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 16px;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  text-decoration: none;
  transition: background var(--ease), color var(--ease)
}

.sidebar-member__menu-item i {
  width: 18px;
  text-align: center;
  font-size: .82rem;
  color: var(--c-text-3);
  flex-shrink: 0;
  transition: color var(--ease)
}

.sidebar-member__menu-item--arrow {
  display: flex;
  justify-content: space-between
}

.sm-arrow {
  margin-left: auto;
  font-size: .7rem;
  color: var(--c-text-3) !important
}

.sidebar-member__divider {
  height: 1px;
  margin: 4px 14px;
  background: var(--c-line)
}

.sidebar-member__logout-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 16px;
  background: none;
  border: none;
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
  text-align: left
}

.sidebar-member__logout-btn i {
  width: 18px;
  text-align: center;
  font-size: .82rem
}

.hidden {
  display: none !important
}

.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--c-text-3);
  margin-bottom: 20px;
  flex-wrap: wrap
}

.breadcrumb-nav a {
  color: var(--c-text-3)
}

html:not(.io-dark-mode) .breadcrumb-nav {
  color: var(--c-text-2)
}

html:not(.io-dark-mode) .breadcrumb-nav a {
  color: var(--c-text-2);
  font-weight: 500
}

html:not(.io-dark-mode) .breadcrumb-nav > span:not(.breadcrumb-sep),
html:not(.io-dark-mode) .breadcrumb-nav span:not(.breadcrumb-sep) {
  color: var(--c-text);
  font-weight: 600
}

html:not(.io-dark-mode) .breadcrumb-nav .breadcrumb-sep,
html:not(.io-dark-mode) .breadcrumb-nav .sep {
  color: var(--c-text-3)
}

.float-toolbar {
  position: fixed;
  right: 20px;
  bottom: 28px;
  z-index: 999;
  pointer-events: none
}

.kf-widget {
  position: relative;
  pointer-events: auto
}

.float-dock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--c-line);
  border-radius: 18px;
  box-shadow: var(--s-md);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px)
}

.float-dock__btn {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--c-text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), transform var(--ease);
  text-decoration: none;
  box-sizing: border-box
}

.float-dock__btn i {
  display: block;
  line-height: 1
}

.float-dock__btn--kf::after {
  content: '';
  position: absolute;
  top: 9px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  border: 1.5px solid rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 1px rgba(52, 211, 153, .35)
}

.float-dock__sep {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--c-line);
  flex-shrink: 0
}

.float-dock__btn--compare.is-hidden,
.float-dock__sep--compare.is-hidden,
.float-dock__btn--compare[hidden],
.float-dock__sep--compare[hidden] {
  display: none !important
}

.float-dock__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: #fff;
  background: #e11d48;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-sizing: border-box;
  pointer-events: none
}

.float-dock__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .18s ease, transform .18s ease
}

.float-dock__icon--open {
  opacity: 1;
  transform: scale(1)
}

.float-dock__icon--close {
  opacity: 0;
  transform: scale(.75)
}

.kf-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: 292px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(15, 23, 42, 0.04), 0 20px 48px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.97);
  transform-origin: bottom right;
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  pointer-events: none
}

.kf-panel-banner {
  position: relative;
  padding: 14px 14px 12px;
  color: var(--c-text);
  background: linear-gradient(180deg, #fff7ed 0%, var(--c-bg-card) 100%);
  border-bottom: 1px solid var(--c-line)
}

.kf-panel-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--c-text-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  transition: background var(--ease), color var(--ease);
  pointer-events: auto;
  box-shadow: var(--s-xs)
}

.kf-panel-greet {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  padding-right: 34px;
  margin-bottom: 10px
}

.kf-panel-greet-text {
  min-width: 0;
  flex: 1
}

.kf-panel-avatar {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(145deg, #fff 0%, #ffedd5 100%);
  border: 1px solid rgba(234, 88, 12, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  color: var(--c-action);
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.12)
}

.kf-panel-status {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--c-bg-card);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35)
}

.kf-panel-title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 2;
  letter-spacing: -0.02em;
  color: var(--c-text)
}

.kf-panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none
}

.kf-panel-tags li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.2;
  color: #9a3412;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(234, 88, 12, 0.16)
}

.kf-panel-tags li i {
  font-size: .625rem;
  color: var(--c-action);
  opacity: 0.9
}

.kf-panel-body-label {
  margin: 0 0 2px;
  padding: 0 2px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--c-text-2)
}

.kf-panel-body {
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--c-bg)
}

.kf-channel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 11px;
  border-radius: 12px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-line);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease)
}

.kf-channel-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(145deg, #38bdf8 0%, #0ea5e9 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9375rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.28)
}

.kf-channel-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px
}

.kf-channel-text strong {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.3
}

.kf-channel-text small {
  font-size: .6875rem;
  color: var(--c-text-3);
  line-height: 1.3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
}

.kf-channel-go {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .5625rem;
  color: var(--c-text-3);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  transition: var(--ease)
}

.kf-panel-foot {
  padding: 10px 14px 12px;
  text-align: center;
  font-size: .6875rem;
  line-height: 1.45;
  color: var(--c-text-3);
  background: var(--c-bg-card);
  border-top: 1px solid var(--c-line)
}

.site-footer {
  background: var(--c-bg-elevated);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--c-text-2)
}

.site-footer .footer-inner {
  margin: 0 auto;
  padding: 0 var(--layout-main-pad-x)
}

@media (max-width:767px) {
  .site-footer {
    padding-top: 26px
  }
}

.footer-bottom {
  padding: 16px 0;
  font-size: .75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--c-text-3)
}

.floor-section[id],
.trial-section[id] {
  scroll-margin-top: var(--anchor-offset)
}

@media (max-width:900px) {
  .nav-sidebar {
    display: none
  }

  .site-footer .footer-inner {
    padding: 0 var(--layout-main-pad-x-sm)
  }
}

html:not(.io-dark-mode) {
  --c-text-3: #475569
}

@media (orientation:landscape) and (max-height:500px) {
  .trial-layout {
    grid-template-columns: minmax(0, 1fr) !important
  }

  .trial-left-nav.nav-sidebar {
    display: none !important
  }

  .trial-right-content {
    width: 100% !important;
    padding: 14px 16px 0 !important
  }

  .trial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }

  .site-header,
  .site-header .container-inner,
  .site-nav,
  .site-nav-types {
    overflow-x: hidden !important
  }
}

.region-page-type-wrap {
  margin-top: 8px
}

.region-page-type-wrap .trial-grid {
  margin-bottom: 18px
}

.region-page-type-wrap .trial-grid:last-child {
  margin-bottom: 0
}

.region-type-floor {
  margin-bottom: 22px
}

.region-type-floor:last-child {
  margin-bottom: 0
}

.region-type-floor .trial-home-floor-name {
  flex: 1 1 auto;
  min-width: 0
}

.region-type-title {
  font-weight: 800;
  color: var(--c-text);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-line);
  line-height: 1.35
}

.region-type-title.region-type-depth-0 {
  font-size: 1.08rem;
  margin-top: 20px
}

.region-type-floor:first-child .region-type-title.region-type-depth-0 {
  margin-top: 0
}

@media (max-width:1200px) {
  .recommend-media-wrap .recommend-banner-row::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0
  }
}

@media (max-width:767px) {
  .recommend-media-wrap .recommend-banner-row::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0
  }

  .recommend-side-tabs::-webkit-scrollbar {
    display: none
  }
}

:root {
  --trial-border: var(--c-line);
  --trial-surface: var(--c-bg-card)
}

body {
  background: var(--c-bg)
}

.trial-main {
  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--c-bg);
  box-sizing: border-box
}

.trial-layout {
  display: grid;
  grid-template-columns: var(--layout-sidebar-w) minmax(0, 1fr);
  gap: var(--layout-split-gap);
  align-items: start
}

.trial-left-nav.nav-sidebar {
  width: 100%;
  min-width: 0;
  max-width: none;
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h))
}

.trial-right-content {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 14px var(--layout-main-pad-x) 0 0
}

.trial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start
}

@media (min-width:1600px) {
  .trial-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }
}

.trial-section {
  margin-bottom: 26px
}

.trial-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--trial-border);
  font-size: var(--fs-lg, 1.125rem);
  font-weight: var(--fw-extrabold, 800);
  line-height: var(--lh-tight, 1.3);
  letter-spacing: var(--ls-tight, -0.025em);
  color: var(--c-text)
}

.trial-home-floor-name {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: var(--trial-accent-deep);
  font-weight: var(--fw-bold, 700)
}

.trial-home-floor-name a {
  color: inherit;
  text-decoration: none
}

.trial-section-title.trial-section-title-home-floor {
  align-items: baseline;
  font-size: 1rem
}

.trial-section-title-home-floor .trial-section-more {
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.15
}

.trial-section-more {
  margin-left: auto;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--c-text-3);
  text-decoration: none
}

.trial-card {
  background: var(--trial-surface);
  border: 1px solid var(--trial-border);
  border-radius: 10px;
  box-shadow: var(--s-xs);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  color: var(--c-text)
}

.trial-card-top {
  padding: 12px 8px 8px;
  border-bottom: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.trial-card-title {
  margin: 0;
  font-size: .95rem;
  line-height: 1.1;
  font-weight: normal;
  color: var(--c-text)
}

.trial-title-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  width: 100%
}

.trial-card-body {
  padding: 8px 6px 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 8px;
  align-items: center
}

.trial-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 6px;
  margin-bottom: 0;
  grid-column: 1 / -1
}

.trial-specs-col {
  border-radius: 0;
  padding: 10px 3px;
  background: transparent
}

.trial-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  border-bottom: 1px dashed var(--c-line)
}

.trial-row:last-child {
  border-bottom: 0
}

.trial-label {
  color: var(--c-text-2);
  font-weight: normal;
  font-size: 0.8rem;
  white-space: nowrap;
  word-break: keep-all;
  flex-shrink: 0;
  min-width: 3.6em
}

.trial-value {
  color: var(--c-text);
  font-size: 0.75rem;
  margin-left: 8px;
  text-align: right
}

.trial-value-cpu {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  max-width: 165px;
  min-width: 0
}

.trial-cpu-text {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.trial-cpu-tip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 20;
  display: block;
  min-width: 180px;
  max-width: 320px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(7, 16, 34, 0.95);
  color: #e9f0ff;
  font-size: 0.75rem;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease
}

.trial-cpu-tip::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 100%;
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: rgba(7, 16, 34, 0.95) transparent transparent transparent
}

.trial-price {
  margin-top: 0;
  padding-top: 0;
  grid-column: 2;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 2px
}

.trial-price-main {
  color: #f44336;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  line-height: 1.2
}

.trial-price-currency {
  margin-right: 1px
}

.trial-price-slash {
  color: #f44336;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.2
}

.trial-price-month {
  color: var(--c-text-3);
  font-size: 0.52rem;
  font-weight: 400;
  line-height: 1
}

.trial-actions {
  margin-top: 0;
  grid-column: 1;
  display: flex;
  justify-content: flex-start;
  align-self: center
}

.trial-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .2s ease;
  box-sizing: border-box
}

a.trial-btn {
  text-decoration: none
}

.trial-btn-apply {
  color: var(--c-text);
  background: var(--c-bg-soft);
  border-color: var(--c-line);
  min-width: 88px;
  font-weight: normal;
  font-size: 0.75rem;
  letter-spacing: 0;
  border-radius: 0;
  height: auto;
  min-height: 0;
  padding: 4px 12px;
  line-height: 1.25
}

@media (max-width:1199px) {
  .trial-layout {
    grid-template-columns: 210px minmax(0, 1fr)
  }

  .trial-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

@media (max-width:900px) {
  .trial-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0
  }

  .trial-right-content {
    padding-left: 0;
    padding-right: 0
  }
}

@media (max-width:991px) {
  .trial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (max-width:767px) {
  .trial-layout {
    grid-template-columns: 1fr;
    gap: 0
  }

  .trial-left-nav {
    position: static
  }

  .trial-grid {
    grid-template-columns: 1fr
  }

  .trial-main {
    margin-top: 14px;
    padding-left: max(var(--layout-main-pad-x-xs), env(safe-area-inset-left, 0px));
    padding-right: max(var(--layout-main-pad-x-xs), env(safe-area-inset-right, 0px));
    padding-top: 0;
    padding-bottom: 0
  }

  .trial-right-content {
    padding-top: var(--layout-main-pad-y-top-sm);
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0
  }

  .trial-card-title {
    font-size: 1rem
  }

  .trial-specs {
    grid-template-columns: 1fr
  }

  .trial-price-main {
    font-size: 1rem
  }

  .trial-price-slash {
    font-size: 1rem
  }

  .trial-price-month {
    font-size: 0.75rem
  }
}

.server-detail-wrapper {
  background: var(--c-bg-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--s-xs);
  padding: 24px 26px 26px;
  margin-bottom: 24px
}

.server-header {
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-line)
}

.server-header h1 {
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 0 0 12px;
  color: var(--c-text);
  font-weight: 800;
  letter-spacing: -0.02em
}

.server-detail-buy-anchor {
  display: block;
  height: 1px;
  margin-top: -1px;
  pointer-events: none;
  visibility: hidden
}

.server-detail-buy {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 28px;
  flex-wrap: wrap;
  margin: 22px 0;
  padding: 20px 24px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  background: var(--c-bg-soft);
  box-shadow: var(--s-xs)
}

.server-detail-buy-main {
  flex: 1 1 auto;
  min-width: 0
}

.server-detail-buy-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--c-text-3);
  line-height: 1.2
}

.server-detail-buy-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 24px
}

.server-detail-buy-line .price-value {
  font-size: 2rem;
  line-height: 1.1
}

.server-detail-buy-line .price-month {
  font-size: 0.38em;
  vertical-align: baseline
}

.server-detail-buy-points {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0
}

.server-detail-buy-points li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--c-text-2);
  line-height: 1.35
}

.server-detail-buy-points .fa-check {
  color: var(--c-text-3);
  font-size: 0.7rem
}

.server-detail-cta-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: 168px;
  height: 52px;
  padding: 0 28px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff !important;
  text-decoration: none !important;
  white-space: nowrap;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, var(--c-action) 0%, var(--c-action) 55%, var(--c-action-hover) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 18px rgba(var(--c-action-rgb), 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease
}

.server-detail-cta-main .fa-server {
  font-size: 0.95rem;
  opacity: 0.95
}

.server-detail-cta-main .fa-chevron-right {
  font-size: 0.8rem;
  opacity: 0.85;
  transition: transform 0.2s ease
}

.server-detail-cta-main:hover .fa-chevron-right {
  transform: translateX(3px)
}

.server-detail-cta-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 960;
  box-sizing: border-box;
  padding: 0 max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: var(--c-bg-card);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.14);
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.28s ease, opacity 0.22s ease, visibility 0.28s
}

.server-detail-cta-fixed.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto
}

.server-detail-cta-fixed-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 28px;
  flex-wrap: wrap;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 14px 0 4px;
  box-sizing: border-box
}

@media (min-width:768px) {
  .server-detail-cta-fixed {
    left: calc(var(--layout-sidebar-w, 220px) + var(--layout-split-gap, 24px));
    right: 0;
    padding-left: 0;
    padding-right: var(--layout-main-pad-x, 24px)
  }

  .server-detail-cta-fixed-inner {
    padding: 16px 0 8px
  }

  .server-detail-cta-fixed.is-visible .server-detail-cta-fixed-inner {
    padding-right: 68px
  }

  .server-detail-wrapper.is-cta-docked {
    padding-bottom: calc(92px + var(--layout-float-clearance, 0px))
  }
}

body:has(.server-detail-cta-fixed.is-visible) .float-toolbar {
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  transition: bottom 0.28s ease
}

@media (min-width:768px) {
  body:has(.server-detail-cta-fixed.is-visible) .float-toolbar {
    bottom: calc(108px + env(safe-area-inset-bottom, 0px))
  }
}

@media (max-width:767px) {
  body:has(.server-detail-cta-fixed.is-visible) .float-toolbar {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px))
  }

  .server-detail-cta-fixed.is-visible .server-detail-cta-fixed-inner {
    padding-right: 56px
  }
}

.server-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  color: var(--c-text-2);
  font-size: 13px
}

.server-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  line-height: 1.2
}

.server-meta a {
  color: var(--c-text-1);
  text-decoration: none;
  transition: color 0.2s ease
}

.server-status {
  background: #e8f7ec;
  color: #1f7a35;
  border-color: #b7e2c3;
  font-size: 12px;
  font-weight: 600
}

.server-detail-wrapper .price-value {
  font-weight: 800;
  color: #e53935;
  line-height: 1.1;
  letter-spacing: -0.02em
}

.price-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: #e53935;
  line-height: 1.1;
  letter-spacing: -0.02em
}

.price-slash {
  font-size: 1em;
  font-weight: 700;
  color: #e53935
}

.price-month {
  font-size: 0.38em;
  font-weight: 400;
  color: var(--c-text-3);
  vertical-align: baseline
}

.server-detail-block-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.35
}

.server-detail-block-title::before {
  content: "";
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--c-text-3);
  flex-shrink: 0
}

.server-detail-specs {
  margin-bottom: 0
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px
}

.spec-card {
  background: var(--c-bg-soft);
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-line);
  box-shadow: none;
  transition: border-color var(--ease)
}

.spec-card h3 {
  margin: 0 0 6px;
  font-size: 0.75rem;
  color: var(--c-text-3);
  font-weight: 500
}

.spec-card h3 i {
  margin-right: 5px;
  color: var(--c-text-3);
  font-size: 0.7rem
}

.spec-value {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--c-text)
}

.server-detail-panel {
  margin-top: 22px;
  padding: 20px;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md)
}

.server-detail-panel .server-detail-block-title {
  margin-bottom: 16px
}

.server-feedback-compose {
  margin-bottom: 16px
}

.server-comment-form-user.is-hidden {
  display: none
}

.server-comment-form-user {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0 0 10px;
  font-size: 0.8125rem;
  color: var(--c-text-2)
}

.server-comment-form-user strong {
  color: var(--c-text);
  font-weight: 600
}

.server-comment-auth-link {
  padding: 0;
  border: none;
  background: none;
  color: var(--c-action);
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px
}

.member-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  box-sizing: border-box
}

.member-auth-modal[hidden] {
  display: none !important
}

.member-auth-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55)
}

.member-auth-modal__panel {
  position: relative;
  width: min(420px, 100%);
  max-height: min(90vh, 640px);
  overflow: auto;
  padding: 22px 22px 20px;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  background: var(--c-bg-card);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22)
}

.member-auth-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--c-text-3);
  cursor: pointer
}

.member-auth-modal__title {
  margin: 0 0 16px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--c-text)
}

.member-auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px
}

.member-auth-tab {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-bg-soft);
  color: var(--c-text-2);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease
}

.member-auth-tab.is-active {
  border-color: var(--c-action);
  background: var(--c-primary-soft);
  color: var(--c-action)
}

.member-auth-modal__error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 0.8125rem;
  line-height: 1.45
}

.member-auth-modal__error[hidden] {
  display: none !important
}

.member-auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.member-auth-form[hidden] {
  display: none !important
}

.member-auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.member-auth-field span {
  font-size: 0.8125rem;
  color: var(--c-text-2)
}

.member-auth-password-wrap {
  position: relative;
  display: block;
  width: 100%
}

.member-auth-password-wrap input {
  width: 100%;
  padding: 10px 40px 10px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--c-text);
  font-size: 0.875rem;
  box-sizing: border-box
}

.member-auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--c-text-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: color 0.15s ease, background 0.15s ease
}

.member-auth-field > input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--c-text);
  font-size: 0.875rem;
  box-sizing: border-box
}

.member-auth-hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--c-text-3);
  line-height: 1.5
}

.member-auth-submit {
  margin-top: 4px;
  padding: 11px 16px;
  border: none;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--c-action) 0%, var(--c-action) 55%, var(--c-action-hover) 100%);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer
}

.show-comment-body {
  flex: 1;
  min-width: 0
}

.server-detail-feedback .show-comment-list {
  margin: 0;
  padding: 0;
  list-style: none
}

.show-comment-item--more.is-pending {
  display: none
}

.show-comment-more-foot {
  margin-top: 8px;
  padding: 10px 0 4px;
  text-align: center
}

.server-detail-wrapper.is-cta-docked .show-comment-more-foot.is-cta-hidden,
body:has(.server-detail-cta-fixed.is-visible) .show-comment-more-foot {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0
}

.server-detail-wrapper.is-cta-docked .show-comment-more-foot.is-cta-hidden .show-comment-more-status,
body:has(.server-detail-cta-fixed.is-visible) .show-comment-more-foot .show-comment-more-status {
  display: none
}

.show-comment-more-status {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--c-text-3)
}

.show-comment-more-foot[data-state="more"] .show-comment-more-text {
  color: var(--c-text-2)
}

.server-detail-feedback .show-comment-item {
  padding: 12px 0;
  border-bottom-color: var(--c-line)
}

.server-detail-feedback .show-comment-item:last-child {
  border-bottom: none;
  padding-bottom: 0
}

.server-detail-feedback .show-comment-avatar {
  width: 36px;
  height: 36px;
  font-size: 0.78rem;
  background: var(--c-bg-card)
}

.server-detail-comments-list {
  margin-top: 20px
}

.show-comment-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 2px;
  margin: 8px 0 0
}

.show-comment-product {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: min(100%, 220px);
  margin-left: 6px;
  padding: 4px 0 4px 10px;
  border-left: 1px solid var(--c-line);
  border: none;
  border-radius: 6px;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--c-text-3);
  text-decoration: none;
  background: transparent;
  transition: color 0.15s ease, background 0.15s ease
}

.show-comment-product i {
  font-size: 0.72rem;
  opacity: 0.85;
  flex-shrink: 0
}

.show-comment-product span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.show-comment-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 0.72rem;
  color: var(--c-text-3);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease
}

.show-comment-action i {
  font-size: 0.78rem
}

.show-comment-like-num {
  min-width: 0.5em;
  font-variant-numeric: tabular-nums
}

.show-comment-reply-form {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  border-radius: 8px
}

.show-comment-reply-form[hidden] {
  display: none !important
}

.show-comment-reply-input {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  background: #fff;
  color: var(--c-text);
  font-size: 0.78rem;
  line-height: 1.5;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box
}

.show-comment-reply-form-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px
}

.show-comment-reply-form-foot .show-comment-reply-cancel {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--c-line-strong, #cbd5e1);
  background: var(--c-bg-soft, #f1f5f9);
  color: var(--c-text, #1e293b)
}

.show-comment-reply-form-foot .show-comment-reply-submit {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, var(--c-action) 0%, var(--c-action-hover) 100%);
  border: 1px solid var(--c-action-hover);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35)
}

.show-comment-reply-form-foot .show-comment-reply-submit.is-disabled {
  color: #cbd5e1;
  background: #475569;
  border-color: #64748b;
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed
}

.show-comment-floor-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  color: #b45309;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #fcd34d;
  line-height: 1.4
}

.show-comment-replies {
  margin: 10px 0 0;
  padding: 0
}

.show-comment-replies--thread {
  margin-top: 12px;
  padding: 10px 0 4px 14px;
  border-left: 2px solid var(--c-primary-soft, #ffedd5)
}

.show-comment-thread-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.72rem;
  color: var(--c-text-2)
}

.show-comment-thread-label {
  font-weight: 700;
  color: var(--c-primary, var(--c-action-hover))
}

.show-comment-thread-count {
  color: var(--c-text-3, #64748b)
}

.show-comment-replies--thread .show-comment-reply--floor {
  margin-bottom: 8px;
  margin-left: calc(min(var(--reply-depth, 1) - 1, 5) * 12px)
}

.show-comment-reply-floor-no {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-primary, var(--c-action-hover));
  background: var(--c-primary-soft, #fff7ed);
  border: 1px solid rgba(37, 99, 235, 0.2)
}

.show-comment-reply-at {
  color: var(--c-primary, var(--c-action-hover));
  font-weight: 600
}

.show-comment-reply-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px
}

.show-comment-reply-actions .show-comment-action {
  padding: 0;
  border: none;
  background: none;
  font-size: 0.72rem
}

.show-comment-reply {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, var(--c-bg-soft) 0%, rgba(255, 255, 255, 0.6) 100%);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  position: relative
}

.show-comment-reply--floor {
  flex-wrap: nowrap
}

.show-comment-reply::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--c-primary, var(--c-action-hover));
  opacity: 0.85
}

.show-comment-reply-content {
  flex: 1;
  min-width: 0;
  padding-left: 4px
}

.show-comment-reply-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-bottom: 4px
}

.show-comment-reply-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-text)
}

.show-comment-reply-to {
  font-size: 0.68rem;
  color: var(--c-text-3)
}

.show-comment-reply-to strong {
  font-weight: 600;
  color: var(--c-text-2)
}

.show-comment-reply-time {
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--c-text-3)
}

.show-comment-reply-text {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--c-text-2)
}

@media (max-width:991px) {
  .specs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

.breadcrumb-nav {
  margin: 0 0 10px;
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--c-line);
  font-size: 0.8125rem;
  line-height: 1.45
}

.breadcrumb-nav a {
  color: var(--c-text-2);
  text-decoration: none;
  font-weight: 500
}

.breadcrumb-nav span:not(.breadcrumb-sep) {
  color: var(--c-text);
  font-weight: 600
}

.breadcrumb-nav .breadcrumb-sep {
  margin: 0 8px;
  color: var(--c-text-3);
  font-weight: 400
}

.breadcrumb-nav-type-page,
.breadcrumb-nav-region-page {
  border-bottom: none;
  padding-bottom: 6px
}

.trial-right-content .container-inner > .breadcrumb-nav + .trial-section,
.trial-right-content .container-inner > .breadcrumb-nav + .server-detail-wrapper {
  margin-top: 0
}

@media (max-width:767px) {
  .server-detail-wrapper {
    padding: 18px
  }

  .server-header {
    margin-bottom: 16px
  }

  .server-detail-buy {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 16px 18px
  }

  .server-detail-buy-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px
  }

  .server-detail-buy-line .price-value {
    font-size: 1.85rem
  }

  .server-detail-buy-points {
    align-items: flex-start
  }

  .server-detail-cta-main {
    width: 100%;
    min-width: 0;
    height: 50px;
    font-size: 1rem
  }

  .server-detail-wrapper.is-cta-docked {
    padding-bottom: calc(76px + var(--layout-float-clearance, 0px))
  }

  .server-detail-cta-fixed-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 12px 0 2px
  }

  .server-detail-cta-fixed .server-detail-buy-points--dock {
    display: none
  }

  .server-detail-cta-fixed .server-detail-buy-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px
  }

  .server-detail-cta-fixed .server-detail-buy-line .price-value {
    font-size: 1.35rem
  }

  .server-detail-cta-fixed .server-detail-cta-main {
    width: 100%;
    min-width: 0;
    height: 46px;
    font-size: 0.9375rem
  }

  .server-meta {
    gap: 8px
  }

  .server-meta > span {
    padding: 4px 9px
  }

  .specs-grid {
    grid-template-columns: 1fr
  }

  .server-detail-panel {
    padding: 16px
  }
}

.show-notice .fa-info-circle {
  color: var(--c-primary);
  margin-right: 6px
}

.show-comment-list {
  list-style: none;
  margin: 0;
  padding: 0
}

.show-comment-item {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-line)
}

.show-comment-item:last-child {
  border-bottom: none
}

.show-comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 600;
  color: var(--c-text-2);
  flex-shrink: 0
}

.show-comment-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap
}

.show-comment-name {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--c-text)
}

.show-comment-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: .7rem;
  line-height: 1;
  color: #e6a817
}

.show-comment-stars .far {
  color: #d1d5db
}

.show-comment-time {
  font-size: .72rem;
  color: var(--c-text-3)
}

.show-comment-text {
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--c-text-2);
  margin: 0
}

@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn)
  }
}

@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn)
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

@keyframes smPanelUp {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.96)
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}