/* ---------- themes ---------- Every colour is a token. Switching data-theme on swaps the set. --paper is always the foreground and --ink always the background, so components that invert (buttons, selected pills) work in all three. */ :root,[data-theme="hub"]{ color-scheme:dark; --ink:#0f1319; --panel:#161c26; --panel-2:#1c242f; --line:#242f3d; --mist:#8b98ab; --paper:#e8edf4; --accent:var(--paper); --accent-soft:rgba(232,237,244,.14); --film:#e0a244; /* movies / Radarr */ --tube:#4bb3d4; /* series / Sonarr */ --memo:#b28dfa; /* digest */ --sab:#e0607a; /* SABnzbd */ --taut:#6c8cf5; /* Tautulli */ --prowl:#3fb8a3; /* Prowlarr */ --seerr:#c2569e; /* Seerr */ --dozzle:#c9a227; /* Dozzle */ --alarm:#d9636b; --ok:#5fbf8a; --topbar-bg:rgba(15,19,25,.94); --scrim:rgba(8,11,15,.72); --film-soft:rgba(224,162,68,.12); --tube-soft:rgba(75,179,212,.12); --sab-soft:rgba(224,96,122,.12); --taut-soft:rgba(108,140,245,.12); --prowl-soft:rgba(63,184,163,.12); --seerr-soft:rgba(194,86,158,.12); --dozzle-soft:rgba(201,162,39,.12); --kuma:#2dd4bf; --kuma-soft:rgba(45,212,191,.12); --cleanuparr:#7bc96f; --huntarr:#e8875a; --pulsarr:#5b8def; } /* Radarr and Sonarr's own dark palette, so the embedded tabs stop showing a seam. */ [data-theme="servarr"]{ color-scheme:dark; --ink:#202020; --panel:#2a2a2a; --panel-2:#333333; --line:#3d3d3d; --mist:#9a9a9a; --paper:#e9e9e9; --accent:var(--paper); --accent-soft:rgba(233,233,233,.14); --film:#ffc230; --tube:#35c5f4; --memo:#b98eff; --sab:#f2557a; --taut:#7d9dff; --prowl:#4fd6bd; --seerr:#e070b8; --dozzle:#e0b83c; --alarm:#e55353; --ok:#27c24c; --topbar-bg:rgba(32,32,32,.95); --scrim:rgba(0,0,0,.7); --film-soft:rgba(255,194,48,.14); --tube-soft:rgba(53,197,244,.14); --sab-soft:rgba(242,85,122,.14); --taut-soft:rgba(125,157,255,.14); --prowl-soft:rgba(79,214,189,.14); --seerr-soft:rgba(224,112,184,.14); --dozzle-soft:rgba(224,184,60,.14); --kuma:#2dd4bf; --kuma-soft:rgba(45,212,191,.14); --cleanuparr:#8ed980; --huntarr:#ff9d6e; --pulsarr:#6f9dff; } /* Accents darkened for contrast against white — the bright amber is unreadable here. */ [data-theme="light"]{ color-scheme:light; --ink:#f4f6f9; --panel:#ffffff; --panel-2:#eaeef4; --line:#d5dce6; --mist:#5d6979; --paper:#131920; --accent:var(--paper); --accent-soft:rgba(19,25,32,.08); --film:#a8690a; --tube:#0c6c8e; --memo:#7c4fd1; --sab:#b23a5a; --taut:#3d5cc7; --prowl:#1f8873; --seerr:#9c3d7e; --dozzle:#8a6d10; --alarm:#b5342a; --ok:#1c7f4c; --topbar-bg:rgba(244,246,249,.94); --scrim:rgba(19,25,32,.42); --film-soft:rgba(168,105,10,.12); --tube-soft:rgba(12,108,142,.12); --sab-soft:rgba(178,58,90,.12); --taut-soft:rgba(61,92,199,.12); --prowl-soft:rgba(31,136,115,.12); --seerr-soft:rgba(156,61,126,.12); --dozzle-soft:rgba(138,109,16,.12); --kuma:#0f766e; --kuma-soft:rgba(15,118,110,.12); --cleanuparr:#2f7a3f; --huntarr:#a8501f; --pulsarr:#2d4fa8; } /* Nord — https://nordtheme.com, mapped onto this app's token set. */ [data-theme="nord"]{ color-scheme:dark; --ink:#2e3440; --panel:#3b4252; --panel-2:#434c5e; --line:#4c566a; --mist:#8a94a6; --paper:#eceff4; --accent:var(--paper); --accent-soft:rgba(236,239,244,.14); --film:#ebcb8b; /* movies / Radarr */ --tube:#88c0d0; /* series / Sonarr */ --memo:#b48ead; /* digest */ --sab:#bf616a; /* SABnzbd */ --taut:#81a1c1; /* Tautulli */ --prowl:#8fbcbb; /* Prowlarr */ --seerr:#d08770; /* Seerr */ --dozzle:#d4c98a; /* Dozzle */ --alarm:#bf616a; --ok:#a3be8c; --topbar-bg:rgba(46,52,64,.94); --scrim:rgba(20,22,28,.72); --film-soft:rgba(235,203,139,.12); --tube-soft:rgba(136,192,208,.12); --sab-soft:rgba(191,97,106,.12); --taut-soft:rgba(129,161,193,.12); --prowl-soft:rgba(143,188,187,.12); --seerr-soft:rgba(208,135,112,.12); --dozzle-soft:rgba(212,201,138,.12); --kuma:#8fd9c4; --kuma-soft:rgba(143,217,196,.12); --cleanuparr:#a3d9a5; --huntarr:#c9765a; --pulsarr:#5e81ac; } /* Dracula — https://draculatheme.com, mapped onto this app's token set. */ [data-theme="dracula"]{ color-scheme:dark; --ink:#282a36; --panel:#343746; --panel-2:#3d4052; --line:#44475a; --mist:#6272a4; --paper:#f8f8f2; --accent:var(--paper); --accent-soft:rgba(248,248,242,.14); --film:#ffb86c; /* movies / Radarr */ --tube:#8be9fd; /* series / Sonarr */ --memo:#bd93f9; /* digest */ --sab:#ff5555; /* SABnzbd */ --taut:#6ea8fe; /* Tautulli */ --prowl:#69dfd4; /* Prowlarr */ --seerr:#ff79c6; /* Seerr */ --dozzle:#f1fa8c; /* Dozzle */ --alarm:#ff5555; --ok:#50fa7b; --topbar-bg:rgba(40,42,54,.94); --scrim:rgba(20,21,28,.72); --film-soft:rgba(255,184,108,.12); --tube-soft:rgba(139,233,253,.12); --sab-soft:rgba(255,85,85,.12); --taut-soft:rgba(110,168,254,.12); --prowl-soft:rgba(105,223,212,.12); --seerr-soft:rgba(255,121,198,.12); --dozzle-soft:rgba(241,250,140,.12); --kuma:#69f0d1; --kuma-soft:rgba(105,240,209,.12); --cleanuparr:#7dffa0; --huntarr:#ff9166; --pulsarr:#8380f0; } /* Plex's own gamboge/orange as the accent, on a warm dark grey base — the classic Plex look rather than this app's usual blue-leaning dark. */ [data-theme="plex"]{ color-scheme:dark; --ink:#1a1a1a; --panel:#232323; --panel-2:#2b2b2b; --line:#3a3a3a; --mist:#9a9a9a; --paper:#f0f0f0; --accent:#e5a00d; --accent-soft:rgba(229,160,13,.16); --film:#e0a244; --tube:#4bb3d4; --memo:#b28dfa; --sab:#e0607a; --taut:#6c8cf5; --prowl:#3fb8a3; --seerr:#c2569e; --dozzle:#c9a227; --alarm:#d9636b; --ok:#5fbf8a; --topbar-bg:rgba(26,26,26,.95); --scrim:rgba(10,10,10,.75); --film-soft:rgba(224,162,68,.12); --tube-soft:rgba(75,179,212,.12); --sab-soft:rgba(224,96,122,.12); --taut-soft:rgba(108,140,245,.12); --prowl-soft:rgba(63,184,163,.12); --seerr-soft:rgba(194,86,158,.12); --dozzle-soft:rgba(201,162,39,.12); --kuma:#2dd4bf; --kuma-soft:rgba(45,212,191,.12); --cleanuparr:#7bc96f; --huntarr:#e8875a; --pulsarr:#5b8def; } /* True black background specifically for OLED screens — genuine #000, not just "very dark grey" like the other dark themes here, since the whole point is the power/contrast benefit OLED panels get from actual black pixels. Panels still lift slightly above it (a small amount, not the usual jump) so there's still some visual hierarchy; pure black-on-black panels would have none at all. */ [data-theme="oled"]{ color-scheme:dark; --ink:#000000; --panel:#0a0a0a; --panel-2:#131313; --line:#232323; --mist:#8a8a8a; --paper:#ffffff; --accent:#ffffff; --accent-soft:rgba(255,255,255,.14); --film:#e0a244; --tube:#4bb3d4; --memo:#b28dfa; --sab:#e0607a; --taut:#6c8cf5; --prowl:#3fb8a3; --seerr:#c2569e; --dozzle:#c9a227; --alarm:#d9636b; --ok:#5fbf8a; --topbar-bg:rgba(0,0,0,.97); --scrim:rgba(0,0,0,.8); --film-soft:rgba(224,162,68,.12); --tube-soft:rgba(75,179,212,.12); --sab-soft:rgba(224,96,122,.12); --taut-soft:rgba(108,140,245,.12); --prowl-soft:rgba(63,184,163,.12); --seerr-soft:rgba(194,86,158,.12); --dozzle-soft:rgba(201,162,39,.12); --kuma:#2dd4bf; --kuma-soft:rgba(45,212,191,.12); --cleanuparr:#7bc96f; --huntarr:#e8875a; --pulsarr:#5b8def; } /* Sonarr's own teal/cyan as the accent, on a dark base with a slight green-blue undertone rather than this app's usual neutral dark. */ [data-theme="sonarr-teal"]{ color-scheme:dark; --ink:#0d1a1a; --panel:#132424; --panel-2:#1a2f2f; --line:#254040; --mist:#7fa8a3; --paper:#e6f5f2; --accent:#2dd4bf; --accent-soft:rgba(45,212,191,.16); --film:#e0a244; --tube:#4bb3d4; --memo:#b28dfa; --sab:#e0607a; --taut:#6c8cf5; --prowl:#3fb8a3; --seerr:#c2569e; --dozzle:#c9a227; --alarm:#d9636b; --ok:#5fbf8a; --topbar-bg:rgba(13,26,26,.95); --scrim:rgba(6,14,14,.75); --film-soft:rgba(224,162,68,.12); --tube-soft:rgba(75,179,212,.12); --sab-soft:rgba(224,96,122,.12); --taut-soft:rgba(108,140,245,.12); --prowl-soft:rgba(63,184,163,.12); --seerr-soft:rgba(194,86,158,.12); --dozzle-soft:rgba(201,162,39,.12); --kuma:#2dd4bf; --kuma-soft:rgba(45,212,191,.12); --cleanuparr:#7bc96f; --huntarr:#e8875a; --pulsarr:#5b8def; } /* A bold crimson accent, on a dark base with a slight red undertone rather than this app's usual neutral dark — a deliberately different feel from the teal variant above, not just a different single color. */ [data-theme="radarr-crimson"]{ color-scheme:dark; --ink:#1a0d0f; --panel:#241316; --panel-2:#2e181c; --line:#3d2226; --mist:#a08789; --paper:#f5e6e8; --accent:#dc3d5a; --accent-soft:rgba(220,61,90,.16); --film:#e0a244; --tube:#4bb3d4; --memo:#b28dfa; --sab:#e0607a; --taut:#6c8cf5; --prowl:#3fb8a3; --seerr:#c2569e; --dozzle:#c9a227; --alarm:#d9636b; --ok:#5fbf8a; --topbar-bg:rgba(26,13,15,.95); --scrim:rgba(13,7,8,.75); --film-soft:rgba(224,162,68,.12); --tube-soft:rgba(75,179,212,.12); --sab-soft:rgba(224,96,122,.12); --taut-soft:rgba(108,140,245,.12); --prowl-soft:rgba(63,184,163,.12); --seerr-soft:rgba(194,86,158,.12); --dozzle-soft:rgba(201,162,39,.12); --kuma:#2dd4bf; --kuma-soft:rgba(45,212,191,.12); --cleanuparr:#7bc96f; --huntarr:#e8875a; --pulsarr:#5b8def; } :root{ --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif; --body:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,sans-serif; --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace; --r:10px; } *{box-sizing:border-box} html,body{margin:0;padding:0;overflow-x:hidden} body{background:var(--ink);color:var(--paper);font-family:var(--body); font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased} /* Custom background (Settings -> Appearance -> Background) — sits behind everything else. Oversized by 40px on every side and blurred via JS-set inline styles, so a blur radius doesn't reveal a sharp, unblurred edge at the viewport boundary. Shows through in the gaps around cards and panels, same as any dashboard wallpaper — panels themselves stay opaque for readability, this isn't a glassmorphism redesign. */ #app-bg{position:fixed;inset:-40px;z-index:-1;background-size:cover; background-position:center;background-repeat:no-repeat;pointer-events:none} button,input,select{font:inherit;color:inherit} button{cursor:pointer;background:none;border:none} :focus-visible{outline:2px solid var(--film);outline-offset:2px;border-radius:4px} /* ---------- left sidebar: rail navigation, Radarr/Sonarr-style ---------- */ :root{ --side-w:228px; --qrail-w:220px } .iconbtn{flex:none;border:1px solid var(--line);border-radius:999px;padding:6px 12px; color:var(--mist);font-size:12.5px} .iconbtn:hover{color:var(--paper);border-color:var(--mist)} #side-logout{display:block;text-decoration:none} .sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--side-w);z-index:45; background:var(--panel);border-right:1px solid var(--line); display:flex;flex-direction:column;transition:transform .2s ease} .side-brand{flex:none;display:flex;align-items:center;justify-content:space-between; padding:calc(16px + env(safe-area-inset-top)) 16px 12px;gap:8px} .brandmark{height:30px;width:auto;display:block;flex:none} .side-close{display:none} .side-collapse svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round;display:block} /* Reopen-sidebar button, shown inside the top strip only once the sidebar is collapsed on desktop (mobile uses .menubtn instead, further down). */ .nav-expand{display:none} /* Generic — covers every icon-only button in the top bar (search, notif, nav-expand, home, settings) rather than repeating the same five properties per button class. */ #home-open svg, #open-settings svg, #qrail-open svg, #qrail-expand svg, .search-trigger svg, .notif-trigger svg, .nav-expand svg{ width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round;display:block} .notif-trigger{position:relative} .notif-badge:not([hidden]){position:absolute;top:-2px;right:-2px;background:var(--alarm);color:#fff; font-family:var(--mono);font-size:10px;font-weight:700;line-height:1; min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center; justify-content:center;padding:0 3px} /* ---------- health status pill ---------- */ .health-pill-wrap{position:relative} .health-pill-dot{position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%; background:var(--mist);border:2px solid var(--topbar-bg)} .health-pill-panel{display:none;position:absolute;top:calc(100% + 8px);right:0;width:260px; max-height:70vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line); border-radius:var(--r);box-shadow:0 12px 32px rgba(0,0,0,.4);padding:14px;z-index:60} .health-pill-panel.on{display:block} .health-pill-row{display:flex;align-items:center;justify-content:space-between; padding:7px 0;border-bottom:1px solid var(--line);font-size:13px} .health-pill-row:last-child{border-bottom:0} .health-pill-row .dot{width:8px;height:8px;border-radius:50%;flex:none;margin-right:8px} .side-nav{flex:1;min-height:0;overflow-y:auto;padding:4px 10px 10px;scrollbar-width:thin} .side-label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--mist);opacity:.7;margin:16px 10px 6px;flex:none} .side-label:first-child{margin-top:4px} .tab{width:100%;display:flex;align-items:center;gap:11px;text-align:left; border:1px solid transparent;border-radius:8px;background:none; padding:9px 10px;font-size:13.5px;font-weight:500;color:var(--mist);white-space:nowrap; transition:background .15s ease,color .15s ease} .tab .navicon{flex:none;width:18px;height:18px;display:flex;align-items:center;justify-content:center} .tab .navicon svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} .tab .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis} .tab:hover{color:var(--paper);background:var(--panel-2)} .tab[aria-selected="true"]{background:var(--panel-2);color:var(--paper);font-weight:600; border-color:var(--line);border-left:3px solid var(--accent);padding-left:7px} .tab .n{font-family:var(--mono);font-size:10px;margin-left:auto;opacity:.7;flex:none} .tab[aria-selected="true"] .n{opacity:.9} /* app tabs (Radarr / Sonarr) pick up their accent colour on the icon and, when active, a left rule — same colour language the embedded apps themselves use. */ .tab.movie .navicon{color:var(--film)} .tab.series .navicon{color:var(--tube)} .tab.movie[aria-selected="true"]{border-left:2px solid var(--film);padding-left:8px} .tab.series[aria-selected="true"]{border-left:2px solid var(--tube);padding-left:8px} .side-label.movie{color:var(--film);opacity:.9} .side-label.series{color:var(--tube);opacity:.9} .side-label.memo{color:var(--memo);opacity:.9} .side-label.safe{color:var(--ok);opacity:.9} .side-label.sab{color:var(--sab);opacity:.9} .side-label.taut{color:var(--taut);opacity:.9} .side-label.prowl{color:var(--prowl);opacity:.9} .side-label.seerr{color:var(--seerr);opacity:.9} .side-label.dozzle{color:var(--dozzle);opacity:.9} .side-label.kuma{color:var(--kuma);opacity:.9} .side-group+.side-group{border-top:1px solid var(--line);padding-top:2px} /* Collapsible groups — the label becomes a button with a chevron that rotates shut; everything under it just stops rendering. */ .side-grouptoggle{display:flex;align-items:center;justify-content:space-between; width:calc(100% - 20px);background:none;border:none;cursor:pointer;padding:0; font-size:12.5px} .side-grouptoggle:hover{opacity:1} .side-grouptoggle .chev{width:12px;height:12px;flex:none;transition:transform .15s ease} .side-grouptoggle .chev svg{width:100%;height:100%;stroke:currentColor;fill:none; stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;display:block} .side-group.collapsed .side-grouptoggle .chev{transform:rotate(-90deg)} .side-group.collapsed > .tab{display:none} .tab.memo .navicon{color:var(--memo)} .tab.memo[aria-selected="true"]{border-left:2px solid var(--memo);padding-left:8px} .tab.safe .navicon{color:var(--ok)} .tab.safe[aria-selected="true"]{border-left:2px solid var(--ok);padding-left:8px} .tab.sab .navicon{color:var(--sab)} .tab.sab[aria-selected="true"]{border-left:2px solid var(--sab);padding-left:8px} .tab.taut .navicon{color:var(--taut)} .tab.taut[aria-selected="true"]{border-left:2px solid var(--taut);padding-left:8px} .tab.prowl .navicon{color:var(--prowl)} .tab.prowl[aria-selected="true"]{border-left:2px solid var(--prowl);padding-left:8px} .tab.seerr .navicon{color:var(--seerr)} .tab.seerr[aria-selected="true"]{border-left:2px solid var(--seerr);padding-left:8px} .tab.dozzle .navicon{color:var(--dozzle)} .tab.dozzle[aria-selected="true"]{border-left:2px solid var(--dozzle);padding-left:8px} .tab.kuma .navicon{color:var(--kuma)} .tab.kuma[aria-selected="true"]{border-left:2px solid var(--kuma);padding-left:8px} .tab.cleanuparr .navicon{color:var(--cleanuparr)} .tab.cleanuparr[aria-selected="true"]{border-left:2px solid var(--cleanuparr);padding-left:8px} .tab.huntarr .navicon{color:var(--huntarr)} .tab.huntarr[aria-selected="true"]{border-left:2px solid var(--huntarr);padding-left:8px} .tab.pulsarr .navicon{color:var(--pulsarr)} .tab.pulsarr[aria-selected="true"]{border-left:2px solid var(--pulsarr);padding-left:8px} .side-foot{flex:none;padding:10px;border-top:1px solid var(--line);display:flex; flex-direction:column;gap:8px} .side-foot .iconbtn{width:100%;text-align:center} /* ---------- top strip: persistent header, present in every state ---------- */ .topstrip{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:50; background:var(--topbar-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line); padding:calc(10px + env(safe-area-inset-top)) 18px 10px;margin-left:var(--side-w)} .topstrip-logo{height:26px} .topstrip-spacer{flex:1} .menubtn{display:none;flex:none} .menubtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round;display:block} .nav-scrim{display:none;position:fixed;inset:0;z-index:44;background:var(--scrim)} .nav-scrim.on{display:block} /* ---------- quick-actions rail (right side) ---------- Mirrors the left sidebar's own structure and responsive behavior exactly: fixed and always visible above 880px, a slide-in overlay toggled by a button below it — same breakpoint, same pattern, just the other edge of the screen. */ .qrail{position:fixed;top:0;right:0;bottom:0;width:var(--qrail-w);z-index:55; background:var(--panel);border-left:1px solid var(--line); display:flex;flex-direction:column;transition:transform .2s ease} .qrail-head{flex:none;display:flex;align-items:center;justify-content:space-between; padding:calc(16px + env(safe-area-inset-top)) 14px 10px;gap:8px} .qrail-head h4{font-size:13px;margin:0;color:var(--mist);text-transform:uppercase;letter-spacing:.04em} .qrail-close{display:none;background:none;border:0;color:var(--mist);padding:4px;cursor:pointer} .qrail-collapse{display:flex;background:none;border:0;color:var(--mist);padding:4px;cursor:pointer} .qrail-body{flex:1;overflow-y:auto;padding:0 12px 16px;display:flex;flex-direction:column;gap:8px} .qrail-hint{font-size:11.5px;color:var(--mist);padding:0 4px;margin:0 0 4px} .qrail-pin{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--r); background:var(--panel-2);border:1px solid var(--line);color:var(--paper); font-size:13px;text-align:left;cursor:pointer;width:100%} .qrail-pin:hover{border-color:var(--accent)} .qrail.mode-edit .qrail-pin{border-color:var(--alarm)} .qrail-pin-remove{margin-left:auto;flex:none;color:var(--alarm);font-size:15px;line-height:1} .qrail-empty{font-size:12.5px;color:var(--mist);padding:12px 4px;text-align:center} .conn-row{padding:12px 0;border-bottom:1px solid var(--line)} .conn-row:last-of-type{border-bottom:0} .conn-row.changed .title{color:var(--accent)} .users-split{display:flex;flex-direction:column;gap:28px;max-width:960px;margin:0 auto;padding:0 18px} .users-half{flex:1;min-width:0} @media(min-width:881px){ .users-split{flex-direction:row;gap:36px} .users-half:first-child{padding-right:36px;border-right:1px solid var(--line)} } .local-user-row{display:flex;align-items:center;justify-content:space-between; padding:10px 0;border-bottom:1px solid var(--line)} .local-user-row:last-child{border-bottom:0} @media(min-width:881px){ main{margin-right:var(--qrail-w)} #qrail-open{display:none} .topstrip{margin-right:var(--qrail-w)} body.qrail-collapsed .qrail{transform:translateX(100%)} body.qrail-collapsed main{margin-right:0} body.qrail-collapsed .topstrip{margin-right:0} body.qrail-collapsed .qrail-expand{display:flex} } @media(max-width:880px){ main{margin-right:0!important} .qrail{transform:translateX(100%);box-shadow:0 0 40px rgba(0,0,0,.4)} .qrail.on{transform:translateX(0)} .qrail-close{display:flex} .qrail-collapse{display:none} .qrail-expand{display:none!important} } .qrail-expand{display:none} /* Desktop collapse: the rail tucks fully away and the content reclaims its width — handy for giving the embedded Radarr/Sonarr UI more room. */ @media(min-width:881px){ body.nav-collapsed .sidebar{transform:translateX(-100%)} body.nav-collapsed main{margin-left:0} body.nav-collapsed .topstrip{margin-left:0} body.nav-collapsed .nav-expand{display:flex} } @media(max-width:880px){ .sidebar{transform:translateX(-100%);box-shadow:0 0 40px rgba(0,0,0,.4)} .sidebar.on{transform:translateX(0)} .side-close{display:flex} .side-collapse{display:none} .nav-expand{display:none!important} main{margin-left:0!important} .topstrip{margin-left:0} .menubtn{display:flex} } @media(max-width:560px){ .brandmark{height:26px} } /* ---------- layout ---------- */ /* Sidebar is fixed, so main just leaves room for it; the content column itself stays centered in whatever's left, same as the old 960px cap. */ main{margin-left:var(--side-w);padding:20px 18px 110px} main>.view{max-width:960px;margin:0 auto} main.framing>.view{max-width:none;margin:0} .view{display:none} .view.on{display:block} .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--mist);margin:0 0 10px} .section+.section{margin-top:32px} /* the spine: gradient encodes the movie/series mix on screen */ .spined{position:relative;padding-left:16px} .spine{position:absolute;left:0;top:2px;bottom:2px;width:3px;border-radius:3px;background:var(--line)} /* ---------- rows ---------- */ .row{display:flex;gap:12px;align-items:flex-start;background:var(--panel); border:1px solid var(--line);border-radius:var(--r);padding:12px 14px} .row+.row{margin-top:8px} .row.movie{border-left:3px solid var(--film)} .row.series{border-left:3px solid var(--tube)} .row.nzb{border-left:3px solid var(--sab)} .row.taut{border-left:3px solid var(--taut)} .row.unread{border-left:3px solid var(--memo)} .row.picked{background:var(--panel-2);border-color:var(--mist)} .row .grow{min-width:0;flex:1} .row .acts{display:flex;flex-direction:column;gap:6px;flex:none} .title{font-weight:600;font-size:14.5px;margin:0;overflow-wrap:anywhere} .sub{color:var(--mist);font-size:12.5px;margin:3px 0 0;overflow-wrap:anywhere} .kind{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase; padding:2px 6px;border-radius:4px;flex:none} .kind.movie{color:var(--film);background:var(--film-soft)} .kind.series{color:var(--tube);background:var(--tube-soft)} .kind.backup{color:var(--ok);background:rgba(95,191,138,.12)} .kind.digest{color:var(--memo);background:rgba(178,141,250,.12)} .kind.nzb{color:var(--sab);background:var(--sab-soft)} .kind.taut{color:var(--taut);background:var(--taut-soft)} .data{font-family:var(--mono);font-size:12px;color:var(--mist);white-space:nowrap} .titleline{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .bar{height:3px;background:var(--panel-2);border-radius:3px;margin-top:9px;overflow:hidden} .bar span{display:block;height:100%;border-radius:3px;transition:width .4s ease} .movie .bar span{background:var(--film)} .series .bar span{background:var(--tube)} .tick{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--paper);cursor:pointer} /* ---------- tiles ---------- */ .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px} .tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px} .tile b{display:block;font-family:var(--display);font-weight:700;font-size:26px; letter-spacing:-.02em;line-height:1.1} .tile.movie b{color:var(--film)} .tile.series b{color:var(--tube)} .tile small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--mist);margin-top:5px} /* ---------- controls ---------- */ .searchbar{display:flex;gap:8px} .searchbar input{flex:1;background:var(--panel);border:1px solid var(--line); border-radius:var(--r);padding:12px 14px;font-size:15px;min-width:0} .searchbar input::placeholder{color:var(--mist)} .searchbar input:focus{border-color:var(--mist);outline:none} .btn{background:var(--accent);color:var(--ink);border-radius:var(--r); padding:12px 16px;font-weight:600;font-size:14px} .btn:hover{opacity:.88} .btn.ghost{background:none;color:var(--paper);border:1px solid var(--line)} .btn.ghost:hover{border-color:var(--mist);opacity:1} .btn.sm{padding:7px 11px;font-size:12.5px} .btn[disabled]{opacity:.45;cursor:default} .poster{width:46px;height:69px;border-radius:5px;object-fit:cover;background:var(--panel-2);flex:none} .filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:12px} .chip{border:1px solid var(--line);border-radius:999px;padding:6px 12px; font-size:12.5px;color:var(--mist);display:inline-flex;align-items:center;gap:6px} .chip[aria-pressed="true"]{color:var(--paper);border-color:var(--paper)} .theme-swatch{width:10px;height:10px;border-radius:50%;flex:none; border:1px solid rgba(255,255,255,.25)} kbd{font-family:var(--mono);font-size:12px;border:1px solid var(--line); border-bottom-width:2px;border-radius:5px;padding:2px 7px;color:var(--paper); background:var(--panel-2)} .favstar{font-size:15px;line-height:1;padding:6px 9px} .favstar.on{color:#f5b942;border-color:#f5b942} /* Horizontal poster-card carousel, shared by Recently Added and Now Watching — one component instead of two near-duplicate renderers, since both are "row of posters, click one to jump to it" underneath. */ .hcarousel{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch} .hcarousel::-webkit-scrollbar{height:6px} .hcarousel::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px} .hcard{flex:0 0 130px;cursor:pointer} .hcard .hcard-poster{width:130px;height:195px;border-radius:var(--r);background-color:var(--panel-2); background-size:cover;background-position:center;position:relative;overflow:hidden;border:1px solid var(--line)} .hcard .hcard-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(0,0,0,.45)} .hcard .hcard-bar span{display:block;height:100%;background:var(--film)} .hcard p.title{font-size:12.5px;margin:6px 0 0;line-height:1.3; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .hcard p.sub{font-size:11px;color:var(--mist);margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pgrid{display:flex;flex-wrap:wrap;gap:16px} /* ---------- calendar ---------- */ .day{margin-bottom:18px} .dayhead{display:flex;align-items:baseline;gap:10px;border-bottom:1px solid var(--line); padding-bottom:6px;margin-bottom:8px} .dayhead h4{font-family:var(--display);font-weight:500;font-size:15px;margin:0} .dayhead span{font-family:var(--mono);font-size:11px;color:var(--mist);margin-left:auto} /* ---------- notices ---------- */ .notice{border:1px solid var(--line);border-left:3px solid var(--alarm);background:var(--panel); border-radius:var(--r);padding:11px 14px;font-size:13.5px} .notice+.notice{margin-top:8px} .notice b{display:block;font-size:12px;font-family:var(--mono);color:var(--alarm); text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px} .notice.calm{border-left-color:var(--mist)} .notice.whatsnew{border-left-color:var(--memo)} .notice.whatsnew b{color:var(--memo)} .notice.whatsnew p, #whatsnew-sheet-body p{margin:0 0 8px} .notice.whatsnew ul, #whatsnew-sheet-body ul{margin:0 0 8px;padding-left:18px} .notice.whatsnew li, #whatsnew-sheet-body li{margin-bottom:3px} .notice.whatsnew p:last-child, .notice.whatsnew ul:last-child, #whatsnew-sheet-body p:last-child, #whatsnew-sheet-body ul:last-child{margin-bottom:0} .notice.calm b{color:var(--mist)} .empty{border:1px dashed var(--line);border-radius:var(--r);padding:26px 18px; text-align:center;color:var(--mist);font-size:14px} .empty b{display:block;color:var(--paper);font-family:var(--display);font-size:17px; font-weight:500;margin-bottom:5px} /* ---------- sheets ---------- */ .sheet{position:fixed;inset:0;z-index:60;display:none;background:var(--scrim); backdrop-filter:blur(3px);align-items:flex-end;justify-content:center} .sheet.on{display:flex} .login-overlay{position:fixed;inset:0;z-index:100;background:var(--ink); display:flex;align-items:center;justify-content:center} .login-overlay[hidden]{display:none} .login-panel{background:var(--panel);border:1px solid var(--line);border-radius:16px; width:100%;max-width:340px;padding:28px 24px;text-align:center} .login-panel h1{font-family:var(--display);font-weight:700;font-size:22px;margin:0 0 4px} .login-password-wrap{position:relative} .login-password-wrap input{padding-right:40px} .login-password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%); background:none;border:none;cursor:pointer;font-size:16px;opacity:.6;padding:4px 8px} .login-password-toggle:hover{opacity:1} .sheetbody{background:var(--panel);border:1px solid var(--line);border-radius:16px 16px 0 0; width:100%;max-width:620px;padding:20px 18px calc(24px + env(safe-area-inset-bottom)); max-height:88vh;overflow:auto} @media(min-width:600px){ .sheet{align-items:center} .sheetbody{border-radius:16px} } .sheetbody h3{font-family:var(--display);font-weight:700;font-size:19px;margin:0 0 4px} .sheetbody p.lede{color:var(--mist);font-size:13px;margin:0 0 18px} .field{margin-bottom:14px} .field label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--mist);margin-bottom:5px} .field input,.field select{width:100%;background:var(--panel-2);border:1px solid var(--line); border-radius:8px;padding:10px 12px;font-size:14px} .field input:focus,.field select:focus{border-color:var(--mist);outline:none} .field.off{opacity:.45} .setting-group+.setting-group{margin-top:4px} .setting-group .grouphead{ display:flex;align-items:center;justify-content:space-between;gap:10px; width:100%;background:none;border:none;color:inherit;cursor:pointer;text-align:left; font-family:var(--display);font-size:14px;font-weight:700;margin:20px 0 10px; padding-top:14px;border-top:1px solid var(--line) } .setting-group:first-child .grouphead{border-top:none;padding-top:0;margin-top:0} .setting-group .grouphead .chev{flex-shrink:0;opacity:.6;transition:transform .15s} .setting-group .grouphead .chev svg{width:16px;height:16px} .setting-group.collapsed .grouphead .chev{transform:rotate(-90deg)} .setting-group.collapsed .group-body{display:none} .sheetfoot{display:flex;gap:8px;margin-top:20px} .sheetfoot .btn{flex:1;text-align:center} .test{font-family:var(--mono);font-size:11.5px;color:var(--mist);margin-top:6px;min-height:16px} .test.up{color:var(--ok)} .test.down{color:var(--alarm)} /* ---------- release list ---------- */ .rel{border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;background:var(--panel-2)} .rel+.rel{margin-top:7px} .rel.rejected{opacity:.55} .rel .relname{font-size:13px;font-weight:500;overflow-wrap:anywhere;margin:0} .rel .relmeta{font-family:var(--mono);font-size:11px;color:var(--mist);margin:5px 0 0; display:flex;gap:10px;flex-wrap:wrap} .rel .why{font-size:11.5px;color:var(--alarm);margin:5px 0 0} .relhead{display:flex;gap:10px;align-items:flex-start} /* ---------- bulk bar ---------- */ .bulkbar{position:fixed;left:var(--side-w);right:0;bottom:0;z-index:50;background:var(--panel-2); border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom)); display:none;gap:10px;align-items:center} @media(max-width:880px){ .bulkbar{left:0} } .bulkbar.on{display:flex} .bulkbar .count{font-family:var(--mono);font-size:12.5px;flex:1} /* ---------- embedded app frames ---------- */ /* Full-bleed within whatever main leaves next to the sidebar — no viewport trick needed since main is already flush against the rail. */ .framewrap{position:relative;background:var(--panel);overflow:hidden; border-top:1px solid var(--line);width:100%} .framewrap iframe{display:block;border:0;transform-origin:0 0} .zoomval{font-family:var(--mono);font-size:12px;color:var(--mist);min-width:40px;text-align:center} /* Frame controls live in the top strip and only appear on a frame tab. */ .framectl{display:flex;align-items:center;gap:4px;flex:none} .framectl[hidden]{display:none} .framectl .iconbtn{padding:6px 10px} /* No chrome between the strip and the frame — every pixel goes to the frame. */ main.framing{padding:0} /* Clicking around inside the embedded app can shift focus to an element the browser wants to scroll into view — without this, that drags the OUTER page along with it (the visible "jump"), even though the iframe has its own scrollbar for its own content. */ body.is-framing{overflow:hidden;height:100vh} body.is-framing .search-trigger{display:none} body.is-framing .notif-trigger{display:none} /* Generic — used wherever a checkbox or color picker shows up in a .field (Digest settings, and anywhere else that reuses the same pattern), not scoped to one specific screen. */ input[type=checkbox]{width:18px;height:18px;accent-color:var(--paper);cursor:pointer} input[type=color]{width:54px;height:34px;padding:2px;border:1px solid var(--line); border-radius:8px;background:var(--panel-2);cursor:pointer} .noticebox{width:100%;min-height:130px;background:var(--panel-2);border:1px solid var(--line); border-radius:var(--r);padding:12px;font:inherit;font-size:14px;color:var(--paper);resize:vertical} .logbox{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r); padding:12px;font-family:var(--mono);font-size:11.5px;white-space:pre-wrap; max-height:300px;overflow:auto;color:var(--mist);margin-top:12px} /* Plain CSS bar charts — no charting library, consistent with the rest of this frontend. Horizontally scrollable so 30 thin daily bars stay legible on a phone rather than getting crushed to nothing. */ .barchart-wrap{overflow-x:auto;overflow-y:hidden} .barchart{display:flex;align-items:flex-end;gap:3px;height:110px;min-width:max-content; padding:4px 4px 0} .barchart .bar{width:9px;flex:none;min-height:2px;border-radius:2px 2px 0 0; background:var(--memo);position:relative} .barchart .bar.alt{background:var(--sab)} .barchart-labels{display:flex;justify-content:space-between;font-family:var(--mono); font-size:10px;color:var(--mist);margin-top:4px} select.plain,input.plain{background:var(--panel-2);border:1px solid var(--line); border-radius:8px;padding:9px 11px;font-size:14px;width:100%} /* ---------- toasts ---------- */ #toasts{position:fixed;left:var(--side-w);right:0;bottom:76px;z-index:80;display:flex; flex-direction:column;align-items:center;gap:6px;pointer-events:none;padding:0 16px} @media(max-width:880px){ #toasts{left:0} } .toast{background:var(--panel-2);border:1px solid var(--line);border-radius:8px; padding:9px 14px;font-size:13.5px;max-width:420px} .toast.bad{border-color:var(--alarm)} .spin{display:inline-block;width:13px;height:13px;border:2px solid var(--line); border-top-color:var(--paper);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px} @keyframes sp{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}} /* ---------- dedicated movie page ---------- */ #view-moviepage{position:relative} .moviepage-backdrop{position:relative;height:320px;margin:-20px -18px 0;background-size:cover; background-position:center 20%;background-color:var(--panel-2)} .moviepage-backdrop::after{content:"";position:absolute;inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.15) 0%, var(--bg) 100%)} .moviepage-content{position:relative;max-width:900px;margin:0 auto;padding-bottom:40px} .moviepage-backrow{display:flex;justify-content:flex-end;padding-top:14px; position:relative;z-index:2} .moviepage-hero{display:flex;gap:20px;margin-top:-90px;position:relative;z-index:1;align-items:flex-end} .moviepage-poster{width:140px;flex:none;border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.5); background:var(--panel-2)} .moviepage-titleblock{padding-bottom:4px} .moviepage-titleblock h1{font-size:26px;line-height:1.15;margin:0 0 6px} .moviepage-meta{color:var(--mist);font-size:13.5px;margin-bottom:8px} .moviepage-genres{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px} .moviepage-genre-tag{background:var(--panel-2);border:1px solid var(--line);border-radius:20px; padding:3px 11px;font-size:11.5px;color:var(--mist)} .moviepage-tagline{font-style:italic;color:var(--mist);font-size:14px;margin-top:6px} .moviepage-ratings{display:flex;gap:20px;margin:18px 0;flex-wrap:wrap} .moviepage-rating{display:flex;flex-direction:column;align-items:flex-start;gap:2px} .moviepage-rating b{font-size:18px} .moviepage-rating small{font-family:var(--mono);font-size:10px;color:var(--mist); text-transform:uppercase;letter-spacing:.06em} .moviepage-rating a{color:var(--paper);text-decoration:none} .moviepage-rating a:hover{text-decoration:underline} .moviepage-cta{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 20px} .moviepage-section{margin-top:30px} .moviepage-section h3{font-family:var(--mono);font-size:11px;text-transform:uppercase; letter-spacing:.08em;color:var(--mist);margin-bottom:12px} .moviepage-cast{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px} .moviepage-cast-card{flex:none;width:88px;text-align:center} .moviepage-cast-photo{width:88px;height:88px;border-radius:50%;object-fit:cover; background:var(--panel-2);display:block;margin-bottom:6px} .moviepage-cast-card p{font-size:12px;line-height:1.35;margin:0} .moviepage-cast-card p.character{color:var(--mist);font-size:11px} .moviepage-crew{display:flex;flex-wrap:wrap;gap:8px 24px} .moviepage-crew-item b{font-size:13.5px;display:block} .moviepage-crew-item small{color:var(--mist);font-family:var(--mono);font-size:10.5px; text-transform:uppercase;letter-spacing:.06em} .moviepage-trailer{position:relative;padding-top:56.25%;border-radius:10px;overflow:hidden; background:var(--panel-2)} .moviepage-trailer iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .moviepage-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px} .moviepage-gallery img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px; background:var(--panel-2)} .moviepage-production{display:flex;flex-wrap:wrap;gap:8px 32px} .moviepage-production-item small{display:block;color:var(--mist);font-family:var(--mono); font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px} @media(max-width:600px){ .moviepage-hero{flex-direction:column;align-items:flex-start} .moviepage-poster{width:110px} .moviepage-backdrop{height:220px} } /* ---------- shortcuts ---------- */ .shortcut-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:18px 12px} .shortcut-tile{position:relative;display:flex;flex-direction:column;align-items:center; gap:6px;cursor:pointer;background:none;border:0;padding:0;font-family:inherit} .shortcut-tile-icon{width:56px;height:56px;border-radius:16px;background:var(--panel-2); border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden; transition:box-shadow .15s} .shortcut-tile-icon img{width:32px;height:32px;object-fit:contain} .shortcut-tile-label{font-size:12px;color:var(--paper);text-align:center;max-width:80px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .shortcut-grid.mode-edit .shortcut-tile-icon{box-shadow:0 0 0 2px var(--paper)} .shortcut-grid.mode-delete .shortcut-tile-icon{box-shadow:0 0 0 2px var(--alarm)} #shortcut-edit-mode.active,#shortcut-delete-mode.active,#qrail-edit-mode.active{background:var(--paper);color:var(--ink)} /* ---------- plex users ---------- */ .plex-user-tile-icon{border-radius:50%} .plex-user-tile-icon img{width:100%;height:100%;object-fit:cover;border-radius:50%} .plex-user-avatar-lg{width:72px;height:72px;border-radius:50%;object-fit:cover; background:var(--panel-2);border:1px solid var(--line);flex:none} .plex-user-header{display:flex;align-items:center;gap:16px;margin-bottom:22px} .plex-user-header h1{font-size:24px;margin:0} .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-bottom:24px} .stat-card{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px} .stat-card small{display:block;color:var(--mist);font-family:var(--mono);font-size:10px; text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px} .stat-card b{font-size:19px} .most-watched-row{display:flex;justify-content:space-between;align-items:center; padding:8px 0;border-bottom:1px solid var(--line)} .most-watched-row:last-child{border-bottom:0}