.tscc-root {
  --tscc-accent: #00a4bf;
  --tscc-ink: #101416;
  position: fixed;
  inset: auto auto 18px 18px;
  z-index: 999999;
  color: var(--tscc-ink);
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

.tscc-root *, .tscc-root *::before, .tscc-root *::after { box-sizing: border-box; }
.tscc-root [hidden] { display: none !important; }
.tscc-root dialog:not([open]) { display: none; }

.tscc-root.tscc-bottom-center {
  left: 50%;
  transform: translateX(-50%);
}

.tscc-banner,
.tscc-preferences {
  width: min(440px, calc(100vw - 36px));
  border: 1px solid rgba(16, 20, 22, 0.18);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 18px 55px rgba(16, 20, 22, 0.13);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
}

.tscc-banner {
  padding: 20px;
}

.tscc-copy {
  position: relative;
  padding-left: 20px;
}

.tscc-signal {
  position: absolute;
  top: 4px;
  left: 0;
  width: 8px;
  border-radius: 0;
  height: 2px;
  background: var(--tscc-accent);
}

.tscc-banner h2,
.tscc-preferences h2 {
  margin: 0;
  color: var(--tscc-ink);
  font: 600 18px/1.35 var(--font-sans, Arial), Helvetica, sans-serif;
  letter-spacing: 0;
}

.tscc-banner p {
  margin: 8px 0 0;
  color: rgba(16, 20, 22, 0.72);
  font: 400 13px/1.5 Arial, Helvetica, sans-serif;
}

.tscc-banner a {
  color: inherit;
  text-underline-offset: 3px;
}

.tscc-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.tscc-root button {
  min-height: 44px;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font: 600 13px/1.3 var(--font-sans, Arial), Helvetica, sans-serif;
  letter-spacing: 0;
}

.tscc-link {
  padding: 0 8px;
  color: var(--tscc-ink);
  background: transparent;
  grid-column: 1 / -1;
  grid-row: 2;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.tscc-primary {
  padding: 0 18px;
  color: #fff;
  background: var(--tscc-ink);
}

.tscc-root button:focus-visible,
.tscc-root a:focus-visible,
.tscc-root input:focus-visible {
  outline: 2px solid var(--tscc-accent);
  outline-offset: 3px;
}

.tscc-preferences {
  padding: 20px;
  position: fixed;
  inset: 0;
  margin: auto;
  color: var(--tscc-ink);
}

.tscc-preferences::backdrop { background: rgb(16 20 22 / 35%); }
.tscc-preferences p { font: 400 13px/1.6 var(--font-sans, Arial), sans-serif; color: #50575a; }
.tscc-policies a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.tscc-root button:hover { filter: brightness(.9); }

.tscc-preferences-head,
.tscc-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.tscc-preferences-head {
  margin-bottom: 16px;
}

.tscc-close {
  width: 44px;
  flex-shrink: 0;
  padding: 0;
  color: var(--tscc-ink);
  background: transparent;
  font-size: 24px !important;
}

.tscc-choice {
  min-height: 54px;
  border-top: 1px solid rgba(16, 20, 22, 0.13);
  font-size: 13px;
}

.tscc-choice span {
  display: grid;
  gap: 3px;
}

.tscc-choice small {
  color: #50575a;
  line-height: 1.5;
}

.tscc-choice input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--tscc-accent);
}

.tscc-save {
  width: 100%;
  margin-top: 16px;
}

.tscc-reopen,
.tscc-inline-settings {
  padding: 0 10px;
  border: 1px solid rgba(16, 20, 22, 0.18) !important;
  color: rgba(16, 20, 22, 0.7);
  background: rgba(255, 255, 255, 0.92);
}

.tscc-inline-settings {
  min-height: 34px;
}

@media (max-width: 600px) {
  .tscc-root,
  .tscc-root.tscc-bottom-center {
    right: 12px;
    bottom: 12px;
    left: 12px;
    transform: none;
  }

  .tscc-banner,
  .tscc-preferences {
    width: 100%;
  }

  .tscc-preferences { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }

  .tscc-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .tscc-actions .tscc-primary { grid-row: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .tscc-banner:not([hidden]),
  .tscc-preferences[open] {
    animation: tscc-enter 280ms cubic-bezier(.2, .8, .2, 1) both;
  }

  @keyframes tscc-enter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}