/* Generated by tools/build_styles.py; edit the listed source modules. */

/* Source: foundation/interface.css */
html, body {
      -webkit-text-size-adjust: none;
      text-size-adjust: none;
    }
    /* --------- Bestehende Badge- und Utility-Styles --------- */
    .badge-notification {
      position: absolute;
      top: -4px;
      right: -2px;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      background: var(--uu-color-accent-legacy, #fd317b);
      color: var(--uu-color-white, #fff);
      border-radius: 11px;
      font-size: 0.95em;
      font-family:var(--uu-font-body, 'Raleway', Arial, sans-serif);
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      border: 2px solid var(--uu-color-background, #181a20);
      box-shadow: 0 1px 7px #fd317b44;
      line-height: 1;
      pointer-events: none;
    }

    .icon-badge-wrap { display: inline-block; position: relative; }

    .toast {
      visibility: hidden;
      min-width: 160px;
      margin-left: -80px;
      background: #2e193e;
      color: var(--uu-color-white, #fff);
      text-align: center;
      border-radius: 18px;
      padding: 15px;
      position: fixed;
      z-index: 9001;
      left: 50%;
      bottom: 40px;
      font-size: 1.03em;
      font-family: 'Raleway', sans-serif;
      font-weight: bold;
      box-shadow: 0 2px 16px #fd317b45;
      opacity: 0;
      transition: opacity 0.3s, visibility 0.3s;
    }
    .toast.show { visibility: visible; opacity: 1; }

    /* Global Usage-Limit Overlay (Coach-Style) */
    .usage-limit-overlay{
      position: fixed;
      inset: 0;
      z-index: 9200;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    .usage-limit-overlay[hidden]{ display:none !important; }
    .usage-limit-backdrop{
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,.62);
      backdrop-filter: blur(3px);
    }
    .usage-limit-card{
      position: relative;
      width: min(92vw, 560px);
      padding: 14px 14px 12px;
      border-radius:16px;
      background: linear-gradient(145deg,#28152f 0%,#1b1423 55%,#23182f 100%);
      border:1px solid #fe3a8236;
      box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 0 1px #ffffff10;
      color:var(--uu-color-white, #fff);
    }
    .usage-limit-close{
      position:absolute;
      right:8px;
      top:8px;
      width:34px;
      height:34px;
      border:none;
      border-radius:999px;
      background:#ffffff12;
      color:var(--uu-color-white, #fff);
      cursor:pointer;
      font-size:18px;
      line-height:1;
    }
    .usage-limit-title{ font-weight:800; font-size:1rem; margin-bottom:4px; padding-right:38px; }
    .usage-limit-title::before{
      content:"";
      display:inline-block;
      width:22px;
      height:22px;
      margin-right:6px;
      vertical-align:middle;
      border-radius:999px;
      background: radial-gradient(circle at 30% 20%,var(--uu-color-white, #fff),var(--uu-color-accent, #fe3a82));
      box-shadow:0 0 18px rgba(254,58,130,.65);
    }
    .usage-limit-sub{ font-size:.9rem; color:#e6d7fbcc; margin-bottom:8px; }
    .usage-limit-body{ font-size:.9rem; color:#f5f6fb; line-height:1.35; }
    .usage-limit-body ul{ margin:6px 0 0; padding-left:18px; }
    .usage-limit-body li{ margin-bottom:2px; }
    .usage-limit-actions{ margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; }
    .usage-limit-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:7px 12px;
      border-radius:999px;
      border:1px solid #ffffff33;
      background:#ffffff0a;
      color:var(--uu-color-white, #fff);
      font-weight:700;
      font-size:.88rem;
      text-decoration:none;
      cursor:pointer;
    }
    .usage-limit-btn.primary{
      background:linear-gradient(135deg,var(--uu-color-accent, #fe3a82),#ff7bb3);
      border-color:transparent;
      box-shadow:0 8px 22px rgba(254,58,130,.5);
    }
    .usage-limit-btn.ghost{ background:transparent; }
    .usage-limit-note{
      margin-top:10px;
      font-size:.82rem;
      color:#ffd7e7;
      min-height:1.2em;
    }
    @media (max-width:480px){
      .usage-limit-card{ padding:12px 10px; }
      .usage-limit-actions{ flex-direction:column; }
      .usage-limit-btn{ width:100%; }
    }

    #global-preloader {
      position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
      background: var(--uu-color-background, #181a20); z-index: 9999; display: flex; align-items: center; justify-content: center;
      transition: opacity .25s ease;
    }
    #global-preloader.hide{ opacity: 0; pointer-events: none; transition: opacity .06s ease; }
    .spinner {
      border: 6px solid #eee; border-top: 6px solid var(--uu-color-accent-legacy, #fd317b); border-radius: 50%;
      width: 44px; height: 44px; animation: spin 1.1s linear infinite;
    }
    @keyframes spin { 100% { transform: rotate(360deg); } }

    /* HIER erweitert */
    :root { --accent: var(--uu-color-accent, #fe3a82); --pt-duration: 80ms; --bottom-inset: 0px; }

/* Source: components/buttons.css */
/* ===== Global Glass Buttons (für Login, Welcome, etc.) ===== */
    :root {
      --uc-glass-bg: rgba(255,255,255,.035);
      --uc-glass-bg-hover: rgba(255,255,255,.08);
      --uc-glass-border: rgba(255,255,255,.14);
      --uc-glass-radius: 16px;
    }
    .uc-btn-row {
      display: flex;
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    .uc-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 44px;
      padding: 10px 14px;
      border-radius: var(--uc-glass-radius);
      border: 1px solid var(--uc-glass-border);
      background: var(--uc-glass-bg);
      backdrop-filter: blur(12px);
      color: var(--uu-color-white, #fff);
      font-weight: 800;
      text-decoration: none;
      transition: .15s background, .15s border-color, .15s transform;
      line-height: 1.1;
      text-align: center;
      white-space: nowrap;
    }
    .uc-btn:hover {
      background: var(--uc-glass-bg-hover);
      border-color: rgba(255,255,255,.35);
      transform: translateY(-1px);
    }
    .uc-btn:active {
      transform: translateY(0);
    }
    .uc-btn.primary {
      background: linear-gradient(180deg,var(--uu-color-accent, #fe3a82),var(--uu-color-accent-end, #ff5aa0));
      border-color: var(--uu-color-accent, #fe3a82);
      box-shadow: 0 8px 22px rgba(254,58,130,.35);
    }
    .uc-btn.primary:hover {
      background: linear-gradient(180deg,var(--uu-color-accent-end, #ff5aa0),var(--uu-color-accent, #fe3a82));
    }
    .uc-btn.sm {
      min-height: 36px;
      padding: 6px 10px;
      font-size: .9rem;
      border-radius: 12px;
    }
    .uc-btn.ghost {
      background: transparent;
      border-color: rgba(255,255,255,.08);
    }
    .uc-btn.ghost:hover {
      background: rgba(255,255,255,.035);
    }
    .uc-btn .material-icons,
    .uc-btn .material-icons-outlined {
      font-size: 18px;
      line-height: 1;
    }

/* Source: components/navigation-effects.css */
.bottom-nav .nav-item { position: relative; }
    .bottom-nav .nav-item .material-icons {
      transition: color .18s ease, transform .18s ease, text-shadow .18s ease, filter .18s ease;
    }
    .bottom-nav .nav-item.active .material-icons {
      color: var(--accent);
      transform: translateY(-2px);
      text-shadow: 0 0 10px rgba(254, 58, 130, .55),
                   0 0 18px rgba(254, 58, 130, .35),
                   0 0 28px rgba(254, 58, 130, .25);
      filter: drop-shadow(0 2px 10px rgba(254, 58, 130, .25));
    }
    .bottom-nav .nav-item.active::after {
      content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px;
      transform: translate(-50%, -50%); pointer-events: none; border-radius: 50%;
      background: radial-gradient(35% 35% at 50% 50%, rgba(254, 58, 130, .32) 0%, rgba(254, 58, 130, .18) 40%, transparent 70%);
      filter: blur(8px);
    }
    .bottom-nav .nav-item.active .badge-notification {
      box-shadow: 0 0 10px rgba(254, 58, 130, .65), 0 2px 12px rgba(254, 58, 130, .45);
      transform: translateY(-1px);
    }

    .bottom-nav, .bottom-nav .nav-item {
      -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; touch-action: manipulation; user-select: none;
    }
    .bottom-nav .nav-item { position: relative; overflow: hidden; border-radius: 16px; }
    .bottom-nav .nav-item:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 2px rgba(254, 58, 130, .85), inset 0 0 0 5px rgba(254, 58, 130, .18);
    }
    .bottom-nav .nav-item.is-pressed .material-icons,
    .bottom-nav .nav-item:active .material-icons {
      transform: translateY(-1px) scale(0.92); transition: transform .12s ease;
    }
    .bottom-nav .nav-item .ripple {
      position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%;
      background: currentColor; opacity: .28; transform: translate(-50%, -50%) scale(0);
      pointer-events: none; animation: bottomnav-ripple .45s ease-out forwards;
    }
    @keyframes bottomnav-ripple { to { transform: translate(-50%, -50%) scale(12); opacity: 0; } }
    @media (prefers-reduced-motion: reduce) {
      .bottom-nav .nav-item .ripple { display: none; }
      .bottom-nav .nav-item.is-pressed .material-icons { transform: none; }
    }

    /* bottom-nav nur erhöhen, wenn Android-WebView was wegnimmt */
    .bottom-nav {
      position: fixed;
      left: 0;
      right: 0;
      bottom: calc(env(safe-area-inset-bottom, 0px) + var(--bottom-inset));
    }

    #page-transition-overlay {
      position: fixed; inset: 0; z-index: 9998; pointer-events: none;
      background: radial-gradient(ellipse at 60% 30%, rgba(111, 67, 138, 0.35) 0%, rgba(36, 23, 46, 0.9) 60%, rgba(24, 26, 32, 0.98) 100%);
      transform: translateX(100%); opacity: 0; will-change: transform, opacity;
    }
    #page-transition-overlay.pt-exit-active { pointer-events: all; animation: pt-exit var(--pt-duration) cubic-bezier(.4, .0, .2, 1) forwards; }
    #page-transition-overlay.pt-enter-active { pointer-events: none; animation: pt-enter var(--pt-duration) cubic-bezier(.4, .0, .2, 1) forwards; }
    @keyframes pt-exit { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0%); opacity: 1; } }
    @keyframes pt-enter { from { transform: translateX(0%); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
    @media (prefers-reduced-motion: reduce) { #page-transition-overlay { display: none !important; } }

/* Source: components/rewards.css */
/* ===== XP Celebration (Konfetti + Flytext) ===== */
    #xp-confetti-lottie{
      position: fixed; inset: 0; width: 100vw; height: 100vh;
      pointer-events: none; z-index: 9997; display: block;
      opacity: 0; transition: opacity .25s ease; will-change: opacity;
    }
    #xp-confetti-lottie.active{ opacity: 1; }
    /* lottie-web rendert <svg> oder <canvas> in den Container – erzwinge Vollfläche */
    #xp-confetti-lottie > svg,
    #xp-confetti-lottie > canvas{
      width: 100% !important; height: 100% !important;
      display: block;
    }

    .xp-flytext{
      position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
      font-family: 'Bebas Neue','Raleway',system-ui,-apple-system,sans-serif;
      font-size: clamp(26px, 6vw, 54px); letter-spacing: .02em; color: var(--uu-color-white, #fff);
      text-shadow: 0 8px 40px rgba(254,58,130,.48), 0 2px 14px rgba(0,0,0,.55);
      z-index: 9998; font-weight: 900; opacity: 0; white-space: nowrap; pointer-events: none;
      animation: xp-pop-in .25s cubic-bezier(.2,1.2,.2,1) forwards, xp-pop-out .9s ease-out .75s forwards;
    }
    .xp-flytext .small{ font-family:'Raleway',sans-serif; font-weight:700; font-size:.42em; opacity:.95; margin-left:.25em; }
    @keyframes xp-pop-in { from{ transform:translate(-50%,-50%) scale(.6); opacity:0; } to{ transform:translate(-50%,-50%) scale(1); opacity:1; } }
    @keyframes xp-pop-out { to{ transform:translate(-50%, calc(-50% - 80px)) scale(.96); opacity:0; } }
    @media (prefers-reduced-motion: reduce) {
      #xp-confetti-lottie{ display:none !important; }
      .xp-flytext{ animation:none; opacity:1; }
    }