:root {
  --bg: #070708;
  --surface: #111113;
  --surface-2: #18181b;
  --line: #29292d;
  --text: #f4f4f5;
  --muted: #9d9da5;
  --muted-2: #686871;
  --accent: #f3f3f3;
  --shadow: 0 18px 50px rgb(0 0 0 / 30%);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--bg);
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 22% -10%, rgb(70 54 54 / 13%), transparent 31rem),
    var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.4;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

.site-page {
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  min-height: 55px;
  padding: 0 22px;
  border-bottom: 1px solid #202024;
  background: rgb(9 9 10 / 96%);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.brand-mark {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #77777d;
  border-radius: 8px 8px 8px 2px;
  color: #0c0c0d;
  background: #e9e9eb;
  font-size: 11px;
  letter-spacing: -0.08em;
}

.primary-nav,
.utility-nav {
  display: flex;
  align-items: center;
}

.primary-nav {
  gap: 25px;
  margin-left: auto;
}

.primary-nav a,
.utility-button,
.menu-button {
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.primary-nav a {
  color: #cfcfd4;
  font-size: 16px;
  white-space: nowrap;
}

.primary-nav a:hover,
.primary-nav a.active {
  color: #fff;
}

.utility-nav {
  gap: 4px;
  margin-left: 21px;
}

.utility-button,
.menu-button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #eeeeef;
  cursor: pointer;
  font-size: 18px;
}

.utility-button:hover,
.menu-button:hover {
  background: #232326;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 7px;
  width: min(245px, 24vw);
  margin-left: 8px;
  padding: 5px 7px 5px 12px;
  border: 1px solid #36363b;
  border-radius: 10px;
  background: #151518;
}

.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-size: 13px;
}

.search-box input::placeholder {
  color: #777780;
}

.search-submit {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: #f2f2f3;
  color: #0b0b0c;
  cursor: pointer;
}

.category-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 50px;
  padding: 0 24px;
  border-bottom: 1px solid #202024;
  background: #171719;
  overflow: hidden;
}

.category-nav a {
  padding: 0 16px;
  color: #b9b9c0;
  font-size: 15px;
  line-height: 50px;
  white-space: nowrap;
  transition: color 160ms ease, background 160ms ease;
}

.category-nav a:hover {
  background: #222225;
  color: #fff;
}

.mobile-nav {
  display: none;
}

.content {
  width: min(1420px, calc(100% - 34px));
  margin: 0 auto;
  padding: 8px 0 55px;
}

.section {
  margin-top: 0;
}

.section + .section {
  margin-top: 34px;
}

.section-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 13px;
}

.section-heading h1,
.section-heading h2 {
  margin: 0;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.section-heading a {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid #2e2e33;
  border-radius: 8px;
  background: #080809;
  color: #fff;
  font-size: 20px;
  transition: transform 160ms ease, background 160ms ease;
}

.section-heading a:hover {
  transform: translateX(2px);
  background: #222226;
}

.section-heading .section-link {
  margin-left: auto;
  width: auto;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.category-card {
  position: relative;
  display: flex;
  min-height: 201px;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  border-radius: 1px;
  background: #242428;
  box-shadow: var(--shadow);
  transition: transform 180ms ease, filter 180ms ease;
}

.category-card::before,
.video-thumb::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, rgb(255 255 255 / 16%), transparent 44%, rgb(0 0 0 / 52%));
  content: "";
}

.category-card::after,
.video-thumb::after {
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 54%;
  background: linear-gradient(transparent, rgb(0 0 0 / 78%));
  content: "";
}

.category-card > img,
.video-thumb > img,
.modal-preview > img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.86) contrast(1.04);
  transition: transform 220ms ease, filter 220ms ease;
}

.category-card:hover {
  filter: brightness(1.13);
  transform: translateY(-2px);
}

.category-card:hover > img,
.video-card:hover .video-thumb > img {
  filter: saturate(1) contrast(1.06);
  transform: scale(1.035);
}

.category-card .card-count {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 7px;
  border-radius: 3px;
  background: rgb(16 16 17 / 78%);
  color: #f0f0f1;
  font-size: 12px;
  font-weight: 700;
}

.category-card .card-count::before {
  content: "▣ ";
  color: #fff;
}

.category-card .card-label {
  width: 100%;
  padding: 9px 12px 8px;
  background: rgb(18 18 19 / 66%);
  color: #f4f4f5;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px 8px;
}

.video-card {
  min-width: 0;
  color: #f0f0f1;
}

.video-card:hover .video-thumb {
  filter: brightness(1.14);
  transform: translateY(-2px);
}

.video-thumb {
  position: relative;
  display: flex;
  min-height: 0;
  aspect-ratio: 16 / 9;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  border-radius: 2px;
  background: #26262b;
  transition: filter 180ms ease, transform 180ms ease;
}

.thumb-orb {
  position: absolute;
  top: 15%;
  left: 12%;
  width: 37%;
  height: 62%;
  border: 1px solid rgb(255 255 255 / 26%);
  border-radius: 50%;
  box-shadow: 28px 16px 0 -9px rgb(255 255 255 / 14%), -22px -6px 0 -14px rgb(255 255 255 / 18%);
  opacity: 0.8;
  transform: rotate(-22deg);
}

.thumb-stripe {
  position: absolute;
  right: -20%;
  bottom: 24%;
  width: 90%;
  height: 35%;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 50%;
  opacity: 0.8;
  transform: rotate(-28deg);
}

.duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 6px;
  border-radius: 3px;
  background: rgb(11 11 12 / 80%);
  color: #fff;
  font-size: 12px;
}

.video-title {
  display: -webkit-box;
  margin-top: 7px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.video-meta {
  display: flex;
  gap: 7px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.video-meta span + span::before {
  margin-right: 7px;
  color: #5b5b64;
  content: "•";
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 27px 22px 34px;
  border-top: 1px solid #222226;
  color: var(--muted-2);
  font-size: 12px;
}

.footer-links {
  display: flex;
  gap: 18px;
}

.footer a:hover {
  color: #fff;
}

.videos-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 2px 0 21px;
}

.chip {
  padding: 7px 12px;
  border: 1px solid #2f2f34;
  border-radius: 999px;
  background: #121214;
  color: #aeadb5;
  font-size: 12px;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.chip:hover,
.chip.active {
  border-color: #d8d8dc;
  background: #ededee;
  color: #101011;
}

.results-note {
  margin: 0 0 13px;
  color: var(--muted);
  font-size: 13px;
}

.pager {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 31px 0 12px;
}

.pager a {
  display: grid;
  min-width: 34px;
  height: 34px;
  place-items: center;
  padding: 0 9px;
  border: 1px solid #2a2a2f;
  border-radius: 8px;
  color: #bcbcc2;
  font-size: 13px;
}

.pager a:hover,
.pager a.active {
  border-color: #eeeef0;
  background: #eeeef0;
  color: #111112;
}

.empty-state {
  padding: 70px 20px;
  border: 1px dashed #33333a;
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(0 0 0 / 76%);
}

.modal {
  width: min(610px, 100%);
  overflow: hidden;
  border: 1px solid #39393f;
  border-radius: 13px;
  background: #151517;
  box-shadow: 0 28px 90px rgb(0 0 0 / 62%);
}

.modal-preview {
  position: relative;
  min-height: 0;
  aspect-ratio: 16 / 9;
  isolation: isolate;
  background: #333;
}

.modal-preview .thumb-orb {
  width: 30%;
}

.modal-copy {
  padding: 21px 22px 22px;
}

.modal-copy h2 {
  margin: 0 0 8px;
  font-size: 21px;
  line-height: 1.2;
}

.modal-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 19px;
}

.modal-actions a,
.modal-actions button {
  padding: 8px 13px;
  border: 1px solid #38383e;
  border-radius: 8px;
  background: #202024;
  color: #f5f5f5;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.modal-actions button:hover,
.modal-actions a:hover {
  background: #303036;
}

@media (max-width: 1100px) {
  .brand {
    min-width: auto;
  }

  .primary-nav {
    gap: 15px;
  }

  .primary-nav a:nth-child(n + 4),
  .category-nav a:nth-child(n + 9) {
    display: none;
  }

  .category-card {
    min-height: 168px;
  }

  .video-thumb {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .topbar {
    min-height: 54px;
    padding: 0 13px;
  }

  .brand {
    font-size: 13px;
  }

  .primary-nav,
  .category-nav {
    display: none;
  }

  .utility-nav {
    margin-left: auto;
  }

  .utility-nav .utility-button:nth-child(-n + 2) {
    display: none;
  }

  .menu-button {
    display: grid;
  }

  .mobile-nav {
    position: fixed;
    inset: 54px 0 auto;
    z-index: 25;
    display: grid;
    padding: 13px;
    border-bottom: 1px solid #2b2b30;
    background: #151517;
    box-shadow: 0 18px 35px rgb(0 0 0 / 35%);
  }

  .mobile-nav a {
    padding: 10px 8px;
    border-bottom: 1px solid #26262b;
    color: #d4d4d7;
  }

  .mobile-nav a:last-child {
    border: 0;
  }

  .content {
    width: min(100% - 22px, 560px);
    padding-top: 12px;
  }

  .section-heading h1,
  .section-heading h2 {
    font-size: 20px;
  }

  .category-grid,
  .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .category-card {
    min-height: 150px;
  }

  .video-thumb {
    min-height: 0;
  }

  .video-title {
    font-size: 13px;
  }

  .video-meta {
    font-size: 11px;
  }

  .footer {
    display: grid;
    padding: 22px 13px 28px;
  }
}

@media (min-width: 761px) {
  .menu-button {
    display: none;
  }
}

/* Tuitehao storefront */
.th-page {
  --th-bg: #080a11;
  --th-panel: #10131d;
  --th-panel-2: #151927;
  --th-line: rgb(255 255 255 / 9%);
  --th-text: #f7f8fb;
  --th-muted: #8f96a8;
  --th-blue: #6386ff;
  min-height: 100vh;
  overflow: hidden;
  background: var(--th-bg);
  color: var(--th-text);
  font-family: Arial, Helvetica, sans-serif;
}

.th-page a {
  color: inherit;
  text-decoration: none;
}

.th-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 31px;
  padding: 0 max(24px, calc((100% - 1240px) / 2));
  background: #0c101b;
  color: #aeb6c8;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.th-notice-right {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.th-status-dot,
.th-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #61e8a2;
  box-shadow: 0 0 12px rgb(97 232 162 / 75%);
}

.th-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  min-height: 76px;
  gap: 46px;
  padding: 0 max(24px, calc((100% - 1240px) / 2));
  border-bottom: 1px solid var(--th-line);
  background: rgb(8 10 17 / 90%);
  backdrop-filter: blur(18px);
}

.th-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 170px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.05em;
}

.th-brand small {
  align-self: flex-end;
  margin: 0 0 3px -5px;
  color: #7e879c;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.th-brand-mark {
  display: grid;
  width: 27px;
  height: 27px;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 3px;
  padding: 6px;
  border-radius: 8px;
  background: linear-gradient(135deg, #91a9ff, #5b72e9);
  box-shadow: 0 7px 21px rgb(94 122 255 / 26%);
}

.th-brand-mark span {
  display: block;
  border-radius: 3px;
  background: #fff;
}

.th-brand-mark span:nth-child(1) { height: 48%; opacity: 0.75; }
.th-brand-mark span:nth-child(2) { height: 75%; }
.th-brand-mark span:nth-child(3) { height: 100%; opacity: 0.85; }

.th-main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
}

.th-main-nav a {
  position: relative;
  padding: 29px 0 27px;
  color: #9299ac;
  font-size: 13px;
  transition: color 160ms ease;
}

.th-main-nav a::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--th-blue);
  content: "";
  opacity: 0;
  transform: scaleX(0.5);
  transition: opacity 160ms ease, transform 160ms ease;
}

.th-main-nav a:hover,
.th-main-nav a.active {
  color: #fff;
}

.th-main-nav a.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.th-header-actions {
  display: flex;
  align-items: center;
  gap: 13px;
}

.th-search {
  display: flex;
  align-items: center;
  width: 181px;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--th-line);
  border-radius: 8px;
  background: #10141e;
  color: #8991a6;
  transition: border-color 160ms ease, background 160ms ease;
}

.th-search:focus-within {
  border-color: rgb(99 134 255 / 65%);
  background: #121827;
}

.th-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 12px;
}

.th-search input::placeholder { color: #687085; }

.th-icon-button,
.th-menu-button {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #b7bfd0;
  cursor: pointer;
  font-size: 19px;
}

.th-icon-button:hover,
.th-menu-button:hover { background: #171c2a; color: #fff; }

.th-icon-button sup {
  position: absolute;
  top: 2px;
  right: 1px;
  display: grid;
  width: 13px;
  height: 13px;
  place-items: center;
  border-radius: 50%;
  background: var(--th-blue);
  color: #fff;
  font-size: 8px;
  line-height: 1;
}

.th-mobile-nav {
  position: fixed;
  top: 107px;
  right: 16px;
  z-index: 30;
  display: grid;
  width: min(240px, calc(100% - 32px));
  padding: 8px;
  border: 1px solid var(--th-line);
  border-radius: 12px;
  background: #141925;
  box-shadow: 0 20px 50px rgb(0 0 0 / 38%);
}

.th-mobile-nav a { padding: 12px; border-radius: 8px; color: #d3d8e5; font-size: 13px; }
.th-mobile-nav a:hover { background: #20273a; }

.th-hero {
  position: relative;
  display: grid;
  width: min(1240px, calc(100% - 48px));
  min-height: 480px;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 50px;
  margin: 0 auto;
  padding: 65px 0 50px;
}

.th-hero::before {
  position: absolute;
  top: -200px;
  right: 12%;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(74 96 224 / 18%), transparent 68%);
  content: "";
  pointer-events: none;
}

.th-eyebrow,
.th-section-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #8da1e7;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.th-hero h1 {
  margin: 20px 0 16px;
  color: #fbfcff;
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 0.98;
}

.th-hero h1 em,
.th-service-copy h2 em {
  color: #708fff;
  font-style: normal;
}

.th-hero-copy > p {
  max-width: 430px;
  margin: 0;
  color: #9ca5b8;
  font-size: 14px;
  line-height: 1.8;
}

.th-hero-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 30px;
}

.th-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: #6b88ff;
  box-shadow: 0 10px 25px rgb(81 107 236 / 28%);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: background 160ms ease, transform 160ms ease;
}

.th-primary-button:hover { background: #7d98ff; transform: translateY(-2px); }
.th-primary-button span { font-size: 17px; font-weight: 400; }

.th-text-link { color: #aeb7cb; font-size: 12px; }
.th-text-link:hover { color: #fff; }
.th-text-link span { margin-left: 5px; color: #7894ff; }

.th-hero-art {
  position: relative;
  min-height: 380px;
  perspective: 700px;
}

.th-orbit {
  position: absolute;
  border: 1px solid rgb(121 147 255 / 35%);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.orbit-one { top: 16%; left: 8%; width: 86%; height: 57%; }
.orbit-two { top: 25%; left: 18%; width: 68%; height: 55%; border-color: rgb(121 147 255 / 14%); transform: rotate(35deg); }

.th-art-card {
  position: absolute;
  width: 272px;
  height: 308px;
  border: 1px solid rgb(255 255 255 / 17%);
  border-radius: 15px;
  box-shadow: 0 30px 60px rgb(0 0 0 / 35%);
}

.card-back {
  top: 5%;
  right: 13%;
  padding: 28px;
  background: linear-gradient(145deg, #2b3d83, #10182d 72%);
  color: #8798de;
  transform: rotate(9deg) translateZ(-20px);
}

.card-back span { font-size: 10px; letter-spacing: 0.15em; }
.card-back strong { position: absolute; right: 23px; bottom: 25px; color: #dce2ff; font-size: 26px; letter-spacing: -0.08em; line-height: 0.9; text-align: right; }

.card-front {
  top: 10%;
  right: 28%;
  display: flex;
  flex-direction: column;
  padding: 19px;
  background: linear-gradient(145deg, #273664, #111827 60%, #11131b);
  transform: rotate(-9deg) translateZ(20px);
}

.th-art-top,
.th-art-bottom { display: flex; align-items: center; justify-content: space-between; color: #aab9f6; font-size: 10px; }
.th-art-top .th-brand-mark { width: 21px; height: 21px; padding: 4px; border-radius: 6px; }
.th-art-top > span:nth-child(2) { margin-right: auto; padding-left: 8px; color: #e7ebff; font-weight: 700; }
.th-art-sphere { display: grid; width: 138px; height: 138px; margin: auto; place-items: center; border: 1px solid rgb(184 199 255 / 28%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #b0c1ff, #5068c7 28%, #172044 60%, #0f162c 70%); box-shadow: 0 0 70px rgb(107 140 255 / 34%), inset -18px -15px 30px rgb(0 0 0 / 35%); color: #f4f7ff; font-size: 30px; }
.th-art-bottom { padding-top: 11px; border-top: 1px solid rgb(255 255 255 / 12%); }
.th-art-bottom b { color: #edf1ff; font-size: 17px; }

.th-hero-float { position: absolute; display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 8px; background: rgb(20 27 47 / 80%); box-shadow: 0 14px 35px rgb(0 0 0 / 28%); color: #829aff; font-size: 16px; backdrop-filter: blur(10px); }
.th-hero-float span { color: #c3cadc; font-size: 10px; }
.float-one { top: 10%; left: 2%; animation: th-float 5s ease-in-out infinite; }
.float-two { right: 3%; bottom: 14%; animation: th-float 6s 1s ease-in-out infinite; }
@keyframes th-float { 50% { transform: translateY(-8px); } }

.th-trust-row { display: grid; width: min(1240px, calc(100% - 48px)); grid-template-columns: repeat(4, 1fr); margin: 0 auto; padding: 21px 0; border-top: 1px solid var(--th-line); border-bottom: 1px solid var(--th-line); }
.th-trust-row > div { display: grid; gap: 4px; padding-left: 30px; border-left: 1px solid var(--th-line); }
.th-trust-row > div:first-child { padding-left: 0; border-left: 0; }
.th-trust-row strong { color: #eef1ff; font-size: 20px; letter-spacing: -0.04em; }
.th-trust-row span { color: #818a9f; font-size: 11px; }

.th-category-section,
.th-products-section,
.th-service-section,
.th-faq-section { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }
.th-category-section { padding: 82px 0 58px; }
.th-section-title-row { display: flex; align-items: end; justify-content: space-between; margin: 15px 0 26px; }
.th-section-title-row h2,
.th-product-toolbar h2,
.th-faq-row h2 { margin: 0; color: #f4f6ff; font-size: 28px; letter-spacing: -0.06em; }
.th-section-title-row p { margin: 9px 0 0; color: #818a9f; font-size: 12px; }
.th-section-count { color: #7684b4; font-size: 12px; }
.th-category-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; }
.th-category-card { display: grid; grid-template-columns: 34px 1fr 12px; align-items: center; gap: 9px; min-height: 92px; padding: 13px; border: 1px solid var(--th-line); border-radius: 10px; background: #10141f; color: #b9c0d1; cursor: pointer; text-align: left; transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; }
.th-category-card:hover,
.th-category-card.active { border-color: rgb(103 134 255 / 64%); background: linear-gradient(145deg, #17213d, #111622); transform: translateY(-3px); }
.th-category-card strong { display: block; overflow: hidden; color: #d9deea; font-size: 11px; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.th-category-card small { display: block; margin-top: 5px; color: #6d7891; font-size: 10px; }
.th-category-card b { color: #697695; font-size: 18px; font-weight: 400; }
.th-category-icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; background: #1b2339; color: #8ea4ff; font-size: 16px; font-weight: 700; }
.th-category-icon.instagram { color: #ef9cda; background: #2d1c3e; }
.th-category-icon.facebook { color: #80a5ff; background: #1a2a53; }
.th-category-icon.tiktok { color: #9cf5ef; background: #1b3037; }
.th-category-icon.telegram { color: #83dbff; background: #163446; }
.th-category-icon.youtube { color: #ff9696; background: #401e28; }

.th-products-section { padding: 0 0 88px; }
.th-product-toolbar { display: flex; align-items: end; justify-content: space-between; margin-bottom: 26px; }
.th-product-toolbar h2 { margin-top: 9px; font-size: 23px; }
.th-sort { display: flex; gap: 6px; }
.th-sort button { padding: 8px 11px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #747e94; cursor: pointer; font-size: 11px; }
.th-sort button.active,
.th-sort button:hover { border-color: var(--th-line); background: #151a29; color: #e7eaff; }
.th-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.th-product-card { min-width: 0; border: 1px solid var(--th-line); border-radius: 12px; background: #0f131e; box-shadow: 0 18px 38px rgb(0 0 0 / 12%); overflow: hidden; transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
.th-product-card:hover { border-color: rgb(119 145 255 / 52%); box-shadow: 0 22px 50px rgb(0 0 0 / 28%); transform: translateY(-4px); }
.th-card-click { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.th-product-visual { position: relative; display: grid; min-height: 165px; place-items: center; overflow: hidden; isolation: isolate; background: #1a2343; }
.th-product-visual::after { position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgb(255 255 255 / 17%), transparent 44%, rgb(0 0 0 / 50%)); content: ""; }
.th-product-visual.blue { background: linear-gradient(135deg, #344c9e, #1b2549 45%, #101521); }
.th-product-visual.pink { background: linear-gradient(135deg, #9e4e93, #3b214d 48%, #131522); }
.th-product-visual.cyan { background: linear-gradient(135deg, #2789a7, #193d5a 48%, #101923); }
.th-product-visual.violet { background: linear-gradient(135deg, #734eae, #33285f 45%, #111624); }
.th-product-visual.indigo { background: linear-gradient(135deg, #405bb9, #25284e 52%, #101521); }
.th-product-visual.red { background: linear-gradient(135deg, #ae3f59, #51223f 47%, #161520); }
.th-visual-glow { position: absolute; width: 100px; height: 100px; border-radius: 50%; background: rgb(255 255 255 / 19%); filter: blur(18px); transform: translate(-55px, -22px); }
.th-platform-icon { position: relative; display: grid; width: 68px; height: 68px; place-items: center; border: 1px solid rgb(255 255 255 / 32%); border-radius: 20px; background: rgb(255 255 255 / 11%); box-shadow: 0 14px 30px rgb(0 0 0 / 25%); color: #fff; font-size: 35px; font-weight: 700; backdrop-filter: blur(8px); }
.th-visual-caption { position: absolute; right: 13px; bottom: 12px; color: rgb(255 255 255 / 52%); font-size: 8px; letter-spacing: 0.19em; }
.th-product-tag { position: absolute; top: 12px; left: 12px; padding: 4px 7px; border-radius: 4px; background: rgb(13 17 29 / 62%); color: #e6ebff; font-size: 9px; }
.th-product-copy { padding: 15px 16px 14px; }
.th-product-platform { display: flex; align-items: center; gap: 7px; color: #8993aa; font-size: 10px; }
.th-mini-icon { display: inline-grid; width: 18px; height: 18px; place-items: center; border-radius: 5px; background: #283965; color: #a4b4ff; font-size: 10px; font-weight: 800; }
.th-mini-icon.instagram { background: #42234b; color: #f7a8de; }
.th-mini-icon.facebook { background: #263f84; color: #9fb9ff; }
.th-mini-icon.tiktok { background: #214b50; color: #a5f7ed; }
.th-mini-icon.telegram { background: #225477; color: #93e2ff; }
.th-mini-icon.youtube { background: #6c2633; color: #ffb2b2; }
.th-product-copy h3 { margin: 11px 0 7px; color: #e7eaf3; font-size: 14px; line-height: 1.35; }
.th-product-copy p { display: -webkit-box; min-height: 34px; margin: 0; overflow: hidden; color: #7e879b; font-size: 11px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.th-product-bottom { display: flex; align-items: baseline; justify-content: space-between; margin-top: 15px; }
.th-product-bottom strong { color: #91a8ff; font-size: 20px; letter-spacing: -0.06em; }
.th-product-bottom span { color: #68748c; font-size: 10px; }
.th-product-delivery { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--th-line); color: #61c999; font-size: 10px; }
.th-product-delivery span:last-child { color: #8791a7; }
.th-empty { padding: 80px 20px; border: 1px dashed #2d354a; border-radius: 12px; color: #858fa6; text-align: center; }

.th-service-section { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; padding: 74px 0; border-top: 1px solid var(--th-line); }
.th-service-copy h2 { margin: 15px 0; color: #f4f6ff; font-size: 36px; letter-spacing: -0.07em; line-height: 1.02; }
.th-service-copy p { max-width: 370px; margin: 0 0 22px; color: #818a9f; font-size: 13px; line-height: 1.8; }
.th-service-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; align-items: start; }
.th-service-steps > div { min-height: 162px; padding: 18px; border: 1px solid var(--th-line); border-radius: 10px; background: #10141f; }
.th-service-steps span { color: #7b95ff; font-size: 11px; }
.th-service-steps strong { display: block; margin-top: 34px; color: #e7eaf4; font-size: 13px; }
.th-service-steps p { margin: 7px 0 0; color: #798398; font-size: 10px; line-height: 1.6; }

.th-faq-section { padding: 64px 0 75px; border-top: 1px solid var(--th-line); }
.th-faq-row { display: flex; justify-content: space-between; gap: 30px; margin-top: 17px; }
.th-faq-row p { margin: 9px 0 0; color: #818a9f; font-size: 12px; }
.th-faq-links { display: grid; min-width: 420px; grid-template-columns: repeat(2, 1fr); gap: 0 35px; }
.th-faq-links a { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--th-line); color: #afb7c9; font-size: 12px; }
.th-faq-links a:hover { color: #fff; }
.th-faq-links span { color: #718cff; }

.th-footer { display: grid; width: min(1240px, calc(100% - 48px)); grid-template-columns: 2.2fr 1fr 1fr 1.35fr; gap: 30px; margin: 0 auto; padding: 33px 0 45px; border-top: 1px solid var(--th-line); }
.th-footer-brand p { margin: 16px 0 0; color: #626c80; font-size: 10px; }
.th-footer > div:not(.th-footer-brand):not(.th-footer-end) { display: grid; align-content: start; gap: 10px; }
.th-footer a { color: #7c869c; font-size: 11px; }
.th-footer a:hover { color: #fff; }
.th-footer-label { margin-bottom: 3px; color: #d1d7e5; font-size: 11px; font-weight: 700; }
.th-footer-end { display: grid; align-content: end; justify-items: end; gap: 5px; color: #596277; font-size: 10px; }

.th-modal-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 18px; background: rgb(2 4 9 / 78%); backdrop-filter: blur(5px); }
.th-modal { position: relative; width: min(480px, 100%); overflow: hidden; border: 1px solid rgb(128 151 255 / 32%); border-radius: 15px; background: #101521; box-shadow: 0 30px 90px rgb(0 0 0 / 58%); }
.th-modal .th-product-visual { min-height: 210px; }
.th-modal-close { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgb(255 255 255 / 15%); border-radius: 50%; background: rgb(6 8 13 / 48%); color: #fff; cursor: pointer; font-size: 20px; line-height: 1; }
.th-modal-copy { padding: 22px; }
.th-modal-copy h2 { margin: 13px 0 8px; color: #f1f4ff; font-size: 22px; letter-spacing: -0.05em; line-height: 1.2; }
.th-modal-copy p { margin: 0; color: #8e98ad; font-size: 12px; line-height: 1.6; }
.th-modal-price { margin: 19px 0 13px; color: #92a9ff; font-size: 28px; font-weight: 800; letter-spacing: -0.07em; }
.th-modal-price small { color: #7e899f; font-size: 11px; font-weight: 400; letter-spacing: 0; }
.th-info-note { margin-bottom: 17px; padding: 10px 12px; border: 1px solid rgb(110 138 255 / 18%); border-radius: 7px; background: rgb(72 96 187 / 10%); color: #97a8df; font-size: 10px; line-height: 1.55; }

@media (max-width: 1050px) {
  .th-header { gap: 22px; }
  .th-main-nav { gap: 17px; }
  .th-category-grid { grid-template-columns: repeat(4, 1fr); }
  .th-product-grid { grid-template-columns: repeat(2, 1fr); }
  .th-hero { grid-template-columns: 0.95fr 1.05fr; gap: 18px; }
  .card-front { right: 20%; }
}

@media (max-width: 760px) {
  .th-notice { padding: 0 14px; }
  .th-notice-right { display: none; }
  .th-header { min-height: 69px; padding: 0 14px; }
  .th-brand { min-width: auto; font-size: 18px; }
  .th-brand small { display: none; }
  .th-main-nav { display: none; }
  .th-search { width: 132px; }
  .th-mobile-nav { top: 99px; }
  .th-hero { display: block; width: min(100% - 28px, 560px); min-height: auto; padding: 52px 0 25px; }
  .th-hero h1 { font-size: 48px; }
  .th-hero-art { min-height: 335px; margin-top: 31px; transform: scale(0.92); transform-origin: top center; }
  .card-front { right: 20%; }
  .card-back { right: 5%; }
  .float-one { left: 0; }
  .float-two { right: -2%; }
  .th-trust-row { width: min(100% - 28px, 560px); grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .th-trust-row > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .th-category-section, .th-products-section, .th-service-section, .th-faq-section, .th-footer { width: min(100% - 28px, 560px); }
  .th-category-section { padding: 62px 0 43px; }
  .th-section-title-row { align-items: start; }
  .th-section-title-row h2, .th-product-toolbar h2, .th-faq-row h2 { font-size: 23px; }
  .th-category-grid { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .th-category-card { min-height: 81px; padding: 10px; }
  .th-category-card b { display: none; }
  .th-product-toolbar { display: block; }
  .th-sort { margin-top: 17px; overflow: auto; }
  .th-sort button { white-space: nowrap; }
  .th-product-grid { grid-template-columns: 1fr; gap: 10px; }
  .th-product-visual { min-height: 190px; }
  .th-service-section { display: block; padding: 60px 0; }
  .th-service-copy h2 { font-size: 32px; }
  .th-service-steps { margin-top: 30px; }
  .th-service-steps > div { min-height: 144px; padding: 13px; }
  .th-service-steps strong { margin-top: 25px; }
  .th-faq-section { padding: 52px 0 58px; }
  .th-faq-row { display: block; }
  .th-faq-links { min-width: 0; margin-top: 22px; }
  .th-footer { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .th-footer-brand { grid-column: 1 / -1; }
  .th-footer-end { justify-items: start; }
}

/* Tuitehao storefront layout */
.tui-page {
  min-height: 100vh;
  overflow: hidden;
  background: #f5f9ff;
  color: rgba(0, 0, 0, 0.85);
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", Tahoma, Arial, sans-serif;
}

.tui-page *,
.tui-page *::before,
.tui-page *::after { box-sizing: border-box; }
.tui-page a { color: inherit; text-decoration: none; }
.tui-page button,
.tui-page input { font: inherit; }
.tui-container { width: min(1140px, calc(100% - 32px)); margin: 0 auto; }

.tui-notice { min-height: 50px; background: #111b31; color: #f3f6ff; }
.tui-notice .tui-container { display: flex; align-items: center; min-height: 50px; gap: 13px; font-size: 14px; }
.tui-notice-badge { padding: 5px 12px; border-radius: 7px; background: #fff; color: #111827; font-size: 13px; font-weight: 800; letter-spacing: 0.02em; }
.tui-notice a { margin-left: auto; color: #c9d5f3; font-size: 13px; }
.tui-notice a + a { margin-left: 12px; }
.tui-notice a:hover { color: #fff; }

.tui-header { min-height: 115px; background: #fff; }
.tui-header-inner { display: flex; align-items: center; min-height: 115px; gap: 34px; }
.tui-logo { display: inline-flex; align-items: center; flex: 0 0 326px; gap: 12px; }
.tui-logo img { width: 66px; height: 66px; object-fit: contain; border: 1px solid #e7edf7; border-radius: 15px; box-shadow: 0 7px 17px rgb(45 91 164 / 8%); }
.tui-logo span { display: grid; gap: 2px; }
.tui-logo strong { color: #176ce6; font-size: 34px; font-weight: 800; letter-spacing: -0.06em; line-height: 1; }
.tui-logo small { color: #9ba6b8; font-size: 17px; font-style: italic; line-height: 1.1; }
.tui-search { display: flex; flex: 1; min-height: 62px; border: 3px solid #1670e8; border-radius: 7px; overflow: hidden; }
.tui-search input { width: 100%; min-width: 0; padding: 0 21px; border: 0; outline: 0; color: #172137; font-size: 17px; }
.tui-search input::placeholder { color: #8791a3; }
.tui-search button { width: 64px; border: 0; background: #176fe9; color: #fff; cursor: pointer; font-size: 24px; }
.tui-search button:hover { background: #0d5cc8; }
.tui-header-actions { display: flex; align-items: center; gap: 15px; flex: 0 0 auto; color: #5d6777; font-size: 14px; white-space: nowrap; }
.tui-header-actions a:hover { color: #176fe9; }
.tui-menu-toggle { display: none; border: 0; background: transparent; color: #176fe9; cursor: pointer; font-size: 23px; }

.tui-nav { min-height: 84px; background: #176fe9; color: #fff; box-shadow: 0 4px 16px rgb(23 111 233 / 22%); }
.tui-nav-inner { display: flex; align-items: center; justify-content: space-between; min-height: 84px; }
.tui-nav-left,
.tui-nav-right { display: flex; align-items: center; gap: 11px; }
.tui-nav a { display: inline-flex; align-items: center; gap: 7px; min-height: 47px; padding: 0 28px; border-radius: 26px; color: rgb(255 255 255 / 92%); font-size: 18px; transition: background 160ms ease, color 160ms ease; }
.tui-nav a:hover,
.tui-nav a.active { background: #0f64d9; color: #fff; box-shadow: inset 0 2px 3px rgb(0 0 0 / 8%); }
.tui-nav a span { font-size: 16px; }
.tui-nav-right a { padding: 0 14px; font-size: 16px; }

.tui-trust { min-height: 92px; background: #fff; border-bottom: 1px solid #dce5f2; }
.tui-trust .tui-container { display: grid; grid-template-columns: repeat(4, 1fr); min-height: 92px; }
.tui-trust .tui-container > div { display: flex; align-items: center; gap: 13px; padding: 0 27px; border-right: 1px solid #e1e7ef; }
.tui-trust .tui-container > div:first-child { padding-left: 6px; }
.tui-trust .tui-container > div:last-child { border-right: 0; }
.tui-trust > .tui-container > div > span { font-size: 31px; line-height: 1; }
.tui-trust p { display: grid; gap: 3px; margin: 0; }
.tui-trust strong { color: #596376; font-size: 16px; font-weight: 500; }
.tui-trust small { color: #8e99aa; font-size: 13px; }

.tui-main { min-height: 760px; padding: 48px 0 80px; }
.tui-layout { display: grid; grid-template-columns: 420px minmax(0, 1fr); align-items: start; gap: 42px; }
.tui-sidebar { overflow: hidden; border: 1px solid #edf2f9; border-radius: 17px; background: #fff; box-shadow: 0 8px 26px rgb(47 79 126 / 5%); }
.tui-sidebar h2 { margin: 0; padding: 27px 29px 26px; color: #1469dd; font-size: 27px; font-weight: 700; }
.tui-sidebar-list { max-height: 565px; overflow: auto; border-top: 1px solid #edf1f6; }
.tui-sidebar-list button { display: flex; width: 100%; align-items: center; gap: 15px; min-height: 74px; padding: 0 27px; border: 0; border-bottom: 1px solid #edf1f6; background: #fff; color: #293342; cursor: pointer; text-align: left; transition: background 150ms ease, color 150ms ease; }
.tui-sidebar-list button:hover,
.tui-sidebar-list button.active { background: #f3f8ff; color: #176fe9; }
.tui-sidebar-list img { width: 47px; height: 47px; flex: 0 0 auto; object-fit: contain; }
.tui-sidebar-list span { flex: 1; font-size: 20px; }
.tui-sidebar-list b { color: #1b2636; font-size: 17px; font-weight: 400; }

.tui-right { min-width: 0; }
.tui-notice-card { display: flex; align-items: flex-start; min-height: 94px; margin-bottom: 24px; padding: 23px 27px; border: 1px solid #e0e9f8; border-radius: 16px; background: #f0f5ff; color: #ee9930; font-size: 17px; font-weight: 700; line-height: 1.65; }
.tui-bell { margin: 5px 15px 0 0; color: #2f6fe4; font-size: 18px; }
.tui-notice-card strong { color: #f3982d; font-size: 17px; }
.tui-notice-card a { color: #f3982d; text-decoration: underline; }
.tui-notice-card a:hover { color: #d97816; }
.tui-products { overflow: hidden; border: 1px solid #e7edf5; border-radius: 15px; background: #fff; box-shadow: 0 8px 26px rgb(47 79 126 / 5%); }
.tui-products-heading { display: flex; align-items: center; justify-content: space-between; min-height: 75px; padding: 0 27px; border-bottom: 1px solid #e9eef6; }
.tui-products-heading h2 { margin: 0; color: #141a25; font-size: 25px; }
.tui-products-heading h2 small { margin-left: 15px; color: #4f5662; font-size: 15px; font-weight: 400; }
.tui-products-heading a { color: #176fe9; font-size: 15px; }
.tui-products-heading a:hover { text-decoration: underline; }
.tui-table-head,
.tui-product-row { display: grid; grid-template-columns: minmax(0, 1fr) 78px 55px 55px 55px; align-items: center; gap: 10px; padding: 0 27px; }
.tui-table-head { min-height: 52px; border-bottom: 1px solid #e9eef6; color: #1f2a3a; font-size: 15px; font-weight: 700; }
.tui-table-head span:not(:first-child) { text-align: center; }
.tui-product-row { min-height: 83px; border-bottom: 1px solid #edf1f7; color: #435064; font-size: 14px; }
.tui-product-row:last-of-type { border-bottom: 0; }
.tui-product-row > span { text-align: center; }
.tui-product-name { display: flex; align-items: center; min-width: 0; gap: 11px; }
.tui-product-name img { width: 37px; height: 37px; flex: 0 0 auto; object-fit: contain; }
.tui-product-name strong { overflow: hidden; color: #1d2a3a; font-size: 15px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.tui-product-name em { flex: 0 0 auto; padding: 2px 5px; border-radius: 3px; background: #fff2e6; color: #ef8f2e; font-size: 10px; font-style: normal; }
.tui-price { color: #f18b2a; font-size: 17px; text-align: center; }
.tui-product-row button { min-height: 32px; padding: 0 8px; border: 1px solid #e9872d; border-radius: 4px; background: #fff; color: #ed8b2f; cursor: pointer; font-size: 13px; }
.tui-product-row button:hover { background: #fff4ea; }
.tui-empty { padding: 70px 20px; color: #8490a1; text-align: center; }

.tui-news-view,
.tui-simple-view { min-height: 530px; padding: 50px; border: 1px solid #e3eaf4; border-radius: 17px; background: #fff; box-shadow: 0 8px 26px rgb(47 79 126 / 5%); }
.tui-view-heading { margin-bottom: 26px; }
.tui-view-heading span { color: #176fe9; font-size: 13px; }
.tui-view-heading h1,
.tui-simple-view h1 { margin: 10px 0; color: #192234; font-size: 30px; }
.tui-view-heading p,
.tui-simple-view p { margin: 0; color: #7c8797; font-size: 15px; }
.tui-news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tui-news-grid a { position: relative; display: grid; gap: 10px; min-height: 110px; padding: 19px 22px; border: 1px solid #e4ebf5; border-radius: 9px; background: #fbfdff; }
.tui-news-grid a:hover { border-color: #b7d0f6; background: #f4f8ff; }
.tui-news-grid strong { color: #26344a; font-size: 15px; }
.tui-news-grid span { color: #96a0af; font-size: 12px; }
.tui-news-grid b { position: absolute; right: 20px; bottom: 15px; color: #2476e3; font-size: 18px; font-weight: 400; }
.tui-simple-view { display: grid; place-items: center; align-content: center; text-align: center; }
.tui-simple-icon { display: grid; width: 60px; height: 60px; place-items: center; border-radius: 50%; background: #e8f2ff; color: #176fe9; font-size: 25px; }
.tui-simple-view h1 { margin-top: 20px; }
.tui-back-button { display: inline-block; margin-top: 25px; padding: 11px 19px; border: 0; border-radius: 5px; background: #176fe9; color: #fff !important; cursor: pointer; font: inherit; font-size: 14px; }
.tui-checkout-label { margin-top: 20px; color: #176fe9; font-size: 13px; }
.tui-checkout-view h1 { margin-top: 8px; }
.tui-checkout-price { display: block; margin-top: 16px; color: #ef8a2c; font-size: 26px; }
.tui-checkout-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.tui-checkout-actions .tui-back-button { margin-top: 22px; }
.tui-secondary-button { border: 1px solid #176fe9; background: #fff; color: #176fe9 !important; }

.tui-footer { min-height: 355px; padding: 65px 0; background: #111b31; color: #9ca8bd; }
.tui-footer .tui-container { display: grid; grid-template-columns: 2.3fr 1fr 1fr 1.3fr; gap: 50px; }
.tui-footer .tui-logo { display: inline-flex; }
.tui-footer .tui-logo img { width: 42px; height: 42px; border: 0; background: #fff; }
.tui-footer .tui-logo strong { color: #fff; font-size: 23px; }
.tui-footer .tui-logo small { color: #9ba8c1; font-size: 12px; }
.tui-footer-main p { max-width: 420px; margin: 25px 0 0; color: #8e9ab0; font-size: 13px; line-height: 1.85; }
.tui-footer h3 { margin: 0 0 22px; color: #fff; font-size: 16px; }
.tui-footer a,
.tui-footer span { display: block; margin: 0 0 15px; color: #9ca8bd; font-size: 13px; }
.tui-footer a:hover { color: #fff; }
.tui-modal-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 18px; background: rgb(11 22 44 / 45%); backdrop-filter: blur(3px); }
.tui-modal { position: relative; width: min(430px, 100%); padding: 35px 30px 30px; border-radius: 13px; background: #fff; box-shadow: 0 25px 70px rgb(20 51 107 / 28%); text-align: center; }
.tui-modal-close { position: absolute; top: 10px; right: 13px; width: 30px; height: 30px; border: 0; background: transparent; color: #8190a4; cursor: pointer; font-size: 26px; }
.tui-modal h2 { margin: 0 0 12px; color: #1c2a3c; font-size: 22px; }
.tui-modal p { margin: 0 auto 16px; color: #687587; font-size: 13px; line-height: 1.55; }
.tui-modal > strong { display: block; margin-bottom: 17px; color: #ef8a2c; font-size: 25px; }
.tui-modal > div:not(.tui-modal-close) { color: #8994a4; font-size: 12px; line-height: 1.6; }
.tui-modal > button:last-child { min-width: 110px; min-height: 36px; margin-top: 22px; border: 0; border-radius: 5px; background: #176fe9; color: #fff; cursor: pointer; font-size: 13px; }

@media (max-width: 1050px) {
  .tui-logo { flex-basis: 260px; }
  .tui-logo strong { font-size: 28px; }
  .tui-nav a { padding: 0 18px; font-size: 15px; }
  .tui-layout { grid-template-columns: 320px minmax(0, 1fr); gap: 20px; }
  .tui-sidebar-list span { font-size: 16px; }
  .tui-sidebar-list button { padding: 0 17px; }
  .tui-table-head, .tui-product-row { grid-template-columns: minmax(0, 1fr) 64px 48px 48px 50px; padding: 0 15px; }
  .tui-product-name strong { font-size: 12px; }
}

@media (max-width: 760px) {
  .tui-container { width: min(100% - 24px, 560px); }
  .tui-notice .tui-container { flex-wrap: wrap; gap: 6px 9px; padding: 8px 0; font-size: 11px; }
  .tui-notice { min-height: 54px; }
  .tui-notice a { display: none; }
  .tui-header-inner { flex-wrap: wrap; gap: 14px; padding: 13px 0; }
  .tui-header { min-height: 0; }
  .tui-logo { flex-basis: auto; }
  .tui-logo img { width: 44px; height: 44px; border-radius: 10px; }
  .tui-logo strong { font-size: 22px; }
  .tui-logo small { font-size: 11px; }
  .tui-search { order: 3; flex-basis: 100%; min-height: 45px; border-width: 2px; }
  .tui-search input { padding: 0 12px; font-size: 13px; }
  .tui-search button { width: 52px; font-size: 18px; }
  .tui-header-actions { gap: 8px; margin-left: auto; font-size: 12px; }
  .tui-menu-toggle { display: block; }
  .tui-nav { min-height: 52px; }
  .tui-nav-inner { min-height: 52px; overflow-x: auto; }
  .tui-nav-left, .tui-nav-right { gap: 2px; }
  .tui-nav-right { display: none; }
  .tui-nav a { min-height: 36px; padding: 0 12px; font-size: 12px; white-space: nowrap; }
  .tui-trust { min-height: 0; }
  .tui-trust .tui-container { grid-template-columns: repeat(2, 1fr); min-height: 142px; }
  .tui-trust .tui-container > div { min-height: 70px; padding: 10px 8px; border-bottom: 1px solid #e1e7ef; }
  .tui-trust .tui-container > div:nth-child(2) { border-right: 0; }
  .tui-trust .tui-container > div:nth-child(3), .tui-trust .tui-container > div:nth-child(4) { border-bottom: 0; }
  .tui-trust .tui-container > div:nth-child(4) { border-right: 0; }
  .tui-trust > .tui-container > div > span { font-size: 22px; }
  .tui-trust strong { font-size: 12px; }
  .tui-trust small { font-size: 10px; }
  .tui-main { padding: 20px 0 45px; }
  .tui-layout { display: block; }
  .tui-sidebar { margin-bottom: 20px; }
  .tui-sidebar h2 { padding: 17px 18px; font-size: 20px; }
  .tui-sidebar-list { display: grid; max-height: 265px; grid-template-columns: repeat(2, 1fr); }
  .tui-sidebar-list button { min-height: 59px; padding: 0 11px; gap: 7px; }
  .tui-sidebar-list img { width: 31px; height: 31px; }
  .tui-sidebar-list span { font-size: 12px; line-height: 1.2; }
  .tui-sidebar-list b { font-size: 11px; }
  .tui-notice-card { min-height: 0; margin-bottom: 15px; padding: 13px 15px; font-size: 12px; line-height: 1.6; }
  .tui-notice-card strong { font-size: 11px; }
  .tui-products-heading { min-height: 56px; padding: 0 13px; }
  .tui-products-heading h2 { font-size: 18px; }
  .tui-products-heading h2 small { margin-left: 6px; font-size: 11px; }
  .tui-products-heading a { font-size: 11px; }
  .tui-table-head { display: none; }
  .tui-product-row { display: grid; grid-template-columns: minmax(0, 1fr) 60px; gap: 8px 10px; min-height: 93px; padding: 13px; }
  .tui-product-name { grid-row: span 2; }
  .tui-product-name img { width: 35px; height: 35px; }
  .tui-product-name strong { font-size: 12px; white-space: normal; }
  .tui-product-row > span { display: none; }
  .tui-price { grid-column: 2; grid-row: 1; font-size: 15px; text-align: right; }
  .tui-product-row button { grid-column: 2; grid-row: 2; min-height: 28px; }
  .tui-news-view, .tui-simple-view { min-height: 470px; padding: 24px 18px; }
  .tui-news-grid { grid-template-columns: 1fr; }
  .tui-news-grid a { min-height: 90px; }
  .tui-footer { min-height: 0; padding: 35px 0; }
  .tui-footer .tui-container { grid-template-columns: repeat(2, 1fr); gap: 25px; }
  .tui-footer-main { grid-column: 1 / -1; }
  .tui-footer .tui-logo strong { font-size: 20px; }
}

/* Match the reference site's measured desktop rhythm. */
@media (min-width: 761px) {
  .tui-notice { min-height: 33px; }
  .tui-notice .tui-container { min-height: 33px; font-size: 12px; }
  .tui-notice-badge { padding: 2px 9px; font-size: 11px; }
  .tui-header { min-height: 77px; }
  .tui-header-inner { min-height: 77px; gap: 20px; }
  .tui-logo { flex-basis: 219px; gap: 8px; }
  .tui-logo img { width: 44px; height: 44px; border-radius: 10px; }
  .tui-logo strong { font-size: 24px; }
  .tui-logo small { font-size: 13px; }
  .tui-search { flex: 0 0 600px; min-height: 42px; border-width: 2px; }
  .tui-search input { padding: 0 14px; font-size: 14px; }
  .tui-search button { width: 62px; font-size: 18px; }
  .tui-header-actions { flex: 1; justify-content: flex-end; font-size: 13px; }
  .tui-nav { min-height: 56px; }
  .tui-nav-inner { min-height: 56px; }
  .tui-nav a { min-height: 34px; padding: 0 21px; font-size: 14px; }
  .tui-nav-right a { padding: 0 10px; font-size: 13px; }
  .tui-trust { min-height: 61px; }
  .tui-trust .tui-container { min-height: 61px; }
  .tui-trust .tui-container > div { padding: 0 18px; gap: 9px; }
  .tui-trust .tui-container > div:first-child { padding-left: 5px; }
  .tui-trust .tui-container > div > span { font-size: 22px; }
  .tui-trust strong { font-size: 13px; }
  .tui-trust small { font-size: 11px; }
  .tui-main { padding: 32px 12px 80px; }
  .tui-layout { grid-template-columns: 280px minmax(0, 1fr); gap: 28px; }
  .tui-sidebar h2 { padding: 20px 22px; font-size: 20px; }
  .tui-sidebar-list { max-height: 566px; }
  .tui-sidebar-list button { min-height: 57px; padding: 0 17px; gap: 10px; }
  .tui-sidebar-list img { width: 32px; height: 32px; }
  .tui-sidebar-list span { font-size: 14px; }
  .tui-sidebar-list b { font-size: 13px; }
  .tui-notice-card { min-height: 70px; margin-bottom: 16px; padding: 13px 19px; font-size: 13px; line-height: 1.55; }
  .tui-notice-card strong { font-size: 13px; }
  .tui-products-heading { min-height: 46px; padding: 0 19px; }
  .tui-products-heading h2 { font-size: 20px; }
  .tui-products-heading h2 small { margin-left: 12px; font-size: 12px; }
  .tui-products-heading a { font-size: 12px; }
  .tui-table-head, .tui-product-row { grid-template-columns: minmax(0, 1fr) 72px 55px 55px 62px; padding: 0 19px; }
  .tui-table-head { min-height: 41px; font-size: 12px; }
  .tui-product-row { min-height: 57px; font-size: 12px; }
  .tui-product-name img { width: 32px; height: 32px; }
  .tui-product-name strong { font-size: 12px; }
  .tui-price { font-size: 14px; }
  .tui-product-row button { min-height: 29px; font-size: 12px; }
}