/* ─── TradeSaber Template Library v3.4.1 ─── */
/* Color palette matched to tradesaber.com homepage */
:root {
    --tsd-bg: #0e0e1a;
    --tsd-card-bg: rgba(255,255,255,0.02);
    --tsd-card-border: rgba(255,255,255,0.08);
    --tsd-orange: #fe9334;
    --tsd-orange-hover: #ffab5e;
    --tsd-green: #4ade80;
    --tsd-green-dark: #2e7d32;
    --tsd-purple: #5865F2;
    --tsd-text: #e0e0e0;
    --tsd-text-muted: rgba(255,255,255,0.45);
    --tsd-text-faint: rgba(255,255,255,0.25);
    --tsd-divider: rgba(255,255,255,0.06);
}

.tsd-lib { max-width: 100%; margin-top: 10px; }

/* ── Notices ── */
.tsd-notice { padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 0.9em; }
.tsd-notice--success { background: rgba(74,222,128,0.08) !important; color: var(--tsd-green) !important; border: 1px solid rgba(74,222,128,0.2) !important; }
.tsd-notice--error { background: rgba(237,66,69,0.08) !important; color: #f87171 !important; border: 1px solid rgba(237,66,69,0.2) !important; }

/* ── Top bar ── */
.tsd-topbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.tsd-search { flex: 1; min-width: 180px; padding: 9px 14px; background: rgba(255,255,255,0.04) !important; border: 1px solid var(--tsd-card-border) !important; border-radius: 6px; color: var(--tsd-text) !important; font-size: 0.9em; }
.tsd-search:focus { outline: none; border-color: rgba(255,255,255,0.25) !important; }
.tsd-search::placeholder { color: var(--tsd-text-faint) !important; }
.tsd-topbar-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ── Buttons ── */
.tsd-btn { display: inline-block !important; padding: 8px 16px !important; border-radius: 5px !important; font-weight: 600 !important; font-size: 0.85em !important; text-decoration: none !important; cursor: pointer !important; border: none !important; transition: all 0.2s; white-space: nowrap; box-shadow: none !important; outline: none !important; }
.tsd-btn:hover { opacity: 0.88; text-decoration: none !important; }
.tsd-btn--primary { background: var(--tsd-orange) !important; color: #fff !important; }
.tsd-btn--primary:hover { background: var(--tsd-orange-hover) !important; }
.tsd-btn--muted { background: rgba(255,255,255,0.05) !important; color: #999 !important; }
.tsd-btn--muted:hover { background: rgba(255,255,255,0.08) !important; }
.tsd-btn--discord { background: var(--tsd-purple) !important; color: #fff !important; }
.tsd-btn--download { background: var(--tsd-green-dark) !important; color: #fff !important; padding: 4px 14px !important; font-size: 0.78em !important; border-radius: 4px !important; font-weight: 700 !important; }
.tsd-btn--download:hover { background: #388e3c !important; }

/* Text-only actions — <span>, theme-proof */
.tsd-link-btn { color: var(--tsd-orange) !important; font-size: 0.82em !important; font-weight: 600 !important; cursor: pointer !important; display: inline-block !important; margin-top: 6px !important; padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; }
.tsd-link-btn:hover { color: var(--tsd-orange-hover) !important; text-decoration: underline !important; }
.tsd-link-btn--remove { color: rgba(255,255,255,0.2) !important; font-size: 1em !important; font-weight: 400 !important; margin-top: 0 !important; padding: 0 4px !important; }
.tsd-link-btn--remove:hover { color: #f87171 !important; text-decoration: none !important; }

/* ── Banner ── */
.tsd-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; background: rgba(88,101,242,0.05); border: 1px solid rgba(88,101,242,0.12); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; font-size: 0.9em; color: #b0b0b0; }

/* ── Sections ── */
.tsd-section { margin-bottom: 28px; }
.tsd-section__title { font-size: 1.05em; color: var(--tsd-orange); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--tsd-divider); font-weight: 700; letter-spacing: 0.3px; }
.tsd-section__count { color: var(--tsd-text-muted); font-weight: 400; font-size: 0.85em; }
.tsd-section--locked { background: rgba(255,255,255,0.015); border: 1px dashed rgba(255,255,255,0.08); border-radius: 8px; padding: 28px; text-align: center; color: #888; font-size: 0.92em; }
.tsd-section--locked a { color: var(--tsd-orange); }
.tsd-empty { color: var(--tsd-text-faint); font-style: italic; padding: 16px 0; font-size: 0.9em; }

/* ── Tabs + Sort bar ── */
.tsd-tabs-bar { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; border-bottom: 2px solid var(--tsd-divider); gap: 12px; flex-wrap: wrap; }
.tsd-tabs { display: flex; gap: 0; }
.tsd-tab {
    padding: 10px 24px; font-size: 0.9em; font-weight: 600; color: var(--tsd-text-muted);
    text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s; cursor: pointer; user-select: none;
}
.tsd-tab:hover { color: var(--tsd-text); }
.tsd-tab--active { color: var(--tsd-orange) !important; border-bottom-color: var(--tsd-orange) !important; }
.tsd-sort { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; }
.tsd-sort__label { color: var(--tsd-text-faint); font-size: 0.8em; }
.tsd-sort__opt { color: var(--tsd-text-muted); font-size: 0.8em; text-decoration: none; padding: 3px 10px; border-radius: 3px; transition: all 0.15s; }
.tsd-sort__opt:hover { color: var(--tsd-text); background: rgba(255,255,255,0.04); }
.tsd-sort__opt--active { color: var(--tsd-orange) !important; background: rgba(254,147,52,0.08) !important; font-weight: 600; }

/* ── Voting — Reddit-style bar at bottom of card ── */
.tsd-vote-bar {
    display: flex; align-items: center; gap: 12px;
    margin-top: 24px; padding-top: 16px;
    border-top: 1px solid var(--tsd-divider);
}
.tsd-vote { display: inline-flex; align-items: center; gap: 0; background: rgba(255,255,255,0.04); border-radius: 20px; padding: 2px 4px; }
.tsd-vote__btn {
    cursor: pointer; font-size: 0.75em; color: rgba(255,255,255,0.25);
    padding: 4px 6px; line-height: 1; transition: color 0.1s, background 0.1s;
    user-select: none; border-radius: 50%;
}
.tsd-vote__btn:hover { color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.06); }
.tsd-vote__up.tsd-vote--active { color: var(--tsd-green) !important; }
.tsd-vote__down.tsd-vote--active { color: #f87171 !important; }
.tsd-vote__count { font-size: 0.85em; font-weight: 700; color: var(--tsd-text); min-width: 20px; text-align: center; padding: 0 2px; }
.tsd-vote--busy { opacity: 0.4; pointer-events: none; }

/* ── Template list ── */
.tsd-list { display: flex; flex-direction: column; gap: 12px; }

/* ── Card ── */
.tsd-card { border: 1px solid var(--tsd-card-border); border-radius: 8px; background: var(--tsd-card-bg); overflow: hidden; transition: border-color 0.2s; }
.tsd-card:hover { border-color: rgba(255,255,255,0.12); }
.tsd-card.open { border-color: rgba(254,147,52,0.2); }
.tsd-card--variation { margin-left: 24px; border-left: 3px solid rgba(254,147,52,0.15); background: rgba(255,255,255,0.01); }

.tsd-card__header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; cursor: pointer; gap: 12px; transition: background 0.15s; user-select: none; }
.tsd-card__header:hover { background: rgba(255,255,255,0.025); }
.tsd-card__left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.tsd-card__title { font-weight: 600; font-size: 0.95em; color: var(--tsd-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsd-card__badge { font-size: 0.7em; padding: 2px 8px; border-radius: 3px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; }
.tsd-card__badge--var { background: rgba(254,147,52,0.1); color: var(--tsd-orange); }

.tsd-card__share { background: none !important; border: none !important; cursor: pointer; font-size: 0.8em; padding: 0 2px !important; line-height: 1; opacity: 0.3; transition: opacity 0.15s; flex-shrink: 0; box-shadow: none !important; }
.tsd-card__share:hover { opacity: 0.7; }
.tsd-card__share.copied { opacity: 1; }

.tsd-card__right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tsd-card__meta { font-size: 0.8em; color: var(--tsd-text-muted); }
.tsd-card__arrow { color: rgba(255,255,255,0.2); font-size: 0.75em; transition: transform 0.2s; }
.tsd-card.open .tsd-card__arrow { transform: rotate(180deg); color: var(--tsd-orange); }

.tsd-card__body { display: none; padding: 0 16px 16px; border-top: 1px solid var(--tsd-divider); }
.tsd-card.open .tsd-card__body { display: block; }
.tsd-card__footer { display: flex; gap: 12px; font-size: 0.75em; color: rgba(255,255,255,0.2); margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--tsd-divider); }

/* ── Template Info + Gallery ── */
.tsd-info-row { display: flex; gap: 20px; margin-top: 20px; align-items: flex-start; }
.tsd-info-row__left { flex: 1; min-width: 0; }
.tsd-info-row__gallery { flex-shrink: 0; display: flex; gap: 6px; flex-wrap: wrap; max-width: 280px; }
.tsd-info-row__gallery img { height: 64px; width: auto; border-radius: 4px; object-fit: cover; border: 1px solid var(--tsd-card-border); cursor: pointer; transition: transform 0.15s, border-color 0.15s; }
.tsd-info-row__gallery img:hover { transform: scale(1.05); border-color: rgba(254,147,52,0.3); }
.tsd-info-row__gallery a { line-height: 0; }

/*
 * ══════════════════════════════════════════════════════
 *  SECTION DIVIDERS — visible line + padding + margin
 *  This creates the BIG GAP between every section.
 * ══════════════════════════════════════════════════════
 */
.tsd-block {
    margin-top: 0 !important;
    padding-top: 24px !important;
    border-top: 1px solid var(--tsd-divider) !important;
    margin-top: 24px !important;
}
/* Total visual gap = 24px margin + 1px line + 24px padding = ~49px visible separation */

.tsd-block__label { font-size: 0.75em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--tsd-orange); margin-bottom: 8px; opacity: 0.85; }
.tsd-block__hint { font-weight: 400; text-transform: none; letter-spacing: 0; font-style: italic; color: var(--tsd-text-muted); }
.tsd-block__content { color: rgba(255,255,255,0.7); font-size: 0.9em; line-height: 1.65; }
.tsd-block__content--steps ol, .tsd-block__content--steps ul { margin: 6px 0 6px 18px; color: rgba(255,255,255,0.6); }
.tsd-block__content--steps li { margin: 3px 0; }
.tsd-block--discord { padding-top: 24px !important; margin-top: 24px !important; }

.tsd-bullets { list-style: disc; margin: 0 0 0 18px; padding: 0; }
.tsd-bullets li { color: rgba(255,255,255,0.7); font-size: 0.9em; line-height: 1.7; margin: 2px 0; }

/* ── Files ── */
.tsd-file { background: rgba(0,0,0,0.2); border-radius: 6px; padding: 10px 14px; margin-bottom: 6px; border: 1px solid rgba(255,255,255,0.04); }
.tsd-file__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tsd-file__name { color: var(--tsd-text); font-weight: 600; font-size: 0.9em; }
.tsd-file__type { font-size: 0.7em; color: var(--tsd-text-muted); background: rgba(255,255,255,0.05); padding: 2px 8px; border-radius: 3px; }
.tsd-file__spacer { flex: 1; }

.tsd-file__install-btn { background: none !important; border: none !important; color: rgba(255,255,255,0.28) !important; font-size: 0.76em !important; cursor: pointer; padding: 2px 0 !important; white-space: nowrap; transition: color 0.15s; font-family: inherit; box-shadow: none !important; }
.tsd-file__install-btn:hover { color: rgba(255,255,255,0.5) !important; }
.tsd-file.show-install .tsd-file__install-btn { color: var(--tsd-orange) !important; }

.tsd-file__install-details { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--tsd-divider); }
.tsd-file.show-install .tsd-file__install-details { display: block; }
.tsd-file__install-text { color: var(--tsd-text-muted); font-size: 0.84em; margin: 0 0 6px; line-height: 1.5; }
.tsd-file__install-video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 6px; background: rgba(0,0,0,0.3); max-width: 400px; margin-top: 6px; }
.tsd-file__install-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* ── Videos ── */
.tsd-videos { display: flex; flex-wrap: wrap; gap: 10px; }
.tsd-video { flex: 1; min-width: 250px; max-width: 400px; }
.tsd-video__label { font-size: 0.82em; color: var(--tsd-text-muted); margin-bottom: 4px; }
.tsd-video__frame { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 6px; background: rgba(0,0,0,0.25); }
.tsd-video__frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.tsd-muted { color: var(--tsd-text-muted) !important; font-size: 0.85em; }
.tsd-muted a { color: var(--tsd-purple); }
.tsd-req { color: #f87171 !important; }
.tsd-tier-note { background: rgba(74,222,128,0.05); border: 1px solid rgba(74,222,128,0.12); border-radius: 6px; padding: 12px 16px; margin-top: 8px; color: rgba(255,255,255,0.6); font-size: 0.85em; line-height: 1.65; }

/* ══════════════════════════════════════════════════
   SUBMISSION FORM
   ══════════════════════════════════════════════════ */
.tsd-submit { max-width: 660px; }
.tsd-submit__guidelines { background: rgba(254,147,52,0.04) !important; border: 1px solid rgba(254,147,52,0.12) !important; border-radius: 6px; padding: 14px 16px; margin-bottom: 24px; color: rgba(255,255,255,0.6) !important; font-size: 0.88em; line-height: 1.65; }
.tsd-submit__guidelines strong { color: var(--tsd-orange); }

.tsd-form__section { margin-bottom: 20px !important; padding: 0 !important; }
.tsd-form__section:last-child { margin-bottom: 0 !important; }

/* Form group — card-like panels */
.tsd-form__group {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 8px !important;
    padding: 20px 20px 16px !important;
    margin-bottom: 20px !important;
}
.tsd-form__group-title {
    font-size: 0.78em !important; font-weight: 700 !important; text-transform: uppercase !important;
    letter-spacing: 0.8px !important; color: var(--tsd-orange) !important;
    margin: 0 0 16px !important; padding-bottom: 10px !important;
    border-bottom: 1px solid var(--tsd-divider) !important;
}
.tsd-form__label { display: block !important; color: rgba(255,255,255,0.55) !important; font-weight: 600 !important; font-size: 0.8em !important; margin: 0 0 6px !important; padding: 0 !important; text-transform: uppercase !important; letter-spacing: 0.4px; background: none !important; border: none !important; }

.tsd-form__input, .tsd-form .tsd-form__input, .tsd-form__group input[type="text"], .tsd-form__group textarea {
    width: 100% !important; padding: 10px 12px !important; box-sizing: border-box !important;
    background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 5px !important; color: var(--tsd-text) !important; font-size: 0.9em !important;
    font-family: inherit !important; box-shadow: none !important; outline: none !important;
    line-height: 1.4 !important; height: auto !important; transition: border-color 0.2s;
}
.tsd-form__input:focus { border-color: rgba(254,147,52,0.3) !important; }
.tsd-form__input::placeholder { color: var(--tsd-text-faint) !important; }
textarea.tsd-form__input { resize: vertical; min-height: 80px !important; }
.tsd-form__row { display: flex; gap: 12px; }
.tsd-form__col { flex: 1; }

/* Select dropdowns — ALL uniform dark */
.tsd-form__select, .tsd-form select.tsd-form__select, select.tsd-form__select,
.tsd-form__group select, .tsd-form select, .tsd-submit select {
    display: block !important; padding: 11px 40px 11px 12px !important; width: 100% !important; box-sizing: border-box !important;
    background-color: #12121f !important; color: var(--tsd-text) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 5px !important;
    font-size: 0.88em !important; font-family: inherit !important; cursor: pointer !important;
    -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 10px 6px !important;
    line-height: 1.3 !important; height: auto !important; box-shadow: none !important; outline: none !important;
    text-overflow: ellipsis !important; overflow: hidden !important; white-space: nowrap !important; transition: border-color 0.2s;
}
.tsd-form__select:focus, .tsd-form select:focus, .tsd-submit select:focus { border-color: rgba(254,147,52,0.3) !important; }
.tsd-form__select option, .tsd-form select option, .tsd-submit select option { background: #12121f !important; color: var(--tsd-text) !important; }
.tsd-form__select option[value=""], .tsd-form select option[value=""] { color: rgba(255,255,255,0.3) !important; }
.tsd-form__select--type, select.tsd-form__select--type { min-width: 220px !important; width: auto !important; }

.tsd-upload-row { display: flex !important; gap: 10px !important; margin-bottom: 8px !important; align-items: center !important; flex-wrap: wrap !important; }
.tsd-form__file, .tsd-form input[type="file"].tsd-form__file, .tsd-form__group input[type="file"] {
    flex: 1 !important; min-width: 180px !important; padding: 8px !important; font-size: 0.85em !important;
    color: #aaa !important; background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 5px !important;
    box-shadow: none !important; height: auto !important;
}
.tsd-upload-row .tsd-form__select, .tsd-upload-row select.tsd-form__select { width: auto !important; flex: 0 0 auto !important; min-width: 220px !important; }
.tsd-form__actions { display: flex; gap: 10px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--tsd-divider); }

/* ── Responsive ── */
@media (max-width: 600px) {
    .tsd-topbar { flex-direction: column; }
    .tsd-topbar-actions { width: 100%; }
    .tsd-topbar-actions .tsd-btn { flex: 1; text-align: center; }
    .tsd-card__header { flex-direction: column; align-items: flex-start; }
    .tsd-card__right { width: 100%; justify-content: space-between; }
    .tsd-card--variation { margin-left: 12px; }
    .tsd-form__row { flex-direction: column; }
    .tsd-upload-row { flex-direction: column !important; }
    .tsd-upload-row .tsd-form__select { width: 100% !important; min-width: 0 !important; }
    .tsd-banner { flex-direction: column; text-align: center; }
    .tsd-info-row { flex-direction: column; }
    .tsd-info-row__gallery { max-width: 100%; }
}