/* ── ОБЁРТКА ── */
.tr2-wrap {
    --tr-bg:   #0d0d12;
    --tr-card: #16161f;
    --tr-inp:  #1e1e2a;
    --tr-brd:  #2a2a38;
    --tr-fg:   #f0f0f5;
    background: var(--tr-bg);
    border-radius: 24px;
    max-width: 580px;
    margin: 28px auto;
    color: var(--tr-fg);
    box-shadow: 0 0 0 1px var(--tr-brd), 0 40px 80px rgba(0,0,0,.6);
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    position: relative;
}
.tr2-wrap::before {
    content: '';
    position: absolute; top: -80px; right: -80px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(6,182,212,.08) 0%, transparent 70%);
    pointer-events: none;
}

/* ── ШАПКА ── */
.tr2-header {
    display: flex; align-items: center; gap: 16px;
    padding: 24px 28px;
    border-bottom: 1px solid var(--tr-brd);
    background: var(--tr-card);
}
.tr2-logo {
    width: 48px; height: 48px; flex-shrink: 0;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #fff;
}
.tr2-title { font-size: 18px; font-weight: 800; margin: 0 0 3px; }
.tr2-sub   { font-size: 12px; color: #888; margin: 0; }

/* ── BODY ── */
.tr2-body { padding: 24px 28px; }

/* ── ТАБЫ ── */
.tr2-tabs {
    display: flex; gap: 0;
    background: var(--tr-inp);
    border-radius: 14px; padding: 4px;
    margin-bottom: 20px;
}
.tr2-tab {
    flex: 1; border: none; background: none;
    color: #666; font-size: 14px; font-weight: 600;
    padding: 11px 16px; border-radius: 11px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    transition: all .2s;
}
.tr2-tab.active {
    background: var(--tr-card);
    color: var(--tr-fg);
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.tr2-tab:not(.active):hover { color: #aaa; }

/* ── ДРОПЗОНА ── */
.tr2-dropzone {
    border: 2px dashed var(--tr-brd);
    border-radius: 18px;
    padding: 36px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    background: var(--tr-card);
}
.tr2-dropzone:hover,
.tr2-dropzone.dragover {
    border-color: #3b82f6;
    background: rgba(59,130,246,.05);
}
.tr2-dropzone-icon {
    width: 56px; height: 56px; margin: 0 auto 16px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: #fff;
}
.tr2-dropzone-text {
    font-size: 15px; font-weight: 600; color: #ccc; margin: 0 0 12px;
    line-height: 1.5;
}
.tr2-dropzone-text span { color: #60a5fa; text-decoration: underline; text-underline-offset: 3px; }
.tr2-dropzone-meta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 12px; color: #555; margin-bottom: 8px;
}
.tr2-sep { color: #333; }
.tr2-dropzone-meta i { margin-right: 4px; }
.tr2-dropzone-forbidden {
    font-size: 12px; color: #f87171;
    background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.2);
    border-radius: 9px; padding: 7px 14px; display: inline-block;
    margin-top: 4px;
}

/* Состояние загрузки дропзоны */
.tr2-dropzone i.fa-spinner {
    font-size: 28px; color: #60a5fa; display: block; margin-bottom: 12px;
}
.tr2-dropzone p { color: #888; font-size: 14px; margin: 0; }

/* ── ТАБ ССЫЛКИ ── */
.tr2-url-row {
    display: flex; gap: 10px;
}
.tr2-url-input {
    flex: 1;
    background: var(--tr-inp); border: 1.5px solid var(--tr-brd);
    border-radius: 14px; padding: 15px 18px;
    color: #fff; font-size: 15px; outline: none; transition: .2s;
}
.tr2-url-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.tr2-btn-go {
    border: none; border-radius: 14px;
    padding: 15px 24px; font-size: 15px; font-weight: 700; color: #fff;
    cursor: pointer; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(59,130,246,.3);
    transition: .2s;
}
.tr2-btn-go:hover    { opacity: .9; transform: translateY(-1px); }
.tr2-btn-go:active   { transform: scale(.97); }
.tr2-btn-go:disabled { opacity: .5; cursor: wait; transform: none; }

/* ── РЕЗУЛЬТАТ ── */
.tr2-result-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: #4ade80; display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
}
.tr2-result-box {
    display: flex; align-items: center; gap: 0;
    background: var(--tr-inp); border: 1.5px solid rgba(74,222,128,.3);
    border-radius: 14px; overflow: hidden;
    animation: tr2-in .3s ease;
}
@keyframes tr2-in { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }
.tr2-result-box input {
    flex: 1; background: none; border: none; outline: none;
    padding: 14px 18px; color: #4ade80; font-size: 14px;
    font-family: monospace;
}
.tr2-result-box button {
    background: none; border: none; border-left: 1px solid var(--tr-brd);
    padding: 14px 18px; color: #888; cursor: pointer; font-size: 16px;
    transition: color .2s;
}
.tr2-result-box button:hover { color: #4ade80; }

@media (max-width: 520px) {
    .tr2-url-row { flex-direction: column; }
    .tr2-body { padding: 20px 18px; }
}