/* my.melowee.com — Mein MELOWEE. Variablen und Account/TV-Blöcke stammen aus learn custom.css (2026-10-09). */
:root {
  --ml-red:       #E63946;
  --ml-orange:    #F4845F;
  --ml-yellow:    #EDCB5A;
  --ml-green:     #57CC99;
  --ml-blue:      #4895EF;
  --ml-purple:    #9B5DE5;
  --ml-neutral:   #AAB8CC;
  --ml-cyan:      #00D4E8;

  --ml-success:   var(--ml-green);
  --ml-warning:   var(--ml-yellow);
  --ml-error:     var(--ml-red);

  /* Spacing */
  --ml-card-padding:   14px 16px;
  --ml-card-radius:    14px;
  --ml-input-radius:   8px;
  --ml-button-radius:  8px;

  /* Typography */
  --ml-font-ui:   'SF Pro Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ml-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Animation */
  --ml-transition-fast: 0.15s ease;
  --ml-transition:      0.25s ease;

  /* Glass */
  --ml-glass-dark:  blur(16px) saturate(1.3);
  --ml-glass-light: blur(16px) saturate(1.15);

  /* Sidebar */
  --md-sidebar-width: 8.5rem;
}
html { color-scheme: dark; }
body { margin: 0; background: #100c20; color: #e8e6f0; font-family: var(--ml-font-ui); line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--ml-cyan); }
code { font-family: var(--ml-font-mono); font-size: 0.9em; background: rgba(255,255,255,0.06); padding: 0.1em 0.35em; border-radius: 4px; }
.ml-top { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 1.2rem; background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.08); position: sticky; top: 0; backdrop-filter: var(--ml-glass-dark); z-index: 5; }
.ml-top .ml-logo { font-weight: 800; letter-spacing: 0.08em; color: #fff; text-decoration: none; font-size: 1.05rem; }
.ml-top .ml-logo span { color: var(--ml-purple); }
.ml-top nav { display: flex; gap: 1rem; font-size: 0.9rem; }
.ml-top nav a { color: #cfcde0; text-decoration: none; }
.ml-top nav a:hover { color: #fff; }
.ml-header-auth { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; font-size: 0.8rem; white-space: nowrap; }
.ml-header-auth .ml-auth-user a { color: var(--ml-cyan); text-decoration: none; }
.ml-header-auth .ml-auth-btn { padding: 0.35rem 0.8rem; border-radius: var(--ml-button-radius); border: 1px solid rgba(255,255,255,0.15); background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: 0.8rem; }
.ml-header-auth .ml-btn-login { background: var(--ml-purple); color: #fff; border-color: transparent; }
.ml-main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 1.2rem 1.2rem 3rem; box-sizing: border-box; }
.ml-main h1 { font-size: 1.8rem; margin: 0.6rem 0 1rem; }
.ml-main h1 .mdi, .ml-main h3 .mdi { color: var(--ml-purple); margin-right: 0.2rem; }
.ml-lead { font-size: 1.1rem; color: #cfcde0; }
.ml-foot { text-align: center; font-size: 0.8rem; color: #8a879c; padding: 1rem; border-top: 1px solid rgba(255,255,255,0.06); }
.ml-foot a { color: #a9a6bd; text-decoration: none; margin: 0 0.3rem; }
.ml-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.ml-hub-card { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.2rem 1.3rem; border-radius: var(--ml-card-radius); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: inherit; text-decoration: none; transition: transform var(--ml-transition-fast), border-color var(--ml-transition-fast); }
.ml-hub-card:hover { transform: translateY(-2px); border-color: rgba(155,93,229,0.6); }
.ml-hub-card .mdi { font-size: 2rem; color: var(--ml-purple); }
.ml-hub-card span { font-size: 0.85rem; color: #a9a6bd; }
.ml-hub-card--soon { opacity: 0.5; pointer-events: none; }
.ml-body-tv .ml-top, .ml-body-tv .ml-foot { display: none; }
.ml-body-tv .ml-main { max-width: none; }
/* ===== Account pages (login/register/profile) — 2026-10-07 ===== */
.ml-account { max-width: 440px; margin: 1rem auto 3rem; }
.ml-account--wide { max-width: 1100px; }
.ml-form { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 1.25rem 1.5rem; }
.ml-form label { display: block; margin: 0 0 1rem; font-weight: 600; font-size: 0.85rem; }
.ml-form label small { display: block; font-weight: 400; color: var(--ml-text-dim, #888); margin-top: 0.2rem; }
.ml-form input, .ml-form select { display: block; width: 100%; box-sizing: border-box; margin-top: 0.3rem; padding: 0.6rem 0.7rem; font-size: 1rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); background: rgba(0,0,0,0.25); color: inherit; }
.ml-form input:focus, .ml-form select:focus { outline: none; border-color: var(--ml-purple, #9b5de5); box-shadow: 0 0 0 3px rgba(155,93,229,0.25); }
.ml-form--inline { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; align-items: end; }
.ml-form--inline button { grid-column: 1 / -1; justify-self: start; }
.ml-btn-primary, .ml-btn-secondary { display: inline-block; padding: 0.6rem 1.2rem; border-radius: 8px; font-weight: 600; cursor: pointer; border: 1px solid transparent; text-decoration: none !important; }
.ml-btn-primary { background: var(--ml-purple, #9b5de5); color: #fff !important; }
.ml-btn-primary:hover { background: #a96ef0; }
.ml-btn-primary:disabled { opacity: 0.6; cursor: wait; }
.ml-btn-secondary { background: transparent; color: inherit; border-color: rgba(155,93,229,0.5); width: 100%; text-align: center; }
.ml-btn-secondary:hover { background: rgba(155,93,229,0.12); }
.ml-account--wide .ml-btn-secondary { width: auto; }
.ml-btn-link { background: none; border: none; padding: 0; color: var(--ml-cyan, #00bfa5); cursor: pointer; text-decoration: underline; font: inherit; }
.ml-form-msg { margin: 0.5rem 0 1rem; padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 0.9rem; background: rgba(255,255,255,0.05); }
.ml-form-msg--err { background: rgba(244,67,54,0.15); color: #ff8a80; }
.ml-form-msg--ok { background: rgba(0,191,165,0.15); color: #64ffda; }
.ml-form-links { font-size: 0.85rem; margin: 1rem 0 0; color: var(--ml-text-dim, #888); }
.ml-form-divider { display: flex; align-items: center; gap: 0.8rem; margin: 1.5rem 0; color: var(--ml-text-dim, #888); font-size: 0.8rem; }
.ml-form-divider::before, .ml-form-divider::after { content: ""; flex: 1; border-top: 1px solid rgba(255,255,255,0.12); }
.ml-dim { color: var(--ml-text-dim, #888); }
.ml-small { font-size: 0.8rem; }
.ml-profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.2rem; }
.ml-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 1.2rem 1.4rem; }
.ml-card h3 { margin-top: 0; }
.ml-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0; font-size: 0.9rem; }
.ml-dl dt { color: var(--ml-text-dim, #888); } .ml-dl dd { margin: 0; }
.ml-progress-track { height: 10px; border-radius: 5px; background: rgba(255,255,255,0.08); overflow: hidden; margin: 0.4rem 0; }
.ml-progress-fill { height: 100%; background: linear-gradient(90deg, var(--ml-purple, #9b5de5), var(--ml-cyan, #00bfa5)); transition: width 0.6s; }
.ml-radar { width: 100%; max-width: 320px; display: block; margin: 0 auto; }
.ml-radar-ring { fill: none; stroke: rgba(255,255,255,0.12); } .ml-radar-axis { stroke: rgba(255,255,255,0.12); }
.ml-radar-area { fill: rgba(155,93,229,0.35); stroke: var(--ml-purple, #9b5de5); stroke-width: 2; }
.ml-radar-label { font-size: 11px; fill: currentColor; }
.ml-skill-list { list-style: none; padding: 0; margin: 0.5rem 0 0; font-size: 0.85rem; }
.ml-skill-list li { display: grid; grid-template-columns: 7.5em 1fr 3.5em; align-items: center; gap: 0.6rem; margin: 0.25rem 0; }
.ml-skill-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; display: block; }
.ml-skill-bar span { display: block; height: 100%; background: var(--ml-cyan, #00bfa5); }
.ml-skill-val { text-align: right; color: var(--ml-text-dim, #888); }
.ml-plain-list { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; }
.ml-header-auth .ml-auth-user a { color: inherit; text-decoration: none; }
.ml-header-auth .ml-auth-user a:hover { text-decoration: underline; }
.ml-card--children { grid-column: 1 / -1; }
.ml-child { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ml-child-actions { font-size: 0.8rem; white-space: nowrap; }
.ml-danger { color: #ff8a80 !important; }
.ml-details summary { cursor: pointer; font-weight: 600; margin: 0.8rem 0 0.5rem; }
.ml-check { font-weight: 400 !important; font-size: 0.85rem !important; grid-column: 1 / -1; }
.ml-check input { display: inline; width: auto; margin: 0 0.4rem 0 0; }

/* ===== Familiengerät / TV page ===== */
.ml-tv { max-width: 1100px; margin: 0 auto; padding: 1rem; text-align: center; }
.ml-tv-screen h1 { font-size: 2.2rem; margin: 1rem 0 1.5rem; }
.ml-tv-lead { font-size: 1.25rem; }
.ml-tv-code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 4.5rem; letter-spacing: 0.25em; font-weight: 700; margin: 1.5rem 0; color: var(--ml-cyan, #00bfa5); }
.ml-tv-msg { font-size: 1.1rem; min-height: 1.5em; color: var(--ml-text-dim, #aaa); }
.ml-tv-foot { margin-top: 2rem; font-size: 0.95rem; }
.ml-tv-btn { display: inline-block; font-size: 1.4rem; padding: 0.9rem 2.2rem; border-radius: 14px; background: var(--ml-purple, #9b5de5); color: #fff !important; border: 3px solid transparent; cursor: pointer; text-decoration: none !important; margin: 0.4rem; }
.ml-tv-btn--small { font-size: 1rem; padding: 0.6rem 1.4rem; background: transparent; color: inherit !important; border-color: rgba(155,93,229,0.5); }
.ml-tv-btn:focus, .ml-tv-tile:focus, .ml-tv-pad-btn:focus { outline: none; border-color: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,0.35); }
.ml-tv-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; margin: 1rem 0 2rem; }
.ml-tv-tile { position: relative; width: 200px; height: 220px; border-radius: 22px; border: 4px solid transparent; background: linear-gradient(160deg, var(--c), rgba(0,0,0,0.35)); color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; transition: transform 0.15s; }
.ml-tv-tile:hover, .ml-tv-tile:focus { transform: scale(1.06); }
.ml-tv-tile--last::after { content: "zuletzt"; position: absolute; top: 10px; left: 12px; font-size: 0.75rem; background: rgba(0,0,0,0.4); padding: 0.15rem 0.5rem; border-radius: 10px; }
.ml-tv-tile--locked { opacity: 0.5; }
.ml-tv-avatar { width: 96px; height: 96px; border-radius: 50%; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: 700; }
.ml-tv-name { font-size: 1.5rem; font-weight: 600; }
.ml-tv-lock { position: absolute; top: 10px; right: 12px; font-size: 1.1rem; }
.ml-tv-role { font-size: 0.8rem; opacity: 0.85; }
.ml-tv-pin-dots { display: flex; justify-content: center; gap: 1.2rem; margin: 1rem 0 2rem; }
.ml-tv-pin-dots span { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.5); display: inline-block; }
.ml-tv-pin-dots span.on { background: var(--ml-cyan, #00bfa5); border-color: var(--ml-cyan, #00bfa5); }
.ml-tv-pad { display: grid; grid-template-columns: repeat(2, 150px); gap: 1.2rem; justify-content: center; }
.ml-tv-pad-btn { height: 150px; border-radius: 22px; border: 4px solid transparent; background: var(--c); color: rgba(255,255,255,0.9); font-size: 4rem; cursor: pointer; }
.ml-tv-pad-btn:hover { filter: brightness(1.15); }
@media (max-width: 600px) { .ml-tv-code { font-size: 3rem; } .ml-tv-tile { width: 150px; height: 170px; } .ml-tv-avatar { width: 70px; height: 70px; font-size: 2.2rem; } .ml-tv-pad { grid-template-columns: repeat(2, 120px); } .ml-tv-pad-btn { height: 120px; font-size: 3rem; } }
.ml-fieldset { grid-column: 1 / -1; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 0.6rem 0.9rem; margin: 0 0 1rem; }
.ml-fieldset legend { font-size: 0.8rem; color: var(--ml-text-dim, #aaa); padding: 0 0.3rem; }
.ml-fieldset .ml-check { margin: 0.2rem 0; }
.ml-child-traces { white-space: nowrap; }
.ml-child-traces input { display: inline; width: auto; margin: 0 0.25rem 0 0.4rem; }