/* The torrent client window (docs/62 §3.3): a compact app in the Console set — flat, readable, the essentials glow. */
body { background: var(--nx-void) url(/static/img/background.png) center top / cover fixed; }
.cl { min-height: 100vh; display: flex; flex-direction: column; background: rgba(5, 6, 36, .82); }
.cl-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 8px 16px; background: rgba(8, 12, 24, .96); border-bottom: 2px solid var(--nx-cyan); box-shadow: 0 0 18px rgba(11, 222, 251, .35); }
.cl-brand { font: 22px var(--nx-font-display); letter-spacing: .06em; text-decoration: none; background: var(--nx-grad-logo); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(1px 1px 0 #040212); }
.cl-name { font: 600 12px var(--nx-font-console); letter-spacing: .3em; color: var(--nx-acid-text); }
.cl-device { font: 600 11px var(--nx-font-console); letter-spacing: .06em; color: var(--nx-text); background: var(--nx-ink); border: 1px solid var(--nx-acid); border-radius: 12px; padding: 4px 10px; cursor: pointer; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-device:hover { box-shadow: 0 0 10px rgba(206, 244, 27, .5); }
.cl-status { margin-left: auto; font: 12px var(--nx-font-console); color: var(--nx-text-dim); }
.cl-status.on { color: var(--nx-ok); text-shadow: 0 0 8px rgba(61, 255, 138, .5); }
.cl-account { font: 600 11px var(--nx-font-console); letter-spacing: .06em; color: var(--nx-text); text-decoration: none; border: 1px solid var(--nx-text-dim); padding: 5px 9px; border-radius: 4px; }

.cl-panel, #cl-main { width: 100%; max-width: 980px; margin: 0 auto; padding: 18px 16px 40px; }
.cl-panel h1 { font: 28px var(--nx-font-display); letter-spacing: .04em; text-transform: uppercase; margin: 6px 0 12px; text-shadow: 0 0 10px rgba(11, 222, 251, .5); }
.cl-panel p { margin: 0 0 12px; }
.cl .dim { color: var(--nx-text-dim); }
.cl-rows { list-style: none; margin: 0 0 14px; padding: 0; }
.cl-rows > li { padding: 8px 0; border-bottom: 1px solid rgba(11, 222, 251, .2); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.cl-panel .cl-rows > li { display: block; }
.cl .nx-btn.small { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 16px; }
.cl .nx-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.cl-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.cl-add input:not([type=checkbox]) { flex: 1; min-width: 200px; height: 40px; border-radius: 20px; border: 1px solid var(--nx-cyan); background: var(--nx-ink); color: var(--nx-text); padding: 0 14px; font: 14px var(--nx-font-console); }
.cl-sync { font: 12px var(--nx-font-console); color: var(--nx-text-dim); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.cl-note { font: 13px var(--nx-font-console); border: 1px solid var(--nx-ok); color: var(--nx-ok); border-radius: 6px; padding: 8px 12px; margin: 0 0 10px; }
.cl-note.bad { border-color: var(--nx-warn); color: var(--nx-warn); }
.cl-session { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; font-size: 13px; }

.cl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cl-row { border: 2px solid rgba(11, 222, 251, .4); border-radius: 10px; background: rgba(8, 12, 24, .85); padding: 10px 12px; }
.cl-row.on { border-color: var(--nx-ok); box-shadow: 0 0 14px rgba(61, 255, 138, .25); }
.cl-row.elsewhere { border-style: dashed; opacity: .9; }
.cl-row.elsewhere .cl-bar, .cl-row.removed .cl-bar { display: none; }
.cl-row.removed { border-color: var(--nx-danger); }
.cl-row.flash { animation: clFlash 1.6s ease-out; }
@keyframes clFlash { from { box-shadow: 0 0 0 3px var(--nx-acid), 0 0 24px var(--nx-acid); } to { box-shadow: none; } }
.cl-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cl-row-name { font: 600 15px var(--nx-font-body); color: var(--nx-text); word-break: break-word; }
.cl-row-size { font: 12px var(--nx-font-console); color: var(--nx-text-dim); }
.cl-state { margin-left: auto; font: 600 11px var(--nx-font-console); letter-spacing: .08em; color: var(--nx-acid-text); }
.cl-row.elsewhere .cl-state { color: var(--nx-text-dim); }
.cl-devs { display: inline-flex; flex-wrap: wrap; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; }
.cl-dev { font: 600 10px var(--nx-font-console); letter-spacing: .05em; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--nx-ice); color: var(--nx-ice); background: rgba(95, 223, 246, .08); white-space: nowrap; }
.cl-dev.here { border-color: var(--nx-acid); color: var(--nx-acid-text); background: rgba(206, 244, 27, .08); }
.cl-dev.all { border-color: var(--nx-magenta); color: #ff9cff; }
.cl-dev.none { border-color: var(--nx-text-dim); color: var(--nx-text-dim); }
.cl-dev.asked { border-style: dashed; border-color: var(--nx-warn); color: var(--nx-warn); }
.cl-show-all { margin-left: auto; }
.cl-dlg-acts { display: inline-flex; gap: 6px; margin-left: auto; }
.cl-devs:hover .cl-dev, .cl-devs:focus-visible .cl-dev { box-shadow: 0 0 8px currentColor; }
.cl-bar { display: block; width: 100%; height: 8px; margin: 8px 0 4px; appearance: none; -webkit-appearance: none; border: 1px solid rgba(11, 222, 251, .5); border-radius: 4px; background: var(--nx-void); overflow: hidden; }
.cl-bar::-webkit-progress-bar { background: var(--nx-void); }
.cl-bar::-webkit-progress-value { background: linear-gradient(90deg, var(--nx-cyan), var(--nx-acid)); }
.cl-bar::-moz-progress-bar { background: linear-gradient(90deg, var(--nx-cyan), var(--nx-acid)); }
.cl-stats { font: 12px var(--nx-font-console); color: var(--nx-text-dim); }
.cl-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.cl-acts [data-act="remove"] { margin-left: auto; }
.cl-removed { font: 12px var(--nx-font-console); color: var(--nx-danger); }
.cl-files { list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px dotted rgba(11, 222, 251, .35); max-height: 46vh; overflow: auto; }
.cl-file { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 4px 0; border-bottom: 1px dotted rgba(255, 255, 255, .08); font-size: 13px; }
.cl-file-name { flex: 1; min-width: 160px; word-break: break-all; }
.cl-file-size, .cl-file-pct { font: 12px var(--nx-font-console); color: var(--nx-text-dim); min-width: 56px; text-align: right; }
.cl-file.exe .cl-file-name { color: #ffe58a; }
.tr-badge { display: inline-block; font: 600 10px var(--nx-font-console); letter-spacing: .08em; padding: 1px 6px; border-radius: 9px; border: 1px solid var(--nx-text-dim); color: var(--nx-text-dim); }
.tr-badge.warn { border-color: #ffd43b; color: #ffd43b; }

/* The viewer: covers the window; the list keeps running underneath. */
.cl-viewer { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; background: #03040f; }
.cl-viewer[hidden] { display: none; }
.cl-viewer > header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; background: var(--nx-grad-chrome); color: var(--nx-void); }
.cl-viewer-title { flex: 1; min-width: 120px; font: 600 12px var(--nx-font-console); letter-spacing: .08em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-viewer-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cl-viewer-tools .nx-btn[aria-pressed="true"] { border-color: var(--nx-acid); box-shadow: 0 0 10px var(--nx-acid); }
.cl-count { font: 600 12px var(--nx-font-console); color: var(--nx-void); padding: 0 4px; }
.cl-select { max-width: 40vw; height: 32px; border-radius: 16px; border: 1px solid var(--nx-void); background: var(--nx-ink); color: var(--nx-text); padding: 0 10px; font: 13px var(--nx-font-body); }
.cl-viewer-body { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
body.cl-viewing { overflow: hidden; }
.cl-media { width: 100%; max-width: 1200px; max-height: calc(100vh - 120px); background: #000; border: 1px solid rgba(11, 222, 251, .4); }
audio.cl-media { max-width: 640px; background: none; border: 0; }
.cl-say { font: 13px var(--nx-font-console); color: var(--nx-text); max-width: 760px; text-align: center; margin: 0; }
.cl-say.warn { color: var(--nx-warn); }
.cl-waitbox { width: min(520px, 90%); margin: 12vh auto 0; text-align: center; }
.cl-wait { font: 13px var(--nx-font-console); margin: 0 0 8px; }
.cl-advisory { max-width: 640px; margin: 10vh auto 0; border: 2px solid #ffd43b; border-radius: 10px; padding: 16px; color: #ffe58a; background: rgba(40, 32, 0, .4); }
.cl-pdf { width: 100%; max-width: 1100px; flex: 1; min-height: 70vh; border: 1px solid rgba(11, 222, 251, .4); background: #fff; }
.cl-text { width: 100%; max-width: 1000px; margin: 0; white-space: pre-wrap; word-break: break-word; font: 13px/1.5 var(--nx-font-console); color: var(--nx-text); background: var(--nx-ink); border: 1px solid rgba(11, 222, 251, .3); padding: 12px; }
.cl-nfo { white-space: pre; overflow-x: auto; word-break: normal; font: 14px/1 ui-monospace, 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', 'Liberation Mono', monospace; color: #c8d0ff; background: #000; }
.cl-ziplist { width: 100%; max-width: 900px; border-collapse: collapse; font-size: 13px; }
.cl-ziplist th, .cl-ziplist td { text-align: left; padding: 3px 8px; border-bottom: 1px dotted rgba(255, 255, 255, .1); }
.cl-ziplist td:first-child { word-break: break-all; }
.cl-ziplist td:last-child { font: 12px var(--nx-font-console); color: var(--nx-text-dim); white-space: nowrap; text-align: right; }
.cl-ziplist tr.exe td:first-child { color: #ffe58a; }
/* Gallery */
.cl-gal-main { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.cl-gal-img { max-width: 100%; max-height: calc(100vh - 230px); object-fit: contain; background: repeating-conic-gradient(#111 0 25%, #1a1a1a 0 50%) 0 0 / 20px 20px; }
.cl-gal-cap { font: 12px var(--nx-font-console); color: var(--nx-text-dim); text-align: center; word-break: break-all; }
.cl-gal-strip { list-style: none; margin: 0; padding: 4px; display: flex; gap: 6px; overflow-x: auto; width: 100%; max-width: 1200px; }
.cl-thumb { width: 84px; height: 84px; padding: 0; border: 2px solid transparent; border-radius: 6px; background: var(--nx-ink); cursor: pointer; overflow: hidden; flex: none; }
.cl-thumb.on { border-color: var(--nx-acid); }
.cl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Comics */
.cl-comic { display: flex; justify-content: center; gap: 4px; width: 100%; cursor: pointer; }
.cl-comic img { max-width: 100%; max-height: calc(100vh - 90px); object-fit: contain; background: #fff; }
.cl-comic.spread img { max-width: 50%; }
/* Books: our typography, never the book's */
.cl-book { width: 100%; max-width: 720px; background: #f6f1e4; color: #1d1a14; padding: 28px 36px; border-radius: 4px; font: 18px/1.6 Georgia, 'Times New Roman', serif; }
.cl-book img { max-width: 100%; height: auto; display: block; margin: 10px auto; }
.cl-book a { color: #1f4fbf; }
.cl-book h1, .cl-book h2, .cl-book h3 { font-family: Georgia, serif; line-height: 1.25; }
.cl-book pre { white-space: pre-wrap; }
.cl-book table { border-collapse: collapse; } .cl-book td, .cl-book th { border: 1px solid #ccc; padding: 4px 6px; }

/* Dialogs: where a torrent downloads; this device's name */
.cl-dialog { max-width: min(560px, 94vw); width: 100%; border: 3px solid var(--nx-cyan); border-radius: 10px; background: var(--nx-ink); color: var(--nx-text); padding: 16px 18px; box-shadow: var(--nx-glow-cyan); }
.cl-dialog::backdrop { background: rgba(3, 4, 18, .75); }
.cl-dialog h2 { font: 22px var(--nx-font-display); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 6px; }
.cl-dlg-name { font-weight: 600; word-break: break-word; margin: 0 0 10px; }
.cl-dialog .cl-rows > li .nx-btn { margin-left: auto; }
.cl-dialog .nx-field input { background: var(--nx-void); color: var(--nx-text); border: 1px solid var(--nx-cyan); border-radius: 6px; padding: 10px 12px; font: 15px var(--nx-font-body); }

/* The ⋯ menu (SharedSwarm lives here, out of the way) */
.cl-menu-wrap { position: relative; }
.cl-menu { width: 32px; height: 28px; border-radius: 14px; border: 1px solid var(--nx-text-dim); background: none; color: var(--nx-text); font: 600 16px/1 var(--nx-font-console); cursor: pointer; }
.cl-menu:hover, .cl-menu[aria-expanded="true"] { border-color: var(--nx-cyan); box-shadow: 0 0 8px rgba(11, 222, 251, .5); }
.cl-menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 6; min-width: 180px; display: flex; flex-direction: column; padding: 4px; border: 1px solid var(--nx-cyan); border-radius: 8px; background: var(--nx-ink); box-shadow: 0 6px 24px rgba(0, 0, 0, .6); }
.cl-menu-list[hidden] { display: none; }
.cl-menu-list button { text-align: left; background: none; border: 0; border-radius: 6px; padding: 8px 10px; color: var(--nx-text); font: 600 12px var(--nx-font-console); letter-spacing: .06em; cursor: pointer; }
.cl-menu-list button:hover, .cl-menu-list button:focus-visible { background: rgba(11, 222, 251, .12); outline: none; }

/* Tabs: Downloads and the Media Server stay apart */
.cl-tabs { display: flex; gap: 4px; margin: 0 0 12px; border-bottom: 2px solid rgba(11, 222, 251, .35); }
.cl-tabs [role="tab"] { background: none; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; padding: 8px 14px; margin-bottom: -2px; color: var(--nx-text-dim); font: 600 12px var(--nx-font-console); letter-spacing: .12em; cursor: pointer; }
.cl-tabs [role="tab"]:hover { color: var(--nx-text); }
.cl-tabs [role="tab"][aria-selected="true"] { color: var(--nx-acid-text); border-color: rgba(11, 222, 251, .5); border-bottom: 2px solid var(--nx-ink); background: var(--nx-ink); }
.cl-tabs [role="tab"]:focus-visible { outline: 2px solid var(--nx-cyan); outline-offset: -2px; }

/* The Media Server and the Nuxtre player */
.ms-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 6px; }
.ms-head h2 { font: 20px var(--nx-font-display); letter-spacing: .04em; text-transform: uppercase; margin: 0; }
.ms-head label.nx-btn { display: inline-flex; align-items: center; cursor: pointer; }
.ms-head label.nx-btn:focus-visible, .ms-head:focus-within label.nx-btn { outline: 2px solid var(--nx-acid); outline-offset: 2px; }
#cl-pane-ms > .dim { font-size: 13px; margin: 0 0 12px; }
.ms-player { border: 2px solid var(--nx-magenta); border-radius: 10px; background: rgba(8, 12, 24, .92); padding: 10px 12px; margin: 0 0 16px; box-shadow: 0 0 16px rgba(242, 9, 243, .25); }
.ms-player[hidden] { display: none; }
.ms-player > header { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 0 0 8px; }
.ms-player > header b { font: 600 16px var(--nx-font-body); word-break: break-word; }
.ms-player > .dim { font-size: 12px; margin: 8px 0 0; }
.ms-stage { display: flex; justify-content: center; }
.ms-stage:empty { display: none; }
.ms-stage .cl-media { max-height: 70vh; }
.ms-row .tr-badge { border-color: var(--nx-ice); color: var(--nx-ice); }
.ms-code { width: 100%; box-sizing: border-box; font: 12px/1.4 var(--nx-font-console); color: var(--nx-text); background: var(--nx-void); border: 1px solid var(--nx-cyan); border-radius: 6px; padding: 8px; resize: vertical; margin: 0 0 12px; }

/* SharedSwarm (⋯ → SharedSwarm…) */
.sw-limits { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.sw-limits .cl-select { border-color: var(--nx-cyan); }
.sw-usage { font: 12px var(--nx-font-console); color: var(--nx-acid-text); }
.sw-list { max-height: 40vh; overflow: auto; }
.sw-list > li .cl-dlg-name { margin: 0; flex: 1; min-width: 140px; }

@media (max-width: 640px) {
  .cl-top { padding: 8px 12px; }
  .cl-tabs [role="tab"] { padding: 8px 10px; letter-spacing: .06em; }
  .cl-status { margin-left: 0; width: 100%; order: 5; }
  .cl-device { max-width: 70vw; }
  .cl-book { padding: 18px 16px; font-size: 17px; }
  .cl-comic.spread img { max-width: 50%; }
}