/* "Premium" — the fourth choice in Settings > Appearance, and the theme a
 * device opens into before it has ever picked one (see DEFAULT_THEME in
 * settings-pro.js). Warm marigold-orange hero accent, cream/white surfaces,
 * a violet secondary accent, and a deep plum navigation band — the same
 * family of colours as the reference app: an orange hero against cream and
 * white, with a purple accent doing secondary work (course cards, chart
 * segments) rather than competing with the orange for attention.
 *
 * Unlike the retired build of this file, Premium is not a dark-mode skin:
 * settings-pro.js gives it data-theme="light" as its base (so the normal
 * light-mode dark-on-cream text and contrast rules already apply correctly)
 * and only adds data-skin="premium" for this file to repaint surfaces,
 * accents and navigation on top.
 *
 * Selectors carry the [data-skin="premium"] ... body prefix because several
 * per-feature stylesheets (page-detail-fixes.css, mobile-shell-final.css,
 * chat-premium.css, dark-theme-final.css…) paint the same surfaces with
 * !important, and a shorter selector loses to them.
 */
html[data-skin="premium"]{
  --mm-p-ink:#241b3d;
  --mm-p-muted:#9c8874;
  --mm-p-line:rgba(255,158,66,.26);
  --mm-p-surface:linear-gradient(165deg,#ffffff 0%,#fff8ee 100%);
  --mm-p-accent:linear-gradient(135deg,#ffb238,#ff6f4b);
  --mm-p-violet:#8b7ff0;
  --mm-p-shadow:0 18px 40px rgba(255,130,60,.16);
}

/* --- ground ------------------------------------------------------------- */
html[data-skin="premium"]{background:#fff8ee!important}
html[data-skin="premium"] body{
  background:
    radial-gradient(circle at 8% -8%, rgba(255,158,66,.26), transparent 36%),
    radial-gradient(circle at 96% 6%, rgba(139,127,240,.20), transparent 32%),
    radial-gradient(circle at 50% 112%, rgba(255,196,120,.22), transparent 42%),
    linear-gradient(180deg,#fff8ee 0%,#fff1de 46%,#fdeedd 100%)!important;
  background-attachment:fixed!important;
}
html[data-skin="premium"] :is(#app,.layout,.main,#content){background:transparent!important}

/* --- surfaces ------------------------------------------------------------ */
html[data-skin="premium"] body :is(.card,.utility-card,.report-card,.chat-shell,.member-clean-card,.member-summary-card,.settings-card,.pro-item,.bazar-entry,.topbar,table,.modal,.action-sheet){
  background:var(--mm-p-surface)!important;
  border:1px solid var(--mm-p-line)!important;
  box-shadow:var(--mm-p-shadow)!important;
}
html[data-skin="premium"] body :is(.sheet-grid button,.choice-chip,.top-chip,.badge,.member-chip,.report-mini span,.profile-info>div){
  background:rgba(255,158,66,.1)!important;
  border-color:var(--mm-p-line)!important;
  color:#6b4a2b!important;
}
html[data-skin="premium"] body :is(th,.meal-table :is(th,td):first-child){
  background:linear-gradient(135deg,rgba(255,178,74,.18),rgba(139,127,240,.14))!important;
  color:#6b4a2b!important;
  border-bottom-color:var(--mm-p-line)!important;
}
html[data-skin="premium"] body :is(td,th){border-bottom-color:rgba(255,158,66,.16)!important}
html[data-skin="premium"] body .muted,
html[data-skin="premium"] body :is(.eyebrow,.kpi .label,.member-identity small,.setting-copy small){color:var(--mm-p-muted)!important}

/* --- brand mark & avatars ------------------------------------------------ */
html[data-skin="premium"] body .brand-mark{background:var(--mm-p-accent)!important;color:#fff!important}
html[data-skin="premium"] body :is(.avatar,.chat-avatar){background:linear-gradient(135deg,#ffe1b8,#ffd0c2)!important;color:#b9581f!important}

/* --- navigation: the theme's own warm ground, not a separate dark band --
   The nav now uses the same cream family as the page behind it — a shade
   creamier than the cards so it still reads as its own surface — instead of
   a plum band that fought the rest of the palette. .sidebar/.mobilebar set
   color:#fff and rgba(255,255,255,*) chrome for a dark bg by default, so
   every child (brand, nav labels, the account footer) needs its own
   light-surface colour here too. */
html[data-skin="premium"] body .sidebar{
  background:linear-gradient(180deg,#fff3df 0%,#ffe9c9 55%,#ffe0bb 100%)!important;
  border-right:1px solid rgba(255,158,66,.3)!important;
  color:var(--mm-p-ink)!important;
}
html[data-skin="premium"] body .mobilebar{
  background:linear-gradient(160deg,#fff8ee 0%,#ffedd3 100%)!important;
  border:1px solid rgba(255,158,66,.32)!important;
  box-shadow:0 18px 40px rgba(255,130,60,.24)!important;
}
html[data-skin="premium"] body :is(.brand strong,.sidebar-user b){color:var(--mm-p-ink)!important}
html[data-skin="premium"] body :is(.brand small,.sidebar-user small){color:var(--mm-p-muted)!important}
html[data-skin="premium"] body :is(.nav button,.mobilebar button){color:#8a6a4a!important}
html[data-skin="premium"] body :is(.nav button:hover){background:rgba(255,158,66,.14)!important;color:#5b4636!important}
html[data-skin="premium"] body :is(.nav button.active,.mobilebar button.active){
  background:var(--mm-p-accent)!important;color:#fff!important;
  box-shadow:0 8px 18px rgba(255,111,75,.32)!important;
}
/* #logout (.btn, not .primary) already gets the violet secondary treatment
   from the accents block below — that rule is more specific than anything
   written here, so it wins on its own without restating it. Only the
   download link needs its own override: it isn't a .btn, so nothing else
   in this file reaches it. */
html[data-skin="premium"] body .sidebar-foot .mm-apk-side{background:rgba(139,127,240,.14)!important;color:#5b4c9e!important;border:1px solid rgba(139,127,240,.26)!important}

/* --- accents -------------------------------------------------------------- */
html[data-skin="premium"] body :is(.btn.primary,.auth-main-btn,.settings-hero){
  background:linear-gradient(135deg,#ffb238 0%,#ff6f4b 55%,#8b7ff0 140%)!important;
  color:#fff!important;border:0!important;
  box-shadow:0 10px 26px rgba(255,111,75,.35)!important;
}
html[data-skin="premium"] body .btn:not(.primary):not(.danger):not(.good){
  background:rgba(139,127,240,.12)!important;color:#5b4c9e!important;border-color:rgba(139,127,240,.24)!important;
}
html[data-skin="premium"] body :is(.pill.advance,.settings-live,.settings-verified){background:rgba(46,196,146,.14)!important;color:#1b8f68!important}
html[data-skin="premium"] body .pill.due{background:rgba(255,111,75,.16)!important;color:#d1502e!important}
html[data-skin="premium"] body :is(.field input,.field select,.field textarea,.select-button,.settings-text){
  background:#fffdf9!important;border-color:var(--mm-p-line)!important;color:var(--mm-p-ink)!important;
}
html[data-skin="premium"] body :is(.field input,.field textarea):focus{
  border-color:#ff9e42!important;box-shadow:0 0 0 3px rgba(255,158,66,.18)!important;
}

/* --- chat ------------------------------------------------------------------ */
html[data-skin="premium"] body .chat-shell-live .chat-messages-live{
  background:
    radial-gradient(rgba(255,158,66,.07) 1px, transparent 1.3px) 0 0/19px 19px,
    radial-gradient(circle at 10% 0%, rgba(255,158,66,.16), transparent 46%),
    radial-gradient(circle at 94% 100%, rgba(139,127,240,.14), transparent 46%),
    linear-gradient(180deg,#fff8ee 0%,#fff3e1 54%,#fff8ee 100%)!important;
}
html[data-skin="premium"] body .chat-shell-live .chat-bubble-pro{background:#fff!important;border-color:var(--mm-p-line)!important}
html[data-skin="premium"] body .chat-shell-live .chat-row-live.mine .chat-bubble-pro{background:var(--mm-p-accent)!important;border-color:transparent!important;box-shadow:0 10px 26px rgba(255,111,75,.3)!important}
html[data-skin="premium"] body .chat-shell-live .chat-day span{background:#fff!important;border-color:var(--mm-p-line)!important;color:var(--mm-p-muted)!important}
html[data-skin="premium"] body .chat-shell-live .chat-compose-pro.chat-compose-live{
  background:transparent!important;
  border-color:var(--mm-p-line)!important;
}
html[data-skin="premium"] body .chat-shell-live .chat-compose-pro textarea{background:#fff!important;border-color:var(--mm-p-line)!important}

/* --- sign-in --------------------------------------------------------------- */
html[data-skin="premium"] body .auth-page{
  background:
    radial-gradient(circle at 0% 20%, rgba(255,158,66,.26), transparent 38%),
    radial-gradient(circle at 100% 85%, rgba(139,127,240,.2), transparent 36%),
    linear-gradient(180deg,#fff8ee,#fff1de 58%,#fdeedd)!important;
}
html[data-skin="premium"] body :is(.auth-card,.auth-member-card){background:var(--mm-p-surface)!important;border-color:var(--mm-p-line)!important}

/* --- the appearance picker ------------------------------------------------
   Always one row of four, on every theme — this is layout, not colour, so it
   is not scoped to data-skin="premium". A live gradient swatch on the
   Premium button itself previews the palette even while another theme is
   active, so it is worth switching to. */
.theme-picker{grid-template-columns:repeat(4,1fr)!important;gap:7px!important}
.theme-picker button{min-height:76px!important;padding:6px 2px!important}
.theme-picker button i{font-size:18px!important}
.theme-picker button b{font-size:10.5px!important;white-space:nowrap!important}
@media(max-width:380px){
  .theme-picker button i{font-size:16px!important}
  .theme-picker button b{font-size:9.5px!important}
}
.theme-picker button[data-theme-choice="premium"]{
  background:linear-gradient(135deg,rgba(255,178,74,.16),rgba(139,127,240,.13))!important;
  border-color:rgba(255,158,66,.32)!important;
}
.theme-picker button[data-theme-choice="premium"] i{
  background:linear-gradient(135deg,#ffb238,#ff6f4b 60%,#8b7ff0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
html[data-skin="premium"] body .theme-picker button.selected{
  border-color:#ff9e42!important;
  background:linear-gradient(135deg,rgba(255,178,74,.2),rgba(139,127,240,.16))!important;
  color:#b9581f!important;
  box-shadow:inset 0 0 0 1px #ff9e42!important;
}