/* ============================================================
   Anime UI v9 — Foundation (Step 00a)
   Layout A/B, typography, components, 8 page themes.
   ============================================================ */

/* ---------- Fonts (self-hosted; drop files in static/fonts/) ---------- */
@font-face{font-family:"Inter";src:url("/static/fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/static/fonts/Inter-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/static/fonts/Inter-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/static/fonts/Inter-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  --ink:#0B1530; --muted:#5B6B84; --pill:#15273A;
  --card:rgba(255,255,255,.86); --line:rgba(11,21,48,.08);
  --font:"Inter","Segoe UI",system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:var(--font);color:var(--ink);background:var(--bg,#FAFAFC)}
a{color:inherit}

/* ---------- Typography ---------- */
h1.page-title{font-size:44px;font-weight:600;letter-spacing:-0.02em;color:var(--ink);margin:0 0 6px}
@media (min-width:1400px){h1.page-title{font-size:48px}}
.page-subtitle{font-size:15px;color:var(--muted);margin:0 0 28px}
.brand{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.2em}
.brand-sub{font-size:10px;letter-spacing:.02em;color:var(--muted);display:block;margin-top:2px}
::placeholder{font-size:15px;color:var(--muted);opacity:.8}

/* ---------- Layout A: App page (sidebar + content + art) ---------- */
body.layout-app{display:flex;min-height:100vh}
.app-sidebar{
  width:15%;min-width:200px;max-width:240px;flex:0 0 auto;
  min-height:100vh;padding:24px 16px;
  background:linear-gradient(180deg,var(--side-from,#1B2A4A),var(--side-to,#15273A));
  display:flex;flex-direction:column;gap:24px;
}
.app-sidebar .brand{color:#fff}
body.theme-byakuya .app-sidebar .brand{color:var(--ink)}
.app-sidebar nav{display:flex;flex-direction:column;gap:6px}
.sidebar-link{
  display:flex;align-items:center;gap:12px;height:48px;padding:0 14px;
  border-radius:8px;color:var(--side-ink,rgba(255,255,255,.85));
  font-size:15px;text-decoration:none;
}
.sidebar-link svg,.sidebar-link .icon{width:20px;height:20px;flex:0 0 auto}
.sidebar-link.active{
  color:#fff;
  background:linear-gradient(135deg,var(--side-active-from,var(--accent)),var(--side-active-to,var(--accent-strong)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 16px -4px var(--accent);
}

.app-main{flex:1 1 auto;min-width:0;padding:40px 48px;position:relative;max-width:calc(100% - 42vw + 15%)}
.app-main-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}

.app-art{
  position:fixed;right:0;top:0;height:100vh;width:42vw;
  object-fit:cover;object-position:right center;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 35%);
  mask-image:linear-gradient(to right,transparent 0%,#000 35%);
  z-index:0;
}
.app-caption{position:fixed;right:32px;bottom:28px;text-align:right;z-index:1;max-width:32vw;background:rgba(10,14,26,.42);backdrop-filter:blur(3px);border-radius:10px;padding:10px 16px}
.app-caption .cap-name{font-weight:600;font-size:15px;color:var(--cap-name,#fff)}
.app-caption .cap-quote{font-size:13px;color:var(--cap-quote,#fff);opacity:.9}

/* ---------- Layout B: Auth page (rail + form + art) ---------- */
body.layout-auth{display:flex;min-height:100vh}
.auth-rail{
  width:15%;min-width:150px;flex:0 0 auto;min-height:100vh;
  background:linear-gradient(180deg,var(--rail-from,#F4F7FB),var(--rail-to,#E3ECF7));
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:24px 16px;
}
.auth-rail .kanji{font-size:64px;line-height:1;color:var(--kanji,#CBD6E4);opacity:.6;font-weight:800}
.auth-rail .cap-name{font-weight:600;font-size:14px;color:var(--cap-name,var(--ink))}
.auth-rail .cap-quote{font-size:12px;color:var(--cap-quote,var(--muted))}

.auth-form-col{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:40px;position:relative;z-index:1}
.auth-form{width:100%;max-width:420px}
.auth-form .brand{color:var(--ink);margin-bottom:32px;display:block}
.auth-links{margin-top:20px;font-size:14px;color:var(--muted)}

.auth-art{
  position:fixed;right:0;top:0;height:100vh;width:45%;
  object-fit:cover;object-position:right center;z-index:0;
}

/* ---------- Components ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 6px 20px rgba(11,21,48,.08);backdrop-filter:blur(6px);
  padding:24px;
}

.field{position:relative;margin-bottom:16px}
.field label.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.field .field-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;fill:#1B2A4A;pointer-events:none}
.field input,.field select{
  width:100%;height:48px;border-radius:8px;border:1px solid #CBD6E4;
  background:rgba(255,255,255,.9);padding:0 16px 0 44px;font-size:15px;font-family:var(--font);color:var(--ink);
}
.field textarea{
  width:100%;min-height:84px;border-radius:8px;border:1px solid #CBD6E4;
  background:rgba(255,255,255,.9);padding:12px 16px 12px 44px;font-size:15px;font-family:var(--font);
  color:var(--ink);resize:vertical;
}
.field textarea + .field-icon{top:20px;transform:none}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 40%,transparent);
}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) center,calc(100% - 15px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat}

.btn-primary{
  width:100%;height:48px;border:0;border-radius:6px;background:var(--accent);color:#fff;
  font-weight:600;font-size:15px;font-family:var(--font);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  position:relative;overflow:hidden;transition:background-color .15s,transform .15s;
}
.btn-primary::after{content:"→"}
.btn-primary:hover{background:var(--accent-strong);transform:translateY(-1px)}

/* ---------- Selection / focus / scrollbar / caret theming ---------- */
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input,textarea{caret-color:var(--accent)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- Account pill ---------- */
.account-pill{
  position:fixed;top:24px;right:calc(42vw + 24px);z-index:2;
  display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;
  background:var(--pill);color:#fff;border-radius:999px;font-size:14px;cursor:pointer;
}

/* ============================================================
   8 THEMES
   ============================================================ */
body.theme-ichigo{ /* orange · black · white flame */
  --bg:#FAFAFC; --rail-from:#FBF0E6; --rail-to:#F6DCC6; --edge:#FE6A11;
  --accent:#FE6A11; --accent-strong:#CC3D07; --accent-soft:#FFE9DA;
  --kanji:#E3B9A0; --cap-name:#8A3A12; --cap-quote:#A5501C;
  background-image:radial-gradient(ellipse at top right,rgba(255,255,255,.6),transparent 60%);
}
body.theme-yoruichi{ /* purple · lavender */
  --bg:#F3ECFC; --side-from:#31287D; --side-to:#2E2E6B;
  --side-active-from:#5F2DD7; --side-active-to:#7767C8; --side-ink:#DCD6FF;
  --accent:#6C2BFD; --accent-strong:#5721BE; --accent-soft:#EBE0FF;
  --spark-from:#4DA3FF; --spark-to:#6C2BFD; --cap-name:#FFFFFF; --cap-quote:#FFFFFF;
  background-image:radial-gradient(circle at 15% 20%,rgba(108,43,253,.12),transparent 45%),radial-gradient(circle at 5% 80%,rgba(108,43,253,.10),transparent 40%);
}
body.theme-urahara{ /* deep green · mint */
  --bg:#EBF2F0; --side-from:#124549; --side-to:#0F4649;
  --side-active-from:#148674; --side-active-to:#1B927A; --side-ink:#D5EBE6;
  --accent:#148674; --accent-strong:#0C6B59; --accent-soft:#DDF0EA;
  --cap-name:#FFFFFF; --cap-quote:#FFFFFF;
  background-image:radial-gradient(circle at 10% 15%,rgba(20,134,116,.12),transparent 45%);
}
body.theme-toshiro{ /* ice blue */
  --bg:#E6F5FD; --side-from:#1B5479; --side-to:#15608F;
  --side-active-from:#1992EE; --side-active-to:#3AA8F8; --side-ink:#D6EBFA;
  --accent:#1899F4; --accent-strong:#1A85D4; --accent-soft:#DCEFFC;
  --cap-name:#EAF6FF; --cap-quote:#BFE6FC;
  background-image:linear-gradient(115deg,transparent 60%,rgba(24,153,244,.08) 100%);
}
body.theme-rukia{ /* pale frost blue */
  --bg:#F2F7FD; --rail-from:#F4F7FB; --rail-to:#E3ECF7; --edge:#268FDD;
  --accent:#2493EB; --accent-strong:#1A7ACB; --accent-soft:#DCEBFA;
  --kanji:#B7C6D8; --cap-name:#2D4A73; --cap-quote:#3C5A85;
  background-image:linear-gradient(115deg,transparent 60%,rgba(36,147,235,.06) 100%);
}
body.theme-byakuya{ /* cream · gold · sakura */
  --bg:#EDEFF3; --side-from:#EEEDEE; --side-to:#E8DFC9; --side-ink:#0F1B33;
  --side-active-from:#B79C5B; --side-active-to:#D4BA6A;
  --accent:#A08446; --accent-strong:#7E6630; --accent-soft:#F3EBD6; --petal:#F4C7D2;
  --cap-name:#F4E4B8; --cap-quote:#E8CE8E;
  background-image:radial-gradient(circle at 90% 10%,rgba(244,199,210,.15),transparent 40%);
}
body.theme-kenpachi{ /* crimson */
  --bg:#F8E6E4; --side-from:#562422; --side-to:#512321;
  --side-active-from:#B32F29; --side-active-to:#BD3631; --side-ink:#F0CFCB;
  --accent:#BB2D28; --accent-strong:#8E1F1B; --accent-soft:#F8DAD7;
  --cap-name:#FFFFFF; --cap-quote:#E8554E;
  background-image:radial-gradient(circle at 20% 80%,rgba(187,45,40,.12),transparent 45%);
}
body.theme-aizen{ /* steel blue-grey */
  --bg:#F5F7FA; --rail-from:#C6D0DB; --rail-to:#8994A4; --edge:#546C86;
  --accent:#546C86; --accent-strong:#3C546D; --accent-soft:#E2E8EF; --pill:#202A3C;
  --kanji:#8E9DB4; --cap-name:#1F2A3C; --cap-quote:#2F3E55;
  background-image:linear-gradient(115deg,transparent 55%,rgba(84,108,134,.08) 100%);
}

/* ---------- Themed button-hover flourishes (disabled on reduced motion) ---------- */
@media (prefers-reduced-motion:no-preference){
  .btn-primary{background-size:200% 100%}
  body.theme-ichigo .btn-primary:hover{background-image:linear-gradient(100deg,var(--accent-strong) 0%,#FFB27A 45%,var(--accent-strong) 55%);animation:sweep 1s ease-in-out}
  body.theme-yoruichi .btn-primary:hover{background-image:linear-gradient(100deg,var(--accent-strong) 0%,var(--spark-from) 45%,var(--accent-strong) 55%);animation:sweep 1s ease-in-out}
  body.theme-urahara .btn-primary:hover{background-image:linear-gradient(100deg,var(--accent-strong) 0%,#8FE3C6 45%,var(--accent-strong) 55%);animation:sweep 1s ease-in-out}
  body.theme-toshiro .btn-primary:hover{background-image:linear-gradient(100deg,var(--accent-strong) 0%,#D6F1FE 45%,var(--accent-strong) 55%);animation:sweep 1s ease-in-out}
  body.theme-rukia .btn-primary:hover{background-image:linear-gradient(100deg,var(--accent-strong) 0%,#FFFFFF 45%,var(--accent-strong) 55%);animation:sweep 1s ease-in-out}
  body.theme-byakuya .btn-primary:hover{background-image:linear-gradient(100deg,var(--accent-strong) 0%,#F3E1A8 45%,var(--accent-strong) 55%);animation:sweep 1s ease-in-out}
  body.theme-kenpachi .btn-primary:hover{background-image:linear-gradient(100deg,var(--accent-strong) 0%,#FF7A72 45%,var(--accent-strong) 55%);animation:sweep 1s ease-in-out}
  body.theme-aizen .btn-primary:hover{background-image:linear-gradient(100deg,var(--accent-strong) 0%,#CBD8E6 45%,var(--accent-strong) 55%);animation:sweep 1s ease-in-out}
  @keyframes sweep{from{background-position:100% 0}to{background-position:0 0}}

  body.theme-byakuya .petal{
    position:fixed;top:-10%;width:14px;height:14px;background:var(--petal);
    border-radius:60% 0 60% 0;opacity:.7;pointer-events:none;animation:fall 9s linear infinite;
  }
  body.theme-byakuya .petal:nth-of-type(1){left:20%;animation-delay:0s}
  body.theme-byakuya .petal:nth-of-type(2){left:50%;animation-delay:3s}
  body.theme-byakuya .petal:nth-of-type(3){left:80%;animation-delay:6s}
  @keyframes fall{to{transform:translateY(110vh) rotate(200deg)}}
}

/* ---------- Account pill dropdown (step 00b) ---------- */
.account-panel{
  position:absolute;top:calc(100% + 8px);right:0;min-width:160px;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 30px rgba(11,21,48,.18);padding:6px;z-index:40;
}
.account-panel a,.account-panel .menu-logout{
  display:block;width:100%;text-align:left;padding:10px 12px;border-radius:6px;
  font-size:14px;color:var(--ink);text-decoration:none;background:none;border:0;
  font-family:var(--font);cursor:pointer;
}
.account-panel a:hover{background:var(--accent-soft,rgba(11,21,48,.06))}
.account-panel .menu-logout{color:#B3261E}
.account-panel .menu-logout:hover{background:#FBEAE9}
.account-divider{height:1px;background:var(--line);margin:4px 0}
.account-trigger{background:none;border:0;color:inherit;display:flex;align-items:center;gap:8px;font-family:var(--font);font-size:14px;cursor:pointer;padding:0}
.account-trigger svg{transition:transform .15s}
.account-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}

/* ---------- Password toggle (step 00b) ---------- */
.password-wrap{position:relative}
.password-wrap input{padding-right:44px}
.password-toggle{
  position:absolute;right:7px;top:7px;width:34px;height:34px;border-radius:6px;
  border:0;background:transparent;color:#1B2A4A;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:color .15s;
}
.password-toggle svg{width:20px;height:20px}
.password-toggle:hover{color:var(--accent)}
.password-toggle[aria-pressed="true"]{color:var(--accent)}
.password-toggle[aria-pressed="true"]{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent) 55%,transparent))}

/* Themed pupil flourish when revealed */
body.theme-ichigo .password-toggle[aria-pressed="true"] .eye-pupil{d:path("M12 8.5c1.6 1.6 2.4 3 2.4 4.2a2.4 2.4 0 1 1-4.8 0c0-1.2.8-2.6 2.4-4.2Z")}
body.theme-byakuya .password-toggle[aria-pressed="true"] .eye-pupil{d:path("M12 9.2c1.4.4 2.4 1.5 2.4 2.8a2.4 2.4 0 0 1-4.8 0c0-1.3 1-2.4 2.4-2.8Z")}
body.theme-aizen .password-toggle[aria-pressed="true"] .eye-pupil{d:path("M12 9.2 14 12l-2 2.8-2-2.8Z")}
body.theme-rukia .password-toggle[aria-pressed="true"] .eye-pupil{d:path("M12 9v6M9 12h6M9.9 9.9l4.2 4.2M14.1 9.9l-4.2 4.2")}

/* ---------- Step 01: Login (Ichigo) ---------- */
.auth-rail{border-left:3px solid var(--edge,transparent)}
.kanji-glyph{width:auto;height:110px;opacity:.7;object-fit:contain;filter:grayscale(1) sepia(1) hue-rotate(0deg);align-self:flex-start}
.error-banner{
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  color:var(--accent-strong);border-radius:8px;padding:10px 14px;font-size:14px;margin-bottom:16px;
}
.btn-primary.btn-leading{gap:10px}
.btn-primary.btn-leading::after{content:none}
.btn-primary.btn-leading .icon{width:16px;height:16px}
.btn-caps{text-transform:uppercase;letter-spacing:.12em;font-size:14px}
.login-links{display:flex;justify-content:center;gap:8px;margin-top:20px;font-size:12px;color:var(--ink)}
.login-links a{text-decoration:none}
.login-links a:hover{text-decoration:underline}
.login-links .dot{color:var(--muted)}

/* ---------- Step 02: Dashboard (Yoruichi) ---------- */
.app-main-brand{color:var(--ink);display:block;margin-bottom:24px}
.message-banner{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);color:var(--accent-strong);border-radius:8px;padding:10px 14px;font-size:14px;margin-bottom:16px}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.stat-card{display:flex;flex-direction:column;gap:6px;padding:18px 20px}
.stat-label{font-size:14px;color:var(--muted)}
.stat-value{font-size:26px;font-weight:700;color:var(--ink)}
.sparkline{width:100%;height:30px;margin-top:2px}
.sparkline polyline{fill:none;stroke:var(--accent);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}

.storage-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.storage-card{padding:18px 20px}
.storage-label{font-size:14px;color:var(--muted);margin-bottom:4px}
.storage-value{font-size:18px;font-weight:600;color:var(--ink);display:block;margin-bottom:10px}
.progress-track{height:12px;border-radius:999px;background:#D6DAF0;overflow:hidden}
.progress-fill{height:100%;width:0%;border-radius:999px;background:var(--accent);transition:width .4s ease}

.panel{padding:22px 24px;margin-bottom:16px}
.panel-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-strong)}
.panel-sub{font-size:13px;color:var(--muted);margin:4px 0 14px}
.request-card{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.request-card:first-of-type{border-top:0}
.request-email{display:block;font-size:14px;color:var(--ink)}
.request-meta{display:block;font-size:12px;color:var(--muted)}
.request-actions{display:flex;gap:8px}
.btn-approve,.btn-reject{border:0;border-radius:6px;padding:8px 14px;font-size:13px;font-weight:600;font-family:var(--font);cursor:pointer}
.btn-approve{background:var(--accent-soft);color:var(--accent-strong)}
.btn-approve:hover{background:var(--accent);color:#fff}
.btn-reject{background:#FBEAE9;color:#B3261E}
.btn-reject:hover{background:#B3261E;color:#fff}

@media (max-width:1100px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .storage-grid{grid-template-columns:1fr}
}

/* ---------- Step 03: Downloads (Urahara) ---------- */
.download-intro{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--muted);margin-bottom:16px}
.download-intro .intro-icon{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;color:var(--accent-strong)}
.download-intro .intro-icon svg{width:18px;height:18px}

.library-controls{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.search-field{flex:1 1 260px;margin-bottom:0}
.search-field input{padding-left:44px}
.library-controls select{
  height:44px;border-radius:8px;border:1px solid #CBD6E4;background:#fff;padding:0 32px 0 14px;
  font-size:14px;font-family:var(--font);color:var(--ink);
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) center,calc(100% - 13px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.control-btn{
  width:44px;height:44px;border-radius:8px;border:1px solid #CBD6E4;background:#fff;color:#1B2A4A;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;
}
.control-btn:hover{border-color:var(--accent);color:var(--accent)}
.control-btn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}
.order-btn svg{transition:transform .15s}
.order-btn.order-desc svg{transform:rotate(180deg)}

.library-summary{font-size:13px;color:var(--muted);margin-bottom:12px}

.file-list,.media-list{padding:0;overflow:hidden}
.file-list:empty,.media-list:empty{display:none}
#file-list > *,#media-list > * {
  display:flex;align-items:center;gap:14px;min-height:68px;padding:0 20px;
  border-top:1px solid var(--line);
}
#file-list > *:first-child,#media-list > *:first-child{border-top:0}
.file-icon{flex:0 0 auto;width:36px;height:36px}
.file-name{font-size:15px;font-weight:500;color:var(--ink);display:block}
.btn-download,.download-btn,.download-link{
  margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  height:40px;min-width:130px;padding:0 16px;border-radius:6px;border:0;
  background:#127D68;color:#fff;font-size:14px;font-weight:600;font-family:var(--font);
  text-decoration:none;justify-content:center;cursor:pointer;
}
.btn-download:hover,.download-btn:hover,.download-link:hover{background:#0E6553}

/* Grid view (toggled via #view-toggle, remembered in sessionStorage) */
.file-list.grid-view,.media-list.grid-view{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;padding:4px;
}
.file-list.grid-view > *,.media-list.grid-view > *{
  flex-direction:column;align-items:flex-start;gap:10px;min-height:0;
  border:1px solid var(--line);border-radius:10px;padding:16px;
}
.file-list.grid-view .btn-download,.media-list.grid-view .btn-download,
.file-list.grid-view .download-btn,.media-list.grid-view .download-btn{margin-left:0;width:100%}

/* Grouped <details> sections */
#file-list details,#media-list details{border-top:1px solid var(--line)}
#file-list details:first-child,#media-list details:first-child{border-top:0}
#file-list summary,#media-list summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;font-weight:600;font-size:14px;color:var(--ink);background:#fff;
}
#file-list summary::-webkit-details-marker,#media-list summary::-webkit-details-marker{display:none}
#file-list summary::after,#media-list summary::after{content:"+";color:var(--accent);font-weight:700;font-size:16px}
#file-list details[open] summary::after,#media-list details[open] summary::after{content:"–"}

/* ---------- Step 04: Upload (Toshiro) ---------- */
.destination-switch{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.destination{
  display:flex;align-items:center;gap:14px;text-align:left;padding:16px 18px;border-radius:10px;
  border:1.5px solid var(--line);background:#fff;cursor:pointer;font-family:var(--font);
}
.destination-mark{font-size:12px;font-weight:700;color:var(--muted);background:#EEF1F6;border-radius:6px;padding:2px 7px}
.destination strong{display:block;font-size:15px;color:var(--ink)}
.destination small{display:block;font-size:12px;color:var(--muted)}
.destination.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

.jellyfin-help{font-size:13px;color:var(--muted);background:var(--accent-soft);border-radius:8px;padding:10px 14px;margin-bottom:12px}
.jellyfin-controls{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.jellyfin-type-switch{display:flex;border:1px solid #CBD6E4;border-radius:8px;overflow:hidden}
.jellyfin-type{border:0;background:#fff;padding:8px 16px;font-size:13px;font-family:var(--font);cursor:pointer;color:var(--ink)}
.jellyfin-type.active{background:var(--accent);color:#fff}
.jellyfin-show-fields{display:flex;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.jellyfin-show-fields label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.jellyfin-show-fields input,.jellyfin-show-fields select{height:40px;border-radius:8px;border:1px solid #CBD6E4;padding:0 12px;font-family:var(--font)}

.drop-zone{
  background:#fff;border:1.5px dashed color-mix(in srgb,var(--accent) 60%,transparent);border-radius:10px;
  min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:32px;transition:background-color .15s,border-style .15s;
}
.drop-zone.drag-over{border-style:solid;background:var(--accent-soft)}
.drop-content{display:flex;flex-direction:column;align-items:center;gap:8px}
.drop-symbol{display:block;margin-bottom:4px}
.drop-zone.drag-over .drop-symbol svg{animation:cloud-bounce .6s ease-in-out infinite}
@media (prefers-reduced-motion:no-preference){
  @keyframes cloud-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
}
.drop-content h2{font-size:18px;font-weight:600;color:var(--accent);margin:0}
.drop-or{font-size:12px;color:var(--muted)}
.drop-meta{margin-top:18px;font-size:12px;color:var(--muted);text-align:center}
.drop-meta .dot{margin:0 6px;color:var(--muted)}

.upload-queue{display:flex;flex-direction:column;gap:10px;margin-top:16px;padding:0 48px 40px}
.upload-queue:empty{display:none}
.upload-queue > *{
  display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:14px 18px;
}

/* ---------- Step 05: Request Access (Rukia) ---------- */
.auth-info{margin-top:18px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.auth-info strong{color:var(--ink);font-size:13px;margin-bottom:2px}

/* ---------- Step 06: Security (Byakuya) ---------- */
.security-form{max-width:520px;display:flex;flex-direction:column;gap:16px}
.security-form .field{margin-bottom:0}
.password-strength{height:6px;border-radius:999px;background:#E8E2D0;overflow:hidden;margin-top:-8px}
.password-strength span{display:block;height:100%;width:0%;background:var(--accent);transition:width .2s ease}
.password-hint{font-size:12px;color:var(--muted);margin-top:-8px}
.security-note{font-size:13px;color:var(--accent-strong);background:var(--accent-soft);padding:14px 16px;line-height:1.5}

/* ---------- Step 07: Jellyfin controls (Kenpachi, scoped within Upload page) ---------- */
.kenpachi-scope{
  --accent:#BB2D28; --accent-strong:#8E1F1B; --accent-soft:#F8DAD7;
  display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  background:#FBF0EF;border:1px solid #F0D3D1;border-radius:10px;padding:18px;margin-bottom:16px;
}
.kenpachi-scope > div{display:flex;flex-direction:column;gap:4px;flex:1 1 160px}
.kenpachi-scope label{font-size:14px;color:var(--ink)}
.kenpachi-scope input,.kenpachi-scope select{
  height:44px;border-radius:8px;border:1px solid #E3B9B6;padding:0 12px;font-family:var(--font);font-size:14px;
}
.kenpachi-upload-btn{flex:1 1 100%;background:var(--accent);font-weight:600}
.kenpachi-upload-btn::after{content:none}
.kenpachi-upload-btn:hover{background:var(--accent-strong)}

/* ---------- Step 09: centred-card pages (registration_sent, verification_result, totp_setup) ---------- */
body.center-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px;position:relative}
.center-card{max-width:480px;width:100%;text-align:center;padding:36px 32px}
.center-card h1{font-size:26px;font-weight:600;color:var(--ink);margin:0 0 12px}
.center-card .message{font-size:14px;color:var(--muted);margin:0 0 10px;line-height:1.5}
.center-card .email-display{font-size:16px;font-weight:600;color:var(--accent-strong);background:var(--accent-soft);border-radius:8px;padding:10px 14px;margin:12px 0}
.center-card .account-button{
  display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 26px;margin-top:14px;
  border-radius:6px;background:var(--accent);color:#fff;text-decoration:none;font-weight:600;font-size:14px;
}
.center-card .account-button:hover{background:var(--accent-strong)}

.totp-card{max-width:560px;text-align:left}
.totp-card h1{text-align:center}
.totp-card .page-subtitle{text-align:center}
.qr-box{display:flex;justify-content:center;align-items:center;padding:20px;margin:18px 0;border:2px solid var(--accent);border-radius:14px;background:#fff}
.qr-box img{display:block;width:220px;height:220px}
.code-box{word-break:break-all;padding:14px;border:1px solid var(--line);border-radius:10px;font-size:13px;background:#F7F8FB;margin-bottom:14px}

/* ============================================================
   Step 11 — Responsive
   ============================================================ */

/* 900–1200px: narrower art, narrower sidebar */
@media (max-width:1200px) and (min-width:901px){
  .app-art,.auth-art{width:34vw}
  .app-sidebar{width:200px;min-width:200px}
  .app-main{max-width:calc(100% - 34vw + 200px)}
  .account-pill{right:calc(34vw + 24px)}
}

/* <900px: sidebar becomes a top icon bar; art becomes a faint fixed background; auth rail becomes a slim top strip */
@media (max-width:900px){
  body.layout-app{display:block}
  .app-sidebar{
    width:100%;min-height:0;flex-direction:row;align-items:center;justify-content:center;
    padding:10px 12px;gap:4px;position:sticky;top:0;z-index:30;
  }
  .app-sidebar .brand{display:none}
  .app-sidebar nav{flex-direction:row;gap:4px}
  .sidebar-link{padding:0 10px;height:40px}
  .sidebar-link span:not(.icon){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

  .app-art{position:fixed;inset:0;width:100%;height:100%;opacity:.18;-webkit-mask-image:none;mask-image:none;z-index:-1}
  .app-caption{display:none}
  .app-main{max-width:100%;padding:24px 20px 40px}
  .account-pill{right:16px;top:12px}

  body.layout-auth{display:block}
  .auth-rail{
    width:100%;min-height:0;flex-direction:row;align-items:center;justify-content:center;
    padding:14px;gap:10px;
  }
  .kanji-glyph{display:none}
  .auth-rail .cap-quote{display:none}
  .auth-rail .cap-name{font-size:14px}
  .auth-art{position:fixed;inset:0;width:100%;height:100%;opacity:.18;z-index:-1}
  .auth-form-col{padding:24px 20px}

  .card{width:100%}
  .stat-grid,.storage-grid{grid-template-columns:1fr 1fr}
}

/* <620px: smaller H1, stacked controls, full-width row actions */
@media (max-width:620px){
  h1.page-title{font-size:34px}
  .stat-grid,.storage-grid{grid-template-columns:1fr}
  .library-controls{flex-direction:column;align-items:stretch}
  .library-controls select,.control-btn{width:100%}
  #file-list > *,#media-list > *{flex-wrap:wrap}
  .btn-download,.download-btn,.download-link{margin-left:0;width:100%;order:3}
  .destination-switch{grid-template-columns:1fr}
  .jellyfin-show-fields,.kenpachi-scope{flex-direction:column;align-items:stretch}
}

/* ============================================================
   Step 11 — Accessibility
   ============================================================ */
[aria-label]{ } /* icon-only buttons already carry aria-label per component (see templates) */
.control-btn:focus-visible,.password-toggle:focus-visible,.sidebar-link:focus-visible,
.account-trigger:focus-visible,.btn-primary:focus-visible,.destination:focus-visible,
.jellyfin-type:focus-visible,.card input:focus-visible,.card select:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

/* =========================================================
   V9 FINAL DESKTOP COLUMN FIX
   15vw sidebar | 43vw content | 42vw artwork
   Keeps artwork completely separate from functional content.
   ========================================================= */

@media (min-width: 1201px) {

    /* ---------- APP PAGES ---------- */

    body.layout-app {
        display: flex;
        min-height: 100vh;
        overflow-x: hidden;
    }

    body.layout-app .app-sidebar {
        flex: 0 0 15vw;
        width: 15vw;
        min-width: 15vw;
        position: relative;
        z-index: 10;
    }

    body.layout-app .app-main {
        flex: 0 0 43vw;
        width: 43vw;
        max-width: 43vw;
        min-width: 0;
        box-sizing: border-box;
        padding: 40px 42px;
        position: relative;
        z-index: 5;
    }

    body.layout-app .app-art {
        position: fixed;
        top: 0;
        right: 0;
        width: 42vw;
        height: 100vh;
        max-width: none;
        object-fit: cover;
        object-position: center center;
        z-index: 1;
        pointer-events: none;
    }

    body.layout-app .app-main-header,
    body.layout-app .app-main > * {
        position: relative;
        z-index: 6;
    }

    body.layout-app .account-pill {
        z-index: 20;
    }


    /* ---------- AUTH PAGES ---------- */

    body.layout-auth {
        display: flex;
        min-height: 100vh;
        overflow-x: hidden;
    }

    body.layout-auth .auth-rail {
        flex: 0 0 15vw;
        width: 15vw;
        min-width: 15vw;
        box-sizing: border-box;
        position: relative;
        z-index: 10;
    }

    body.layout-auth .auth-form-col {
        flex: 0 0 43vw;
        width: 43vw;
        max-width: 43vw;
        min-width: 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 40px 42px;
        position: relative;
        z-index: 5;
    }

    body.layout-auth .auth-form {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }

    body.layout-auth .auth-art {
        position: fixed;
        top: 0;
        right: 0;
        width: 42vw;
        height: 100vh;
        max-width: none;
        object-fit: cover;
        object-position: center center;
        z-index: 1;
        pointer-events: none;
    }

    body.layout-auth .auth-form-col > * {
        position: relative;
        z-index: 6;
    }
}


/* ---------- SUBTLE DEPTH WITHOUT OVERLAP ---------- */

body.layout-app .app-main,
body.layout-auth .auth-form-col {
    background: transparent;
}

body.layout-app .app-art,
body.layout-auth .auth-art {
    transition:
        opacity .45s ease,
        transform .65s cubic-bezier(.22,.61,.36,1);
}

body.layout-app .app-art:hover,
body.layout-auth .auth-art:hover {
    transform: scale(1.006);
}

@media (prefers-reduced-motion: reduce) {
    body.layout-app .app-art,
    body.layout-auth .auth-art {
        transition: none;
    }

    body.layout-app .app-art:hover,
    body.layout-auth .auth-art:hover {
        transform: none;
    }
}

/* =========================================================
   FINAL V9 APP / AUTH ALIGNMENT
   Desktop:
   15vw sidebar | 43vw content | 42vw artwork
   ========================================================= */

@media (min-width: 1201px) {

    body.layout-app {
        display: flex;
        min-height: 100vh;
        width: 100%;
        overflow-x: hidden;
    }

    body.layout-app .app-sidebar {
        flex: 0 0 15vw;
        width: 15vw;
        min-width: 15vw;
        max-width: 15vw;
        box-sizing: border-box;
        position: relative;
        z-index: 20;
    }

    body.layout-app .app-main {
        flex: 0 0 43vw;
        width: 43vw;
        max-width: 43vw;
        min-width: 0;
        box-sizing: border-box;
        padding: 40px 30px 50px;
        position: relative;
        z-index: 5;
    }

    body.layout-app .app-art {
        position: fixed;
        top: 0;
        right: 0;
        width: 42vw;
        height: 100vh;
        max-width: none;
        object-fit: cover;
        object-position: center center;
        z-index: 1;
        pointer-events: none;
    }

    body.layout-app .app-main > * {
        position: relative;
        z-index: 6;
    }

    /* Upload content gets a clean readable column. */
    body.theme-toshiro .app-main {
        padding-left: 30px;
        padding-right: 30px;
    }

    body.theme-toshiro .drop-zone {
        width: 100%;
        box-sizing: border-box;
    }

    /* ---------- AUTH ---------- */

    body.layout-auth {
        display: flex;
        min-height: 100vh;
        width: 100%;
        overflow-x: hidden;
    }

    body.layout-auth .auth-rail {
        flex: 0 0 15vw;
        width: 15vw;
        min-width: 15vw;
        max-width: 15vw;
        box-sizing: border-box;
        position: relative;
        z-index: 20;
    }

    body.layout-auth .auth-form-col {
        flex: 0 0 43vw;
        width: 43vw;
        max-width: 43vw;
        min-width: 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 30px;
        position: relative;
        z-index: 5;
    }

    body.layout-auth .auth-form {
        width: min(100%, 420px);
        margin: 0 auto;
    }

    body.layout-auth .auth-art {
        position: fixed;
        top: 0;
        right: 0;
        width: 42vw;
        height: 100vh;
        max-width: none;
        object-fit: cover;
        object-position: center center;
        z-index: 1;
        pointer-events: none;
    }

    body.layout-auth .auth-form-col > * {
        position: relative;
        z-index: 6;
    }
}

/* Keep animation subtle and efficient. */
.app-art,
.auth-art {
    transition: opacity .45s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}

.app-art:hover,
.auth-art:hover {
    transform: scale(1.004);
}

@media (prefers-reduced-motion: reduce) {
    .app-art,
    .auth-art {
        transition: none;
    }

    .app-art:hover,
    .auth-art:hover {
        transform: none;
    }
}

/* =========================================================
   V9 FINAL GEOMETRY FIX
   Desktop: 15vw rail | 43vw content | 42vw artwork
   No legacy offsets / overlap.
   ========================================================= */

@media (min-width: 1201px) {

  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow-x: hidden !important;
  }

  /* ---------- AUTH PAGES ---------- */

  body.layout-auth {
    display: grid !important;
    grid-template-columns: 15vw 43vw 42vw !important;
    width: 100vw !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.layout-auth .auth-rail {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 15vw !important;
    min-width: 15vw !important;
    max-width: 15vw !important;
    height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    position: relative !important;
    z-index: 20 !important;
  }

  body.layout-auth .auth-form-col {
    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 43vw !important;
    min-width: 43vw !important;
    max-width: 43vw !important;
    height: 100vh !important;

    margin: 0 !important;
    padding: 40px 30px !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    position: relative !important;
    z-index: 5 !important;
  }

  body.layout-auth .auth-form {
    width: min(100%, 420px) !important;
    max-width: 420px !important;
    margin: 0 auto !important;
  }

  body.layout-auth .auth-art {
    grid-column: 3 !important;
    grid-row: 1 !important;

    position: fixed !important;
    top: 0 !important;
    right: 0 !important;

    width: 42vw !important;
    min-width: 42vw !important;
    max-width: 42vw !important;
    height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;

    z-index: 1 !important;
    pointer-events: none !important;
  }

  /* ---------- APP PAGES ---------- */

  body.layout-app {
    display: grid !important;
    grid-template-columns: 15vw 43vw 42vw !important;
    width: 100vw !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.layout-app .app-sidebar {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 15vw !important;
    min-width: 15vw !important;
    max-width: 15vw !important;
    height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    position: relative !important;
    z-index: 20 !important;
  }

  body.layout-app .app-main {
    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 43vw !important;
    min-width: 43vw !important;
    max-width: 43vw !important;
    min-height: 100vh !important;

    margin: 0 !important;
    padding: 40px 30px 50px !important;
    box-sizing: border-box !important;

    position: relative !important;
    z-index: 5 !important;
  }

  body.layout-app .app-art {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;

    width: 42vw !important;
    min-width: 42vw !important;
    max-width: 42vw !important;
    height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;

    z-index: 1 !important;
    pointer-events: none !important;
  }

  body.layout-app .app-main > * {
    position: relative !important;
    z-index: 6 !important;
  }

  body.layout-app .account-pill {
    z-index: 30 !important;
  }
}

/* =========================================================
   V9 SIDEBAR SOFT EDGE
   Keep the existing account-specific navigation.
   Only soften the visual boundary between sidebar/content.
   ========================================================= */

@media (min-width: 1201px) {

    body.layout-app .app-sidebar {
        position: relative !important;
        z-index: 20 !important;

        /*
         * Keep the exact 15vw sidebar geometry.
         * The mask only softens its right-hand edge.
         */
        -webkit-mask-image: linear-gradient(
            to right,
            #000 0%,
            #000 88%,
            rgba(0,0,0,.96) 92%,
            rgba(0,0,0,.70) 96%,
            transparent 100%
        ) !important;

        mask-image: linear-gradient(
            to right,
            #000 0%,
            #000 88%,
            rgba(0,0,0,.96) 92%,
            rgba(0,0,0,.70) 96%,
            transparent 100%
        ) !important;

        -webkit-mask-repeat: no-repeat !important;
        mask-repeat: no-repeat !important;

        -webkit-mask-size: 100% 100% !important;
        mask-size: 100% 100% !important;

        box-shadow:
            10px 0 28px rgba(15, 30, 50, .08) !important;

        transition:
            box-shadow .35s ease,
            transform .35s ease !important;
    }

    /*
     * Keep the sidebar contents crisp.
     * The fade is subtle and only occurs at the far edge.
     */
    body.layout-app .app-sidebar .brand,
    body.layout-app .app-sidebar nav,
    body.layout-app .app-sidebar a,
    body.layout-app .app-sidebar button {
        transition:
            background-color .25s ease,
            color .25s ease,
            transform .25s ease,
            opacity .25s ease !important;
    }

    /*
     * Smooth active navigation state.
     */
    body.layout-app .app-sidebar a:hover,
    body.layout-app .app-sidebar button:hover {
        transition:
            background-color .25s ease,
            color .25s ease,
            transform .25s ease,
            box-shadow .25s ease !important;
    }
}


/* Don't apply desktop edge effects to mobile navigation. */
@media (max-width: 1200px) {
    body.layout-app .app-sidebar {
        -webkit-mask-image: none !important;
        mask-image: none !important;
        box-shadow: none !important;
    }
}

/* =========================================================
   FINAL V9 APP ALIGNMENT
   Sidebar text inset + account pill positioning
   ========================================================= */

@media (min-width: 1201px) {

    /* 1. Give sidebar navigation comfortable left breathing room */
    body.layout-app .app-sidebar {
        padding-left: 18px !important;
        padding-right: 18px !important;
        box-sizing: border-box !important;
    }

    body.layout-app .app-sidebar .brand {
        margin-left: 4px !important;
    }

    body.layout-app .app-sidebar nav,
    body.layout-app .app-sidebar .sidebar-nav {
        padding-left: 4px !important;
    }

    body.layout-app .app-sidebar nav a,
    body.layout-app .app-sidebar .sidebar-nav a {
        padding-left: 14px !important;
    }

    /* 2. Move account pill toward the right side of the content column */
    body.layout-app .account-pill {
        right: 4.5vw !important;
        left: auto !important;
    }

    body.layout-app .app-account,
    body.layout-app .top-account,
    body.layout-app .account-menu-trigger {
        right: 4.5vw !important;
        left: auto !important;
    }
}

/* =========================================================
   MEDIA SYSTEM — AUTH PAGE FINAL ALIGNMENT
   Login / Register / Forgot Password
   ========================================================= */

@media (min-width: 1000px) {

  /* Keep the three auth columns consistent */
  body.layout-auth {
    display: grid !important;
    grid-template-columns: 15% 43% 42% !important;
    min-height: 100vh !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Left character/info rail */
  body.layout-auth .auth-rail {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 34px 20px 20px !important;
    box-sizing: border-box !important;
  }

  /* Main authentication area */
  body.layout-auth .auth-main {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 7vw !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Keep form width identical across auth pages */
  body.layout-auth .auth-card,
  body.layout-auth .auth-content,
  body.layout-auth .auth-form {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Prevent individual pages from shifting their forms */
  body.layout-auth .auth-main > * {
    transform: none !important;
  }

  /* Right artwork */
  body.layout-auth .auth-art,
  body.layout-auth .app-art {
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;
  }

  /* Smooth artwork fade into the form area */
  body.layout-auth .auth-art-wrap {
    position: relative !important;
    overflow: hidden !important;
  }

  body.layout-auth .auth-art-wrap::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 22% !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: linear-gradient(
      to right,
      rgba(248,250,253,0.98),
      rgba(248,250,253,0.55),
      rgba(248,250,253,0)
    ) !important;
  }

  /* Keep auth headings/forms visually balanced */
  body.layout-auth h1 {
    margin-top: 0 !important;
  }

  body.layout-auth .brand,
  body.layout-auth .auth-brand {
    margin-bottom: 16px !important;
  }

  /* Consistent form controls */
  body.layout-auth input,
  body.layout-auth textarea,
  body.layout-auth select {
    box-sizing: border-box !important;
  }

  /* Mobile fallback */
  @media (max-width: 999px) {
    body.layout-auth {
      display: block !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
    }

    body.layout-auth .auth-rail {
      display: none !important;
    }

    body.layout-auth .auth-main {
      min-height: 100vh !important;
      padding: 40px 24px !important;
    }

    body.layout-auth .auth-art,
    body.layout-auth .app-art {
      display: none !important;
    }
  }
}

/* ============================================================
   MEDIA SYSTEM — BLENDED CINEMATIC V9
   Auth + App pages
   Visual only — no backend/functionality changes
   ============================================================ */

/* ------------------------------------------------------------
   AUTH PAGES
   Artwork becomes the full-page background.
   Content sits over a soft atmospheric blend.
   ------------------------------------------------------------ */

body.layout-auth {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 15% 85% !important;
    min-height: 100vh !important;
    width: 100% !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background: var(--bg, #fafafc) !important;
}

/* Full-page artwork */
body.layout-auth .auth-art {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    object-fit: cover !important;
    object-position: right center !important;
    z-index: -3 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* Soft atmospheric wash over the artwork */
body.layout-auth::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -2 !important;
    pointer-events: none !important;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.94) 0%,
            rgba(255,255,255,.88) 15%,
            rgba(255,255,255,.76) 30%,
            rgba(255,255,255,.54) 46%,
            rgba(255,255,255,.20) 64%,
            rgba(255,255,255,0) 82%
        );
}

/* Large soft central light behind the form */
body.layout-auth::after {
    content: "" !important;
    position: fixed !important;
    left: 15% !important;
    top: 0 !important;
    width: 58% !important;
    height: 100% !important;
    z-index: -1 !important;
    pointer-events: none !important;

    background:
        radial-gradient(
            ellipse 55% 62% at 52% 50%,
            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.90) 32%,
            rgba(255,255,255,.58) 57%,
            rgba(255,255,255,.12) 78%,
            rgba(255,255,255,0) 100%
        );
}

/* Left character rail becomes part of the composition */
body.layout-auth .auth-rail {
    position: relative !important;
    z-index: 4 !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 100vh !important;

    padding: 30px 22px !important;
    box-sizing: border-box !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,244,232,.82),
            rgba(255,230,207,.68)
        ) !important;

    border-right: 1px solid rgba(255,255,255,.45) !important;

    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

/* Auth rail artwork glyph */
body.layout-auth .auth-rail .kanji-glyph {
    opacity: .48 !important;
    max-width: 58px !important;
    height: auto !important;
}

/* Register / Aizen / other themes use their own theme tint */
body.theme-rukia .auth-rail {
    background:
        linear-gradient(
            180deg,
            rgba(238,246,255,.84),
            rgba(217,231,248,.68)
        ) !important;
}

body.theme-aizen .auth-rail {
    background:
        linear-gradient(
            180deg,
            rgba(218,226,237,.84),
            rgba(181,193,209,.72)
        ) !important;
}

/* Form column */
body.layout-auth .auth-form-col {
    position: relative !important;
    z-index: 3 !important;

    width: 100% !important;
    min-width: 0 !important;

    min-height: 100vh !important;
    padding: 40px 7vw !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
}

/*
 * Subtle glass/light layer around the form.
 * It is intentionally NOT a hard rectangular card.
 */
body.layout-auth .auth-form {
    position: relative !important;
    z-index: 5 !important;

    width: min(430px, 100%) !important;
    max-width: 430px !important;

    padding: 30px 32px !important;
    margin: 0 auto !important;

    border-radius: 24px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.52),
            rgba(255,255,255,.20)
        ) !important;

    border: 1px solid rgba(255,255,255,.50) !important;

    box-shadow:
        0 25px 70px rgba(11,21,48,.08),
        inset 0 1px 0 rgba(255,255,255,.72) !important;

    backdrop-filter: blur(10px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(110%) !important;
}

/* Remove the card effect visually when the form is very sparse */
body.layout-auth .auth-form > .brand {
    margin-bottom: 24px !important;
}

/* Main title */
body.layout-auth .auth-form h1.page-title {
    position: relative !important;
    z-index: 2 !important;
    margin-bottom: 8px !important;
}

/* Subtitle */
body.layout-auth .auth-form .page-subtitle {
    margin-bottom: 24px !important;
}

/* Inputs become slightly translucent */
body.layout-auth .auth-form .field input,
body.layout-auth .auth-form .field textarea,
body.layout-auth .auth-form .field select {
    background: rgba(255,255,255,.84) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

/* Login button */
body.layout-auth .auth-form .btn-primary {
    box-shadow:
        0 8px 20px color-mix(in srgb, var(--accent) 24%, transparent) !important;
}

/* Links */
body.layout-auth .login-links {
    text-align: center !important;
    margin-top: 18px !important;
}

/* Information cards on register / forgot password */
body.layout-auth .auth-info {
    background: rgba(255,255,255,.70) !important;
    border: 1px solid rgba(255,255,255,.65) !important;
    box-shadow: 0 10px 30px rgba(11,21,48,.07) !important;
}

/* ------------------------------------------------------------
   APP PAGES
   Same cinematic blending treatment.
   ------------------------------------------------------------ */

body.layout-app {
    position: relative !important;
    isolation: isolate !important;
    overflow-x: hidden !important;
    background: var(--bg,#fafafc) !important;
}

/* Full background artwork */
body.layout-app .app-art {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;

    object-fit: cover !important;
    object-position: right center !important;

    z-index: -3 !important;

    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* Main content atmospheric blend */
body.layout-app::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -2 !important;
    pointer-events: none !important;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.86) 15%,
            rgba(255,255,255,.82) 30%,
            rgba(255,255,255,.60) 47%,
            rgba(255,255,255,.20) 68%,
            rgba(255,255,255,0) 86%
        );
}

/* Soft central readability glow */
body.layout-app::after {
    content: "" !important;
    position: fixed !important;
    left: 15% !important;
    top: 0 !important;
    width: 58% !important;
    height: 100% !important;
    z-index: -1 !important;
    pointer-events: none !important;

    background:
        radial-gradient(
            ellipse 60% 65% at 48% 45%,
            rgba(255,255,255,.72) 0%,
            rgba(255,255,255,.45) 45%,
            rgba(255,255,255,.08) 75%,
            rgba(255,255,255,0) 100%
        );
}

/* ------------------------------------------------------------
   FLOATING SIDEBAR
   Inspired by the reference you sent.
   ------------------------------------------------------------ */

body.layout-app .app-sidebar {
    position: relative !important;
    z-index: 10 !important;

    width: 15% !important;
    min-width: 205px !important;
    max-width: 245px !important;
    min-height: calc(100vh - 32px) !important;

    margin: 16px 0 16px 16px !important;
    padding: 24px 14px !important;

    border-radius: 18px !important;

    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--side-from) 91%, transparent),
            color-mix(in srgb, var(--side-to) 88%, transparent)
        ) !important;

    box-shadow:
        0 18px 50px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.14) !important;

    backdrop-filter: blur(14px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%) !important;

    overflow: hidden !important;
}

/* Sidebar brand */
body.layout-app .app-sidebar .brand {
    padding: 0 12px !important;
    margin-bottom: 18px !important;
}

/* Sidebar navigation */
body.layout-app .app-sidebar nav {
    padding: 0 4px !important;
    gap: 5px !important;
}

/* Sidebar items */
body.layout-app .sidebar-link {
    height: 44px !important;
    padding: 0 13px !important;
    border-radius: 10px !important;

    gap: 11px !important;
    font-size: 14px !important;

    transition:
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease !important;
}

body.layout-app .sidebar-link:hover {
    transform: translateX(2px) !important;
    background: rgba(255,255,255,.10) !important;
}

body.layout-app .sidebar-link.active {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 6px 18px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}

/* ------------------------------------------------------------
   APP MAIN CONTENT
   ------------------------------------------------------------ */

body.layout-app .app-main {
    position: relative !important;
    z-index: 2 !important;

    max-width: none !important;
    width: auto !important;

    padding:
        34px
        clamp(38px, 5vw, 76px)
        60px
        clamp(38px, 5vw, 76px) !important;
}

/* Give content a clean reading width */
body.layout-app .app-main > *:not(.app-main-brand) {
    position: relative !important;
    z-index: 2 !important;
}

/* Account pill */
body.layout-app .account-pill {
    top: 24px !important;
    right: clamp(30px, 4vw, 70px) !important;
    left: auto !important;

    height: 42px !important;
    padding: 0 15px !important;

    box-shadow:
        0 8px 24px rgba(11,21,48,.13),
        inset 0 1px 0 rgba(255,255,255,.18) !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Cards blend into the background instead of looking pasted on */
body.layout-app .card {
    background: rgba(255,255,255,.72) !important;
    border-color: rgba(255,255,255,.62) !important;
    box-shadow:
        0 12px 35px rgba(11,21,48,.07),
        inset 0 1px 0 rgba(255,255,255,.75) !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Keep artwork caption floating naturally */
body.layout-app .app-caption {
    right: 28px !important;
    bottom: 24px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* ------------------------------------------------------------
   DESKTOP / LARGE SCREEN
   ------------------------------------------------------------ */

@media (min-width: 1200px) {

    body.layout-auth .auth-form {
        transform: translateX(-1vw) !important;
    }

    body.layout-app .app-main {
        padding-left: clamp(44px, 4.5vw, 76px) !important;
        padding-right: clamp(40px, 5vw, 82px) !important;
    }
}

/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    body.layout-auth {
        display: block !important;
        overflow-y: auto !important;
    }

    body.layout-auth .auth-rail {
        display: none !important;
    }

    body.layout-auth .auth-form-col {
        min-height: 100vh !important;
        padding: 32px 20px !important;
    }

    body.layout-auth .auth-form {
        padding: 26px 22px !important;
        border-radius: 20px !important;
    }

    body.layout-app {
        display: block !important;
    }

    body.layout-app .app-sidebar {
        min-height: auto !important;
        width: calc(100% - 24px) !important;
        max-width: none !important;
        margin: 12px !important;
    }

    body.layout-app .app-main {
        padding: 28px 20px 50px !important;
    }

    body.layout-app .app-art {
        opacity: .34 !important;
    }
}


/* ============================================================
   V9 AUTH REFINEMENT
   Smooth artwork / softer blend / less washed-out center
   ============================================================ */

body.layout-auth {
    background: transparent !important;
}

/* ------------------------------------------------------------
   ARTWORK
   Keep the artwork strong and visible.
   ------------------------------------------------------------ */

body.layout-auth .auth-art {
    opacity: 1 !important;
    filter: saturate(1.02) contrast(1.01) !important;
    object-position: right center !important;
}

/* ------------------------------------------------------------
   MAIN ATMOSPHERIC BLEND
   Less white than previous version.
   The transition happens gradually instead of creating a
   giant white hotspot.
   ------------------------------------------------------------ */

body.layout-auth::before {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.91) 0%,
            rgba(255,255,255,.84) 14%,
            rgba(255,255,255,.69) 27%,
            rgba(255,255,255,.46) 39%,
            rgba(255,255,255,.24) 51%,
            rgba(255,255,255,.09) 64%,
            rgba(255,255,255,0) 78%
        ) !important;
}

/* Remove the huge central white hotspot */
body.layout-auth::after {
    left: 15% !important;
    width: 54% !important;

    background:
        radial-gradient(
            ellipse 48% 55% at 48% 50%,
            rgba(255,255,255,.58) 0%,
            rgba(255,255,255,.38) 30%,
            rgba(255,255,255,.17) 52%,
            rgba(255,255,255,.05) 70%,
            rgba(255,255,255,0) 100%
        ) !important;
}

/* ------------------------------------------------------------
   AUTH RAIL
   More transparent so artwork/light can visually continue.
   ------------------------------------------------------------ */

body.layout-auth .auth-rail {
    background:
        linear-gradient(
            180deg,
            rgba(255,244,232,.60),
            rgba(255,230,207,.46)
        ) !important;

    border-right: 1px solid rgba(255,255,255,.32) !important;

    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

body.theme-rukia .auth-rail {
    background:
        linear-gradient(
            180deg,
            rgba(236,246,255,.62),
            rgba(214,231,250,.46)
        ) !important;
}

body.theme-aizen .auth-rail {
    background:
        linear-gradient(
            180deg,
            rgba(211,222,235,.63),
            rgba(181,195,211,.48)
        ) !important;
}

/* ------------------------------------------------------------
   FORM POSITION
   Keep the form in the central visual area.
   ------------------------------------------------------------ */

body.layout-auth .auth-form-col {
    padding:
        36px
        clamp(42px, 6vw, 90px)
        50px
        clamp(42px, 6vw, 90px) !important;

    align-items: center !important;
    justify-content: center !important;
}

/* ------------------------------------------------------------
   FORM
   Remove the obvious "white box" feeling.
   ------------------------------------------------------------ */

body.layout-auth .auth-form {
    width: min(420px, 100%) !important;
    max-width: 420px !important;

    padding: 26px 26px 24px !important;

    border-radius: 20px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.64),
            rgba(255,255,255,.32)
        ) !important;

    border: 1px solid rgba(255,255,255,.58) !important;

    box-shadow:
        0 20px 55px rgba(20,32,55,.08),
        0 2px 8px rgba(20,32,55,.035),
        inset 0 1px 0 rgba(255,255,255,.72) !important;

    backdrop-filter: blur(13px) saturate(105%) !important;
    -webkit-backdrop-filter: blur(13px) saturate(105%) !important;

    transform: translateX(-1vw) !important;
}

/* Make the form feel lighter on the scene */
body.layout-auth .auth-form::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.18),
            transparent 48%
        ) !important;
}

/* ------------------------------------------------------------
   TYPOGRAPHY
   ------------------------------------------------------------ */

body.layout-auth .auth-form .brand {
    margin-bottom: 20px !important;
}

body.layout-auth .auth-form h1,
body.layout-auth .auth-form .page-title {
    letter-spacing: -0.035em !important;
}

body.layout-auth .auth-form .page-subtitle {
    opacity: .76 !important;
}

/* ------------------------------------------------------------
   INPUTS
   ------------------------------------------------------------ */

body.layout-auth .auth-form input,
body.layout-auth .auth-form textarea,
body.layout-auth .auth-form select {
    background: rgba(255,255,255,.74) !important;

    border-color: rgba(91,117,145,.20) !important;

    box-shadow:
        inset 0 1px 2px rgba(20,30,45,.025) !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease !important;
}

body.layout-auth .auth-form input:focus,
body.layout-auth .auth-form textarea:focus,
body.layout-auth .auth-form select:focus {
    background: rgba(255,255,255,.90) !important;

    box-shadow:
        0 0 0 3px color-mix(
            in srgb,
            var(--accent) 12%,
            transparent
        ) !important;
}

/* ------------------------------------------------------------
   BUTTON
   ------------------------------------------------------------ */

body.layout-auth .auth-form .btn-primary {
    box-shadow:
        0 8px 18px color-mix(
            in srgb,
            var(--accent) 18%,
            transparent
        ) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease !important;
}

body.layout-auth .auth-form .btn-primary:hover {
    transform: translateY(-1px) !important;

    box-shadow:
        0 11px 24px color-mix(
            in srgb,
            var(--accent) 24%,
            transparent
        ) !important;
}

/* ------------------------------------------------------------
   INFO CARD
   Register / Forgot Password
   ------------------------------------------------------------ */

body.layout-auth .auth-info {
    background:
        rgba(255,255,255,.58) !important;

    border:
        1px solid rgba(255,255,255,.52) !important;

    box-shadow:
        0 8px 25px rgba(20,32,55,.055) !important;

    backdrop-filter: blur(9px) !important;
    -webkit-backdrop-filter: blur(9px) !important;
}

/* ------------------------------------------------------------
   FOOTER CAPTION
   ------------------------------------------------------------ */

body.layout-auth .auth-caption,
body.layout-auth .v9-rail-caption {
    opacity: .88 !important;
}

/* ------------------------------------------------------------
   THEME-SPECIFIC BALANCE
   ------------------------------------------------------------ */

/* Ichigo */
body.theme-ichigo::after {
    background:
        radial-gradient(
            ellipse 48% 55% at 47% 50%,
            rgba(255,255,255,.52) 0%,
            rgba(255,255,255,.31) 31%,
            rgba(255,255,255,.13) 54%,
            rgba(255,255,255,0) 75%
        ) !important;
}

/* Rukia */
body.theme-rukia::after {
    background:
        radial-gradient(
            ellipse 48% 55% at 47% 50%,
            rgba(246,250,255,.53) 0%,
            rgba(236,245,255,.32) 31%,
            rgba(230,242,255,.12) 54%,
            rgba(230,242,255,0) 75%
        ) !important;
}

/* Aizen */
body.theme-aizen::after {
    background:
        radial-gradient(
            ellipse 48% 55% at 47% 50%,
            rgba(244,247,250,.51) 0%,
            rgba(231,237,244,.30) 31%,
            rgba(218,228,239,.11) 54%,
            rgba(218,228,239,0) 75%
        ) !important;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    body.layout-auth::before {
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.72) 0%,
                rgba(255,255,255,.56) 45%,
                rgba(255,255,255,.20) 100%
            ) !important;
    }

    body.layout-auth::after {
        left: 0 !important;
        width: 100% !important;
    }

    body.layout-auth .auth-form {
        transform: none !important;
    }
}


/* ============================================================
   AUTH SEAMLESS BLEND — REMOVE VISIBLE VERTICAL SEAMS
   ============================================================ */

/* Left rail must blend into the artwork */
body.layout-auth .auth-rail {
    border: none !important;
    border-right: none !important;
    box-shadow: none !important;
}

/* Remove any artificial vertical divider from auth layout */
body.layout-auth .auth-form-col {
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
}

/* Artwork itself must have no frame */
body.layout-auth .auth-art,
body.layout-auth img.auth-art {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove pseudo-element divider lines */
body.layout-auth::before,
body.layout-auth::after {
    border: none !important;
    outline: none !important;
}

/* If the rail uses a pseudo divider, eliminate it */
body.layout-auth .auth-rail::before,
body.layout-auth .auth-rail::after {
    border: none !important;
    box-shadow: none !important;
}

/* Prevent 1px page-edge seams caused by the layout */
html,
body.layout-auth {
    border: 0 !important;
    outline: 0 !important;
}

/* Keep the artwork flush against the viewport */
body.layout-auth .auth-art {
    margin: 0 !important;
}

/* Smooth rail → artwork transition */
body.layout-auth .auth-rail {
    background:
        linear-gradient(
            90deg,
            rgba(255,244,232,.58) 0%,
            rgba(255,239,226,.40) 65%,
            rgba(255,239,226,.12) 100%
        ) !important;

    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

body.theme-rukia .auth-rail {
    background:
        linear-gradient(
            90deg,
            rgba(236,246,255,.58) 0%,
            rgba(226,239,255,.40) 65%,
            rgba(226,239,255,.10) 100%
        ) !important;
}

body.theme-aizen .auth-rail {
    background:
        linear-gradient(
            90deg,
            rgba(211,222,235,.58) 0%,
            rgba(201,214,229,.40) 65%,
            rgba(201,214,229,.10) 100%
        ) !important;
}


/* ============================================================
   AUTH ART — FULL BLEED RIGHT EDGE
   ============================================================ */

body.layout-auth {
    width: 100%;
    min-width: 0;
    overflow-x: hidden !important;
}

body.layout-auth .auth-art,
body.layout-auth img.auth-art {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    display: block !important;
}

/* Never allow a right-side layout seam */
body.layout-auth .auth-art-wrap,
body.layout-auth .v9-auth-art,
body.layout-auth .v9-art-wrap {
    right: 0 !important;
    margin-right: 0 !important;
    border-right: 0 !important;
    outline-right: 0 !important;
    box-shadow: none !important;
}

/* Keep the viewport itself clean */
html {
    overflow-x: hidden !important;
}

html,
body {
    border-right: 0 !important;
    outline: 0 !important;
}


/* Hide scrollbar, keep scrolling functional */
html {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

html::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

body {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* V9 — Auth pages: completely disable page scrolling */
body.layout-auth {
    overflow: hidden !important;
    height: 100vh !important;
    max-height: 100vh !important;
}

html:has(body.layout-auth) {
    overflow: hidden !important;
    height: 100% !important;
}


/* =========================================================
   V9 — FLOATING SIDEBAR
   UI ONLY — keeps existing permissions and links
   ========================================================= */

@media (min-width: 1201px) {

    body.layout-app .app-sidebar {
        position: fixed !important;
        left: 22px !important;
        top: 22px !important;
        bottom: 22px !important;

        width: calc(15vw - 44px) !important;
        min-width: 205px !important;
        max-width: 260px !important;

        box-sizing: border-box !important;

        padding: 28px 16px 22px !important;

        display: flex !important;
        flex-direction: column !important;

        border-radius: 24px !important;

        background:
            linear-gradient(
                180deg,
                rgba(15, 20, 32, 0.78),
                rgba(12, 17, 28, 0.62)
            ) !important;

        border: 1px solid rgba(255,255,255,0.08) !important;

        box-shadow:
            0 18px 50px rgba(0,0,0,0.22),
            inset 0 1px 0 rgba(255,255,255,0.05) !important;

        backdrop-filter: blur(18px) saturate(120%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(120%) !important;

        z-index: 30 !important;

        overflow: hidden !important;
    }


    /* Brand */

    body.layout-app .app-sidebar .brand {
        margin: 2px 10px 30px !important;

        font-size: 13px !important;
        line-height: 1.25 !important;
        letter-spacing: 0.16em !important;

        white-space: nowrap !important;
    }

    body.layout-app .app-sidebar .brand-sub {
        display: block !important;

        margin-top: 7px !important;

        font-size: 9px !important;
        line-height: 1.4 !important;
        letter-spacing: 0.08em !important;

        opacity: 0.48 !important;
    }


    /* Navigation */

    body.layout-app .app-sidebar nav {
        display: flex !important;
        flex-direction: column !important;

        gap: 7px !important;

        width: 100% !important;
    }


    /* Navigation items */

    body.layout-app .sidebar-link {
        position: relative !important;

        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 48px !important;

        box-sizing: border-box !important;

        padding: 0 14px !important;

        border-radius: 14px !important;

        border: 1px solid transparent !important;

        color: rgba(255,255,255,0.68) !important;

        background: transparent !important;

        text-decoration: none !important;

        transition:
            background 180ms ease,
            color 180ms ease,
            transform 180ms ease,
            border-color 180ms ease !important;
    }


    /* Icons */

    body.layout-app .sidebar-link svg,
    body.layout-app .sidebar-link .icon {
        width: 19px !important;
        height: 19px !important;

        margin-right: 13px !important;

        flex: 0 0 auto !important;

        opacity: 0.72 !important;

        transition:
            opacity 180ms ease,
            transform 180ms ease !important;
    }


    /* Hover */

    body.layout-app .sidebar-link:hover {
        color: rgba(255,255,255,0.94) !important;

        background: rgba(255,255,255,0.065) !important;

        border-color: rgba(255,255,255,0.055) !important;

        transform: translateX(2px) !important;
    }

    body.layout-app .sidebar-link:hover svg,
    body.layout-app .sidebar-link:hover .icon {
        opacity: 0.95 !important;
        transform: scale(1.04) !important;
    }


    /* Active */

    body.layout-app .sidebar-link.active {
        color: #fff !important;

        background:
            linear-gradient(
                90deg,
                rgba(255,255,255,0.115),
                rgba(255,255,255,0.055)
            ) !important;

        border-color: rgba(255,255,255,0.09) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.045),
            0 6px 20px rgba(0,0,0,0.08) !important;
    }

    body.layout-app .sidebar-link.active svg,
    body.layout-app .sidebar-link.active .icon {
        opacity: 1 !important;
    }


    /* Small active indicator */

    body.layout-app .sidebar-link.active::before {
        content: "" !important;

        position: absolute !important;

        left: 5px !important;
        top: 50% !important;

        width: 3px !important;
        height: 20px !important;

        transform: translateY(-50%) !important;

        border-radius: 999px !important;

        background: rgba(255,255,255,0.78) !important;

        opacity: 0.8 !important;
    }


    /* Keep the main page independent from the floating sidebar */

    body.layout-app .app-main {
        position: relative !important;
        z-index: 5 !important;
    }
}


/* =========================================================
   V9 — Sidebar on medium screens
   ========================================================= */

@media (min-width: 901px) and (max-width: 1200px) {

    body.layout-app .app-sidebar {
        border-radius: 20px !important;
        margin: 16px !important;
        padding: 22px 12px !important;

        background: rgba(15,20,32,0.72) !important;

        border: 1px solid rgba(255,255,255,0.07) !important;

        box-shadow: 0 14px 35px rgba(0,0,0,0.18) !important;

        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
    }
}


/* =========================================================
   V9 — THEME-AWARE COLLAPSIBLE SIDEBAR
   ========================================================= */

@media (min-width: 901px) {

    body.layout-app .app-sidebar {
        position: fixed !important;

        left: 22px !important;
        top: 22px !important;
        bottom: 22px !important;

        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;

        padding: 76px 10px 18px !important;

        box-sizing: border-box !important;

        display: flex !important;
        flex-direction: column !important;

        border-radius: 24px !important;

        /*
         * Theme-aware surface.
         * Uses the page's existing --ink colour instead
         * of forcing a dark/black sidebar.
         */
        background:
            color-mix(
                in srgb,
                var(--ink, #182033) 7%,
                transparent
            ) !important;

        border: 1px solid
            color-mix(
                in srgb,
                var(--ink, #182033) 10%,
                transparent
            ) !important;

        color: var(--ink, #182033) !important;

        box-shadow:
            0 18px 45px rgba(0,0,0,0.12),
            inset 0 1px 0 rgba(255,255,255,0.22) !important;

        backdrop-filter: blur(18px) saturate(125%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(125%) !important;

        overflow: hidden !important;

        z-index: 50 !important;

        transition:
            width 260ms cubic-bezier(.2,.8,.2,1),
            min-width 260ms cubic-bezier(.2,.8,.2,1),
            max-width 260ms cubic-bezier(.2,.8,.2,1),
            box-shadow 260ms ease !important;
    }


    /* Expanded */

    body.layout-app .app-sidebar.expanded {
        width: 238px !important;
        min-width: 238px !important;
        max-width: 238px !important;

        box-shadow:
            0 22px 55px rgba(0,0,0,0.17),
            inset 0 1px 0 rgba(255,255,255,0.22) !important;
    }


    /* Toggle button */

    body.layout-app .sidebar-toggle {
        position: absolute !important;

        left: 14px !important;
        top: 14px !important;

        width: 44px !important;
        height: 44px !important;

        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 14px !important;

        border: 1px solid
            color-mix(
                in srgb,
                var(--ink, #182033) 9%,
                transparent
            ) !important;

        background:
            color-mix(
                in srgb,
                var(--ink, #182033) 5%,
                transparent
            ) !important;

        color: var(--ink, #182033) !important;

        cursor: pointer !important;

        transition:
            background 180ms ease,
            transform 180ms ease,
            border-color 180ms ease !important;
    }


    body.layout-app .sidebar-toggle:hover {
        background:
            color-mix(
                in srgb,
                var(--ink, #182033) 10%,
                transparent
            ) !important;

        transform: scale(1.04) !important;
    }


    body.layout-app .sidebar-toggle .icon {
        width: 19px !important;
        height: 19px !important;
    }


    .sidebar-toggle-close {
        display: none !important;
    }

    .app-sidebar.expanded .sidebar-toggle-open {
        display: none !important;
    }

    .app-sidebar.expanded .sidebar-toggle-close {
        display: block !important;
    }


    /* Brand */

    body.layout-app .app-sidebar .sidebar-brand {
        margin: 0 10px 28px !important;

        white-space: nowrap !important;

        color: var(--ink, #182033) !important;

        opacity: 0 !important;

        transform: translateX(-8px) !important;

        pointer-events: none !important;

        transition:
            opacity 180ms ease,
            transform 220ms ease !important;
    }


    body.layout-app .app-sidebar.expanded .sidebar-brand {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }


    /* Navigation */

    body.layout-app .app-sidebar .sidebar-nav {
        display: flex !important;
        flex-direction: column !important;

        gap: 7px !important;

        width: 100% !important;
    }


    /* Links */

    body.layout-app .app-sidebar .sidebar-link {
        position: relative !important;

        width: 100% !important;
        min-height: 46px !important;

        padding: 0 !important;

        display: flex !important;
        align-items: center !important;

        box-sizing: border-box !important;

        border-radius: 14px !important;

        border: 1px solid transparent !important;

        background: transparent !important;

        color: var(--ink, #182033) !important;

        text-decoration: none !important;

        overflow: hidden !important;

        transition:
            background 180ms ease,
            border-color 180ms ease,
            transform 180ms ease !important;
    }


    body.layout-app .app-sidebar .sidebar-link .icon {
        flex: 0 0 46px !important;

        width: 19px !important;
        height: 19px !important;

        margin: 0 !important;

        opacity: 0.68 !important;

        transition:
            opacity 180ms ease,
            transform 180ms ease !important;
    }


    /* Text hidden while collapsed */

    body.layout-app .app-sidebar .sidebar-link span {
        display: block !important;

        margin-left: 4px !important;

        white-space: nowrap !important;

        opacity: 0 !important;

        transform: translateX(-8px) !important;

        transition:
            opacity 150ms ease,
            transform 200ms ease !important;
    }


    /* Text appears when open */

    body.layout-app .app-sidebar.expanded .sidebar-link span {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }


    /* Hover */

    body.layout-app .app-sidebar .sidebar-link:hover {
        background:
            color-mix(
                in srgb,
                var(--ink, #182033) 7%,
                transparent
            ) !important;

        border-color:
            color-mix(
                in srgb,
                var(--ink, #182033) 8%,
                transparent
            ) !important;

        transform: translateX(2px) !important;
    }


    body.layout-app .app-sidebar .sidebar-link:hover .icon {
        opacity: 1 !important;
        transform: scale(1.05) !important;
    }


    /* Active */

    body.layout-app .app-sidebar .sidebar-link.active {
        background:
            color-mix(
                in srgb,
                var(--ink, #182033) 10%,
                transparent
            ) !important;

        border-color:
            color-mix(
                in srgb,
                var(--ink, #182033) 10%,
                transparent
            ) !important;
    }


    body.layout-app .app-sidebar .sidebar-link.active .icon {
        opacity: 1 !important;
    }


    /* Active indicator */

    body.layout-app .app-sidebar .sidebar-link.active::before {
        content: "" !important;

        position: absolute !important;

        left: 4px !important;
        top: 50% !important;

        width: 3px !important;
        height: 19px !important;

        transform: translateY(-50%) !important;

        border-radius: 999px !important;

        background: currentColor !important;

        opacity: 0.7 !important;
    }


    /*
     * When collapsed, center the icons.
     * When expanded, give them their normal position.
     */

    body.layout-app .app-sidebar:not(.expanded) .sidebar-link {
        justify-content: center !important;
    }

    body.layout-app .app-sidebar.expanded .sidebar-link {
        justify-content: flex-start !important;
    }


    /*
     * Tooltip-like native title remains available
     * while collapsed.
     */
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    body.layout-app .app-sidebar {
        position: fixed !important;

        left: 12px !important;
        top: 12px !important;

        width: 58px !important;
        min-width: 58px !important;

        height: auto !important;
        bottom: auto !important;

        padding: 64px 7px 8px !important;

        border-radius: 18px !important;
    }

    body.layout-app .app-sidebar.expanded {
        width: 210px !important;
        min-width: 210px !important;
    }

    body.layout-app .app-sidebar .sidebar-brand {
        display: none !important;
    }
}


/* =========================================================
   V9.5 — FLOATING LIQUID GLASS SIDEBAR
   ========================================================= */

@media (min-width: 901px) {

    /* ---------- floating glass shell ---------- */

    body.layout-app .app-sidebar {
        position: fixed !important;

        left: 24px !important;
        top: 24px !important;
        bottom: 24px !important;

        width: 76px !important;
        min-width: 76px !important;
        max-width: 76px !important;

        box-sizing: border-box !important;

        padding: 76px 9px 18px !important;

        border-radius: 30px !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.34),
                rgba(255,255,255,.13) 45%,
                rgba(255,255,255,.08)
            ) !important;

        border: 1px solid rgba(255,255,255,.42) !important;

        box-shadow:
            0 20px 60px rgba(20,30,50,.16),
            inset 0 1px 1px rgba(255,255,255,.65),
            inset 0 -1px 1px rgba(255,255,255,.12) !important;

        backdrop-filter:
            blur(24px)
            saturate(145%)
            brightness(1.04) !important;

        -webkit-backdrop-filter:
            blur(24px)
            saturate(145%)
            brightness(1.04) !important;

        overflow: hidden !important;

        z-index: 100 !important;

        transition:
            width 420ms cubic-bezier(.22,1,.36,1),
            min-width 420ms cubic-bezier(.22,1,.36,1),
            max-width 420ms cubic-bezier(.22,1,.36,1),
            border-radius 420ms cubic-bezier(.22,1,.36,1),
            box-shadow 420ms ease !important;
    }


    /* liquid glass highlight */

    body.layout-app .app-sidebar::before {
        content: "" !important;

        position: absolute !important;

        inset: 0 !important;

        border-radius: inherit !important;

        pointer-events: none !important;

        background:
            radial-gradient(
                circle at 18% 5%,
                rgba(255,255,255,.58),
                transparent 28%
            ),
            linear-gradient(
                110deg,
                rgba(255,255,255,.18),
                transparent 40%
            ) !important;

        opacity: .8 !important;
    }


    /* subtle lower glass reflection */

    body.layout-app .app-sidebar::after {
        content: "" !important;

        position: absolute !important;

        left: 8% !important;
        right: 8% !important;
        bottom: 7px !important;

        height: 35% !important;

        border-radius: 50% !important;

        background:
            radial-gradient(
                ellipse,
                rgba(255,255,255,.13),
                transparent 70%
            ) !important;

        pointer-events: none !important;
    }


    /* ---------- expanded ---------- */

    body.layout-app .app-sidebar.expanded {
        width: 238px !important;
        min-width: 238px !important;
        max-width: 238px !important;

        border-radius: 30px !important;

        box-shadow:
            0 26px 75px rgba(20,30,50,.20),
            inset 0 1px 1px rgba(255,255,255,.68),
            inset 0 -1px 1px rgba(255,255,255,.13) !important;
    }


    /* ---------- menu button ---------- */

    body.layout-app .sidebar-toggle {
        position: absolute !important;

        top: 15px !important;
        left: 15px !important;

        width: 44px !important;
        height: 44px !important;

        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border: 1px solid rgba(255,255,255,.34) !important;

        border-radius: 15px !important;

        background:
            rgba(255,255,255,.18) !important;

        box-shadow:
            inset 0 1px 1px rgba(255,255,255,.45),
            0 5px 18px rgba(20,30,50,.08) !important;

        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;

        cursor: pointer !important;

        z-index: 5 !important;

        transition:
            transform 260ms cubic-bezier(.22,1,.36,1),
            background 180ms ease,
            box-shadow 180ms ease !important;
    }


    body.layout-app .sidebar-toggle:hover {
        transform: scale(1.06) !important;

        background:
            rgba(255,255,255,.29) !important;

        box-shadow:
            inset 0 1px 1px rgba(255,255,255,.58),
            0 8px 22px rgba(20,30,50,.12) !important;
    }


    /* CSS-only hamburger */

    body.layout-app .menu-icon {
        width: 18px !important;
        height: 16px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    body.layout-app .menu-icon i {
        display: block !important;

        width: 100% !important;
        height: 1.8px !important;

        border-radius: 999px !important;

        background: currentColor !important;

        opacity: .78 !important;

        transform-origin: center !important;

        transition:
            transform 300ms cubic-bezier(.22,1,.36,1),
            opacity 200ms ease !important;
    }


    /* turn hamburger into X */

    body.layout-app .app-sidebar.expanded .menu-icon i:nth-child(1) {
        transform: translateY(7px) rotate(45deg) !important;
    }

    body.layout-app .app-sidebar.expanded .menu-icon i:nth-child(2) {
        opacity: 0 !important;
        transform: scaleX(.2) !important;
    }

    body.layout-app .app-sidebar.expanded .menu-icon i:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg) !important;
    }


    /* ---------- brand ---------- */

    body.layout-app .app-sidebar .sidebar-brand {
        position: relative !important;

        margin: 0 10px 28px !important;

        white-space: nowrap !important;

        opacity: 0 !important;

        transform: translateX(-14px) !important;

        pointer-events: none !important;

        transition:
            opacity 220ms ease,
            transform 360ms cubic-bezier(.22,1,.36,1) !important;
    }

    body.layout-app .app-sidebar.expanded .sidebar-brand {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }


    /* ---------- navigation ---------- */

    body.layout-app .app-sidebar .sidebar-nav {
        position: relative !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 7px !important;

        width: 100% !important;

        z-index: 2 !important;
    }


    body.layout-app .app-sidebar .sidebar-link {
        position: relative !important;

        width: 100% !important;
        height: 48px !important;

        padding: 0 !important;

        display: flex !important;
        align-items: center !important;

        box-sizing: border-box !important;

        border-radius: 16px !important;

        border: 1px solid transparent !important;

        background: transparent !important;

        color: var(--ink, #182033) !important;

        overflow: hidden !important;

        transition:
            background 220ms ease,
            border-color 220ms ease,
            transform 300ms cubic-bezier(.22,1,.36,1) !important;
    }


    /* centered icon while closed */

    body.layout-app .app-sidebar:not(.expanded) .sidebar-link {
        justify-content: center !important;
    }


    /* left aligned icon while open */

    body.layout-app .app-sidebar.expanded .sidebar-link {
        justify-content: flex-start !important;
    }


    body.layout-app .app-sidebar .sidebar-link .icon {
        flex: 0 0 46px !important;

        width: 19px !important;
        height: 19px !important;

        margin: 0 !important;

        opacity: .68 !important;

        transition:
            opacity 180ms ease,
            transform 260ms cubic-bezier(.22,1,.36,1) !important;
    }


    /* IMPORTANT: completely remove hidden text in collapsed mode.
       This fixes the stray J/I bug. */

    body.layout-app .app-sidebar:not(.expanded) .sidebar-link span {
        display: none !important;
    }


    body.layout-app .app-sidebar.expanded .sidebar-link span {
        display: block !important;

        white-space: nowrap !important;

        margin-left: 4px !important;

        opacity: 1 !important;

        animation: sidebarTextIn 260ms cubic-bezier(.22,1,.36,1) both !important;
    }


    @keyframes sidebarTextIn {
        from {
            opacity: 0;
            transform: translateX(-9px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }


    /* ---------- hover ---------- */

    body.layout-app .app-sidebar .sidebar-link:hover {
        background:
            rgba(255,255,255,.20) !important;

        border-color:
            rgba(255,255,255,.28) !important;

        transform: translateX(2px) !important;
    }


    body.layout-app .app-sidebar .sidebar-link:hover .icon {
        opacity: 1 !important;
        transform: scale(1.06) !important;
    }


    /* ---------- active ---------- */

    body.layout-app .app-sidebar .sidebar-link.active {
        background:
            rgba(255,255,255,.27) !important;

        border-color:
            rgba(255,255,255,.38) !important;

        box-shadow:
            inset 0 1px 1px rgba(255,255,255,.48),
            0 5px 20px rgba(20,30,50,.07) !important;
    }


    body.layout-app .app-sidebar .sidebar-link.active .icon {
        opacity: 1 !important;
    }


    /* active glass marker */

    body.layout-app .app-sidebar .sidebar-link.active::before {
        content: "" !important;

        position: absolute !important;

        left: 5px !important;
        top: 50% !important;

        width: 3px !important;
        height: 20px !important;

        transform: translateY(-50%) !important;

        border-radius: 999px !important;

        background: currentColor !important;

        opacity: .55 !important;
    }


    /* =====================================================
       CONTENT MOVEMENT
       Closed = close to sidebar
       Open   = moves further right
       ===================================================== */

    body.layout-app .app-main {
        position: relative !important;

        transform: translateX(-72px) !important;

        transition:
            transform 420ms cubic-bezier(.22,1,.36,1) !important;
    }


    body.layout-app.sidebar-open .app-main {
        transform: translateX(90px) !important;
    }


    /* keep artwork independent */

    body.layout-app .app-art {
        transition:
            transform 500ms cubic-bezier(.22,1,.36,1) !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    body.layout-app .app-sidebar {
        left: 12px !important;
        top: 12px !important;
        bottom: auto !important;

        width: 62px !important;
        min-width: 62px !important;
        max-width: 62px !important;

        height: auto !important;

        padding: 70px 7px 10px !important;

        border-radius: 22px !important;
    }

    body.layout-app .app-sidebar.expanded {
        width: 215px !important;
        min-width: 215px !important;
        max-width: 215px !important;
    }

    body.layout-app .app-sidebar .sidebar-brand {
        display: none !important;
    }

    body.layout-app .app-main {
        transform: none !important;
    }

    body.layout-app.sidebar-open .app-main {
        transform: none !important;
    }
}


/* =========================================================
   V9.6 — LIQUID GLASS SIDEBAR
   iOS-style translucent material / floating interaction
   ========================================================= */

@media (min-width: 901px) {

    body.layout-app .app-sidebar {
        position: fixed !important;

        left: 10px !important;
        top: 16px !important;
        bottom: 16px !important;

        width: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;

        box-sizing: border-box !important;

        padding: 70px 7px 16px !important;

        display: flex !important;
        flex-direction: column !important;

        border-radius: 27px !important;

        /*
         * Liquid glass base.
         * Mostly transparent so the artwork remains visible.
         */
        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.28) 0%,
                rgba(255,255,255,.12) 34%,
                rgba(255,255,255,.07) 62%,
                rgba(255,255,255,.15) 100%
            ) !important;

        border:
            1px solid rgba(255,255,255,.40) !important;

        box-shadow:
            0 18px 55px rgba(20,30,50,.13),
            0 2px 8px rgba(20,30,50,.08),
            inset 0 1px 1px rgba(255,255,255,.72),
            inset 0 -1px 2px rgba(255,255,255,.12) !important;

        backdrop-filter:
            blur(26px)
            saturate(155%)
            brightness(1.05) !important;

        -webkit-backdrop-filter:
            blur(26px)
            saturate(155%)
            brightness(1.05) !important;

        overflow: hidden !important;

        z-index: 100 !important;

        transition:
            width 460ms cubic-bezier(.16,1,.3,1),
            min-width 460ms cubic-bezier(.16,1,.3,1),
            max-width 460ms cubic-bezier(.16,1,.3,1),
            border-radius 460ms cubic-bezier(.16,1,.3,1),
            box-shadow 460ms cubic-bezier(.16,1,.3,1) !important;
    }


    /* -----------------------------------------------------
       LIQUID REFLECTIONS
       ----------------------------------------------------- */

    body.layout-app .app-sidebar::before {
        content: "" !important;

        position: absolute !important;

        width: 180px !important;
        height: 180px !important;

        left: -85px !important;
        top: -75px !important;

        border-radius: 50% !important;

        background:
            radial-gradient(
                circle,
                rgba(255,255,255,.64) 0%,
                rgba(255,255,255,.24) 28%,
                rgba(255,255,255,.06) 55%,
                transparent 72%
            ) !important;

        filter: blur(3px) !important;

        pointer-events: none !important;

        opacity: .75 !important;

        transition:
            transform 900ms cubic-bezier(.16,1,.3,1),
            opacity 500ms ease !important;
    }


    body.layout-app .app-sidebar::after {
        content: "" !important;

        position: absolute !important;

        width: 250px !important;
        height: 130px !important;

        right: -170px !important;
        bottom: 80px !important;

        border-radius: 50% !important;

        background:
            radial-gradient(
                ellipse,
                rgba(255,255,255,.20),
                rgba(255,255,255,.05) 45%,
                transparent 72%
            ) !important;

        filter: blur(12px) !important;

        pointer-events: none !important;

        transform: rotate(-25deg) !important;

        opacity: .75 !important;

        transition:
            right 700ms cubic-bezier(.16,1,.3,1),
            opacity 500ms ease !important;
    }


    body.layout-app .app-sidebar:hover::before {
        transform: translate(24px,18px) scale(1.15) !important;
    }


    body.layout-app .app-sidebar.expanded {
        width: 230px !important;
        min-width: 230px !important;
        max-width: 230px !important;

        border-radius: 29px !important;

        box-shadow:
            0 24px 75px rgba(20,30,50,.17),
            0 4px 12px rgba(20,30,50,.08),
            inset 0 1px 1px rgba(255,255,255,.76),
            inset 0 -1px 2px rgba(255,255,255,.14) !important;
    }

    body.layout-app .app-sidebar.expanded::before {
        transform: translate(40px,22px) scale(1.3) !important;
    }


    /* -----------------------------------------------------
       MENU BUTTON
       ----------------------------------------------------- */

    body.layout-app .sidebar-toggle {
        position: absolute !important;

        left: 12px !important;
        top: 12px !important;

        width: 44px !important;
        height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border:
            1px solid rgba(255,255,255,.46) !important;

        border-radius: 15px !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.34),
                rgba(255,255,255,.12)
            ) !important;

        color: var(--ink, #182033) !important;

        box-shadow:
            inset 0 1px 1px rgba(255,255,255,.65),
            0 5px 18px rgba(20,30,50,.08) !important;

        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;

        cursor: pointer !important;

        z-index: 10 !important;

        -webkit-tap-highlight-color: transparent !important;

        transition:
            transform 360ms cubic-bezier(.16,1,.3,1),
            background 180ms ease,
            box-shadow 180ms ease !important;
    }


    body.layout-app .sidebar-toggle:hover {
        transform: scale(1.07) !important;

        background:
            rgba(255,255,255,.35) !important;

        box-shadow:
            inset 0 1px 1px rgba(255,255,255,.72),
            0 8px 25px rgba(20,30,50,.12) !important;
    }


    body.layout-app .sidebar-toggle:active {
        transform: scale(.93) !important;
    }


    /* hamburger */

    body.layout-app .menu-icon {
        width: 18px !important;
        height: 15px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }


    body.layout-app .menu-icon i {
        width: 100% !important;
        height: 1.7px !important;

        display: block !important;

        border-radius: 999px !important;

        background: currentColor !important;

        opacity: .72 !important;

        transform-origin: center !important;

        transition:
            transform 380ms cubic-bezier(.16,1,.3,1),
            opacity 180ms ease !important;
    }


    body.layout-app .app-sidebar.expanded
    .menu-icon i:nth-child(1) {
        transform: translateY(6.7px) rotate(45deg) !important;
    }


    body.layout-app .app-sidebar.expanded
    .menu-icon i:nth-child(2) {
        opacity: 0 !important;
        transform: scaleX(.1) !important;
    }


    body.layout-app .app-sidebar.expanded
    .menu-icon i:nth-child(3) {
        transform: translateY(-6.7px) rotate(-45deg) !important;
    }


    /* -----------------------------------------------------
       BRAND
       ----------------------------------------------------- */

    body.layout-app .app-sidebar .sidebar-brand {
        position: relative !important;

        margin: 0 9px 28px !important;

        white-space: nowrap !important;

        color: var(--ink, #182033) !important;

        opacity: 0 !important;

        transform: translateX(-14px) !important;

        pointer-events: none !important;

        transition:
            opacity 240ms ease,
            transform 460ms cubic-bezier(.16,1,.3,1) !important;
    }


    body.layout-app .app-sidebar.expanded .sidebar-brand {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }


    /* -----------------------------------------------------
       NAVIGATION
       ----------------------------------------------------- */

    body.layout-app .app-sidebar .sidebar-nav {
        position: relative !important;

        z-index: 5 !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 6px !important;

        width: 100% !important;
    }


    body.layout-app .app-sidebar .sidebar-link {
        position: relative !important;

        width: 100% !important;
        height: 46px !important;

        padding: 0 !important;

        display: flex !important;
        align-items: center !important;

        box-sizing: border-box !important;

        border-radius: 15px !important;

        border: 1px solid transparent !important;

        background: transparent !important;

        color: var(--ink, #182033) !important;

        overflow: hidden !important;

        transition:
            background 220ms ease,
            border-color 220ms ease,
            transform 360ms cubic-bezier(.16,1,.3,1) !important;
    }


    body.layout-app .app-sidebar:not(.expanded)
    .sidebar-link {
        justify-content: center !important;
    }


    body.layout-app .app-sidebar.expanded
    .sidebar-link {
        justify-content: flex-start !important;
    }


    body.layout-app .app-sidebar .sidebar-link .icon {
        flex: 0 0 46px !important;

        width: 18px !important;
        height: 18px !important;

        margin: 0 !important;

        opacity: .66 !important;

        transition:
            opacity 180ms ease,
            transform 360ms cubic-bezier(.16,1,.3,1) !important;
    }


    /* Completely remove collapsed text */

    body.layout-app .app-sidebar:not(.expanded)
    .sidebar-link span {
        display: none !important;
    }


    body.layout-app .app-sidebar.expanded
    .sidebar-link span {
        display: block !important;

        white-space: nowrap !important;

        margin-left: 4px !important;

        animation:
            liquidTextIn 320ms cubic-bezier(.16,1,.3,1) both !important;
    }


    @keyframes liquidTextIn {
        from {
            opacity: 0;
            transform: translateX(-12px);
            filter: blur(4px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
            filter: blur(0);
        }
    }


    body.layout-app .app-sidebar .sidebar-link:hover {
        background:
            rgba(255,255,255,.22) !important;

        border-color:
            rgba(255,255,255,.34) !important;

        transform: translateX(2px) !important;
    }


    body.layout-app .app-sidebar .sidebar-link:hover .icon {
        opacity: 1 !important;
        transform: scale(1.07) !important;
    }


    body.layout-app .app-sidebar .sidebar-link.active {
        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,.34),
                rgba(255,255,255,.15)
            ) !important;

        border-color:
            rgba(255,255,255,.43) !important;

        box-shadow:
            inset 0 1px 1px rgba(255,255,255,.62),
            0 5px 18px rgba(20,30,50,.06) !important;
    }


    body.layout-app .app-sidebar .sidebar-link.active .icon {
        opacity: 1 !important;
    }


    body.layout-app .app-sidebar .sidebar-link.active::before {
        content: "" !important;

        position: absolute !important;

        left: 5px !important;
        top: 50% !important;

        width: 3px !important;
        height: 19px !important;

        transform: translateY(-50%) !important;

        border-radius: 99px !important;

        background: currentColor !important;

        opacity: .55 !important;
    }


    /* -----------------------------------------------------
       CONTENT POSITION
       ----------------------------------------------------- */

    body.layout-app .app-main {
        position: relative !important;

        /*
         * Closed: close to sidebar.
         */
        transform:
            translateX(-54px) !important;

        transition:
            transform 460ms cubic-bezier(.16,1,.3,1) !important;
    }


    body.layout-app.sidebar-open .app-main {
        /*
         * Open: move significantly further right.
         */
        transform:
            translateX(105px) !important;
    }


    /* -----------------------------------------------------
       MOBILE
       ----------------------------------------------------- */

    @media (max-width: 900px) {

        body.layout-app .app-sidebar {
            left: 8px !important;
            top: 10px !important;
            bottom: auto !important;

            width: 60px !important;
            min-width: 60px !important;
            max-width: 60px !important;

            padding: 68px 6px 10px !important;

            border-radius: 22px !important;
        }

        body.layout-app .app-sidebar.expanded {
            width: 215px !important;
            min-width: 215px !important;
            max-width: 215px !important;
        }

        body.layout-app .app-main,
        body.layout-app.sidebar-open .app-main {
            transform: none !important;
        }
    }

}


/* V9.7 — GUARANTEED SIDEBAR TOGGLE INTERACTION */

@media (min-width: 901px) {

    body.layout-app .app-sidebar .sidebar-toggle {
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 9999 !important;
        position: absolute !important;
    }

    body.layout-app .app-sidebar::before,
    body.layout-app .app-sidebar::after {
        pointer-events: none !important;
    }

    body.layout-app .app-sidebar.expanded {
        width: 230px !important;
        min-width: 230px !important;
        max-width: 230px !important;
    }

    body.layout-app:not(.sidebar-open) .app-main {
        transform: translateX(-54px) !important;
    }

    body.layout-app.sidebar-open .app-main {
        transform: translateX(105px) !important;
    }
}


/* =========================================================
   SIDEBAR TOGGLE — FINAL INTERACTION FIX
   ========================================================= */

@media (min-width: 901px) {

    body.layout-app .app-sidebar {
        pointer-events: auto !important;
    }

    body.layout-app .app-sidebar .sidebar-toggle {
        display: flex !important;

        position: absolute !important;

        left: 12px !important;
        top: 12px !important;

        width: 44px !important;
        height: 44px !important;

        pointer-events: auto !important;

        z-index: 2147483647 !important;

        cursor: pointer !important;

        visibility: visible !important;
        opacity: 1 !important;
    }

    body.layout-app .app-sidebar .sidebar-toggle * {
        pointer-events: none !important;
    }

    body.layout-app .app-sidebar::before,
    body.layout-app .app-sidebar::after {
        pointer-events: none !important;
    }

    /*
     * Closed
     */

    body.layout-app:not(.sidebar-open) .app-sidebar {
        width: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;
    }

    /*
     * Open
     */

    body.layout-app.sidebar-open .app-sidebar {
        width: 230px !important;
        min-width: 230px !important;
        max-width: 230px !important;
    }

    /*
     * Content follows sidebar.
     */

    body.layout-app .app-main {
        transform: translateX(-54px) !important;

        transition:
            transform 460ms cubic-bezier(.16,1,.3,1) !important;
    }

    body.layout-app.sidebar-open .app-main {
        transform: translateX(105px) !important;
    }

}

/* =========================================================
   V9.8 — SIDEBAR NAVIGATION GLITCH FIX
   Do not animate sidebar during page navigation/load.
   Animation only happens after the page is ready.
   ========================================================= */

body.layout-app:not(.sidebar-ready) .app-sidebar,
body.layout-app:not(.sidebar-ready) .app-main {
    transition: none !important;
}

body.layout-app.sidebar-ready .app-sidebar {
    transition:
        width 460ms cubic-bezier(.16,1,.3,1),
        min-width 460ms cubic-bezier(.16,1,.3,1),
        max-width 460ms cubic-bezier(.16,1,.3,1),
        border-radius 460ms cubic-bezier(.16,1,.3,1),
        box-shadow 460ms cubic-bezier(.16,1,.3,1) !important;
}

body.layout-app.sidebar-ready .app-main {
    transition:
        transform 460ms cubic-bezier(.16,1,.3,1) !important;
}


/* =========================================================
   V9.8 — LIQUID GLASS ACCOUNT MENU
   Inspired by the supplied iOS liquid-glass reference
   ========================================================= */

body.layout-app .account-pill {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.30),
            rgba(255,255,255,.12) 48%,
            rgba(255,255,255,.18)
        ) !important;

    border:
        1px solid rgba(255,255,255,.46) !important;

    box-shadow:
        0 12px 35px rgba(20,30,50,.14),
        inset 0 1px 1px rgba(255,255,255,.70),
        inset 0 -1px 1px rgba(255,255,255,.12) !important;

    backdrop-filter:
        blur(24px)
        saturate(155%)
        brightness(1.05) !important;

    -webkit-backdrop-filter:
        blur(24px)
        saturate(155%)
        brightness(1.05) !important;

    border-radius: 999px !important;

    transition:
        background 220ms ease,
        box-shadow 220ms ease,
        transform 260ms cubic-bezier(.16,1,.3,1) !important;
}


body.layout-app .account-pill:hover {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.40),
            rgba(255,255,255,.18)
        ) !important;

    box-shadow:
        0 15px 40px rgba(20,30,50,.17),
        inset 0 1px 1px rgba(255,255,255,.80) !important;

    transform: translateY(-1px) !important;
}


/* Account dropdown itself */

body.layout-app .account-menu,
body.layout-app .account-dropdown,
body.layout-app .account-popover {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.40),
            rgba(255,255,255,.20) 45%,
            rgba(255,255,255,.28)
        ) !important;

    border:
        1px solid rgba(255,255,255,.52) !important;

    border-radius: 20px !important;

    box-shadow:
        0 22px 60px rgba(15,25,45,.20),
        0 5px 18px rgba(15,25,45,.10),
        inset 0 1px 1px rgba(255,255,255,.76),
        inset 0 -1px 1px rgba(255,255,255,.14) !important;

    backdrop-filter:
        blur(30px)
        saturate(160%)
        brightness(1.06) !important;

    -webkit-backdrop-filter:
        blur(30px)
        saturate(160%)
        brightness(1.06) !important;

    overflow: hidden !important;
}


/* Glass reflection over dropdown */

body.layout-app .account-menu::before,
body.layout-app .account-dropdown::before,
body.layout-app .account-popover::before {
    content: "" !important;

    position: absolute !important;

    left: -30px !important;
    top: -45px !important;

    width: 180px !important;
    height: 120px !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,.62),
            rgba(255,255,255,.18) 45%,
            transparent 72%
        ) !important;

    filter: blur(7px) !important;

    pointer-events: none !important;
}


/* Menu rows */

body.layout-app .account-menu a,
body.layout-app .account-dropdown a,
body.layout-app .account-popover a {
    background: transparent !important;

    transition:
        background 160ms ease,
        color 160ms ease !important;
}


body.layout-app .account-menu a:hover,
body.layout-app .account-dropdown a:hover,
body.layout-app .account-popover a:hover {
    background:
        rgba(255,255,255,.22) !important;
}


/* Logout */

body.layout-app .account-menu a[href*="logout"]:hover,
body.layout-app .account-dropdown a[href*="logout"]:hover {
    background:
        rgba(255,90,90,.10) !important;
}


/* =========================================================
   V9.9 — NO SIDEBAR PAGE-LOAD FLICKER
   ========================================================= */

@media (min-width: 901px) {

    /* Closed state */

    body.layout-app .app-sidebar:not(.expanded) {
        width: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;
    }

    /* Open state */

    body.layout-app .app-sidebar.expanded {
        width: 230px !important;
        min-width: 230px !important;
        max-width: 230px !important;
    }


    /*
     * During initial page rendering, derive the content
     * position directly from the sidebar class.
     *
     * This means navigation does NOT go:
     *
     * open → closed → open
     *
     * It starts in the correct state.
     */

    body.layout-app .app-main {
        transform: translateX(-54px) !important;

        transition:
            transform 460ms cubic-bezier(.16,1,.3,1) !important;
    }


    body.layout-app:has(.app-sidebar.expanded) .app-main,
    body.layout-app.sidebar-open .app-main {
        transform: translateX(105px) !important;
    }


    /*
     * Sidebar animation only applies when the user
     * actually changes its state.
     */

    body.layout-app .app-sidebar {
        transition:
            width 460ms cubic-bezier(.16,1,.3,1),
            min-width 460ms cubic-bezier(.16,1,.3,1),
            max-width 460ms cubic-bezier(.16,1,.3,1),
            border-radius 460ms cubic-bezier(.16,1,.3,1),
            box-shadow 460ms cubic-bezier(.16,1,.3,1) !important;
    }

}


/* =========================================================
   V10 — FINAL FLOATING LIQUID GLASS SIDEBAR
   ========================================================= */

@media (min-width: 901px) {

    /* The actual floating sidebar surface */

    body.layout-app .app-sidebar {
        position: fixed !important;

        left: 18px !important;
        top: 52px !important;
        bottom: 52px !important;

        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;

        padding: 70px 8px 18px !important;

        box-sizing: border-box !important;

        border-radius: 28px !important;

        /* transparent glass */
        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,.30) 0%,
                rgba(255,255,255,.15) 30%,
                rgba(255,255,255,.08) 62%,
                rgba(255,255,255,.20) 100%
            ) !important;

        border: 1px solid rgba(255,255,255,.52) !important;

        box-shadow:
            0 22px 55px rgba(20,30,50,.15),
            0 3px 12px rgba(20,30,50,.08),
            inset 0 1px 1px rgba(255,255,255,.78),
            inset 0 -1px 2px rgba(255,255,255,.16) !important;

        backdrop-filter:
            blur(28px)
            saturate(165%)
            brightness(1.06) !important;

        -webkit-backdrop-filter:
            blur(28px)
            saturate(165%)
            brightness(1.06) !important;

        overflow: hidden !important;

        z-index: 100 !important;
    }


    /* Glass light/reflection */

    body.layout-app .app-sidebar::before {
        content: "" !important;

        position: absolute !important;

        left: -70px !important;
        top: -80px !important;

        width: 190px !important;
        height: 190px !important;

        border-radius: 50% !important;

        background:
            radial-gradient(
                circle,
                rgba(255,255,255,.68) 0%,
                rgba(255,255,255,.28) 30%,
                rgba(255,255,255,.08) 54%,
                transparent 73%
            ) !important;

        filter: blur(4px) !important;

        pointer-events: none !important;

        z-index: 0 !important;

        opacity: .72 !important;
    }


    /* Lower liquid reflection */

    body.layout-app .app-sidebar::after {
        content: "" !important;

        position: absolute !important;

        left: -35px !important;
        right: -35px !important;
        bottom: -55px !important;

        height: 180px !important;

        border-radius: 50% !important;

        background:
            radial-gradient(
                ellipse,
                rgba(255,255,255,.20),
                transparent 70%
            ) !important;

        filter: blur(15px) !important;

        pointer-events: none !important;

        z-index: 0 !important;
    }


    /* =====================================================
       OPEN SIDEBAR
       ===================================================== */

    body.layout-app .app-sidebar.expanded {
        width: 184px !important;
        min-width: 184px !important;
        max-width: 184px !important;

        border-radius: 28px !important;
    }


    /* =====================================================
       MENU BUTTON
       ===================================================== */

    body.layout-app .app-sidebar .sidebar-toggle {
        left: 12px !important;
        top: 12px !important;

        width: 44px !important;
        height: 44px !important;

        border-radius: 15px !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.40),
                rgba(255,255,255,.14)
            ) !important;

        border:
            1px solid rgba(255,255,255,.55) !important;

        box-shadow:
            inset 0 1px 1px rgba(255,255,255,.75),
            0 7px 20px rgba(20,30,50,.10) !important;

        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;

        z-index: 20 !important;
    }


    body.layout-app .app-sidebar .sidebar-toggle:hover {
        background:
            rgba(255,255,255,.38) !important;

        transform: scale(1.05) !important;
    }


    /* =====================================================
       BRAND
       ===================================================== */

    body.layout-app .app-sidebar .sidebar-brand {
        position: relative !important;
        z-index: 5 !important;

        margin: 0 8px 24px !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       NAV
       ===================================================== */

    body.layout-app .app-sidebar .sidebar-nav {
        position: relative !important;
        z-index: 5 !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 6px !important;
    }


    body.layout-app .app-sidebar .sidebar-link {
        height: 44px !important;

        border-radius: 14px !important;

        border:
            1px solid transparent !important;

        background: transparent !important;

        color: var(--ink, #182033) !important;

        transition:
            background .18s ease,
            border-color .18s ease,
            transform .25s cubic-bezier(.16,1,.3,1) !important;
    }


    /* collapsed = icons only */

    body.layout-app .app-sidebar:not(.expanded)
    .sidebar-link {
        justify-content: center !important;
    }

    body.layout-app .app-sidebar:not(.expanded)
    .sidebar-link span {
        display: none !important;
    }


    /* expanded = icon + text */

    body.layout-app .app-sidebar.expanded
    .sidebar-link {
        justify-content: flex-start !important;
    }

    body.layout-app .app-sidebar.expanded
    .sidebar-link span {
        display: block !important;
        margin-left: 3px !important;
        white-space: nowrap !important;
    }


    body.layout-app .app-sidebar .sidebar-link:hover {
        background:
            rgba(255,255,255,.25) !important;

        border-color:
            rgba(255,255,255,.36) !important;

        transform: translateX(2px) !important;
    }


    body.layout-app .app-sidebar .sidebar-link.active {
        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,.38),
                rgba(255,255,255,.16)
            ) !important;

        border-color:
            rgba(255,255,255,.48) !important;

        box-shadow:
            inset 0 1px 1px rgba(255,255,255,.62),
            0 5px 16px rgba(20,30,50,.06) !important;
    }


    /* =====================================================
       CONTENT POSITION
       ===================================================== */

    body.layout-app .app-main {
        transform: translateX(-45px) !important;
    }

    body.layout-app.sidebar-open .app-main {
        transform: translateX(82px) !important;
    }

}


/* =========================================================
   V10 — LIQUID GLASS ACCOUNT DROPDOWN
   ========================================================= */

body.layout-app .account-menu {
    position: relative !important;
    z-index: 200 !important;
}


/* Account pill */

body.layout-app .account-pill {
    border-radius: 999px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.36),
            rgba(255,255,255,.14)
        ) !important;

    border:
        1px solid rgba(255,255,255,.50) !important;

    box-shadow:
        0 10px 30px rgba(20,30,50,.12),
        inset 0 1px 1px rgba(255,255,255,.70) !important;

    backdrop-filter:
        blur(25px)
        saturate(165%)
        brightness(1.05) !important;

    -webkit-backdrop-filter:
        blur(25px)
        saturate(165%)
        brightness(1.05) !important;
}


/* Trigger */

body.layout-app .account-trigger {
    min-height: 40px !important;

    padding:
        0 12px 0 15px !important;

    border-radius: 999px !important;

    color: var(--ink, #182033) !important;
}


/* Dropdown */

body.layout-app .account-panel {
    position: absolute !important;

    top: calc(100% + 9px) !important;
    right: 0 !important;

    min-width: 150px !important;

    padding: 7px !important;

    border-radius: 20px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.48),
            rgba(255,255,255,.20) 45%,
            rgba(255,255,255,.30)
        ) !important;

    border:
        1px solid rgba(255,255,255,.58) !important;

    box-shadow:
        0 22px 55px rgba(20,30,50,.20),
        0 5px 15px rgba(20,30,50,.09),
        inset 0 1px 1px rgba(255,255,255,.78),
        inset 0 -1px 1px rgba(255,255,255,.15) !important;

    backdrop-filter:
        blur(30px)
        saturate(170%)
        brightness(1.07) !important;

    -webkit-backdrop-filter:
        blur(30px)
        saturate(170%)
        brightness(1.07) !important;

    overflow: hidden !important;

    transform-origin: top right !important;
}


/* Dropdown reflection */

body.layout-app .account-panel::before {
    content: "" !important;

    position: absolute !important;

    left: -35px !important;
    top: -45px !important;

    width: 160px !important;
    height: 110px !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,.62),
            rgba(255,255,255,.16) 48%,
            transparent 72%
        ) !important;

    filter: blur(7px) !important;

    pointer-events: none !important;
}


/* Security + Logout */

body.layout-app .account-panel a,
body.layout-app .account-panel .menu-logout {
    position: relative !important;
    z-index: 2 !important;

    width: 100% !important;

    box-sizing: border-box !important;

    border: 0 !important;

    border-radius: 13px !important;

    background: transparent !important;

    color: var(--ink, #182033) !important;

    padding: 11px 12px !important;

    text-align: left !important;

    transition:
        background .16s ease,
        transform .16s ease !important;
}


body.layout-app .account-panel a:hover,
body.layout-app .account-panel .menu-logout:hover {
    background:
        rgba(255,255,255,.27) !important;

    transform: translateX(1px) !important;
}


/* Keep logout red but glass */

body.layout-app .account-panel .menu-logout {
    color: #b3261e !important;
}


body.layout-app .account-panel .menu-logout:hover {
    background:
        rgba(255,90,90,.10) !important;
}


/* Divider */

body.layout-app .account-divider {
    height: 1px !important;

    margin: 5px 7px !important;

    background:
        rgba(255,255,255,.42) !important;
}


/* =========================================================
   V11 — FINAL LIQUID GLASS LAYOUT
   Matches the supplied reference
   ========================================================= */

@media (min-width: 1201px) {

    /* =====================================================
       SIDEBAR
       ===================================================== */

    body.layout-app .app-sidebar {

        left: 28px !important;
        top: 58px !important;
        bottom: 24px !important;

        width: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;

        padding: 70px 8px 20px !important;

        border-radius: 28px !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.34),
                rgba(255,255,255,.13) 45%,
                rgba(255,255,255,.20)
            ) !important;

        border:
            1px solid rgba(255,255,255,.55) !important;

        box-shadow:
            0 25px 70px rgba(15,30,45,.16),
            0 4px 15px rgba(15,30,45,.08),
            inset 0 1px 1px rgba(255,255,255,.82),
            inset 0 -1px 2px rgba(255,255,255,.16) !important;

        backdrop-filter:
            blur(30px)
            saturate(170%)
            brightness(1.06) !important;

        -webkit-backdrop-filter:
            blur(30px)
            saturate(170%)
            brightness(1.06) !important;

        overflow: hidden !important;
    }


    /* glass light */

    body.layout-app .app-sidebar::before {

        content: "" !important;

        position: absolute !important;

        left: -65px !important;
        top: -80px !important;

        width: 190px !important;
        height: 190px !important;

        border-radius: 50% !important;

        background:
            radial-gradient(
                circle,
                rgba(255,255,255,.72),
                rgba(255,255,255,.25) 35%,
                transparent 72%
            ) !important;

        filter: blur(5px) !important;

        pointer-events: none !important;

        z-index: 0 !important;
    }


    body.layout-app .app-sidebar::after {

        content: "" !important;

        position: absolute !important;

        left: -45px !important;
        right: -45px !important;
        bottom: -70px !important;

        height: 190px !important;

        border-radius: 50% !important;

        background:
            radial-gradient(
                ellipse,
                rgba(255,255,255,.24),
                transparent 70%
            ) !important;

        filter: blur(14px) !important;

        pointer-events: none !important;

        z-index: 0 !important;
    }


    /* =====================================================
       EXPANDED SIDEBAR — REFERENCE SIZE
       ===================================================== */

    body.layout-app .app-sidebar.expanded {

        width: 196px !important;
        min-width: 196px !important;
        max-width: 196px !important;

        border-radius: 28px !important;

        box-shadow:
            0 28px 75px rgba(15,30,45,.19),
            0 5px 18px rgba(15,30,45,.09),
            inset 0 1px 1px rgba(255,255,255,.86),
            inset 0 -1px 2px rgba(255,255,255,.16) !important;
    }


    /* =====================================================
       SIDEBAR TOGGLE
       ===================================================== */

    body.layout-app .app-sidebar .sidebar-toggle {

        left: 13px !important;
        top: 13px !important;

        width: 44px !important;
        height: 44px !important;

        border-radius: 15px !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.44),
                rgba(255,255,255,.16)
            ) !important;

        border:
            1px solid rgba(255,255,255,.60) !important;

        box-shadow:
            inset 0 1px 1px rgba(255,255,255,.78),
            0 7px 22px rgba(15,30,45,.10) !important;

        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
    }


    /* =====================================================
       SIDEBAR CONTENT
       ===================================================== */

    body.layout-app .app-sidebar .sidebar-brand {

        position: relative !important;

        z-index: 5 !important;

        margin:
            0 10px 28px !important;

        color:
            var(--ink, #182033) !important;
    }


    body.layout-app .app-sidebar .sidebar-nav {

        position: relative !important;

        z-index: 5 !important;

        gap: 7px !important;
    }


    body.layout-app .app-sidebar .sidebar-link {

        height: 46px !important;

        border-radius: 15px !important;

        color:
            var(--ink, #182033) !important;
    }


    body.layout-app .app-sidebar .sidebar-link:hover {

        background:
            rgba(255,255,255,.25) !important;

        border-color:
            rgba(255,255,255,.38) !important;
    }


    body.layout-app .app-sidebar .sidebar-link.active {

        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,.42),
                rgba(255,255,255,.17)
            ) !important;

        border-color:
            rgba(255,255,255,.50) !important;

        box-shadow:
            inset 0 1px 1px rgba(255,255,255,.65),
            0 5px 18px rgba(15,30,45,.06) !important;
    }


    /* =====================================================
       MAIN CONTENT
       ===================================================== */

    body.layout-app .app-main {

        transform:
            translateX(-42px) !important;

        transition:
            transform 460ms cubic-bezier(.16,1,.3,1) !important;
    }


    body.layout-app.sidebar-open .app-main {

        transform:
            translateX(82px) !important;
    }


    /* =====================================================
       ACCOUNT — TOP RIGHT
       ===================================================== */

    body.layout-app .account-menu {

        position: fixed !important;

        top: 50px !important;
        right: 28px !important;

        width: auto !important;

        z-index: 500 !important;
    }


    body.layout-app .account-trigger {

        width: 104px !important;
        height: 34px !important;

        padding: 0 11px 0 14px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        border-radius: 999px !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.40),
                rgba(255,255,255,.16)
            ) !important;

        border:
            1px solid rgba(255,255,255,.60) !important;

        color:
            var(--ink, #182033) !important;

        box-shadow:
            0 9px 28px rgba(15,30,45,.12),
            inset 0 1px 1px rgba(255,255,255,.76) !important;

        backdrop-filter:
            blur(24px)
            saturate(165%) !important;

        -webkit-backdrop-filter:
            blur(24px)
            saturate(165%) !important;

        cursor: pointer !important;
    }


    body.layout-app .account-trigger:hover {

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.50),
                rgba(255,255,255,.20)
            ) !important;

        transform: translateY(-1px) !important;
    }


    body.layout-app .account-trigger .icon {

        width: 14px !important;
        height: 14px !important;
    }


    /* =====================================================
       ACCOUNT DROPDOWN
       ===================================================== */

    body.layout-app .account-panel {

        position: absolute !important;

        top: 42px !important;
        right: 0 !important;

        width: 174px !important;
        min-width: 174px !important;

        padding: 8px !important;

        box-sizing: border-box !important;

        border-radius: 20px !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.50),
                rgba(255,255,255,.22) 45%,
                rgba(255,255,255,.34)
            ) !important;

        border:
            1px solid rgba(255,255,255,.62) !important;

        box-shadow:
            0 25px 60px rgba(15,30,45,.20),
            0 5px 18px rgba(15,30,45,.09),
            inset 0 1px 1px rgba(255,255,255,.82),
            inset 0 -1px 2px rgba(255,255,255,.14) !important;

        backdrop-filter:
            blur(32px)
            saturate(175%)
            brightness(1.07) !important;

        -webkit-backdrop-filter:
            blur(32px)
            saturate(175%)
            brightness(1.07) !important;

        overflow: hidden !important;

        transform-origin:
            top right !important;
    }


    /* glass reflection */

    body.layout-app .account-panel::before {

        content: "" !important;

        position: absolute !important;

        left: -30px !important;
        top: -45px !important;

        width: 170px !important;
        height: 105px !important;

        border-radius: 50% !important;

        background:
            radial-gradient(
                ellipse,
                rgba(255,255,255,.68),
                rgba(255,255,255,.20) 45%,
                transparent 72%
            ) !important;

        filter: blur(7px) !important;

        pointer-events: none !important;
    }


    /* dropdown links */

    body.layout-app .account-panel a,
    body.layout-app .account-panel .menu-logout {

        position: relative !important;

        z-index: 2 !important;

        display: block !important;

        width: 100% !important;

        min-height: 40px !important;

        box-sizing: border-box !important;

        padding: 10px 12px !important;

        border: 0 !important;

        border-radius: 12px !important;

        background: transparent !important;

        color:
            var(--ink, #182033) !important;

        text-decoration: none !important;

        text-align: left !important;

        font: inherit !important;

        cursor: pointer !important;
    }


    body.layout-app .account-panel a:hover,
    body.layout-app .account-panel .menu-logout:hover {

        background:
            rgba(255,255,255,.28) !important;
    }


    body.layout-app .account-panel .menu-logout {

        color: #c62828 !important;
    }


    body.layout-app .account-panel .menu-logout:hover {

        background:
            rgba(255,90,90,.10) !important;
    }


    body.layout-app .account-divider {

        height: 1px !important;

        margin: 4px 8px !important;

        background:
            rgba(255,255,255,.48) !important;
    }

}


/* =========================================================
   SMALLER DESKTOP
   ========================================================= */

@media (min-width: 901px) and (max-width: 1200px) {

    body.layout-app .app-sidebar.expanded {

        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;
    }

    body.layout-app .account-menu {

        right: 18px !important;
        top: 42px !important;
    }

}

/* =========================================================
   V12 — ACCOUNT DROPDOWN FINAL FIX
   ========================================================= */

@media (min-width: 901px) {

    body.layout-app .account-menu {
        position: fixed !important;
        top: 48px !important;
        right: 28px !important;

        width: 104px !important;

        z-index: 99999 !important;

        overflow: visible !important;
    }

    body.layout-app .account-trigger {
        position: relative !important;

        width: 104px !important;
        height: 36px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        box-sizing: border-box !important;

        padding: 0 11px 0 14px !important;

        border-radius: 999px !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.42),
                rgba(255,255,255,.16)
            ) !important;

        border: 1px solid rgba(255,255,255,.62) !important;

        box-shadow:
            0 10px 30px rgba(15,30,45,.14),
            inset 0 1px 1px rgba(255,255,255,.80) !important;

        backdrop-filter:
            blur(26px)
            saturate(175%) !important;

        -webkit-backdrop-filter:
            blur(26px)
            saturate(175%) !important;

        cursor: pointer !important;
    }


    /* THE ACTUAL DROPDOWN */

    body.layout-app .account-panel {
        position: absolute !important;

        top: 44px !important;
        right: 0 !important;

        width: 170px !important;
        min-width: 170px !important;
        height: auto !important;
        min-height: 0 !important;

        box-sizing: border-box !important;

        display: block !important;

        padding: 7px !important;

        border-radius: 20px !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.54),
                rgba(255,255,255,.22) 48%,
                rgba(255,255,255,.34)
            ) !important;

        border: 1px solid rgba(255,255,255,.65) !important;

        box-shadow:
            0 24px 60px rgba(15,30,45,.22),
            0 5px 18px rgba(15,30,45,.10),
            inset 0 1px 1px rgba(255,255,255,.84),
            inset 0 -1px 2px rgba(255,255,255,.15) !important;

        backdrop-filter:
            blur(32px)
            saturate(180%)
            brightness(1.08) !important;

        -webkit-backdrop-filter:
            blur(32px)
            saturate(180%)
            brightness(1.08) !important;

        overflow: hidden !important;

        transform-origin: top right !important;
    }


    /*
     * IMPORTANT:
     * hidden is controlled by the existing JS.
     * Never force display when the panel has [hidden].
     */

    body.layout-app .account-panel[hidden] {
        display: none !important;
    }


    body.layout-app .account-panel:not([hidden]) {
        display: block !important;
    }


    /* Security */

    body.layout-app .account-panel > a {
        position: relative !important;

        z-index: 5 !important;

        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        height: 42px !important;

        box-sizing: border-box !important;

        padding: 0 13px !important;

        border-radius: 13px !important;

        color: var(--ink, #182033) !important;

        text-decoration: none !important;

        background: transparent !important;
    }


    /* divider */

    body.layout-app .account-panel .account-divider {
        display: block !important;

        width: calc(100% - 14px) !important;
        height: 1px !important;

        margin: 4px 7px !important;

        background: rgba(255,255,255,.50) !important;
    }


    /* THIS WAS THE MISSING PART:
       the logout form itself */

    body.layout-app .account-panel form {
        display: block !important;

        width: 100% !important;

        height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    body.layout-app .account-panel form .menu-logout {
        position: relative !important;

        z-index: 5 !important;

        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        height: 42px !important;

        box-sizing: border-box !important;

        margin: 0 !important;
        padding: 0 13px !important;

        border: 0 !important;
        border-radius: 13px !important;

        background: transparent !important;

        color: #c62828 !important;

        font: inherit !important;

        text-align: left !important;

        cursor: pointer !important;
    }


    body.layout-app .account-panel > a:hover,
    body.layout-app .account-panel form .menu-logout:hover {
        background:
            rgba(255,255,255,.30) !important;
    }


    body.layout-app .account-panel form .menu-logout:hover {
        background:
            rgba(255,90,90,.11) !important;
    }
}


/* =========================================================
   V12 — SIDEBAR REAL FLOATING HEIGHT
   ========================================================= */

@media (min-width: 901px) {

    body.layout-app .app-sidebar {

        /* EXACT floating viewport geometry */

        position: fixed !important;

        top: 52px !important;
        bottom: 24px !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        border-radius: 28px !important;

        clip-path: inset(
            0 0 0 0
            round 28px
        ) !important;
    }


    body.layout-app .app-sidebar.expanded {

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        border-radius: 28px !important;
    }


    /*
     * Keep the glass reflections inside the rounded
     * bottom edge.
     */

    body.layout-app .app-sidebar::before,
    body.layout-app .app-sidebar::after {
        border-radius: inherit !important;
        pointer-events: none !important;
    }
}


/* =========================================================
   ACCOUNT DROPDOWN — FINAL
   ========================================================= */

@media (min-width: 901px) {

    body.layout-app .account-menu {
        position: fixed !important;

        top: 48px !important;
        right: 28px !important;

        width: 104px !important;

        z-index: 999999 !important;

        overflow: visible !important;
    }

    body.layout-app .account-trigger {
        position: relative !important;

        width: 104px !important;
        height: 36px !important;

        box-sizing: border-box !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        margin: 0 !important;
        padding: 0 11px 0 14px !important;

        border-radius: 999px !important;

        border: 1px solid rgba(255,255,255,.60) !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.42),
                rgba(255,255,255,.16)
            ) !important;

        box-shadow:
            0 10px 30px rgba(15,30,45,.14),
            inset 0 1px 1px rgba(255,255,255,.80) !important;

        backdrop-filter:
            blur(26px)
            saturate(175%) !important;

        -webkit-backdrop-filter:
            blur(26px)
            saturate(175%) !important;

        cursor: pointer !important;

        z-index: 2 !important;
    }


    /*
     * The HTML uses the native [hidden] attribute.
     * Respect it until ui-v9.js opens the menu.
     */

    body.layout-app .account-panel[hidden] {
        display: none !important;
    }


    /*
     * OPEN PANEL
     */

    body.layout-app .account-panel:not([hidden]) {

        position: absolute !important;

        display: block !important;

        top: 44px !important;
        right: 0 !important;

        width: 170px !important;
        min-width: 170px !important;

        height: auto !important;
        min-height: 0 !important;

        box-sizing: border-box !important;

        margin: 0 !important;
        padding: 7px !important;

        border-radius: 20px !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.58),
                rgba(255,255,255,.25) 48%,
                rgba(255,255,255,.36)
            ) !important;

        border:
            1px solid rgba(255,255,255,.68) !important;

        box-shadow:
            0 24px 65px rgba(15,30,45,.24),
            0 5px 18px rgba(15,30,45,.10),
            inset 0 1px 1px rgba(255,255,255,.86),
            inset 0 -1px 2px rgba(255,255,255,.16) !important;

        backdrop-filter:
            blur(34px)
            saturate(180%)
            brightness(1.08) !important;

        -webkit-backdrop-filter:
            blur(34px)
            saturate(180%)
            brightness(1.08) !important;

        overflow: hidden !important;

        z-index: 999999 !important;
    }


    /* glass highlight */

    body.layout-app .account-panel:not([hidden])::before {

        content: "" !important;

        position: absolute !important;

        left: -35px !important;
        top: -48px !important;

        width: 180px !important;
        height: 115px !important;

        border-radius: 50% !important;

        background:
            radial-gradient(
                ellipse,
                rgba(255,255,255,.72),
                rgba(255,255,255,.22) 45%,
                transparent 72%
            ) !important;

        filter: blur(7px) !important;

        pointer-events: none !important;

        z-index: 0 !important;
    }


    /* Security */

    body.layout-app .account-panel > a {

        position: relative !important;
        z-index: 2 !important;

        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        height: 42px !important;

        box-sizing: border-box !important;

        margin: 0 !important;
        padding: 0 13px !important;

        border: 0 !important;
        border-radius: 12px !important;

        background: transparent !important;

        color: var(--ink, #182033) !important;

        text-decoration: none !important;
    }


    /* divider */

    body.layout-app .account-panel .account-divider {

        display: block !important;

        width: calc(100% - 14px) !important;
        height: 1px !important;

        margin: 4px 7px !important;

        background: rgba(255,255,255,.55) !important;
    }


    /*
     * Logout is inside FORM.
     */

    body.layout-app .account-panel form {

        position: relative !important;
        z-index: 2 !important;

        display: block !important;

        width: 100% !important;
        height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    body.layout-app .account-panel form .menu-logout {

        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        height: 42px !important;

        box-sizing: border-box !important;

        margin: 0 !important;
        padding: 0 13px !important;

        border: 0 !important;
        border-radius: 12px !important;

        background: transparent !important;

        color: #c62828 !important;

        font: inherit !important;

        text-align: left !important;

        cursor: pointer !important;
    }


    body.layout-app .account-panel > a:hover {

        background:
            rgba(255,255,255,.30) !important;
    }


    body.layout-app .account-panel form .menu-logout:hover {

        background:
            rgba(255,90,90,.11) !important;
    }

}


/* =========================================================
   V13 — ACCOUNT GLASS FINAL TUNING
   ========================================================= */

@media (min-width: 901px) {

    body.layout-app .account-menu {
        top: 48px !important;
        right: 28px !important;
    }

    body.layout-app .account-panel:not([hidden]) {
        top: 41px !important;
        right: 0 !important;

        width: 158px !important;
        min-width: 158px !important;

        padding: 6px !important;

        border-radius: 18px !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.62),
                rgba(255,255,255,.32) 48%,
                rgba(255,255,255,.42)
            ) !important;

        border:
            1px solid rgba(255,255,255,.70) !important;

        box-shadow:
            0 20px 48px rgba(15,30,45,.20),
            0 4px 14px rgba(15,30,45,.09),
            inset 0 1px 1px rgba(255,255,255,.88),
            inset 0 -1px 2px rgba(255,255,255,.18) !important;

        backdrop-filter:
            blur(32px)
            saturate(175%)
            brightness(1.08) !important;

        -webkit-backdrop-filter:
            blur(32px)
            saturate(175%)
            brightness(1.08) !important;
    }


    /* subtle liquid highlight */

    body.layout-app .account-panel:not([hidden])::before {
        left: -28px !important;
        top: -38px !important;

        width: 150px !important;
        height: 90px !important;

        opacity: .55 !important;

        filter: blur(8px) !important;
    }


    body.layout-app .account-panel > a,
    body.layout-app .account-panel form .menu-logout {

        height: 38px !important;

        min-height: 38px !important;

        padding-left: 11px !important;
        padding-right: 11px !important;

        border-radius: 11px !important;

        font-size: 14px !important;
    }


    body.layout-app .account-panel .account-divider {
        width: calc(100% - 10px) !important;

        margin:
            3px 5px !important;

        background:
            rgba(255,255,255,.55) !important;
    }


    body.layout-app .account-panel form {
        height: 38px !important;
    }


    body.layout-app .account-panel form .menu-logout {
        width: 100% !important;
    }

}


/* =========================================================
   V14 — REMOVE EXTRA ACCOUNT GLASS LAYER
   ========================================================= */

@media (min-width: 901px) {

    /* The wrapper must NOT be a glass surface */
    body.layout-app .account-menu {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        padding: 0 !important;
        overflow: visible !important;
    }

    /* Only the actual temp2 button is glass */
    body.layout-app .account-trigger {
        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.42),
                rgba(255,255,255,.16)
            ) !important;

        border: 1px solid rgba(255,255,255,.60) !important;

        box-shadow:
            0 8px 24px rgba(15,30,45,.12),
            inset 0 1px 1px rgba(255,255,255,.78) !important;

        backdrop-filter:
            blur(24px)
            saturate(165%) !important;

        -webkit-backdrop-filter:
            blur(24px)
            saturate(165%) !important;
    }

    /* Dropdown remains its own separate glass surface */
    body.layout-app .account-panel:not([hidden]) {
        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.58),
                rgba(255,255,255,.28)
            ) !important;

        border: 1px solid rgba(255,255,255,.68) !important;

        box-shadow:
            0 20px 48px rgba(15,30,45,.20),
            inset 0 1px 1px rgba(255,255,255,.84) !important;

        backdrop-filter:
            blur(30px)
            saturate(175%) !important;

        -webkit-backdrop-filter:
            blur(30px)
            saturate(175%) !important;
    }
}


/* =========================================================
   CUSTOM JELLYFIN PAGE — V9 KENPACHI
   ========================================================= */

.jf-page{
    position:relative;
    width:min(1180px,calc(100vw - 150px));
    margin:0 auto;
    padding:24px 0 60px;
}

.jf-hero{
    position:relative;
    min-height:330px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.14);
    border-radius:30px;
    background:rgba(12,15,24,.62);
    box-shadow:0 24px 70px rgba(0,0,0,.28);
    isolation:isolate;
}

.jf-hero-art{
    position:absolute;
    inset:0;
    background:
        url("/static/assets/v9/backgrounds/jellyfin-kenpachi.png")
        center center/cover no-repeat;
    transform:scale(1.015);
    z-index:-3;
}

.jf-hero-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(8,10,17,.92) 0%,rgba(8,10,17,.68) 42%,rgba(8,10,17,.20) 100%),
        linear-gradient(0deg,rgba(8,10,17,.78),transparent 65%);
    z-index:-2;
}

.jf-hero-content{
    position:relative;
    z-index:2;
    min-height:330px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:42px;
    max-width:600px;
}

.jf-eyebrow,
.jf-label{
    display:block;
    font-size:11px;
    font-weight:700;
    letter-spacing:.18em;
    color:rgba(255,255,255,.62);
    margin-bottom:9px;
}

.jf-hero h1{
    margin:0;
    font-size:clamp(38px,5vw,64px);
    line-height:.95;
    letter-spacing:-.04em;
    color:#fff;
}

.jf-hero p{
    margin:16px 0 0;
    color:rgba(255,255,255,.76);
    font-size:15px;
    line-height:1.6;
}

.jf-panel{
    margin-top:20px;
    padding:26px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:26px;
    background:rgba(17,21,31,.68);
    backdrop-filter:blur(22px) saturate(125%);
    -webkit-backdrop-filter:blur(22px) saturate(125%);
    box-shadow:0 18px 50px rgba(0,0,0,.18);
}

.jf-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px;
}

.jf-panel h2{
    margin:0;
    color:var(--ink,#fff);
    font-size:25px;
    letter-spacing:-.025em;
}

.jf-refresh{
    border:1px solid rgba(255,255,255,.16);
    border-radius:13px;
    padding:10px 16px;
    background:rgba(255,255,255,.07);
    color:inherit;
    cursor:pointer;
    transition:.2s ease;
}

.jf-refresh:hover{
    background:rgba(255,255,255,.13);
    transform:translateY(-1px);
}

.jf-refresh:disabled{
    opacity:.55;
    cursor:wait;
}

.jf-series-grid{
    min-height:110px;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
    gap:16px;
}

.jf-empty{
    grid-column:1/-1;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:110px;
    border:1px dashed rgba(255,255,255,.13);
    border-radius:18px;
    color:rgba(255,255,255,.52);
    font-size:14px;
}

.jf-form{
    display:grid;
    grid-template-columns:1.5fr .7fr .7fr 1.7fr auto;
    align-items:end;
    gap:14px;
}

.jf-field{
    min-width:0;
}

.jf-field label{
    display:block;
    margin:0 0 7px;
    font-size:12px;
    color:rgba(255,255,255,.58);
}

.jf-field input{
    width:100%;
    height:44px;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.13);
    border-radius:13px;
    padding:0 13px;
    background:rgba(255,255,255,.06);
    color:#fff;
    outline:none;
}

.jf-field input:focus{
    border-color:rgba(255,255,255,.32);
    background:rgba(255,255,255,.09);
}

.jf-file-field input{
    padding:9px;
}

.jf-upload-btn{
    height:44px;
    border:0;
    border-radius:13px;
    padding:0 20px;
    background:var(--accent,#b52a35);
    color:#fff;
    font-weight:700;
    cursor:pointer;
    white-space:nowrap;
    transition:.2s ease;
}

.jf-upload-btn:hover{
    transform:translateY(-1px);
    filter:brightness(1.08);
}

.jf-upload-btn:disabled{
    opacity:.55;
    cursor:wait;
    transform:none;
}

.jf-upload-status{
    grid-column:1/-1;
    min-height:20px;
    padding-top:5px;
    color:rgba(255,255,255,.62);
    font-size:13px;
}

.jf-upload-status.error{
    color:#ff9d9d;
}

@media(max-width:900px){
    .jf-page{
        width:calc(100vw - 110px);
    }

    .jf-form{
        grid-template-columns:1fr 1fr;
    }

    .jf-upload-btn{
        width:100%;
    }
}

@media(max-width:620px){
    .jf-page{
        width:calc(100vw - 32px);
        padding-top:16px;
    }

    .jf-hero{
        min-height:280px;
    }

    .jf-hero-content{
        min-height:280px;
        padding:28px;
    }

    .jf-panel{
        padding:20px;
    }

    .jf-form{
        grid-template-columns:1fr;
    }

    .jf-panel-head{
        align-items:flex-start;
    }
}

/* Jellyfin — use Kenpachi only as the full-page background */
.jf-hero{
    min-height:170px;
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(18px) saturate(120%);
    -webkit-backdrop-filter:blur(18px) saturate(120%);
}

.jf-hero-art,
.jf-hero-overlay{
    display:none !important;
}

.jf-hero-content{
    min-height:170px;
    padding:30px 32px;
}

.jf-hero h2{
    margin:0;
    color:var(--ink,#18233d);
    font-size:32px;
    letter-spacing:-.03em;
}

.jf-hero p{
    color:var(--muted,#667085);
}


/* Jellyfin library tabs + connection status */

.jf-connection{
    margin-top:7px;
    font-size:12px;
    color:rgba(24,35,61,.55);
}

.jf-connection.connected{
    color:#25834b;
}

.jf-connection.disconnected{
    color:#b43b3b;
}

.jf-tabs{
    display:flex;
    gap:8px;
    margin-bottom:18px;
}

.jf-tab{
    border:1px solid rgba(24,35,61,.12);
    border-radius:12px;
    padding:9px 17px;
    background:rgba(255,255,255,.28);
    color:var(--ink,#18233d);
    cursor:pointer;
    transition:.2s ease;
}

.jf-tab:hover{
    background:rgba(255,255,255,.48);
}

.jf-tab.active{
    background:rgba(255,255,255,.76);
    box-shadow:0 5px 18px rgba(20,30,50,.08);
    font-weight:700;
}

.jf-media-card{
    position:relative;
    min-width:0;
    padding:18px;
    border:1px solid rgba(255,255,255,.20);
    border-radius:18px;
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    transition:.2s ease;
}

.jf-media-card:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,.25);
}

.jf-media-icon{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:12px;
    border-radius:12px;
    background:rgba(181,42,53,.12);
    color:#b52a35;
    font-size:13px;
}

.jf-media-info h3{
    margin:0 0 5px;
    color:var(--ink,#18233d);
    font-size:17px;
}

.jf-media-info p{
    margin:0 0 5px;
    color:var(--muted,#667085);
    font-size:12px;
}

.jf-media-info>span{
    color:var(--muted,#667085);
    font-size:11px;
}

.jf-season-list{
    margin-top:14px;
    display:flex;
    flex-direction:column;
    gap:7px;
}

.jf-season{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 10px;
    border-radius:10px;
    background:rgba(255,255,255,.20);
    font-size:11px;
}

.jf-season strong{
    color:var(--ink,#18233d);
}

.jf-season span{
    color:var(--muted,#667085);
}


/* ============================================================
   JELLYFIN V9 KENPACHI THEME
   ============================================================ */

body.theme-jellyfin .app-main{
    max-width:1120px;
}

.jellyfin-main{
    padding-bottom:80px;
}


/* Hero */

.jf-hero{
    position:relative;
    min-height:205px;
    margin:32px 0 18px;
    overflow:hidden;

    border-radius:28px;

    background:
        linear-gradient(
            110deg,
            rgba(7,10,18,.92),
            rgba(19,13,18,.72) 45%,
            rgba(101,24,29,.46)
        );

    border:1px solid rgba(255,255,255,.16);

    box-shadow:
        0 25px 70px rgba(10,8,12,.22),
        inset 0 1px 0 rgba(255,255,255,.10);
}


.jf-hero::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(7,10,18,.92) 0%,
            rgba(7,10,18,.55) 48%,
            rgba(116,26,32,.16) 100%
        ),
        url("/static/assets/v9/backgrounds/jellyfin-kenpachi.png")
        center 42% / cover no-repeat;

    opacity:.92;
}


.jf-hero-overlay{
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(204,44,51,.22),
            transparent 42%
        );
}


.jf-hero-content{
    position:relative;
    z-index:2;

    padding:48px 34px;
    color:#fff;
}


.jf-hero-content h2{
    margin:8px 0 8px;
    color:#fff;
    font-size:34px;
    letter-spacing:-.03em;
}


.jf-hero-content p{
    margin:0 0 15px;
    color:rgba(255,255,255,.72);
}


.jf-label{
    display:block;

    color:rgba(255,255,255,.62);

    font-size:10px;
    font-weight:800;

    letter-spacing:.20em;
    text-transform:uppercase;
}


/* Connection */

.jf-connection{
    display:inline-flex;
    align-items:center;

    min-height:26px;

    padding:5px 10px;

    border-radius:999px;

    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.10);

    font-size:11px;
    color:rgba(255,255,255,.68);
}


.jf-connection.connected{
    color:#6ee7a1;
}


.jf-connection.disconnected{
    color:#ff8d8d;
}


/* Panels */

.jf-panel{
    margin-top:18px;

    padding:28px;

    border-radius:26px;

    background:
        linear-gradient(
            135deg,
            rgba(22,24,34,.82),
            rgba(45,31,38,.72)
        );

    border:1px solid rgba(255,255,255,.14);

    box-shadow:
        0 22px 60px rgba(8,7,12,.18),
        inset 0 1px 0 rgba(255,255,255,.08);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}


.jf-panel-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;

    margin-bottom:20px;
}


.jf-panel-head h2{
    margin:6px 0 0;
    color:#fff;
    font-size:25px;
}


.jf-panel-head .jf-label{
    color:rgba(255,255,255,.52);
}


.jf-refresh{
    border:1px solid rgba(255,255,255,.15);
    border-radius:12px;

    padding:10px 17px;

    background:rgba(255,255,255,.08);
    color:#fff;

    cursor:pointer;
    transition:.2s ease;
}


.jf-refresh:hover{
    background:rgba(255,255,255,.15);
    transform:translateY(-1px);
}


.jf-refresh:disabled{
    opacity:.55;
    cursor:wait;
}


/* Tabs */

.jf-tabs{
    display:flex;
    gap:8px;
    margin-bottom:18px;
}


.jf-tab{
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;

    padding:9px 18px;

    background:rgba(255,255,255,.07);
    color:rgba(255,255,255,.72);

    cursor:pointer;
    transition:.2s ease;
}


.jf-tab:hover{
    background:rgba(255,255,255,.13);
}


.jf-tab.active{
    background:#fff;
    color:#171b29;
    font-weight:800;
    box-shadow:0 6px 20px rgba(0,0,0,.18);
}


/* Library */

.jf-library-section[hidden]{
    display:none !important;
}


.jf-series-grid{
    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(220px,1fr));

    gap:18px;
}


.jf-empty{
    min-height:100px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px dashed rgba(255,255,255,.14);
    border-radius:18px;

    color:rgba(255,255,255,.48);

    font-size:13px;
}


.jf-media-card{
    min-width:0;

    padding:18px;

    border:1px solid rgba(255,255,255,.13);
    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.095),
            rgba(255,255,255,.045)
        );

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease;
}


.jf-media-card:hover{
    transform:translateY(-3px);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.15),
            rgba(255,255,255,.07)
        );

    border-color:rgba(255,255,255,.23);
}


.jf-media-icon{
    width:38px;
    height:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:13px;

    border-radius:12px;

    background:rgba(192,42,51,.16);
    color:#e44b55;

    font-size:13px;
}


.jf-media-info h3{
    margin:0 0 5px;

    color:#fff;

    font-size:17px;
    line-height:1.2;
    overflow-wrap:anywhere;
}


.jf-media-info p{
    margin:0 0 4px;

    color:rgba(255,255,255,.55);
    font-size:12px;
}


.jf-media-info>span{
    color:rgba(255,255,255,.42);
    font-size:11px;
}


.jf-season-list{
    display:flex;
    flex-direction:column;
    gap:7px;

    margin-top:14px;
}


.jf-season{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    padding:8px 10px;

    border-radius:10px;

    background:rgba(255,255,255,.065);
}


.jf-season strong{
    color:rgba(255,255,255,.82);
    font-size:11px;
}


.jf-season span{
    color:rgba(255,255,255,.42);
    font-size:10px;
}


/* Upload */

.jf-upload-panel{
    padding-bottom:30px;
}


.jf-upload-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:18px;
}


.jf-upload-card{
    min-width:0;

    padding:22px;

    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.035)
        );

    border:1px solid rgba(255,255,255,.12);
}


.jf-upload-card-head{
    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:20px;
}


.jf-upload-card-head .jf-label{
    color:rgba(255,255,255,.42);
}


.jf-upload-card-head h3{
    margin:3px 0 0;

    color:#fff;
    font-size:18px;
}


.jf-upload-icon{
    width:38px;
    height:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:11px;

    background:
        linear-gradient(
            145deg,
            rgba(194,42,51,.85),
            rgba(111,24,31,.85)
        );

    color:#fff;

    font-size:11px;
    font-weight:800;
}


.jf-fields{
    display:grid;

    grid-template-columns:
        minmax(0,1fr) 90px 90px;

    gap:10px;

    margin-bottom:12px;
}


.jf-field-wide{
    grid-column:auto;
}


.jf-movie-title-field{
    grid-column:1 / -1;
}


.jf-field label{
    display:block;

    margin-bottom:6px;

    color:rgba(255,255,255,.50);

    font-size:10px;
}


.jf-field input{
    width:100%;
    height:42px;

    box-sizing:border-box;

    padding:0 12px;

    border:1px solid rgba(255,255,255,.12);
    border-radius:11px;

    outline:none;

    background:rgba(255,255,255,.07);
    color:#fff;
}


.jf-field input::placeholder{
    color:rgba(255,255,255,.28);
}


.jf-field input:focus{
    border-color:rgba(226,67,77,.65);

    box-shadow:
        0 0 0 3px rgba(208,45,55,.10);
}


.jf-file-row{
    display:flex;
    align-items:center;
    gap:10px;
}


.jf-file-row input[type="file"]{
    min-width:0;
    flex:1;

    height:42px;

    box-sizing:border-box;

    padding:8px;

    border:1px solid rgba(255,255,255,.12);
    border-radius:11px;

    background:rgba(255,255,255,.06);
    color:rgba(255,255,255,.65);

    font-size:11px;
}


.jf-upload-button{
    flex:none;

    min-height:42px;

    padding:0 17px;

    border:0;
    border-radius:11px;

    background:
        linear-gradient(
            135deg,
            #d13a43,
            #a91f29
        );

    color:#fff;

    font-weight:700;

    cursor:pointer;

    box-shadow:
        0 8px 22px rgba(155,25,34,.25);

    transition:.2s ease;
}


.jf-upload-button:hover{
    transform:translateY(-1px);

    box-shadow:
        0 11px 26px rgba(155,25,34,.34);
}


.jf-upload-button:disabled{
    opacity:.5;
    cursor:wait;
    transform:none;
}


.jf-upload-status{
    min-height:20px;

    margin-top:16px;

    color:#74e3a3;

    font-size:12px;
}


.jf-upload-status.error{
    color:#ff8c8c;
}


/* Responsive */

@media (max-width:900px){

    .jf-upload-grid{
        grid-template-columns:1fr;
    }

}


@media (max-width:680px){

    .jf-fields{
        grid-template-columns:1fr 1fr;
    }

    .jf-field-wide,
    .jf-movie-title-field{
        grid-column:1 / -1;
    }

    .jf-file-row{
        flex-direction:column;
        align-items:stretch;
    }

    .jf-upload-button{
        width:100%;
    }

}



/* ============================================================
   JELLYFIN FINAL UI — TRANSPARENT HERO + THEMED FILE PICKER
   ============================================================ */

/* Top Jellyfin banner: NO separate artwork/background */
body.theme-jellyfin .jf-hero{
    min-height:170px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:
        0 18px 50px rgba(8,7,12,.10),
        inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

/* Completely remove the banner's Kenpachi image */
body.theme-jellyfin .jf-hero::before{
    display:none !important;
    background:none !important;
    opacity:0 !important;
}

/* Keep only a very subtle glass glow */
body.theme-jellyfin .jf-hero-overlay{
    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.015) 55%,
            rgba(180,35,45,.035)
        );
}

/* Cleaner transparent hero text */
body.theme-jellyfin .jf-hero-content{
    padding:38px 30px;
}

body.theme-jellyfin .jf-hero-content h2{
    color:#fff;
}

body.theme-jellyfin .jf-hero-content p{
    color:rgba(255,255,255,.58);
}

/* Never show the loading placeholder */
body.theme-jellyfin .jf-empty{
    display:none !important;
}

/* Only allow an explicitly-visible empty/error state */
body.theme-jellyfin .jf-empty.jf-show-empty{
    display:flex !important;
}

/* The native file picker itself */
body.theme-jellyfin .jf-file-row input[type="file"]{
    appearance:none;
    -webkit-appearance:none;

    padding:6px 8px;

    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.13);

    color:rgba(255,255,255,.62);

    border-radius:11px;

    font-size:11px;
}

/* Chrome / Chromium / Firefox file button */
body.theme-jellyfin .jf-file-row input[type="file"]::file-selector-button{
    margin-right:10px;

    padding:7px 13px;

    border:1px solid rgba(255,255,255,.16);
    border-radius:8px;

    background:
        linear-gradient(
            135deg,
            rgba(194,42,51,.95),
            rgba(135,25,33,.95)
        );

    color:#fff;

    font-size:11px;
    font-weight:700;

    cursor:pointer;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

body.theme-jellyfin .jf-file-row input[type="file"]::file-selector-button:hover{
    background:
        linear-gradient(
            135deg,
            #dc4650,
            #a91f29
        );

    transform:translateY(-1px);

    box-shadow:
        0 5px 14px rgba(155,25,34,.28);
}

/* Firefox */
body.theme-jellyfin .jf-file-row input[type="file"]::-webkit-file-upload-button{
    margin-right:10px;

    padding:7px 13px;

    border:1px solid rgba(255,255,255,.16);
    border-radius:8px;

    background:
        linear-gradient(
            135deg,
            rgba(194,42,51,.95),
            rgba(135,25,33,.95)
        );

    color:#fff;

    font-size:11px;
    font-weight:700;

    cursor:pointer;
}

/* Make upload cards slightly more transparent */
body.theme-jellyfin .jf-upload-card{
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.025)
        );
}

/* ============================================================
   END JELLYFIN FINAL UI
   ============================================================ */

/* ============================================================
   JELLYFIN — REMOVE TOP HERO CARD
   Keep the page background visible exactly like the other V9 pages.
   ============================================================ */

body.theme-jellyfin .jf-hero{
    min-height:0 !important;
    margin:26px 0 22px !important;
    padding:0 !important;

    background:transparent !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    overflow:visible !important;
}

body.theme-jellyfin .jf-hero::before,
body.theme-jellyfin .jf-hero::after{
    display:none !important;
    content:none !important;
    background:none !important;
}

body.theme-jellyfin .jf-hero-overlay{
    display:none !important;
}

body.theme-jellyfin .jf-hero-content{
    position:relative !important;

    padding:0 !important;

    color:var(--ink) !important;
}

body.theme-jellyfin .jf-hero-content h2{
    margin:0 0 8px !important;

    color:var(--ink) !important;

    font-size:0 !important;
}

/* Remove duplicate "Jellyfin" title inside the old hero */
body.theme-jellyfin .jf-hero-content h2::after{
    content:"";
}

body.theme-jellyfin .jf-hero-content p{
    margin:0 0 10px !important;

    color:var(--muted) !important;
}

/* Connection stays visible but becomes a subtle status line */
body.theme-jellyfin .jf-connection{
    display:inline-flex !important;

    min-height:0 !important;

    padding:3px 0 !important;

    border:0 !important;
    border-radius:0 !important;

    background:transparent !important;

    font-size:11px !important;
}

/* Use the page heading as the single Jellyfin title */
body.theme-jellyfin .page-title{
    margin-bottom:8px !important;
}

body.theme-jellyfin .page-subtitle{
    margin-bottom:0 !important;
}

/* ============================================================
   END
   ============================================================ */


/* ============================================================
   JELLYFIN — RESPONSIVE V9
   Desktop / iPad / Android / iPhone
   ============================================================ */

body.theme-jellyfin{
    overflow-x:hidden !important;
}

/* Large tablets / small laptops */
@media (max-width:1100px){

    body.theme-jellyfin .app-main{
        max-width:calc(100% - 40px);
    }

    body.theme-jellyfin .jf-panel{
        padding:24px;
    }

    body.theme-jellyfin .jf-series-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    body.theme-jellyfin .jf-upload-grid{
        grid-template-columns:1fr;
    }
}


/* iPad / tablets */
@media (max-width:768px){

    body.theme-jellyfin .app-main{
        width:auto;
        max-width:none;
        margin-left:0;
        margin-right:0;

        padding-left:20px;
        padding-right:20px;
    }

    body.theme-jellyfin .app-main-brand{
        font-size:12px;
    }

    body.theme-jellyfin .page-title{
        font-size:clamp(34px,8vw,48px) !important;
        line-height:1.05;
    }

    body.theme-jellyfin .page-subtitle{
        max-width:90%;
        font-size:13px;
        line-height:1.5;
    }

    body.theme-jellyfin .jf-panel{
        padding:20px;
        border-radius:22px;
    }

    body.theme-jellyfin .jf-panel-head{
        align-items:center;
    }

    body.theme-jellyfin .jf-panel-head h2{
        font-size:22px;
    }

    body.theme-jellyfin .jf-series-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
        gap:12px;
    }

    body.theme-jellyfin .jf-media-card{
        padding:15px;
    }

    body.theme-jellyfin .jf-media-info h3{
        font-size:15px;
    }

    body.theme-jellyfin .jf-upload-grid{
        grid-template-columns:1fr;
    }

    body.theme-jellyfin .jf-upload-card{
        padding:18px;
    }

    body.theme-jellyfin .jf-fields{
        grid-template-columns:
            minmax(0,1fr) 90px 90px;
    }

    body.theme-jellyfin .jf-file-row{
        flex-wrap:wrap;
    }

    body.theme-jellyfin .jf-file-row input[type="file"]{
        min-width:0;
        width:100%;
    }

    body.theme-jellyfin .jf-upload-button{
        width:100%;
    }

    body.theme-jellyfin .app-art{
        object-position:center top;
    }
}


/* iPhone / narrow Android */
@media (max-width:560px){

    body.theme-jellyfin .app-main{
        width:auto;
        max-width:none;

        padding-left:14px;
        padding-right:14px;
    }

    body.theme-jellyfin .page-title{
        font-size:36px !important;
    }

    body.theme-jellyfin .page-subtitle{
        max-width:100%;
        font-size:12px;
    }

    body.theme-jellyfin .jf-hero{
        margin-top:18px !important;
        margin-bottom:18px !important;
    }

    body.theme-jellyfin .jf-hero-content{
        padding:0 !important;
    }

    body.theme-jellyfin .jf-connection{
        font-size:10px !important;
    }

    body.theme-jellyfin .jf-panel{
        margin-top:14px;
        padding:16px;
        border-radius:18px;
    }

    body.theme-jellyfin .jf-panel-head{
        align-items:flex-start;
        gap:12px;
    }

    body.theme-jellyfin .jf-panel-head h2{
        font-size:20px;
    }

    body.theme-jellyfin .jf-refresh{
        padding:8px 12px;
        font-size:11px;
        flex-shrink:0;
    }

    body.theme-jellyfin .jf-tabs{
        width:100%;
    }

    body.theme-jellyfin .jf-tab{
        flex:1;
        padding:9px 12px;
        text-align:center;
    }

    body.theme-jellyfin .jf-series-grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    body.theme-jellyfin .jf-media-card{
        padding:14px;
    }

    body.theme-jellyfin .jf-media-info h3{
        font-size:15px;
    }

    body.theme-jellyfin .jf-season{
        padding:8px;
    }

    body.theme-jellyfin .jf-upload-card{
        padding:15px;
        border-radius:16px;
    }

    body.theme-jellyfin .jf-upload-card-head{
        margin-bottom:15px;
    }

    body.theme-jellyfin .jf-upload-card-head h3{
        font-size:16px;
    }

    body.theme-jellyfin .jf-fields{
        grid-template-columns:1fr 1fr;
        gap:9px;
    }

    body.theme-jellyfin .jf-field-wide,
    body.theme-jellyfin .jf-movie-title-field{
        grid-column:1 / -1;
    }

    body.theme-jellyfin .jf-field input{
        height:40px;
    }

    body.theme-jellyfin .jf-file-row{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:8px;
    }

    body.theme-jellyfin .jf-file-row input[type="file"]{
        width:100%;
        height:42px;
    }

    body.theme-jellyfin .jf-upload-button{
        width:100%;
        min-height:42px;
    }
}


/* Very narrow phones — iPhone SE and similar */
@media (max-width:390px){

    body.theme-jellyfin .app-main{
        padding-left:10px;
        padding-right:10px;
    }

    body.theme-jellyfin .page-title{
        font-size:32px !important;
    }

    body.theme-jellyfin .jf-panel{
        padding:13px;
    }

    body.theme-jellyfin .jf-panel-head h2{
        font-size:18px;
    }

    body.theme-jellyfin .jf-refresh{
        padding:7px 10px;
    }

    body.theme-jellyfin .jf-upload-card{
        padding:13px;
    }

    body.theme-jellyfin .jf-fields{
        grid-template-columns:1fr;
    }

    body.theme-jellyfin .jf-field-wide,
    body.theme-jellyfin .jf-movie-title-field{
        grid-column:1;
    }

    body.theme-jellyfin .jf-upload-icon{
        width:34px;
        height:34px;
        flex-shrink:0;
    }
}


/* Landscape phones */
@media (max-width:768px) and (orientation:landscape){

    body.theme-jellyfin .jf-series-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    body.theme-jellyfin .jf-upload-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    body.theme-jellyfin .jf-fields{
        grid-template-columns:
            minmax(0,1fr) 80px 80px;
    }
}


/* Prevent native file controls from creating overflow */
body.theme-jellyfin input,
body.theme-jellyfin button,
body.theme-jellyfin select{
    max-width:100%;
    box-sizing:border-box;
}


/* ============================================================
   END RESPONSIVE JELLYFIN
   ============================================================ */

/* ============================================================
   JELLYFIN — FINAL LIBRARY CARD POLISH
   ============================================================ */

body.theme-jellyfin .jf-library-panel{
    overflow:hidden;
}

body.theme-jellyfin .jf-series-grid{
    align-items:stretch;
}

body.theme-jellyfin .jf-media-card{
    display:flex;
    flex-direction:column;

    min-height:0;
    height:100%;
    box-sizing:border-box;

    position:relative;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.028)
        );

    border:1px solid rgba(255,255,255,.105);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045);
}

body.theme-jellyfin .jf-media-icon{
    flex:none;

    width:38px;
    height:38px;

    margin-bottom:14px;

    background:
        linear-gradient(
            145deg,
            rgba(205,48,59,.25),
            rgba(116,27,34,.18)
        );

    border:1px solid rgba(218,60,69,.16);

    color:#ed5962;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

body.theme-jellyfin .jf-media-card:hover .jf-media-icon{
    transform:scale(1.06);

    background:
        linear-gradient(
            145deg,
            rgba(210,48,59,.42),
            rgba(126,27,35,.30)
        );

    box-shadow:
        0 7px 20px rgba(156,29,38,.18);
}

body.theme-jellyfin .jf-media-info{
    min-width:0;
}

body.theme-jellyfin .jf-media-info h3{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    letter-spacing:-.01em;
}

body.theme-jellyfin .jf-media-info p{
    margin-top:4px;
}

body.theme-jellyfin .jf-season-list{
    margin-top:auto;
    padding-top:16px;
}

body.theme-jellyfin .jf-season{
    min-height:31px;
    box-sizing:border-box;

    border:1px solid rgba(255,255,255,.065);

    background:
        rgba(255,255,255,.055);

    transition:
        background .18s ease,
        border-color .18s ease;
}

body.theme-jellyfin .jf-season:hover{
    background:
        rgba(255,255,255,.085);

    border-color:
        rgba(255,255,255,.11);
}

body.theme-jellyfin .jf-season strong{
    white-space:nowrap;
}

body.theme-jellyfin .jf-season span{
    white-space:nowrap;
}


/* Empty state only when genuinely needed */
body.theme-jellyfin .jf-empty.jf-show-empty{
    min-height:90px;

    margin-top:2px;

    color:rgba(255,255,255,.48);

    background:
        rgba(255,255,255,.025);
}


/* Better touch targets */
@media (pointer:coarse){

    body.theme-jellyfin .jf-tab{
        min-height:44px;
    }

    body.theme-jellyfin .jf-refresh{
        min-height:42px;
    }

    body.theme-jellyfin .jf-media-card{
        cursor:pointer;
    }

    body.theme-jellyfin .jf-media-card:active{
        transform:scale(.985);
    }

    body.theme-jellyfin .jf-upload-button{
        min-height:44px;
    }

}


/* Phone cards */
@media (max-width:560px){

    body.theme-jellyfin .jf-media-card{
        min-height:145px;
    }

    body.theme-jellyfin .jf-media-icon{
        width:36px;
        height:36px;
    }

    body.theme-jellyfin .jf-season-list{
        padding-top:12px;
    }

}


/* ============================================================
   END LIBRARY POLISH
   ============================================================ */

/* ============================================================
   JELLYFIN MOBILE FINAL FIX
   ============================================================ */

@media (max-width:768px){

    /* ---------- SIDEBAR ---------- */

    body.theme-jellyfin .app-sidebar,
    body.theme-jellyfin .app-sidebar.expanded{
        width:68px !important;
        min-width:68px !important;
        max-width:68px !important;

        left:14px !important;
        top:70px !important;
        bottom:auto !important;

        height:138px !important;

        padding:10px !important;

        border-radius:22px !important;

        overflow:hidden !important;
    }

    body.theme-jellyfin .sidebar-brand{
        display:none !important;
    }

    body.theme-jellyfin .sidebar-nav{
        width:100% !important;

        display:flex !important;
        flex-direction:column !important;

        align-items:center !important;
        justify-content:center !important;

        gap:4px !important;
    }

    body.theme-jellyfin .sidebar-link{
        width:44px !important;
        height:38px !important;

        min-width:44px !important;

        padding:0 !important;
        margin:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        border-radius:12px !important;
    }

    body.theme-jellyfin .sidebar-link span{
        display:none !important;
    }

    body.theme-jellyfin .sidebar-link .icon{
        width:17px !important;
        height:17px !important;
    }

    body.theme-jellyfin .sidebar-toggle{
        position:relative !important;

        width:36px !important;
        height:32px !important;

        margin:0 auto 5px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }


    /* ---------- ACCOUNT PILL ---------- */

    body.theme-jellyfin .account-menu,
    body.theme-jellyfin .account-pill{
        position:fixed !important;

        top:72px !important;
        right:14px !important;
        left:auto !important;

        width:auto !important;
        max-width:max-content !important;

        margin:0 !important;
    }

    body.theme-jellyfin .account-trigger{
        width:auto !important;
        min-width:0 !important;

        height:38px !important;

        padding:0 12px !important;

        border-radius:999px !important;

        white-space:nowrap !important;
    }

    body.theme-jellyfin .account-panel{
        right:0 !important;
        left:auto !important;

        width:158px !important;
    }


    /* ---------- MAIN CONTENT ---------- */

    body.theme-jellyfin .app-main{
        width:auto !important;
        max-width:none !important;

        margin:0 !important;

        padding-top:30px !important;
        padding-left:14px !important;
        padding-right:14px !important;
    }

    body.theme-jellyfin .app-main-brand{
        margin-top:0 !important;
    }


    /* ---------- PAGE TITLE ---------- */

    body.theme-jellyfin .page-title{
        margin-top:28px !important;
        margin-bottom:8px !important;

        font-size:36px !important;
        line-height:1 !important;
    }

    body.theme-jellyfin .page-subtitle{
        margin-bottom:8px !important;

        max-width:100% !important;
    }


    /* ---------- REMOVE OLD HERO SPACE ---------- */

    body.theme-jellyfin .jf-hero{
        display:block !important;

        height:28px !important;
        min-height:28px !important;

        margin:0 0 12px !important;
        padding:0 !important;

        background:transparent !important;
        border:0 !important;
        box-shadow:none !important;
    }

    body.theme-jellyfin .jf-hero-content{
        padding:0 !important;
        margin:0 !important;

        height:28px !important;

        display:flex !important;
        align-items:center !important;
    }

    body.theme-jellyfin .jf-hero-content .jf-label,
    body.theme-jellyfin .jf-hero-content p{
        display:none !important;
    }

    body.theme-jellyfin .jf-hero-content h2{
        display:none !important;
    }

    body.theme-jellyfin .jf-connection{
        margin:0 !important;
        padding:0 !important;

        font-size:10px !important;
        line-height:1 !important;
    }


    /* ---------- LIBRARY ---------- */

    body.theme-jellyfin .jf-library-panel{
        margin-top:8px !important;
    }

}


/* Narrow phones */
@media (max-width:560px){

    body.theme-jellyfin .app-main{
        padding-top:24px !important;
        padding-left:12px !important;
        padding-right:12px !important;
    }

    body.theme-jellyfin .page-title{
        margin-top:20px !important;
        font-size:34px !important;
    }

    body.theme-jellyfin .page-subtitle{
        font-size:12px !important;
        line-height:1.45 !important;
    }

    body.theme-jellyfin .jf-hero{
        height:24px !important;
        min-height:24px !important;
        margin-bottom:8px !important;
    }

    body.theme-jellyfin .jf-hero-content{
        height:24px !important;
    }

    body.theme-jellyfin .jf-connection{
        font-size:9px !important;
    }

    body.theme-jellyfin .jf-panel{
        border-radius:18px !important;
    }

}


/* Very small phones */
@media (max-width:390px){

    body.theme-jellyfin .app-sidebar,
    body.theme-jellyfin .app-sidebar.expanded{
        left:10px !important;
        width:60px !important;
        min-width:60px !important;
        max-width:60px !important;
    }

    body.theme-jellyfin .sidebar-link{
        width:40px !important;
        min-width:40px !important;
    }

    body.theme-jellyfin .account-menu,
    body.theme-jellyfin .account-pill{
        right:10px !important;
    }

    body.theme-jellyfin .page-title{
        font-size:31px !important;
    }

}


/* ============================================================
   END MOBILE FIX
   ============================================================ */

/* ============================================================
   JELLYFIN MOBILE — FINAL SIDEBAR / HEADER FIX
   ============================================================ */

@media (max-width:768px){

    /* ---------- COMPACT HORIZONTAL SIDEBAR ---------- */

    body.theme-jellyfin .app-sidebar,
    body.theme-jellyfin .app-sidebar.expanded{
        position:fixed !important;

        left:14px !important;
        top:76px !important;
        bottom:auto !important;

        width:auto !important;
        min-width:0 !important;
        max-width:calc(100vw - 120px) !important;

        height:52px !important;
        min-height:52px !important;

        padding:6px 8px !important;

        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;

        border-radius:18px !important;

        overflow:hidden !important;

        background:
            rgba(255,255,255,.70) !important;

        border:1px solid rgba(255,255,255,.60) !important;

        box-shadow:
            0 10px 30px rgba(30,25,35,.12),
            inset 0 1px 0 rgba(255,255,255,.75) !important;

        backdrop-filter:blur(18px) !important;
        -webkit-backdrop-filter:blur(18px) !important;

        z-index:1000 !important;
    }


    /* Hide brand on mobile */
    body.theme-jellyfin .sidebar-brand{
        display:none !important;
    }


    /* Toggle becomes first compact button */
    body.theme-jellyfin .sidebar-toggle{
        position:relative !important;

        flex:none !important;

        width:38px !important;
        height:38px !important;

        margin:0 4px 0 0 !important;

        padding:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        border-radius:12px !important;
    }


    /* Horizontal navigation */
    body.theme-jellyfin .sidebar-nav{
        width:auto !important;
        height:100% !important;

        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:flex-start !important;

        gap:2px !important;

        margin:0 !important;
        padding:0 !important;
    }


    body.theme-jellyfin .sidebar-link{
        flex:none !important;

        width:38px !important;
        min-width:38px !important;

        height:38px !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        border-radius:11px !important;
    }


    body.theme-jellyfin .sidebar-link span{
        display:none !important;
    }


    body.theme-jellyfin .sidebar-link .icon{
        width:16px !important;
        height:16px !important;
    }


    /* ---------- ACCOUNT ---------- */

    body.theme-jellyfin .account-menu,
    body.theme-jellyfin .account-pill{
        position:fixed !important;

        left:auto !important;
        right:14px !important;
        top:76px !important;

        width:auto !important;
        max-width:none !important;

        margin:0 !important;

        z-index:1001 !important;
    }


    body.theme-jellyfin .account-trigger{
        height:52px !important;

        min-width:78px !important;

        padding:0 14px !important;

        border-radius:18px !important;

        white-space:nowrap !important;
    }


    /* ---------- MAIN CONTENT ---------- */

    body.theme-jellyfin .app-main{
        width:auto !important;
        max-width:none !important;

        margin:0 !important;

        padding-top:150px !important;
        padding-left:14px !important;
        padding-right:14px !important;
    }


    body.theme-jellyfin .app-main-brand{
        margin-top:0 !important;
        margin-bottom:20px !important;
    }


    body.theme-jellyfin .page-title{
        margin-top:0 !important;
        margin-bottom:8px !important;

        font-size:36px !important;
        line-height:1 !important;
    }


    body.theme-jellyfin .page-subtitle{
        margin-bottom:14px !important;

        max-width:100% !important;
    }


    /* ---------- CONNECTION LINE ---------- */

    body.theme-jellyfin .jf-hero{
        height:24px !important;
        min-height:24px !important;

        margin:0 0 12px !important;

        padding:0 !important;
    }


    body.theme-jellyfin .jf-hero-content{
        height:24px !important;

        padding:0 !important;
    }


    /* ---------- LIBRARY ---------- */

    body.theme-jellyfin .jf-library-panel{
        margin-top:0 !important;
    }

}


/* ============================================================
   SMALL PHONES
   ============================================================ */

@media (max-width:560px){

    body.theme-jellyfin .app-sidebar,
    body.theme-jellyfin .app-sidebar.expanded{
        left:10px !important;
        top:68px !important;

        max-width:calc(100vw - 108px) !important;

        height:48px !important;
        min-height:48px !important;

        padding:5px 6px !important;

        border-radius:16px !important;
    }


    body.theme-jellyfin .sidebar-toggle{
        width:34px !important;
        height:34px !important;
    }


    body.theme-jellyfin .sidebar-link{
        width:34px !important;
        min-width:34px !important;
        height:34px !important;
    }


    body.theme-jellyfin .sidebar-link .icon{
        width:15px !important;
        height:15px !important;
    }


    body.theme-jellyfin .account-menu,
    body.theme-jellyfin .account-pill{
        top:68px !important;
        right:10px !important;
    }


    body.theme-jellyfin .account-trigger{
        height:48px !important;
        min-width:70px !important;

        padding:0 11px !important;

        border-radius:16px !important;
    }


    body.theme-jellyfin .app-main{
        padding-top:132px !important;
        padding-left:12px !important;
        padding-right:12px !important;
    }


    body.theme-jellyfin .app-main-brand{
        margin-bottom:16px !important;
    }


    body.theme-jellyfin .page-title{
        font-size:34px !important;
    }

}


/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media (max-width:390px){

    body.theme-jellyfin .app-sidebar,
    body.theme-jellyfin .app-sidebar.expanded{
        left:8px !important;

        max-width:calc(100vw - 96px) !important;
    }


    body.theme-jellyfin .account-menu,
    body.theme-jellyfin .account-pill{
        right:8px !important;
    }


    body.theme-jellyfin .sidebar-toggle{
        display:none !important;
    }


    body.theme-jellyfin .app-main{
        padding-top:125px !important;
    }

}


/* ============================================================
   END MOBILE HEADER FIX
   ============================================================ */

/* ============================================================
   JELLYFIN — MOBILE OVERLAP / DOUBLE SIDEBAR FIX
   ============================================================ */

@media (max-width:768px){

    /* One and only one sidebar layer */
    body.theme-jellyfin .app-sidebar{
        position:fixed !important;
        display:flex !important;

        top:70px !important;
        left:12px !important;
        right:auto !important;
        bottom:auto !important;

        width:calc(100vw - 112px) !important;
        max-width:calc(100vw - 112px) !important;
        min-width:0 !important;

        height:50px !important;
        min-height:50px !important;
        max-height:50px !important;

        box-sizing:border-box !important;

        padding:5px !important;
        margin:0 !important;

        flex-direction:row !important;
        align-items:center !important;

        overflow:hidden !important;

        transform:none !important;
        translate:none !important;

        border-radius:17px !important;

        background:rgba(255,255,255,.78) !important;
        border:1px solid rgba(255,255,255,.72) !important;

        box-shadow:
            0 8px 25px rgba(20,20,30,.14),
            inset 0 1px 0 rgba(255,255,255,.85) !important;

        backdrop-filter:blur(18px) !important;
        -webkit-backdrop-filter:blur(18px) !important;

        z-index:9999 !important;
    }

    /* Do not allow expanded state to change geometry */
    body.theme-jellyfin .app-sidebar.expanded{
        width:calc(100vw - 112px) !important;
        max-width:calc(100vw - 112px) !important;
        height:50px !important;
        min-height:50px !important;
        max-height:50px !important;

        top:70px !important;
        left:12px !important;
        bottom:auto !important;

        transform:none !important;
    }

    /* Sidebar brand completely hidden */
    body.theme-jellyfin .app-sidebar .sidebar-brand{
        display:none !important;
    }

    /* Toggle */
    body.theme-jellyfin .app-sidebar .sidebar-toggle{
        flex:0 0 38px !important;

        width:38px !important;
        min-width:38px !important;
        max-width:38px !important;

        height:38px !important;
        min-height:38px !important;
        max-height:38px !important;

        margin:0 3px 0 0 !important;
        padding:0 !important;

        position:relative !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        border-radius:12px !important;
    }

    /* Navigation */
    body.theme-jellyfin .app-sidebar .sidebar-nav{
        flex:1 1 auto !important;

        width:auto !important;
        height:100% !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:space-around !important;

        gap:2px !important;

        overflow:hidden !important;
    }

    /* Icons only */
    body.theme-jellyfin .app-sidebar .sidebar-link{
        flex:0 0 36px !important;

        width:36px !important;
        min-width:36px !important;
        max-width:36px !important;

        height:38px !important;
        min-height:38px !important;
        max-height:38px !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        border-radius:11px !important;
    }

    body.theme-jellyfin .app-sidebar .sidebar-link span{
        display:none !important;
    }

    body.theme-jellyfin .app-sidebar .sidebar-link .icon{
        width:16px !important;
        height:16px !important;
    }

    /* Account stays separate */
    body.theme-jellyfin .account-menu,
    body.theme-jellyfin .account-pill{
        position:fixed !important;

        top:70px !important;
        right:12px !important;
        left:auto !important;
        bottom:auto !important;

        width:auto !important;
        max-width:88px !important;

        margin:0 !important;

        z-index:10000 !important;
    }

    body.theme-jellyfin .account-trigger{
        width:auto !important;
        min-width:76px !important;
        max-width:88px !important;

        height:50px !important;
        min-height:50px !important;

        padding:0 12px !important;

        border-radius:17px !important;

        white-space:nowrap !important;
    }

    /* Content starts BELOW the navigation */
    body.theme-jellyfin .app-main{
        position:relative !important;

        width:auto !important;
        max-width:none !important;

        margin:0 !important;

        padding-top:145px !important;
        padding-left:12px !important;
        padding-right:12px !important;

        transform:none !important;
    }

    /* Prevent old sidebar/content transforms */
    body.theme-jellyfin .app-main,
    body.theme-jellyfin .app-main.sidebar-open{
        transform:none !important;
        margin-left:0 !important;
    }

}


/* PHONE */
@media (max-width:560px){

    body.theme-jellyfin .app-sidebar,
    body.theme-jellyfin .app-sidebar.expanded{
        top:64px !important;
        left:9px !important;

        width:calc(100vw - 101px) !important;
        max-width:calc(100vw - 101px) !important;

        height:46px !important;
        min-height:46px !important;
        max-height:46px !important;

        border-radius:15px !important;
    }

    body.theme-jellyfin .app-sidebar .sidebar-toggle{
        flex-basis:34px !important;
        width:34px !important;
        min-width:34px !important;
        height:34px !important;
    }

    body.theme-jellyfin .app-sidebar .sidebar-link{
        flex-basis:32px !important;
        width:32px !important;
        min-width:32px !important;
        height:34px !important;
    }

    body.theme-jellyfin .account-menu,
    body.theme-jellyfin .account-pill{
        top:64px !important;
        right:9px !important;
    }

    body.theme-jellyfin .account-trigger{
        height:46px !important;
        min-height:46px !important;
        min-width:70px !important;
        border-radius:15px !important;
    }

    body.theme-jellyfin .app-main{
        padding-top:125px !important;
    }

}


/* VERY SMALL PHONE */
@media (max-width:390px){

    body.theme-jellyfin .app-sidebar,
    body.theme-jellyfin .app-sidebar.expanded{
        width:calc(100vw - 92px) !important;
        max-width:calc(100vw - 92px) !important;
    }

    body.theme-jellyfin .app-sidebar .sidebar-link{
        flex-basis:29px !important;
        width:29px !important;
        min-width:29px !important;
    }

    body.theme-jellyfin .app-main{
        padding-top:118px !important;
    }

}


/* ============================================================
   END JELLYFIN MOBILE OVERLAP FIX
   ============================================================ */

/* ============================================================
   JELLYFIN MOBILE — RESTORE NON-OVERLAPPING NAVIGATION
   ============================================================ */

@media (max-width:768px){

    /* Navigation scrolls with the page instead of covering content */
    body.theme-jellyfin .app-sidebar,
    body.theme-jellyfin .app-sidebar.expanded{
        position:absolute !important;

        top:70px !important;
        left:12px !important;
        right:auto !important;
        bottom:auto !important;

        width:calc(100vw - 112px) !important;
        max-width:calc(100vw - 112px) !important;

        height:50px !important;
        min-height:50px !important;
        max-height:50px !important;

        transform:none !important;
        translate:none !important;

        z-index:50 !important;
    }

    /* Account also scrolls naturally */
    body.theme-jellyfin .account-menu,
    body.theme-jellyfin .account-pill{
        position:absolute !important;

        top:70px !important;
        right:12px !important;
        left:auto !important;
        bottom:auto !important;

        z-index:51 !important;
    }

    /* Content starts below the top navigation */
    body.theme-jellyfin .app-main{
        padding-top:145px !important;

        transform:none !important;
        margin-left:0 !important;
    }

}


/* Phone */
@media (max-width:560px){

    body.theme-jellyfin .app-sidebar,
    body.theme-jellyfin .app-sidebar.expanded{
        position:absolute !important;

        top:64px !important;
        left:9px !important;

        width:calc(100vw - 101px) !important;
        max-width:calc(100vw - 101px) !important;

        height:46px !important;
        min-height:46px !important;
        max-height:46px !important;
    }

    body.theme-jellyfin .account-menu,
    body.theme-jellyfin .account-pill{
        position:absolute !important;

        top:64px !important;
        right:9px !important;
    }

    body.theme-jellyfin .app-main{
        padding-top:125px !important;
    }

}


/* Small phone */
@media (max-width:390px){

    body.theme-jellyfin .app-sidebar,
    body.theme-jellyfin .app-sidebar.expanded{
        width:calc(100vw - 92px) !important;
        max-width:calc(100vw - 92px) !important;
    }

    body.theme-jellyfin .app-main{
        padding-top:118px !important;
    }

}


/* ============================================================
   END
   ============================================================ */

/* ============================================================
   JELLYFIN MOBILE — VISIBILITY / CONTENT CLEAR FIX
   ============================================================ */

@media (max-width:768px){

    /* Compact navigation */
    body.theme-jellyfin .app-sidebar,
    body.theme-jellyfin .app-sidebar.expanded{
        position:absolute !important;

        top:64px !important;
        left:12px !important;

        width:180px !important;
        max-width:180px !important;

        height:48px !important;
        min-height:48px !important;
        max-height:48px !important;

        padding:4px !important;
        margin:0 !important;

        box-sizing:border-box !important;

        display:flex !important;
        align-items:center !important;

        background:rgba(28,25,32,.78) !important;

        border:1px solid rgba(255,255,255,.22) !important;

        border-radius:15px !important;

        box-shadow:
            0 8px 24px rgba(0,0,0,.20),
            inset 0 1px 0 rgba(255,255,255,.12) !important;

        backdrop-filter:blur(16px) !important;
        -webkit-backdrop-filter:blur(16px) !important;

        overflow:hidden !important;

        transform:none !important;
        translate:none !important;

        z-index:100 !important;
    }

    /* Hide sidebar brand */
    body.theme-jellyfin .app-sidebar .sidebar-brand{
        display:none !important;
    }

    /* Hide toggle on phones */
    body.theme-jellyfin .app-sidebar .sidebar-toggle{
        display:none !important;
    }

    /* Navigation icons */
    body.theme-jellyfin .app-sidebar .sidebar-nav{
        width:100% !important;
        height:100% !important;

        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:space-evenly !important;

        gap:0 !important;
        padding:0 !important;
        margin:0 !important;
    }

    body.theme-jellyfin .app-sidebar .sidebar-link{
        width:32px !important;
        min-width:32px !important;
        height:38px !important;

        padding:0 !important;
        margin:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        border-radius:10px !important;
    }

    body.theme-jellyfin .app-sidebar .sidebar-link span{
        display:none !important;
    }

    body.theme-jellyfin .app-sidebar .sidebar-link .icon{
        width:16px !important;
        height:16px !important;

        color:rgba(255,255,255,.78) !important;

        opacity:1 !important;
    }

    body.theme-jellyfin .app-sidebar .sidebar-link.active{
        background:rgba(218,49,59,.25) !important;
    }

    body.theme-jellyfin .app-sidebar .sidebar-link.active .icon{
        color:#ff6570 !important;
    }


    /* Account */
    body.theme-jellyfin .account-menu,
    body.theme-jellyfin .account-pill{
        position:absolute !important;

        top:64px !important;
        right:12px !important;
        left:auto !important;

        width:auto !important;

        z-index:101 !important;
    }

    body.theme-jellyfin .account-trigger{
        height:48px !important;
        min-height:48px !important;

        min-width:72px !important;

        padding:0 12px !important;

        background:rgba(42,32,38,.72) !important;

        border:1px solid rgba(255,255,255,.25) !important;

        border-radius:15px !important;

        color:#fff !important;
    }


    /* Give the actual page enough room below the nav */
    body.theme-jellyfin .app-main{
        position:relative !important;

        width:auto !important;
        max-width:none !important;

        margin:0 !important;

        padding-top:132px !important;
        padding-left:12px !important;
        padding-right:12px !important;

        transform:none !important;
    }


    /* Keep page title visible */
    body.theme-jellyfin .app-main-brand{
        display:block !important;
        margin-bottom:16px !important;
    }

    body.theme-jellyfin .page-title{
        display:block !important;

        margin:0 0 8px !important;

        font-size:34px !important;
        line-height:1.05 !important;

        color:#101b38 !important;
    }

    body.theme-jellyfin .page-subtitle{
        display:block !important;

        margin:0 0 16px !important;

        color:#50627d !important;
    }

}


/* Smaller phones */
@media (max-width:560px){

    body.theme-jellyfin .app-sidebar,
    body.theme-jellyfin .app-sidebar.expanded{
        top:58px !important;
        left:9px !important;

        width:170px !important;
        max-width:170px !important;

        height:44px !important;
        min-height:44px !important;
        max-height:44px !important;
    }

    body.theme-jellyfin .account-menu,
    body.theme-jellyfin .account-pill{
        top:58px !important;
        right:9px !important;
    }

    body.theme-jellyfin .account-trigger{
        height:44px !important;
        min-height:44px !important;
    }

    body.theme-jellyfin .app-main{
        padding-top:112px !important;
    }

}


/* ============================================================
   END MOBILE VISIBILITY FIX
   ============================================================ */

/* ============================================================
   JELLYFIN MOBILE — ACCOUNT DROPDOWN FIX
   ============================================================ */

@media (max-width:768px){

    body.theme-jellyfin .account-menu,
    body.theme-jellyfin .account-pill{
        position:absolute !important;

        top:64px !important;
        right:12px !important;
        left:auto !important;

        width:auto !important;
        height:auto !important;

        overflow:visible !important;

        z-index:99999 !important;
    }

    body.theme-jellyfin .account-trigger{
        position:relative !important;
        z-index:100000 !important;

        cursor:pointer !important;
        pointer-events:auto !important;
    }

    body.theme-jellyfin .account-panel{
        position:absolute !important;

        top:calc(100% + 8px) !important;
        right:0 !important;
        left:auto !important;

        width:158px !important;
        min-width:158px !important;

        height:auto !important;
        max-height:none !important;

        padding:8px !important;

        display:block !important;

        background:
            rgba(28,25,32,.94) !important;

        border:1px solid rgba(255,255,255,.16) !important;
        border-radius:16px !important;

        box-shadow:
            0 14px 35px rgba(0,0,0,.30),
            inset 0 1px 0 rgba(255,255,255,.10) !important;

        backdrop-filter:blur(20px) !important;
        -webkit-backdrop-filter:blur(20px) !important;

        overflow:visible !important;

        z-index:100001 !important;
    }

    body.theme-jellyfin .account-panel[hidden]{
        display:none !important;
    }

    body.theme-jellyfin .account-panel a,
    body.theme-jellyfin .account-panel button{
        width:100% !important;
        min-height:40px !important;

        box-sizing:border-box !important;

        display:flex !important;
        align-items:center !important;

        padding:0 12px !important;

        border:0 !important;
        border-radius:10px !important;

        background:transparent !important;

        color:rgba(255,255,255,.88) !important;

        font:inherit !important;
        font-size:13px !important;

        text-decoration:none !important;

        cursor:pointer !important;
    }

    body.theme-jellyfin .account-panel a:hover,
    body.theme-jellyfin .account-panel button:hover{
        background:rgba(255,255,255,.10) !important;
    }

    body.theme-jellyfin .account-panel .account-divider{
        height:1px !important;

        margin:6px 4px !important;

        background:rgba(255,255,255,.12) !important;
    }

    body.theme-jellyfin .account-panel .menu-logout{
        color:#ff6972 !important;
    }

}

@media (max-width:560px){

    body.theme-jellyfin .account-menu,
    body.theme-jellyfin .account-pill{
        top:58px !important;
        right:9px !important;
    }

    body.theme-jellyfin .account-panel{
        top:calc(100% + 7px) !important;
        right:0 !important;
    }

}

/* ============================================================
   END ACCOUNT DROPDOWN FIX
   ============================================================ */

/* ============================================================
   JELLYFIN MOBILE — TOP BAR ALIGNMENT
   ============================================================ */

@media (max-width:768px){

    /* Left navigation */
    body.theme-jellyfin .app-sidebar,
    body.theme-jellyfin .app-sidebar.expanded{
        top:58px !important;
        left:12px !important;

        width:180px !important;
        max-width:180px !important;

        height:48px !important;
        min-height:48px !important;
        max-height:48px !important;

        margin:0 !important;
        padding:4px !important;

        box-sizing:border-box !important;

        border-radius:15px !important;

        overflow:hidden !important;
    }

    /* Right account pill */
    body.theme-jellyfin .account-menu,
    body.theme-jellyfin .account-pill{
        position:absolute !important;

        top:58px !important;
        right:12px !important;
        left:auto !important;

        width:82px !important;
        min-width:82px !important;
        max-width:82px !important;

        height:48px !important;

        margin:0 !important;
        padding:0 !important;

        box-sizing:border-box !important;

        overflow:visible !important;
    }

    body.theme-jellyfin .account-trigger{
        width:82px !important;
        min-width:82px !important;
        max-width:82px !important;

        height:48px !important;
        min-height:48px !important;

        margin:0 !important;
        padding:0 10px !important;

        box-sizing:border-box !important;

        justify-content:center !important;

        border-radius:15px !important;
    }

    /* Remove any extra invisible width */
    body.theme-jellyfin .account-menu::before,
    body.theme-jellyfin .account-menu::after,
    body.theme-jellyfin .account-pill::before,
    body.theme-jellyfin .account-pill::after{
        display:none !important;
        content:none !important;
    }

    /* Dropdown remains attached to the pill */
    body.theme-jellyfin .account-panel{
        right:0 !important;
        left:auto !important;
        top:calc(100% + 7px) !important;
    }

}


/* PHONE */
@media (max-width:560px){

    body.theme-jellyfin .app-sidebar,
    body.theme-jellyfin .app-sidebar.expanded{
        top:54px !important;
        left:9px !important;

        width:170px !important;
        max-width:170px !important;

        height:44px !important;
        min-height:44px !important;
        max-height:44px !important;
    }

    body.theme-jellyfin .account-menu,
    body.theme-jellyfin .account-pill{
        top:54px !important;
        right:9px !important;

        width:76px !important;
        min-width:76px !important;
        max-width:76px !important;

        height:44px !important;
    }

    body.theme-jellyfin .account-trigger{
        width:76px !important;
        min-width:76px !important;
        max-width:76px !important;

        height:44px !important;
        min-height:44px !important;

        border-radius:14px !important;
    }

}


/* ============================================================
   END TOP BAR ALIGNMENT
   ============================================================ */

/* ============================================================
   MEDIA SYSTEM — ALL APP PAGES MOBILE LAYOUT
   Upload / Downloads / Dashboard / Security / Jellyfin
   ============================================================ */

@media (max-width:768px){

    /* ---------- COMPACT MOBILE SIDEBAR ---------- */

    body.layout-app .app-sidebar,
    body.layout-app .app-sidebar.expanded{
        position:absolute !important;

        top:64px !important;
        left:12px !important;
        right:auto !important;
        bottom:auto !important;

        width:180px !important;
        min-width:180px !important;
        max-width:180px !important;

        height:48px !important;
        min-height:48px !important;
        max-height:48px !important;

        box-sizing:border-box !important;

        margin:0 !important;
        padding:4px !important;

        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;

        overflow:hidden !important;

        transform:none !important;
        translate:none !important;

        border-radius:15px !important;

        background:rgba(255,255,255,.82) !important;

        border:1px solid rgba(255,255,255,.72) !important;

        box-shadow:
            0 8px 25px rgba(20,20,30,.14),
            inset 0 1px 0 rgba(255,255,255,.85) !important;

        backdrop-filter:blur(18px) !important;
        -webkit-backdrop-filter:blur(18px) !important;

        z-index:1000 !important;
    }


    /* Hide desktop branding */
    body.layout-app .app-sidebar .sidebar-brand{
        display:none !important;
    }


    /* Toggle */
    body.layout-app .app-sidebar .sidebar-toggle{
        flex:0 0 38px !important;

        width:38px !important;
        min-width:38px !important;
        max-width:38px !important;

        height:38px !important;
        min-height:38px !important;
        max-height:38px !important;

        margin:0 3px 0 0 !important;
        padding:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        border-radius:11px !important;
    }


    /* Horizontal navigation */
    body.layout-app .app-sidebar .sidebar-nav{
        flex:1 1 auto !important;

        width:auto !important;
        height:100% !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        flex-direction:row !important;

        align-items:center !important;
        justify-content:space-evenly !important;

        gap:1px !important;

        overflow:hidden !important;
    }


    body.layout-app .app-sidebar .sidebar-link{
        flex:0 0 34px !important;

        width:34px !important;
        min-width:34px !important;
        max-width:34px !important;

        height:38px !important;
        min-height:38px !important;
        max-height:38px !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        border-radius:10px !important;
    }


    body.layout-app .app-sidebar .sidebar-link span{
        display:none !important;
    }


    body.layout-app .app-sidebar .sidebar-link .icon{
        width:16px !important;
        height:16px !important;
    }


    /* ---------- ACCOUNT PILL ---------- */

    body.layout-app .account-menu,
    body.layout-app .account-pill{
        position:absolute !important;

        top:64px !important;
        right:12px !important;
        left:auto !important;
        bottom:auto !important;

        width:82px !important;
        min-width:82px !important;
        max-width:82px !important;

        height:48px !important;

        margin:0 !important;
        padding:0 !important;

        box-sizing:border-box !important;

        overflow:visible !important;

        z-index:1001 !important;
    }


    body.layout-app .account-trigger{
        width:82px !important;
        min-width:82px !important;
        max-width:82px !important;

        height:48px !important;
        min-height:48px !important;

        margin:0 !important;
        padding:0 10px !important;

        box-sizing:border-box !important;

        border-radius:15px !important;

        white-space:nowrap !important;

        justify-content:center !important;
    }


    /* ---------- ACCOUNT DROPDOWN ---------- */

    body.layout-app .account-panel{
        position:absolute !important;

        top:calc(100% + 7px) !important;
        right:0 !important;
        left:auto !important;

        width:158px !important;
        min-width:158px !important;

        height:auto !important;

        z-index:10000 !important;

        overflow:visible !important;
    }


    /* ---------- MAIN CONTENT ---------- */

    body.layout-app .app-main{
        position:relative !important;

        width:auto !important;
        max-width:none !important;

        margin:0 !important;

        padding-top:132px !important;
        padding-left:14px !important;
        padding-right:14px !important;

        transform:none !important;
        translate:none !important;
    }


    /* ---------- PAGE HEADER ---------- */

    body.layout-app .app-main-brand{
        display:block !important;

        margin-top:0 !important;
        margin-bottom:18px !important;
    }


    body.layout-app .page-title{
        margin-top:0 !important;
    }


    body.layout-app .page-subtitle{
        max-width:100% !important;
    }


    /* ---------- CONTENT WIDTH ---------- */

    body.layout-app .card,
    body.layout-app .drop-zone,
    body.layout-app .download-intro,
    body.layout-app .library-controls,
    body.layout-app .file-list,
    body.layout-app .media-list,
    body.layout-app .upload-queue{
        max-width:100% !important;
        box-sizing:border-box !important;
    }

}


/* ============================================================
   PHONE
   ============================================================ */

@media (max-width:560px){

    body.layout-app .app-sidebar,
    body.layout-app .app-sidebar.expanded{
        top:56px !important;
        left:9px !important;

        width:170px !important;
        min-width:170px !important;
        max-width:170px !important;

        height:44px !important;
        min-height:44px !important;
        max-height:44px !important;

        border-radius:14px !important;
    }


    body.layout-app .app-sidebar .sidebar-toggle{
        flex-basis:34px !important;
        width:34px !important;
        min-width:34px !important;

        height:34px !important;
    }


    body.layout-app .app-sidebar .sidebar-link{
        flex-basis:32px !important;
        width:32px !important;
        min-width:32px !important;

        height:34px !important;
    }


    body.layout-app .app-sidebar .sidebar-link .icon{
        width:15px !important;
        height:15px !important;
    }


    body.layout-app .account-menu,
    body.layout-app .account-pill{
        top:56px !important;
        right:9px !important;

        width:76px !important;
        min-width:76px !important;
        max-width:76px !important;

        height:44px !important;
    }


    body.layout-app .account-trigger{
        width:76px !important;
        min-width:76px !important;
        max-width:76px !important;

        height:44px !important;
        min-height:44px !important;

        border-radius:14px !important;
    }


    body.layout-app .app-main{
        padding-top:112px !important;
        padding-left:12px !important;
        padding-right:12px !important;
    }


    /* Upload */
    body.theme-toshiro .drop-zone{
        width:100% !important;

        min-height:280px !important;

        padding:32px 18px !important;

        box-sizing:border-box !important;

        border-radius:16px !important;
    }


    body.theme-toshiro .drop-content{
        max-width:100% !important;
    }


    body.theme-toshiro .drop-content h2{
        font-size:20px !important;
    }


    /* Downloads */
    body.theme-urahara .library-controls{
        width:100% !important;

        display:grid !important;
        grid-template-columns:1fr 1fr !important;

        gap:8px !important;
    }


    body.theme-urahara .search-field{
        grid-column:1 / -1 !important;
    }


    /* Dashboard */
    body.theme-yoruichi .app-main{
        padding-left:12px !important;
        padding-right:12px !important;
    }


    /* Security */
    body.theme-byakuya .app-main{
        padding-left:12px !important;
        padding-right:12px !important;
    }

}


/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media (max-width:390px){

    body.layout-app .app-sidebar,
    body.layout-app .app-sidebar.expanded{
        left:8px !important;

        width:calc(100vw - 100px) !important;
        min-width:0 !important;
        max-width:calc(100vw - 100px) !important;
    }


    body.layout-app .account-menu,
    body.layout-app .account-pill{
        right:8px !important;
    }


    body.layout-app .app-main{
        padding-top:108px !important;
    }


    body.theme-toshiro .drop-zone{
        min-height:250px !important;
    }

}


/* ============================================================
   END ALL-PAGES MOBILE FIX
   ============================================================ */

/* ============================================================
   RESPONSIVE APP HEADER — PHONE / TABLET / NARROW WINDOWS
   ============================================================ */

@media (max-width:1100px){

    /* Compact floating navigation */
    body.layout-app .app-sidebar,
    body.layout-app .app-sidebar.expanded{
        position:absolute !important;
        top:64px !important;
        left:24px !important;
        right:auto !important;
        bottom:auto !important;

        width:205px !important;
        min-width:205px !important;
        max-width:205px !important;

        height:52px !important;
        min-height:52px !important;
        max-height:52px !important;

        padding:4px !important;
        margin:0 !important;

        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;

        overflow:hidden !important;
        transform:none !important;
        translate:none !important;

        border-radius:17px !important;

        background:rgba(255,255,255,.84) !important;
        border:1px solid rgba(255,255,255,.75) !important;

        box-shadow:
            0 8px 28px rgba(20,20,30,.15),
            inset 0 1px 0 rgba(255,255,255,.9) !important;

        backdrop-filter:blur(18px) !important;
        -webkit-backdrop-filter:blur(18px) !important;

        z-index:1000 !important;
    }

    body.layout-app .app-sidebar .sidebar-brand{
        display:none !important;
    }

    body.layout-app .app-sidebar .sidebar-toggle{
        flex:0 0 40px !important;
        width:40px !important;
        min-width:40px !important;
        max-width:40px !important;

        height:40px !important;
        min-height:40px !important;
        max-height:40px !important;

        margin:0 3px 0 0 !important;
        padding:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        border-radius:11px !important;
    }

    body.layout-app .app-sidebar .sidebar-nav{
        flex:1 1 auto !important;

        width:auto !important;
        height:100% !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:space-evenly !important;

        gap:2px !important;
        overflow:hidden !important;
    }

    body.layout-app .app-sidebar .sidebar-link{
        flex:0 0 38px !important;

        width:38px !important;
        min-width:38px !important;
        max-width:38px !important;

        height:40px !important;
        min-height:40px !important;
        max-height:40px !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        border-radius:11px !important;
    }

    body.layout-app .app-sidebar .sidebar-link span{
        display:none !important;
    }

    body.layout-app .app-sidebar .sidebar-link .icon{
        width:17px !important;
        height:17px !important;
    }


    /* Account */
    body.layout-app .account-menu,
    body.layout-app .account-pill{
        position:absolute !important;

        top:64px !important;
        right:24px !important;
        left:auto !important;
        bottom:auto !important;

        width:92px !important;
        min-width:92px !important;
        max-width:92px !important;

        height:52px !important;

        margin:0 !important;
        padding:0 !important;

        box-sizing:border-box !important;

        overflow:visible !important;

        z-index:1001 !important;
    }

    body.layout-app .account-trigger{
        width:92px !important;
        min-width:92px !important;
        max-width:92px !important;

        height:52px !important;
        min-height:52px !important;

        margin:0 !important;
        padding:0 10px !important;

        box-sizing:border-box !important;

        border-radius:17px !important;

        justify-content:center !important;
        white-space:nowrap !important;
    }

    body.layout-app .account-panel{
        position:absolute !important;

        top:calc(100% + 8px) !important;
        right:0 !important;
        left:auto !important;

        width:158px !important;
        min-width:158px !important;

        height:auto !important;

        z-index:10000 !important;
    }


    /* Main content */
    body.layout-app .app-main{
        width:auto !important;
        max-width:none !important;

        margin:0 !important;

        padding-top:140px !important;
        padding-left:24px !important;
        padding-right:24px !important;

        transform:none !important;
        translate:none !important;
    }
}


/* Tablet */
@media (max-width:768px){

    body.layout-app .app-sidebar,
    body.layout-app .app-sidebar.expanded{
        top:58px !important;
        left:12px !important;

        width:180px !important;
        min-width:180px !important;
        max-width:180px !important;

        height:48px !important;
        min-height:48px !important;
        max-height:48px !important;

        border-radius:15px !important;
    }

    body.layout-app .account-menu,
    body.layout-app .account-pill{
        top:58px !important;
        right:12px !important;

        width:82px !important;
        min-width:82px !important;
        max-width:82px !important;

        height:48px !important;
    }

    body.layout-app .account-trigger{
        width:82px !important;
        min-width:82px !important;
        max-width:82px !important;

        height:48px !important;
        min-height:48px !important;

        border-radius:15px !important;
    }

    body.layout-app .app-main{
        padding-top:124px !important;
        padding-left:14px !important;
        padding-right:14px !important;
    }
}


/* Phone */
@media (max-width:560px){

    body.layout-app .app-sidebar,
    body.layout-app .app-sidebar.expanded{
        top:56px !important;
        left:9px !important;

        width:170px !important;
        min-width:170px !important;
        max-width:170px !important;

        height:44px !important;
        min-height:44px !important;
        max-height:44px !important;

        border-radius:14px !important;
    }

    body.layout-app .account-menu,
    body.layout-app .account-pill{
        top:56px !important;
        right:9px !important;

        width:76px !important;
        min-width:76px !important;
        max-width:76px !important;

        height:44px !important;
    }

    body.layout-app .account-trigger{
        width:76px !important;
        min-width:76px !important;
        max-width:76px !important;

        height:44px !important;
        min-height:44px !important;

        border-radius:14px !important;
    }

    body.layout-app .app-main{
        padding-top:112px !important;
        padding-left:12px !important;
        padding-right:12px !important;
    }
}


/* Very narrow phones */
@media (max-width:390px){

    body.layout-app .app-sidebar,
    body.layout-app .app-sidebar.expanded{
        left:8px !important;

        width:calc(100vw - 100px) !important;
        min-width:0 !important;
        max-width:calc(100vw - 100px) !important;
    }

    body.layout-app .account-menu,
    body.layout-app .account-pill{
        right:8px !important;
    }

    body.layout-app .app-main{
        padding-top:108px !important;
    }
}


/* ============================================================
   RESPONSIVE APP HEADER — PHONE / TABLET / NARROW WINDOWS
   ============================================================ */

@media (max-width:1100px){

    /* Compact floating navigation */
    body.layout-app .app-sidebar,
    body.layout-app .app-sidebar.expanded{
        position:absolute !important;
        top:64px !important;
        left:24px !important;
        right:auto !important;
        bottom:auto !important;

        width:205px !important;
        min-width:205px !important;
        max-width:205px !important;

        height:52px !important;
        min-height:52px !important;
        max-height:52px !important;

        padding:4px !important;
        margin:0 !important;

        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;

        overflow:hidden !important;
        transform:none !important;
        translate:none !important;

        border-radius:17px !important;

        background:rgba(255,255,255,.84) !important;
        border:1px solid rgba(255,255,255,.75) !important;

        box-shadow:
            0 8px 28px rgba(20,20,30,.15),
            inset 0 1px 0 rgba(255,255,255,.9) !important;

        backdrop-filter:blur(18px) !important;
        -webkit-backdrop-filter:blur(18px) !important;

        z-index:1000 !important;
    }

    body.layout-app .app-sidebar .sidebar-brand{
        display:none !important;
    }

    body.layout-app .app-sidebar .sidebar-toggle{
        flex:0 0 40px !important;
        width:40px !important;
        min-width:40px !important;
        max-width:40px !important;

        height:40px !important;
        min-height:40px !important;
        max-height:40px !important;

        margin:0 3px 0 0 !important;
        padding:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        border-radius:11px !important;
    }

    body.layout-app .app-sidebar .sidebar-nav{
        flex:1 1 auto !important;

        width:auto !important;
        height:100% !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:space-evenly !important;

        gap:2px !important;
        overflow:hidden !important;
    }

    body.layout-app .app-sidebar .sidebar-link{
        flex:0 0 38px !important;

        width:38px !important;
        min-width:38px !important;
        max-width:38px !important;

        height:40px !important;
        min-height:40px !important;
        max-height:40px !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        border-radius:11px !important;
    }

    body.layout-app .app-sidebar .sidebar-link span{
        display:none !important;
    }

    body.layout-app .app-sidebar .sidebar-link .icon{
        width:17px !important;
        height:17px !important;
    }


    /* Account */
    body.layout-app .account-menu,
    body.layout-app .account-pill{
        position:absolute !important;

        top:64px !important;
        right:24px !important;
        left:auto !important;
        bottom:auto !important;

        width:92px !important;
        min-width:92px !important;
        max-width:92px !important;

        height:52px !important;

        margin:0 !important;
        padding:0 !important;

        box-sizing:border-box !important;

        overflow:visible !important;

        z-index:1001 !important;
    }

    body.layout-app .account-trigger{
        width:92px !important;
        min-width:92px !important;
        max-width:92px !important;

        height:52px !important;
        min-height:52px !important;

        margin:0 !important;
        padding:0 10px !important;

        box-sizing:border-box !important;

        border-radius:17px !important;

        justify-content:center !important;
        white-space:nowrap !important;
    }

    body.layout-app .account-panel{
        position:absolute !important;

        top:calc(100% + 8px) !important;
        right:0 !important;
        left:auto !important;

        width:158px !important;
        min-width:158px !important;

        height:auto !important;

        z-index:10000 !important;
    }


    /* Main content */
    body.layout-app .app-main{
        width:auto !important;
        max-width:none !important;

        margin:0 !important;

        padding-top:140px !important;
        padding-left:24px !important;
        padding-right:24px !important;

        transform:none !important;
        translate:none !important;
    }
}


/* Tablet */
@media (max-width:768px){

    body.layout-app .app-sidebar,
    body.layout-app .app-sidebar.expanded{
        top:58px !important;
        left:12px !important;

        width:180px !important;
        min-width:180px !important;
        max-width:180px !important;

        height:48px !important;
        min-height:48px !important;
        max-height:48px !important;

        border-radius:15px !important;
    }

    body.layout-app .account-menu,
    body.layout-app .account-pill{
        top:58px !important;
        right:12px !important;

        width:82px !important;
        min-width:82px !important;
        max-width:82px !important;

        height:48px !important;
    }

    body.layout-app .account-trigger{
        width:82px !important;
        min-width:82px !important;
        max-width:82px !important;

        height:48px !important;
        min-height:48px !important;

        border-radius:15px !important;
    }

    body.layout-app .app-main{
        padding-top:124px !important;
        padding-left:14px !important;
        padding-right:14px !important;
    }
}


/* Phone */
@media (max-width:560px){

    body.layout-app .app-sidebar,
    body.layout-app .app-sidebar.expanded{
        top:56px !important;
        left:9px !important;

        width:170px !important;
        min-width:170px !important;
        max-width:170px !important;

        height:44px !important;
        min-height:44px !important;
        max-height:44px !important;

        border-radius:14px !important;
    }

    body.layout-app .account-menu,
    body.layout-app .account-pill{
        top:56px !important;
        right:9px !important;

        width:76px !important;
        min-width:76px !important;
        max-width:76px !important;

        height:44px !important;
    }

    body.layout-app .account-trigger{
        width:76px !important;
        min-width:76px !important;
        max-width:76px !important;

        height:44px !important;
        min-height:44px !important;

        border-radius:14px !important;
    }

    body.layout-app .app-main{
        padding-top:112px !important;
        padding-left:12px !important;
        padding-right:12px !important;
    }
}


/* Very narrow phones */
@media (max-width:390px){

    body.layout-app .app-sidebar,
    body.layout-app .app-sidebar.expanded{
        left:8px !important;

        width:calc(100vw - 100px) !important;
        min-width:0 !important;
        max-width:calc(100vw - 100px) !important;
    }

    body.layout-app .account-menu,
    body.layout-app .account-pill{
        right:8px !important;
    }

    body.layout-app .app-main{
        padding-top:108px !important;
    }
}