/* support tickets (/tickets.css): the button, the wizard dialog and the player's tickets on /tickets */
:root { --champ: #c8b48a; --cream: #ece6d8; --hair: rgba(231,236,245,.09); }
  .tk-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 22px; }
  .tk-cta .tk-open { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font: 600 15px Inter, sans-serif; cursor: pointer; transition: filter .15s, transform .15s; }
  .tk-cta .tk-open:hover { filter: brightness(1.12); transform: translateY(-1px); }
  .tk-cta .tk-open svg { width: 18px; height: 18px; }
  .tk-cta .tk-mine { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; box-sizing: border-box;
    border: 1px solid rgba(231, 236, 245, .18); border-radius: 8px; background: rgba(255, 255, 255, .05); color: #e3e6ec;
    font: 600 15px Inter, sans-serif; text-decoration: none; transition: border-color .15s, background .15s, transform .15s; }
  .tk-cta .tk-mine:hover { border-color: rgba(143, 180, 255, .55); background: rgba(47, 123, 255, .1); transform: translateY(-1px); }
  .tk-cta .tk-mine[hidden] { display: none; }
  .tk-cta .tk-mine svg { width: 18px; height: 18px; color: #9fb3d6; }
  .tk-cta .tk-sub { flex-basis: 100%; color: #8d94a3; font-size: 13px; }

  .tk-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(5, 7, 11, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: tk-fade .2s ease-out; }
  .tk-modal[hidden] { display: none; }
  @keyframes tk-fade { from { opacity: 0; } }
  .tk-box { position: relative; display: grid; grid-template-columns: 210px 1fr; width: min(860px, 100%); max-height: calc(100vh - 32px); overflow: auto; border: 1px solid rgba(231, 236, 245, .1); border-radius: 18px; background: linear-gradient(160deg, #161a23, #0f1218 60%); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); animation: tk-pop .25s cubic-bezier(.2, .8, .3, 1); }
  @keyframes tk-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
  .tk-x { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--accent); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
  .tk-side { padding: 34px 22px; border-right: 1px solid rgba(231, 236, 245, .08); background: rgba(255, 255, 255, .02); }
  .tk-side dl { margin: 0; }
  .tk-side dt { margin-top: 18px; color: #7d8492; font-size: 12px; text-align: right; }
  .tk-side dt:first-child { margin-top: 0; }
  .tk-side dd { margin: 4px 0 0; padding-bottom: 12px; border-bottom: 1px solid rgba(231, 236, 245, .1); color: var(--cream); font-size: 14px; text-align: right; overflow-wrap: anywhere; }
  .tk-steps { display: flex; justify-content: flex-end; gap: 6px; margin-top: 22px; }
  .tk-steps i { width: 22px; height: 4px; border-radius: 2px; background: rgba(231, 236, 245, .12); transition: background .2s; }
  .tk-steps i.on { background: var(--accent); }
  .tk-main { padding: 34px 30px 26px; min-width: 0; }
  .tk-main h3 { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--cream); font: 700 18px Inter, sans-serif; }
  .tk-main h3 svg { width: 20px; height: 20px; color: var(--accent-2, #8fb4ff); }
  .tk-main .tk-hint { margin: 8px 0 18px; color: #9aa1ae; font-size: 14px; line-height: 1.5; }
  .tk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
  .tk-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 92px; padding: 14px 10px; border: 1px solid rgba(231, 236, 245, .1); border-radius: 12px; background: rgba(255, 255, 255, .03); color: #d7dbe3; font: 500 14px Inter, sans-serif; text-align: center; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; animation: tk-tile-in .3s cubic-bezier(.2, .8, .3, 1) backwards; }
  .tk-tile:nth-child(2) { animation-delay: .03s; } .tk-tile:nth-child(3) { animation-delay: .06s; } .tk-tile:nth-child(4) { animation-delay: .09s; }
  .tk-tile:nth-child(5) { animation-delay: .12s; } .tk-tile:nth-child(6) { animation-delay: .15s; } .tk-tile:nth-child(7) { animation-delay: .18s; }
  @keyframes tk-tile-in { from { opacity: 0; transform: translateY(8px); } }
  .tk-tile svg { width: 22px; height: 22px; color: #aeb6c4; transition: color .15s, transform .2s; }
  .tk-tile:hover { border-color: rgba(143, 180, 255, .45); transform: translateY(-2px); }
  .tk-tile:hover svg { transform: scale(1.1); }
  .tk-tile.on { border-color: var(--accent); background: var(--accent); color: #fff; }
  .tk-tile.on svg { color: #fff; }
  .tk-tile small { color: inherit; opacity: .7; font-size: 11px; }
  .tk-f { display: block; margin-top: 14px; color: #9aa1ae; font-size: 13px; }
  .tk-f input, .tk-f select, .tk-f textarea { display: block; width: 100%; margin-top: 6px; padding: 11px 13px; border: 1px solid rgba(231, 236, 245, .12); border-radius: 9px; background: #0c0f14; color: #fff; font: 15px Inter, sans-serif; box-sizing: border-box; outline: none; }
  .tk-f textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
  .tk-f input:focus, .tk-f select:focus, .tk-f textarea:focus { border-color: var(--accent); }
  .tk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
  .tk-chips button { padding: 8px 12px; border: 1px solid rgba(231, 236, 245, .12); border-radius: 20px; background: none; color: #d7dbe3; font: 500 13px Inter, sans-serif; cursor: pointer; }
  .tk-chips button.on { border-color: var(--accent); background: rgba(47, 123, 255, .18); color: #fff; }
  .tk-shots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
  .tk-shots .s { position: relative; width: 74px; height: 74px; border-radius: 8px; overflow: hidden; background: #0c0f14 center / cover; }
  .tk-shots .s button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .7); color: #fff; cursor: pointer; }
  .tk-add { display: grid; place-items: center; width: 74px; height: 74px; border: 1px dashed rgba(231, 236, 245, .25); border-radius: 8px; color: #9aa1ae; font-size: 26px; cursor: pointer; }
  .tk-vid { margin: 8px 0; }
  .tk-vadd { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px dashed rgba(231, 236, 245, .25); border-radius: 9px; color: #d7dbe3; font: 500 14px Inter, sans-serif; cursor: pointer; transition: border-color .15s; }
  .tk-vadd:hover { border-color: var(--accent); }
  .tk-vadd svg, .tk-vfile svg { width: 18px; height: 18px; flex: none; }
  .tk-vfile { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; background: rgba(47, 123, 255, .12); color: #e3e6ec; font-size: 14px; }
  .tk-vfile span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tk-vfile em { color: #9aa1ae; font-style: normal; font-size: 13px; }
  .tk-vfile button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff; cursor: pointer; }
  .tk-note { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: rgba(200, 180, 138, .09); color: #d9cba8; font-size: 13.5px; line-height: 1.5; }
  .tk-review { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; font-size: 14px; }
  .tk-review dt { color: #7d8492; }
  .tk-review dd { margin: 0; color: #e3e6ec; white-space: pre-wrap; overflow-wrap: anywhere; }
  .tk-err { min-height: 0; margin-top: 12px; color: #ff8a80; font-size: 14px; }
  .tk-err:empty { display: none; }
  .tk-nav { display: flex; gap: 10px; margin-top: 22px; }
  .tk-nav button, .tk-nav a { height: 42px; padding: 0 20px; border: 0; border-radius: 8px; font: 700 14px Inter, sans-serif; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; }
  .tk-back { background: rgba(231, 236, 245, .08); color: #d7dbe3; }
  .tk-next { background: var(--accent); color: #fff; text-decoration: none; }
  .tk-next:disabled { opacity: .5; cursor: default; }
  .tk-done { text-align: center; padding: 20px 0 6px; }
  .tk-done .big { color: var(--cream); font: 800 26px Unbounded, sans-serif; }
  .tk-done code { color: var(--accent-2, #8fb4ff); }

  .tk-list { padding-top: 10px; padding-bottom: 40px; }
  .tk-list h2 { margin: 0 0 14px; color: var(--cream); font: 700 22px Unbounded, sans-serif; }
  .tk-item { margin-bottom: 10px; border: 1px solid var(--hair); border-radius: 14px; background: rgba(19, 22, 30, .72); overflow: hidden; }
  .tk-item > button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 18px; border: 0; background: none; color: #e3e6ec; font: 500 15px Inter, sans-serif; text-align: left; cursor: pointer; }
  .tk-item > button code { color: #8d94a3; font-size: 13px; }
  .tk-item > button .d { margin-left: auto; color: #7d8492; font-size: 13px; }
  .tk-st { padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
  .tk-st.open { background: rgba(95, 211, 141, .14); color: #7fe0a6; }
  .tk-st.wait { background: rgba(255, 196, 0, .13); color: #ffd98a; }
  .tk-st.closed { background: rgba(231, 236, 245, .08); color: #9aa1ae; }
  .tk-thread { display: none; padding: 0 18px 16px; }
  .tk-item.open .tk-thread { display: block; animation: tk-fade .2s; }
  .tk-msg { max-width: 640px; margin-top: 10px; padding: 10px 13px; border-radius: 12px; background: rgba(255, 255, 255, .05); color: #dfe3ea; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
  .tk-msg.admin { margin-left: auto; background: rgba(47, 123, 255, .16); }
  .tk-msg.system { max-width: none; background: none; color: #8d94a3; font-size: 13px; text-align: center; }
  .tk-msg .w { display: block; margin-bottom: 3px; color: #8d94a3; font-size: 12px; }
  .tk-reply { display: flex; gap: 8px; margin-top: 12px; }
  .tk-reply textarea { flex: 1; min-height: 44px; padding: 10px 12px; border: 1px solid rgba(231, 236, 245, .12); border-radius: 9px; background: #0c0f14; color: #fff; font: 14px Inter, sans-serif; resize: vertical; }
  .tk-reply button { padding: 0 16px; border: 0; border-radius: 9px; background: var(--accent); color: #fff; font: 600 14px Inter, sans-serif; cursor: pointer; }
  .tk-reply .tk-close { background: rgba(231, 236, 245, .08); color: #d7dbe3; }
  @media (max-width: 720px) {
    .tk-box { grid-template-columns: 1fr; }
    .tk-side { padding: 22px 20px 6px; border-right: 0; }
    .tk-side dl { display: none; }
    .tk-steps { justify-content: flex-start; margin-top: 0; }
    .tk-main { padding: 18px 20px 22px; }
    .tk-tiles { grid-template-columns: 1fr 1fr; }
    .tk-reply { flex-wrap: wrap; }
  }
  @media (prefers-reduced-motion: reduce) { .tk-modal, .tk-box, .tk-tile { animation: none; } }
  .tk-empty, .tk-login { padding: 30px 22px; border: 1px dashed var(--hair); border-radius: 14px; color: #9aa1ae; text-align: center; line-height: 1.6; }
  .tk-login a { color: var(--champ); font-weight: 600; }