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

        body {
          font-family: 'Times New Roman', 'Courier New', monospace;
          background-color: #000;
          color: #efefef;
          line-height: 1.6;
          min-height: 100vh;
          position: relative;
          overflow-x: hidden;
        }

        .mini-map-container {
          margin-top: 15px;
          border: 2px solid #576879;
          border-radius: 8px;
          overflow: hidden;
          background: #111;
        }

        /* Corrigir problemas de tiles do Leaflet no tema escuro */
        .leaflet-container {
          background: #0a0a0a !important;
        }

        .leaflet-control-container .leaflet-control {
          background: rgba(0, 0, 0, 0.8) !important;
          color: #fff !important;
        }

        .leaflet-control-zoom a {
          background: #333 !important;
          color: #fff !important;
          border: 1px solid #576879 !important;
        }

        .leaflet-control-zoom a:hover {
          background: #555 !important;
        }

        .map-style-selector {
          background: #333;
          color: #fff;
          border: 1px solid #576879;
          border-radius: 4px;
          padding: 5px 10px;
          font-size: 0.8em;
        }

        .mini-map {
          height: 200px;
          width: 100%;
          background: #0a0a0a;
        }

        .map-controls {
          padding: 10px;
          background: #1a1a1a;
          border-top: 1px solid #576879;
          text-align: center;
        }

        .user-location-marker {
          background: #ff4757;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          border: 2px solid white;
          box-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }

        .location-btn {
          background-color: #00f000;
          color: #000;
          border: 1px solid #00d000;
          padding: 10px 20px;
          border-radius: 5px;
          font-size: 0.9em;
          font-weight: bold;
          cursor: pointer;
          transition: all 0.3s ease;
          margin: 10px 0;
          width: 100%;
          font-family: 'Times New Roman', serif;
        }

        .location-btn:hover {
          background-color: #00d000;
          transform: scale(1.02);
        }

        .location-btn:disabled {
          background-color: #666;
          color: #ccc;
          cursor: not-allowed;
          transform: none;
        }

        #map-container {
        margin-top: 15px;
        min-height: 200px;
        }

        #location-details {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #576879;
        }

        #map-container a {
        transition: all 0.3s ease;
        margin: 5px;
        }

        #map-container a:hover {
        background-color: #00f000 !important;
        color: #000 !important;
        transform: scale(1.02);
        }

        /* Responsividade para móveis */
        @media (max-width: 768px) {
          #map-container a {
          display: block;
          margin: 8px 0;
          text-align: center;
          }
        }

        body::before {
          content: '';
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background:
          radial-gradient(circle at 20% 80%, rgba(87, 104, 121, 0.1) 0%, transparent 50%),
          radial-gradient(circle at 80% 20%, rgba(87, 104, 121, 0.1) 0%, transparent 50%);
          pointer-events: none;
          z-index: -1;
        }

        .container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 20px;
        }

        .header {
          background-color: #111;
          border: 1px solid #576879;
          border-radius: 8px;
          padding: 30px;
          text-align: center;
          margin-bottom: 30px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }

        .header h1 {
          font-size: 2.5em;
          margin-bottom: 10px;
          color: #fff;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
          font-weight: bold;
          letter-spacing: 1px;
        }

        .header p {
          font-size: 1.1em;
          color: #ccc;
          margin-bottom: 20px;
          font-style: italic;
        }

        .warning {
          background-color: #ff6600;
          color: #fff;
          padding: 15px 25px;
          border-radius: 5px;
          font-weight: bold;
          display: inline-block;
          animation: pulse 2s infinite;
          border: 1px solid #ff8800;
        }

        @keyframes pulse {
          0% { transform: scale(1); }
          50% { transform: scale(1.05); }
          100% { transform: scale(1); }
        }

        .grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
          gap: 20px;
          margin-bottom: 30px;
        }

        .card {
          background-color: #111;
          border: 1px solid #576879;
          border-radius: 8px;
          padding: 25px;
          transition: all 0.3s ease;
          margin-bottom: 20px;
        }

        .card:hover {
          background-color: #1a1a1a;
          transform: translateY(-2px);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
        }

        .card h3 {
          font-size: 1.3em;
          margin-bottom: 15px;
          color: #fff;
          display: flex;
          align-items: center;
          gap: 10px;
          font-weight: bold;
          border-bottom: 2px solid #576879;
          padding-bottom: 8px;
        }

        .card-content {
          font-family: 'Courier New', monospace;
          font-size: 1.0em;
          line-height: 1.8;
          color: #ccc;
        }

        .info-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;
          padding: 5px 0;
          border-bottom: 1px solid #333;
        }

        .info-label {
          font-weight: bold;
          color: #ccccff;
          min-width: 140px;
        }

        .info-value {
          color: #efefef;
          word-break: break-all;
          text-align: right;
          max-width: 200px;
        }

        .loading {
          text-align: center;
          color: #ccc;
          font-style: italic;
          animation: blink 1.5s infinite;
        }

        @keyframes blink {
          0%, 50% { opacity: 1; }
          51%, 100% { opacity: 0.5; }
        }

        .critical {
          background-color: #273849;
          border: 2px solid #ff6600;
        }

        .critical h3 {
          color: #ff6600;
        }

        .critical .info-label {
          color: #ff8800;
        }

        .critical .info-value {
          color: #ffaa55;
        }

        .warning-level {
          background-color: #273849;
          border: 2px solid #feca57;
        }

        .warning-level h3 {
          color: #feca57;
        }

        .success {
          background-color: #273849;
          border: 2px solid #00f000;
        }

        .success h3 {
          color: #00f000;
        }

        .refresh-btn {
          background-color: #00f000;
          color: #000;
          border: 1px solid #00d000;
          padding: 15px 30px;
          border-radius: 5px;
          font-size: 1.1em;
          font-weight: bold;
          cursor: pointer;
          transition: all 0.3s ease;
          margin: 20px auto;
          display: block;
          font-family: 'Times New Roman', serif;
        }

        .refresh-btn:hover {
          background-color: #00d000;
          transform: scale(1.05);
        }

        .privacy-score {
          font-size: 3em;
          font-weight: bold;
          text-align: center;
          margin: 20px 0;
          color: #fff;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        }

        .fingerprint-hash {
          background-color: #0a0a0a;
          color: #00f000;
          padding: 15px;
          border-radius: 5px;
          font-family: 'Courier New', monospace;
          word-break: break-all;
          margin-top: 15px;
          border: 1px solid #333;
        }

        .risk-indicator {
          padding: 10px;
          border-radius: 5px;
          margin: 10px 0;
          font-weight: bold;
          text-align: center;
          font-family: 'Times New Roman', serif;
        }

        .risk-high {
          background-color: #ff6600;
          color: #fff;
          border: 1px solid #ff8800;
        }
        .risk-medium {
          background-color: #f39c12;
          color: #fff;
          border: 1px solid #e67e22;
        }
        .risk-low {
          background-color: #00f000;
          color: #000;
          border: 1px solid #00d000;
        }

        .canvas-container {
          margin: 15px 0;
        }

        canvas {
          border: 2px solid #ddd;
          border-radius: 10px;
          max-width: 100%;
        }

        .full-width {
          grid-column: 1 / -1;
        }

        .connection-list {
          max-height: 200px;
          overflow-y: auto;
          background: #0a0a0a;
          padding: 10px;
          border-radius: 8px;
          margin-top: 10px;
          border: 1px solid #576879;
        }

        .connection-item {
          padding: 5px 10px;
          margin: 3px 0;
          background: #1a1a1a;
          border-radius: 5px;
          font-size: 0.85em;
          color: #ccc;
          border: 1px solid #333;
        }

        @media (max-width: 768px) {
          .grid {
            grid-template-columns: 1fr;
          }

          .header h1 {
            font-size: 2em;
          }

          .container {
            padding: 15px;
          }

          .card {
            padding: 20px;
          }

          .info-item {
            flex-direction: column;
            gap: 5px;
          }

          .info-label {
            min-width: unset;
          }

          .info-value {
            text-align: left;
            max-width: unset;
          }
        }

        /* Barra de progresso */
        .progress-container {
          width: 100%;
          background-color: #1a1a1a;
          border-radius: 10px;
          overflow: hidden;
          margin: 10px 0;
          border: 1px solid #576879;
        }

        .progress-bar {
          height: 20px;
          background: linear-gradient(90deg, #00f000, #00d000);
          width: 0%;
          transition: width 0.3s ease;
          position: relative;
          border-radius: 10px;
        }

        .progress-bar.critical {
          background: linear-gradient(90deg, #ff6600, #ff8800);
        }

        .progress-bar.warning {
          background: linear-gradient(90deg, #feca57, #f39c12);
        }

        .progress-text {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #fff;
          font-weight: bold;
          font-size: 0.8em;
          text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
          z-index: 1;
        }

        /* Progresso circular melhorado */
        .circular-progress {
          width: 80px;  /* Aumentar de 60px para 80px */
          height: 80px; /* Aumentar de 60px para 80px */
          border-radius: 50%;
          background: conic-gradient(#00f000 0deg, #1a1a1a 0deg);
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 15px auto; /* Aumentar margem */
          position: relative;
          box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Adicionar sombra */
        }

        .circular-progress::before {
          content: '';
          width: 60px;  /* Aumentar de 45px para 60px */
          height: 60px; /* Aumentar de 45px para 60px */
          border-radius: 50%;
          background: #111;
          position: absolute;
        }

        .circular-progress-text {
          color: #fff;
          font-weight: bold;
          font-size: 0.8em; /* Aumentar de 0.7em para 0.8em */
          z-index: 1;
        }

        /* Loading pulsante removido */
        .loading {
          display: none;
        }

        .precise-location-marker {
          background: #00f000;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          border: 3px solid white;
          box-shadow: 0 3px 6px rgba(0,0,0,0.6);
          animation: pulse-precise 2s infinite;
        }

        @keyframes pulse-precise {
          0% { transform: scale(1); box-shadow: 0 3px 6px rgba(0,0,0,0.6); }
          50% { transform: scale(1.1); box-shadow: 0 4px 8px rgba(0,240,0,0.4); }
          100% { transform: scale(1); box-shadow: 0 3px 6px rgba(0,0,0,0.6); }
        }

        ::-webkit-scrollbar {
          width: 8px;
        }

        ::-webkit-scrollbar-track {
          background-color: #1a1a1a;
        }

        ::-webkit-scrollbar-thumb {
          background-color: #576879;
          border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
          background-color: #ccccff;
        }