:root{
    --radius: 16px;
    --radius-sm: 10px;
    --void: #1C1508;
    --panel: #2A2110;
    --panel-2: #362B15;
    --line: #4A3B1C;
    --parchment: #F5EFDD;
    --parchment-dim: #C9B98E;
    --gold: #D9A521;
    --gold-dim: #A67B1B;
    --moss: #4CE0A6;
    --ember: #FF7A5C;
    --violet: #B27CE0;
    --azure: #4CC3E0;
    --rose: #E0538C;
    --shadow: rgba(20,15,5,0.45);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0; overflow-x:hidden;}
  body{
    position:relative;
    background:
      radial-gradient(1100px 550px at 12% -8%, rgba(217,165,33,0.16), transparent 60%),
      radial-gradient(900px 500px at 100% 0%, rgba(76,224,166,0.10), transparent 55%),
      radial-gradient(800px 550px at 85% 60%, rgba(178,124,224,0.10), transparent 55%),
      radial-gradient(700px 500px at 50% 110%, rgba(166,123,27,0.16), transparent 60%),
      var(--void);
    background-attachment: fixed;
    color:var(--parchment);
    font-family:'Nunito', sans-serif;
    min-height:100vh;
  }

  /* ---------- SFONDO INTERATTIVO ANIMATO ---------- */
  .bg-orbs{
    position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  }
  .bg-orbs span{
    position:absolute; border-radius:50%; filter:blur(60px); opacity:0.28; mix-blend-mode:screen;
    animation: orb-drift 24s ease-in-out infinite;
  }
  .bg-orbs span:nth-child(1){ width:420px; height:420px; top:-10%; left:-8%; background:var(--gold); animation-duration:26s; }
  .bg-orbs span:nth-child(2){ width:360px; height:360px; top:60%; left:70%; background:var(--moss); animation-duration:22s; animation-direction:reverse; }
  .bg-orbs span:nth-child(3){ width:300px; height:300px; top:20%; left:55%; background:var(--violet); animation-duration:30s; }
  .bg-orbs span:nth-child(4){ width:340px; height:340px; top:80%; left:10%; background:var(--rose); animation-duration:20s; animation-direction:reverse; }
  .bg-orbs span:nth-child(5){ width:280px; height:280px; top:35%; left:5%; background:var(--azure); animation-duration:28s; }
  @keyframes orb-drift{
    0%{ transform:translate(0,0) scale(1); }
    33%{ transform:translate(40px,-30px) scale(1.12); }
    66%{ transform:translate(-30px,25px) scale(0.94); }
    100%{ transform:translate(0,0) scale(1); }
  }
  @media (prefers-reduced-motion: reduce){
    .bg-orbs span{ animation:none; }
  }
  a{color:inherit;}
  h1,h2,h3,.display{font-family:'Baloo 2', sans-serif; letter-spacing:0.01em;}
  .mono{font-family:'JetBrains Mono', monospace;}
  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--gold);
  }
  ::selection{background:var(--gold-dim); color:var(--void);}
  :focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

  /* ---------- NAV ---------- */
 .nav {
  position: sticky; 
  top: 0; 
  z-index: 50;
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  padding: 16px 32px;
  
  /* EFFETTO VETRO (GLASSMORPHISM) */
  background: rgba(28, 21, 8, 0.55) !important;
  backdrop-filter: blur(16px) saturate(180%); /* Sfocatura accentuata */
  -webkit-backdrop-filter: blur(16px) saturate(180%); /* Per compatibilità Safari */
  
  border-bottom: 1px solid rgba(217, 165, 33, 0.16);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  
  flex-wrap: wrap;
}
  .brand{display:flex; align-items:center; gap:10px; font-family:'Baloo 2',sans-serif; font-weight:700; font-size:18px; letter-spacing:0.06em;}
  .seal{
    width:30px; height:30px; border-radius:50%;
    border:1.5px solid var(--gold);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    background:var(--panel-2);
    transition:transform .2s ease, box-shadow .2s ease;
    transform-style:preserve-3d;
  }
  .seal:hover{ box-shadow:0 6px 16px rgba(217,165,33,0.35); }
  .seal img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }
  .nav-controls { display: flex; align-items: center; gap: 8px; }
  .nav-links{display:flex; gap:6px; align-items:center;}
  .nav-dropdown{position:relative;}
  .nav-dropdown-menu{
    position:absolute; top:100%; left:50%; transform:translateX(-50%);
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:6px; display:flex; flex-direction:column; gap:2px; min-width:150px;
    opacity:0; visibility:hidden; transition:opacity .15s ease;
    box-shadow:0 10px 30px var(--shadow); z-index:60; margin-top:8px;
  }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu{
    opacity:1; visibility:visible;
  }
  .nav-dropdown-menu .nav-btn{
    width:100%; justify-content:flex-start; gap:8px; padding:9px 12px; font-size:13px; color:var(--parchment-dim);
  }
  .nav-dropdown-menu .nav-btn span{white-space:nowrap;}
  .nav-btn{
    background:transparent; border:1px solid transparent; color:var(--parchment-dim);
    padding:9px 12px; border-radius:var(--radius-sm); font-size:13px; cursor:pointer;
    font-family:'Nunito', sans-serif; font-weight:500; letter-spacing:0.02em;
    transition:all .15s ease;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .nav-btn:hover{color:var(--parchment); border-color:var(--line);}
  .nav-btn.active{color:var(--void); background:var(--gold); border-color:var(--gold);}

  .mobile-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--parchment);
    padding: 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
  }

  /* ---------- SECTIONS wrapper ---------- */
  .view{display:none;}
  .view.active{display:block;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 32px;}

  /* ---------- HERO ---------- */
  .hero{padding:110px 32px 90px; position:relative; overflow:hidden; border-bottom:1px solid var(--line);}
  .hero::before{
    content:"";
    position:absolute; top:-120px; right:-80px; width:420px; height:420px; border-radius:50%;
    background:radial-gradient(circle, var(--gold) 0%, transparent 70%);
    opacity:0.22; filter:blur(10px);
    animation:float-blob 9s ease-in-out infinite;
    pointer-events:none;
  }
  .hero::after{
    content:"";
    position:absolute; bottom:-140px; left:10%; width:360px; height:360px; border-radius:50%;
    background:radial-gradient(circle, var(--gold-dim) 0%, transparent 70%);
    opacity:0.20; filter:blur(10px);
    animation:float-blob 11s ease-in-out infinite reverse;
    pointer-events:none;
  }
  @keyframes float-blob{
    0%,100%{ transform:translateY(0) translateX(0); }
    50%{ transform:translateY(24px) translateX(-16px); }
  }
  @media (prefers-reduced-motion: reduce){
    .hero::before, .hero::after{ animation:none; }
  }
  .hero-inner{max-width:1120px; margin:0 auto; position:relative; transition:transform .25s ease; transform-style:preserve-3d;}
  .hero .eyebrow{margin-bottom:18px;}
  .hero h1{font-size:clamp(36px,6vw,68px); line-height:1.05; margin:0 0 22px; max-width:820px; color:var(--parchment);}
  .hero h1 em{font-style:normal; color:var(--gold);}
  .hero p{font-size:17px; line-height:1.7; color:var(--parchment-dim); max-width:560px; margin:0 0 34px;}
  .cta-row{display:flex; gap:14px; flex-wrap:wrap;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 24px; border-radius:999px; font-size:14px; font-weight:700;
    cursor:pointer; border:1px solid transparent; text-decoration:none;
    font-family:'Nunito',sans-serif; letter-spacing:0.01em;
    transition:transform .15s ease, background .15s ease, border-color .15s ease;
  }
  .btn:hover{ transform:translateY(-2px) scale(1.02); }
  .btn:active{ transform:translateY(0) scale(0.98); }
  .btn-primary{background:linear-gradient(135deg, var(--gold) 0%, #F0C94A 60%, var(--gold) 100%); color:var(--void);}
  .btn-primary:hover{background:linear-gradient(135deg, #F0C94A 0%, var(--gold) 60%, #F0C94A 100%);}
  .btn-ghost{background:transparent; border-color:var(--line); color:var(--parchment);}

  /* ---------- STATISTICHE (NUMERI DELLA COMMUNITY) ---------- */
  .stats-band{
    position:relative;
    padding:0 32px 90px;
    margin-top:-10px;
  }
  .stats-grid{
    max-width:1120px; margin:0 auto;
    display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  }
  .stat-card{
    position:relative;
    background:linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px 20px;
    text-align:center;
    overflow:hidden;
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .stat-card::before{
    content:"";
    position:absolute; top:-40%; left:50%; transform:translateX(-50%);
    width:140%; height:120px; border-radius:50%;
    background:radial-gradient(circle, rgba(217,165,33,0.30), transparent 70%);
    pointer-events:none;
  }
  .stat-card:hover{ transform:translateY(-4px); border-color:var(--gold-dim); box-shadow:0 16px 34px rgba(10,8,2,0.35); }
  .stat-value{
    position:relative;
    font-family:'Baloo 2', sans-serif; font-weight:800; font-size:34px; line-height:1;
    background:linear-gradient(135deg, var(--parchment) 0%, var(--gold) 55%, var(--gold-dim) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    margin-bottom:8px;
  }
  .stat-label{
    position:relative;
    font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--parchment-dim);
  }
  @media (max-width: 768px){
    .stats-grid{ grid-template-columns:repeat(2,1fr); }
  }

  /* ---------- FEATURES / LORE / SHOP ---------- */
  .lore{padding:80px 32px; border-bottom:1px solid var(--line);}
  .section-head{margin-bottom:44px; max-width:600px;}
  .section-head h2{font-size:30px; margin:10px 0 12px; color:var(--parchment);}
  .section-head p{color:var(--parchment-dim); font-size:15px; line-height:1.6;}
  .grid-pass{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
  .pass-card{background:var(--panel); padding:32px 28px; border-radius:var(--radius); border:1px solid var(--line); transition:transform .15s ease, border-color .15s ease; display:flex; flex-direction:column;}
  .pass-card:hover{transform:translateY(-3px); border-color:var(--gold-dim);}
  .pass-card.max{border-color:var(--gold-dim); background:linear-gradient(160deg, var(--panel) 60%, rgba(217,165,33,0.10));}
  .pass-card h3{font-size:20px; margin:10px 0 8px; color:var(--parchment);}
  .pass-card p{font-size:13.5px; color:var(--parchment-dim); line-height:1.6; margin:0 0 20px; flex-grow:1;}
  .pass-card ul{margin:0 0 22px; padding-left:18px; font-size:13px; color:var(--parchment-dim); line-height:1.9;}
  .pass-card .btn{align-self:flex-start;}
  .team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .team-card{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:28px 24px; text-align:center;
    transition:transform .15s ease, border-color .15s ease;
  }
  .team-group{margin-bottom:44px;}
  .team-group:last-child{margin-bottom:0;}
  .team-group-label{
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--parchment-dim); margin-bottom:16px;
  }
  .team-card.alt{
    border-color:rgba(76,224,166,0.35);
    background:linear-gradient(160deg, var(--panel) 60%, rgba(76,224,166,0.08));
  }
  .team-card.alt:hover{border-color:var(--moss);}
  .team-card.alt .team-avatar{border-color:var(--moss);}
  .team-card.alt .team-role{color:var(--moss);}
  .team-card.red{
    border-color:rgba(255,122,92,0.35);
    background:linear-gradient(160deg, var(--panel) 60%, rgba(255,122,92,0.08));
  }
  .team-card.red:hover{border-color:var(--ember);}
  .team-card.red .team-avatar{border-color:var(--ember);}
  .team-card.red .team-role{color:var(--ember);}
  .team-card:hover{transform:translateY(-3px); border-color:var(--gold-dim);}
  .team-avatar{
    width:88px; height:88px; border-radius:50%; margin:0 auto 16px;
    overflow:hidden; border:2px solid var(--gold-dim); background:var(--panel-2);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .team-card:hover .team-avatar{ transform:scale(1.06); box-shadow:0 0 0 4px rgba(217,165,33,0.18), 0 10px 24px rgba(217,165,33,0.25); }
  .team-card.alt:hover .team-avatar{ box-shadow:0 0 0 4px rgba(76,224,166,0.18), 0 10px 24px rgba(76,224,166,0.25); }
  .team-card.red:hover .team-avatar{ box-shadow:0 0 0 4px rgba(255,122,92,0.18), 0 10px 24px rgba(255,122,92,0.25); }
  .team-avatar img{width:100%; height:100%; object-fit:cover;}
  .team-name{font-family:'Baloo 2',sans-serif; font-size:17px; color:var(--parchment); margin:0 0 4px;}
  .team-role{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold);}

  /* ---------- STORIA (TIMELINE VERTICALE) ---------- */
  .lore-timeline{
    position:relative;
    display:flex; flex-direction:column; gap:36px;
    max-width:760px;
    padding-left:34px;
  }
  .lore-timeline::before{
    content:"";
    position:absolute; top:6px; bottom:6px; left:7px; width:2px;
    background:linear-gradient(180deg, var(--gold) 0%, var(--gold-dim) 45%, var(--line) 100%);
  }
  .lore-era{
    position:relative;
    border-left:none;
    padding-left:26px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:22px 24px 22px 30px;
    transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .lore-era:hover{ transform:translateX(4px); border-color:var(--gold-dim); box-shadow:0 14px 30px rgba(10,8,2,0.3); }
  .lore-era::before{
    content:"";
    position:absolute; left:-34px; top:26px;
    width:16px; height:16px; border-radius:50%;
    background:radial-gradient(circle at 35% 35%, var(--parchment), var(--gold) 55%, var(--gold-dim) 100%);
    border:3px solid var(--void);
    box-shadow:0 0 0 2px var(--gold-dim);
  }
  .lore-era .num{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold);}
  .lore-era h3{font-size:19px; margin:10px 0 10px; color:var(--parchment);}
  .lore-era p{font-size:13.5px; line-height:1.7; color:var(--parchment-dim); margin:0;}
  @media (max-width: 768px){
    .lore-timeline{ padding-left:26px; }
    .lore-era::before{ left:-26px; }
  }
  .shop-preview{padding:80px 32px 100px;}

  /* ---------- PANEL VIEWS ---------- */
  .panel-head{padding:56px 32px 30px; border-bottom:1px solid var(--line); text-align:center;}
  .panel-head .eyebrow{margin-bottom:14px;}
  .panel-head h2{font-size:32px; margin:0 0 10px;}
  .panel-head p{color:var(--parchment-dim); font-size:14.5px; max-width:640px; line-height:1.6; margin:0 auto;}

  .panel-body{padding:40px 32px 100px;}
  .cycle-bar{
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:18px 24px; margin-bottom:32px; flex-wrap:wrap;
  }
  .cycle-left{display:flex; flex-direction:column; gap:6px;}
  .cycle-left .eyebrow{margin:0;}
  .cycle-track{width:260px; height:6px; background:var(--line); border-radius:99px; overflow:hidden;}
  .cycle-fill{height:100%; background:linear-gradient(90deg, var(--gold-dim), var(--gold));}
  .cycle-days{font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--parchment);}

  .table-responsive { width: 100%; overflow-x: auto; }
  table.roster{width:100%; border-collapse:collapse; font-size:13.5px; min-width: 650px;}
  table.roster thead th{
    text-align:left; padding:12px 14px; font-family:'JetBrains Mono',monospace;
    font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--parchment-dim);
    border-bottom:1px solid var(--line);
  }
  table.roster tbody td{padding:14px; border-bottom:1px solid var(--line); vertical-align:middle;}
  table.roster tbody tr:hover{background:rgba(255,255,255,0.02);}
  .member{display:flex; align-items:center; gap:10px;}
  .avatar{
    width:34px; height:34px; border-radius:50%; background:var(--panel-2); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-family:'Baloo 2',sans-serif; font-size:13px; color:var(--gold);
    flex-shrink:0; overflow:hidden;
  }
  .avatar img{width:100%; height:100%; object-fit:cover;}
  .mname{font-weight:600; color:var(--parchment);}
  .mrole{font-size:11.5px; color:var(--parchment-dim);}
  .score{font-family:'JetBrains Mono',monospace; font-weight:600; color:var(--parchment);}
  .badge{
    display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:99px;
    font-size:11px; font-family:'JetBrains Mono',monospace; letter-spacing:0.02em;
  }
  .badge.up{background:rgba(76,224,166,0.14); color:var(--moss); border:1px solid rgba(76,224,166,0.3);}
  .badge.down{background:rgba(255,122,92,0.14); color:var(--ember); border:1px solid rgba(255,122,92,0.3);}
  .badge.stable{background:rgba(183,175,152,0.1); color:var(--parchment-dim); border:1px solid var(--line);}
  .stars{color:var(--gold); font-size:12px; letter-spacing:1px;}
  .row-actions{display:flex; gap:6px;}
  .icon-btn{
    width:28px; height:28px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--panel-2);
    color:var(--parchment-dim); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center;
  }
  .icon-btn:hover{border-color:var(--gold-dim); color:var(--gold);}

  .formula-note{
    margin-top:34px; padding:18px 22px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    font-size:13px; color:var(--parchment-dim); line-height:1.7;
  }
  .formula-note strong{color:var(--parchment);}

  .locked{ padding:100px 32px; text-align:center; }
  .locked .seal-lg{
    width:56px; height:56px; border-radius:50%; border:1.5px solid var(--gold-dim); margin:0 auto 22px;
    display:flex; align-items:center; justify-content:center; font-family:'Baloo 2',sans-serif; color:var(--gold-dim); font-size:22px;
  }
  .locked h3{font-size:20px; margin:0 0 10px;}
  .locked p{color:var(--parchment-dim); font-size:14px; max-width:420px; margin:0 auto;}
  .access-panel{
    position:fixed; top:0; right:-360px; width:340px; height:100vh; z-index:200;
    background:var(--panel); border-left:1px solid var(--line);
    box-shadow:-20px 0 50px var(--shadow);
    transition:right .25s ease; overflow-y:auto;
  }
  .access-panel.open{ right:0; }
  .access-panel-inner{ padding:26px 22px; display:flex; flex-direction:column; gap:14px; }

  /* modal */
  .modal-bg{
    display:none; position:fixed; inset:0; background:rgba(8,10,8,0.7); backdrop-filter:blur(3px);
    z-index:100; align-items:center; justify-content:center; padding:16px;
  }
  .modal-bg.active{display:flex;}
  .modal{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); width:420px; max-width:100%;
    padding:26px; box-shadow:0 20px 60px var(--shadow); max-height:90vh; overflow-y:auto;
  }

    .modal{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); width:420px; max-width:100%;
    padding:26px; box-shadow:0 20px 60px var(--shadow); max-height:90vh; overflow-y:auto;
  }

  /* Scrollbar custom sottile e dorata per il modale */
  .modal{
    scrollbar-width: thin;
    scrollbar-color: var(--gold-dim) transparent;
  }
  .modal::-webkit-scrollbar{
    width: 6px;
  }
  .modal::-webkit-scrollbar-track{
    background: transparent;
  }
  .modal::-webkit-scrollbar-thumb{
    background: var(--gold-dim);
    border-radius: 99px;
  }
  .modal::-webkit-scrollbar-thumb:hover{
    background: var(--gold);
  }

  .modal h4{margin:0 0 18px; font-family:'Baloo 2',sans-serif; font-size:17px;}
  
  .modal h4{margin:0 0 18px; font-family:'Baloo 2',sans-serif; font-size:17px;}
  .field{margin-bottom:14px;}
  .field label{display:block; font-size:11.5px; color:var(--parchment-dim); margin-bottom:6px; font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:0.05em;}
  .field input, .field textarea, .field select{
    width:100%; background:var(--void); border:1px solid var(--line); color:var(--parchment);
    padding:9px 11px; border-radius:var(--radius-sm); font-size:13.5px; font-family:'Nunito',sans-serif;
  }
  .field textarea{resize:vertical; min-height:80px;}
  .modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:20px;}
  .btn-sm{padding:9px 16px; font-size:13px;}

  footer{padding:36px 32px; border-top:1px solid var(--line); text-align:center; color:var(--parchment-dim); font-size:12.5px;}

  /* ---------- RELAZIONI ESTERE ---------- */
  .rel-section{margin-top:48px; padding-top:40px; border-top:1px dashed var(--line);}
  .rel-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px;}
  .rel-head-text h3{font-size:20px; margin:8px 0 6px; color:var(--parchment); font-family:'Baloo 2',sans-serif;}
  .rel-head-text p{margin:0; font-size:13px; color:var(--parchment-dim); max-width:520px; line-height:1.6;}
  .rel-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:16px;}
  .rel-card{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:20px; position:relative; overflow:hidden;
    transition:transform .15s ease, border-color .15s ease;
  }
  .rel-card:hover{transform:translateY(-3px);}
  .rel-card::before{
    content:""; position:absolute; top:0; left:0; width:4px; height:100%;
    background:var(--rel-color, var(--gold));
  }
  .rel-card-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;}
  .rel-server-name{font-family:'Baloo 2',sans-serif; font-size:16px; color:var(--parchment); margin:0; word-break:break-word;}
  .rel-tag{
    display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:99px;
    font-size:10.5px; font-family:'JetBrains Mono',monospace; letter-spacing:0.03em; white-space:nowrap;
    background:color-mix(in srgb, var(--rel-color, var(--gold)) 16%, transparent);
    color:var(--rel-color, var(--gold));
    border:1px solid color-mix(in srgb, var(--rel-color, var(--gold)) 40%, transparent);
  }
  .rel-tag::before{content:"●"; font-size:8px;}
  .rel-motivo{font-size:12.5px; color:var(--parchment-dim); line-height:1.6; margin:0 0 16px; min-height:20px;}
  .rel-card-actions{display:flex; justify-content:flex-end; gap:8px; border-top:1px solid var(--line); padding-top:12px;}
  .rel-empty{
    padding:40px 24px; text-align:center; color:var(--parchment-dim); font-size:13.5px;
    background:var(--panel); border:1px dashed var(--line); border-radius:var(--radius);
  }
  .rel-select-preview{display:flex; align-items:center; gap:8px; margin-top:8px;}

  /* ---------- WYSIWYG TOOLBAR & EDITOR ---------- */
  .editor-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-bottom: none;
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
    padding: 6px 8px;
    flex-wrap: wrap;
  }
  .editor-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--parchment);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-family: 'Nunito', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: justify-content;
    min-width: 28px;
    height: 28px;
  }
  .editor-btn:hover {
    background: var(--panel);
    border-color: var(--line);
    color: var(--gold);
  }
  .editor-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: var(--void) url("data:image/svg+xml;utf8,<svg fill='%23ffffff' height='14' viewBox='0 0 24 24' width='14' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 8px center;
    border: 1px solid var(--line);
    color: var(--parchment);
    padding: 0 24px 0 8px !important;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    height: 32px !important;
    line-height: 32px !important;
    box-sizing: border-box !important;
    display: inline-block;
    vertical-align: middle;
  }
  .editor-content {
    min-height: 140px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--void);
    border: 1px solid var(--line);
    border-bottom-left-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
    padding: 10px 12px;
    color: var(--parchment);
    font-size: 13.5px;
    line-height: 1.6;
    outline: none;
  }
  .editor-content:focus {
    border-color: var(--gold);
  }
  .editor-content ul, .editor-content ol {
    margin: 6px 0;
    padding-left: 20px;
  }

  /* ---------- LOADER ---------- */
  html.is-loading, html.is-loading body{ overflow:hidden; height:100%; }
  .loader{
    position:fixed; inset:0; z-index:999;
    display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px;
    background:
      radial-gradient(900px 500px at 50% 32%, rgba(217,165,33,0.20), transparent 60%),
      var(--void);
    transition:opacity .65s ease, visibility .65s ease;
    perspective:800px;
  }
  .loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
  .loader-egg-wrap{ position:relative; width:118px; height:118px; display:flex; align-items:center; justify-content:center; margin-bottom:4px; }
  .loader-ring{ position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--line); border-top-color:var(--gold); animation:loader-spin 1.5s linear infinite; }
  .loader-ring.ring2{ inset:16px; border-top-color:var(--gold-dim); animation-duration:2.3s; animation-direction:reverse; opacity:.55; }
  @keyframes loader-spin{ to{ transform:rotate(360deg); } }
  .loader-emoji{ font-size:30px; line-height:1; animation:loader-emoji-bob 1.4s ease-in-out infinite; filter:drop-shadow(0 8px 14px rgba(0,0,0,0.4)); }
  @keyframes loader-emoji-bob{ 0%,100%{ transform:translateY(0) rotate(-6deg); } 50%{ transform:translateY(-8px) rotate(6deg); } }
  .loader-word{
    font-family:'Baloo 2', sans-serif; font-weight:800; font-size:42px; letter-spacing:0.08em;
    background:linear-gradient(135deg, var(--parchment), var(--gold) 55%, var(--gold-dim));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:loader-pulse 1.8s ease-in-out infinite; transform-style:preserve-3d; display:inline-block;
  }
  @keyframes loader-pulse{ 0%,100%{ transform:scale(1) rotateY(0deg); } 50%{ transform:scale(1.07) rotateY(10deg); } }
  .loader-sub{ font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.32em; text-transform:uppercase; color:var(--parchment-dim); }
  .loader-enter-btn{
    margin-top:10px;
    opacity:0; transform:translateY(8px);
    pointer-events:none;
    transition:opacity .4s ease, transform .4s ease;
  }
  .loader-enter-btn.show{ opacity:1; transform:translateY(0); pointer-events:auto; }

  /* ---------- 3D TILT & SCROLL REVEAL ---------- */
  .pass-card, .team-card, .rel-card, .lore-era{ transform-style:preserve-3d; will-change:transform; }
  .pass-card:hover, .team-card:hover{ box-shadow:0 22px 46px rgba(10,8,2,0.4); }

  .reveal{ opacity:0; transform:translateY(26px) rotateX(6deg); transform-origin:top center; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
  .reveal.in-view{ opacity:1; transform:translateY(0) rotateX(0deg); }
  .lore-timeline .reveal:nth-child(2){ transition-delay:.08s; }
  .lore-timeline .reveal:nth-child(3){ transition-delay:.16s; }
  .grid-pass .reveal:nth-child(2){ transition-delay:.1s; }
  .team-grid .reveal:nth-child(2){ transition-delay:.06s; }
  .team-grid .reveal:nth-child(3){ transition-delay:.12s; }
  .team-grid .reveal:nth-child(4){ transition-delay:.18s; }
  .team-grid .reveal:nth-child(5){ transition-delay:.24s; }
  .team-grid .reveal:nth-child(6){ transition-delay:.3s; }

  @media (prefers-reduced-motion: reduce){
    .loader-word, .loader-ring, .loader-emoji{ animation:none !important; }
    .reveal{ transition:none; opacity:1; transform:none; }
    .pass-card, .team-card, .rel-card, .lore-era{ transform:none !important; }
  }

/* ---------- TUTORATO ---------- */
.tutor-progress-banner {
  background: var(--panel); 
  border: 1px solid var(--line); 
  border-radius: var(--radius);
  padding: 18px 22px; 
  margin-bottom: 28px; 
  display: flex; 
  align-items: center; 
  gap: 18px; 
  flex-wrap: wrap;
}
.tutor-progress-ring-wrap { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.tutor-progress-ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tutor-progress-ring-bg { fill: none; stroke: var(--line); stroke-width: 6; }
.tutor-progress-ring-fill { fill: none; stroke: var(--gold); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.tutor-progress-ring-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--parchment);
}
.tutor-video-wrap {
  background: #000; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin-bottom: 14px;
}
.tutor-video-wrap video { width: 100%; display: block; max-height: 480px; background: #000; }
.tutor-video-controls {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--panel-2); flex-wrap: wrap;
}
.tutor-video-progress {
  flex: 1; min-width: 120px; height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; pointer-events: none;
}
.tutor-video-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); transition: width .2s linear; }
.tutor-video-note { font-size: 11.5px; color: var(--parchment-dim); margin: 0 0 24px; }

.quiz-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 14px;
}
.quiz-q-title { font-family: 'Baloo 2', sans-serif; font-size: 15.5px; color: var(--parchment); margin-bottom: 14px; }
.quiz-opts { display: flex; flex-direction: column; gap: 8px; }
.quiz-opt {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; font-size: 13.5px; transition: border-color .15s ease;
}
.quiz-opt:hover { border-color: var(--gold-dim); }
.quiz-opt input { accent-color: var(--gold); }
.quiz-opt.quiz-opt-correct { border-color: var(--moss); background: rgba(76,224,166,0.08); }
.quiz-opt.quiz-opt-wrong { border-color: var(--ember); background: rgba(255,122,92,0.08); }
.quiz-result { margin-top: 12px; font-size: 12.5px; font-family: 'JetBrains Mono', monospace; }
.quiz-result.ok { color: var(--moss); }
.quiz-result.ko { color: var(--ember); }

.tutor-admin-block {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; margin-bottom: 20px;
}
.tutor-admin-block h4 { margin: 0 0 14px; font-family: 'Baloo 2', sans-serif; font-size: 16px; color: var(--parchment); }

/* --- FIX DEFINITIVO MODALE QUIZ --- */
#quizModalBg .modal {
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  padding: 24px !important;
}

#quizOptionsContainer {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.quiz-opt-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.quiz-opt-row input[type="radio"] {
  accent-color: var(--gold);
  flex-shrink: 0 !important;
  margin: 0 !important;
  cursor: pointer;
  width: 18px !important;
  height: 18px !important;
}

.quiz-opt-row input[type="text"] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--panel-2, #110f0d) !important;
  color: var(--parchment, #fff) !important;
  border: 1px solid var(--line, #443c34) !important;
  border-radius: var(--radius-sm, 6px) !important;
  padding: 8px 12px !important;
  font-size: 0.9rem !important;
}

  /* ---------- RESPONSIVE MEDIA QUERIES ---------- */
  @media (max-width: 768px) {
    .nav { padding: 12px 16px; }
    .mobile-toggle { display: block; }
    .nav-links {
      display: none;
      width: 100%;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      padding-top: 12px;
      margin-top: 12px;
      border-top: 1px solid var(--line);
    }
    .nav-links.open { display: flex; }
    .nav-dropdown-menu {
      position: static;
      transform: none;
      opacity: 1;
      visibility: visible;
      box-shadow: none;
      margin-top: 4px;
      background: var(--panel-2);
    }
    .hero { padding: 60px 16px 40px; }
    .wrap { padding: 0 16px; }
    .lore, .shop-preview, .panel-head, .panel-body { padding-left: 16px; padding-right: 16px; }
    .grid-pass, .team-grid { grid-template-columns: 1fr; }
    .access-panel { width: 100%; right: -100%; }
    .cycle-track { width: 100%; }
  }

/* ---------- TITOLO E CURSORE REALE ---------- */
.hero-title-wrap {
  font-size: clamp(36px, 6vw, 68px);
  line-height: 1.15;
  margin: 0 0 22px 0;
  display: inline-block;
}

.type-line {
  display: inline;
}

/* Sfumatura per RolePlay */
.highlight-text {
  background: linear-gradient(135deg, var(--gold) 0%, #F0C94A 45%, var(--gold-dim) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Cursore verticale animato */
.typing-cursor {
  display: inline-block;
  width: 3px;
  height: 0.85em;
  background-color: var(--gold);
  margin-left: 4px;
  vertical-align: middle;
  animation: blink-cursor 0.7s infinite;
}

/* Animazione lampeggio */
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Classe aggiunta via JS per far sparire il cursore alla fine */
.typing-cursor.hide-cursor {
  display: none !important;
}
/* ---------- PULSANTI VETRO (GLASSMORPHISM) ---------- */
.btn-glass {
  background: rgba(217, 165, 33, 0.08) !important;
  backdrop-filter: blur(12px) opacity(1);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(217, 165, 33, 0.25) !important;
  color: var(--parchment) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease !important;
}

.btn-glass:hover {
  background: rgba(217, 165, 33, 0.18) !important;
  border-color: var(--gold) !important;
  color: #fff !important;
  box-shadow: 0 8px 25px rgba(217, 165, 33, 0.25);
  transform: translateY(-3px) scale(1.03) !important;
}

/* ---------- WIDGET STAFF IN BASSO A SINISTRA ---------- */
.staff-widget-fixed {
  position: fixed !important;
  bottom: 25px;
  left: 25px;
  z-index: 999;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Nasconde l'intero widget (loader o footer) */
.staff-widget-fixed.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* SVG Testo Incurvato */
.curved-text-svg {
  position: absolute;
  width: 90px;
  height: 90px;
  pointer-events: none;
  overflow: visible;
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* Classe aggiunta da JS per far sparire la scritta */
.curved-text-svg.fade-out {
  opacity: 0;
}

.curved-text-svg text {
  fill: var(--gold);
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* PULSANTE GIALLO / ORO */
.staff-btn-fixed {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, #F0C94A 100%);
  border: 1px solid var(--gold);
  color: var(--void); /* Icona scura per contrasto sul giallo */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(217, 165, 33, 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  z-index: 2;
}

.staff-widget-fixed:hover .staff-btn-fixed {
  background: linear-gradient(135deg, #F0C94A 0%, var(--gold) 100%);
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(217, 165, 33, 0.6);
}



/* ================================================================
   SEZIONE SHOP — REDESIGN COMPLETO
   ================================================================ */
.shop-section {
  position: relative;
  padding: 90px 0 100px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.shop-section::before{
  content:"";
  position:absolute; top:-10%; left:50%; transform:translateX(-50%);
  width:900px; height:420px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(217,165,33,0.14), transparent 70%);
  pointer-events:none; z-index:0;
}
.shop-section .wrap{ position:relative; z-index:1; }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

/* Card Articolo */
.shop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color .25s ease;
}
.shop-card::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(140deg, rgba(217,165,33,0.0) 40%, rgba(217,165,33,0.16) 100%);
  pointer-events:none;
}
.shop-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold-dim);
  box-shadow: 0 18px 40px rgba(10,8,2,0.4), 0 0 0 1px rgba(217,165,33,0.12);
}
.shop-card.featured{
  border-color: var(--gold-dim);
  background: linear-gradient(165deg, var(--panel) 0%, rgba(217,165,33,0.10) 100%);
}
.shop-card.featured:hover{ border-color: var(--gold); }

.shop-card-inner{
  position:relative;
  display:flex; flex-direction:column; gap:14px;
  padding: 22px 22px 20px;
  height:100%;
}

.shop-card-top{
  display:flex; align-items:center; gap:14px;
}

/* Div Logo Costante dell'Articolo */
.shop-item-logo {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 50%;
  border: 2px solid var(--gold-dim);
  overflow: hidden;
  background: var(--void);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px rgba(217,165,33,0.08);
}
.shop-item-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-badge {
  display:inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--void);
  background: linear-gradient(135deg, var(--gold), #F0C94A);
  padding: 4px 10px;
  border-radius: 999px;
}
.shop-badge.donation{
  color: var(--gold);
  background: rgba(217,165,33,0.12);
  border: 1px solid rgba(217,165,33,0.35);
}

.shop-card h3 {
  margin: 0;
  font-size: 17px;
  font-family:'Baloo 2', sans-serif;
  color: var(--parchment);
}

.shop-desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--parchment-dim);
  margin: 0;
  flex-grow: 1;
}

.shop-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.shop-footer .price {
  display:flex; align-items:baseline; gap:4px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 18px;
  background:linear-gradient(135deg, var(--parchment), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.shop-footer .price .unit{
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px; font-weight:600; letter-spacing:.03em;
  -webkit-text-fill-color: var(--parchment-dim);
  color: var(--parchment-dim);
}

.btn-sm {
  padding: 8px 16px;
  font-size: 12.5px;
}

/* ---------- BOTTONE DISABILITATO ---------- */
.btn.disabled,
a.btn.disabled {
  background: linear-gradient(135deg, #35301f, #2a2513) !important;
  border-color: var(--line) !important;
  color: var(--parchment-dim) !important;
  cursor: not-allowed !important; /* Mostra l'icona del divieto */
  pointer-events: auto !important; /* Mantiene attiva l'interazione per mostrare il cursore not-allowed */
  box-shadow: none !important;
  transform: none !important;
  opacity: 0.6;
}

.btn.disabled:hover,
a.btn.disabled:hover {
  background: linear-gradient(135deg, #35301f, #2a2513) !important;
  border-color: var(--line) !important;
  color: var(--parchment-dim) !important;
  transform: none !important; /* Blocca l'effetto spinta verso l'alto */
  box-shadow: none !important;
}

/* Banner Pulsante Eventi */
.events-cta-container {
  width: 100%;
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.events-cta-card {
  background: linear-gradient(135deg, #241d0f 0%, #161206 100%);
  border: 1px solid var(--gold-dim);
  border-radius: 12px;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.badge-live {
  background: linear-gradient(135deg, var(--gold), #F0C94A);
  color: var(--void);
  font-size: 0.75rem;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 1px;
}

.btn-events {
  background: linear-gradient(135deg, var(--gold) 0%, #F0C94A 100%);
  color: var(--void);
  font-weight: bold;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s, background 0.2s;
}

.btn-events:hover {
  background: linear-gradient(135deg, #F0C94A 0%, var(--gold) 100%);
  transform: translateY(-2px);
}

/* Grid & Cards Eventi */
.events-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1200px;
  margin: 2rem auto;
}

.event-card {
  background: #1a1714;
  border: 1px solid #332d27;
  border-radius: 12px;
  width: 350px;
  padding: 1.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* STATO TEMPORALE BADGES */
.status-tag {
  display: inline-block !important;
  margin-bottom: 12px !important;
  clear: both !important;
}
.status-in_progress { background: var(--gold); color: var(--void); }
.status-upcoming { background: #eccc68; color: #000; }
.status-ended { background: #57606f; color: #fff; }

/* EVENTO SPECIALE (Animazione Bordo & Bagliore) */
.event-card.event-special {
  border: 2px solid transparent;
  background-image: linear-gradient(#1a1714, #1a1714), linear-gradient(90deg, var(--gold), #F0C94A, var(--gold-dim));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  animation: animatedBorder 4s linear infinite;
  box-shadow: 0 0 20px rgba(217, 165, 33, 0.35);
}

/* FIX: Forza l'allineamento a sinistra e la disposizione verticale */
.event-card {
  text-align: left !important;
  align-items: flex-start !important;
}

/* FIX: Mette il tag su una riga tutta sua in alto a sinistra */
.status-tag {
  display: block !important;
  width: fit-content !important;
  margin-bottom: 12px !important;
}

/* FIX: Spinge il titolo a capo sotto il tag */
.event-card h3 {
  display: block !important;
  width: 100% !important;
  margin-top: 0 !important;
}

@keyframes animatedBorder {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}


/* Container Principale Admin */
.admin-events-card {
  background: #191613;
  border: 1px solid #332d27;
  border-radius: 12px;
  padding: 2rem;
  max-width: 800px;
  margin: 2rem auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  color: #e0e0e0;
}

.admin-card-header h3 {
  color: var(--gold);
  margin-bottom: 4px;
  font-size: 1.4rem;
}

.admin-card-header h4 {
  color: var(--gold-dim);
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.admin-card-header p {
  color: #888;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

/* Form Styles */
.admin-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.form-row {
  display: flex;
  gap: 16px;
}

.admin-form label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #bbb;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-form input[type="text"],
.admin-form input[type="datetime-local"],
.admin-form textarea {
  background: #110f0d;
  border: 1px solid #443c34;
  border-radius: 8px;
  padding: 10px 14px;
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}

.admin-form input:focus,
.admin-form textarea:focus {
  border-color: var(--gold);
}

.form-checkbox-group {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #221d18;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px dashed #55483a;
  cursor: pointer;
}

.form-checkbox-group label {
  text-transform: none;
  color: #ffbe76;
  cursor: pointer;
  margin: 0;
}

/* Pulsanti Admin */
.btn-admin-primary {
  background: linear-gradient(135deg, var(--gold) 0%, #F0C94A 100%);
  color: #000;
  font-weight: bold;
  padding: 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s, transform 0.1s;
}

.btn-admin-primary:hover {
  background: linear-gradient(135deg, #F0C94A 0%, var(--gold) 100%);
  transform: translateY(-1px);
}

.admin-divider {
  height: 1px;
  background: #332d27;
  margin: 2rem 0;
}

/* Lista Eventi in Admin */
.admin-events-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-event-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #221e1a;
  border: 1px solid #38312a;
  padding: 12px 16px;
  border-radius: 8px;
}

.admin-event-item.is-special {
  border-left: 4px solid var(--gold);
}

.btn-delete {
  background: #eb4d4b;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-delete:hover {
  background: #ff5252;
}

/* Card Eventi Standard (Più grandi e larghe) */
.team-card {
  width: 100% !important;
  max-width: 650px !important;
  min-height: 250px;
  background: #191613;
  border: 1px solid #332d27;
  border-radius: 12px;
  padding: 2rem;
  margin: 15px auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

/* Card Evento Speciale */
.team-card.event-special {
  border: 2px solid var(--gold);
  box-shadow: 0 0 25px rgba(217, 165, 33, 0.3);
  background: linear-gradient(145deg, #1d1810, #120e14);
}

/* Titolo Animato Disco / Bubble per Eventi Speciali */
.event-special-title {
  display: inline-block;
  font-size: 1.8rem;
  font-weight: 900;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--gold), #F0C94A, var(--gold-dim), var(--gold));
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: discoGlow 3s ease infinite, bubblePulse 2s ease-in-out infinite;
}

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

@keyframes bubblePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04) translateY(-2px); }
}

/* Gestione degli A Capo nella Descrizione */
.event-description {
  white-space: pre-wrap;
  word-break: break-word;
  color: #ccc;
  line-height: 1.6;
}

/* Toolbar & Rich Editor Admin */
.editor-toolbar {
  display: flex;
  gap: 6px;
  background: #25201b;
  padding: 6px;
  border-radius: 8px 8px 0 0;
  border: 1px solid #443c34;
  border-bottom: none;
}

.editor-toolbar button, .editor-toolbar select {
  background: #110f0d;
  color: #fff;
  border: 1px solid #443c34;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

.editor-toolbar button:hover {
  background: var(--gold);
  color: #000;
}

.rich-editor {
  background: #110f0d;
  border: 1px solid #443c34;
  border-radius: 0 0 8px 8px;
  padding: 12px;
  min-height: 100px;
  color: #fff;
  outline: none;
}
.rich-editor[placeholder]:empty:before {
  content: attr(placeholder);
  color: #666;
}


/* Editor WYSIWYG Dark Integrato */
.dark-rich-editor {
  background: #110f0d !important;
  color: #fff !important;
  border: 1px solid #443c34 !important;
  border-radius: 0 0 8px 8px;
  padding: 12px 14px;
  min-height: 120px;
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  overflow-y: auto;
  white-space: pre-wrap;
}

.dark-rich-editor:focus {
  border-color: var(--gold) !important;
}

.dark-rich-editor[placeholder]:empty:before {
  content: attr(placeholder);
  color: #666;
  cursor: text;
}

/* Toolbar Formattazione */
.editor-toolbar {
  display: flex;
  gap: 6px;
  background: #25201b;
  padding: 8px 10px;
  border-radius: 8px 8px 0 0;
  border: 1px solid #443c34;
  border-bottom: none;
}

.editor-toolbar button {
  background: #110f0d;
  color: var(--gold);
  border: 1px solid #443c34;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: bold;
}

.editor-toolbar button:hover {
  background: var(--gold);
  color: #000;
}

#heroLogo:hover {
  border-color: var(--gold);
  box-shadow: 0 0 40px rgba(255, 193, 7, 0.5);
  transform: scale(1.05);
}

#heroLogo.logo-active {
  border-color: var(--gold);
  box-shadow: 0 0 45px rgba(255, 193, 7, 0.6);
}

/* ---------- STAFF DETAIL MODAL ---------- */
.member.clickable{ cursor:pointer; }
.member.clickable:hover .mname{ color:var(--gold); }
.staff-detail-header{ display:flex; align-items:center; gap:16px; padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.staff-detail-avatar{ width:64px; height:64px; border-radius:50%; overflow:hidden; border:2px solid var(--gold-dim); background:var(--panel-2); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:'Baloo 2',sans-serif; font-size:24px; color:var(--gold); }
.staff-detail-avatar img{ width:100%; height:100%; object-fit:cover; }
.staff-detail-name{ font-family:'Baloo 2',sans-serif; font-size:20px; color:var(--parchment); margin:0 0 4px; }
.staff-detail-sub{ font-size:12.5px; color:var(--parchment-dim); }
.staff-detail-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px; }
.staff-stat-box{ background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; }
.staff-stat-label{ font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:var(--parchment-dim); margin-bottom:4px; }
.staff-stat-value{ font-size:15px; font-weight:700; color:var(--parchment); }
.staff-detail-section{ margin-bottom:24px; }
.staff-detail-section h5{ font-family:'Baloo 2',sans-serif; font-size:14px; color:var(--gold); margin:0 0 10px; text-transform:uppercase; letter-spacing:0.03em; }
.staff-calendar{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.staff-cal-day{ aspect-ratio:1; border-radius:6px; background:var(--panel-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--parchment-dim); }
.staff-cal-day.absent{ background:rgba(255,122,92,0.18); border-color:rgba(255,122,92,0.45); color:var(--ember); font-weight:700; }
.staff-cal-day.today{ box-shadow:0 0 0 1.5px var(--gold) inset; }
.staff-cal-legend{ display:flex; gap:16px; margin-top:10px; font-size:11px; color:var(--parchment-dim); }
.staff-cal-legend span{ display:inline-flex; align-items:center; gap:6px; }
.staff-cal-dot{ width:9px; height:9px; border-radius:3px; display:inline-block; }
.staff-warn-item, .staff-log-item{ background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:8px; font-size:12.5px; }
.staff-warn-item .swi-top{ margin-bottom:4px; }
.staff-warn-item .swi-motivo{ color:var(--parchment-dim); line-height:1.5; }
.staff-log-item{ display:block; }
.staff-log-item .sli-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.staff-log-item.positive{ border-left:3px solid var(--moss); }
.staff-log-item.negative{ border-left:3px solid var(--ember); }
.staff-empty-mini{ font-size:12px; color:var(--parchment-dim); font-style:italic; }




  /* ---------- RESTYLING ERP: SFONDO + EVENTI ---------- */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    pointer-events:none;
    opacity:.32;
    background-image:
      linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:42px 42px;
    mask-image:radial-gradient(ellipse at center, black 25%, transparent 85%);
  }
  body::after{
    content:"";
    position:fixed;
    inset:-20%;
    z-index:-3;
    pointer-events:none;
    background:
      conic-gradient(from 210deg at 20% 30%, rgba(217,165,33,.14), transparent 20%, rgba(240,201,74,.10), transparent 45%, rgba(166,123,27,.10), transparent 70%, rgba(217,165,33,.09), transparent 90%);
    filter:blur(50px);
    animation:erpAmbient 18s ease-in-out infinite alternate;
  }
  @keyframes erpAmbient{
    from{transform:translate3d(-2%, -1%, 0) rotate(0deg) scale(1);}
    to{transform:translate3d(2%, 1%, 0) rotate(5deg) scale(1.05);}
  }
  .events-grid, #events-list-container{
    position:relative;
  }
  #events-list-container{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    align-items:stretch;
    max-width:1200px !important;
    padding:0 20px;
  }
  #events-list-container .team-card{
    width:100%;
    min-height:270px;
    background:linear-gradient(145deg, rgba(54,43,21,.82), rgba(26,23,20,.72));
    backdrop-filter:blur(12px);
    border-color:rgba(217,165,33,.18);
    box-shadow:0 16px 40px rgba(0,0,0,.22);
  }
  #events-list-container .team-card:hover{
    transform:translateY(-6px);
    border-color:rgba(217,165,33,.65);
    box-shadow:0 22px 50px rgba(0,0,0,.32);
  }
  .event-description{
    color:var(--parchment-dim);
    line-height:1.65;
    font-size:13.5px;
  }
  .status-tag{
    border-radius:999px !important;
    padding:5px 10px !important;
    font-family:'JetBrains Mono',monospace;
    font-size:10px !important;
    letter-spacing:.06em;
    box-shadow:0 5px 16px rgba(0,0,0,.18);
  }
  .admin-events-card{
    background:linear-gradient(145deg, rgba(54,43,21,.90), rgba(26,23,20,.82)) !important;
    backdrop-filter:blur(14px);
    border-color:rgba(217,165,33,.35) !important;
    box-shadow:0 22px 55px rgba(0,0,0,.28) !important;
  }
  .admin-event-item{
    border:1px solid rgba(255,255,255,.07);
    transition:transform .18s ease,border-color .18s ease,background .18s ease;
  }
  .admin-event-item:hover{
    transform:translateY(-2px);
    border-color:rgba(217,165,33,.4);
    background:#2a241b !important;
  }
  .team-card .team-discord{
    display:block;
    margin-top:7px;
    font-family:'JetBrains Mono',monospace;
    font-size:10.5px;
    color:var(--gold);
    opacity:.9;
  }
  @media (prefers-reduced-motion:reduce){
    body::after{animation:none;}
  }



  /* ---------- NAV RESTYLE: TABS, MORE MENU, THEME TOGGLE (AGGIUNTA) ---------- */
.nav-tab{
  position:relative;
  background:transparent !important;
  border:1px solid transparent !important;
  color:var(--parchment-dim);
  padding:9px 6px;
  margin:0 8px;
}
.nav-tab:hover{ color:var(--parchment); }
.nav-tab.active{ color:var(--gold) !important; background:transparent !important; }
.nav-tab::after{
  content:"";
  position:absolute; left:10px; right:10px; bottom:1px;
  height:2px; background:var(--gold); border-radius:2px;
  transform:scaleX(0); transform-origin:center;
  transition:transform .25s ease;
}
.nav-tab.active::after{ transform:scaleX(1); }

.nav-controls{ display:flex; align-items:center; gap:10px; }

.theme-toggle-btn{
  width:38px; height:38px; flex-shrink:0;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.theme-toggle-btn:hover{ transform:scale(1.08) rotate(8deg); border-color:var(--gold-dim); }
.theme-toggle-btn .icon-moon{ display:none; }
html.light-theme .theme-toggle-btn .icon-sun{ display:none; }
html.light-theme .theme-toggle-btn .icon-moon{ display:block; }

.nav-more-wrap{ position:relative; }
.more-menu-btn{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  background:transparent;
  border:1px solid var(--line);
  color:var(--parchment);
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.more-menu-btn:hover{ border-color:var(--gold-dim); color:var(--gold); }

.nav-more-menu{
  position:absolute; top:100%; right:0; margin-top:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:6px; display:flex; flex-direction:column; gap:2px; min-width:180px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  box-shadow:0 14px 34px var(--shadow); z-index:60;
}
.nav-more-menu.open{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-more-menu .nav-btn{
  width:100%; justify-content:flex-start; gap:8px; padding:9px 12px; font-size:13px; color:var(--parchment-dim);
}
.nav-more-menu .nav-btn:hover{ color:var(--parchment); background:var(--panel-2); }
.nav-more-sep{ height:1px; background:var(--line); margin:4px 2px; }

/* forza i tab Home/Team visibili anche sotto i 768px (sostituisce il vecchio nav-links a scomparsa) */
@media (max-width:768px){
  #navLinks{ display:flex !important; }
}
@media (max-width:480px){
  .nav-tab span{ display:none; }
  .brand{ font-size:15px; }
}

/* ---------- MODALITÀ CHIARA ---------- */
html.light-theme{
  --void:#F6F1E3;
  --panel:#FFFFFF;
  --panel-2:#F1E9D3;
  --line:#E2D6AF;
  --parchment:#2A2110;
  --parchment-dim:#6E5E38;
  --gold:#B8860B;
  --gold-dim:#8A650E;
  --shadow:rgba(120,100,50,0.18);
}
html.light-theme body{
  background:
    radial-gradient(1100px 550px at 12% -8%, rgba(184,134,11,0.10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(76,224,166,0.08), transparent 55%),
    radial-gradient(800px 550px at 85% 60%, rgba(178,124,224,0.08), transparent 55%),
    radial-gradient(700px 500px at 50% 110%, rgba(166,123,27,0.10), transparent 60%),
    var(--void);
}
html.light-theme .bg-orbs span{ opacity:0.14; }
html.light-theme body::before{ opacity:.18; }
html.light-theme body::after{ opacity:.5; }
html.light-theme .loader{
  background:
    radial-gradient(900px 500px at 50% 32%, rgba(184,134,11,0.14), transparent 60%),
    var(--void);
}



/* ---------- FIX TEMA CHIARO: BANNER EVENTI (STEP 1) ---------- */
html.light-theme .events-cta-card{
  background: linear-gradient(135deg, #FFFFFF 0%, #F1E9D3 100%) !important;
  border-color: var(--gold-dim) !important;
  box-shadow: 0 8px 24px rgba(120,100,50,0.15) !important;
}
html.light-theme .events-cta-info h2{ color: var(--parchment); }
html.light-theme .events-cta-info p{ color: var(--parchment-dim); }
html.light-theme #view-events > div > p{ color: var(--parchment-dim) !important; }

/* ---------- TEAM VIEW REDESIGN (STEP 2) ---------- */
.team-grid-icons{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.team-grid-icons .team-card{
  position: relative;
  overflow: hidden;
  padding: 38px 24px 32px;
}
.team-grid-icons .team-card::before{
  content: "";
  position: absolute;
  top: -70px; left: 50%;
  transform: translateX(-50%);
  width: 240px; height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217,165,33,0.20), transparent 70%);
  pointer-events: none;
}
.team-card.founder{
  border-color: rgba(217,165,33,0.45);
  background: linear-gradient(160deg, var(--panel) 55%, rgba(217,165,33,0.12));
}
.team-card.founder:hover{ border-color: var(--gold); }
.team-card.founder .team-avatar{ border-color: var(--gold); }
.team-card.founder .team-role{ color: var(--gold); }
.icon-avatar{
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-dim);
}
.team-card.founder .icon-avatar{ color: var(--gold); }
.team-card.red .icon-avatar{ color: var(--ember); }
.team-card.alt .icon-avatar{ color: var(--moss); }
.team-grid-icons .team-role{
  display: inline-block;
  margin-top: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 10.5px;
}

/* ---------- FEEDBACK ANONIMO (STEP 3) ---------- */
.feedback-form{
  max-width: 620px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}
.feedback-form .field{ margin-bottom: 16px; }
.feedback-form label{
  display: block;
  font-size: 11.5px;
  color: var(--parchment-dim);
  margin-bottom: 8px;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.feedback-form textarea{
  width: 100%;
  background: var(--void);
  border: 1px solid var(--line);
  color: var(--parchment);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-family: 'Nunito', sans-serif;
  resize: vertical;
  min-height: 90px;
  box-sizing: border-box;
}
.feedback-form textarea:focus{ border-color: var(--gold); outline: none; }
.star-rating{ display: flex; gap: 4px; }
.star-rating button{
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--line);
  transition: transform .15s ease, color .15s ease;
  padding: 0 2px;
  line-height: 1;
}
.star-rating button.on{
  color: var(--gold);
  text-shadow: 0 0 12px rgba(217,165,33,0.45);
}
.star-rating button:hover{ transform: scale(1.18); }
.feedback-note{ font-size: 11.5px; color: var(--parchment-dim); margin: 10px 0 0; }
.fb-stars{ color: var(--gold); font-size: 14px; letter-spacing: 2px; }


  /* ---------- TOAST NOTIFICATIONS ---------- */
  #toastContainer{
    position:fixed; top:18px; right:18px; z-index:1200;
    display:flex; flex-direction:column; gap:10px;
    max-width:min(360px, calc(100vw - 36px));
    pointer-events:none;
  }
  .toast{
    pointer-events:auto;
    display:flex; align-items:flex-start; gap:10px;
    background:linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%);
    border:1px solid var(--line);
    border-left:3px solid var(--gold);
    color:var(--parchment);
    padding:12px 14px 14px;
    border-radius:var(--radius-sm);
    box-shadow:0 14px 34px rgba(0,0,0,.35);
    font-size:13.5px; line-height:1.5;
    position:relative; overflow:hidden;
    transform:translateX(120%); opacity:0;
    transition:transform .35s cubic-bezier(.2,.9,.3,1.15), opacity .3s ease;
  }
  .toast.show{ transform:translateX(0); opacity:1; }
  .toast-success{ border-left-color:var(--moss); }
  .toast-error{ border-left-color:var(--ember); }
  .toast-info{ border-left-color:var(--gold); }
  .toast-icon{
    flex-shrink:0; width:22px; height:22px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:800; margin-top:1px;
  }
  .toast-success .toast-icon{ background:rgba(76,224,166,.15); color:var(--moss); }
  .toast-error .toast-icon{ background:rgba(255,122,92,.15); color:var(--ember); }
  .toast-info .toast-icon{ background:rgba(217,165,33,.15); color:var(--gold); }
  .toast-msg{ flex:1; word-break:break-word; }
  .toast-close{
    background:none; border:none; color:var(--parchment-dim);
    cursor:pointer; font-size:13px; padding:0 0 0 6px; line-height:1; font-family:inherit;
  }
  .toast-close:hover{ color:var(--parchment); }
  .toast-bar{
    position:absolute; left:0; bottom:0; height:3px; width:100%;
    background:linear-gradient(90deg, var(--gold-dim), var(--gold));
    transform-origin:left;
    animation:toast-timer linear forwards;
  }
  .toast-success .toast-bar{ background:linear-gradient(90deg, rgba(76,224,166,.4), var(--moss)); }
  .toast-error .toast-bar{ background:linear-gradient(90deg, rgba(255,122,92,.4), var(--ember)); }
  @keyframes toast-timer{ from{ transform:scaleX(1);} to{ transform:scaleX(0);} }
  @media (prefers-reduced-motion: reduce){ .toast{ transition:none; } .toast-bar{ animation:none; } }

  /* ---------- STATO VIDEO NEL PANNELLO TUTORATO (ADMIN) ---------- */
  .tutor-video-status{
    display:flex; gap:14px; align-items:flex-start;
    background:var(--void); border:1px solid var(--line);
    border-radius:var(--radius-sm); padding:14px; margin-bottom:16px;
  }
  .tutor-video-status.empty{ border-style:dashed; opacity:.85; }
  .tvs-icon{ font-size:26px; line-height:1; flex-shrink:0; }
  .tvs-info{ flex:1; min-width:0; }
  .tvs-title{ font-weight:800; color:var(--parchment); margin-bottom:3px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .tvs-badge{
    font-family:'JetBrains Mono',monospace; font-size:9.5px; padding:3px 8px; border-radius:999px;
    background:rgba(76,224,166,.12); color:var(--moss); border:1px solid rgba(76,224,166,.35);
    text-transform:uppercase; letter-spacing:.04em;
  }
  .tvs-badge.warn{ background:rgba(217,165,33,.12); color:var(--gold); border-color:rgba(217,165,33,.35); }
  .tvs-meta{ font-size:11.5px; color:var(--parchment-dim); font-family:'JetBrains Mono',monospace; margin-bottom:8px; word-break:break-all; }
  .tvs-preview video{ max-width:100%; max-height:160px; border-radius:8px; background:#000; display:block; }
  .tvs-actions{ display:flex; flex-direction:column; gap:8px; flex-shrink:0; }
  .btn-danger{
    background:linear-gradient(135deg,#c0392b,#e74c3c) !important;
    color:#fff !important; border:1px solid #e74c3c !important;
  }
  .btn-danger:hover{ filter:brightness(1.1); }