/* ========== Root palette ========== */
:root{
--bg:#0b1020; /* deep navy */
--bg2:#0f172a; /* slate */
--card:#111827; /* card surface */
--muted:#94a3b8; /* muted text */
--border:#1f2937; /* borders */
--text:#e5e7eb; /* foreground */
--brand:#f59e0b; /* Plex orange accent */
--ok:#86efac; /* success */
--warn:#fbbf24; /* warning */
--portal-bg-color: #0b1020;
}
/* Reset / Base */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
body.modal-open{overflow:hidden;}
/* ========== Overseerr-like background ========== */
/* Layered gradients for rich depth */
.bg{
position: relative;
display: flex;
flex-direction: column;
min-height: 100vh;
background:
radial-gradient(70% 60% at 10% 10%, #1e293b 0%, transparent 60%),
radial-gradient(70% 60% at 90% 20%, #0b1220 0%, transparent 55%),
linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
overflow-x: hidden;
overflow-y: auto;
}
.bg.bg-mode-solid{
background: var(--portal-bg-color);
}
.bg.bg-mode-image{
background-image:
linear-gradient(180deg, rgba(11,16,32,.36), rgba(11,16,32,.62)),
var(--portal-bg-image);
background-position: center, center;
background-size: cover, cover;
background-repeat: no-repeat, no-repeat;
background-color: var(--portal-bg-color);
}
.bg.bg-mode-image.bg-image-fit{
background-size: cover, contain;
}
.bg.bg-mode-image.bg-image-centered{
background-size: cover, auto;
}
.bg.bg-mode-image.bg-image-original{
background-position: center, left top;
background-size: cover, auto;
}
.bg.bg-mode-image.bg-image-stretch{
background-size: cover, 100% 100%;
}
.bg.bg-mode-image.bg-image-tile{
background-position: center, left top;
background-size: cover, auto;
background-repeat: no-repeat, repeat;
}
/* Animated film grain (very subtle) */
.bg::after{
content:"";
position:fixed; inset:0;
background-image: repeating-radial-gradient(rgba(255,255,255,.012) 0 1px, transparent 2px 4px);
opacity:.25;
mix-blend-mode: soft-light;
animation: grain 12s steps(10) infinite;
pointer-events:none;
}
@keyframes grain{
0%{transform:translate(0,0)}
10%{transform:translate(-1%,1%)}
20%{transform:translate(1%,-1%)}
30%{transform:translate(-1%,0)}
40%{transform:translate(1%,1%)}
50%{transform:translate(0,-1%)}
60%{transform:translate(-1%,1%)}
70%{transform:translate(1%,0)}
80%{transform:translate(-1%,-1%)}
90%{transform:translate(1%,-1%)}
100%{transform:translate(0,0)}
}
/* ========== Layout ========== */
.center{flex:1;min-height:0;display:grid;place-items:center;padding:2rem;position:relative;z-index:1}
.card{
width:100%;max-width:520px;
background:linear-gradient(180deg, rgba(17,24,39,.9), rgba(17,24,39,.92));
border:1px solid var(--border);
padding:2rem;border-radius:16px;
box-shadow:0 10px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.02) inset;
backdrop-filter: blur(6px);
animation: fadeIn .8s ease-out both;
position:relative;
overflow:hidden;
}
.card.card-mode-solid{background:var(--portal-card-color, #111827);}
.brand{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-bottom:1.25rem}
.logo{width:42px;height:42px;border-radius:8px}
.portal-logo-image{
width:min(100%, 320px);
height:auto;
max-height:120px;
border-radius:0;
object-fit:contain;
background:transparent;
display:block;
}
h1{font-size:1.6rem;margin:0}
.muted{color:var(--muted)}
.footnote{margin-top:1rem;color:var(--muted);font-size:.9rem}
/* ========== Buttons ========== */
.auth-btn {
font-size: 18px;
font-weight: 700;
padding: 14px 22px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
border: 1px solid transparent;
cursor: pointer;
line-height: 1;
transition:
transform .18s ease,
box-shadow .18s ease,
background-color .18s ease,
border-color .18s ease;
}
.auth-btn:hover:not(:disabled) {
transform: translateY(-2px);
}
.auth-btn:active:not(:disabled) {
transform: translateY(0);
}
.auth-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.auth-btn:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.65);
outline-offset: 2px;
}
/* Overseerr-style Plex CTA in Plex Orange */
.plex-btn {
background: #e5a00d; /* Plex orange */
border: 1px solid #d48f0b;
color: #000000; /* black text + icon */
font-size: 18px;
font-weight: 700;
padding: 14px 22px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
box-shadow: 0 6px 20px rgba(229, 160, 13, 0.25);
transition:
transform .18s ease,
box-shadow .18s ease,
background-color .18s ease,
border-color .18s ease;
}
.plex-btn:hover {
background: #f59e0b; /* brighter Plex orange */
border-color: #cc7a00;
box-shadow: 0 12px 36px rgba(229, 160, 13, 0.35);
transform: translateY(-2px);
}
.plex-btn:active {
transform: translateY(0);
background: #d48f0b;
border-color: #a86400;
}
/* ---------- Icon sizing inside the button (applies to Emby/Jellyfin ![]()
, inline