.tpmx { font-family: "Gruppo", sans-serif; color:#e9edf3; }
    .tpmx .tpmx-head {
      max-width:1200px; margin:0 auto 18px;
      display:flex; align-items:center; justify-content:space-between; gap:12px;
    }
    .tpmx .tpmx-title { font-size:28px; letter-spacing:.3px; line-height:1.2; }
    .tpmx .tpmx-title .tpmx-accent {
      display:inline-block; height:3px; width:86px; margin-top:8px;
      background:linear-gradient(90deg,#7aa2ff,#9b5cff,#ff6ec7); border-radius:3px;
    }
    .tpmx .tpmx-cta {
      color:#3C73A8; padding:6px 10px; font-weight:700; font-size:18px; text-decoration:none;
      border:1px solid rgba(255,255,255,.18); border-radius:8px; background:rgba(24,26,34,.85);
    }
    .tpmx .tpmx-cta:hover { color:#fff; background:#3C73A8; }


    .tpmx .tpmx-grid {
      max-width:1200px; margin:0 auto;
      display:flex; flex-wrap:wrap; gap:16px;
    }


    .tpmx .tpmx-card {
      position:relative; display:flex; gap:14px; width:100%; max-width:95%; padding:16px; border-radius:18px;
      background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.14);
      box-shadow:0 10px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
      -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; margin:5px;
    }
    .tpmx .tpmx-card:hover {
      transform:translateY(-2px);
      box-shadow:0 16px 40px rgba(0,0,0,.55), 0 0 32px rgba(155,92,255,.12);
      border-color:rgba(122,162,255,.45);
      background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
    }
    .tpmx .tpmx-card::before {
      content:''; position:absolute; inset:0; border-radius:18px; padding:1px;
      background:conic-gradient(from 140deg, rgba(122,162,255,.55), rgba(155,92,255,.45), rgba(255,110,199,.38), rgba(122,162,255,.55));
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite:xor; mask-composite:exclude;
      opacity:.0; transition:opacity .2s ease; pointer-events:none;
    }
    .tpmx .tpmx-card:hover::before { opacity:.6; }

    /* Card content */
    .tpmx .tpmx-info { 
        flex:1 1 auto; 
        min-width:0; 
        display:flex; 
        flex-direction:column; 
        gap:8px; }
    .tpmx .tpmx-top { 
        display:flex; 
        
        
        flex-wrap:wrap;
         align-items:flex-start;       /* chips align from the top when they wrap */
  gap:6px 8px;
        
        }
    .tpmx .tpmx-badge {
      font-size:14px;font-weight:bold; letter-spacing:2px; padding:4px 8px; border-radius:999px;
      border:1px solid rgba(255,255,255,.18);
      
    }
    .tpmx .tpmx-card-title { font-size:20px; font-weight:600; color:#f4f6fb; }
    .tpmx .tpmx-text { font-size:16px; line-height:1.5; color:#cfd6e3; }
    .tpmx .tpmx-actions { display:flex; gap:8px; flex-wrap:wrap; }
    .tpmx .tpmx-btn {
      appearance:none; cursor:pointer; border-radius:10px; padding:8px 10px; font-size:12px;
      color:#e8ecf1; background:rgba(24,26,34,.85); border:1px solid rgba(255,255,255,.18); text-decoration:none;
      transition:background .15s ease, transform .15s ease, border-color .15s ease;
    }
    .tpmx .tpmx-btn:hover { background:rgba(38,41,52,.95); transform:translateY(-1px); }
    .tpmx .tpmx-btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(122,162,255,.5); border-color:rgba(122,162,255,.7); }
    .tpmx-btn-onlybackgroundone {
        background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.06)) padding-box,
    linear-gradient(90deg,#1b2212,#27361a,#1e2b15) border-box;
    }
    .li-dotted-box {padding:2px 2px 2px 5px; border:1px dotted #313131; border-radius:5px;margin:5px;list-style-type: none;}
    .li-dotted-box:hover {background:#000000;opacity:0.7;}
    /* Side panel */
    .tpmx .tpmx-side {
      flex:0 0 280px; 
       
      align-self:center; 
      border-radius:14px; 
      overflow:hidden;
      border:1px solid rgba(255,255,255,.15); 
      box-shadow:0 10px 24px rgba(0,0,0,.45); 
      background:#0a0b0f;
      
      display:flex;
    flex-direction:column;
    justify-content:flex-start;   /* top-align vertically */
    align-items:flex-start; 
    }
    .tpmx .tpmx-side-wrap { padding:12px; 
        align-self:flex-start;
    margin-top:0 !important;
    margin-bottom:0 !important; 
        
    }
    .tpmx .tpmx-side-title { margin-bottom:6px; font-size:14px; color:#f4f6fb; font-weight:600; }
    .tpmx .tpmx-side-text { font-size:13px; color:#cfd6e3; }
    .tpmx .tpmx-textline {
  font-size: 14.5px;
  line-height: 1.65;
  letter-spacing: .2px;
  color: #e3e8f5;

  /* multi-color underline */
  background-image: linear-gradient(90deg, #7aa2ff, #9b5cff, #ff6ec7);
  background-size: 100% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 4px;
}
.tpmx .tpmx-btn-lg { font-size: 12px; background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.06)) padding-box,
    linear-gradient(90deg,#1b2212,#27361a,#1e2b15) border-box;}
.tpmx .tpmx-btn-lh { font-size: 12px; background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.06)) padding-box,
    linear-gradient(90deg,#0a1f2a,#103447,#0b2837) border-box;}
.tpmx .tpmx-btn-li { font-size: 12px; background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.06)) padding-box,
    linear-gradient(90deg,#1a1422,#2b1f3e,#201933) border-box;line-height:20px; display:inline-block;margin:3px;padding:5px;}
.tpmx .tpmx-btn-lj { 
    font-size:13px;font-weight:bold; letter-spacing:1px; padding:7px 8px; border-radius:999px;
    color:#151515; 
    background:
    linear-gradient(180deg, rgba(255,206,18,.16), rgba(0,0,0,.12)) padding-box,
    linear-gradient(90deg, #F2C105, #FFCE12) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 0 rgba(0,0,0,0);}
  
.tpmx .tpmx-btn-lj:hover { color:#FFFFFF;}
.tpmx .tpmx-linktr {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #F2E00A;
  padding-bottom: 6px;
  border-bottom:1px dotted #313131;
  margin:5px 5px 10px 5px;
  font-size:15px;
  letter-spacing:1px;
}
.tpmx .tpmx-linktr:hover {
    color:#FFFFFF;
}

.tpmx-linktp {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #FFFFFF;
  padding-bottom: 6px;
  border-bottom:1px dotted #313131;
  margin:5px 5px 10px 5px;
  font-size:15px;
  letter-spacing:1px;
}
.tpmx-linktp:hover {
    color:#CCCCCC;
    border-bottom:1px dotted #3C73A8;
}
/* Link with traveling dot: left → right, then 3 opacity ticks at the end and stays there while hovered */

.tpmx .tpmx-linkfx {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: inherit;
  padding-bottom: 6px; /* space for underline + dot */
}

/* Optional faint underline track */
.tpmx .tpmx-linkfx::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0px;
  border-radius: 2px;
  background: linear-gradient(90deg,#7aa2ff,#9b5cff,#ff6ec7);
  opacity: .25;
}

/* The animated dot */
.tpmx .tpmx-linkfx::after {
  --dot-size: 0px;
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: linear-gradient(90deg,#7aa2ff,#9b5cff,#ff6ec7);
  box-shadow: 0 0 10px rgba(155,92,255,.55);
  transform: translateX(0);
  opacity: 1;
  will-change: transform, opacity;
  pointer-events: none;
}

/* Run: travel to end, then blink (opacity tick) 3 times at the end */
.tpmx .tpmx-linkfx:hover::after,
.tpmx .tpmx-linkfx:focus-visible::after {
  animation: tpmx-dot-travel-and-tick 1000ms cubic-bezier(.35,.6,.25,1) forwards;
}

@keyframes tpmx-dot-travel-and-tick {
  0%   { transform: translateX(0); opacity: 1; }
  65%  { transform: translateX(calc(100% - var(--dot-size))); opacity: 1; }   /* arrive at end */
  /* tick 1 */
  75%  { transform: translateX(calc(100% - var(--dot-size))); opacity: .2; }
  80%  { transform: translateX(calc(100% - var(--dot-size))); opacity: 1; }
  /* tick 2 */
  85%  { transform: translateX(calc(100% - var(--dot-size))); opacity: .2; }
  90%  { transform: translateX(calc(100% - var(--dot-size))); opacity: 1; }
  /* tick 3 */
  95%  { transform: translateX(calc(100% - var(--dot-size))); opacity: .2; }
  100% { transform: translateX(calc(100% - var(--dot-size))); opacity: 1; }   /* stay at end */
}
/* multiple colors for badge

/* Base (keep yours if you like) */


/* Shared NEW chip style (tinted per-variant below) */
.tpmx-badge[class*="--"]{ position:relative; padding-right:.9rem; }
.tpmx-badge[class*="--"]::after{
  
}

/* ========== DARK, COOL GRADIENTS ========== */
/* Midnight (deep navy/ink) */
.tpmx-badge--midnight-new{
    font-size:14px;font-weight:bold; letter-spacing:2px; padding:4px 8px; border-radius:999px;
  color:#e6ecff; border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.06)) padding-box,
    linear-gradient(90deg,#0b1020,#171f3a,#0e162c) border-box;
}
.tpmx-badge--midnight-new::after{
  background:rgba(60,78,130,.22); border-color:rgba(94,118,186,.6); color:#eef2ff;
}

/* Ocean (inky blue-teal) */
.tpmx-badge--ocean-new{
    font-size:14px;font-weight:bold; letter-spacing:2px; padding:4px 8px; border-radius:999px;
  color:#e3f6ff; border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.06)) padding-box,
    linear-gradient(90deg,#0a1f2a,#103447,#0b2837) border-box;
}
.tpmx-badge--ocean-new::after{
  background:rgba(49,122,146,.22); border-color:rgba(86,168,196,.6); color:#e9fbff;
}

/* Abyss (blue–indigo charcoal) */
.tpmx-badge--abyss-new{
    font-size:14px;font-weight:bold; letter-spacing:2px; padding:4px 8px; border-radius:999px;
  color:#151515; border:1px solid transparent;
  background:
  linear-gradient(180deg, rgba(255,255,210,.04), rgba(186,216,10,.11)) padding-box,
  linear-gradient(90deg, #d9f34a, #BAD80A 50%, #5e6b09) border-box;
border: 1px solid transparent; border-radius: 10px; text-decoration:none;
}
.tpmx-badge--abyss-new::after{
  background:rgba(82,96,172,.22); border-color:rgba(118,135,210,.6); color:#f1f3ff;
}

/* Forest (deep pine) */
.tpmx-badge--forest-new{
    font-size:14px;font-weight:bold; letter-spacing:2px; padding:4px 8px; border-radius:999px;
  color:#e9fff3; border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.06)) padding-box,
    linear-gradient(90deg,#0e211a,#143529,#0f2a21) border-box;
}
.tpmx-badge--forest-new::after{
  background:rgba(58,121,93,.22); border-color:rgba(93,170,139,.65); color:#effff8;
}

/* Moss (olive–evergreen) */
.tpmx-badge--moss-new{
    font-size:14px;font-weight:bold; letter-spacing:2px; padding:4px 8px; border-radius:999px;
  color:#f5ffe9; border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.06)) padding-box,
    linear-gradient(90deg,#1b2212,#27361a,#1e2b15) border-box;
}
.tpmx-badge--moss-new::after{
  background:rgba(115,149,66,.22); border-color:rgba(158,200,96,.6); color:#f9ffef;
}

/* Slate (cool grey–blue) */
.tpmx-badge--slate-new{
    font-size:14px;font-weight:bold; letter-spacing:2px; padding:4px 8px; border-radius:999px;
  color:#eef3ff; border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.06)) padding-box,
    linear-gradient(90deg,#141922,#232b35,#1a212b) border-box;
}
.tpmx-badge--slate-new::after{
  background:rgba(108,130,156,.22); border-color:rgba(152,175,201,.6); color:#f4f7ff;
}

/* Plum (muted violet) */
.tpmx-badge--plum-new{
    font-size:14px;font-weight:bold; letter-spacing:2px; padding:4px 8px; border-radius:999px;
  color:#f6efff; border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.06)) padding-box,
    linear-gradient(90deg,#1a1422,#2b1f3e,#201933) border-box;
}
.tpmx-badge--plum-new::after{
  background:rgba(132,103,173,.22); border-color:rgba(168,142,206,.6); color:#fbf8ff;
}

/* Wine (deep burgundy) */
.tpmx-badge--wine-new{
    font-size:14px;font-weight:bold; letter-spacing:2px; padding:4px 8px; border-radius:999px;
  color:#fff0f3; border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.07)) padding-box,
    linear-gradient(90deg,#220f17,#3a1b26,#2b1620) border-box;
}
.tpmx-badge--wine-new::after{
  background:rgba(149,70,95,.22); border-color:rgba(196,112,142,.65); color:#fff5f7;
}


.tpmx-badge--copper-new{
    font-size:14px;font-weight:bold; letter-spacing:2px; padding:4px 8px; border-radius:999px;
  color:#fff4e9; border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.07)) padding-box,
    linear-gradient(90deg,#28160c,#3a2416,#2f1c11) border-box;
}
.tpmx-badge--copper-new::after{
  background:rgba(176,120,86,.22); border-color:rgba(214,157,116,.65); color:#fff8f1;
}

/* Saffron/Gold between #FFCE12 and #F2C105 */
.tpmx-badge--amber-new{
  font-size:14px; font-weight:bold; letter-spacing:2px; padding:4px 8px; border-radius:999px;
  color:#fff8d6; border:1px solid transparent;
  /* subtle inner glaze + precise gold border blend */
  background:
    linear-gradient(180deg, rgba(255,206,18,.16), rgba(0,0,0,.12)) padding-box,
    linear-gradient(90deg, #F2C105, #FFCE12) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 0 rgba(0,0,0,0);
}

.tpmx-badge--amber-new::after{
  background: linear-gradient(90deg, rgba(242,193,5,.22), rgba(255,206,18,.22));
  border-color: rgba(255,206,18,.55);
  color:#fffbe6;
}


/* Optional gentle hover (keeps it cool) */
.tpmx-badge--midnight-new:hover,
.tpmx-badge--ocean-new:hover,
.tpmx-badge--abyss-new:hover,
.tpmx-badge--forest-new:hover,
.tpmx-badge--moss-new:hover,
.tpmx-badge--slate-new:hover,
.tpmx-badge--plum-new:hover,
.tpmx-badge--wine-new:hover,
.tpmx-badge--copper-new:hover{
  filter:saturate(1.08) brightness(1.05);
}


/* ===== New styles (match your .tpmx look; neon gradients, glassy, blur) ===== */

.tpmx .tpmx-badge--wine-new{
  
  font-size:15px; font-weight:700; letter-spacing:.6px;
  padding:5px 10px; border-radius:999px;
  color:#e9edf3;
  /*background:linear-gradient(90deg, rgba(122,162,255,.22), rgba(155,92,255,.22), rgba(255,110,199,.22)); */
  background:linear-gradient(90deg,
  rgba(16,185,129,.22),
  rgba(34,197,94,.22),
  rgba(163,230,53,.22)
);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 6px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  
  display:inline-flex;          /* keeps padding/alignment tidy */
  align-items:center;
  white-space: normal;          /* allow wrapping */
  overflow-wrap: anywhere;      /* break long tokens if needed */
  word-break: break-word;       /* fallback */
  line-height: 1.35;            /* comfortable multi-line spacing */
  max-width: 100%;   
}
.tpmx .tpmx-badge--wine-new:hover{
  transform:translateY(-1px);
  background:linear-gradient(90deg, rgba(122,162,255,.34), rgba(155,92,255,.34), rgba(255,110,199,.34));
  border-color:rgba(122,162,255,.45);
  box-shadow:0 10px 22px rgba(0,0,0,.45), 0 0 22px rgba(155,92,255,.18);
}

/* --- Modal shell --- */
.tpmx .tpmx-modal{
  position:fixed; inset:0; z-index:9999; display:none;
  font-family:"Gruppo", sans-serif; color:#e9edf3;
}

/* Backdrop with soft blur + subtle grain of neon gradient */
.tpmx .tpmx-modal-backdrop{
  position:absolute; inset:0;
  background: radial-gradient(1200px 800px at 20% 10%, rgba(122,162,255,.15), transparent 40%),
              radial-gradient(1000px 700px at 80% 90%, rgba(255,110,199,.12), transparent 40%),
              rgba(0,0,0,.65);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* Card with conic border glow on hover (like your cards) */
.tpmx .tpmx-modal-card{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(940px,94vw); max-height:84vh; overflow:auto;
  padding:18px; border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  
  box-shadow:0 18px 48px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.tpmx .tpmx-modal-card::before{
  content:""; position:absolute; inset:0; border-radius:18px; padding:1px;
  background:conic-gradient(from 140deg, rgba(122,162,255,.55), rgba(155,92,255,.45), rgba(255,110,199,.38), rgba(122,162,255,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.tpmx .tpmx-modal-card:hover::before{ opacity:.55; }
.tpmx .tpmx-modal-card.is-rimless::before { opacity:0 !important; }

/* Modal head */
.tpmx .tpmx-modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;
  border-bottom:1px dotted rgba(255,255,255,.10); padding-bottom:6px;
}
.tpmx .tpmx-modal-head .tpmx-card-title{
  font-size:22px; font-weight:700; color:#f4f6fb;
}

/* Close button uses existing .tpmx-btn feel */
.tpmx .tpmx-modal-close{
  appearance:none; cursor:pointer; border-radius:10px; padding:6px 10px; font-size:12px;
  color:#e8ecf1; background:rgba(24,26,34,.85); border:1px solid rgba(255,255,255,.18);
  transition:background .15s ease, transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.tpmx .tpmx-modal-close:hover{ background:rgba(38,41,52,.95); transform:translateY(-1px); }
.tpmx .tpmx-modal-close:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(122,162,255,.5); border-color:rgba(122,162,255,.7);
}

/* Body */
.tpmx .tpmx-modal-body{
  font-size:14.5px; line-height:1.7; color:#cfd6e3;
}
.tpmx .tpmx-modal-body .tpmx-text{ color:#cfd6e3; }
.tpmx .tpmx-modal-body a.tpmx-linkfx{ color:#e9edf3; }

/* Optional: blur/veil block for preview truncation (use instead of inline styles if you prefer) */
.tpmx .tpmx-veil{
  position:relative; margin-top:8px;
}
.tpmx .tpmx-veil::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,11,15,0) 0%, rgba(10,11,15,.65) 40%, rgba(10,11,15,.9) 100%);
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
  border-radius:12px;
}
.tpmx .tpmx-veil .tpmx-actions{
  position:relative; display:flex; justify-content:center; padding:18px 8px;
}
.tpmx .tpmx-ellipsis{
  opacity:.75; margin-left:4px; letter-spacing:.6px;
}
.tpmx .tpmx-btn.is-disabled{opacity:.6; pointer-events:none;}
/* Reduced motion */


/* Reduced motion: place dot at end without animation */
@media (prefers-reduced-motion: reduce) {
  .tpmx .tpmx-linkfx::after,
  .tpmx .tpmx-linkfx:hover::after,
  .tpmx .tpmx-linkfx:focus-visible::after {
    animation: none !important;
    transform: translateX(calc(100% - var(--dot-size)));
    opacity: 1;
  }
  .tpmx .tpmx-badge--wine-new,
  .tpmx .tpmx-modal-card{
    transition:none !important;
  }
}


    /* Mobile */
    @media (max-width:768px){
        .li-dotted-box {padding:2px; margin:5px;}
        .tpmx .tpmx-modal-card{ width:94vw; max-height:86vh; padding:14px; }
        .tpmx .tpmx-modal-head .tpmx-card-title{ font-size:20px; }
        .tpmx .tpmx-btn-lg { font-size: 14px; }
        .tpmx .tpmx-card{ flex-direction:column; width:90%;margin:5px;}
        .tpmx .tpmx-side{ flex:1 1 auto; max-width:100%; width:100%; }
        .tpmx .tpmx-head{
            flex-direction: column;
            align-items: flex-start;   /* left-align content */
            justify-content: flex-start;
            gap: 8px;
          }
          .tpmx .tpmx-title,
          .tpmx .tpmx-text{
            width: 100%;
            max-width: none;           /* remove the 900px cap on the paragraph */
            margin: 0;                 /* kill extra margins that cause side-by-side fit */
          }
    }