:root {
  --bg-color: #F8FAFC;
  --panel-bg-color: #FFFFFF;
  --input-bg-color: #F9FAFB;
  --border-color: #E2E8F0;
  --text-color: #1E293B;
  --text-input: #1E293B;
  --text-color-reverse: #FFFFFF;
  --text-color-secondary: #64748B;
  --primary-color: #6366F1;
  --primary-color-hover: #4F46E5;
  --shadow-color: rgba(99, 102, 241, 0.01);
 --success-color: #59BF86;
 --error-color: #D6334F;
 --warning-color: #F5B451;
 --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
 --base-spacing: 10px;
 --border-radius: 12px;
 --primary-color-a10: rgba(156, 144, 236, 0.1);
 --primary-color-a20: rgba(156, 144, 236, 0.2);
 --chart-color-1: #3B82F6;
 --chart-color-2: #10B981;
 --regions-bg-color: #F0F4F8;
 --regions-shadow: rgba(0, 0, 0, 0.05);
 --chart-grid-color: rgba(0, 0, 0, 0.1);
 --chart-label-color: #333333;
 }
 body.dark-mode {
 --bg-color: #111319;
 --panel-bg-color: #15171E;
 --input-bg-color: #111319;
 --border-color: #454854;
 --text-color: #F9FAFB;
 --text-input: #FFFFFF;
 --text-color-reverse: #FFFFFF;
 --text-color-secondary: #9CA3AF;
 --shadow-color: rgba(0, 0, 0, 0.2);
 --chart-color-1: #60A5FA;
 --chart-color-2: #34D399;
 --regions-bg-color: #1A1F24;
 --regions-shadow: rgba(0, 0, 0, 0.4);
 --chart-grid-color: rgba(255, 255, 255, 0.1);
 --chart-label-color: #DDDDDD;
 }
 @keyframes spin {
 to {
 transform: rotate(360deg);
 }
 }
 @keyframes pulse {
 0% {
 box-shadow: 0 0 0 0 var(--success-color);
 }
 70% {
 box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
 }
 100% {
 box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
 }
 }
 @keyframes fadeIn {
 from {
 opacity: 0;
 transform: translateY(10px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
 }
 .info-loading-spinner {
 width: 40px;
 height: 40px;
 border: 5px solid var(--primary-color-a10);
 border-top-color: var(--primary-color);
 border-radius: 50%;
 animation: spin 1s linear infinite;
 margin: 40px auto;
 }
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 cursor: none !important;
 }
 html {
 scroll-behavior: smooth;
 }
 body {
 font-family: var(--font-family);
 background-color: var(--bg-color);
 color: var(--text-color);
 padding: calc(var(--base-spacing) * 2);
 transition: background-color 0.5s ease, color 0.5s ease;
 -webkit-font-smoothing: antialiased;
 padding-top: 5px;
 zoom: 80%;
 align-items: flex-start;
 }
 .toolbar {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 75px;
 background-color: var(--panel-bg-color);
 padding: 0 20px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 z-index: 1500;
 border-bottom: 1px solid var(--border-color);
 box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
 transition: background-color 0.5s ease, border-color 0.5s ease;
 }
 .toolbar-icon {
 color: var(--text-color);
 font-size: 28px;
 }
 .drawer-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.6);
 backdrop-filter: blur(4px);
 z-index: 1900;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.3s ease, visibility 0.3s ease;
 }
 .drawer-overlay.active {
 opacity: 1;
 visibility: visible;
 }
 .drawer-menu {
 position: fixed;
 top: 0;
 left: -320px;
 width: 300px;
 height: 100%;
 background-color: var(--panel-bg-color);
 z-index: 2000;
 box-shadow: 5px 0 15px rgba(0,0,0,0.2);
 transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 display: flex;
 flex-direction: column;
 }
 .drawer-menu.open {
 left: 0;
 }
 .drawer-header {
 padding: 20px;
 display: flex;
 align-items: center;
 gap: 15px;
 border-bottom: 1px solid var(--border-color);
 }
 .drawer-header .app-icon {
 width: 40px;
 height: 40px;
 }
 .drawer-header .app-title {
 font-size: 15px;
 font-weight: 600;
 }
 .drawer-content {
 padding: 15px 0;
 flex-grow: 1;
 overflow-y: auto;
 }
 .drawer-section-title {
 font-size: 10px;
 font-weight: 700;
 color: var(--text-color-secondary);
 text-transform: uppercase;
 padding: 10px 20px;
 margin-top: 10px;
 }
 .drawer-item {
 display: flex;
 align-items: center;
 gap: 20px;
 padding: 15px 25px;
 color: var(--text-color);
 text-decoration: none;
 font-weight: 600;
 font-size: 13px;
 letter-spacing: 1.2px;
 transition: background-color 0.3s ease;
 }
 .drawer-item:hover {
 background-color: var(--primary-color-a10);
 }
 .drawer-item .material-icons {
 color: var(--text-color-secondary);
 }
 .drawer-item.active {
 background-color: var(--primary-color-a10);
 border-left: 4px solid var(--primary-color);
 padding-left: 21px;
 font-weight: 700;
 color: var(--primary-color);
 }
 .drawer-item.active .material-icons {
 color: var(--primary-color);
 }
 .loading-screen {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: var(--bg-color);
 z-index: 4000;
 transition: opacity 1s ease;
 }
 .spinner-login {
 width: 50px;
 height: 50px;
 border: 8px solid var(--primary-color-a10);
 border-top-color: var(--primary-color);
 border-radius: 50%;
 animation: spin 1s linear infinite;
 }
 .page-container {
 width: 100%;
 max-width: 550px;
 margin: calc(var(--base-spacing) * 1.5) auto;
 animation: fadeIn 0.5s ease-out;
 }
 .page-container.hidden {
 display: none;
 }
 .main-container {
 width: 100%;
 max-width: 550px;
 margin: calc(var(--base-spacing) * 1.5) auto;
 display: grid;
 grid-template-columns: 1fr;
 gap: calc(var(--base-spacing) * 4);
 transition: opacity 1s ease, transform 1s ease;
 position: relative;
 }
 .main-container.hidden {
 opacity: 0;
 transform: translateY(20px);
 pointer-events: none;
 display: none;
 }
 #planilhas-page-content,
 #theme-page-content,
 #historico-page-content,
 #readme-page-content,
 #my-account-page-content,
 #info-player-page-content {
 display: flex;
 flex-direction: column;
 gap: calc(var(--base-spacing) * 4);
 }
 .panel,
 .widget,
 .theme-section,
 .history-container,
 .account-card-new,
 .data-analysis-panel,
 .regions-panel,
 .info-card {
 background-color: var(--panel-bg-color);
 border: 1px solid var(--border-color);
 border-radius: var(--border-radius);
 transition: background-color 0.5s ease, border-color 0.5s ease;
 box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
 }
 .data-analysis-panel,
 .regions-panel {
 padding: calc(var(--base-spacing) * 3);
 border-radius: var(--border-radius);
 box-shadow: 0 8px 16px -4px var(--shadow-color), 0 4px 8px -2px var(--shadow-color);
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 .data-analysis-panel:hover,
 .regions-panel:hover {
 transform: translateY(-5px);
 box-shadow: 0 12px 24px -6px var(--shadow-color), 0 6px 12px -3px var(--shadow-color);
 }
 .data-analysis-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: 30px;
 }
 @media(min-width: 768px) {
 .data-analysis-grid {
 grid-template-columns: 1fr 1fr;
 }
 }
 .chart-container {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 20px;
 min-height: 250px;
 background-color: transparent;
 padding: 15px;
 margin-bottom: 20px;
 }
 #comparison-chart, #regions-chart {
 max-width: 100%;
 max-height: 300px;
 }
 .stats-container {
 display: flex;
 flex-direction: column;
 justify-content: center;
 }
 .page-header {
 display: flex;
 align-items: center;
 gap: 15px;
 font-size: 20px;
 font-weight: 700;
 padding-bottom: 20px;
 border-bottom: 1px solid var(--border-color);
 margin-bottom: 20px;
 }
 .page-header .material-icons {
 font-size: 32px;
 color: var(--primary-color);
 }
 .page-header .status-indicator {
 margin-left: auto;
 }
 .regions-header {
 display: flex;
 align-items: center;
 gap: 15px;
 font-size: 20px;
 font-weight: 700;
 padding-bottom: 20px;
 border-bottom: 1px solid var(--border-color);
 margin-bottom: 20px;
 }
 .regions-header .material-icons {
 font-size: 32px;
 color: var(--primary-color);
 }
 .theme-section {
 padding: calc(var(--base-spacing) * 3);
 }
 .theme-section-title {
 font-size: 16px;
 font-weight: 700;
 margin-bottom: 20px;
 }
 .theme-option-group {
 display: flex;
 gap: 15px;
 margin-bottom: 15px;
 }
 .theme-select-btn {
 flex: 1;
 padding: 15px;
 border: 2px solid var(--border-color);
 background-color: var(--bg-color);
 border-radius: var(--border-radius);
 font-weight: 600;
 color: var(--text-color);
 font-size: 14px;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 transition: all 0.3s ease;
 }
 .theme-select-btn.active {
 border: 2px solid var(--primary-color);
 background-color: var(--panel-bg-color);
 box-shadow: 0 0 0 3px var(--primary-color-a20);
 }
 .color-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
 gap: 15px;
 }
 .color-swatch {
 width: 30px;
 height: 30px;
 border-radius: 50%;
 border: none;
 transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 .color-swatch:hover {
 transform: scale(1.1);
 }
 .color-swatch.active {
 border-color: var(--primary-color);
 box-shadow: 0 0 0 3px var(--primary-color);
 transform: scale(1.1);
 }
 .account-container {
 display: flex;
 justify-content: center;
 align-items: flex-start;
 padding-top: 20px;
 }
 .account-card-new {
 width: 100%;
 max-width: 550px;
 overflow: hidden;
 }
 .account-card-header {
 background-color: var(--bg-color);
 padding: 25px;
 display: flex;
 align-items: center;
 gap: 20px;
 }
 .account-pfp {
 width: 80px;
 height: 80px;
 border-radius: 50%;
 }
 .account-user-info .account-name {
 font-size: 18px;
 font-weight: 800;
 color: var(--text-color);
 }
 .account-user-info .account-email {
 font-size: 12px;
 color: var(--text-color-secondary);
 }
 .account-card-body {
 padding: 25px;
 }
 .account-info-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 20px;
 }
 .info-item {
 background-color: var(--bg-color);
 padding: 15px;
 border-radius: var(--border-radius);
 border: 1px solid var(--border-color);
 }
 .info-item.full-width {
 grid-column: 1 / -1;
 }
 .info-label {
 display: block;
 font-size: 12px;
 font-weight: 700;
 color: var(--text-color-secondary);
 margin-bottom: 8px;
 text-transform: uppercase;
 }
 .info-value {
 font-size: 10px;
 font-weight: 600;
 color: var(--text-color);
 }
 .info-value .mod { color: var(--success-color); font-weight: 700; }
 .info-value .comum { color: var(--primary-color); font-weight: 700; }
 .account-card-footer {
 padding: 20px 25px;
 background-color: var(--bg-color);
 border-top: 1px solid var(--border-color);
 }
 .logout-btn-new {
 width: 100%;
 padding: 15px;
 font-size: 14px;
 font-weight: 700;
 color: #fff;
 background-color: var(--error-color);
 border: none;
 border-radius: var(--border-radius);
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 transition: background-color 0.3s ease;
 }
 .logout-btn-new:hover {
 filter: brightness(90%);
 }
 @media (min-width: 992px) {
 .main-container {
 grid-template-columns: 2fr 1fr;
 }
 }
 .main-content,
 .sidebar {
 display: flex;
 flex-direction: column;
 gap: calc(var(--base-spacing) * 4);
 }
 .panel {
 padding: calc(var(--base-spacing) * 5) calc(var(--base-spacing) * 3.5);
 }
 .panel-header {
 text-align: center;
 margin-bottom: calc(var(--base-spacing) * 4);
 }
 .panel-header h1 {
 font-size: 16px;
 font-weight: 1000;
 }
 .panel-header h2 {
 font-size: 16px;
 font-weight: 1000;
 }
 .panel-header p {
 font-size: 11px;
 color: var(--text-color-secondary);
 margin-top: calc(var(--base-spacing) * 2);
 font-weight: 600;
 }
 .info-box {
 background-color: var(--panel-bg-color);
 border: 1.5px dashed var(--border-color);
 border-radius: var(--border-radius);
 padding: calc(var(--base-spacing) * 2);
 margin-bottom: calc(var(--base-spacing) * 6);
 font-size: 12px;
 color: var(--text-color-secondary);
 font-weight: 600;
 text-align: center;
 line-height: 1.6;
 }
 .info-box strong {
 color: var(--text-color);
 font-weight: 800;
 }
 .request-counter-container {
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 1px;
 color: var(--text-color);
 display: inline-flex;
 align-items: center;
 gap: 4px;
 }
 .request-counter-container .highlight {
 color: #273A4F;
 background-color: #D3E3F5;
 padding: 5px 14px;
 margin: 5px;
 border-radius: 999px;
 font-size: 10px;
 font-weight: 800;
 text-transform: uppercase;
 }
 .form-group label {
 display: block;
 font-size: 14px;
 font-weight: 700;
 margin-bottom: var(--base-spacing);
 }
 .input-wrapper {
 position: relative;
 }
 .input-field {
 width: 100%;
 padding: calc(var(--base-spacing) * 1.7);
 font-size: 14px;
 margin-top: var(--base-spacing);
 margin-bottom: var(--base-spacing);
 border: 2px solid var(--border-color);
 border-color: var(--primary-color);
 border-radius: var(--border-radius);
 background-color: var(--input-bg-color) !important;
 color: var(--text-input);
 font-weight: 800;
 letter-spacing: 1px;
 box-shadow: 0 0 0 3px var(--primary-color-a10);
 }
 .input-field:focus {
 outline: none;
 border-color: var(--primary-color);
 box-shadow: 0 0 0 3px var(--primary-color-a20);
 }
 .input-field.valid {
 border-color: var(--success-color);
 box-shadow: 0 0 0 3px rgba(82, 167, 113, 0.2);
 }
 .input-field.invalid {
 border-color: var(--error-color);
 box-shadow: 0 0 0 3px rgba(219, 58, 97, 0.2);
 }
 .input-field:active {
 transition: none !important;
 }
 body.dark-mode .input-field {
 background-color: var(--input-bg-color);
 color: var(--text-input);
 }
 .input-field:-webkit-autofill,
 .input-field:-webkit-autofill:hover,
 .input-field:-webkit-autofill:focus {
 -webkit-text-fill-color: var(--text-input) !important;
 transition: background-color 5000s ease-in-out 0s;
 -webkit-box-shadow: 0 0 0 3px var(--primary-color-a20),
 0 0 0 1000px var(--input-bg-color) inset !important;
 }
 .input-field.valid:-webkit-autofill,
 .input-field.valid:-webkit-autofill:hover,
 .input-field.valid:-webkit-autofill:focus {
 -webkit-box-shadow: 0 0 0 3px rgba(82, 167, 113, 0.2),
 0 0 0 1000px var(--input-bg-color) inset !important;
 }
 .input-field.invalid:-webkit-autofill,
 .input-field.invalid:-webkit-autofill:hover,
 .input-field.invalid:-webkit-autofill:focus {
 -webkit-box-shadow: 0 0 0 3px rgba(219, 58, 97, 0.2),
 0 0 0 1000px var(--input-bg-color) inset !important;
 }
 #validation-icon {
 position: absolute;
 right: 12px;
 top: 50%;
 transform: translateY(-50%);
 font-size: 20px;
 opacity: 0;
 transition: opacity 1s ease;
 }
 #validation-icon.visible {
 opacity: 1;
 }
 #validation-icon.valid {
 color: var(--success-color);
 }
 #validation-icon.invalid {
 color: var(--error-color);
 }
 .progress-bar-container {
 height: var(--base-spacing);
 background-color: var(--bg-color);
 border-radius: 10px;
 margin-top: calc(var(--base-spacing) * 2);
 overflow: hidden;
 display: none;
 }
 .progress-bar-container.visible {
 display: block;
 }
 .progress-bar {
 width: 0%;
 height: 100%;
 background-color: var(--primary-color);
 border-radius: 10px;
 transition: width 1s ease;
 }
 .submit-btn {
 width: 100%;
 padding: calc(var(--base-spacing) * 1.5);
 font-size: 14px;
 font-weight: 800;
 color: #ffffff;
 background-color: var(--primary-color);
 border: 2px solid var(--primary-color);
 border-radius: 70px;
 transition: all 0.5s;
 display: inline-flex;
 justify-content: center;
 align-items: center;
 gap: var(--base-spacing);
 margin-top: calc(var(--base-spacing) * 3);
 text-decoration: none;
 letter-spacing: 0.5px;
 }
 .submit-btn:hover:not(:disabled) {
 background-color: var(--primary-color-hover);
 transform: translateY(-2px);
 box-shadow: 0 4px 10px var(--primary-color-a20);
 }
 .submit-btn:disabled {
 background-color: var(--primary-color);
 border-color: var(--primary-color);
 opacity: 0.6;
 }
 .submit-btn.btn-danger {
 background-color: var(--error-color);
 border-color: var(--error-color);
 }
 .submit-btn.btn-danger:hover:not(:disabled) {
 background-color: #d02d2d;
 border-color: #d02d2d;
 }
 .btn-outline {
 background-color: transparent;
 color: var(--primary-color);
 border: 2px solid var(--border-color);
 }
 .btn-outline:hover {
 background-color: var(--primary-color-a10);
 border-color: var(--primary-color-a20);
 color: var(--primary-color);
 }
 .widget-title {
 font-size: 18px;
 font-weight: 700;
 padding: calc(var(--base-spacing) * 2.5);
 border-bottom: 1px solid var(--border-color);
 display: flex;
 align-items: center;
 gap: var(--base-spacing);
 }
 .widget-content {
 padding: calc(var(--base-spacing) * 2.5);
 }
 .status-indicator {
 display: flex;
 align-items: center;
 gap: var(--base-spacing);
 font-size: 14px;
 font-weight: 600;
 }
 #status-dot {
 width: 10px;
 height: 10px;
 background-color: var(--warning-color);
 border-radius: 50%;
 transition: background-color 1s;
 }
 #status-dot.online {
 background-color: var(--success-color);
 animation: pulse 2s infinite;
 }
 .stats-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 gap: calc(var(--base-spacing) * 2);
 }
 .stat-card {
 background-color: var(--bg-color);
 border: 1px solid var(--border-color);
 border-radius: var(--border-radius);
 padding: calc(var(--base-spacing) * 2.5);
 text-align: center;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 .stat-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 4px 8px var(--shadow-color);
 }
 .stat-value {
 font-family: 'Inter', sans-serif;
 font-size: 20px;
 font-weight: 900;
 color: var(--primary-color);
 margin-bottom: 8px;
 font-feature-settings: 'tnum';
 letter-spacing: 0.3px;
 }
 .stat-label {
 font-size: 10px;
 font-weight: 700;
 color: var(--text-color-secondary);
 text-transform: uppercase;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 5px;
 }
 .regions-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
 gap: calc(var(--base-spacing) * 2);
 }
 .history-controls {
 padding: 15px 20px;
 border-bottom: 1px solid var(--border-color);
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 15px;
 flex-wrap: wrap;
 }
 .search-wrapper {
 position: relative;
 flex-grow: 1;
 }
 .search-wrapper .material-icons {
 position: absolute;
 left: 15px;
 top: 50%;
 transform: translateY(-50%);
 color: var(--text-color-secondary);
 }
 #history-search-input {
 width: 100%;
 padding: 16px 16px 16px 50px;
 background-color: var(--input-bg-color) !important;
 border-radius: var(--border-radius);
 border: 2px solid var(--border-color);
 color: var(--text-color);
 font-weight: 600;
 font-size: 12px;
 letter-spacing: 1px;
 transition: all 0.3s ease;
 }
 #history-search-input:focus {
 outline: none;
 border-color: var(--primary-color);
 box-shadow: 0 0 0 3px var(--primary-color-a20);
 }
 .delete-all-btn {
 padding: 12px 15px;
 background-color: var(--error-color);
 color: white;
 border: none;
 border-radius: 50px;
 font-weight: 600;
 display: flex;
 align-items: center;
 gap: 8px;
 transition: background-color 0.3s ease;
 }
 .delete-all-btn:hover {
 filter: brightness(90%);
 }
 .history-list {
 list-style: none;
 padding: 10px;
 overflow-y: auto;
 }
 .history-item {
 background: var(--bg-color);
 border-radius: var(--border-radius);
 margin-bottom: 10px;
 margin-top: 10px;
 border-bottom: 1px solid var(--border-color);
 transition: all 0.3s ease;
 display: flex;
 flex-direction: column;
 }
 .history-item:last-child {
 margin-bottom: 0;
 }
 .history-item.deleting {
 opacity: 0;
 transform: scale(0.95);
 }
 .history-item-main {
 padding: 15px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
 gap: 10px;
 }
 .history-item-info {
 flex-grow: 1;
 }
 .history-item-info .nickname {
 font-weight: 700;
 font-size: 14px;
 margin-bottom: 12px;
 color: var(--text-color);
 }
 .history-item-info .uid, .history-item-info .timestamp {
 font-size: 10px;
 font-weight: 600;
 color: var(--text-color-secondary);
 }
 .history-item-info .likes-sent {
 font-weight: 700;
 color: var(--success-color);
 margin-left: 10px;
 }
 .history-item-actions {
 display: flex;
 align-items: center;
 gap: var(--base-spacing);
 padding: 10px;
 background: var(--panel-bg-color);
 }
 .history-item-actions .action-btn {
 flex: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 8px;
 border-radius: var(--border-radius);
 background: transparent;
 border: 1px solid transparent;
 color: var(--text-color-secondary);
 font-weight: 600;
 font-size: 12px;
 transition: all 0.3s ease;
 }
 .history-item-actions .action-btn .material-icons {
 font-size: 18px;
 }
 .history-item-actions .action-btn:hover {
 color: var(--primary-color);
 background-color: var(--primary-color-a10);
 }
 .history-item-actions .delete-btn:hover {
 color: var(--error-color);
 background-color: rgba(239, 68, 68, 0.1);
 }
 .list-placeholder {
 font-size: 14px;
 color: var(--text-color-secondary);
 text-align: center;
 padding: 40px 20px;
 }
 .guide-list {
 list-style: none;
 display: flex;
 flex-direction: column;
 }
 .faq details {
 background-color: var(--bg-color);
 border: 1px solid var(--border-color);
 border-radius: var(--border-radius);
 margin-bottom: 10px;
 padding: 15px 20px;
 transition: background-color 0.3s ease;
 }
 .faq details:last-child {
 margin-bottom: 0;
 }
 .faq details[open] {
 background-color: var(--panel-bg-color);
 }
 .faq details summary {
 font-weight: 700;
 display: flex;
 justify-content: space-between;
 align-items: center;
 list-style: none;
 position: relative;
 }
 .faq details summary::-webkit-details-marker {
 display: none;
 }
 .faq h3 {
 font-weight: 700;
 font-size: 14px;
 padding-right: 25px;
 }
 .faq summary::after {
 content: 'add';
 font-family: 'Material Icons';
 position: absolute;
 right: 0;
 font-size: 20px;
 color: var(--primary-color);
 transition: transform 0.2s ease-in-out;
 }
 .faq details[open] summary::after {
 content: 'remove';
 transform: rotate(180deg);
 }
 .faq .faq-answer {
 color: var(--text-color-secondary);
 margin-top: calc(var(--base-spacing) * 2);
 line-height: 1.6;
 font-size: 12px;
 font-weight: 500;
 padding-top: 15px;
 border-top: 1px solid var(--border-color);
 }
 .help-panel {
    background-color: var(--panel-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}
.help-panel .widget-title {
    color: var(--text-color);
    font-weight: 800;
    border-bottom: none;
    padding-bottom: 10px;
}
.help-panel .guide-list {
    gap: calc(var(--base-spacing) * 2.5);
}
.help-panel .guide-list li {
    background-color: var(--bg-color);
    padding: calc(var(--base-spacing) * 2);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
    box-shadow: 0 2px 4px var(--shadow-color);
    gap: calc(var(--base-spacing) * 2.5);
    align-items: center;
    display: flex;
}
.help-panel .guide-list .step-number {
    background-color: var(--primary-color);
    color: #fff;
    font-size: 16px;
    width: 36px;
    height: 36px;
    font-weight: 900;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.help-panel .guide-list p {
    margin-top: 0;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--text-color);
}
.help-panel .guide-list p span {
    color: var(--primary-color);
    font-weight: 700;
}
 .dev-panel-text,
 .support-text {
 font-size: 12px;
 color: var(--text-color-secondary);
 margin-bottom: var(--base-spacing);
 font-weight: 500;
 line-height: 1.6;
 }
 .support-btn {
 background-color: #62BB73;
 border-color: #62BB73;
 color: #fff !important;
 }
 .support-btn:hover:not(:disabled) {
 background-color: #5CB06C;
 }
 .footer {
 text-align: center;
 margin-top: calc(var(--base-spacing) * 5);
 padding: calc(var(--base-spacing) * 4) calc(var(--base-spacing) * 3);
 font-size: 14px;
 color: var(--text-color-secondary);
 border-top: 1px solid var(--border-color);
 }
 .footer.hidden {
 display: none;
 }
 .footer-content {
 max-width: 500px;
 margin: 0 auto;
 }
 .footer-links {
 list-style: none;
 display: flex;
 justify-content: center;
 gap: calc(var(--base-spacing) * 3);
 margin-top: calc(var(--base-spacing) * 2);
 }
 .footer-links a {
 color: var(--text-color-secondary);
 text-decoration: none;
 font-weight: 500;
 }
 .footer-links a:hover {
 color: var(--primary-color);
 text-decoration: underline;
 }
 .modal-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(17, 24, 39, 0.6);
 backdrop-filter: blur(5px);
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 2000;
 opacity: 0;
 visibility: hidden;
 transition: opacity .3s ease-out, visibility .3s ease-out;
 }
 .modal-overlay.active {
 opacity: 1;
 visibility: visible;
 }
 .modal-content {
 font-family: 'Inter', sans-serif;
 background: var(--panel-bg-color);
 border-radius: var(--border-radius);
 border: none;
 width: 90%;
 max-width: 440px;
 transform: scale(.95);
 transition: transform .5s ease, background-color 0.5s ease;
 overflow: hidden;
 box-shadow: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color);
 }
 .modal-overlay.active .modal-content {
 transform: scale(1);
 }
 .modal-header {
 padding: calc(var(--base-spacing) * 2.5);
 display: flex;
 align-items: center;
 gap: calc(var(--base-spacing) * 2);
 border-bottom: 1px solid var(--border-color);
 background: var(--panel-bg-color);
 }
 .modal-header .modal-title {
 font-size: 17px;
 font-weight: 800;
 color: var(--text-color);
 margin: 3px 0px;
 width: 100%;
 text-align: center;
 }
 .modal-header .modal-icon {
 font-size: 24px;
 color: var(--primary-color);
 }
 .modal-body {
 padding: calc(var(--base-spacing) * 3);
 font-size: 14px;
 font-weight: 400;
 color: var(--text-color-secondary);
 line-height: 1.6;
 }
 .modal-success-data {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: calc(var(--base-spacing) * 1.5);
 margin-bottom: calc(var(--base-spacing) * 2.5);
 }
 .modal-success-data .data-item {
 display: flex;
 flex-direction: column;
 background: var(--bg-color);
 border: none;
 border-radius: var(--border-radius);
 border: 1.2px solid var(--border-color);
 padding: calc(var(--base-spacing) * 1.5);
 }
 .modal-success-data .data-item .data-label {
 display: block;
 font-size: 10px;
 font-weight: 700;
 color: var(--text-color-secondary);
 margin-bottom: 4px;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 }
 .modal-success-data .data-item .data-value {
 font-weight: 600;
 font-size: 14px;
 color: var(--text-color);
 }
 .modal-success-data .data-item .data-value.success {
 color: var(--success-color);
 font-weight: 700;
 }
 .modal-success-data .data-item .data-value.error {
 color: var(--error-color);
 font-weight: 700;
 }
 .modal-success-data .data-item.full-width {
 grid-column: 1 / 3;
 }
 .modal-footer {
 padding: calc(var(--base-spacing) * 2);
 background: var(--bg-color);
 border-top: 1px solid var(--border-color);
 text-align: right;
 display: flex;
 justify-content: space-between;
 gap: calc(var(--base-spacing) * 1.5);
 }
 .modal-footer.confirmation {
 justify-content: flex-end;
 }
 .modal-footer.confirmation .submit-btn {
 width: auto;
 padding: calc(var(--base-spacing) * 1.2) calc(var(--base-spacing) * 2.5);
 margin-top: 0;
 }
 #modal-close-btn, #share-modal-close-btn {
 width: 100%;
 padding: calc(var(--base-spacing) * 1.8);
 font-size: 14px;
 font-weight: 800;
 color: #ffffff;
 background-color: var(--primary-color);
 border: 2px solid var(--primary-color);
 border-radius: 70px;
 transition: all 0.5s;
 display: inline-flex;
 justify-content: center;
 align-items: center;
 gap: var(--base-spacing);
 text-decoration: none;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 }
 .user-profile-icon {
 width: 35px;
 height: 35px;
 border-radius: 50px;
 margin: 0px 5px;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
 }
 .user-profile-icon img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 }
 .error-dialog-buttons {
 display: flex;
 flex-direction: column;
 gap: 15px;
 width: 100%;
 }
 .error-dialog-buttons button,
 .error-dialog-buttons a {
 flex-grow: 1;
 }
 #ok-close-btn,
 #modal-confirm-btn,
 #modal-cancel-btn {
 padding: 18px 0px;
 color: #ffffff;
 margin: 5px 3px;
 width: 100%;
 }
 #ok-close-btn, #modal-confirm-btn {
 background-color: var(--primary-color);
 border-color: var(--primary-color);
 }
 #modal-cancel-btn {
 background-color: transparent;
 border: 2px solid var(--border-color);
 color: var(--text-color);
 }
 #modal-cancel-btn:hover {
 background-color: var(--primary-color-a10);
 }
 .nav-btn {
 background: var(--bg-color);
 border: 1px solid var(--border-color);
 border-radius: 50%;
 width: 32px;
 height: 32px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--text-color);
 transition: all 0.3s ease;
 cursor: none;
 box-shadow: 0 2px 4px var(--shadow-color);
 }
 .nav-btn:hover {
 background: var(--primary-color);
 color: #fff;
 border-color: var(--primary-color);
 transform: translateY(-2px);
 }
 .nav-btn:active {
 transform: scale(0.95);
 box-shadow: none;
 }
 .nav-btn:disabled {
 opacity: 0.5;
 cursor: not-allowed;
 background: var(--bg-color);
 color: var(--text-color-secondary);
 border-color: var(--border-color);
 transform: none;
 }
 .info-card {
 overflow: hidden;
 margin-bottom: calc(var(--base-spacing) * 1.3);
 }
 .info-card-header {
 padding: 15px 20px;
 border-bottom: 1px solid var(--border-color);
 font-size: 16px;
 font-weight: 700;
 display: flex;
 align-items: center;
 gap: 10px;
 color: var(--text-color);
 }
 .info-card-body {
 padding: 20px;
 display: flex;
 flex-direction: column;
 gap: 15px;
 }
 .info-grid {
 display: grid;
 /*grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 gap: 15px;*/
 grid-template-columns: 1fr;
 }
 .info-item-display {
 font-family: 'Inter', sans-serif;
 margin-bottom: 12px;
 background-color: var(--bg-color);
 padding: 15px;
 border-radius: calc(var(--border-radius) / 2);
 border-left: 3px solid var(--primary-color);
 }
 .info-item-display .info-label {
 font-size: 11px;
 text-transform: uppercase;
 font-weight: 700;
 color: var(--text-color-secondary);
 margin-bottom: 6px;
 }
 .info-item-display .info-value img.player-avatar {
width: auto;
height: 64px;
border-radius: 0px;
border: 0px solid var(--border-color);
}
 .info-item-display .info-value {
 font-size: 14px;
 font-weight: 600;
 color: var(--text-color);
 word-wrap: break-word;
 display: flex;
 align-items: center;
 gap: 10px;
 }
 .info-results-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: calc(var(--base-spacing) * 3);
 }
 @keyframes fadeInLeft {
 from {
 opacity: 0;
 transform: translateX(-30px);
 }
 to {
 opacity: 1;
 transform: translateX(0);
 }
 }
 @keyframes fadeInRight {
 from {
 opacity: 0;
 transform: translateX(30px);
 }
 to {
 opacity: 1;
 transform: translateX(0);
 }
 }
.login-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
}
.login-dialog-overlay.active {
    opacity: 1;
    visibility: visible;
}
.login-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 500px;
    animation: fadeIn 0.8s ease-out;
}
.login-main-icon {
    font-size: 70px;
    color: var(--primary-color);
    margin-bottom: 20px;
}
.login-main-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-color);
    text-align: center;
    line-height: 1.3;
    margin-bottom: 10px;
}
.login-main-subtitle {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color-secondary);
    text-align: center;
    margin-bottom: 35px;
    max-width: 320px;
}
.login-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 350px;
}
.login-feature-list li {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-color);
}
.login-feature-list .material-icons {
    color: var(--success-color);
    margin-right: 12px;
}
.google-login-btn {
    width: 100%;
    max-width: 380px;
    height: 53px;
    border: none;
    border-radius: 53px;
    background-color: var(--panel-bg-color);
    padding: 0 16px;
    color: var(--text-color);
    border: 1.5px solid var(--border-color);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
    margin-bottom: 25px;
}
.google-login-btn:hover {
    transform: translateY(-3px);
}
.google-login-btn .google-icon-svg {
    margin-right: 12px;
}
.login-info-box {
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 380px;
}
.login-info-box p {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 1.6;
    color: var(--text-color-secondary);
}
.login-info-box p span {
    color: var(--primary-color);
    font-weight: 600;
}
.login-terms-text {
    font-size: 12px;
    margin-top: 50px;
    color: var(--text-color-secondary);
    text-align: center;
    max-width: 350px;
}
.login-terms-text a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    text-decoration: underline;
}
 .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
 }
 .switch input {
  opacity: 0;
  width: 0;
  height: 0;
 }
 .slider {
  position: absolute;
  cursor: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-color);
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
 }
 .slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
 }
 input:checked + .slider {
  background-color: var(--primary-color);
 }
 input:focus + .slider {
  box-shadow: 0 0 1px var(--primary-color);
 }
 input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
 }
 .auto-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-color);
  margin: 12px 0px;
  border-top: 1px solid var(--border-color);
 }