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

     body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
         Oxygen, Ubuntu, Cantarell, sans-serif;
       background: #3b3b3b;
     }

     header {
       background: #1a1a1a;
       color: #fff;
       padding: 1rem 2rem;
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
       position: sticky;
       top: 0;
       z-index: 100;
     }

     .header-content {
       max-width: 1200px;
       margin: 0 auto;
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 2rem;
     }

     .header-left {
       display: flex;
       align-items: center;
       flex-shrink: 0;
     }

     .header-center {
       flex: 1;
       display: flex;
       justify-content: center;
       max-width: 500px;
     }

     .header-right {
       display: flex;
       align-items: center;
       gap: 1.5rem;
       flex-shrink: 0;
     }

     h1 {
       font-size: 1.8rem;
       margin: 0;
     }

     h1 a {
       color: #fff;
       text-decoration: none;
       transition: opacity 0.2s;
     }

     h1 a:hover {
       opacity: 0.8;
     }

     .search-bar {
       position: relative;
       width: 100%;
     }

     .search-bar input {
       padding: 0.6rem 1rem;
       border-radius: 20px;
       border: 0;
       width: 100%;
       font-size: 0.9rem;
       transition: box-shadow 0.2s;
     }

     .search-bar input:focus {
       outline: none;
       box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
     }

     .favorites-link,
     .login-link {
       color: #fff;
       text-decoration: none;
       font-size: 1rem;
       font-weight: 500;
       transition: opacity 0.2s;
       white-space: nowrap;
     }

     .favorites-link:hover,
     .login-link:hover {
       opacity: 0.8;
     }

     .avatar-link {
       display: flex;
       align-items: center;
     }

     main {
       max-width: 1200px;
       margin: 2rem auto;
       padding: 0 2rem;
     }

     .featured {
       margin-bottom: 3rem;
     }

     .featured h2 {
       margin-bottom: 1.5rem;
       color: #ffffff;
       font-size: 1.5rem;
     }

     .album-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
       gap: 2rem;
     }

     .album-card {
       background: #fff;
       border-radius: 8px;
       overflow: hidden;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
       transition: transform 0.2s, box-shadow 0.2s;
       cursor: pointer;
       text-decoration: none;
       color: inherit;
       display: block;
     }

     .album-card:hover {
       transform: translateY(-4px);
       box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
     }

     .album-cover {
       width: 100%;
       height: 250px;
       object-fit: cover;
       background: #ddd;
     }

     .album-info {
       padding: 1rem;
     }

     .album-title {
       font-size: 1.1rem;
       font-weight: 600;
       margin-bottom: 0.3rem;
       color: #333;
     }

     .album-artist {
       color: #666;
       margin-bottom: 0.5rem;
       font-size: 0.9rem;
     }

     .album-price {
       color: #1a1a1a;
       font-weight: 600;
       font-size: 1rem;
     }

     #search-results {
       margin-top: 2rem;
     }

     .album-detail {
       display: grid;
       grid-template-columns: 400px 1fr;
       gap: 3rem;
       background: #696969;
       padding: 2rem;
       border-radius: 12px;
       box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
     }

     .album-cover-large {
       width: 100%;
       border-radius: 8px;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
     }

     .album-content h2 {
       font-size: 2rem;
       margin-bottom: 0.5rem;
       color: #ffffff;
     }

     .artist-link {
       color: #d9d9d9;
       text-decoration: none;
       font-size: 1.2rem;
       display: inline-block;
       margin-bottom: 1rem;
     }

     .artist-link:hover {
       text-decoration: underline;
     }

     .label-link-wrapper {
       color: #888;
       font-size: 0.5em;
       font-weight: normal;
       margin-left: 0.4em;
     }

     .label-link {
       color: #999;
       text-decoration: none;
       transition: color 0.2s;
     }

     .label-link:hover {
       color: #bbb;
     }

     .album-description {
       color: #d9d9d9;
       line-height: 1.6;
       margin: 1.5rem 0;
     }

     .price-section {
       margin: 2rem 0;
     }

     .price {
       font-size: 1.8rem;
       font-weight: 700;
       color: #d9d9d9;
       margin-bottom: 1rem;
     }

     .buy-button {
       background: #1a1a1a;
       color: #fff;
       border: 0;
       padding: 1rem 2rem;
       font-size: 1rem;
       border-radius: 6px;
       cursor: pointer;
       font-weight: 600;
       transition: background 0.2s;
     }

     .buy-button:hover {
       background: #333;
     }

     .tracklist {
       margin-top: 2rem;
     }

     .tracklist h3 {
       margin-bottom: 1rem;
       color: #ffffff;
     }

     .track {
       display: flex;
       justify-content: space-between;
       padding: 0.8rem 1rem;
       border-bottom: 1px solid #eee;
       align-items: center;
       transition: background 0.2s;
       cursor: pointer;
     }

     .track:hover {
       background: #656565;
     }

     .track.playing {
       background: #505050;
     }

     .track-info {
       display: flex;
       align-items: center;
       flex: 1;
     }

     .track-number {
       color: #ffffff;
       margin-right: 1rem;
       min-width: 30px;
     }

     .track-title {
       flex: 1;
       color: #ffffff;
     }

     .track-duration {
       color: #666;
       margin-right: 1rem;
     }

     .play-button {
       background: 0;
       border: 0;
       color: #ffffff;
       cursor: pointer;
       font-size: 1.2rem;
       padding: 0.5rem;
       display: flex;
       align-items: center;
       justify-content: center;
       width: 32px;
       height: 32px;
       border-radius: 50%;
       transition: background 0.2s;
     }

     .audio-player {
       position: fixed;
       bottom: 0;
       left: 0;
       right: 0;
       background: #1a1a1a;
       color: #fff;
       padding: 1rem 2rem;
       box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
       display: none;
       align-items: center;
       gap: 1rem;
       z-index: 1000;
     }

     .audio-player.active {
       display: flex;
     }

     .player-controls {
       display: flex;
       align-items: center;
       gap: 1rem;
     }

     .player-button {
       background: 0;
       border: 0;
       color: #fff;
       cursor: pointer;
       font-size: 1.5rem;
       padding: 0.5rem;
       display: flex;
       align-items: center;
     }

     .player-info {
       flex: 1;
       min-width: 0;
     }

     .player-track-title {
       font-weight: 600;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }

     .player-artist {
       font-size: 0.9rem;
       color: #aaa;
     }

     .player-progress {
       flex: 2;
       display: flex;
       align-items: center;
       gap: 1rem;
     }

     .progress-bar {
       flex: 1;
       height: 4px;
       background: #444;
       border-radius: 2px;
       cursor: pointer;
       position: relative;
     }

     .progress-fill {
       height: 100%;
       background: #fff;
       border-radius: 2px;
       width: 0;
       transition: width 0.1s;
     }

     .time-display {
       font-size: 0.85rem;
       color: #aaa;
       min-width: 80px;
       text-align: center;
     }

     .artist-header {
       background: #2a2a2a;
       padding: 2rem;
       border-radius: 12px;
       box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
       margin-bottom: 2rem;
       display: flex;
       gap: 2rem;
       align-items: center;
     }

     .artist-image {
       width: 150px;
       height: 150px;
       border-radius: 50%;
       object-fit: cover;
       border: 3px solid #3a3a3a;
     }

     .artist-info h2 {
       font-size: 2.5rem;
       margin-bottom: 0.5rem;
       color: #fff;
     }

     .artist-bio {
       color: #aaa;
       line-height: 1.6;
     }

     .discography {
       margin-bottom: 3rem;
     }

     .discography h3 {
       margin-bottom: 1.5rem;
       color: #ffffff;
       font-size: 1.5rem;
     }

     a.tag {
       color: #1a1a1a;
       text-decoration: none;
       font-size: 1rem;
     }

     .heart {
       font-size: 30px;
       line-height: 1;
       cursor: pointer;
       user-select: none;
       transition: color 0.3s ease;
       background: transparent;
       border: none;
       padding: 0;
       margin: 0;
       width: 30px;
       height: 30px;
       min-width: 30px;
       min-height: 30px;
       max-width: 30px;
       max-height: 30px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
       flex-grow: 0;
       vertical-align: middle;
       contain: layout;
       overflow: visible;
     }

     .heart.heart-loading {
       animation: pulse 0.6s ease-in-out infinite;
       cursor: wait;
     }

     @keyframes pulse {

       0%,
       100% {
         transform: scale(1);
         opacity: 1;
       }

       50% {
         transform: scale(.8);
         opacity: 0.7;
       }
     }

     .black {
       color: black;
     }

     .red {
       color: red;
     }

     .toast {
       position: fixed;
       top: 20px;
       right: 20px;
       background-color: #dc3545;
       color: white;
       padding: 16px 24px;
       border-radius: 8px;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
       display: flex;
       align-items: center;
       gap: 12px;
       animation: slideIn 0.3s ease-out;
       z-index: 1000;
       max-width: 350px;
     }

     @keyframes slideIn {
       from {
         transform: translateX(400px);
         opacity: 0;
       }

       to {
         transform: translateX(0);
         opacity: 1;
       }
     }

     .toast-icon {
       font-size: 20px;
     }

     .toast-close {
       margin-left: auto;
       background: none;
       border: none;
       color: white;
       font-size: 20px;
       cursor: pointer;
       padding: 0;
       line-height: 1;
     }

     .toast-close:hover {
       opacity: 0.8;
     }

     .avatar-image {
       width: 46px;
       height: 46px;
       border-radius: 50%;
       object-fit: cover;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
       border: 2px solid white;
       transition: transform 0.3s ease;
     }

     .avatar-image:hover {
       transform: scale(1.05);
     }

     /* Modal styles */
     .modal {
       display: none;
       position: fixed;
       z-index: 2000;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.7);
       justify-content: center;
       align-items: center;
     }

     .modal-content {
       background: #696969;
       padding: 2rem;
       border-radius: 12px;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
       max-width: 500px;
       width: 90%;
       text-align: center;
       animation: modalSlideIn 0.3s ease-out;
     }

     @keyframes modalSlideIn {
       from {
         transform: translateY(-50px);
         opacity: 0;
       }

       to {
         transform: translateY(0);
         opacity: 1;
       }
     }

     .modal-content h2 {
       color: #ffffff;
       font-size: 1.8rem;
       margin-bottom: 1rem;
     }

     .modal-content p {
       color: #d9d9d9;
       line-height: 1.6;
       margin-bottom: 1rem;
       font-size: 1.1rem;
     }

     .modal-close-btn {
       background: #1a1a1a;
       color: #fff;
       border: none;
       padding: 0.75rem 2rem;
       font-size: 1rem;
       border-radius: 6px;
       cursor: pointer;
       font-weight: 600;
       transition: background 0.2s;
       margin-top: 1rem;
     }

     .modal-close-btn:hover {
       background: #333;
     }

     /* Settings styles */
     .settings {
       margin-bottom: 3rem;
     }

     .settings h2 {
       margin-bottom: 1.5rem;
       color: #ffffff;
       font-size: 1.5rem;
     }

     .settings-container {
       background: #696969;
       padding: 2rem;
       border-radius: 12px;
       box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
       max-width: 800px;
     }

     .setting-item {
       margin-bottom: 2rem;
       padding-bottom: 2rem;
       border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     }

     .setting-item:last-of-type {
       border-bottom: none;
       margin-bottom: 0;
       padding-bottom: 0;
     }

     .setting-label {
       display: flex;
       align-items: center;
       cursor: pointer;
       font-size: 1.1rem;
       color: #ffffff;
       font-weight: 500;
     }

     .setting-label input[type="checkbox"] {
       width: 20px;
       height: 20px;
       margin-right: 12px;
       cursor: pointer;
     }

     .setting-description {
       color: #d9d9d9;
       font-size: 0.9rem;
       margin-top: 0.5rem;
       margin-left: 32px;
       line-height: 1.5;
     }

     .setting-actions {
       margin-top: 2rem;
       display: flex;
       gap: 1rem;
     }

     .save-button {
       background: #1a1a1a;
       color: #fff;
       border: none;
       padding: 0.75rem 2rem;
       font-size: 1rem;
       border-radius: 6px;
       cursor: pointer;
       font-weight: 600;
       transition: background 0.2s;
     }

     .save-button:hover {
       background: #333;
     }

     .settings-divider {
       border: none;
       border-top: 1px solid rgba(255, 255, 255, 0.1);
       margin: 2rem 0;
     }

     .upgrade-section {
       margin-top: 0;
     }

     .upgrade-section h3 {
       color: #ffffff;
       font-size: 1.2rem;
       margin-bottom: 1rem;
     }

     .upgrade-features {
       color: #d9d9d9;
       font-size: 0.9rem;
       line-height: 1.8;
       margin: 1rem 0;
       padding-left: 1.5rem;
     }

     .upgrade-features li {
       margin-bottom: 0.5rem;
     }

     .logout-section {
       margin-top: 0;
     }

     .logout-section h3 {
       color: #ffffff;
       font-size: 1.2rem;
       margin-bottom: 1rem;
     }

     .settings-link {
       color: #fff;
       text-decoration: none;
       font-size: 1rem;
       font-weight: 500;
       transition: opacity 0.2s;
       white-space: nowrap;
     }

     .settings-link:hover {
       opacity: 0.8;
     }

     @media (max-width: 768px) {
       .album-detail {
         grid-template-columns: 1fr;
         gap: 1.5rem;
       }

       .audio-player {
         flex-wrap: wrap;
       }

       .player-progress {
         width: 100%;
         order: -1;
       }

       .header-content {
         gap: 1rem;
       }

       .header-center {
         max-width: 300px;
       }

       .search-bar input {
         width: 100%;
         font-size: 0.85rem;
       }

       h1 {
         font-size: 1.5rem;
       }

       .favorites-link {
         font-size: 0.9rem;
       }

       .avatar-image {
         width: 36px;
         height: 36px;
       }
     }

     @media (max-width: 480px) {
       header {
         padding: 0.75rem 1rem;
       }

       .header-content {
         flex-wrap: wrap;
         gap: 0.75rem;
       }

       .header-left {
         order: 1;
       }

       .header-right {
         order: 2;
         margin-left: auto;
         gap: 1rem;
       }

       .header-center {
         order: 3;
         width: 100%;
         max-width: 100%;
       }

       h1 {
         font-size: 1.3rem;
       }

       .favorites-link {
         font-size: 0.85rem;
       }

       .avatar-image {
         width: 32px;
         height: 32px;
       }
     }

     /* Pagination */
     .pagination {
       margin: 3rem 0;
     }

     .pagination-container {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 2rem;
     }

     .pagination-btn {
       padding: 0.75rem 1.5rem;
       background: #2a2a2a;
       color: #fff;
       text-decoration: none;
       border-radius: 4px;
       transition: background 0.2s;
       font-weight: 500;
     }

     .pagination-btn:hover:not(.pagination-disabled) {
       background: #3a3a3a;
     }

     .pagination-disabled {
       opacity: 0.5;
       cursor: not-allowed;
     }

     .pagination-info {
       color: #fff;
       font-weight: 500;
       font-size: 1rem;
     }

     /* Footer */
     footer {
       background: #1a1a1a;
       color: #fff;
       text-align: center;
       padding: 2rem;
       margin-top: 4rem;
     }

     footer p {
       margin: 0;
       font-size: 1rem;
       font-weight: 500;
     }

     footer .heart-emoji {
       color: #ff0000;
     }

     footer .footer-links {
       margin-top: 1rem;
       font-size: 0.9rem;
       color: #888;
     }

     footer .footer-links span {
       margin: 0 0.25rem;
       color: #666;
     }

     footer .footer-links a {
       color: #fff;
       text-decoration: none;
       margin: 0 0.25rem;
       font-weight: 500;
       transition: opacity 0.2s;
     }

     footer .footer-links a:hover {
       opacity: 0.7;
     }

     footer .version-info {
       font-size: 0.75rem;
       color: #666;
       margin-top: 0.5rem;
       font-weight: 400;
     }

     /* Privacy Page */
     .privacy-container {
       max-width: 800px;
       margin: 2rem auto;
       padding: 0 2rem;
       color: #fff;
     }

     .privacy-container h1 {
       font-size: 2.5rem;
       margin-bottom: 1rem;
       color: #fff;
     }

     .privacy-container h2 {
       font-size: 1.8rem;
       margin-top: 2rem;
       margin-bottom: 1rem;
       color: #fff;
     }

     .privacy-container h3 {
       font-size: 1.4rem;
       margin-top: 1.5rem;
       margin-bottom: 0.75rem;
       color: #fff;
     }

     .privacy-container p {
       line-height: 1.6;
       margin-bottom: 1rem;
       color: #ccc;
     }

     .privacy-container strong {
       color: #fff;
     }

     .privacy-container ul {
       margin-left: 2rem;
       margin-bottom: 1rem;
       color: #ccc;
     }

     .privacy-container li {
       margin-bottom: 0.5rem;
       line-height: 1.6;
     }

     .last-updated {
       color: #888;
       font-size: 0.9rem;
       margin-bottom: 2rem;
     }

     @media (max-width: 768px) {
       .privacy-container {
         padding: 0 1rem;
       }

       .privacy-container h1 {
         font-size: 2rem;
       }

       .privacy-container h2 {
         font-size: 1.5rem;
       }

       .privacy-container h3 {
         font-size: 1.2rem;
       }
     }

     /* Documentation Page */
     .docs-container {
       max-width: 800px;
       margin: 2rem auto;
       padding: 0 2rem;
       color: #fff;
     }

     .docs-container h1 {
       font-size: 2.5rem;
       margin-bottom: 1rem;
       color: #fff;
     }

     .docs-container h2 {
       font-size: 1.8rem;
       margin-top: 2rem;
       margin-bottom: 1rem;
       color: #fff;
     }

     .docs-container h3 {
       font-size: 1.4rem;
       margin-top: 1.5rem;
       margin-bottom: 0.75rem;
       color: #fff;
     }

     .docs-container p {
       line-height: 1.6;
       margin-bottom: 1rem;
       color: #ccc;
     }

     .docs-container a {
       color: #6ca0dc;
       text-decoration: none;
     }

     .docs-container a:hover {
       color: #8bb8e8;
       text-decoration: underline;
     }

     .docs-container strong {
       color: #fff;
     }

     .docs-container ul,
     .docs-container ol {
       margin-left: 2rem;
       margin-bottom: 1rem;
       color: #ccc;
     }

     .docs-container li {
       margin-bottom: 0.5rem;
       line-height: 1.6;
     }

     .docs-container img {
       max-width: 100%;
       height: auto;
       margin: 1.5rem 0;
       border-radius: 4px;
     }

     .docs-container code {
       background: #2a2a2a;
       padding: 0.2rem 0.4rem;
       border-radius: 3px;
       font-family: 'Courier New', monospace;
       font-size: 0.9em;
       color: #e8e8e8;
     }

     .docs-container pre {
       background: #2a2a2a;
       padding: 1rem;
       border-radius: 5px;
       overflow-x: auto;
       margin-bottom: 1rem;
     }

     .docs-container pre code {
       background: none;
       padding: 0;
       font-size: 0.9rem;
       line-height: 1.5;
     }

     .docs-container blockquote {
       border-left: 4px solid #6ca0dc;
       margin: 1.5rem 0;
       padding-left: 1rem;
       color: #aaa;
       font-style: italic;
     }

     .docs-container table {
       width: 100%;
       border-collapse: collapse;
       margin-bottom: 1rem;
     }

     .docs-container th,
     .docs-container td {
       padding: 0.75rem;
       text-align: left;
       border-bottom: 1px solid #444;
     }

     .docs-container th {
       background: #2a2a2a;
       font-weight: 600;
       color: #fff;
     }

     .docs-container hr {
       border: none;
       border-top: 1px solid #444;
       margin: 2rem 0;
     }

     @media (max-width: 768px) {
       .docs-container {
         padding: 0 1rem;
       }

       .docs-container h1 {
         font-size: 2rem;
       }

       .docs-container h2 {
         font-size: 1.5rem;
       }

       .docs-container h3 {
         font-size: 1.2rem;
       }
     }

     /* AI Recommendations Page */
     .ai-container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 2rem;
       color: #ffffff;
     }

     .ai-header {
       text-align: center;
       margin-bottom: 2rem;
     }

     .ai-header h2 {
       font-size: 2rem;
       margin-bottom: 0.5rem;
     }

     .ai-header p {
       color: #aaaaaa;
       font-size: 1rem;
     }

     .favorites-list {
       background: #2a2a2a;
       border-radius: 8px;
       padding: 1.5rem;
       margin-bottom: 2rem;
     }

     .favorites-list h3 {
       margin-top: 0;
       margin-bottom: 1rem;
       font-size: 1.3rem;
     }

     .band-list {
       display: flex;
       flex-wrap: wrap;
       gap: 0.5rem;
     }

     .band-tag {
       background: #3a3a3a;
       padding: 0.5rem 1rem;
       border-radius: 20px;
       font-size: 0.9rem;
     }

     .recommendations-section {
       background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
       border-radius: 12px;
       padding: 1.25rem 2rem;
       margin-bottom: 1.5rem;
       border: 1px solid #3a3a3a;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
     }

     .recommendations-section h3 {
       margin-top: 0;
       margin-bottom: 1rem;
       font-size: 1.1rem;
       color: #4a9eff;
       text-transform: uppercase;
       letter-spacing: 1px;
       font-weight: 600;
     }

     .recommendation-content {
       line-height: 1.6;
       font-size: 1rem;
       text-align: center;
       padding: 0.5rem 0;
     }

     .recommendation-content .artist-link {
       display: inline-block;
       color: #4a9eff;
       text-decoration: none;
       font-weight: bold;
       font-size: 1.8rem;
       padding: 0.5rem 1.5rem;
       border-radius: 8px;
       transition: all 0.3s ease;
       background: rgba(74, 158, 255, 0.1);
       border: 2px solid rgba(74, 158, 255, 0.3);
     }

     .recommendation-content .artist-link:hover {
       background: rgba(74, 158, 255, 0.2);
       border-color: #4a9eff;
       transform: translateY(-2px);
       box-shadow: 0 4px 12px rgba(74, 158, 255, 0.3);
     }

     .reasoning-section {
       background: #2a2a2a;
       border-radius: 12px;
       padding: 1.5rem;
       border: 1px solid #3a3a3a;
     }

     .reasoning-section h3 {
       margin-top: 0;
       margin-bottom: 1rem;
       font-size: 1rem;
       color: #ffa64a;
       text-transform: uppercase;
       letter-spacing: 1px;
       font-weight: 600;
     }

     .reasoning-content {
       line-height: 1.7;
       font-size: 0.95rem;
       color: #cccccc;
     }

     .no-favorites {
       text-align: center;
       padding: 3rem;
       color: #aaaaaa;
     }

     .no-favorites p {
       font-size: 1.2rem;
       margin-bottom: 1rem;
     }

     .no-favorites a {
       color: #4a9eff;
       text-decoration: none;
       font-weight: bold;
     }

     .no-favorites a:hover {
       text-decoration: underline;
     }

     .error-message {
       background: #ff4a4a;
       color: #ffffff;
       padding: 1rem;
       border-radius: 8px;
       margin-bottom: 2rem;
     }

     .loading {
       text-align: center;
       padding: 2rem;
       color: #aaaaaa;
       font-style: italic;
     }

     .spinner {
       border: 4px solid #3a3a3a;
       border-top: 4px solid #4a9eff;
       border-radius: 50%;
       width: 40px;
       height: 40px;
       animation: spin 1s linear infinite;
       margin: 1rem auto;
     }

     @keyframes spin {
       0% {
         transform: rotate(0deg);
       }

       100% {
         transform: rotate(360deg);
       }
     }

     /* Debug Page */
     body:has(.container) {
       min-height: 100vh;
       padding: 2rem;
       color: #ffffff;
     }

     .container {
       background: #696969;
       padding: 2rem;
       border-radius: 12px;
       box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
       max-width: 800px;
       margin: 2rem auto;
     }

     .container h1 {
       font-size: 2rem;
       margin-bottom: 1.5rem;
       color: #ffffff;
     }

     .container a {
       color: #ffffff;
       text-decoration: underline;
     }

     .container a:hover {
       color: #d9d9d9;
     }

     .info-item {
       background: rgba(255, 255, 255, 0.1);
       padding: 1rem;
       margin-bottom: 1rem;
       border-radius: 8px;
     }

     .info-label {
       color: #d9d9d9;
       font-size: 0.875rem;
       margin-bottom: 0.5rem;
       text-transform: uppercase;
       letter-spacing: 0.05em;
     }

     .info-value {
       color: #ffffff;
       font-family: 'Courier New', monospace;
       font-size: 1rem;
       word-break: break-all;
     }

     .status {
       display: inline-block;
       padding: 0.25rem 0.75rem;
       border-radius: 4px;
       font-size: 0.875rem;
       font-weight: 600;
     }

     .status.logged-in {
       background: #4caf50;
       color: white;
     }

     .status.logged-out {
       background: #f44336;
       color: white;
     }

     .empty {
       color: #999;
       font-style: italic;
     }

     .container p {
       margin-top: 2rem;
     }