/* moondl: the brand over the 5.0 UI (loaded after hybrid.css; the same selectors win by order).
   The look of moondl.com today (its home and premium pages): black and yellow on a neutral grey,
     yellow #fecb2f (the logo, the calls to action, with black text), near black #161616
     (text, the dark cards and bars), grey #f3f3f3 (the page), Roboto.
   Light theme: the accent is the near black (white text on it reads), the selections are a
   pale yellow, the main calls to action are yellow. Dark theme: the accent is the yellow, so
   the text on it turns dark. Only tokens and the colours hybrid.css spells out; the layout
   stays 5.0's. */

/* ---------- Font: Roboto, as moondl.com ---------- */
:root{
  --hy-font:Roboto,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-sans:Roboto,system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---------- Admin and user panel ---------- */
:root{
  --hy-bg:#f3f3f3;--hy-sf:#fff;--hy-bd:#e3e3e3;--hy-tx:#161616;--hy-t2:#5c5c5c;--hy-t3:#8c8c8c;
  --hy-ac:#161616;--hy-ac2:#cfcfcf;--hy-acb:#fff4cc;--hy-act:#161616;--hy-sel:#fff8de;--hy-tg:#d6d6d6;
  --hy-bar:#161616;--hy-barb:#2e2e2e;--hy-grp:#f7f7f7;
}
:root[data-theme="dark"]{
  --hy-bg:#121212;--hy-sf:#1b1b1b;--hy-bd:#2e2e2e;--hy-tx:#ececec;--hy-t2:#a8a8a8;--hy-t3:#777;
  --hy-ac:#fecb2f;--hy-ac2:#5a4a12;--hy-acb:#3a3115;--hy-act:#fecb2f;--hy-sel:#2b2615;--hy-tg:#3a3a3a;
  --hy-bar:#1b1b1b;--hy-barb:#333;--hy-grp:#202020;
}
/* the outline of picked items and the second colour of the charts ("Premium sales" in the reports) */
:root{--accent-line:#fecb2f}
:root[data-theme="dark"]{--accent-line:#8a6d12}

/* dark theme: dark text on the yellow accent */
:root[data-theme="dark"] .sb-btn.primary,:root[data-theme="dark"] .sb-bulk .sb-move-menu .sb-btn.primary,
:root[data-theme="dark"] .hy-av,:root[data-theme="dark"] .sb-root .hy-btn.pr,:root[data-theme="dark"] .hy-btn.pr,
:root[data-theme="dark"] .hp .hp-pc .hp-bd.hp-pop,:root[data-theme="dark"] .hc .hc-go,
:root[data-theme="dark"] .hc .hc-chip.on,:root[data-theme="dark"] .sb-root .hc a.hc-chip.on,
:root[data-theme="dark"] .hdoc .hda-ki,:root[data-theme="dark"] .hdoc .hda-btn.pr,:root[data-theme="dark"] .sb-root .hdoc a.hda-btn.pr,
:root[data-theme="dark"] .pd-mode.on .ic,:root[data-theme="dark"] .hi-n.cur{color:#161616}

/* ---------- Public pages: home, upload, file, download, premium, docs ---------- */
.hw,.hh,.hf,.hd,.hp,.hc,.hdoc{--bg:#f3f3f3;--bd:#e3e3e3;--tx:#161616;--t2:#5c5c5c;--t3:#8c8c8c;--ac:#161616;--acb:#fff4cc;--act:#161616;--gold:#fecb2f;--grp:#f6f6f6}
.hh{--h1:#0f0f0f;--h2:#2e2e2e}
:root[data-theme="dark"] .hw,:root[data-theme="dark"] .hh,:root[data-theme="dark"] .hf,:root[data-theme="dark"] .hd,
:root[data-theme="dark"] .hp,:root[data-theme="dark"] .hc,:root[data-theme="dark"] .hdoc{--bg:#121212;--sf:#1b1b1b;--bd:#2e2e2e;--tx:#ececec;--t2:#a8a8a8;--t3:#777;--ac:#fecb2f;--acb:#3a3115;--act:#fecb2f;--grp:#202020}
:root[data-theme="dark"] .hh{--h1:#0a0a0a;--h2:#262626}

/* the dark bands at the top of the public pages (moondl's black cards) */
.hw-band,.hd .hd-top,.hp .hp-top,.hc .hc-top,.hdoc .hdoc-top{background:linear-gradient(125deg,#0f0f0f 0%,#161616 55%,#2a2a2a 100%)}
.hh .hh-hero{background:linear-gradient(125deg,var(--h1) 0%,#161616 45%,var(--h2) 100%)}
.hh .hh-hero h3 em{background:linear-gradient(90deg,#fecb2f,#ffe9a8);-webkit-background-clip:text;background-clip:text}
.hh .hh-cta{background:linear-gradient(120deg,#161616,#2e2e2e)}

/* the calls to action: yellow with black text, as moondl.com's "Go to Premium" / "Buy" */
.hh .hh-bt.hh-p,.hf .hf-btn.hf-fast{background:#fecb2f;border-color:#fecb2f;color:#161616;box-shadow:0 7px 18px -6px rgba(254,203,47,.6)}
.hh .hh-bt.hh-p:hover,.hf .hf-btn.hf-fast:hover{background:#ffd54f}

/* icons, bars and charts */
.hh .hh-dz .hh-ic,.hd .hd-upl i.hd-b{background:#161616;color:#fecb2f}
.hh .hh-pf .hh-bar i,.hf .hf-cb .hf-pr i{background:linear-gradient(90deg,#fecb2f,#ffd95c)}
.hh .hh-chart i{background:linear-gradient(180deg,#161616,#5c5c5c)}
.hd .hd-thumb{background:linear-gradient(135deg,#0f0f0f,#2a2a2a 60%,#5c5c5c)}
.hd .hd-stp .hd-s.hd-cu b{color:#161616}
.hd .hd-code span:nth-child(1),.hd .hd-capw td > div[style] span:nth-child(4n+1){color:#161616}

/* the file page (download1: .hf) and the panel's coloured headers */
.hf .hf-top{background:radial-gradient(circle at 88% -10%,rgba(254,203,47,.12) 0 220px,transparent 221px),linear-gradient(100deg,#0f0f0f,#2a2a2a)}
.hf .hf-upl{background:linear-gradient(100deg,#161616,#2e2e2e)}
.hf .hf-scr{background:radial-gradient(120% 90% at 20% 20%,#3a3a3a 0%,#161616 45%,#050505 100%)}
.pd-hero{background:radial-gradient(circle at 92% -30%,rgba(254,203,47,.14) 0 180px,transparent 181px),linear-gradient(100deg,#0f0f0f,#2a2a2a)}
.hi-top{background:radial-gradient(circle at 88% -10%,rgba(254,203,47,.12) 0 220px,transparent 221px),linear-gradient(100deg,#0f0f0f,#2a2a2a)}

/* ---------- moondl.com's premium cards (_md_tiers.html: /premium and the home page) ---------- */
.md-tiers{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:24px;align-items:start;text-align:left}
.md-tier{background:var(--sf,#fff);border-radius:8px;overflow:hidden;box-shadow:0 16px 35px rgba(0,0,0,.08);display:flex;flex-direction:column;outline:3px solid transparent;transition:outline-color .15s}
.md-tier.md-cur{outline-color:#fecb2f}
.md-dark{background:#161616;color:#fff;padding:32px 44px;display:flex;flex-direction:column;gap:24px}
.md-name{display:flex;align-items:center;justify-content:center;gap:16px;border:2px solid #fff;border-radius:6px;padding:16px;font-size:clamp(18px,1.9vw,24px);font-weight:700;line-height:1.2;text-align:center}
.md-full .md-name{border-color:#fecb2f}
.md-name img{width:42px;height:42px}
.md-price{background:#262626;border-radius:6px;padding:14px;text-align:center}
.md-price b{display:block;font-size:22px;font-weight:700}
.md-price span,.md-vol span{font-size:13px;color:rgba(255,255,255,.75)}
.md-vol{text-align:center;margin-top:-6px}
.md-vol b{display:block;font-size:32px;font-weight:700;line-height:1.2}
.md-full .md-vol b{color:#fecb2f}
.md-speed{position:relative;height:36px;border-radius:18px;background:#2e2e2e;overflow:hidden}
.md-speed > i{position:absolute;inset:0 auto 0 0;background:#23a24d;border-radius:18px}
.md-speed span{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;height:100%;font-weight:700;font-size:15px}
.md-feat{list-style:none;margin:0;padding:14px 44px 0;text-align:center;flex:1}
.md-feat li{padding:13px 0;border-bottom:1px solid var(--bd);font-weight:600;font-size:15px;color:var(--tx)}
.md-feat li.md-no{font-weight:400;color:var(--t3)}
.md-buyw{padding:28px 44px 36px;text-align:center}
.md-buy,.md-go{display:inline-flex;align-items:center;gap:10px;padding:11px 24px;border-radius:6px;border:1px solid var(--bd);background:var(--sf,#fff);color:var(--tx);font:inherit;font-size:17px;font-weight:700;cursor:pointer;text-decoration:none}
.md-full .md-buy,.md-go{background:#fecb2f;border-color:#fecb2f;color:#161616}
.md-buy:hover,.md-go:hover{filter:brightness(.96);color:#161616}
.md-tier:not(.md-full) .md-buy:hover{color:var(--tx)}
.md-buy:focus-visible,.md-go:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* on /premium the cards sit on the dark band, the periods follow (payments.html) */
.hp .md-tiers{position:relative;z-index:2;margin:-121.33px calc(var(--gut) + 21px) 0}
.hp .md-ph{margin:36px calc(var(--gut) + 21px) 14px;font-size:18px;color:var(--t2);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;scroll-margin-top:80px}
.hp .md-ph b{color:var(--tx)}
.hp .md-ph a{margin-left:auto;font-size:14px;color:var(--act);text-decoration:underline}
.hp .hp-plans.md-after{margin-top:0}

/* the home page: "File Storage" and "Our Best Offers" (upload_form.html .md-home) */
.hh .md-home{text-align:left}
.hh .md-fs{display:flex;align-items:center;justify-content:space-between;gap:32px;background:var(--sf);border-radius:8px;padding:48px 60px;margin-bottom:48px}
.hh .md-fs h4{font-size:clamp(30px,4vw,48px);font-weight:700;margin:0 0 18px;text-align:left}
.hh .md-fs p{font-size:15px;color:var(--t2);margin:0 0 22px;max-width:34ch}
.hh .md-fs img{width:100%;max-width:385px;height:auto}
.hh .md-oh{text-align:center;font-size:clamp(24px,3vw,32px);margin:0 0 32px}
.hh .md-pay{text-align:center;margin-top:40px;color:var(--t2);font-size:15px}
.hh .md-pay p{margin:0 0 24px;line-height:1.6}
.hh .md-pay img{max-width:100%;height:auto}
:root[data-theme="dark"] .hh .md-pay img{filter:invert(.75)}

/* the footer: moondl's black instead of navy */
.hw,.hh{--ft:#161616;--ftt:#a8a8a8}
:root[data-theme="dark"] .hw,:root[data-theme="dark"] .hh{--ft:#0a0a0a}

@media (max-width:860px){
  .md-tiers{grid-template-columns:1fr;gap:16px}
  .md-dark{padding:24px 20px}
  .md-feat{padding:10px 20px 0}
  .md-buyw{padding:22px 20px 26px}
  .hp .md-tiers{margin:-121.33px 14px 0}
  .hp .md-ph{margin:28px 14px 12px}
  .hp .md-ph a{margin-left:0}
  .hh .md-fs{flex-direction:column-reverse;padding:28px 22px;text-align:center}
  .hh .md-fs h4,.hh .md-fs p{text-align:center;margin-left:auto;margin-right:auto}
}

/* the drop zone of the home uploader: a yellow dashed line instead of the light blue */
.hh .hh-dz{border-color:#f5d67a}
:root[data-theme="dark"] .hh .hh-dz{border-color:#6b5a1f}
.hh .hh-dz.hh-over{border-color:var(--ac)}

/* the splash home (show_splash_main, upload_form.html): a short dark band under the header,
   the "File Storage" card over its lower edge */
.hh .hh-hero.md-sp{padding-bottom:110px}
.hh .md-home.md-up{position:relative;z-index:2;margin-top:-90px;padding-top:0}