/* bounty dashboard: the ticket panel editor and its Discord look-alike preview. */

.btn.btn-danger { background: linear-gradient(180deg, #3a1618, #2a1012) padding-box, linear-gradient(180deg, rgba(248,113,113,.45), rgba(248,113,113,.12)) border-box; border: 1px solid transparent; color: #fecaca; box-shadow: none; }
.btn.btn-danger:hover { background: linear-gradient(180deg, #4a1b1e, #331315) padding-box, linear-gradient(180deg, rgba(248,113,113,.7), rgba(248,113,113,.2)) border-box; }
.modal-ic.bad { color: #fca5a5; }

/* ------------------------------------------------------------ panel list */
.tk-h { margin: 26px 0 12px; }
.tk-panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.tk-panel { display: flex; flex-direction: column; overflow: hidden; padding: 0; animation: tk-rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
.tk-mini { position: relative; height: 210px; overflow: hidden; padding: 16px 16px 0; background: #313338; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000000 70%, transparent); mask-image: linear-gradient(180deg, #000000 70%, transparent); }
.tk-mini .dc-msg { transform: scale(.82); transform-origin: top left; width: 122%; }
.tk-meta { display: flex; align-items: center; gap: 12px; padding: 14px 16px 16px; border-top: 1px solid #151923; }
.tk-meta .grow { min-width: 0; flex: 1; }
.tk-meta .grow b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-meta .grow span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.tk-new { display: grid; place-items: center; align-content: center; gap: 6px; min-height: 262px; text-align: center; color: var(--muted); cursor: pointer; transition: color .2s, transform .3s var(--ease); }
.tk-new:hover { color: #fff; transform: translateY(-2px); }
.tk-new b { color: #e3eafa; font-size: 15px; }
.tk-new span:last-child { font-size: 12.5px; max-width: 220px; }
.tk-plus { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; margin-bottom: 6px; font-size: 16px; color: #fff; border: 1px solid transparent;
  background: linear-gradient(180deg, #1a1e26, #11141b) padding-box, var(--edge-hi) border-box; transition: transform .35s var(--spring, cubic-bezier(.34, 1.4, .64, 1)); }
.tk-new:hover .tk-plus { transform: rotate(90deg) scale(1.06); }
@keyframes tk-rise { from { opacity: 0; transform: translateY(12px); filter: blur(3px); } }

/* ------------------------------------------------------------ editor layout */
.tk-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -8px 0 18px; }
.tk-back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); padding: 6px 10px 6px 6px; border-radius: 9px; transition: color .15s, background .15s; }
.tk-back:hover { color: #fff; background: #10131a; }
.tk-actions { display: flex; gap: 8px; }
.tk-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 430px); gap: 20px; align-items: start; }
.tk-tabs { display: flex; flex-wrap: wrap; margin-bottom: 14px; }
.tk-tabs button { display: inline-flex; align-items: center; gap: 7px; }
.tk-tabs button i { font-size: 12px; opacity: .8; }
.tk-form { display: grid; gap: 14px; }
.tk-form.swap > * { animation: tk-rise .42s var(--ease) both; }
.tk-form.swap > *:nth-child(2) { animation-delay: 50ms; }
.tk-form.swap > *:nth-child(3) { animation-delay: 100ms; }
.tk-card, .tk-note { margin: 0; }
.tk-right { position: sticky; top: 80px; }
.tk-preview { padding: 0; overflow: hidden; }
.tk-preview-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #151923; font-size: 12.5px; color: var(--muted); }
.tk-live { display: inline-flex; align-items: center; gap: 8px; color: #e3eafa; font-weight: 600; }
.tk-live .d { width: 7px; height: 7px; border-radius: 99px; background: var(--good); animation: tk-live 2s infinite; }
@keyframes tk-live { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); } }
.tk-discord { background: #313338; padding: 18px 16px 22px; max-height: calc(100vh - 170px); overflow-y: auto; }
@media (max-width: 1100px) { .tk-editor { grid-template-columns: 1fr; } .tk-right { position: static; order: -1; } }

.tk-styles { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-style { cursor: pointer; opacity: .55; outline: 2px solid transparent; outline-offset: 2px; transition: opacity .15s, outline-color .15s, transform .2s var(--spring, cubic-bezier(.34, 1.4, .64, 1)); }
.tk-style:hover { opacity: .9; }
.tk-style.on { opacity: 1; outline-color: rgba(255, 255, 255, .55); transform: translateY(-1px); }

.tk-topics { display: grid; gap: 8px; }
.tk-topic { border-radius: 14px; border: 1px solid transparent; background: linear-gradient(180deg, #10131a, #0d1017) padding-box, var(--edge) border-box; overflow: hidden; }
.tk-topic.open { background: linear-gradient(180deg, #11151d, #0e1118) padding-box, var(--edge-hi) border-box; }
.tk-topic-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.tk-topic-head .grow { min-width: 0; flex: 1; }
.tk-topic-head .grow b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-topic-head .grow span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-topic-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: linear-gradient(180deg, #151b27, #11141b); color: #bec8de; font-size: 12px; }
.tk-caret { color: #6e7b95; font-size: 11px; margin-left: 4px; transition: transform .25s var(--ease); }
.tk-topic.open .tk-caret { transform: rotate(180deg); }
.tk-topic .icon-btn:disabled { opacity: .25; pointer-events: none; }
.tk-topic-body { padding: 4px 14px 14px; border-top: 1px solid #161a25; animation: tk-rise .35s var(--ease) both; }
.tk-add { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 12px; color: var(--dim); }
.tk-links { display: grid; gap: 8px; }
.tk-link { display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1.6fr) 32px; gap: 8px; align-items: center; }
.tk-link .input { width: 100%; }
@media (max-width: 640px) { .tk-link { grid-template-columns: 60px 1fr 32px; } .tk-link .input:nth-child(3) { grid-column: 1 / -2; grid-row: 2; } }
.tk-empty { padding: 18px 0 6px; text-align: center; color: var(--dim); font-size: 13px; }
.tk-danger h3 { color: #fca5a5; }

/* ------------------------------------------------------------ Discord look-alike */
.dc-msg { font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #dbdee1; font-size: 15px; line-height: 1.375; }
.dc-author { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dc-av { width: 36px; height: 36px; border-radius: 50%; object-fit: contain; background: #1e1f22; }
.dc-author b { color: #f2f3f5; font-weight: 600; font-size: 15px; }
.dc-app { display: inline-flex; align-items: center; gap: 3px; background: #5865f2; color: #fff; font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 4px; line-height: 15px; }
.dc-app i { font-size: 8px; }
.dc-time { font-size: 12px; color: #949ba4; }
.dc-content { margin: 0 0 6px 44px; display: flex; gap: 4px; flex-wrap: wrap; }
.dc-mention { background: rgba(88, 101, 242, .3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; font-weight: 500; }
.dc-mention.role { background: color-mix(in srgb, var(--rc) 22%, transparent); color: var(--rc); }
.dc-card { margin-left: 44px; max-width: 480px; background: #2b2d31; border: 1px solid #1b1f27; border-left: 4px solid var(--accent); border-radius: 8px; padding: 14px 14px 12px; display: grid; gap: 10px; }
.dc-text { min-width: 0; overflow-wrap: anywhere; }
.dc-text .dc-h1 { font-size: 24px; font-weight: 700; color: #f2f3f5; line-height: 1.25; }
.dc-text .dc-h2 { font-size: 20px; font-weight: 700; color: #f2f3f5; line-height: 1.25; margin-bottom: 4px; }
.dc-text .dc-h3 { font-size: 16px; font-weight: 700; color: #f2f3f5; }
.dc-text .dc-sub { font-size: 12.5px; color: #949ba4; }
.dc-text .dc-quote { border-left: 4px solid #4e5058; padding-left: 10px; }
.dc-text code { background: #1e1f22; border-radius: 4px; padding: 0 4px; font-size: 13px; }
.dc-text a { color: #00a8fc; }
.dc-emoji { width: 1.2em; height: 1.2em; vertical-align: -.25em; object-fit: contain; }
.dc-section { display: grid; grid-template-columns: minmax(0, 1fr) 85px; gap: 14px; align-items: start; }
.dc-thumb { width: 85px; height: 85px; border-radius: 8px; object-fit: cover; background: #1e1f22; }
.dc-banner { width: 100%; max-height: 220px; border-radius: 8px; object-fit: cover; background: #1e1f22; }
.dc-banner.broken, .dc-thumb.broken { opacity: .35; min-height: 60px; outline: 1px dashed #f87171; }
.dc-sep { border: 0; border-top: 1px solid #3f4147; margin: 0; }
.dc-row { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-msg > .dc-row { margin: 8px 0 0 44px; }
.dc-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 16px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #fff; white-space: nowrap; }
.dc-btn i { font-size: 11px; }
.dc-btn.primary { background: #5865f2; }
.dc-btn.secondary, .dc-btn.link { background: #4e5058; }
.dc-btn.success { background: #248046; }
.dc-btn.danger { background: #da373c; }
.dc-btn.link i { opacity: .8; }
.dc-uni { font-size: 16px; line-height: 1; }
.dc-select { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 12px; border-radius: 8px; background: #1e1f22; border: 1px solid #1e1f22; color: #949ba4; font-size: 14px; }
.dc-select i { color: #b5bac1; font-size: 12px; }
.dc-menu { margin: 6px 0 0 44px; max-width: 480px; background: #2b2d31; border: 1px solid #1b1f27; border-radius: 8px; padding: 4px; display: grid; gap: 2px; }
.dc-opt { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 6px; font-size: 14px; }
.dc-opt:first-child { background: #35373c; }
.dc-opt b { display: block; color: #f2f3f5; font-weight: 500; }
.dc-opt span { display: block; color: #b5bac1; font-size: 12.5px; }
.dc-opt > i { color: #949ba4; font-size: 11px; width: 18px; text-align: center; }
.dc-opt.more { color: #949ba4; font-size: 12.5px; justify-content: center; }
.dc-fields { display: flex; gap: 28px; font-size: 14px; }
.dc-fields b { display: block; color: #f2f3f5; font-size: 13px; margin-bottom: 2px; }

@media (prefers-reduced-motion: reduce) {
  .tk-panel, .tk-form.swap > *, .tk-topic-body, .tk-live .d { animation: none !important; }
}