/* Debrix — this tool's own styles. Shared styles (colours, buttons, round icon buttons, text boxes, toast…) are in /assets/style.css */

.shell { max-width: 960px; margin: 34px auto 0; display: grid; gap: 16px; text-align: left; }
.panel { padding: clamp(16px, 2.6vw, 24px); }
.app { display: grid; gap: 16px; }

/* ---------- Account ---------- */
.account { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.account .who { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.account .who img { width: 40px; height: 40px; border-radius: 12px; flex: none; }
.account .who b { display: block; font: 700 17px/1.2 var(--font-display); overflow-wrap: anywhere; }
.account .who small { display: block; font: 500 12px/1.4 var(--font-mono); color: var(--text-2); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 10px #34d399; margin-right: 6px; vertical-align: 1px; }
.dot.warn { background: #fbbf24; box-shadow: 0 0 10px #fbbf24; }
.token-form { display: flex; gap: 10px; flex: 1 1 420px; }
.token-form .pill-input { flex: 1; }
.token-note { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--text-2); }
.token-error { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--bad); }

/* ---------- Add a torrent ---------- */
.add { display: grid; gap: 12px; transition: box-shadow .2s, background .2s; }
.add.dragover { box-shadow: inset 0 0 0 2px var(--accent-bright), 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); }
.add-row { position: relative; }
.add-row .pill-input { width: 100%; padding-right: 60px; }
.round { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; padding: 0; color: var(--text-2); background: rgba(255,255,255,.08); transition: background .2s, color .2s; }
.round:hover { color: var(--text); background: rgba(255,255,255,.16); }
.round svg { width: 18px; height: 18px; }
.add-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 0 6px; }
.file-hint { font-size: 14px; color: var(--text-2); cursor: pointer; }
.file-hint u { color: var(--accent-bright); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.file-hint:hover u { color: var(--text); }
.add-status { margin: 0; font: 500 13px/1.4 var(--font-mono); color: var(--text-2); min-height: 18px; }
.add-status.ok { color: var(--ok); }
.add-status.error { color: var(--bad); }

/* ---------- Torrent list ---------- */
.list-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.list-head .pill-input { flex: 1 1 220px; padding: 12px 18px; font-size: 15px; }
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line); }
.seg button { font: 600 14px/1 var(--font-body); color: var(--text-2); cursor: pointer; padding: 9px 14px; border-radius: 999px; border: 0; background: transparent; transition: background .2s, color .2s; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { color: #fff; background: color-mix(in srgb, var(--accent) 85%, transparent); }

.torrents { display: grid; gap: 8px; }
.torrent { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px 12px;
  padding: 12px 10px 14px 18px; border-radius: 16px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.t-info { min-width: 0; grid-row: 1; }
.t-name { display: block; font-weight: 600; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.t-meta { display: block; font: 500 12px/1.5 var(--font-mono); color: var(--text-2); margin-top: 3px; }
.t-meta .done { color: var(--ok); }
.t-info { grid-column: 1; }
.badge { grid-column: 2; }
.t-actions { grid-column: 3; display: flex; gap: 6px; }
.badge { font: 500 12px/1 var(--font-mono); padding: 7px 10px; border-radius: 99px; letter-spacing: .03em; white-space: nowrap; border: 0;
  color: var(--info); background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--info-line); }
.badge.bad { color: var(--bad); background: var(--bad-bg); box-shadow: inset 0 0 0 1px var(--bad-line); }
.badge.wait { color: var(--warn); background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); }
button.badge { cursor: pointer; }
button.badge:hover { background: rgba(245,158,11,.22); }
.bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.06); }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--pink)); transition: width .4s ease; }
.torrent[data-status="downloaded"] .bar i { background: linear-gradient(90deg, #10b981, #34d399); }
.empty { text-align: center; color: var(--text-2); padding: 34px 12px; font-size: 15px; }

/* ---------- Before connecting ---------- */
.welcome { text-align: center; padding: clamp(28px, 5vw, 48px) clamp(18px, 4vw, 40px); display: grid; justify-items: center; gap: 14px; }
.welcome img { width: 64px; height: 64px; border-radius: 18px; filter: drop-shadow(0 18px 30px rgba(108,99,255,.45)); }
.welcome h2 { font-size: clamp(24px, 3vw, 32px); max-width: none; }
.welcome p { margin: 0; color: var(--text-2); max-width: 54ch; }
.steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; text-align: left; }
.steps li { padding: 16px; border-radius: 16px; background: rgba(255,255,255,.04); color: var(--text-2); font-size: 14px; }
.steps b { display: block; color: var(--text); font: 700 16px/1.3 var(--font-display); margin-bottom: 4px; }

/* ---------- Chrome extension card ---------- */
.ext { max-width: 960px; margin: 0 auto; padding: clamp(20px, 3.5vw, 32px); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ext img { width: 64px; height: 64px; border-radius: 18px; flex: none; }
.ext div { flex: 1 1 280px; }
.ext h2 { font-size: clamp(22px, 2.6vw, 28px); max-width: none; }
.ext p { margin: 6px 0 0; color: var(--text-2); font-size: 15px; }

/* ---------- Pop-up windows ---------- */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(5,4,12,.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal-box { width: min(640px, 100%); max-height: min(78vh, 720px); display: flex; flex-direction: column; overflow: hidden;
  background: color-mix(in srgb, var(--panel) 96%, transparent); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 30px 80px -20px rgba(0,0,0,.9); }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px 22px; border-bottom: 1px solid rgba(255,255,255,.08); }
.modal-title { flex: 1; min-width: 0; font: 700 17px/1.3 var(--font-display); overflow-wrap: anywhere; }
.modal-body { overflow-y: auto; padding: 10px 14px 14px; display: grid; gap: 4px; align-content: start; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.08); }
.file { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; font-size: 14px; }
.file:hover { background: rgba(255,255,255,.04); }
.file input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.file .fname { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.file .fsize { font: 500 12px/1 var(--font-mono); color: var(--text-2); white-space: nowrap; }
.file a { color: var(--text); text-decoration: none; }
.file a:hover { color: var(--accent-bright); }
.modal-note { padding: 10px; font: 500 13px/1.5 var(--font-mono); color: var(--text-2); }
.modal-note.bad { color: var(--bad); }

@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; }
  .torrent { grid-template-columns: minmax(0, 1fr) auto; }
  .t-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 640px) {
  .token-form { flex-wrap: wrap; }
  .token-form .btn { flex: 1; }
  .list-head .pill-input { flex-basis: 100%; }
  .torrent { padding-left: 14px; }
  .modal-foot .btn { flex: 1; }
}