:root{
  --gts-accent: #6d5efc;
  --gts-bg0: #f6f7fb;
  --gts-bg1: #ffffff;
  --gts-fg0: #0f172a;
  --gts-fg1: rgba(15,23,42,.8);
  --gts-border: rgba(15,23,42,.10);
  --gts-shadow: 0 12px 28px rgba(15, 23, 42, .08);
  --gts-radius: 20px;
  --gts-radius2: 14px;
  --gts-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

html.gts-pro-dark{
  --gts-bg0: #070a12;
  --gts-bg1: rgba(255,255,255,.04);
  --gts-fg0: rgba(255,255,255,.95);
  --gts-fg1: rgba(255,255,255,.72);
  --gts-border: rgba(255,255,255,.12);
  --gts-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}

.gts-pro, .gts-pro *{ box-sizing: border-box; }
.gts-pro{ font-family: var(--gts-font); color: var(--gts-fg0); margin: 0 auto; max-width: 1200px; padding: 16px; }
.gts-pro a{ text-decoration: none; }
.gts-pro code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.gts-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 12px; border: 1px solid var(--gts-border);
  border-radius: var(--gts-radius); background: linear-gradient(180deg, var(--gts-bg1), rgba(255,255,255,.02));
  box-shadow: var(--gts-shadow);
  position: sticky; top: 10px; z-index: 40;
  backdrop-filter: blur(10px);
}

.gts-nav__brand{ display:flex; align-items:center; gap:10px; min-width: 180px; }
.gts-nav__logo{ font-size: 20px; }
.gts-nav__name{ font-weight: 700; letter-spacing: .2px; }
.gts-nav__items{ display:flex; gap:6px; flex-wrap: wrap; justify-content:flex-end; }
.gts-nav__item{
  display:flex; align-items:center; gap:8px;
  padding: 10px 12px; border-radius: 999px;
  border: 1px solid transparent;
  color: var(--gts-fg1);
  background: transparent;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.gts-nav__item:hover{ background: rgba(109,94,252,.10); border-color: rgba(109,94,252,.25); transform: translateY(-1px); }
.gts-nav__item.is-active{ color: var(--gts-fg0); background: rgba(109,94,252,.16); border-color: rgba(109,94,252,.35); }
.gts-nav__icon{ width: 18px; text-align:center; }
.gts-nav__label{ font-weight: 600; font-size: 14px; }

.gts-hero{
  margin-top: 14px;
  border-radius: var(--gts-radius);
  border: 1px solid var(--gts-border);
  background:
    radial-gradient(1000px 400px at 10% -20%, rgba(109,94,252,.22), transparent 55%),
    radial-gradient(1000px 400px at 90% 10%, rgba(56,189,248,.18), transparent 60%),
    linear-gradient(180deg, var(--gts-bg1), rgba(255,255,255,.02));
  box-shadow: var(--gts-shadow);
  padding: 20px 18px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
}
.gts-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(109,94,252,.35);
  background: rgba(109,94,252,.12);
  color: var(--gts-fg0);
  font-size: 12px; font-weight: 700;
}
.gts-title{ margin: 10px 0 6px; font-size: 32px; line-height: 1.12; letter-spacing: -.02em; }
.gts-subtitle{ margin:0; font-size: 14px; color: var(--gts-fg1); max-width: 60ch; }

.gts-hero__actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.gts-btn{
  appearance:none; border: 1px solid rgba(109,94,252,.35);
  background: linear-gradient(180deg, rgba(109,94,252,.95), rgba(109,94,252,.75));
  color: white;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  cursor:pointer;
  box-shadow: 0 10px 24px rgba(109,94,252,.18);
  transition: transform .12s ease, filter .12s ease;
  display:inline-flex; align-items:center; gap:8px;
}
.gts-btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.gts-btn--ghost{
  background: rgba(255,255,255,.06);
  color: var(--gts-fg0);
  border-color: var(--gts-border);
  box-shadow: none;
}
.gts-btn__text{ font-size: 14px; }
.gts-ico{ font-weight: 900; opacity: .95; }

.gts-section{ margin-top: 14px; }
.gts-section--hub{ padding: 4px; }

.gts-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin: 8px 0 14px; }
.gts-search{
  flex: 1;
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--gts-border);
  background: rgba(255,255,255,.06);
}
.gts-search__icon{ opacity:.85; }
.gts-input{
  width: 100%;
  border: 1px solid var(--gts-border);
  background: rgba(255,255,255,.06);
  color: var(--gts-fg0);
  border-radius: var(--gts-radius2);
  padding: 10px 12px;
  outline: none;
}
.gts-search__input{ border: none; background: transparent; padding: 0; border-radius: 0; }
.gts-input:focus{ border-color: rgba(109,94,252,.55); box-shadow: 0 0 0 3px rgba(109,94,252,.15); }
.gts-textarea{ min-height: 120px; resize: vertical; }
.gts-label{ display:block; font-size: 12px; font-weight: 800; color: var(--gts-fg1); margin-bottom: 6px; }
.gts-help{ display:block; margin-top: 6px; color: var(--gts-fg1); font-size: 12px; }
.gts-muted{ color: var(--gts-fg1); margin: 6px 0 0; font-size: 13px; }

.gts-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.gts-tab{
  border: 1px solid var(--gts-border);
  background: rgba(255,255,255,.06);
  color: var(--gts-fg1);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 800;
  cursor:pointer;
}
.gts-tab.is-active{
  background: rgba(109,94,252,.16);
  border-color: rgba(109,94,252,.35);
  color: var(--gts-fg0);
}
.gts-panes{ margin-top: 14px; }
.gts-pane{ display:none; }
.gts-pane.is-active{ display:block; }

.gts-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.gts-card{
  grid-column: span 6;
  border: 1px solid var(--gts-border);
  border-radius: var(--gts-radius);
  background: linear-gradient(180deg, var(--gts-bg1), rgba(255,255,255,.02));
  box-shadow: var(--gts-shadow);
  padding: 16px;
}
.gts-card--wide{ grid-column: span 8; }
.gts-card--sticky{ grid-column: span 4; position: sticky; top: 96px; align-self: start; }
.gts-card__head{ margin-bottom: 12px; }
.gts-card__foot{ margin-top: 12px; display:flex; gap:10px; flex-wrap:wrap; }
.gts-h2{ margin: 0; font-size: 20px; }
.gts-h3{ margin: 0; font-size: 16px; }

.gts-form{ display:grid; gap: 12px; }
.gts-form--2col{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gts-field{ display:block; }
.gts-field--full{ grid-column: 1 / -1; }
.gts-row{ display:flex; gap:10px; align-items:center; }
.gts-row--wrap{ flex-wrap:wrap; }
.gts-stack{ display:flex; flex-direction:column; gap:10px; }

.gts-divider{ height: 1px; background: var(--gts-border); grid-column: 1 / -1; margin: 6px 0; border-radius: 999px; }
.gts-check{ display:inline-flex; align-items:center; gap:8px; font-weight: 700; color: var(--gts-fg1); }
.gts-check input{ transform: translateY(1px); }

.gts-result{
  width: 100%;
  border-radius: var(--gts-radius2);
  border: 1px solid var(--gts-border);
  background: rgba(255,255,255,.06);
  padding: 12px;
  font-weight: 800;
  color: var(--gts-fg0);
}
.gts-result--inline{ display:inline-flex; width:auto; }

.gts-stats{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
.gts-stat{
  border: 1px solid var(--gts-border);
  background: rgba(255,255,255,.05);
  border-radius: var(--gts-radius2);
  padding: 10px 12px;
}
.gts-stat__k{ font-size: 12px; color: var(--gts-fg1); font-weight: 800; }
.gts-stat__v{ font-size: 16px; font-weight: 900; margin-top: 2px; }

.gts-qr-preview{ display:flex; align-items:center; justify-content:center; padding: 8px 0 2px; }
.gts-qr-canvas-wrap{
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  border: 1px dashed rgba(109,94,252,.35);
  background: rgba(255,255,255,.04);
  display:flex; align-items:center; justify-content:center;
  overflow: hidden;
}
.gts-qr-target canvas, .gts-qr-target img, .gts-qr-target svg{
  max-width: 92%;
  max-height: 92%;
  border-radius: 14px;
}
.gts-qr-logo{
  position:absolute;
  width: 22%;
  height: 22%;
  object-fit: contain;
  padding: 8px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
}

.gts-kv{ display:grid; gap:6px; }
.gts-kv__k{ font-size: 12px; font-weight: 900; color: var(--gts-fg1); }
.gts-code{ display:block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gts-footer{
  margin-top: 16px;
  border: 1px solid var(--gts-border);
  border-radius: var(--gts-radius);
  background: rgba(255,255,255,.04);
  box-shadow: var(--gts-shadow);
  padding: 12px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.gts-footer__left, .gts-footer__right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.gts-footer__brand{ font-weight: 900; }
.gts-footer__sep{ opacity: .55; }
.gts-footer__hint{ color: var(--gts-fg1); font-size: 12px; font-weight: 700; }
.gts-link{
  appearance:none; border:none; background: transparent;
  color: var(--gts-fg1); font-weight: 800; cursor: pointer;
  padding: 0; text-decoration: underline;
}

.gts-game{ display:grid; gap:12px; }
.gts-ttt{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.gts-ttt__cell{
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  border: 1px solid var(--gts-border);
  background: rgba(255,255,255,.05);
  font-size: 32px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.gts-ttt__cell:hover{ transform: translateY(-1px); border-color: rgba(109,94,252,.5); }

.gts-react{
  width: 100%;
  border-radius: var(--gts-radius);
  border: 1px solid var(--gts-border);
  background: rgba(255,255,255,.05);
  color: var(--gts-fg0);
  font-weight: 900;
  padding: 18px 16px;
  cursor:pointer;
  transition: filter .12s ease, transform .12s ease;
}
.gts-react:hover{ transform: translateY(-1px); }
.gts-react.is-waiting{ background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.35); }
.gts-react.is-go{ background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.35); }

@media (max-width: 980px){
  .gts-card{ grid-column: span 12; }
  .gts-card--wide{ grid-column: span 12; }
  .gts-card--sticky{ position: relative; top: auto; }
  .gts-hero{ flex-direction: column; align-items:flex-start; }
  .gts-hero__actions{ justify-content:flex-start; }
}

@media (max-width: 560px){
  .gts-form--2col{ grid-template-columns: 1fr; }
  .gts-title{ font-size: 26px; }
  .gts-nav__label{ display:none; }
}