:root {
            --main: #ff4757;
            --bg: #f1f2f6;
            --text: #2f3542;
            --kofi: #13C3FF;
            --dark-bg: #2f3542;
			--green-1:#2ea44f;
			--red:#F00;
        }
        body {
            font-family: 'Segoe UI', sans-serif;
            background: var(--bg);
            color: var(--text);
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            width: 100%;
            box-sizing: border-box;
            position: relative;
        }

        /* --- BARRA DE IDIOMAS --- */
        .lang-bar {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            padding: 10px 0;
            margin-bottom: -20px; /* Puxa um pouco pra perto do hero */
            z-index: 100;
            position: relative;
        }
        .lang-flag {
            width: 24px;
            height: 24px;
            cursor: pointer;
            opacity: 0.5;
            transition: all 0.3s ease;
            filter: grayscale(80%);
            border-radius: 50%;
            object-fit: cover;
        }
        .lang-flag:hover, .lang-flag.active {
            opacity: 1;
            filter: grayscale(0%);
            transform: scale(1.1);
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        .hero {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px 0;
        }
        .card {
            background: white;
            padding: 2.5rem;
            border-radius: 12px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 500px;
            text-align: center;
            position: relative;
            z-index: 10;
        }
        h1 {
            color: var(--main);
            margin-bottom: 0.5rem;
            font-size: 2.2rem;
        }
        .subtitle {
            color: #57606f;
            margin-bottom: 20px;
        }
        textarea, input {
            width: 100%;
            padding: 15px;
            margin: 10px 0;
            border: 2px solid #dfe4ea;
            border-radius: 8px;
            font-size: 16px;
            transition: 0.3s;
            box-sizing: border-box;
            font-family: inherit;
        }
        textarea:focus, input:focus {
            border-color: var(--main);
            outline: none;
        }
        button {
            background: var(--main);
            color: white;
            border: none;
            padding: 15px;
            width: 100%;
            border-radius: 8px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: 0.2s;
            margin-top: 10px;
        }
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 71, 87, 0.3);
        }
/*        button i {
            margin-right: 8px;
        }*/
        .hidden { display: none; }
        .link-box {
            background: #dfe4ea;
            padding: 15px;
            word-break: break-all;
            border-radius: 6px;
            font-family: monospace;
            margin: 20px 0;
            border: 1px dashed #a4b0be;
        }
        .info-section {
            margin-top: 50px;
            padding: 40px 0;
            border-top: 1px solid #dfe4ea;
        }
        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-top: 30px;
        }
        .info-item h3 {
            color: var(--main);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .info-item p {
            color: #57606f;
            line-height: 1.6;
            font-size: 0.95rem;
        }
        .seo-text {
            background: white;
            padding: 30px;
            border-radius: 12px;
            margin-top: 40px;
            color: #57606f;
            line-height: 1.7;
            text-align: left;
        }
        .seo-text h2 {
            color: var(--dark-bg);
            margin-top: 0;
        }
        .main-footer {
            text-align: center;
            padding: 30px;
            color: #a4b0be;
            font-size: 0.9rem;
            margin-top: auto;
        }
        .nord-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: #4687FF;
            color: white;
            text-decoration: none;
            padding: 12px 24px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 1rem;
            margin-top: 20px;
            box-shadow: 0 4px 15px rgba(70, 135, 255, 0.35);
            transition: all 0.2s ease;
            border: 2px solid transparent;
        }
        .nord-btn:hover {
            background: #2a6df4;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(70, 135, 255, 0.5);
        }
        .badge-promo {
            background: #ff4757;
            color: white;
            font-size: 0.75rem;
            padding: 2px 8px;
            border-radius: 6px;
            margin-left: 5px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .donation-container {
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 15px;
        }
        .donate-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: white;
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.85rem;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            border: none;
        }
        .donate-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            color: white;
        }
        .btn-paypal { background-color: #0070ba; }
        .btn-stripe { background-color: #635bff; }
        .btn-kofi { background-color: #13C3FF; }
        .btn-paypal:hover { background-color: #005ea6; }
        .btn-stripe:hover { background-color: #544dc9; }
        .btn-kofi:hover { background-color: #0fb2ea; }

        .github-section {
            margin: 60px auto 40px;
            background: #24292e;
            color: white;
            border-radius: 12px;
            padding: 30px;
            display: flex;
            align-items: center;
            gap: 25px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            flex-wrap: wrap;
        }
        .github-icon-box { font-size: 3.5rem; color: white; flex-shrink: 0; }
        .github-content { flex: 1; }
        .github-content h3 { margin: 0 0 10px 0; color: white; font-size: 1.4rem; }
        .github-content p { color: #d1d5da; margin: 0 0 20px 0; font-size: 0.95rem; line-height: 1.5; }
        .gh-btn {
            display: inline-block;
            background: #2ea44f;
            color: white;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 6px;
            font-weight: bold;
            font-size: 0.9rem;
            border: 1px solid rgba(255,255,255,0.1);
            transition: background 0.2s;
        }
        .gh-btn:hover { background: #2c974b; color: white; }

        @media (max-width: 600px) {
            .github-section { text-align: center; justify-content: center; }
            .github-icon-box { margin-bottom: 10px; }
        }

        /* Estado Base (Quando fechado ou não suportado) */
		#toast {
			visibility: hidden;
			min-width: 250px;
			background-color: #2f3542; /* Fundo Escuro */
			color: #fff !important;
			text-align: center;
			border-radius: 50px; /* Pílula */
			padding: 16px 24px;  /* Padding "gordinho" */
			position: fixed;
			z-index: 99999;      /* Fallback para navegadores antigos */
			left: 50%;
			top: 30px;           /* Distância do topo */
			transform: translateX(-50%); /* Centraliza exato */
			font-size: 0.95rem;
			box-shadow: 0 5px 15px rgba(0,0,0,0.3);
			white-space: pre-line; /* Aceita quebras de linha \n */
		}
		
		/* Estado Aberto (POPOVER API) - O Pulo do Gato */
		#toast:popover-open {
			visibility: visible;
			
			/* 1. Reseta os estilos nativos feios do navegador */
			inset: unset;
			border: none;
			margin: 0;
			
			/* 2. Força o posicionamento correto no Top Layer */
			position: fixed;
			top: 30px; 
			left: 50%;
			transform: translateX(-50%);
			
			/* 3. Garante que o visual (cor/padding) se mantenha */
			background-color: #2f3542;
			color: #fff !important;
			padding: 16px 24px;
			border-radius: 50px;
			box-shadow: 0 10px 25px rgba(0,0,0,0.5);
			
			/* 4. Animação de entrada suave */
			animation: toast-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
		}
		
		/* Classes de Cores (Erro e Sucesso) */
		#toast.error, #toast:popover-open.error {
			background-color: #ff4757;color: #ffffff !important;
		}
		
		#toast.success, #toast:popover-open.success {
			background-color: #2ed573;
			color: #fff !important; /* Texto preto para contraste no verde */
			font-weight: 600;
		}
		
		/* Animaçãozinha de "pulo" ao aparecer */
		@keyframes toast-in {
			0% { 
				opacity: 0; 
				transform: translate(-50%, -20px) scale(0.9); 
			}
			100% { 
				opacity: 1; 
				transform: translate(-50%, 0) scale(1); 
			}
		}
		/* Wrapper para input de senha */
		.pass-wrapper {
			position: relative;
			width: 100%;
		}
		/* Ícone do Olho */
		.toggle-icon {
			position: absolute;
			right: 15px;
			top: 50%;
			transform: translateY(-50%); /* Centraliza verticalmente exato */
			color: #a4b0be;
			cursor: pointer;
			font-size: 1.1rem;
			transition: color 0.2s;
			z-index: 5;
		}
		.toggle-icon:hover {
			color: var(--main); /* Fica verde/vermelho ao passar o mouse */
		}/* CSS Document */

		.transparency-wrapper {
			display: grid;
			grid-template-columns: 1fr 1fr; /* Divide em 2 colunas iguais */
			gap: 20px;
			margin-top: 40px;
		}
		
		.transparency-card {
			background: rgba(0, 0, 0, 0.8); 
			
			border: 1px solid rgba(255, 255, 255, 0.1);
			
			border-radius: 12px;
			padding: 25px;
			display: flex;
			gap: 20px;
			align-items: flex-start;
			transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
		}
		
		.transparency-card:hover {
			background: rgba(0, 0, 0, 0.9);
			border-color: var(--main-color);
		}
		
		.transparency-card .icon-box {
			font-size: 2rem;
			color: var(--green-1);
			opacity: 0.8;
			min-width: 40px; /* Garante alinhamento */
		}
		
		.transparency-card h3 {
			margin: 0 0 10px 0;
			font-size: 1.1rem;
			color: var(--green-1);
		}
		
		.transparency-card p {
			font-size: 0.9rem;
			color: #a4b0be;
			margin-bottom: 15px;
			line-height: 1.5;
		}
		
		/* Estilos específicos da Lista de Privacidade */
		.privacy-list {
			list-style: none;
			padding: 0;
			margin: 0;
		}
		
		.privacy-list li {
			font-size: 0.85rem;
			color: #a4b0be;
			margin-bottom: 10px;
			display: flex;
			gap: 10px;
			line-height: 1.4;
		}
		
		.privacy-list li i {
			color: var(--main-color); /* Verde do tema */
			margin-top: 3px;
		}
		
		.gh-btn {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			color: var(--main-color);
			text-decoration: none;
			font-size: 0.9rem;
			font-weight: bold;
		}
		
		.gh-btn:hover { text-decoration: underline; }
		
		/* Mobile: Empilha um em cima do outro */
		@media (max-width: 768px) {
			.transparency-wrapper {
				grid-template-columns: 1fr;
			}
		}
		/* Checkbox Customizado */
		.tracker-option {
			margin: 10px 0;
			display: flex;
			align-items: center;
		}
		
		.checkbox-container {
			display: flex;
			align-items: center;
			cursor: pointer;
			user-select: none;
			gap: 8px;
		}
		
		.checkbox-container input {
			position: absolute;
			opacity: 0;
			cursor: pointer;
			height: 0;
			width: 0;
		}
		
		.checkmark {
			height: 18px;
			width: 18px;
			background-color: rgba(55, 55, 55, 0.1);
			border: 1px solid rgba(55, 55, 55, 0.2);
			border-radius: 4px;
			position: relative;
			transition: all 0.2s;
		}
		
		.checkbox-container:hover .checkmark { background-color: rgba(255, 255, 255, 0.2); }
		.checkbox-container input:checked ~ .checkmark { background-color: var(--main-color); border-color: var(--main-color); }
		
		/* Ícone de check */
		.checkmark:after {
			content: "";
			position: absolute;
			display: none;
			left: 6px;
			top: 2px;
			width: 3px;
			height: 8px;
			border: solid #000;
			border-width: 0 2px 2px 0;
			transform: rotate(45deg);
		}
		.checkbox-container input:checked ~ .checkmark:after { display: block; }
		
		/* Animação do Input de Label */
		#labelContainer {
			transition: all 0.3s ease;
			max-height: 50px; /* Altura suficiente para o input */
		}
		#labelContainer.hidden {
			max-height: 0;
			opacity: 0;
			margin: 0;
		}
		
		#radar-container {
			margin-top: 30px;
			border-top: 1px solid rgba(255,255,255,0.1);
			padding-top: 20px;
		}
		
		#radar-list {
			display: flex;
			flex-direction: column;
			gap: 10px;
			margin-top: 10px;
		}
		
		.radar-item {
			display: flex;
			align-items: center;
			gap: 12px;
			background: rgba(255, 255, 255, 0.05);
			padding: 12px;
			border-radius: 8px;
			border: 1px solid transparent;
			transition: all 0.3s ease;
		}
		
		.radar-icon { font-size: 1.2rem; }
		/* Badge de Item Novo na Lista */
		.radar-new-tag {
			background-color: var(--accent-color, #3498db); /* Azul ou a cor do seu tema */
			color: #fff;
			font-size: 0.65rem;
			font-weight: bold;
			padding: 2px 6px;
			border-radius: 4px;
			margin-left: 8px;
			text-transform: uppercase;
			display: inline-block;
			vertical-align: middle;
			letter-spacing: 0.5px;
			box-shadow: 0 2px 5px rgba(0,0,0,0.2);
		}
		.radar-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 0.85rem;
			line-height: 1.4;
			color: #a4b0be;
		}
		
		/* Cores de Status */
		.status-wait { border-color: rgba(255, 255, 255, 0.1); }
		.status-wait .radar-icon { animation: pulse 2s infinite; }
		
		.status-gone { 
			border-color: #2ed573; 
			background: rgba(46, 213, 115, 0.1);
		}
		
		.status-lock { 
			border-color: #ff4757; 
			background: rgba(255, 71, 87, 0.1);
		}
		
		.status-expired {
			border-color: #747d8c;
			opacity: 0.6;
		}
		
		@keyframes pulse {
			0% { opacity: 0.5; }
			50% { opacity: 1; }
			100% { opacity: 0.5; }
		}
		
		/* --- BOTÃO DO RADAR (HEADER) --- */
		.radar-trigger {
			background: rgba(255, 255, 255, 0.1);
			border: 1px solid rgba(255, 255, 255, 0.9);
			color: #848484;				
			border-radius: 20px;
			cursor: pointer;
			position: relative;
			display: flex;
			align-items: center;
			font-size: 0.9rem;
			transition: all 0.2s;
			padding: 3px 10px;
    		  margin-right: 20px;
		}
		
		.radar-trigger:hover {
			background: rgba(255, 255, 255, 0.2);
			transform: translateY(-1px);
		}
		
		/* Contador Total (Cinza/Branco) */
		.radar-total { font-weight: bold; font-size: 0.85rem; }
		
		/* Badge de Alerta (Vermelho Flutuante) */
		.radar-alert {
			position: absolute;
			top: -5px;
			right: -5px;
			background: #ff4757;
			color: white;
			font-size: 0.7rem;
			font-weight: bold;
			min-width: 18px;
			height: 18px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 2px 5px rgba(0,0,0,0.3);
			border: 2px solid #0a0a0a; /* Cria uma "borda" da cor do fundo */
		}
		.radar-alert.hidden { display: none; }
		
		/* Separador visual */
		.separator {
			width: 1px;
			height: 20px;
			background: rgba(255,255,255,0.2);
			margin: 0 10px;
		}
		
		
		/* --- MODAL DO RADAR --- */
		.radar-dialog {
			/*background: #1e272e;*/
			color: #5b5b5b;
			border: 1px solid rgba(255,255,255,0.1);
			border-radius: 12px;
			width: 90%;
			max-width: 500px;
			padding: 0;
			box-shadow: 0 20px 50px rgba(0,0,0,0.5);
			/* Animação de entrada */
			opacity: 0;
			transform: scale(0.9);
			transition: all 0.3s ease;
		}
		
		.radar-dialog[open] {
			opacity: 1;
			transform: scale(1);
		}
		
		.radar-dialog::backdrop {
			/*background: rgba(0,0,0,0.6);*/
			backdrop-filter: blur(3px);
		}
		
		.radar-header {
			padding: 15px 20px;
			border-bottom: 1px solid rgba(255,255,255,0.05);
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: rgba(0,0,0,0.05);
		}
		
		.radar-header h3 { margin: 0; font-size: 1.1rem; color: var(--main-color); }
		.close-radar { background: none; border: none; color: var(--text); cursor: pointer; font-size: 1.2rem; }
		.close-radar:focus {
			/* Remove a borda azul/preta padrão do navegador */
			outline: none; 
		}
		.close-radar:focus-visible {
			outline: 1px solid rgba(255, 255, 255, 0.5);
			outline-offset: 2px;
			border-radius: 4px;
		}
		.close-radar i, .btn-mini i{margin-right:none;}
		.close-radar:hover { color: var(--red); }
		
		.radar-content {
			padding: 10px;
			max-height: 60vh;
			overflow-y: auto;
		}
		
		.radar-footer {
			padding: 10px 20px;
			/*background: rgba(0,0,0,0.2);
			color: #747d8c;
			*/
			font-size: 0.75rem;
			text-align: center;
		}
		
		/* --- LISTA DE ITENS NO MODAL --- */
		.radar-row {
			display: grid;
			grid-template-columns: 30px 1fr auto; 
			align-items: center;
			padding: 12px;
			border-bottom: 1px solid rgba(55,55,55,0.05);
			gap: 10px;
		}
		.radar-row:last-child { border-bottom: none; }
		
		.radar-info-col {
			display: flex;
			flex-direction: column;
			gap: 2px; /* Espaço entre as linhas */
			overflow: hidden; /* Evita que texto longo quebre o layout */
		}
		.radar-label { 
			font-weight: bold; 
			font-size: 0.95rem; 
			margin-bottom: 2px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.radar-date {
			font-size: 0.7rem; 
			color: #747d8c; /* Cinza discreto */
		}
		.radar-status { 
			font-size: 0.75rem; 
			font-weight: 500;
			/* A cor vem inline do JS */
		}
		
		.radar-actions {
			display: flex;
			gap: 5px;
		}
		
		.btn-mini {
			border: none;
			border-radius: 4px;
			width: 28px;
			height: 28px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: all 0.2s;
			font-size: 0.8rem;
		}
		
		.btn-share-mini { background: none; color: #3498db; }
		.btn-share-mini:hover { background: #3498db; color: #fff; }
		
		.btn-del-mini { background: none; color: #ff4757; }
		.btn-del-mini:hover { background: #ff4757; color: #fff; }
		
		.empty-state { text-align: center; padding: 20px; color: #747d8c; font-style: italic; }