{% extends 'layouts/base.html' %}
{% load static i18n %}

{% block extrahead %}
<link rel="stylesheet" href="{% static 'css/dashboard-custom.css' %}">
<style>
  @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap');

  .dashboard-bg {
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #121220 100%);
    color: #f8f9fa;
    padding: 50px 0;
    min-height: 100vh;
  }

  .dashboard-bg > .container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  .dashboard-card {
    background: linear-gradient(to bottom right, #1a1a2e, #121220);
    border: 2px solid #6f42c1;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5), 0 0 25px rgba(13, 202, 240, 0.3);
    transition: transform 0.2s ease-in-out, box-shadow 0.3s;
    color: #f8f9fa;
  }

  .dashboard-card:hover {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(111, 66, 193, 0.7), 0 0 30px rgba(13, 202, 240, 0.5);
  }

  .dashboard-card .card-title {
    color: #f8f9fa;
    text-shadow: 1px 1px 2px #000;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
  }

  .dashboard-card .card-text {
    color: #ccc !important;
  }

  .dashboard-card .card-text strong {
    color: #00d9ff;
    text-shadow: 1px 1px 2px #000;
  }

  .user-header-card {
    border-radius: 20px;
    padding: 0;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
    border: 3px solid;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
  }

  .user-header-content {
    padding: 2.5rem;
    position: relative;
    z-index: 2;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
    backdrop-filter: blur(20px);
    border-radius: 17px;
    margin: 3px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
  }

  .user-header-card .row {
    margin-left: 0;
    margin-right: 0;
  }

  .user-header-card .row > [class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
  }

  .user-header-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.2;
    z-index: 1;
  }

  .user-header-card::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 22px;
    background: linear-gradient(45deg, 
      rgba(255, 255, 255, 0.1) 0%, 
      rgba(255, 255, 255, 0.3) 25%, 
      rgba(255, 255, 255, 0.5) 50%, 
      rgba(255, 255, 255, 0.3) 75%, 
      rgba(255, 255, 255, 0.1) 100%);
    background-size: 200% 200%;
    animation: borderShine 3s linear infinite;
    z-index: -1;
    opacity: 0.4;
  }

  /* Fundos e bordas personalizados do header por nível de patente */
  .user-header-card.patent-1 { 
    background: linear-gradient(135deg, rgba(139, 139, 139, 0.4), rgba(105, 105, 105, 0.6));
    border-color: #8b8b8b;
    box-shadow: 0 8px 32px rgba(139, 139, 139, 0.4), inset 0 0 20px rgba(139, 139, 139, 0.2);
  }
  .user-header-card.patent-2 { 
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.4), rgba(169, 169, 169, 0.6));
    border-color: #c0c0c0;
    box-shadow: 0 8px 32px rgba(192, 192, 192, 0.4), inset 0 0 20px rgba(192, 192, 192, 0.2);
  }
  .user-header-card.patent-3 { 
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.4), rgba(255, 193, 7, 0.6));
    border-color: #ffd700;
    box-shadow: 0 8px 32px rgba(255, 215, 0, 0.5), inset 0 0 20px rgba(255, 215, 0, 0.3);
  }
  .user-header-card.patent-4 { 
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.4), rgba(255, 165, 0, 0.6));
    border-color: #ff8c00;
    box-shadow: 0 8px 32px rgba(255, 140, 0, 0.5), inset 0 0 20px rgba(255, 140, 0, 0.3);
  }
  .user-header-card.patent-5 { 
    background: linear-gradient(135deg, rgba(255, 69, 0, 0.4), rgba(255, 99, 71, 0.6));
    border-color: #ff4500;
    box-shadow: 0 8px 32px rgba(255, 69, 0, 0.5), inset 0 0 20px rgba(255, 69, 0, 0.3);
  }
  .user-header-card.patent-6 { 
    background: linear-gradient(135deg, rgba(220, 20, 60, 0.4), rgba(255, 20, 147, 0.6));
    border-color: #dc143c;
    box-shadow: 0 8px 32px rgba(220, 20, 60, 0.5), inset 0 0 20px rgba(220, 20, 60, 0.3);
  }
  .user-header-card.patent-7 { 
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.4), rgba(148, 0, 211, 0.6));
    border-color: #8a2be2;
    box-shadow: 0 8px 32px rgba(138, 43, 226, 0.5), inset 0 0 20px rgba(138, 43, 226, 0.3);
  }
  .user-header-card.patent-8 { 
    background: linear-gradient(135deg, rgba(75, 0, 130, 0.4), rgba(138, 43, 226, 0.6));
    border-color: #4b0082;
    box-shadow: 0 8px 32px rgba(75, 0, 130, 0.5), inset 0 0 20px rgba(75, 0, 130, 0.3);
  }
  .user-header-card.patent-9 { 
    background: linear-gradient(135deg, rgba(0, 0, 139, 0.4), rgba(0, 0, 255, 0.6));
    border-color: #00008b;
    box-shadow: 0 8px 32px rgba(0, 0, 139, 0.5), inset 0 0 20px rgba(0, 0, 139, 0.3);
  }
  .user-header-card.patent-10 { 
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.4), rgba(0, 150, 255, 0.6));
    border-color: #00bfff;
    box-shadow: 0 8px 32px rgba(0, 191, 255, 0.5), inset 0 0 20px rgba(0, 191, 255, 0.3);
  }
  .user-header-card.patent-11 { 
    background: linear-gradient(135deg, rgba(0, 255, 127, 0.4), rgba(0, 250, 154, 0.6));
    border-color: #00ff7f;
    box-shadow: 0 8px 32px rgba(0, 255, 127, 0.5), inset 0 0 20px rgba(0, 255, 127, 0.3);
  }
  .user-header-card.patent-12 { 
    background: linear-gradient(135deg, rgba(50, 205, 50, 0.4), rgba(0, 255, 0, 0.6));
    border-color: #32cd32;
    box-shadow: 0 8px 32px rgba(50, 205, 50, 0.5), inset 0 0 20px rgba(50, 205, 50, 0.3);
  }
  .user-header-card.patent-13 { 
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.5), rgba(255, 223, 0, 0.7));
    border-color: #ffd700;
    box-shadow: 0 8px 32px rgba(255, 215, 0, 0.6), inset 0 0 25px rgba(255, 215, 0, 0.4), 0 0 40px rgba(255, 215, 0, 0.3);
  }
  .user-header-card.patent-14 { 
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.5), rgba(255, 165, 0, 0.7));
    border-color: #ff8c00;
    box-shadow: 0 8px 32px rgba(255, 140, 0, 0.6), inset 0 0 25px rgba(255, 140, 0, 0.4), 0 0 40px rgba(255, 140, 0, 0.3);
  }
  .user-header-card.patent-15 { 
    background: linear-gradient(135deg, rgba(255, 20, 147, 0.5), rgba(255, 105, 180, 0.7));
    border-color: #ff1493;
    box-shadow: 0 8px 32px rgba(255, 20, 147, 0.6), inset 0 0 25px rgba(255, 20, 147, 0.4), 0 0 40px rgba(255, 20, 147, 0.3);
  }
  .user-header-card.patent-16 { 
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.5), rgba(186, 85, 211, 0.7));
    border-color: #8a2be2;
    box-shadow: 0 8px 32px rgba(138, 43, 226, 0.6), inset 0 0 25px rgba(138, 43, 226, 0.4), 0 0 40px rgba(138, 43, 226, 0.3);
  }
  .user-header-card.patent-17 { 
    background: linear-gradient(135deg, rgba(75, 0, 130, 0.5), rgba(138, 43, 226, 0.7));
    border-color: #4b0082;
    box-shadow: 0 8px 32px rgba(75, 0, 130, 0.6), inset 0 0 25px rgba(75, 0, 130, 0.4), 0 0 40px rgba(75, 0, 130, 0.3);
  }
  .user-header-card.patent-18 { 
    background: linear-gradient(135deg, rgba(0, 0, 139, 0.5), rgba(0, 0, 255, 0.7));
    border-color: #00008b;
    box-shadow: 0 8px 32px rgba(0, 0, 139, 0.6), inset 0 0 25px rgba(0, 0, 139, 0.4), 0 0 40px rgba(0, 0, 139, 0.3);
  }
  .user-header-card.patent-19 { 
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.5), rgba(135, 206, 250, 0.7));
    border-color: #00bfff;
    box-shadow: 0 8px 32px rgba(0, 191, 255, 0.6), inset 0 0 25px rgba(0, 191, 255, 0.4), 0 0 40px rgba(0, 191, 255, 0.3);
  }
  .user-header-card.patent-20 { 
    background: linear-gradient(135deg, rgba(0, 255, 127, 0.5), rgba(144, 238, 144, 0.7));
    border-color: #00ff7f;
    box-shadow: 0 8px 32px rgba(0, 255, 127, 0.6), inset 0 0 25px rgba(0, 255, 127, 0.4), 0 0 40px rgba(0, 255, 127, 0.3);
  }
  .user-header-card.patent-21 { 
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.6), rgba(255, 223, 0, 0.8));
    border-color: #ffd700;
    box-shadow: 0 10px 40px rgba(255, 215, 0, 0.7), inset 0 0 30px rgba(255, 215, 0, 0.5), 0 0 50px rgba(255, 215, 0, 0.4);
    border-width: 4px;
  }
  .user-header-card.patent-22 { 
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.6), rgba(255, 165, 0, 0.8));
    border-color: #ff8c00;
    box-shadow: 0 10px 40px rgba(255, 140, 0, 0.7), inset 0 0 30px rgba(255, 140, 0, 0.5), 0 0 50px rgba(255, 140, 0, 0.4);
    border-width: 4px;
  }
  .user-header-card.patent-23 { 
    background: linear-gradient(135deg, rgba(255, 20, 147, 0.6), rgba(255, 105, 180, 0.8));
    border-color: #ff1493;
    box-shadow: 0 10px 40px rgba(255, 20, 147, 0.7), inset 0 0 30px rgba(255, 20, 147, 0.5), 0 0 50px rgba(255, 20, 147, 0.4);
    border-width: 4px;
  }
  .user-header-card.patent-24 { 
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.6), rgba(186, 85, 211, 0.8));
    border-color: #8a2be2;
    box-shadow: 0 10px 40px rgba(138, 43, 226, 0.7), inset 0 0 30px rgba(138, 43, 226, 0.5), 0 0 50px rgba(138, 43, 226, 0.4);
    border-width: 4px;
  }
  .user-header-card.patent-25 { 
    background: linear-gradient(135deg, rgba(75, 0, 130, 0.6), rgba(138, 43, 226, 0.8));
    border-color: #4b0082;
    box-shadow: 0 10px 40px rgba(75, 0, 130, 0.7), inset 0 0 30px rgba(75, 0, 130, 0.5), 0 0 50px rgba(75, 0, 130, 0.4);
    border-width: 4px;
  }
  .user-header-card.patent-26 { 
    background: linear-gradient(135deg, rgba(0, 0, 139, 0.6), rgba(0, 0, 255, 0.8));
    border-color: #00008b;
    box-shadow: 0 10px 40px rgba(0, 0, 139, 0.7), inset 0 0 30px rgba(0, 0, 139, 0.5), 0 0 50px rgba(0, 0, 139, 0.4);
    border-width: 4px;
  }
  .user-header-card.patent-27 { 
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.6), rgba(135, 206, 250, 0.8));
    border-color: #00bfff;
    box-shadow: 0 10px 40px rgba(0, 191, 255, 0.7), inset 0 0 30px rgba(0, 191, 255, 0.5), 0 0 50px rgba(0, 191, 255, 0.4);
    border-width: 4px;
  }
  .user-header-card.patent-28 { 
    background: linear-gradient(135deg, rgba(0, 255, 127, 0.6), rgba(144, 238, 144, 0.8));
    border-color: #00ff7f;
    box-shadow: 0 10px 40px rgba(0, 255, 127, 0.7), inset 0 0 30px rgba(0, 255, 127, 0.5), 0 0 50px rgba(0, 255, 127, 0.4);
    border-width: 4px;
  }
  .user-header-card.patent-29 { 
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.7), rgba(255, 223, 0, 0.9));
    border-color: #ffd700;
    box-shadow: 0 12px 48px rgba(255, 215, 0, 0.8), inset 0 0 35px rgba(255, 215, 0, 0.6), 0 0 60px rgba(255, 215, 0, 0.5);
    border-width: 5px;
    animation: eliteGlow 2s ease-in-out infinite;
  }
  .user-header-card.patent-30 { 
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.8), rgba(255, 223, 0, 1), rgba(255, 20, 147, 0.8));
    border-color: #ffd700;
    box-shadow: 0 15px 60px rgba(255, 215, 0, 0.9), inset 0 0 40px rgba(255, 215, 0, 0.7), 0 0 80px rgba(255, 20, 147, 0.6), 0 0 100px rgba(255, 215, 0, 0.4);
    border-width: 6px;
    animation: legendaryGlow 1.5s ease-in-out infinite;
  }

  .user-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 2;
    overflow: hidden;
  }

  .user-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .user-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 2;
    margin-bottom: 0.5rem;
  }

  .user-subtitle {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1rem;
    position: relative;
    z-index: 2;
    margin-bottom: 1.5rem;
    font-weight: 500;
  }

  .profile-info-section {
    margin-top: 1rem;
    position: relative;
    z-index: 2;
  }

  .profile-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
  }

  .profile-info-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .profile-info-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, transparent, currentColor, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .profile-info-item:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  }

  .profile-info-item:hover::before {
    opacity: 1;
  }

  .profile-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
  }

  .profile-info-icon i {
    display: inline-block !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .profile-info-item:hover .profile-info-icon {
    transform: scale(1.1) rotate(5deg);
  }

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

  .profile-info-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.2rem;
    font-weight: 600;
  }

  .profile-info-value {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .profile-info-item.verified .profile-info-icon {
    background: rgba(40, 167, 69, 0.2);
    color: #4ade80;
  }

  .profile-info-item.email-verified .profile-info-icon {
    background: rgba(13, 202, 240, 0.2);
    color: #5eead4 !important;
  }

  .profile-info-item.email-verified .profile-info-icon i {
    color: #5eead4 !important;
  }

  .profile-info-item.two-fa .profile-info-icon {
    background: rgba(255, 193, 7, 0.2);
    color: #fde047;
  }

  .profile-info-item.bio .profile-info-icon {
    background: rgba(236, 72, 153, 0.2);
    color: #f9a8d4;
  }

  .profile-info-item.gender .profile-info-icon {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
  }

  .profile-info-item.website .profile-info-icon {
    background: rgba(249, 115, 22, 0.2);
    color: #fdba74;
  }

  .profile-info-item a {
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease;
  }

  .profile-info-item a:hover {
    color: #fff;
    text-decoration: underline;
  }

  .profile-info-bio-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
  }

  .patent-section {
    position: relative;
    padding: 1.5rem;
    border-radius: 16px;
    margin-top: 1rem;
    overflow: hidden;
    border: 3px solid;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
    z-index: 1;
  }

  .patent-section::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 18px;
    background: linear-gradient(45deg, 
      rgba(255, 255, 255, 0.1) 0%, 
      rgba(255, 255, 255, 0.3) 25%, 
      rgba(255, 255, 255, 0.5) 50%, 
      rgba(255, 255, 255, 0.3) 75%, 
      rgba(255, 255, 255, 0.1) 100%);
    background-size: 200% 200%;
    animation: borderShine 3s linear infinite;
    z-index: -1;
    opacity: 0.6;
  }

  @keyframes borderShine {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .patent-display {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    z-index: 2;
  }

  .patent-image {
    width: 90px;
    height: 90px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s ease;
    position: relative;
    z-index: 2;
  }

  .patent-image:hover {
    transform: scale(1.15) rotate(5deg);
  }

  .patent-info {
    flex: 1;
    position: relative;
    z-index: 2;
  }

  .patent-level-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7), 0 0 10px rgba(255, 255, 255, 0.3);
    margin-bottom: 0.5rem;
  }

  /* Fundos e bordas personalizados por nível de patente */
  .patent-1 { 
    background: linear-gradient(135deg, rgba(139, 139, 139, 0.3), rgba(105, 105, 105, 0.5));
    border-color: #8b8b8b;
    box-shadow: 0 8px 32px rgba(139, 139, 139, 0.4), inset 0 0 20px rgba(139, 139, 139, 0.2);
  }
  .patent-2 { 
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.3), rgba(169, 169, 169, 0.5));
    border-color: #c0c0c0;
    box-shadow: 0 8px 32px rgba(192, 192, 192, 0.4), inset 0 0 20px rgba(192, 192, 192, 0.2);
  }
  .patent-3 { 
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 193, 7, 0.5));
    border-color: #ffd700;
    box-shadow: 0 8px 32px rgba(255, 215, 0, 0.5), inset 0 0 20px rgba(255, 215, 0, 0.3);
  }
  .patent-4 { 
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.3), rgba(255, 165, 0, 0.5));
    border-color: #ff8c00;
    box-shadow: 0 8px 32px rgba(255, 140, 0, 0.5), inset 0 0 20px rgba(255, 140, 0, 0.3);
  }
  .patent-5 { 
    background: linear-gradient(135deg, rgba(255, 69, 0, 0.3), rgba(255, 99, 71, 0.5));
    border-color: #ff4500;
    box-shadow: 0 8px 32px rgba(255, 69, 0, 0.5), inset 0 0 20px rgba(255, 69, 0, 0.3);
  }
  .patent-6 { 
    background: linear-gradient(135deg, rgba(220, 20, 60, 0.3), rgba(255, 20, 147, 0.5));
    border-color: #dc143c;
    box-shadow: 0 8px 32px rgba(220, 20, 60, 0.5), inset 0 0 20px rgba(220, 20, 60, 0.3);
  }
  .patent-7 { 
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.3), rgba(148, 0, 211, 0.5));
    border-color: #8a2be2;
    box-shadow: 0 8px 32px rgba(138, 43, 226, 0.5), inset 0 0 20px rgba(138, 43, 226, 0.3);
  }
  .patent-8 { 
    background: linear-gradient(135deg, rgba(75, 0, 130, 0.3), rgba(138, 43, 226, 0.5));
    border-color: #4b0082;
    box-shadow: 0 8px 32px rgba(75, 0, 130, 0.5), inset 0 0 20px rgba(75, 0, 130, 0.3);
  }
  .patent-9 { 
    background: linear-gradient(135deg, rgba(0, 0, 139, 0.3), rgba(0, 0, 255, 0.5));
    border-color: #00008b;
    box-shadow: 0 8px 32px rgba(0, 0, 139, 0.5), inset 0 0 20px rgba(0, 0, 139, 0.3);
  }
  .patent-10 { 
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.3), rgba(0, 150, 255, 0.5));
    border-color: #00bfff;
    box-shadow: 0 8px 32px rgba(0, 191, 255, 0.5), inset 0 0 20px rgba(0, 191, 255, 0.3);
  }
  .patent-11 { 
    background: linear-gradient(135deg, rgba(0, 255, 127, 0.3), rgba(0, 250, 154, 0.5));
    border-color: #00ff7f;
    box-shadow: 0 8px 32px rgba(0, 255, 127, 0.5), inset 0 0 20px rgba(0, 255, 127, 0.3);
  }
  .patent-12 { 
    background: linear-gradient(135deg, rgba(50, 205, 50, 0.3), rgba(0, 255, 0, 0.5));
    border-color: #32cd32;
    box-shadow: 0 8px 32px rgba(50, 205, 50, 0.5), inset 0 0 20px rgba(50, 205, 50, 0.3);
  }
  .patent-13 { 
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.4), rgba(255, 223, 0, 0.6));
    border-color: #ffd700;
    box-shadow: 0 8px 32px rgba(255, 215, 0, 0.6), inset 0 0 25px rgba(255, 215, 0, 0.4), 0 0 40px rgba(255, 215, 0, 0.3);
  }
  .patent-14 { 
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.4), rgba(255, 165, 0, 0.6));
    border-color: #ff8c00;
    box-shadow: 0 8px 32px rgba(255, 140, 0, 0.6), inset 0 0 25px rgba(255, 140, 0, 0.4), 0 0 40px rgba(255, 140, 0, 0.3);
  }
  .patent-15 { 
    background: linear-gradient(135deg, rgba(255, 20, 147, 0.4), rgba(255, 105, 180, 0.6));
    border-color: #ff1493;
    box-shadow: 0 8px 32px rgba(255, 20, 147, 0.6), inset 0 0 25px rgba(255, 20, 147, 0.4), 0 0 40px rgba(255, 20, 147, 0.3);
  }
  .patent-16 { 
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.4), rgba(186, 85, 211, 0.6));
    border-color: #8a2be2;
    box-shadow: 0 8px 32px rgba(138, 43, 226, 0.6), inset 0 0 25px rgba(138, 43, 226, 0.4), 0 0 40px rgba(138, 43, 226, 0.3);
  }
  .patent-17 { 
    background: linear-gradient(135deg, rgba(75, 0, 130, 0.4), rgba(138, 43, 226, 0.6));
    border-color: #4b0082;
    box-shadow: 0 8px 32px rgba(75, 0, 130, 0.6), inset 0 0 25px rgba(75, 0, 130, 0.4), 0 0 40px rgba(75, 0, 130, 0.3);
  }
  .patent-18 { 
    background: linear-gradient(135deg, rgba(0, 0, 139, 0.4), rgba(0, 0, 255, 0.6));
    border-color: #00008b;
    box-shadow: 0 8px 32px rgba(0, 0, 139, 0.6), inset 0 0 25px rgba(0, 0, 139, 0.4), 0 0 40px rgba(0, 0, 139, 0.3);
  }
  .patent-19 { 
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.4), rgba(135, 206, 250, 0.6));
    border-color: #00bfff;
    box-shadow: 0 8px 32px rgba(0, 191, 255, 0.6), inset 0 0 25px rgba(0, 191, 255, 0.4), 0 0 40px rgba(0, 191, 255, 0.3);
  }
  .patent-20 { 
    background: linear-gradient(135deg, rgba(0, 255, 127, 0.4), rgba(144, 238, 144, 0.6));
    border-color: #00ff7f;
    box-shadow: 0 8px 32px rgba(0, 255, 127, 0.6), inset 0 0 25px rgba(0, 255, 127, 0.4), 0 0 40px rgba(0, 255, 127, 0.3);
  }
  .patent-21 { 
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.5), rgba(255, 223, 0, 0.7));
    border-color: #ffd700;
    box-shadow: 0 10px 40px rgba(255, 215, 0, 0.7), inset 0 0 30px rgba(255, 215, 0, 0.5), 0 0 50px rgba(255, 215, 0, 0.4);
    border-width: 4px;
  }
  .patent-22 { 
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.5), rgba(255, 165, 0, 0.7));
    border-color: #ff8c00;
    box-shadow: 0 10px 40px rgba(255, 140, 0, 0.7), inset 0 0 30px rgba(255, 140, 0, 0.5), 0 0 50px rgba(255, 140, 0, 0.4);
    border-width: 4px;
  }
  .patent-23 { 
    background: linear-gradient(135deg, rgba(255, 20, 147, 0.5), rgba(255, 105, 180, 0.7));
    border-color: #ff1493;
    box-shadow: 0 10px 40px rgba(255, 20, 147, 0.7), inset 0 0 30px rgba(255, 20, 147, 0.5), 0 0 50px rgba(255, 20, 147, 0.4);
    border-width: 4px;
  }
  .patent-24 { 
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.5), rgba(186, 85, 211, 0.7));
    border-color: #8a2be2;
    box-shadow: 0 10px 40px rgba(138, 43, 226, 0.7), inset 0 0 30px rgba(138, 43, 226, 0.5), 0 0 50px rgba(138, 43, 226, 0.4);
    border-width: 4px;
  }
  .patent-25 { 
    background: linear-gradient(135deg, rgba(75, 0, 130, 0.5), rgba(138, 43, 226, 0.7));
    border-color: #4b0082;
    box-shadow: 0 10px 40px rgba(75, 0, 130, 0.7), inset 0 0 30px rgba(75, 0, 130, 0.5), 0 0 50px rgba(75, 0, 130, 0.4);
    border-width: 4px;
  }
  .patent-26 { 
    background: linear-gradient(135deg, rgba(0, 0, 139, 0.5), rgba(0, 0, 255, 0.7));
    border-color: #00008b;
    box-shadow: 0 10px 40px rgba(0, 0, 139, 0.7), inset 0 0 30px rgba(0, 0, 139, 0.5), 0 0 50px rgba(0, 0, 139, 0.4);
    border-width: 4px;
  }
  .patent-27 { 
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.5), rgba(135, 206, 250, 0.7));
    border-color: #00bfff;
    box-shadow: 0 10px 40px rgba(0, 191, 255, 0.7), inset 0 0 30px rgba(0, 191, 255, 0.5), 0 0 50px rgba(0, 191, 255, 0.4);
    border-width: 4px;
  }
  .patent-28 { 
    background: linear-gradient(135deg, rgba(0, 255, 127, 0.5), rgba(144, 238, 144, 0.7));
    border-color: #00ff7f;
    box-shadow: 0 10px 40px rgba(0, 255, 127, 0.7), inset 0 0 30px rgba(0, 255, 127, 0.5), 0 0 50px rgba(0, 255, 127, 0.4);
    border-width: 4px;
  }
  .patent-29 { 
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.6), rgba(255, 223, 0, 0.8));
    border-color: #ffd700;
    box-shadow: 0 12px 48px rgba(255, 215, 0, 0.8), inset 0 0 35px rgba(255, 215, 0, 0.6), 0 0 60px rgba(255, 215, 0, 0.5);
    border-width: 5px;
    animation: eliteGlow 2s ease-in-out infinite;
  }
  .patent-30 { 
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.7), rgba(255, 223, 0, 0.9), rgba(255, 20, 147, 0.7));
    border-color: #ffd700;
    box-shadow: 0 15px 60px rgba(255, 215, 0, 0.9), inset 0 0 40px rgba(255, 215, 0, 0.7), 0 0 80px rgba(255, 20, 147, 0.6), 0 0 100px rgba(255, 215, 0, 0.4);
    border-width: 6px;
    animation: legendaryGlow 1.5s ease-in-out infinite;
  }

  /* Fundos de contraste para patent-section (cores opostas ao user-header-card) */
  .patent-section.patent-1 { 
    background: linear-gradient(135deg, rgba(75, 0, 130, 0.4), rgba(138, 43, 226, 0.6));
    border-color: #4b0082;
    box-shadow: 0 8px 32px rgba(75, 0, 130, 0.4), inset 0 0 20px rgba(75, 0, 130, 0.2);
  }
  .patent-section.patent-2 { 
    background: linear-gradient(135deg, rgba(105, 105, 105, 0.4), rgba(139, 139, 139, 0.6));
    border-color: #696969;
    box-shadow: 0 8px 32px rgba(105, 105, 105, 0.4), inset 0 0 20px rgba(105, 105, 105, 0.2);
  }
  .patent-section.patent-3 { 
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.4), rgba(148, 0, 211, 0.6));
    border-color: #8a2be2;
    box-shadow: 0 8px 32px rgba(138, 43, 226, 0.5), inset 0 0 20px rgba(138, 43, 226, 0.3);
  }
  .patent-section.patent-4 { 
    background: linear-gradient(135deg, rgba(0, 0, 139, 0.4), rgba(0, 0, 255, 0.6));
    border-color: #00008b;
    box-shadow: 0 8px 32px rgba(0, 0, 139, 0.5), inset 0 0 20px rgba(0, 0, 139, 0.3);
  }
  .patent-section.patent-5 { 
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.4), rgba(0, 150, 255, 0.6));
    border-color: #00bfff;
    box-shadow: 0 8px 32px rgba(0, 191, 255, 0.5), inset 0 0 20px rgba(0, 191, 255, 0.3);
  }
  .patent-section.patent-6 { 
    background: linear-gradient(135deg, rgba(0, 255, 127, 0.4), rgba(0, 250, 154, 0.6));
    border-color: #00ff7f;
    box-shadow: 0 8px 32px rgba(0, 255, 127, 0.5), inset 0 0 20px rgba(0, 255, 127, 0.3);
  }
  .patent-section.patent-7 { 
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.4), rgba(255, 193, 7, 0.6));
    border-color: #ffd700;
    box-shadow: 0 8px 32px rgba(255, 215, 0, 0.5), inset 0 0 20px rgba(255, 215, 0, 0.3);
  }
  .patent-section.patent-8 { 
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.4), rgba(255, 165, 0, 0.6));
    border-color: #ff8c00;
    box-shadow: 0 8px 32px rgba(255, 140, 0, 0.5), inset 0 0 20px rgba(255, 140, 0, 0.3);
  }
  .patent-section.patent-9 { 
    background: linear-gradient(135deg, rgba(255, 20, 147, 0.4), rgba(255, 105, 180, 0.6));
    border-color: #ff1493;
    box-shadow: 0 8px 32px rgba(255, 20, 147, 0.5), inset 0 0 20px rgba(255, 20, 147, 0.3);
  }
  .patent-section.patent-10 { 
    background: linear-gradient(135deg, rgba(50, 205, 50, 0.4), rgba(0, 255, 0, 0.6));
    border-color: #32cd32;
    box-shadow: 0 8px 32px rgba(50, 205, 50, 0.5), inset 0 0 20px rgba(50, 205, 50, 0.3);
  }
  .patent-section.patent-11 { 
    background: linear-gradient(135deg, rgba(255, 69, 0, 0.4), rgba(255, 99, 71, 0.6));
    border-color: #ff4500;
    box-shadow: 0 8px 32px rgba(255, 69, 0, 0.5), inset 0 0 20px rgba(255, 69, 0, 0.3);
  }
  .patent-section.patent-12 { 
    background: linear-gradient(135deg, rgba(220, 20, 60, 0.4), rgba(255, 20, 147, 0.6));
    border-color: #dc143c;
    box-shadow: 0 8px 32px rgba(220, 20, 60, 0.5), inset 0 0 20px rgba(220, 20, 60, 0.3);
  }
  .patent-section.patent-13 { 
    background: linear-gradient(135deg, rgba(75, 0, 130, 0.5), rgba(138, 43, 226, 0.7));
    border-color: #4b0082;
    box-shadow: 0 8px 32px rgba(75, 0, 130, 0.6), inset 0 0 25px rgba(75, 0, 130, 0.4), 0 0 40px rgba(138, 43, 226, 0.3);
  }
  .patent-section.patent-14 { 
    background: linear-gradient(135deg, rgba(0, 0, 139, 0.5), rgba(0, 0, 255, 0.7));
    border-color: #00008b;
    box-shadow: 0 8px 32px rgba(0, 0, 139, 0.6), inset 0 0 25px rgba(0, 0, 139, 0.4), 0 0 40px rgba(0, 0, 255, 0.3);
  }
  .patent-section.patent-15 { 
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.5), rgba(135, 206, 250, 0.7));
    border-color: #00bfff;
    box-shadow: 0 8px 32px rgba(0, 191, 255, 0.6), inset 0 0 25px rgba(0, 191, 255, 0.4), 0 0 40px rgba(135, 206, 250, 0.3);
  }
  .patent-section.patent-16 { 
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.5), rgba(255, 223, 0, 0.7));
    border-color: #ffd700;
    box-shadow: 0 8px 32px rgba(255, 215, 0, 0.6), inset 0 0 25px rgba(255, 215, 0, 0.4), 0 0 40px rgba(255, 215, 0, 0.3);
  }
  .patent-section.patent-17 { 
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.5), rgba(255, 165, 0, 0.7));
    border-color: #ff8c00;
    box-shadow: 0 8px 32px rgba(255, 140, 0, 0.6), inset 0 0 25px rgba(255, 140, 0, 0.4), 0 0 40px rgba(255, 165, 0, 0.3);
  }
  .patent-section.patent-18 { 
    background: linear-gradient(135deg, rgba(255, 20, 147, 0.5), rgba(255, 105, 180, 0.7));
    border-color: #ff1493;
    box-shadow: 0 8px 32px rgba(255, 20, 147, 0.6), inset 0 0 25px rgba(255, 20, 147, 0.4), 0 0 40px rgba(255, 105, 180, 0.3);
  }
  .patent-section.patent-19 { 
    background: linear-gradient(135deg, rgba(50, 205, 50, 0.5), rgba(0, 255, 0, 0.7));
    border-color: #32cd32;
    box-shadow: 0 8px 32px rgba(50, 205, 50, 0.6), inset 0 0 25px rgba(50, 205, 50, 0.4), 0 0 40px rgba(0, 255, 0, 0.3);
  }
  .patent-section.patent-20 { 
    background: linear-gradient(135deg, rgba(255, 69, 0, 0.5), rgba(255, 99, 71, 0.7));
    border-color: #ff4500;
    box-shadow: 0 8px 32px rgba(255, 69, 0, 0.6), inset 0 0 25px rgba(255, 69, 0, 0.4), 0 0 40px rgba(255, 99, 71, 0.3);
  }
  .patent-section.patent-21 { 
    background: linear-gradient(135deg, rgba(75, 0, 130, 0.6), rgba(138, 43, 226, 0.8));
    border-color: #4b0082;
    box-shadow: 0 10px 40px rgba(75, 0, 130, 0.7), inset 0 0 30px rgba(75, 0, 130, 0.5), 0 0 50px rgba(138, 43, 226, 0.4);
    border-width: 4px;
  }
  .patent-section.patent-22 { 
    background: linear-gradient(135deg, rgba(0, 0, 139, 0.6), rgba(0, 0, 255, 0.8));
    border-color: #00008b;
    box-shadow: 0 10px 40px rgba(0, 0, 139, 0.7), inset 0 0 30px rgba(0, 0, 139, 0.5), 0 0 50px rgba(0, 0, 255, 0.4);
    border-width: 4px;
  }
  .patent-section.patent-23 { 
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.6), rgba(135, 206, 250, 0.8));
    border-color: #00bfff;
    box-shadow: 0 10px 40px rgba(0, 191, 255, 0.7), inset 0 0 30px rgba(0, 191, 255, 0.5), 0 0 50px rgba(135, 206, 250, 0.4);
    border-width: 4px;
  }
  .patent-section.patent-24 { 
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.6), rgba(255, 223, 0, 0.8));
    border-color: #ffd700;
    box-shadow: 0 10px 40px rgba(255, 215, 0, 0.7), inset 0 0 30px rgba(255, 215, 0, 0.5), 0 0 50px rgba(255, 215, 0, 0.4);
    border-width: 4px;
  }
  .patent-section.patent-25 { 
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.6), rgba(255, 165, 0, 0.8));
    border-color: #ff8c00;
    box-shadow: 0 10px 40px rgba(255, 140, 0, 0.7), inset 0 0 30px rgba(255, 140, 0, 0.5), 0 0 50px rgba(255, 165, 0, 0.4);
    border-width: 4px;
  }
  .patent-section.patent-26 { 
    background: linear-gradient(135deg, rgba(255, 20, 147, 0.6), rgba(255, 105, 180, 0.8));
    border-color: #ff1493;
    box-shadow: 0 10px 40px rgba(255, 20, 147, 0.7), inset 0 0 30px rgba(255, 20, 147, 0.5), 0 0 50px rgba(255, 105, 180, 0.4);
    border-width: 4px;
  }
  .patent-section.patent-27 { 
    background: linear-gradient(135deg, rgba(50, 205, 50, 0.6), rgba(0, 255, 0, 0.8));
    border-color: #32cd32;
    box-shadow: 0 10px 40px rgba(50, 205, 50, 0.7), inset 0 0 30px rgba(50, 205, 50, 0.5), 0 0 50px rgba(0, 255, 0, 0.4);
    border-width: 4px;
  }
  .patent-section.patent-28 { 
    background: linear-gradient(135deg, rgba(255, 69, 0, 0.6), rgba(255, 99, 71, 0.8));
    border-color: #ff4500;
    box-shadow: 0 10px 40px rgba(255, 69, 0, 0.7), inset 0 0 30px rgba(255, 69, 0, 0.5), 0 0 50px rgba(255, 99, 71, 0.4);
    border-width: 4px;
  }
  .patent-section.patent-29 { 
    background: linear-gradient(135deg, rgba(75, 0, 130, 0.7), rgba(138, 43, 226, 0.9));
    border-color: #4b0082;
    box-shadow: 0 12px 48px rgba(75, 0, 130, 0.8), inset 0 0 35px rgba(75, 0, 130, 0.6), 0 0 60px rgba(138, 43, 226, 0.5);
    border-width: 5px;
    animation: eliteGlow 2s ease-in-out infinite;
  }
  .patent-section.patent-30 { 
    background: linear-gradient(135deg, rgba(75, 0, 130, 0.8), rgba(138, 43, 226, 1), rgba(0, 191, 255, 0.8));
    border-color: #4b0082;
    box-shadow: 0 15px 60px rgba(75, 0, 130, 0.9), inset 0 0 40px rgba(75, 0, 130, 0.7), 0 0 80px rgba(138, 43, 226, 0.6), 0 0 100px rgba(0, 191, 255, 0.4);
    border-width: 6px;
    animation: legendaryGlow 1.5s ease-in-out infinite;
  }

  @keyframes eliteGlow {
    0%, 100% { 
      box-shadow: 0 12px 48px rgba(255, 215, 0, 0.8), inset 0 0 35px rgba(255, 215, 0, 0.6), 0 0 60px rgba(255, 215, 0, 0.5);
    }
    50% { 
      box-shadow: 0 12px 48px rgba(255, 215, 0, 1), inset 0 0 35px rgba(255, 215, 0, 0.8), 0 0 80px rgba(255, 215, 0, 0.7);
    }
  }

  @keyframes legendaryGlow {
    0%, 100% { 
      box-shadow: 0 15px 60px rgba(255, 215, 0, 0.9), inset 0 0 40px rgba(255, 215, 0, 0.7), 0 0 80px rgba(255, 20, 147, 0.6), 0 0 100px rgba(255, 215, 0, 0.4);
    }
    50% { 
      box-shadow: 0 15px 60px rgba(255, 215, 0, 1), inset 0 0 40px rgba(255, 215, 0, 0.9), 0 0 100px rgba(255, 20, 147, 0.8), 0 0 120px rgba(255, 215, 0, 0.6);
    }
  }

   .action-btn {
     background: linear-gradient(45deg, #6f42c1, #e83e8c);
     border: none;
     border-radius: 25px;
     color: white;
     font-weight: 600;
     padding: 10px 20px;
     transition: all 0.3s ease;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     white-space: nowrap;
     text-decoration: none;
     box-sizing: border-box;
   }

   .action-btn.header-btn {
     width: 140px;
     height: 45px;
     flex-shrink: 0;
   }

  .action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(111, 66, 193, 0.4);
    color: white;
  }

  .progress-custom {
    height: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .progress-custom .progress-bar {
    background: linear-gradient(45deg, #00d9ff, #6f42c1);
    border-radius: 8px;
    height: 100% !important;
    min-width: 0;
    transition: width 0.6s ease;
    display: block !important;
    position: relative;
  }

  .stats-card {
    background: linear-gradient(to bottom right, #1a1a2e, #121220);
    border: 2px solid #6f42c1;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5), 0 0 25px rgba(13, 202, 240, 0.3);
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.2s ease-in-out;
  }

  .stats-card:hover {
    transform: scale(1.05);
  }

  .stats-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .stats-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: #00d9ff;
    text-shadow: 1px 1px 2px #000;
  }

  .stats-label {
    color: #ccc;
    font-size: 0.9rem;
    margin-top: 0.5rem;
  }

  .conquista-card {
    background: linear-gradient(to bottom right, #1a1a2e, #121220);
    border: 2px solid #6f42c1;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5), 0 0 25px rgba(13, 202, 240, 0.3);
    padding: 1rem;
    text-align: center;
    transition: transform 0.2s ease-in-out;
  }

  .conquista-card:hover {
    transform: scale(1.05);
  }

  .conquista-card.locked {
    opacity: 0.5;
    border-color: #6c757d;
  }

  .alert-custom {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.05));
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 12px;
    color: #f8f9fa;
  }

  .alert-info-custom {
    background: linear-gradient(135deg, rgba(13, 202, 240, 0.1), rgba(13, 202, 240, 0.05));
    border: 1px solid rgba(13, 202, 240, 0.3);
    border-radius: 12px;
    color: #f8f9fa;
  }

  .section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #f8f9fa;
    text-shadow: 1px 1px 2px #000;
    margin-bottom: 1.5rem;
    border-left: 4px solid #6f42c1;
    padding-left: 1rem;
  }

  .inventory-item {
    background: linear-gradient(to bottom right, #1a1a2e, #121220);
    border: 1px solid #6f42c1;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: transform 0.2s ease-in-out;
  }

  .inventory-item:hover {
    transform: scale(1.02);
  }

  .pagination-custom .page-link {
    background: linear-gradient(to bottom right, #1a1a2e, #121220);
    border: 1px solid #6f42c1;
    color: #f8f9fa;
  }

  .pagination-custom .page-link:hover {
    background: linear-gradient(to bottom right, #6f42c1, #e83e8c);
    color: white;
  }

  .pagination-custom .page-item.active .page-link {
    background: linear-gradient(45deg, #6f42c1, #e83e8c);
    border-color: #6f42c1;
  }
</style>
{% endblock extrahead %}

{% block content %}
<div class="dashboard-bg">
  <div class="container">
    <!-- Aviso de Licença -->
    {% if request.license_status.show_warning %}
      <div class="alert alert-custom alert-dismissible fade show mb-4" role="alert">
        <div class="d-flex align-items-center">
          <i class="fas fa-exclamation-triangle me-3 fs-4 text-warning"></i>
          <div>
            <h6 class="alert-heading fw-bold mb-1">⚠️ {% trans "Aviso de Licença" %}</h6>
            <p class="mb-2">{% trans "A licença do sistema não é válida. Algumas funcionalidades podem estar indisponíveis. Entre em contato com o administrador." %}</p>
            {% if request.user.is_superuser %}
              <a href="{% url 'licence:status' %}" class="btn btn-sm btn-warning">
                <i class="fas fa-cog me-1"></i>{% trans "Gerenciar Licença" %}
              </a>
            {% endif %}
          </div>
        </div>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    {% endif %}

    <!-- Lembrete do PWA Push Notification (só exibe se VAPID estiver configurado) -->
    {% if vapid_configured %}
    <div class="alert alert-info-custom d-flex align-items-center justify-content-center mb-4 shadow-sm" style="font-size: 1.05rem;">
      <i class="fas fa-bell me-2 text-warning"></i>
      <span><b>Receba alertas instantâneos!</b> Instale nosso <a href="/pwa/" class="fw-bold text-decoration-underline text-info" target="_blank">App de Notificações Push</a> e nunca perca avisos importantes do servidor.</span>
    </div>
    {% endif %}

    <!-- Lembrete de Perfil Incompleto -->
    {% if not request.user.first_name or not request.user.last_name or not request.user.bio %}
      <div class="alert alert-info-custom alert-dismissible fade show mb-4 shadow-sm" role="alert">
        <div class="d-flex align-items-center">
          <i class="fas fa-users me-3 fs-4 text-info"></i>
          <div class="flex-grow-1">
            <h6 class="alert-heading fw-bold mb-1">🤝 {% trans "Conecte-se com outros jogadores!" %}</h6>
            <p class="mb-2">
              {% if not request.user.first_name and not request.user.last_name %}
                <strong>{% trans "Adicione seu nome e sobrenome" %}</strong> - {% trans "Torne-se mais reconhecível na comunidade!" %}
              {% elif not request.user.bio %}
                <strong>{% trans "Crie uma bio interessante" %}</strong> - {% trans "Conte um pouco sobre você e seus interesses no jogo!" %}
              {% else %}
                <strong>{% trans "Complete seu perfil" %}</strong> - {% trans "Adicione suas informações pessoais para se conectar melhor com outros jogadores!" %}
              {% endif %}
              <br>
              <small class="text-muted">💡 {% trans "Perfis completos têm mais chances de fazer amigos e participar da comunidade!" %}</small>
            </p>
            <div class="d-flex flex-wrap gap-2">
              <a href="{% url 'edit_profile' %}" class="action-btn">
                <i class="fas fa-edit me-1"></i>{% trans "Completar Perfil" %}
              </a>
              <a href="{% url 'message:friends_list' %}" class="action-btn" style="background: linear-gradient(45deg, #17a2b8, #20c997);">
                <i class="fas fa-user-plus me-1"></i>{% trans "Ver Amigos" %}
              </a>
              <button type="button" class="action-btn" style="background: linear-gradient(45deg, #6c757d, #495057);" data-bs-dismiss="alert" aria-label="Close">
                <i class="fas fa-times me-1"></i>{% trans "Lembrar depois" %}
              </button>
            </div>
          </div>
        </div>
      </div>
    {% endif %}

    <!-- Header do Usuário -->
    <div class="user-header-card patent-{{ patent_level }}">
      <div class="user-header-content">
        <div class="row g-4">
          <!-- Coluna Esquerda: Avatar e Informações -->
          <div class="col-lg-8">
            <div class="d-flex flex-column flex-md-row align-items-start align-items-md-center gap-4">
              <!-- Avatar -->
              <div class="flex-shrink-0">
                {% if request.user.avatar %}
                  <div class="user-avatar">
                    <img src="{% url 'serve_files:serve_decrypted_file_with_timestamp' 'home' 'user' 'avatar' request.user.uuid timestamp %}" 
                         alt="avatar" 
                         style="width: 100%; height: 100%; object-fit: cover; background-color: #cbd5e1;">
                  </div>
                {% else %}
                  <div class="user-avatar d-flex align-items-center justify-content-center bg-secondary">
                    <i class="fas fa-user fa-2x text-white"></i>
                  </div>
                {% endif %}
              </div>
              
              <!-- Informações do Usuário -->
              <div class="flex-grow-1">
                <h1 class="user-name mb-2">{{ greeting }}, {{ request.user.first_name|default:request.user.username }} {{ greeting_emoji }}</h1>
                <p class="user-subtitle mb-3">{% trans "Gerencie sua conta, acompanhe seu progresso e explore todas as funcionalidades disponíveis" %}</p>
                
                <!-- Informações do Perfil -->
                <div class="profile-info-section">
                  <div class="profile-info-grid">
                    {% if request.user.is_verified_account %}
                      <div class="profile-info-item verified">
                        <div class="profile-info-icon">
                          <i class="fas fa-check-circle"></i>
                        </div>
                        <div class="profile-info-content">
                          <div class="profile-info-label">{% trans "Conta" %}</div>
                          <div class="profile-info-value">{% trans "Verificada" %}</div>
                        </div>
                      </div>
                    {% endif %}
                    
                    {% if request.user.is_email_verified %}
                      <div class="profile-info-item email-verified">
                        <div class="profile-info-icon" style="background: rgba(13, 202, 240, 0.2); color: #5eead4;">
                          <i class="fas fa-envelope" style="color: #5eead4; font-size: 1rem;"></i>
                        </div>
                        <div class="profile-info-content">
                          <div class="profile-info-label">{% trans "E-mail" %}</div>
                          <div class="profile-info-value">{% trans "Verificado" %}</div>
                        </div>
                      </div>
                    {% endif %}
                    
                    {% if request.user.is_2fa_enabled %}
                      <div class="profile-info-item two-fa">
                        <div class="profile-info-icon">
                          <i class="fas fa-shield-halved"></i>
                        </div>
                        <div class="profile-info-content">
                          <div class="profile-info-label">{% trans "Segurança" %}</div>
                          <div class="profile-info-value">{% trans "2FA Ativo" %}</div>
                        </div>
                      </div>
                    {% endif %}
                    
                    {% if request.user.bio %}
                      <div class="profile-info-item bio">
                        <div class="profile-info-icon">
                          <i class="fas fa-user-edit"></i>
                        </div>
                        <div class="profile-info-content">
                          <div class="profile-info-label">{% trans "Sobre Você" %}</div>
                          <div class="profile-info-bio-text">{{ request.user.bio|truncatewords:15 }}</div>
                        </div>
                      </div>
                    {% endif %}
                    
                    {% if request.user.gender %}
                      <div class="profile-info-item gender">
                        <div class="profile-info-icon">
                          <i class="fas fa-venus-mars"></i>
                        </div>
                        <div class="profile-info-content">
                          <div class="profile-info-label">{% trans "Gênero" %}</div>
                          <div class="profile-info-value">
                            {% if request.user.gender == 'male' %}{% trans 'Masculino' %}
                            {% elif request.user.gender == 'female' %}{% trans 'Feminino' %}
                            {% elif request.user.gender == 'non_binary' %}{% trans 'Não Binário' %}
                            {% else %}{{ request.user.gender }}{% endif %}
                          </div>
                        </div>
                      </div>
                    {% endif %}
                    
                    {% if request.user.website %}
                      <div class="profile-info-item website">
                        <div class="profile-info-icon">
                          <i class="fas fa-globe"></i>
                        </div>
                        <div class="profile-info-content">
                          <div class="profile-info-label">{% trans "Website" %}</div>
                          <div class="profile-info-value">
                            <a href="{{ request.user.website }}" target="_blank" rel="noopener noreferrer">
                              {% trans "Visitar" %}
                            </a>
                          </div>
                        </div>
                      </div>
                    {% endif %}
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- Coluna Direita: Botões de Ação -->
          <div class="col-lg-4">
            <div class="d-flex flex-wrap gap-2 justify-content-lg-end justify-content-start">
              <a href="{% url 'auction:listar_leiloes' %}" class="action-btn header-btn" style="background: linear-gradient(45deg, #fd7e14, #e83e8c);">
                <i class="fas fa-gavel me-1"></i>{% trans "Leilões" %}
              </a>
              <a href="{% url 'payment:novo_pedido' %}" class="action-btn header-btn" style="background: linear-gradient(45deg, #28a745, #20c997);">
                <i class="fas fa-donate me-1"></i>{% trans "Doação" %}
              </a>
              <a href="{% url 'server:account_dashboard' %}" class="action-btn header-btn" style="background: linear-gradient(45deg, #17a2b8, #6f42c1);">
                <i class="fas fa-user-shield me-1"></i>{% trans "Conta L2" %}
              </a>
              <a href="{% url 'wallet:dashboard' %}" class="action-btn header-btn" style="background: linear-gradient(45deg, #ffc107, #fd7e14);">
                <i class="fas fa-wallet me-1"></i>{% trans "Carteira" %}
              </a>
              <a href="{% url 'message:friends_list' %}" class="action-btn header-btn" style="background: linear-gradient(45deg, #20c997, #17a2b8);">
                <i class="fas fa-users me-1"></i>{% trans "Amigos" %}
              </a>
              <a href="{% url 'downloads:internal_download_list' %}" class="action-btn header-btn" style="background: linear-gradient(45deg, #dc3545, #fd7e14);">
                <i class="fas fa-download me-1"></i>{% trans "Download" %}
              </a>
              <button type="button" class="action-btn header-btn" style="background: linear-gradient(45deg, #6c757d, #495057);" data-bs-toggle="modal" data-bs-target="#multiAccountModal" title="{% trans 'Sobre Conta Mestre e Múltiplas Contas' %}">
                <i class="fas fa-question-circle me-1"></i>{% trans "?" %}
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Patente e Progresso do Nível -->
      <div class="patent-section patent-{{ patent_level }}">
        <div class="patent-display">
          <div>
            <img src="{% static 'assets/img/patent/' %}{{ patent_level }}.png" alt="Patente Nível {{ patent_level }}" class="patent-image">
          </div>
          <div class="patent-info">
            <div class="patent-level-text">
              {% trans "Nível" %} {{ perfil.level }}
            </div>
            <div class="d-flex justify-content-between align-items-center mb-2">
              <span class="text-white" style="font-size: 0.9rem;">{% trans "Progresso" %}</span>
              <span class="text-white" style="font-size: 0.9rem; font-weight: 600;">{{ xp_percent }}%</span>
            </div>
            <div class="progress-custom">
              <div class="progress-bar" role="progressbar" style="width: {{ xp_percent }}%;" aria-valuenow="{{ xp_percent }}" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            {% if ganhou_bonus %}
              <small class="text-success mt-1 d-block">🎉 {% trans "Bônus diário recebido! +25 XP" %}</small>
            {% endif %}
            <div class="mt-3">
              <a href="{% url 'level_rewards_view' %}" class="btn btn-sm text-white" style="background: linear-gradient(135deg, rgba(13, 202, 240, 0.8), rgba(111, 66, 193, 0.8)); border: none; border-radius: 8px; padding: 8px 16px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(13, 202, 240, 0.3);">
                <i class="bi bi-gift me-1"></i>{% trans "Ver Prêmios Disponíveis" %}
              </a>
            </div>
          </div>
        </div>
      </div>
        
      <!-- Indicador de Progresso do Perfil -->
      {% if not request.user.first_name or not request.user.last_name or not request.user.bio %}
        <div class="mt-3">
          <small class="text-white d-block mb-1">📊 {% trans "Progresso do Perfil:" %}</small>
          <div class="progress-custom" style="height: 8px;">
            {% if not request.user.first_name and not request.user.last_name and not request.user.bio %}
              <div class="progress-bar" role="progressbar" style="width: 0%;"></div>
            {% elif not request.user.first_name or not request.user.last_name %}
              <div class="progress-bar" role="progressbar" style="width: 33.33%;"></div>
            {% elif not request.user.bio %}
              <div class="progress-bar" role="progressbar" style="width: 66.66%;"></div>
            {% endif %}
          </div>
          <small class="text-white">
            {% if not request.user.first_name and not request.user.last_name and not request.user.bio %}
              {% trans "0/3 campos preenchidos - Complete seu perfil para ganhar 50 XP!" %}
            {% elif not request.user.first_name or not request.user.last_name %}
              {% trans "1/3 campos preenchidos - Adicione nome e sobrenome!" %}
            {% elif not request.user.bio %}
              {% trans "2/3 campos preenchidos - Adicione uma bio interessante!" %}
            {% endif %}
          </small>
        </div>
      {% endif %}
    </div>

    <!-- Estatísticas Principais -->
    <div class="row g-4 mb-5">
      <div class="col-md-3">
        <div class="stats-card">
          <div class="stats-icon text-success">
            <i class="fas fa-wallet"></i>
          </div>
          <div class="stats-value">
            {% if wallet %}
              R$ {{ wallet.saldo|floatformat:2 }}
            {% else %}
              R$ 0,00
            {% endif %}
          </div>
          <div class="stats-label">{% trans "Saldo da Carteira" %}</div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="stats-card">
          <div class="stats-icon text-info">
            <i class="fas fa-gavel"></i>
          </div>
          <div class="stats-value">{{ leiloes_user }}</div>
          <div class="stats-label">{% trans "Leilões Criados" %}</div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="stats-card">
          <div class="stats-icon text-white">
            <i class="fas fa-users"></i>
          </div>
                     <div class="stats-value">
             <a href="{% url 'message:friends_list' %}" class="text-decoration-none" style="color: #00d9ff;">{% trans "Ver" %}</a>
           </div>
          <div class="stats-label">{% trans "Amigos" %}</div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="stats-card">
          <div class="stats-icon text-warning">
            <i class="fas fa-star"></i>
          </div>
          <div class="stats-value">
            {% if is_apoiador %}
              {{ status }}
            {% else %}
              {% trans "Não" %}
            {% endif %}
          </div>
          <div class="stats-label">{% trans "Apoiador" %}</div>
        </div>
      </div>
    </div>

    <!-- Inventários -->
    {% if inventories %}
      <div class="mb-5">
        <h2 class="section-title">
          <i class="fas fa-boxes me-2"></i>{% trans "Seus Inventários" %}
        </h2>
        <div class="row g-3">
          {% for inv in inventories %}
          <div class="col-md-6 col-lg-4">
            <div class="inventory-item">
              <div class="d-flex justify-content-between align-items-center">
                <div>
                  <h6 class="mb-1 text-white">{{ inv.character_name }}</h6>
                  <small class="text-muted">{% trans "Personagem" %}</small>
                </div>
                <a href="{% url 'inventory:inventario_dashboard' %}" class="action-btn btn-sm">
                  <i class="fas fa-eye me-1"></i>{% trans "Ver" %}
                </a>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    {% endif %}

    <!-- Conquistas -->
    <div class="mb-5">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="section-title mb-0">
          <i class="fas fa-trophy me-2"></i>{% trans "🏆 Conquistas" %}
        </h2>
        <a href="{% url 'achievement_rewards' %}" class="btn btn-sm" style="background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); border: none; color: white; padding: 8px 16px; border-radius: 8px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);">
          <i class="fas fa-gift me-2"></i>{% trans "Ver Prêmios" %}
        </a>
      </div>
      {% if conquistas %}
        <div class="row g-3">
          {% for c in conquistas %}
            {% with conquista=c.conquista desbloqueada=c.desbloqueada %}
              <div class="col-6 col-md-4 col-lg-3">
                <div class="conquista-card {% if not desbloqueada %}locked{% endif %}">
                  {% if desbloqueada and conquista.icone %}
                    <img src="{{ conquista.icone.url }}" width="48" class="mb-2" alt="{{ conquista.nome }}">
                  {% elif desbloqueada %}
                    <i class="fas fa-trophy fa-2x text-warning mb-2"></i>
                  {% else %}
                    <i class="fas fa-lock fa-2x text-muted mb-2"></i>
                  {% endif %}
                  <div>
                    <strong class="d-block text-white">{{ conquista.nome }}</strong>
                    <small class="text-muted d-block">
                      {% if desbloqueada %}
                        {{ conquista.descricao }}
                      {% else %}
                        {% trans "Conquista bloqueada" %}
                      {% endif %}
                    </small>
                  </div>
                </div>
              </div>
            {% endwith %}
          {% endfor %}
        </div>

        <!-- Paginação -->
        {% if page_obj.has_other_pages %}
          <div class="mt-4">
            {% with query_params=request.GET.urlencode %}
              {% include 'includes/pagination.html' %}
            {% endwith %}
          </div>
        {% endif %}
      {% else %}
        <div class="text-center">
          <i class="fas fa-trophy fa-3x text-muted mb-3"></i>
          <p class="text-muted">{% trans "Você ainda não desbloqueou nenhuma conquista." %}</p>
        </div>
      {% endif %}
    </div>
  </div>
</div>

<!-- Conteúdo do Dashboard (se existir) -->
{% if dashboard %}
  <div class="container-fluid py-5" style="background: #f8f9fa;">
    <div class="row justify-content-center">
      <div class="col-lg-10 col-xl-8">
        <div class="card shadow-sm bg-light rounded p-4">
          {% if translation %}
            {{ translation.content|safe }}
          {% else %}
            {{ dashboard.content|safe }}
          {% endif %}
        </div>
      </div>
    </div>
  </div>
{% else %}
  <!-- Informações de painel se não houver dashboard -->
     <div class="py-5" style="background: linear-gradient(135deg, #1a1a2e, #121220);">
     <div class="container text-center">
       <img src="{% static 'assets/img/banner-pdl.jpeg' %}" alt="{% trans 'Logo Lineage 2' %}" class="img-fluid mb-4" style="max-height: 240px;">
       <h1 class="display-5 fw-bold text-white">{% trans 'Painel Definitivo Lineage - PDL' %}</h1>
       <p class="lead mb-4 text-white">{% trans 'Gerenciamento de Servidores de Lineage 2 com Python e Django' %}</p>
       <p class="text-white">{% trans 'A Solução Web Perfeita para Administração e Atração de Jogadores' %}</p>
     </div>
   </div>

  <div class="container py-5">
    <div class="row align-items-center mb-5">
      <div class="col-md-6">
        <h2 class="fw-bold">{% trans 'Por que usar Django e Python?' %}</h2>
        <p>{% trans 'Django é uma framework poderosa, segura e com uma administração pronta para uso, ideal para gerenciar servidores privados de Lineage 2.' %}</p>
        <ul>
          <li>{% trans 'Desenvolvimento rápido e escalável' %}</li>
          <li>{% trans 'Sistema de administração completo' %}</li>
          <li>{% trans 'Integração com APIs e bancos de dados' %}</li>
          <li>{% trans 'Alta segurança e flexibilidade' %}</li>
        </ul>
      </div>
      <div class="col-md-6">
        <img src="{% static 'assets/img/django-logo.png' %}" class="img-fluid" alt="{% trans 'Django Logo' %}">
      </div>
    </div>
  
    <div class="row mb-5">
      <div class="col-12">
        <h2 class="fw-bold text-center mb-4">{% trans 'Tecnologias de Ponta' %}</h2>
        <div class="row text-center">
          <div class="col-md-4 mb-4">
            <h5>{% trans 'Django' %}</h5>
            <p>{% trans 'Backbone sólido com segurança e escalabilidade.' %}</p>
          </div>
          <div class="col-md-4 mb-4">
            <h5>{% trans 'Docker + Nginx' %}</h5>
            <p>{% trans 'Deploy e entrega eficientes em qualquer ambiente.' %}</p>
          </div>
          <div class="col-md-4 mb-4">
            <h5>{% trans 'Celery + Redis' %}</h5>
            <p>{% trans 'Execução de tarefas assíncronas com performance.' %}</p>
          </div>
        </div>
      </div>
    </div>
  
    <div class="row mb-5">
      <div class="col-md-6">
        <h3 class="fw-bold">{% trans 'Painel Administrativo' %}</h3>
        <ul>
          <li>{% trans 'Gerenciamento de jogadores e servidores' %}</li>
          <li>{% trans 'Eventos, estatísticas e monitoramento' %}</li>
          <li>{% trans 'Integração com sistemas de pagamento' %}</li>
        </ul>
      </div>
      <div class="col-md-6">
        <h3 class="fw-bold">{% trans 'Site Público' %}</h3>
        <ul>
          <li>{% trans 'Cadastro, login e personalização de conta' %}</li>
          <li>{% trans 'Status do servidor e rankings' %}</li>
          <li>{% trans 'Notícias e suporte ao jogador' %}</li>
        </ul>
      </div>
    </div>
  
    <div class="row">
      <div class="col text-center">
        <h2 class="fw-bold mb-3">{% trans 'Participe do Futuro dos Servidores Privados' %}</h2>
        <p class="text-muted">{% trans 'O PDL é open source e está em constante evolução. Contribua, implemente, personalize e transforme a forma como servidores Lineage 2 são administrados.' %}</p>
        <a href="https://github.com/D3NKYT0/lineage" class="btn btn-primary btn-lg mt-3">{% trans 'Ver Projeto no GitHub' %}</a>
      </div>
    </div>
  </div>
{% endif %}

<!-- Modal: Sistema de Conta Mestre e Múltiplas Contas -->
<div class="modal fade" id="multiAccountModal" tabindex="-1" aria-labelledby="multiAccountModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content" style="background: linear-gradient(135deg, #1a1a2e 0%, #121220 100%); border: 2px solid #6f42c1; border-radius: 20px;">
      <div class="modal-header" style="background: linear-gradient(135deg, #6f42c1, #e83e8c); border-bottom: 2px solid #6f42c1; border-radius: 18px 18px 0 0;">
        <h5 class="modal-title text-white fw-bold" id="multiAccountModalLabel">
          <i class="fas fa-crown me-2"></i>{% trans "Sistema de Conta Mestre e Múltiplas Contas" %}
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" style="color: #f8f9fa; padding: 2rem;">
        <div class="mb-4">
          <h6 class="text-info mb-3" style="border-left: 4px solid #0dcaf0; padding-left: 1rem;">
            <i class="fas fa-info-circle me-2"></i>{% trans "O que é a Conta Mestre?" %}
          </h6>
          <p style="color: #e2e8f0; line-height: 1.8;">
            {% trans "A Conta Mestre é a primeira conta que verifica um endereço de e-mail. Ela tem o poder de gerenciar múltiplas contas do Lineage 2 através do sistema de delegação de acesso." %}
          </p>
        </div>

        <div class="mb-4">
          <h6 class="text-warning mb-3" style="border-left: 4px solid #ffc107; padding-left: 1rem;">
            <i class="fas fa-key me-2"></i>{% trans "Como funciona?" %}
          </h6>
          <ul style="color: #e2e8f0; line-height: 1.8; padding-left: 1.5rem;">
            <li>{% trans "Quando você verifica seu e-mail pela primeira vez, você se torna a Conta Mestre desse e-mail." %}</li>
            <li>{% trans "Se outras contas usarem o mesmo e-mail e verificarem, elas se tornam subordinadas à Conta Mestre." %}</li>
            <li>{% trans "A Conta Mestre pode delegar acesso de 'Contra Mestre' para outras contas do Lineage 2." %}</li>
            <li>{% trans "Contra mestres podem gerenciar as contas do Lineage que receberam permissão, mas não podem delegar novos acessos." %}</li>
          </ul>
        </div>

        <div class="mb-4">
          <h6 class="text-success mb-3" style="border-left: 4px solid #28a745; padding-left: 1rem;">
            <i class="fas fa-users-cog me-2"></i>{% trans "Gerenciar Múltiplas Contas" %}
          </h6>
          <p style="color: #e2e8f0; line-height: 1.8; margin-bottom: 1rem;">
            {% trans "Você pode alternar entre diferentes contas do Lineage 2 diretamente no painel:" %}
          </p>
          <ol style="color: #e2e8f0; line-height: 1.8; padding-left: 1.5rem;">
            <li>{% trans "Acesse" %} <a href="{% url 'server:manage_lineage_accounts' %}" class="text-info text-decoration-underline">{% trans "Gerenciar Contas Lineage" %}</a></li>
            <li>{% trans "Selecione a conta que deseja usar no momento" %}</li>
            <li>{% trans "Todas as funcionalidades (inventário, carteira, shop, etc.) usarão a conta selecionada" %}</li>
          </ol>
        </div>

        <div class="mb-4">
          <h6 class="text-danger mb-3" style="border-left: 4px solid #dc3545; padding-left: 1rem;">
            <i class="fas fa-exclamation-triangle me-2"></i>{% trans "Importante: Alteração de E-mail" %}
          </h6>
          <ul style="color: #e2e8f0; line-height: 1.8; padding-left: 1.5rem;">
            <li>{% trans "Se você alterar seu e-mail, precisará verificá-lo novamente." %}</li>
            <li>{% trans "Se você for a Conta Mestre e alterar o e-mail, perderá esse status." %}</li>
            <li>{% trans "Se você alterar para um e-mail que já tem uma Conta Mestre, se tornará subordinado a ela." %}</li>
            <li>{% trans "Pense bem antes de alterar seu e-mail se você for a Conta Mestre!" %}</li>
          </ul>
        </div>

        <div class="alert alert-info mt-4" style="background: linear-gradient(135deg, rgba(13, 202, 240, 0.15), rgba(13, 202, 240, 0.05)); border: 1px solid rgba(13, 202, 240, 0.3); border-radius: 12px;">
          <div class="d-flex align-items-start">
            <i class="fas fa-lightbulb text-info me-3 mt-1" style="font-size: 1.5rem;"></i>
            <div>
              <strong class="text-info">{% trans "Dica:" %}</strong>
              <p class="mb-0 mt-2" style="color: #e2e8f0;">
                {% trans "Use o mesmo e-mail em múltiplas contas do Lineage 2 para gerenciá-las todas de um único lugar. A primeira conta a verificar o e-mail se torna a mestre e pode delegar acesso para outras contas." %}
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer" style="background: rgba(15, 23, 42, 0.5); border-top: 1px solid rgba(111, 66, 193, 0.3); border-radius: 0 0 18px 18px;">
        <a href="{% url 'server:manage_lineage_accounts' %}" class="btn" style="background: linear-gradient(45deg, #6f42c1, #e83e8c); color: white; border: none; border-radius: 12px; padding: 0.5rem 1.5rem; font-weight: 600;">
          <i class="fas fa-cog me-2"></i>{% trans "Gerenciar Contas" %}
        </a>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" style="border-radius: 12px; padding: 0.5rem 1.5rem;">
          {% trans "Fechar" %}
        </button>
      </div>
    </div>
  </div>
</div>
{% endblock content %}
