:root {
        --bg-1: #060b1d;
        --bg-2: #0f1c3a;
        --panel: rgba(11, 23, 49, 0.72);
        --line: rgba(103, 205, 255, 0.22);
        --text: #d9ecff;
        --muted: #8eb0d8;
        --accent: #73cfe8;
        --urgent: #ff5a75;
        --ok: #7af76b;
        --bonus: #4dff76;
        --nav-h: 76px;
      }

      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      html,
      body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        color-scheme: dark;
      }

      body {
        font-family: "Rajdhani", sans-serif;
        color: var(--text);
        background:
          radial-gradient(
            circle at 20% 15%,
            rgba(67, 217, 255, 0.12),
            transparent 35%
          ),
          radial-gradient(
            circle at 80% 90%,
            rgba(122, 247, 107, 0.05),
            transparent 30%
          ),
          radial-gradient(
            circle at 50% 50%,
            rgba(94, 62, 255, 0.07),
            transparent 60%
          ),
          linear-gradient(135deg, var(--bg-1), var(--bg-2));
      }

      .app-loader {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: grid;
        place-items: center;
        background:
          radial-gradient(circle at 50% 32%, rgba(103, 205, 255, 0.16), transparent 28%),
          radial-gradient(circle at 50% 68%, rgba(121, 92, 255, 0.12), transparent 32%),
          linear-gradient(145deg, rgba(4, 8, 21, 0.985), rgba(7, 16, 34, 0.995));
        transition: opacity 220ms ease, visibility 220ms ease;
      }

      .app-loader.done {
        opacity: 0;
        visibility: hidden;
      }

      .app-loader-label {
        position: absolute;
        top: calc(50% - 118px);
        left: 50%;
        transform: translateX(-50%);
        font-family: "Orbitron", sans-serif;
        font-size: 0.82rem;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #dceeff;
        text-shadow: 0 0 14px rgba(103, 205, 255, 0.38);
      }

      .app-loader-core {
        position: relative;
        width: 152px;
        height: 152px;
        display: grid;
        place-items: center;
      }

      .app-loader-ring {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background:
          conic-gradient(
            from 0deg,
            rgba(103, 205, 255, 0.06) 0deg,
            rgba(103, 205, 255, 0.94) 120deg,
            rgba(156, 109, 255, 0.9) 240deg,
            rgba(103, 205, 255, 0.06) 360deg
          );
        box-shadow:
          0 0 26px rgba(103, 205, 255, 0.14),
          0 0 40px rgba(156, 109, 255, 0.12);
        animation: loaderSpin 1.35s linear infinite;
      }

      .app-loader-ring::after {
        content: "";
        position: absolute;
        inset: 10px;
        border-radius: 50%;
        background:
          radial-gradient(circle at 50% 34%, rgba(103, 205, 255, 0.08), transparent 46%),
          linear-gradient(145deg, rgba(6, 12, 26, 0.97), rgba(7, 16, 34, 0.985));
        border: 1px solid rgba(103, 205, 255, 0.14);
      }

      .app-loader-image {
        position: relative;
        z-index: 1;
        width: 112px;
        height: 112px;
        object-fit: cover;
        border-radius: 50%;
        border: 2px solid rgba(103, 205, 255, 0.3);
        background: rgba(6, 14, 31, 0.96);
        box-shadow:
          0 0 22px rgba(103, 205, 255, 0.18),
          inset 0 0 16px rgba(103, 205, 255, 0.08);
      }

      @keyframes loaderSpin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      select,
      option,
      optgroup {
        background-color: #0b1730;
        color: #d9ecff;
      }

      .app {
        height: 100dvh;
        display: grid;
        grid-template-rows: 1fr var(--nav-h);
        overflow: hidden;
        position: relative;
      }

      .app.system-gate-open .views,
      .app.system-gate-open .nav {
        pointer-events: none;
        filter: blur(6px);
      }

      .views {
        height: 100%;
        overflow: hidden;
        padding: 14px 14px 8px;
        position: relative;
      }

      .view {
        position: absolute;
        inset: 0;
        opacity: 0;
        transform: translateY(8px) scale(0.995);
        pointer-events: none;
        transition:
          opacity 180ms ease,
          transform 220ms ease;
      }

      .view.active {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
      }

      .view > .card,
      .view > .quests-shell {
        height: 100%;
      }

      #home {
        overflow-y: auto;
        scrollbar-width: none;
      }

      #home::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      #home > .card {
        height: auto;
        min-height: 100%;
      }

      #quests {
        overflow-y: auto;
        scrollbar-width: none;
      }

      #quests::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      #quests > .quests-shell {
        height: auto;
        min-height: 100%;
      }

      #analytics {
        overflow-y: auto;
        scrollbar-width: none;
      }

      #analytics::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      #analytics > .card {
        height: auto;
        min-height: 100%;
      }

      #achievements {
        overflow-y: auto;
        scrollbar-width: none;
      }

      #achievements::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      #achievements > .card {
        height: auto;
        min-height: 100%;
      }

      .title {
        font-family: "Orbitron", sans-serif;
        font-size: 1rem;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: var(--accent);
      }

      .card {
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--panel);
        box-shadow:
          inset 0 0 14px rgba(67, 217, 255, 0.04),
          0 0 12px rgba(67, 217, 255, 0.06);
        padding: 14px;
        min-height: 0;
        overflow: hidden;
      }

      @media (max-width: 640px) {
        :root {
          --nav-h: 68px;
        }

        .views {
          padding: 10px 10px 6px;
        }

        .title {
          font-size: 0.9rem;
          letter-spacing: 0.65px;
        }

        .card {
          border-radius: 12px;
          padding: 10px;
        }
      }