:root { --bg:#09070e; --panel:#12101c; --panel2:#171421; --panel3:#1d192a; --line:rgba(205,180,255,.14); --muted:#938ba4; --text:#eeeaf6; --purple:#9c42ff; --purple2:#c46cff; --cyan:#53c8ff; --green:#56e0a2; --amber:#f4ba5d; --red:#ff7289; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; font-family:Inter,Segoe UI,Arial,sans-serif; background:var(--bg); color:var(--text); font-size:13px; }
button,input,select { font:inherit; }
button { color:inherit; border:0; cursor:pointer; }
.app-shell { height:100vh; display:flex; flex-direction:column; background:linear-gradient(90deg,rgba(9,7,14,.95),rgba(9,7,14,.83)), url('../assets/raven.png') right 44px bottom 35px/min(61vw,760px) auto no-repeat; }
.topbar { height:64px; flex:none; display:flex; align-items:center; padding:0 18px; border-bottom:1px solid var(--line); background:rgba(12,9,20,.94); box-shadow:0 8px 28px rgba(0,0,0,.23); }
.brand { display:flex; align-items:center; min-width:295px; gap:10px; }.brand-mark,.empty-raven { color:#bd59ff; text-shadow:0 0 18px #9c42ff; font-size:25px; transform:rotate(12deg); }.brand-name { font-size:15px; letter-spacing:2.5px; font-weight:800; }.brand-sub { color:var(--muted); font-size:10px; margin-top:3px; letter-spacing:.3px; }
.menus { display:flex; gap:2px; }.menus button { padding:8px 12px; border-radius:5px; background:transparent; color:#c0b9cf; }.menus button:hover { background:var(--panel3); color:white; }
.top-actions { margin-left:auto; display:flex; align-items:center; gap:8px; color:var(--muted); }.connection-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 9px var(--green); }.icon-button { background:transparent; color:#bdb3cc; font-size:20px; padding:4px 7px; }.icon-button:hover { color:var(--purple2); }
.toolbar { flex:none; height:54px; display:flex; align-items:center; gap:5px; padding:0 14px; background:rgba(21,17,30,.95); border-bottom:1px solid var(--line); }.tool { padding:8px 10px; border-radius:5px; background:transparent; color:#c4bdcf; }.tool:hover { background:#2c253c; color:white; }.tool.primary { background:linear-gradient(135deg,#7d2ee2,#a540ff); color:white; box-shadow:0 5px 16px rgba(137,45,255,.25); }.tool.primary:hover { filter:brightness(1.13); }.tool.danger:hover { background:rgba(255,90,120,.14); color:var(--red); }.tool span { margin-right:5px; font-size:15px; }.toolbar-divider { width:1px; height:23px; background:var(--line); margin:0 5px; }.toolbar-spacer { flex:1; }.search { width:225px; height:31px; display:flex; gap:6px; align-items:center; padding:0 9px; border-radius:5px; border:1px solid var(--line); background:rgba(8,6,13,.66); color:var(--muted); }.search input { width:100%; outline:0; border:0; color:var(--text); background:transparent; }.search:focus-within { border-color:var(--purple); }
.workspace { flex:1; min-height:0; display:flex; }.sidebar { width:235px; flex:none; padding:16px 10px; background:rgba(13,10,21,.92); border-right:1px solid var(--line); display:flex; flex-direction:column; overflow:auto; }.sidebar-section { margin-bottom:19px; }.section-title { display:flex; justify-content:space-between; align-items:center; padding:0 9px 7px; color:#8f849f; font-size:10px; letter-spacing:1.4px; font-weight:800; }.count { color:#a58bbf; font-size:10px; }.tiny-action { color:#887b99; background:transparent; font-size:17px; line-height:10px; }.tiny-action:hover { color:var(--purple2); }.nav-item { width:100%; display:flex; align-items:center; gap:9px; padding:8px 10px; margin:2px 0; border-radius:5px; text-align:left; color:#bcb5c8; background:transparent; }.nav-item:hover { background:rgba(156,66,255,.11); color:white; }.nav-item.active { color:white; background:linear-gradient(90deg,rgba(156,66,255,.3),rgba(156,66,255,.08)); box-shadow:inset 2px 0 var(--purple); }.nav-item b { margin-left:auto; color:#7e748d; font-size:11px; font-weight:500; }.nav-icon { width:16px; color:#978aa8; text-align:center; }.blue { color:var(--cyan); }.green { color:var(--green); }.purple { color:var(--purple2); }.amber { color:var(--amber); }.red { color:var(--red); }.tag-row { gap:8px; }.tag-dot { width:8px; height:8px; border-radius:50%; background:var(--purple2); box-shadow:0 0 8px var(--purple2); }.tag-dot.cyan { background:var(--cyan); box-shadow:0 0 8px var(--cyan); }.sidebar-bottom { margin-top:auto; display:flex; align-items:center; gap:10px; padding:12px 10px; border-top:1px solid var(--line); color:#b9aec7; }.sidebar-bottom .raven-watermark { color:var(--purple2); font-size:23px; }.sidebar-bottom strong { display:block; font-size:10px; letter-spacing:1px; }.sidebar-bottom small { display:block; color:#6f667c; font-size:10px; margin-top:4px; }
.content-panel { min-width:0; flex:1; display:flex; flex-direction:column; background:rgba(11,9,17,.44); }.table-wrap { min-height:235px; flex:1; overflow:auto; position:relative; }.torrent-table { width:100%; border-collapse:collapse; table-layout:auto; min-width:1000px; }.torrent-table th { position:sticky; top:0; z-index:2; height:35px; background:rgba(25,20,35,.97); border-bottom:1px solid var(--line); color:#8f849f; text-align:left; font-size:10px; font-weight:700; letter-spacing:.6px; white-space:nowrap; }.torrent-table td { height:52px; border-bottom:1px solid rgba(205,180,255,.08); color:#cfc8da; white-space:nowrap; }.torrent-table tr:hover td { background:rgba(156,66,255,.09); }.torrent-table tr.selected td { background:rgba(156,66,255,.18); }.torrent-table th,.torrent-table td { padding:0 10px; }.torrent-table th:first-child,.torrent-table td:first-child { padding-left:15px; }.check-col { width:35px; }.torrent-name { display:flex; align-items:center; gap:9px; min-width:230px; max-width:340px; overflow:hidden; text-overflow:ellipsis; }.torrent-icon { width:25px; height:25px; border:1px solid rgba(169,102,255,.35); border-radius:5px; display:grid; place-items:center; color:var(--purple2); background:rgba(156,66,255,.12); }.name-text { overflow:hidden; text-overflow:ellipsis; }.muted { color:var(--muted); }.progress-cell { width:155px; }.progress-label { display:flex; justify-content:space-between; margin-bottom:5px; font-size:11px; }.progress-track { height:5px; width:125px; background:#30283b; border-radius:5px; overflow:hidden; }.progress-bar { height:100%; border-radius:inherit; background:linear-gradient(90deg,#7d2ee2,#c66cff); }.progress-bar.complete { background:var(--green); }.rate.down { color:var(--cyan); }.rate.up { color:var(--purple2); }.status-text { color:var(--green); }.status-text.paused { color:var(--amber); }.status-text.downloading { color:var(--cyan); }.status-text.completed { color:#b9a8ff; }.status-text.stalled { color:var(--muted); }.empty-state { position:absolute; inset:70px 0 0; display:grid; place-content:center; justify-items:center; color:var(--muted); }.empty-state h3 { margin:7px 0 3px; color:#d7cfdf; }.empty-state p { margin:0; }.empty-raven { font-size:37px; }
.details { flex:none; height:265px; border-top:1px solid var(--line); background:rgba(17,13,25,.94); }.details-head { height:45px; display:flex; align-items:center; padding:0 17px; border-bottom:1px solid var(--line); }.selected-title { font-weight:650; color:#eeeaf6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.detail-actions { margin-left:auto; display:flex; gap:6px; }.detail-actions button { padding:6px 9px; border:1px solid var(--line); border-radius:4px; color:#aaa0b6; background:transparent; font-size:11px; }.detail-actions button:hover { color:white; border-color:var(--purple); }.tabs { display:flex; gap:3px; height:35px; padding:0 13px; background:rgba(9,7,14,.31); border-bottom:1px solid var(--line); }.detail-tab { padding:0 11px; color:#91869c; background:transparent; border-bottom:2px solid transparent; font-size:11px; }.detail-tab:hover,.detail-tab.active { color:#eeeaf6; }.detail-tab.active { border-bottom-color:var(--purple2); }.detail-body { height:185px; overflow:auto; padding:15px 18px; }.detail-grid { display:grid; grid-template-columns:repeat(4, minmax(130px,1fr)); gap:15px 30px; }.detail-item label { color:#81768d; display:block; text-transform:uppercase; font-size:9px; letter-spacing:1px; margin-bottom:4px; }.detail-item span { color:#e6deed; }.detail-item .positive { color:var(--green); }.detail-note { color:var(--muted); margin:0; line-height:1.6; }.mini-table { width:100%; border-collapse:collapse; }.mini-table th,.mini-table td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); color:#c9c0d3; }.mini-table th { color:#877c91; font-size:10px; text-transform:uppercase; }
.statusbar { flex:none; height:28px; display:flex; align-items:center; gap:18px; padding:0 12px; background:#0c0912; color:#897e92; font-size:10px; border-top:1px solid var(--line); }.statusbar strong { color:#c8bfd1; font-weight:600; }.status-led { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; }.status-led.green { background:var(--green); box-shadow:0 0 7px var(--green); }.status-led.purple { background:var(--purple2); box-shadow:0 0 7px var(--purple2); }.status-separator { display:inline-block; width:1px; height:13px; background:var(--line); margin:0 10px; vertical-align:middle; }.status-spacer { flex:1; }
.modal-backdrop { position:fixed; inset:0; z-index:20; display:grid; place-items:center; background:rgba(3,2,7,.76); backdrop-filter:blur(4px); }.modal-backdrop[hidden] { display:none; }.modal { width:min(720px,calc(100vw - 40px)); max-height:calc(100vh - 60px); overflow:auto; background:#171322; border:1px solid rgba(196,108,255,.32); border-radius:8px; box-shadow:0 25px 80px #000; }.modal-head { padding:17px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; }.modal-head h2 { margin:0; font-size:16px; }.close { margin-left:auto; background:transparent; color:#9e93a8; font-size:21px; }.modal-body { padding:20px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.form-field { display:flex; flex-direction:column; gap:6px; }.form-field.full { grid-column:1/-1; }.form-field label { color:#9e93aa; font-size:11px; }.form-field input,.form-field select { height:34px; padding:0 10px; outline:0; border:1px solid var(--line); border-radius:4px; background:#0d0a13; color:#eeeaf6; }.form-field input:focus,.form-field select:focus { border-color:var(--purple); }.modal-actions { display:flex; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid var(--line); }.button { padding:8px 15px; border-radius:4px; background:#2b2338; color:#d7cde0; }.button.primary { background:linear-gradient(135deg,#7d2ee2,#a540ff); color:#fff; }.button:hover { filter:brightness(1.13); }.settings-layout { display:grid; grid-template-columns:155px 1fr; min-height:480px; }.settings-nav { padding:14px 8px; border-right:1px solid var(--line); background:#120e1b; }.settings-nav button { display:block; width:100%; text-align:left; padding:9px 11px; color:#a79bb1; background:transparent; border-radius:4px; margin:2px 0; }.settings-nav button.active,.settings-nav button:hover { color:white; background:rgba(156,66,255,.16); }.settings-content { padding:20px; }.settings-content h3 { margin:0 0 17px; font-size:15px; }.checkline { display:flex; align-items:center; gap:8px; margin:12px 0; color:#c5bccd; }.checkline input { accent-color:var(--purple); }.setting-sep { height:1px; background:var(--line); margin:19px 0; }.hint { color:#81778d; font-size:11px; line-height:1.5; }.toast { position:fixed; z-index:30; right:22px; bottom:43px; padding:10px 15px; border:1px solid rgba(196,108,255,.45); border-radius:5px; color:#f4edfb; background:#211a2d; box-shadow:0 10px 30px #0008; opacity:0; transform:translateY(8px); pointer-events:none; transition:.22s; }.toast.show { opacity:1; transform:none; }
@media(max-width:1180px) { .sidebar { width:205px; }.brand { min-width:250px; }.torrent-table { font-size:12px; } }
.menu-popover { position:fixed; z-index:45; min-width:190px; padding:5px; border:1px solid rgba(196,108,255,.35); border-radius:6px; background:#171322; box-shadow:0 14px 35px #000b; }
.menu-popover[hidden] { display:none; }
.menu-popover button { display:block; width:100%; padding:8px 11px; text-align:left; border-radius:4px; color:#cfc5d9; background:transparent; font-size:12px; }
.menu-popover button:hover { color:#fff; background:rgba(156,66,255,.2); }
.details-hidden { display:none; }
body.compact .torrent-table td { height:34px; }
body.compact .progress-cell { padding-top:4px; padding-bottom:4px; }
.file-list { display:flex; flex-direction:column; gap:5px; }
.file-row { display:flex; justify-content:space-between; gap:18px; padding:7px 9px; border:1px solid var(--line); border-radius:4px; color:#cfc8da; }
.file-row span:last-child { color:var(--muted); }
.inline-actions { padding:14px 0 0; border-top:0; justify-content:flex-start; }
.detail-item.full { grid-column:1/-1; }
.detail-item .negative { color:var(--red); }
.sidebar-bottom { align-items:flex-start; }
.sidebar-bottom-copy { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.patch-notes-button { margin-top:7px; padding:6px 10px; border:1px solid rgba(196,108,255,.42); border-radius:5px; color:#eee5f7; background:linear-gradient(135deg,rgba(125,46,226,.82),rgba(165,64,255,.72)); font-size:11px; cursor:pointer; box-shadow:0 4px 13px rgba(125,46,226,.2); }
.patch-notes-button:hover { filter:brightness(1.16); }
.sidebar-version { color:#8f83a0 !important; font-size:10px !important; margin-top:2px; }
.patch-notes-list { display:flex; flex-direction:column; gap:16px; }
.patch-note-entry { padding:13px 15px; border:1px solid var(--line); border-radius:6px; background:rgba(13,10,21,.55); }
.patch-note-heading { display:flex; justify-content:space-between; gap:14px; color:#efe7f7; }
.patch-note-heading span { color:var(--muted); font-size:11px; }
.patch-note-entry ul { margin:10px 0 0 18px; padding:0; color:#bfb5ca; line-height:1.65; }
.brand-mark { width:34px; height:34px; object-fit:contain; transform:none; filter:drop-shadow(0 0 10px rgba(174,73,255,.75)); border-radius:50%; }
.raven-watermark { width:34px; height:34px; object-fit:contain; filter:drop-shadow(0 0 9px rgba(174,73,255,.75)); border-radius:50%; }
.empty-raven { width:74px; height:74px; object-fit:contain; transform:none; filter:drop-shadow(0 0 16px rgba(174,73,255,.8)); border-radius:50%; }
.torrent-icon { width:25px; height:25px; object-fit:contain; padding:0; border-radius:5px; }