:root{--tl-list-bg:#090d16;--tl-list-panel:#111827;--tl-list-line:rgba(130,158,215,.18);--tl-list-blue:#4f8fff;--tl-list-text:#f5f7fc;--tl-list-muted:#929db2}.tl-lists-page{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:34px 0 70px;color:var(--tl-list-text)}.tl-lists-hero{position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:34px;border:1px solid var(--tl-list-line);border-radius:22px;background:radial-gradient(circle at 85% 20%,rgba(57,111,211,.2),transparent 34%),linear-gradient(145deg,#151d30,#0b101c);box-shadow:0 20px 54px rgba(0,0,0,.22)}.tl-lists-hero::after{content:"TL";position:absolute;right:28px;top:50%;transform:translateY(-50%);font-size:8rem;font-weight:950;letter-spacing:-.09em;color:rgba(82,141,255,.09);pointer-events:none}.tl-lists-hero>div{position:relative;z-index:1}.tl-lists-kicker{display:block;margin-bottom:7px;color:#75a6ff;font-size:.76rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.tl-lists-hero h1{margin:0 0 9px;font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.03}.tl-lists-hero p{max-width:650px;margin:0;color:#abb6c9;line-height:1.65}.tl-lists-primary,.tl-lists-secondary{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border-radius:11px;padding:0 16px;font:800 .84rem/1 inherit;text-decoration:none;cursor:pointer}.tl-lists-primary{border:1px solid #5d9cff;background:#4f8fff;color:#fff;box-shadow:0 10px 28px rgba(50,105,211,.28)}.tl-lists-secondary{border:1px solid rgba(127,158,220,.3);background:rgba(58,86,140,.13);color:#dbe7ff}.tl-lists-section{margin-top:35px}.tl-lists-section__head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:15px}.tl-lists-section__head h2{margin:0;font-size:1.25rem}.tl-lists-section__head p{margin:5px 0 0;color:var(--tl-list-muted);font-size:.86rem}.tl-lists-section__head a{color:#8bb2ff;text-decoration:none;font-size:.8rem;font-weight:800}.tl-lists-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.tl-list-card{min-width:0;overflow:hidden;border:1px solid var(--tl-list-line);border-radius:16px;background:linear-gradient(145deg,rgba(20,27,43,.98),rgba(11,16,27,.98));box-shadow:0 12px 34px rgba(0,0,0,.16);transition:transform .2s,border-color .2s}.tl-list-card:hover{transform:translateY(-3px);border-color:rgba(85,145,255,.46)}.tl-list-card__cover{height:174px;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);overflow:hidden;background:#0a101d;text-decoration:none}.tl-list-card__cover img{width:100%;height:100%;object-fit:cover;min-width:0;min-height:0}.tl-list-card__cover img:only-child{grid-column:1/3;grid-row:1/3}.tl-list-card__cover img:nth-last-child(2):first-child,.tl-list-card__cover img:nth-last-child(2):first-child~img{grid-row:1/3}.tl-list-card__empty{grid-column:1/3;grid-row:1/3;display:grid;place-items:center;color:rgba(94,149,255,.2);font-size:4.5rem;font-weight:950;letter-spacing:-.08em}.tl-list-card__body{padding:15px 16px 17px}.tl-list-card__eyebrow{color:#719eea;font-size:.67rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.tl-list-card h3{margin:6px 0 4px;font-size:1rem;line-height:1.3}.tl-list-card h3 a{color:#f6f8fd;text-decoration:none;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tl-list-card__owner{color:#949fb4;text-decoration:none;font-size:.76rem}.tl-list-card__owner:hover{color:#bcd2ff}.tl-list-card__stats{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:13px;color:#8d98ad;font-size:.7rem}.tl-lists-empty{padding:26px;border:1px dashed rgba(128,158,215,.24);border-radius:14px;color:#929eb3;text-align:center;background:rgba(17,24,39,.42)}.tl-list-invites{display:grid;gap:10px}.tl-list-invite{display:flex;align-items:center;gap:15px;padding:14px 16px;border:1px solid rgba(101,151,245,.26);border-radius:14px;background:rgba(33,56,99,.18)}.tl-list-invite__text{min-width:0;flex:1}.tl-list-invite__text strong,.tl-list-invite__text span{display:block}.tl-list-invite__text span{margin-top:4px;color:#929db2;font-size:.78rem}.tl-list-invite__actions{display:flex;gap:8px}.tl-list-invite__actions button{border:1px solid rgba(128,158,216,.28);border-radius:9px;padding:8px 11px;background:rgba(63,93,151,.16);color:#e8efff;font-weight:750;cursor:pointer}.tl-list-invite__actions .is-accept{border-color:#4f8fff;background:#4f8fff}.tl-list-create-modal[hidden]{display:none!important}.tl-list-create-modal{position:fixed;inset:0;z-index:99994;display:grid;place-items:center;padding:18px}.tl-list-create-modal__backdrop{position:absolute;inset:0;background:rgba(2,5,12,.78);backdrop-filter:blur(7px)}.tl-list-create-dialog{position:relative;width:min(520px,100%);border:1px solid rgba(128,158,218,.25);border-radius:18px;background:#111827;box-shadow:0 26px 80px rgba(0,0,0,.56);padding:23px}.tl-list-create-dialog header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.tl-list-create-dialog h2{margin:0;font-size:1.25rem}.tl-list-create-dialog header button{width:35px;height:35px;border:1px solid rgba(255,255,255,.12);border-radius:50%;background:transparent;color:#fff;font-size:1.4rem;cursor:pointer}.tl-list-create-form{display:grid;gap:14px}.tl-list-create-form label{display:grid;gap:6px;color:#cbd5e8;font-size:.8rem;font-weight:750}.tl-list-create-form input,.tl-list-create-form textarea,.tl-list-create-form select{box-sizing:border-box;width:100%;border:1px solid rgba(130,158,213,.28);border-radius:10px;background:#090e18;color:#fff;padding:11px 12px;outline:none;resize:vertical}.tl-list-create-form input:focus,.tl-list-create-form textarea:focus,.tl-list-create-form select:focus{border-color:#4f8fff;box-shadow:0 0 0 3px rgba(79,143,255,.12)}.tl-list-create-form__actions{display:flex;justify-content:flex-end;gap:9px}.tl-list-create-error{color:#ff9da8;font-size:.79rem}.tl-profile-lists{margin-top:18px;padding-top:20px;border-top:1px solid rgba(119,143,191,.15)}.tl-profile-lists .tl-lists-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tl-profile-lists .tl-list-card__cover{height:135px}@media(max-width:900px){.tl-lists-grid,.tl-profile-lists .tl-lists-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tl-lists-hero::after{font-size:6rem}}@media(max-width:620px){.tl-lists-page{width:min(100% - 22px,1180px);padding-top:18px}.tl-lists-hero{padding:25px 20px;align-items:flex-start;flex-direction:column}.tl-lists-hero::after{right:50%;top:44%;transform:translate(50%,-50%);font-size:5.7rem}.tl-lists-grid,.tl-profile-lists .tl-lists-grid{grid-template-columns:1fr}.tl-list-card{display:grid;grid-template-columns:112px minmax(0,1fr)}.tl-list-card__cover{height:138px;grid-template-columns:1fr;grid-template-rows:1fr}.tl-list-card__cover img{display:none}.tl-list-card__cover img:first-child{display:block;grid-column:1;grid-row:1}.tl-list-card__empty{grid-column:1;grid-row:1;font-size:2.8rem}.tl-list-card__body{align-self:center;padding:13px}.tl-list-card__stats{gap:5px 9px}.tl-list-invite{align-items:flex-start;flex-direction:column}.tl-list-invite__actions{width:100%}.tl-list-invite__actions button{flex:1}.tl-list-create-modal{align-items:end;padding:0}.tl-list-create-dialog{width:100%;box-sizing:border-box;border-radius:20px 20px 0 0;padding-bottom:calc(22px + env(safe-area-inset-bottom))}}

/* Cabeçalho alinhado ao mesmo componente usado nos catálogos. */
.tl-lists-page{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:34px 24px 70px;
}

.tl-lists-hero{
  position:relative;
  overflow:hidden;
  display:block;
  width:100%;
  margin:0 auto 22px;
  padding:22px;
  background:#10131c;
  border:1px solid #1e2842;
  border-radius:24px;
  box-shadow:0 18px 44px rgba(0,0,0,.3);
}

.tl-lists-hero::after{
  content:none;
}

.tl-lists-hero::before{
  position:absolute;
  top:50%;
  right:30px;
  color:rgba(74,139,255,.12);
  content:"TL";
  font-size:8.5rem;
  font-weight:950;
  line-height:1;
  pointer-events:none;
  transform:translateY(-50%);
  user-select:none;
}

.tl-lists-hero__inner{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
}

.tl-lists-hero__copy{
  min-width:0;
}

.tl-lists-kicker{
  display:inline-flex;
  margin-bottom:7px;
  color:#9ec5ff;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.tl-lists-hero h1{
  margin:0;
  color:#e7ecff;
  font-size:clamp(1.65rem,3vw,2.35rem);
  font-weight:900;
  line-height:1.05;
  letter-spacing:-.035em;
}

.tl-lists-hero p{
  max-width:720px;
  margin:10px 0 0;
  color:#b7c7ff;
  line-height:1.6;
}

.tl-lists-hero__actions{
  flex:0 0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}

.tl-lists-hero__actions .tl-lists-secondary{
  background:#1d2b47;
}

@media(max-width:768px){
  .tl-lists-page{
    width:100%;
    padding:16px 12px 70px;
  }

  .tl-lists-hero{
    width:100%;
    margin:0 auto 16px;
    padding:18px 14px;
    border-radius:20px;
  }

  .tl-lists-hero::before{
    right:50%;
    font-size:7rem;
    transform:translate(50%,-50%);
  }

  .tl-lists-hero__inner{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .tl-lists-hero p{
    margin-right:auto;
    margin-left:auto;
  }

  .tl-lists-hero__actions{
    justify-content:center;
  }
}

/* No desktop, as capas verticais ficam lado a lado em uma única fileira. */
@media(min-width:621px){
  .tl-list-card__cover{
    display:flex;
    align-items:stretch;
  }

  .tl-list-card__cover img{
    flex:1 1 0;
    width:0;
    min-width:0;
    height:100%;
    object-fit:cover;
  }

  .tl-list-card__empty{
    flex:1 1 auto;
  }
}

/* No mobile, mantém o mesmo card vertical do desktop com quatro capas. */
@media(max-width:620px){
  .tl-list-card{
    display:block;
  }

  .tl-list-card__cover{
    display:flex;
    align-items:stretch;
    height:138px;
  }

  .tl-list-card__cover img,
  .tl-list-card__cover img:first-child{
    display:block;
    flex:1 1 0;
    width:0;
    min-width:0;
    height:100%;
    object-fit:cover;
  }

  .tl-list-card__empty{
    flex:1 1 auto;
  }

  .tl-list-card__body{
    padding:15px 16px 17px;
  }
}