:root{
  --bg:var(--ui-bg);
  --bg-2:var(--ui-bg-2);
  --card:var(--ui-surface);
  --card-2:var(--ui-surface-2);
  --muted:var(--ui-text-muted);
  --text:var(--ui-text);
  --red:var(--ui-primary);
  --red-2:var(--ui-primary-strong);
  --white:#ffffff;
  --line:var(--ui-line);
  --line-strong:var(--ui-line-strong);
  --ok:var(--ui-success);
  --err:var(--ui-danger);
  --shadow:var(--ui-shadow-md);
  --radius:24px;
  --radius-sm:18px;
  --header-h:84px;
  --mobile-bottom-nav-h:86px;
  --td-shell-max:1180px;
}

html,
body{
  overflow-x:hidden;
}

body{
  background:
    radial-gradient(circle at top left, rgba(255,77,77,.1), transparent 26%),
    radial-gradient(circle at top right, rgba(59,130,246,.08), transparent 24%),
    linear-gradient(180deg, #040813 0%, #091121 52%, #050812 100%);
  background-attachment:fixed;
}

body.td-shell--marketing{
  background:
    radial-gradient(circle at 12% 12%, rgba(255,77,77,.14), transparent 26%),
    radial-gradient(circle at 86% 10%, rgba(255,96,96,.08), transparent 22%),
    linear-gradient(180deg, #050913 0%, #091221 54%, #060913 100%);
}

body.td-shell--app{
  background:
    radial-gradient(circle at 10% 0, rgba(255,77,77,.08), transparent 24%),
    radial-gradient(circle at 100% 12%, rgba(59,130,246,.09), transparent 24%),
    linear-gradient(180deg, #050913 0%, #0a1121 54%, #060913 100%);
}

body.td-shell--guest .container,
body.td-shell--marketing .container,
body.td-shell--auth .container,
body.td-shell--app .container{
  width:min(100%, var(--td-shell-max));
}

.container{
  width:min(100%, var(--td-shell-max));
  margin:0 auto;
  padding:30px 22px 44px;
}

.td-main{
  min-height:calc(100vh - var(--header-h));
}

.topbar{
  position:sticky;
  top:0;
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  min-height:var(--header-h);
  padding:16px 22px;
  background:rgba(8,12,23,.82);
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
  box-shadow:0 10px 28px rgba(2,6,18,.16);
  overflow:visible;
}

.topbar::before{
  content:"";
  position:absolute;
  left:-120px;
  top:-130px;
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,77,77,.2), rgba(255,77,77,0) 70%);
  filter:blur(12px);
  pointer-events:none;
}

.topbar::after{
  content:"";
  position:absolute;
  inset:auto 18px 0;
  height:1px;
  background:linear-gradient(90deg, rgba(255,77,77,.3), rgba(255,255,255,.03), rgba(255,77,77,.3));
  pointer-events:none;
}

.topbar.is-scrolled{
  background:rgba(6,10,19,.9);
  box-shadow:0 18px 40px rgba(2,6,18,.22);
}

body.nav-open .topbar{
  z-index:1420;
  background:rgba(6,10,19,.96);
  backdrop-filter:none;
  box-shadow:0 18px 40px rgba(2,6,18,.22);
}

.topbar--public{
  background:rgba(6,11,20,.84);
  z-index:1320;
}

.topbar-left,
.topbar-right{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.topbar-left{
  flex:1 1 auto;
}

.topbar-right{
  flex:0 0 auto;
  margin-left:auto;
}

.site-nav{
  position:relative;
  z-index:1;
  flex:0 0 auto;
}

.topbar-right--public{
  gap:8px;
}

.brand{
  position:relative;
  display:inline-flex;
  align-items:flex-end;
  gap:0;
  flex-shrink:0;
  font-family:var(--ui-font-display);
  font-size:clamp(1.4rem, 2vw, 1.85rem);
  font-weight:900;
  letter-spacing:-.05em;
  line-height:.95;
}

.brand::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-8px;
  height:10px;
  background:radial-gradient(circle at center, rgba(255,77,77,.26), transparent 72%);
  filter:blur(8px);
  pointer-events:none;
}

.brand-white{
  color:#ffffff;
}

.brand-red{
  color:var(--red);
  filter:drop-shadow(0 10px 20px rgba(255,77,77,.2));
}

.topbar--public .brand{
  font-size:clamp(1.16rem, 3.2vw, 1.58rem);
  letter-spacing:-.045em;
  min-width:0;
  max-width:100%;
  overflow:hidden;
}

.topbar--public .brand-white,
.topbar--public .brand-red{
  white-space:nowrap;
}

.back-btn,
.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color:#fff;
  cursor:pointer;
  box-shadow:0 12px 26px rgba(2,6,18,.16);
  transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.back-btn:hover,
.nav-toggle:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border-color:rgba(255,255,255,.16);
  box-shadow:0 16px 30px rgba(2,6,18,.2);
}

.back-btn svg,
.nav-toggle svg,
.mb-icon svg,
.site-footer__brand svg{
  width:20px;
  height:20px;
  display:block;
}

.nav-toggle{
  display:none;
}

.topbar-public-cta{
  display:none;
  min-height:42px;
  padding:0 13px;
  border-radius:14px;
  font-size:.9rem;
  max-width:136px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.nav{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.nav a,
.nav .navlink,
.nav .nav-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid transparent;
  color:rgba(247,249,255,.84);
  font-size:.95rem;
  font-weight:775;
  line-height:1;
  transition:transform .16s ease, color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.nav a::after,
.nav .navlink::after,
.nav .nav-btn::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:6px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,77,77,0), rgba(255,77,77,.96), rgba(255,77,77,0));
  transform:scaleX(0);
  transition:transform .18s ease;
}

.nav a:hover,
.nav .navlink:hover,
.nav .nav-btn:hover{
  color:#fff;
  transform:translateY(-1px);
}

.nav a.active,
.nav .navlink.active{
  color:#fff;
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.08);
}

.nav a:hover::after,
.nav .navlink:hover::after,
.nav .nav-btn:hover::after,
.nav a.active::after,
.nav .navlink.active::after{
  transform:scaleX(1);
}

.nav-inline-form{
  margin:0;
  display:inline-flex;
}

.nav .nav-btn{
  cursor:pointer;
}

.nav--public .nav-public-primary{
  background:linear-gradient(180deg, rgba(255,77,77,.16), rgba(255,77,77,.08));
  border-color:rgba(255,77,77,.18);
  color:#fff;
  box-shadow:0 12px 24px rgba(255,77,77,.1);
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,77,77,.18);
  background:linear-gradient(180deg, rgba(255,77,77,.16), rgba(255,77,77,.08));
  color:#fff;
  font-size:.84rem;
  font-weight:850;
  white-space:nowrap;
  box-shadow:0 12px 28px rgba(255,77,77,.12);
}

.nbadge,
.mb-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--red), var(--red-2));
  color:#fff;
  font-size:.72rem;
  font-weight:900;
  box-shadow:0 10px 22px rgba(255,77,77,.16);
}

.mobile-nav-backdrop{
  position:fixed;
  inset:0;
  z-index:1290;
  background:rgba(4,8,17,.34);
  backdrop-filter:none;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}

body.td-shell--authenticated .mobile-nav-backdrop{
  background:rgba(4,8,17,.3);
  backdrop-filter:none;
  z-index:1390;
}

body.td-shell--guest .mobile-nav-backdrop{
  top:var(--header-h);
  background:rgba(5,10,18,.14);
  backdrop-filter:none;
  z-index:1390;
}

body.nav-open{
  overflow:hidden;
}

body.nav-open .mobile-nav-backdrop{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.mobile-bottom-nav{
  position:fixed;
  left:14px;
  right:14px;
  bottom:max(12px, env(safe-area-inset-bottom, 0px));
  z-index:1150;
  display:none;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
  padding:8px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(9,14,25,.95), rgba(7,10,18,.98));
  backdrop-filter:blur(16px);
  box-shadow:0 18px 40px rgba(2,6,18,.28);
}

.mobile-bottom-nav a{
  position:relative;
  min-height:60px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:8px 6px;
  border-radius:18px;
  color:rgba(247,249,255,.74);
  border:1px solid transparent;
  transition:transform .16s ease, color .16s ease, background .16s ease, border-color .16s ease;
}

.mobile-bottom-nav a::before{
  content:"";
  position:absolute;
  top:6px;
  left:50%;
  width:34px;
  height:4px;
  border-radius:999px;
  transform:translateX(-50%) scaleX(.4);
  background:linear-gradient(90deg, rgba(255,77,77,0), rgba(255,77,77,.95), rgba(255,77,77,0));
  opacity:0;
  transition:opacity .18s ease, transform .18s ease;
}

.mobile-bottom-nav a.active{
  color:#fff;
  background:linear-gradient(180deg, rgba(255,77,77,.16), rgba(255,77,77,.08));
  border-color:rgba(255,77,77,.16);
  transform:translateY(-2px);
}

.mobile-bottom-nav a.active::before{
  opacity:1;
  transform:translateX(-50%) scaleX(1);
}

.mb-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.mb-label{
  font-size:.79rem;
  font-weight:800;
  line-height:1;
}

.mb-badge{
  position:absolute;
  top:7px;
  right:14px;
}

.footer{
  margin-top:32px;
}

.site-footer{
  padding:0 22px 26px;
}

.site-footer__inner{
  width:min(100%, var(--td-shell-max));
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  box-shadow:0 18px 34px rgba(2,6,18,.14);
}

.site-footer__brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.site-footer__brand-mark{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(180deg, var(--red), var(--red-2));
  color:#fff;
  font-size:1rem;
  font-weight:900;
  box-shadow:0 12px 22px rgba(255,77,77,.16);
}

.site-footer__brand-copy{
  display:grid;
  gap:3px;
}

.site-footer__brand-copy strong{
  color:#fff;
  font-size:.96rem;
  letter-spacing:-.02em;
}

.site-footer__brand-copy span{
  color:var(--muted);
  font-size:.86rem;
}

.site-footer__links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.site-footer__links a,
.site-footer__links span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  color:var(--muted);
  font-size:.85rem;
  font-weight:700;
}

.site-footer__links a:hover{
  color:#fff;
  background:rgba(255,255,255,.05);
}

.card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(16,24,39,.96), rgba(10,15,28,.98));
  box-shadow:var(--shadow);
  padding:18px;
}

.grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:16px;
}

.h1{
  margin:0 0 8px;
  font-family:var(--ui-font-display);
  font-size:clamp(1.9rem, 3vw, 2.8rem);
  line-height:1.02;
  letter-spacing:-.05em;
}

.h2{
  margin:0 0 6px;
  font-family:var(--ui-font-display);
  font-size:clamp(1.3rem, 2vw, 1.95rem);
  line-height:1.08;
  letter-spacing:-.04em;
}

.muted{
  color:var(--muted);
}

.notice{
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px 16px;
  background:rgba(255,255,255,.04);
  color:var(--ui-text-soft);
}

.actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 18px;
  border-radius:18px;
  border:1px solid transparent;
  background:linear-gradient(180deg, var(--red), var(--red-2));
  color:#fff;
  font-weight:850;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 14px 28px rgba(255,77,77,.16);
  transition:transform .16s ease, filter .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
}

.btn:active{
  transform:translateY(0);
}

.btn.ghost{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.12);
  color:var(--text);
  box-shadow:none;
}

.btn.ghost:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.18);
}

.btn.danger{
  background:linear-gradient(180deg, rgba(244,63,94,.18), rgba(225,29,72,.14));
  border-color:rgba(244,63,94,.22);
  color:#fff2f4;
  box-shadow:none;
}

.input,
select,
textarea{
  width:100%;
  min-height:50px;
  padding:13px 15px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(3,7,18,.4);
  color:var(--text);
  outline:none;
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.input::placeholder,
textarea::placeholder{
  color:rgba(149,163,191,.78);
}

select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.72) 50%),
    linear-gradient(135deg, rgba(255,255,255,.72) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 2px),
    calc(100% - 16px) calc(50% - 2px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:42px;
}

.input:focus,
select:focus,
textarea:focus{
  border-color:rgba(255,77,77,.4);
  box-shadow:0 0 0 4px rgba(255,77,77,.12);
  background:rgba(5,10,22,.52);
}

.label{
  display:block;
  margin:12px 0 7px;
  color:var(--ui-text-soft);
  font-size:.92rem;
  font-weight:800;
}

.row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.alert{
  padding:12px 14px;
  border-radius:18px;
  border:1px solid var(--line);
  margin:12px 0;
  background:rgba(255,255,255,.04);
}

.alert.ok{
  border-color:rgba(34,197,94,.24);
}

.alert.err{
  border-color:rgba(244,63,94,.24);
}

.empty{
  padding:16px;
  border-radius:18px;
  border:1px dashed var(--line-strong);
  color:var(--muted);
  background:rgba(255,255,255,.02);
}

.profile-card{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
}

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

.profile-name{
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:900;
  flex-wrap:wrap;
}

.age{
  font-weight:700;
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
}

.bio{
  margin-top:8px;
  color:var(--muted);
  line-height:1.55;
}

.avatar{
  width:58px;
  height:58px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,77,77,.16);
  border:1px solid rgba(255,77,77,.24);
  color:#fff;
  font-weight:900;
  font-size:20px;
  overflow:hidden;
  flex-shrink:0;
}

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

.avatar.sm{
  width:44px;
  height:44px;
  border-radius:14px;
  font-size:16px;
}

.dot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
  border:1px solid var(--line);
}

.dot.on{
  background:var(--ok);
  border-color:rgba(34,197,94,.3);
}

.dot.off{
  background:rgba(255,255,255,.15);
}

.list{
  margin:0;
  padding-left:18px;
  color:var(--muted);
}

.list li{
  margin:6px 0;
}

.list-cards{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}

.mini-card{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
  background:rgba(255,255,255,.03);
}

.mini-body{
  flex:1;
  min-width:0;
}

.mini-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.table-wrap{
  width:100%;
  overflow:auto;
  border-radius:18px;
}

.notifications-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:20px;
}

.notification-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  transition:transform .16s ease, background .16s ease, border-color .16s ease;
}

.notification-item:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
}

.notification-avatar img{
  width:48px;
  height:48px;
  border-radius:50%;
  object-fit:cover;
}

.notification-content{
  flex:1;
}

.notification-text{
  font-size:.93rem;
  line-height:1.5;
}

.notification-time{
  margin-top:4px;
  font-size:.78rem;
  color:var(--muted);
}

.empty-state{
  text-align:center;
  margin-top:40px;
  color:var(--muted);
}

.mobile-only{
  display:none !important;
}

.desktop-only{
  display:initial !important;
}

@media (max-width: 980px){
  .container{
    padding:24px 18px 36px;
  }

  .grid{
    grid-template-columns:1fr;
  }

  .site-footer__inner{
    flex-direction:column;
    align-items:flex-start;
  }

  .site-footer__links{
    width:100%;
    justify-content:flex-start;
  }
}

@media (max-width: 1100px){
  body.td-shell--guest .nav-toggle{
    display:inline-flex;
  }

  body.td-shell--guest .topbar-left{
    min-width:0;
    padding-right:4px;
  }

  body.td-shell--guest .topbar-right--public{
    position:relative;
    z-index:1415;
    gap:8px;
  }

  body.td-shell--guest .topbar-public-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  body.td-shell--guest .topbar--public .brand{
    max-width:calc(100vw - 176px);
  }

  body.td-shell--guest .topbar > .site-nav.nav--public{
    position:fixed;
    top:calc(var(--header-h) + 10px);
    right:12px;
    left:auto;
    width:min(284px, calc(100vw - 24px));
    margin:0;
    display:grid !important;
    grid-template-columns:1fr;
    align-items:stretch;
    gap:8px;
    padding:14px;
    background:linear-gradient(180deg, rgba(9,13,24,.992), rgba(6,9,16,.998));
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    box-shadow:0 20px 46px rgba(2,6,18,.24);
    transform:translateY(-10px) scale(.985);
    transform-origin:top right;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:transform .2s ease, opacity .18s ease, visibility .18s ease;
    z-index:1410;
    overflow-y:auto;
    max-height:min(70dvh, 360px);
  }

  body.td-shell--guest .topbar > .site-nav.nav--public::before{
    content:"Acesso rápido";
    display:block;
    padding:2px 4px 6px;
    color:rgba(255,255,255,.46);
    font-size:.74rem;
    font-weight:900;
    letter-spacing:.18em;
    text-transform:uppercase;
  }

  body.td-shell--guest .topbar > .site-nav.nav--public a,
  body.td-shell--guest .topbar > .site-nav.nav--public .navlink,
  body.td-shell--guest .topbar > .site-nav.nav--public .nav-btn{
    width:100%;
    justify-content:flex-start;
    min-height:48px;
    padding:0 14px;
    border-radius:16px;
    white-space:normal;
    text-align:left;
  }

  body.td-shell--guest .topbar > .site-nav.nav--public a::after,
  body.td-shell--guest .topbar > .site-nav.nav--public .navlink::after,
  body.td-shell--guest .topbar > .site-nav.nav--public .nav-btn::after{
    display:none;
  }

  body.td-shell--guest .topbar > .site-nav.nav--public .nav-public-primary{
    display:none;
  }

  body.td-shell--guest .topbar > .site-nav.nav--public a.active{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.1);
  }

  body.nav-open.td-shell--guest .topbar > .site-nav.nav--public{
    transform:translateY(0) scale(1);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
}

@media (max-width: 899px){
  :root{
    --header-h:78px;
  }

  .topbar{
    min-height:var(--header-h);
    padding:14px 18px;
  }

  body.td-shell--authenticated{
    padding-bottom:calc(var(--mobile-bottom-nav-h) + 18px);
  }

  body.td-shell--guest .nav-toggle,
  body.td-shell--authenticated .nav-toggle{
    display:inline-flex;
  }

  body.td-shell--authenticated .topbar-right--app{
    position:relative;
    z-index:1415;
  }

  body.td-shell--authenticated .topbar > .site-nav.nav--app{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:min(82vw, 320px);
    max-width:320px;
    height:100dvh;
    margin:0;
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    background:linear-gradient(180deg, rgba(8,12,22,.992), rgba(5,8,16,.998));
    border-left:1px solid rgba(255,255,255,.08);
    box-shadow:-18px 0 40px rgba(2,6,18,.28);
    transform:translateX(108%);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:transform .26s ease, opacity .22s ease, visibility .22s ease;
    z-index:1410;
    overflow-y:auto;
    overscroll-behavior:contain;
    will-change:transform;
  }

  body.td-shell--authenticated .topbar > .site-nav.nav--app::before{
    content:"Menu";
    display:block;
    padding:6px 6px 10px;
    color:rgba(255,255,255,.42);
    font-size:.75rem;
    font-weight:900;
    letter-spacing:.18em;
    text-transform:uppercase;
  }

  body.td-shell--authenticated .topbar > .site-nav.nav--app .pill{
    align-self:flex-start;
    margin:4px 0 10px;
  }

  body.td-shell--authenticated .topbar > .site-nav.nav--app a,
  body.td-shell--authenticated .topbar > .site-nav.nav--app .navlink,
  body.td-shell--authenticated .topbar > .site-nav.nav--app .nav-btn{
    width:100%;
    justify-content:space-between;
    min-height:50px;
    padding:0 14px;
  }

  body.td-shell--authenticated .topbar > .site-nav.nav--app a.active,
  body.td-shell--authenticated .topbar > .site-nav.nav--app .navlink.active{
    background:linear-gradient(180deg, rgba(255,77,77,.16), rgba(255,77,77,.08));
    border-color:rgba(255,77,77,.2);
    box-shadow:0 12px 26px rgba(255,77,77,.1);
  }

  body.nav-open.td-shell--authenticated .topbar > .site-nav.nav--app{
    transform:translateX(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  body.td-shell--authenticated .mobile-bottom-nav{
    display:grid;
  }
}

@media (max-width: 768px){
  .container{
    width:100%;
    padding:20px 14px 30px;
  }

  .topbar{
    gap:10px;
    padding:12px 14px;
  }

  .topbar-public-cta{
    min-height:44px;
    padding:0 14px;
    border-radius:15px;
    font-size:.92rem;
  }

  .topbar-right--public{
    gap:6px;
  }

  .brand{
    font-size:1.48rem;
  }

  body.td-shell--guest .topbar--public .brand{
    max-width:calc(100vw - 160px);
  }

  body.td-shell--guest .topbar > .site-nav.nav--public{
    width:min(272px, calc(100vw - 24px));
  }

  .card{
    border-radius:20px;
    padding:16px;
  }

  .row{
    grid-template-columns:1fr;
  }

  .actions,
  .mini-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .actions .btn,
  .actions .input,
  .mini-actions .btn{
    width:100%;
  }

  .profile-card,
  .mini-card{
    align-items:flex-start;
    flex-direction:column;
  }

  .mobile-only{
    display:initial !important;
  }

  .desktop-only{
    display:none !important;
  }

  .site-footer__inner{
    gap:16px;
    padding:18px;
  }

  .site-footer__brand{
    align-items:flex-start;
  }

  .site-footer__links{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }

  .site-footer__links a,
  .site-footer__links span{
    justify-content:center;
    min-height:40px;
    padding:0 14px;
    border-radius:14px;
    background:rgba(255,255,255,.03);
  }
}

@media (max-width: 520px){
  .topbar{
    padding:10px 12px;
  }

  .container{
    padding:18px 10px 26px;
  }

  .brand{
    font-size:1.28rem;
  }

  body.td-shell--guest .topbar-public-cta{
    min-height:40px;
    padding:0 11px;
    font-size:.84rem;
    border-radius:14px;
    max-width:122px;
  }

  body.td-shell--guest .topbar--public .brand{
    max-width:calc(100vw - 150px);
  }

  body.td-shell--guest .topbar > .site-nav.nav--public{
    right:10px;
    width:min(260px, calc(100vw - 24px));
    padding:13px;
    border-radius:20px;
  }

  .nav-toggle,
  .back-btn{
    width:44px;
    height:44px;
    flex-basis:44px;
    border-radius:16px;
  }

  .btn,
  .input,
  select,
  textarea{
    min-height:50px;
  }

  .site-footer{
    padding:0 10px 20px;
  }

  .site-footer__inner{
    padding:16px;
    border-radius:20px;
  }

  .site-footer__links{
    grid-template-columns:1fr;
  }

  .mobile-bottom-nav{
    left:10px;
    right:10px;
  }

  .mb-badge{
    right:10px;
  }
}

@media (max-width: 640px){
  body.td-shell--guest .topbar-public-cta{
    display:none !important;
  }

  body.td-shell--guest .topbar--public .brand{
    max-width:calc(100vw - 88px);
    font-size:1.22rem;
  }

  body.td-shell--guest .topbar > .site-nav.nav--public .nav-public-primary{
    display:flex;
  }

  body.td-shell--guest .topbar > .site-nav.nav--public{
    width:min(248px, calc(100vw - 24px));
  }
}

@media (max-width: 389px){
  .topbar{
    padding:10px;
    gap:8px;
  }

  .brand{
    font-size:1.18rem;
  }

  .nav-toggle{
    width:42px;
    height:42px;
    flex-basis:42px;
  }

  body.td-shell--guest .topbar--public .brand{
    max-width:calc(100vw - 80px);
  }

  body.td-shell--guest .topbar > .site-nav.nav--public{
    right:8px;
    width:min(236px, calc(100vw - 20px));
  }
}

/* ===== BLOCO 2 · APP INTERNO UNIFICADO ===== */
body.td-shell--app .td-main{
  padding-top:10px;
}

body.td-shell--app .topbar{
  background:rgba(7,11,20,.84);
  border-bottom:1px solid rgba(255,255,255,.05);
  box-shadow:0 14px 34px rgba(2,6,18,.18);
}

body.td-shell--app .topbar-left{
  gap:10px;
}

body.td-shell--app .back-btn,
body.td-shell--app .nav-toggle{
  width:46px;
  height:46px;
  flex:0 0 46px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  border-color:rgba(255,255,255,.08);
  box-shadow:0 12px 24px rgba(2,6,18,.18);
}

body.td-shell--app .brand{
  font-size:clamp(1.18rem, 1.8vw, 1.46rem);
}

body.td-shell--app .mobile-bottom-nav{
  left:12px;
  right:12px;
  bottom:max(10px, env(safe-area-inset-bottom, 0px));
  padding:8px;
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(11,16,28,.96), rgba(7,10,18,.98)),
    radial-gradient(circle at top center, rgba(255,77,77,.10), transparent 42%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 46px rgba(2,6,18,.3);
}

body.td-shell--app .mobile-bottom-nav a{
  min-height:62px;
  border-radius:16px;
}

body.td-shell--app .mobile-bottom-nav a.active{
  background:linear-gradient(180deg, rgba(255,77,77,.16), rgba(255,77,77,.07));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 20px rgba(255,77,77,.08);
}

/* containers internos */
.feed-shell,
.profile-shell,
.settings-shell,
.location-shell,
.likes-shell,
.messages-shell,
.notif-shell,
.chat-shell{
  position:relative;
  width:min(100%, 1040px);
  margin:0 auto;
}

.profile-panel,
.settings-panel,
.location-card,
.likes-card,
.likes-gate,
.messages-panel,
.messages-tip-card,
.notif-card,
.chat-card,
.summary-card,
.boost-panel{
  backdrop-filter:blur(12px);
}

/* topo de seção consistente */
.profile-top,
.settings-top,
.location-top,
.likes-top,
.messages-top,
.notif-top,
.chat-top{
  margin-bottom:18px !important;
}

.profile-heading,
.settings-heading,
.likes-heading,
.messages-heading,
.notif-heading,
.chat-meta{
  gap:8px !important;
}

.profile-chip,
.settings-chip,
.likes-count,
.likes-upgrade-badge,
.messages-count,
.notif-count,
.notif-unread-count,
.location-kicker,
.location-pill,
.chat-pill,
.chat-status{
  box-shadow:none !important;
}

/* cards e painéis com mesmo peso */
.profile-panel,
.settings-panel,
.likes-gate,
.messages-panel,
.messages-tip-card,
.notif-card,
.summary-card,
.boost-panel{
  border:1px solid rgba(255,255,255,.09) !important;
  background:
    radial-gradient(circle at top right, rgba(255,77,77,.08), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  box-shadow:0 22px 50px rgba(2,6,18,.24) !important;
}

/* localização corrigida para a base escura */
.location-hero,
.location-card,
.location-mini,
.location-row,
.location-field,
.location-statusbox{
  color:var(--ui-text) !important;
}

.location-hero,
.location-card,
.location-mini{
  border:1px solid rgba(255,255,255,.09) !important;
  background:
    radial-gradient(circle at top right, rgba(255,77,77,.08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  box-shadow:0 22px 50px rgba(2,6,18,.24) !important;
}

.location-title,
.location-card h2,
.location-row strong,
.location-field label,
.location-mini strong,
.location-mini span{
  color:var(--ui-text) !important;
}

.location-subtitle,
.location-row small,
.location-mini small,
.location-muted,
.location-note,
.location-loading,
.location-field small{
  color:var(--ui-text-muted) !important;
}

.location-row,
.location-field select,
.location-field input,
.location-field textarea{
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:var(--ui-text) !important;
}

.location-actions .ghost,
.location-actions .danger,
.location-actions .primary{
  min-height:46px;
  border-radius:16px !important;
}

.location-actions .ghost{
  background:rgba(255,255,255,.05) !important;
  color:var(--ui-text) !important;
  border:1px solid rgba(255,255,255,.1) !important;
}

.location-actions .danger{
  background:rgba(244,63,94,.12) !important;
  color:#ffd5dd !important;
  border:1px solid rgba(244,63,94,.2) !important;
}

.location-actions .primary{
  background:linear-gradient(180deg, rgba(255,77,77,.98), rgba(226,52,52,.96)) !important;
  color:#fff !important;
}

/* listas internas */
.settings-link,
.settings-link-btn,
.message-item,
.notif-card,
.likes-card{
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.settings-link:hover,
.settings-link-btn:hover,
.message-item:hover,
.notif-card:hover,
.likes-card:hover{
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:0 22px 48px rgba(2,6,18,.26) !important;
}

.message-item,
.notif-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(13,19,34,.94), rgba(9,14,26,.98)) !important;
}

.message-preview,
.notif-body,
.notif-hint,
.likes-bio,
.profile-bio,
.chat-sub,
.chat-status,
.account-meta,
.settings-link-meta,
.settings-panel p{
  color:var(--ui-text-muted) !important;
}

/* chat mais maduro */
.chat-card{
  border-radius:28px !important;
}

.chat-top{
  padding:18px 18px 16px !important;
}

.chat-scroller{
  background:linear-gradient(180deg, rgba(6,10,18,.46), rgba(6,10,18,.18)) !important;
}

.composer-box{
  border-top:1px solid rgba(255,255,255,.06) !important;
  background:linear-gradient(180deg, rgba(8,12,22,.94), rgba(6,10,18,.98)) !important;
}

.composer-form .ui-textarea,
.composer-form textarea,
.ui-textarea{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:var(--ui-text) !important;
}

.send-btn,
.discover-main-btn,
.feed-cta-row .js-open-btn,
.profile-actions .btn.primary,
.location-actions .primary{
  box-shadow:0 16px 32px rgba(255,77,77,.16) !important;
}

/* estados vazios e feedbacks */
.ui-empty,
.empty-state,
.likes-empty,
.messages-empty,
.notif-empty,
.chat-empty{
  border:1px dashed rgba(255,255,255,.1) !important;
  background:
    radial-gradient(circle at top right, rgba(255,77,77,.06), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)) !important;
  border-radius:24px !important;
}

@media (max-width: 980px){
  .profile-grid,
  .settings-grid,
  .location-grid,
  .messages-layout{
    grid-template-columns:1fr !important;
  }

  .settings-overview,
  .location-overview,
  .notif-overview{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px){
  body.td-shell--app .td-main{
    padding-top:6px;
  }

  .feed-shell,
  .profile-shell,
  .settings-shell,
  .location-shell,
  .likes-shell,
  .messages-shell,
  .notif-shell,
  .chat-shell{
    width:100%;
  }

  .profile-top,
  .settings-top,
  .likes-top,
  .messages-top,
  .notif-top{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
  }

  .settings-overview,
  .location-overview,
  .notif-overview,
  .messages-badges{
    grid-template-columns:1fr 1fr !important;
  }

  .settings-panel,
  .location-card,
  .location-hero,
  .likes-gate,
  .messages-panel,
  .messages-tip-card,
  .notif-card,
  .chat-card,
  .summary-card,
  .boost-panel,
  .profile-panel{
    border-radius:22px !important;
  }

  .chat-top-left{
    gap:12px !important;
  }

  .chat-avatar{
    width:56px !important;
    height:56px !important;
    border-radius:18px !important;
    flex-basis:56px !important;
  }

  .chat-name{
    font-size:1.18rem !important;
  }

  .chat-age{
    font-size:.94rem !important;
  }

  .mobile-bottom-nav .mb-label{
    font-size:.74rem;
  }
}

@media (max-width: 520px){
  .settings-overview,
  .location-overview,
  .notif-overview,
  .messages-badges,
  .likes-grid{
    grid-template-columns:1fr !important;
  }

  .settings-link,
  .settings-link-btn,
  .message-item,
  .notif-card,
  .location-row{
    border-radius:16px !important;
  }

  .chat-top{
    padding:16px 14px 14px !important;
  }
}