/* styles.css — estilos de index.html.
   Estaban incrustados en el HTML (21.1 KB en 3 bloque(s)); se movieron tal cual,
   sin tocar una regla, para poder leerlos y versionarlos aparte (regla MOD-02). */

/* ── bloque 1 de 3 ── */
/* Paleta, tipografia y reglas base vienen de golem-ds.css (design/tokens/tokens.json).
     Esta landing es el CANON del sistema: si aqui hace falta un color nuevo, se
     agrega al token, no aqui. Abajo solo queda lo exclusivo de esta pagina. */
  .wrap{max-width:1080px;margin:0 auto;padding:0 26px}
  @media(max-width:600px){.wrap{padding:0 18px}}
  .center{text-align:center}
  /* Sin degradados en texto: un solo color sólido por énfasis. */
  .grad{color:var(--accent)}
  .fire{color:var(--teal)}
  .soft{color:var(--muted)} .dim{color:var(--dim)}
  h1{font-size:clamp(40px,7.5vw,76px);line-height:1.02;letter-spacing:-.035em;font-weight:800}
  h2{font-size:clamp(30px,5vw,52px);line-height:1.05;letter-spacing:-.03em;font-weight:800}
  h3{font-size:18px;font-weight:700;letter-spacing:-.01em}
  .lead{font-size:clamp(16px,2.3vw,20px);max-width:640px;color:var(--muted)}
  .center .lead{margin-left:auto;margin-right:auto}

  section{position:relative;padding:100px 0;border-top:1px solid var(--line)}
  @media(max-width:600px){section{padding:70px 0}}

  .pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.3px;padding:7px 15px;border-radius:999px;border:1px solid var(--line2);color:var(--muted);background:rgba(255,255,255,.03)}
  .pill b{color:var(--violet)}
  .eb{display:flex;justify-content:center;margin-bottom:22px}
  /* Los pills del hero van con texto completo en web; en mobile se compactan
     (24/7 · GolemAI · Claude) para no empujar el titular hacia abajo. */
  .pill-short{display:none}
  @media(max-width:600px){ .eb{flex-wrap:wrap;gap:6px} .pill .pill-full{display:none} .pill .pill-short{display:inline} }

  .btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;padding:14px 26px;border-radius:999px;border:none;cursor:pointer;transition:transform .12s,box-shadow .25s;background:linear-gradient(100deg,var(--violet),var(--violet2));color:#fff;box-shadow:0 12px 40px var(--glow)}
  .btn:hover{transform:translateY(-2px);box-shadow:0 18px 54px var(--glow)}
  .btn.ghost{background:transparent;color:#fff;border:1px solid var(--line2);box-shadow:none}
  .btn.sm{padding:10px 18px;font-size:13.5px}
  .cta{display:flex;gap:12px;flex-wrap:wrap}
  .center .cta{justify-content:center}

  /* FLOATING NAV */
  .floatnav{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:2px;padding:5px;border-radius:999px;border:1px solid var(--line2);background:rgba(10,10,14,.6);backdrop-filter:blur(14px)}
  .floatnav a,.floatnav button{font-size:13.5px;font-weight:600;padding:8px 16px;border-radius:999px;color:var(--muted);white-space:nowrap;background:none;border:none;cursor:pointer}
  .floatnav a:hover,.floatnav button:hover{color:#fff}
  .floatnav a.brand{color:#fff;display:flex;align-items:center;gap:8px}
  .floatnav a.brand img{width:22px;height:22px;border-radius:6px}
  .floatnav a.accent{color:#fff;background:linear-gradient(100deg,var(--violet),var(--violet2))}
  #langSel{border:1px solid var(--line2);padding:8px 10px;font-weight:800;letter-spacing:.5px;border-radius:999px;color:var(--muted);background:rgba(10,10,14,.6);cursor:pointer;font-size:13px}
  /* En tactil, 16px: por debajo iOS hace zoom al desplegar el selector de idioma
     y deja la barra flotante descuadrada. El #id gana al sistema de diseno, asi
     que el piso tiene que repetirse aqui. */
  @media(pointer:coarse){#langSel{font-size:16px;padding:8px 12px;min-height:44px}}
  /* Area tactil de 44px en la barra flotante: medido a 390px, los botones salian
     a 37-38px de alto. No se toca el escritorio, donde el raton acierta igual. */
  @media(pointer:coarse){.floatnav a,.floatnav button{min-height:44px;display:inline-flex;align-items:center}}
  #langSel:hover{color:#fff}
  #langSel option{background:#12121e;color:#fff}
  @media(max-width:560px){.floatnav a.hidem{display:none}}
  #toTop{position:fixed;left:18px;bottom:22px;z-index:55;display:none;align-items:center;gap:6px;padding:11px 16px;border-radius:999px;border:1px solid var(--line2);background:rgba(10,10,14,.78);backdrop-filter:blur(12px);color:#fff;font-size:13.5px;font-weight:700;cursor:pointer;transition:transform .12s}
  #toTop:hover{transform:translateY(-2px)}
  #toTop.show{display:inline-flex}

  /* HERO */
  .hero{padding:150px 0 90px;text-align:center;overflow:hidden;border-top:none;position:relative}
  .stars{position:absolute;inset:0;pointer-events:none;opacity:.7;
    background-image:
      radial-gradient(1.4px 1.4px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 25% 12%,#fff,transparent),
      radial-gradient(1.6px 1.6px at 42% 30%,#fff,transparent),radial-gradient(1px 1px at 62% 16%,#fff,transparent),
      radial-gradient(1.3px 1.3px at 78% 26%,#fff,transparent),radial-gradient(1px 1px at 88% 12%,#fff,transparent),
      radial-gradient(1.5px 1.5px at 33% 8%,#fff,transparent),radial-gradient(1px 1px at 55% 6%,#fff,transparent),
      radial-gradient(1.2px 1.2px at 70% 40%,#fff,transparent),radial-gradient(1px 1px at 18% 42%,#fff,transparent),
      radial-gradient(1.3px 1.3px at 92% 34%,#fff,transparent),radial-gradient(1px 1px at 8% 10%,#fff,transparent)}
  .aurora{position:absolute;top:-24%;left:50%;transform:translateX(-50%);width:180%;height:100%;pointer-events:none;z-index:0;filter:blur(58px) saturate(1.5);opacity:.66}
  .aurora span{position:absolute;border-radius:46% 54% 50% 50%;mix-blend-mode:screen;will-change:transform,opacity}
  .aurora .a1{width:50%;height:60%;left:6%;top:4%;background:radial-gradient(circle,rgba(46,125,255,1),transparent 60%);animation:au1 13s ease-in-out infinite}
  .aurora .a2{width:46%;height:56%;right:4%;top:8%;background:radial-gradient(circle,rgba(53,224,161,.95),transparent 60%);animation:au2 16s ease-in-out infinite}
  .aurora .a3{width:44%;height:52%;left:28%;top:14%;background:radial-gradient(circle,rgba(53,224,161,.7),transparent 60%);animation:au3 11s ease-in-out infinite}
  .aurora .a4{width:40%;height:50%;left:12%;top:-4%;background:radial-gradient(circle,rgba(70,190,255,.6),transparent 60%);animation:au4 18s ease-in-out infinite}
  @keyframes au1{0%,100%{transform:translate(-12%,0) scale(1);opacity:.8}50%{transform:translate(24%,13%) scale(1.4);opacity:1}}
  @keyframes au2{0%,100%{transform:translate(12%,4%) scale(1.1);opacity:.7}50%{transform:translate(-20%,-9%) scale(.82);opacity:1}}
  @keyframes au3{0%,100%{transform:translate(0,9%) scale(.9);opacity:.55}50%{transform:translate(-16%,-7%) scale(1.3);opacity:.95}}
  @keyframes au4{0%,100%{transform:translate(-8%,-4%) scale(1);opacity:.5}50%{transform:translate(18%,11%) scale(1.25);opacity:.9}}
  @media(prefers-reduced-motion:reduce){.aurora span{animation-duration:0.001s;animation-iteration-count:1}}
  .hero-inner{position:relative;z-index:2}
  /* El emblema de GolemAI es el protagonista del hero: grande y con glow. */
  .hero .gicon{width:clamp(150px,27vw,220px);height:auto;border-radius:26px;margin:0 auto 28px;display:block;box-shadow:0 0 0 1px var(--line2),0 0 70px var(--glow),0 12px 44px rgba(0,0,0,.55)}
  .hero h1{max-width:15ch;margin:0 auto}
  .hero .lead{margin:22px auto 0}
  .hero .cta{margin-top:32px}

  .mock{position:relative;z-index:2;max-width:560px;margin:56px auto 0;border:1px solid var(--line2);border-radius:20px;background:linear-gradient(180deg,rgba(46,125,255,.08),rgba(8,8,11,.9));backdrop-filter:blur(8px);padding:18px;text-align:left;box-shadow:0 30px 80px rgba(0,0,0,.6)}
  .mock .m{display:flex;gap:10px;margin-bottom:12px;font-size:13.5px;color:var(--muted)}
  .mock .m b{color:#fff}
  .mock .m .o{flex-shrink:0;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--violet);margin-top:1px}
  .mock .inp{display:flex;align-items:center;gap:10px;border:1px solid var(--line2);border-radius:12px;padding:12px 14px;color:var(--dim);font-size:14px;background:rgba(0,0,0,.35)}
  .mock .inp .send{margin-left:auto;width:30px;height:30px;border-radius:9px;background:linear-gradient(100deg,var(--violet),var(--violet2));display:grid;place-items:center;color:#fff;font-size:13px}

  .grid{display:grid;gap:16px;margin-top:36px}
  .g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
  @media(max-width:760px){.g3,.g2{grid-template-columns:1fr}}
  .card{border-radius:18px;padding:24px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
  .card.feat{border-color:rgba(46,125,255,.4);background:linear-gradient(180deg,rgba(46,125,255,.10),transparent)}
  .card.lite{border-color:rgba(53,224,161,.35);background:linear-gradient(180deg,rgba(53,224,161,.07),transparent)}
  .card .ic{display:block;margin-bottom:12px;color:var(--violet)}
  .card.lite .ic{color:var(--gold)}
  .card .ic svg{width:26px;height:26px;display:block}
  .ti{display:inline-block}
  .mock .inp .send svg{width:15px;height:15px}
  .btn .ti{width:16px;height:16px;vertical-align:-.2em;margin-right:6px}
  .card p{margin-top:6px}
  ul.clean{list-style:none;display:flex;flex-direction:column;gap:13px;margin-top:6px}
  ul.clean li{display:flex;gap:11px;align-items:flex-start}
  ul.clean li::before{content:"";flex-shrink:0;margin-top:8px;width:6px;height:6px;border-radius:50%;background:linear-gradient(100deg,var(--violet),var(--ember))}
  ul.clean li b{font-weight:700}
  .tag{display:inline-block;white-space:nowrap;vertical-align:middle;font-size:11px;font-weight:700;color:var(--teal);border:1px solid var(--line2);padding:2px 9px;border-radius:999px;margin-left:6px}

  .steps{display:grid;gap:12px;margin-top:32px}
  .step{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
  .step .n{flex-shrink:0;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(100deg,var(--violet),var(--violet2))}

  table{width:100%;border-collapse:collapse;font-size:14px;margin-top:14px}
  th,td{border-bottom:1px solid var(--line);padding:12px 8px;text-align:left}
  th{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--violet)}
  td.r,th.r{text-align:right;font-family:var(--mono)}
  .ok{color:#5ce08a;font-weight:700}
  .fine{font-size:12px;color:var(--dim);margin-top:14px;line-height:1.6}

  /* PLANES (data-driven) */
  .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:34px;text-align:left}
  @media(max-width:900px){.plans{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:580px){.plans{grid-template-columns:1fr}}
  .plan{position:relative;border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:4px;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
  .plan.feat{border-color:rgba(46,125,255,.5);background:linear-gradient(180deg,rgba(46,125,255,.12),transparent);box-shadow:0 20px 60px rgba(46,125,255,.14)}
  .plan.quote{border-color:rgba(31,199,221,.45);background:linear-gradient(180deg,rgba(31,199,221,.10),transparent)}
  .plan.lite{border-color:rgba(53,224,161,.45);background:linear-gradient(180deg,rgba(53,224,161,.09),transparent)}
  .plan .pt{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(100deg,var(--violet),var(--violet2));color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.6px;padding:4px 13px;border-radius:999px}
  .plan.quote .pt{background:linear-gradient(100deg,var(--gold),var(--ember))}
  .plan.lite .pt{background:linear-gradient(100deg,var(--gold),var(--ember))}
  .plan .name{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--violet)}
  .plan.quote .name,.plan.lite .name{color:var(--ember)}
  .plan .rent{font-size:29px;font-weight:800;color:#fff}.plan .rent small{font-size:14px;color:var(--dim);font-weight:600}
  .plan .conv{color:var(--muted);font-size:13.5px;margin-top:2px}
  .plan .note{color:var(--dim);font-size:11.5px}
  .plan .per{margin-top:6px;font-family:var(--mono);font-size:13px;color:var(--violet);font-weight:700}
  .plan .wanote{margin-top:8px;font-size:11px;color:var(--gold);font-weight:600;display:flex;align-items:center;gap:5px;border:1px solid rgba(53,224,161,.32);border-radius:8px;padding:5px 9px;background:rgba(53,224,161,.06)}
  .plan.lite .per{color:var(--ember)}
  .plan ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:8px;font-size:12.5px;color:var(--muted)}
  .plan ul li::before{content:"✓ ";color:var(--violet);font-weight:800}
  .plan .btn{margin-top:16px;width:100%;justify-content:center}
  .plans + .plans{margin-top:16px}
  /* Chips de canales/plataformas por plan */
  .chans{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
  .chans-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);font-weight:700;width:100%;margin-bottom:1px}
  .chchip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 9px;background:rgba(255,255,255,.03)}
  .chchip svg{width:14px;height:14px;color:var(--violet)}
  .lite-strip .chans{margin-top:10px;width:100%}
  .lite-strip .chchip svg{color:var(--ember)}
  /* Chips de capacidad (imagen/PDF/aprendizaje) por plan */
  .caps-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
  .capchip{display:inline-flex;align-items:center;gap:5px;font-size:11px;border-radius:999px;padding:3px 9px;border:1px solid var(--line)}
  .capchip svg{width:13px;height:13px;flex:none}
  .capchip.yes{color:#8fe3b0;border-color:rgba(57,217,138,.35);background:rgba(57,217,138,.08)}
  .capchip.super{color:#35e0a1;border-color:rgba(53,224,161,.4);background:rgba(53,224,161,.08)}
  .capchip.no{color:var(--dim);opacity:.7}
  .capchip.no svg{color:var(--dim)}
  .lite-strip .caps-row{width:100%;margin-top:8px}
  /* Franja Lite full-width (evita la fila coja) */
  .lite-strip{margin-top:34px;border:1px solid rgba(53,224,161,.45);border-radius:20px;padding:22px 26px;background:linear-gradient(120deg,rgba(53,224,161,.11),transparent);display:flex;gap:26px;align-items:center;flex-wrap:wrap;text-align:left}
  .lite-strip .ls-main{min-width:180px}
  .lite-strip .ls-name{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--ember)}
  .lite-strip .ls-price{font-size:30px;font-weight:800;color:#fff;margin-top:2px}
  .lite-strip .ls-sub{color:var(--muted);font-size:13px} .lite-strip .ls-train{color:var(--dim);font-size:12px;margin-top:2px;font-family:var(--mono)}
  .lite-strip .ls-feats{flex:1;min-width:200px;display:flex;gap:10px 22px;flex-wrap:wrap;color:var(--muted);font-size:13px}
  .lite-strip .ls-feats span::before{content:"✓ ";color:var(--ember);font-weight:800}
  .lite-strip .btn{margin:0;flex-shrink:0}
  @media(max-width:720px){.lite-strip{flex-direction:column;align-items:stretch}.lite-strip .btn{width:100%;justify-content:center}}
  .costnote{margin-top:26px;border:1px solid var(--line);border-radius:18px;padding:22px 24px;background:linear-gradient(180deg,rgba(31,199,221,.06),transparent);text-align:left}
  .supernote{margin-top:14px;padding:12px 14px;border:1px solid rgba(53,224,161,.4);border-radius:13px;background:rgba(53,224,161,.06)}
  .supernote-h{display:flex;align-items:center;gap:7px;color:#35e0a1;font-size:14px}
  .supernote-h svg{width:17px;height:17px}

  footer{padding:60px 0 46px;text-align:center;border-top:1px solid var(--line)}
  footer .brand{display:flex;align-items:center;justify-content:center;gap:11px;font-weight:800;margin-bottom:14px}
  footer .brand img{width:34px;height:34px;border-radius:9px}
  footer .legal-links{margin-top:12px;font-size:13px;color:var(--dim)}
  footer .legal-links a{color:var(--muted);text-decoration:none} footer .legal-links a:hover{color:var(--violet)}

/* ── bloque 2 de 3 ── */
#robotiza .flow{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:34px;text-align:left}
  #robotiza .fstep{position:relative;border:1px solid var(--line);border-radius:16px;padding:18px 16px;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
  #robotiza .fstep::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);color:var(--violet);font-weight:800;font-size:18px;z-index:2}
  #robotiza .fstep:last-child::after{content:""}
  #robotiza .fico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(46,125,255,.14);color:var(--violet);margin-bottom:10px}
  #robotiza .fico svg{width:21px;height:21px}
  #robotiza .fnum{position:absolute;top:12px;right:14px;font-family:var(--mono);font-size:12px;color:var(--dim)}
  #robotiza .ftitle{font-weight:800;font-size:14.5px}
  #robotiza .fsub{color:var(--muted);font-size:12.5px;margin-top:4px}
  @media(max-width:900px){#robotiza .flow{grid-template-columns:repeat(2,1fr)}#robotiza .fstep::after{content:""}}
  @media(max-width:560px){#robotiza .flow{grid-template-columns:1fr}}
  #robotiza .robo-demo{max-width:560px;margin:34px auto 0;border:1px solid var(--line);border-radius:20px;padding:20px;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);text-align:left}
  #robotiza .rd-head{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);margin-bottom:14px}
  #robotiza .rd-dot{width:9px;height:9px;border-radius:50%;background:#39d98a;box-shadow:0 0 0 4px rgba(57,217,138,.15)}
  #robotiza .rd-msg{max-width:86%;padding:11px 14px;border-radius:15px;font-size:13.5px;line-height:1.5;margin-bottom:10px;opacity:0;transform:translateY(8px);animation:rdin .5s ease forwards}
  #robotiza .rd-msg.user{background:rgba(255,255,255,.06);border:1px solid var(--line);border-bottom-right-radius:5px;margin-left:auto}
  #robotiza .rd-msg.bot{background:linear-gradient(120deg,rgba(46,125,255,.16),rgba(31,199,221,.12));border:1px solid rgba(46,125,255,.35);border-bottom-left-radius:5px}
  #robotiza .rd-msg.bot{animation-delay:.5s}#robotiza .rd-tag{animation-delay:1s}
  #robotiza .rd-tag{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--violet);font-weight:700;opacity:0;animation:rdin .5s ease forwards}
  #robotiza .rd-tag svg{width:15px;height:15px}
  @keyframes rdin{to{opacity:1;transform:none}}

/* ── bloque 3 de 3 ── */
#connect .cx{display:grid;grid-template-columns:1fr .86fr 1fr;gap:14px;align-items:stretch;margin-top:38px}
  @media(max-width:820px){#connect .cx{grid-template-columns:1fr;gap:12px}}
  #connect .cxwin{display:flex;flex-direction:column}
  #connect .cxhead svg{width:18px;height:18px;flex:none}
  #connect .cxhead.tr{background:linear-gradient(100deg,#0e9c8f,#2ed3ac)}
  #connect .trrow{display:flex;align-items:center;gap:8px;font-size:12px}
  #connect .trrow .fl{font-size:16px;flex:none}
  #connect .trrow .tt{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:10px;padding:6px 9px;flex:1;line-height:1.35}
  #connect .trrow.adv .tt{background:rgba(46,211,172,.1);border-color:rgba(46,211,172,.32)}
  #connect .trmid{display:flex;align-items:center;gap:5px;color:var(--accent);font-size:10.5px;font-weight:700;padding-left:24px}
  #connect .trmid svg{width:14px;height:14px}
  #connect .trsep{height:1px;background:var(--line);margin:3px 0}
  #connect .trnote{font-size:10.5px;color:var(--dim);margin-top:auto;text-align:center;padding-top:8px}
  #connect .cxwhy{display:flex;gap:12px;align-items:flex-start;max-width:840px;margin:24px auto 0;padding:14px 16px;border:1px solid rgba(46,211,172,.32);border-radius:14px;background:linear-gradient(180deg,rgba(46,211,172,.08),transparent);text-align:left}
  #connect .cxwhy svg{width:22px;height:22px;flex:none;color:var(--teal);margin-top:1px}
  #connect .cxwhy p{margin:0;font-size:13.5px;line-height:1.5;color:var(--soft)}
  #connect .cxwhy b{color:#fff}
  #connect .cxwin{border:1px solid var(--line2);border-radius:18px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(8,8,11,.6));box-shadow:0 20px 60px rgba(0,0,0,.5)}
  #connect .cxhead{display:flex;align-items:center;gap:8px;padding:12px 14px;font-size:13.5px;font-weight:700;color:#fff}
  #connect .cxhead.web{background:linear-gradient(100deg,var(--violet),var(--violet2))}
  #connect .cxhead.tg{background:#17324a}
  #connect .cxhead .dot{width:8px;height:8px;border-radius:50%;background:#5ce08a;box-shadow:0 0 0 3px rgba(92,224,138,.2)}
  #connect .cxhead small{color:rgba(255,255,255,.72);font-weight:600}
  #connect .cxbody{padding:14px;display:flex;flex-direction:column;gap:8px;min-height:255px;text-align:left}
  #connect .b{max-width:85%;padding:8px 12px;border-radius:13px;font-size:12.6px;line-height:1.45}
  #connect .b.user{align-self:flex-end;background:linear-gradient(120deg,var(--violet),var(--violet2));color:#fff;border-bottom-right-radius:4px}
  #connect .b.bot{align-self:flex-start;background:rgba(255,255,255,.06);border:1px solid var(--line);border-bottom-left-radius:4px}
  #connect .b.sys{align-self:flex-start;background:rgba(53,224,161,.12);border:1px solid rgba(53,224,161,.32);color:#8ff0c4;font-weight:600;max-width:92%}
  #connect .b.tgin{align-self:flex-start;background:#fff;color:#0b1a2e;border-bottom-left-radius:4px}
  #connect .b.tgme{align-self:flex-end;background:#e6fad6;color:#123a12;border-bottom-right-radius:4px}
  #connect .cxtake{display:flex;gap:8px}
  #connect .cxtake span{flex:1;text-align:center;background:#2c4726;color:#cdeec0;border-radius:9px;padding:8px 6px;font-size:11.5px;font-weight:700}
  #connect .cxtake span.pri{background:#3d6b34;color:#eaffe0}
  #connect .cxrelay{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--accent);font-weight:700;font-size:11.5px;white-space:nowrap}
  #connect .cxrelay svg{width:34px;height:34px}
  @media(max-width:820px){#connect .cxrelay{flex-direction:row}#connect .cxrelay svg{transform:rotate(90deg)}}