:root{
  --bg:#0b0b10;
  --bg-2:#07070c;
  --card:#12121a;
  --card-2:#0f0f17;
  --muted:#a7a7b3;
  --text:#f1f1f6;
  --red:#e50914;
  --red-2:#ff1f2d;
  --white:#ffffff;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.14);
  --ok:#17c964;
  --err:#ff4d4f;
  --shadow:0 14px 36px rgba(0,0,0,.28);
  --radius:18px;
  --radius-sm:14px;
  --header-h:76px;
  --mobile-bottom-nav-h:78px;
}

*{
  box-sizing:border-box;
  -webkit-tap-highlight-color: transparent;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(229,9,20,.08), transparent 22%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  color:var(--text);
  min-height:100vh;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  border:0;
}

.container{
  width:min(100%, 1120px);
  margin:0 auto;
  padding:24px 20px 28px;
}

.topbar{
  position:sticky;
  top:0;
  z-index:100;
  min-height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 20px;
  border-bottom:1px solid var(--line);
  background:rgba(10,10,16,.92);
  backdrop-filter:blur(12px);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:0;
  font-weight:900;
  letter-spacing:.1px;
  font-size:18px;
  line-height:1;
  flex-shrink:0;
}

.brand-white{ color:var(--white); }
.brand-red{ color:var(--red-2); }

.nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.nav a,
.nav button,
.nav .pill{
  flex-shrink:0;
}

.nav a{
  opacity:.92;
  transition:opacity .15s ease, transform .15s ease;
}

.nav a:hover{
  opacity:1;
  transform:translateY(-1px);
}

.nav .navlink{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.nav .nbadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  line-height:1;
  background:rgba(239,68,68,.16);
  border:1px solid rgba(239,68,68,.28);
  color:rgba(255,255,255,.92);
}

.nav-toggle{
  display:none;
  width:46px;
  height:46px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:20px;
}

.mobile-nav-backdrop{
  display:none;
}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}

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

.h1{
  margin:0 0 8px 0;
  font-size:clamp(24px, 2vw, 34px);
  line-height:1.08;
}

.h2{
  margin:0 0 6px 0;
  font-size:clamp(20px, 1.6vw, 28px);
  line-height:1.1;
}

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

.notice{
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  background:rgba(255,255,255,.03);
}

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

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:11px 16px;
  border-radius:14px;
  background:var(--red);
  border:1px solid rgba(255,255,255,.08);
  font-weight:800;
  color:var(--text);
  cursor:pointer;
  transition:transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease;
}

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

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

.btn.ghost{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.18);
  color:var(--text);
}

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

.input,
select,
textarea{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.28);
  color:var(--text);
  outline:none;
  transition:border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.input:focus,
select:focus,
textarea:focus{
  border-color:rgba(229,9,20,.45);
  box-shadow:0 0 0 4px rgba(229,9,20,.10);
  background:rgba(0,0,0,.34);
}

.label{
  display:block;
  margin:12px 0 7px 0;
  color:var(--muted);
  font-weight:600;
}

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

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

.alert.ok{
  border-color:rgba(23,201,100,.35);
}

.alert.err{
  border-color:rgba(255,77,79,.35);
}

.empty{
  padding:14px;
  border-radius:14px;
  border:1px dashed var(--line-strong);
  color:var(--muted);
}

.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.45;
}

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

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

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

.footer{
  padding:22px 18px;
  text-align:center;
  color:var(--muted);
  border-top:1px solid var(--line);
  margin-top:18px;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
  background:rgba(255,255,255,.03);
  white-space:nowrap;
}

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

.dot.on{
  background:var(--ok);
  border-color:rgba(23,201,100,.35);
}

.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:14px;
  padding:12px;
  background:rgba(255,255,255,.02);
}

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

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

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

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

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

/* Tablet */
@media (max-width: 980px){
  .container{
    padding:18px 16px 24px;
  }

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

/* Mobile */
@media (max-width: 768px){
  :root{
    --header-h:72px;
  }

  body.nav-open{
    overflow:hidden;
  }

  .container{
    width:100%;
    padding:14px 12px 22px;
  }

  .topbar{
    min-height:var(--header-h);
    padding:12px;
    gap:10px;
  }

  .brand{
    font-size:17px;
    max-width:160px;
    line-height:1.05;
  }

  .nav-toggle{
    display:inline-flex;
  }

  .mobile-nav-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.48);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
    z-index:89;
    display:block;
  }

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

  .nav{
    position:fixed;
    top:var(--header-h);
    right:0;
    width:min(88vw, 360px);
    height:calc(100vh - var(--header-h));
    overflow:auto;
    background:rgba(11,11,16,.98);
    border-left:1px solid var(--line);
    padding:14px 12px 18px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:10px;
    flex-wrap:nowrap;
    transform:translateX(100%);
    transition:transform .22s ease;
    z-index:90;
  }

  body.nav-open .nav{
    transform:translateX(0);
  }

  .nav a,
  .nav button,
  .nav .btn,
  .nav .pill{
    width:100%;
  }

  .nav a,
  .nav button{
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:12px 14px;
    border-radius:14px;
    background:rgba(255,255,255,.02);
    border:1px solid transparent;
  }

  .nav a:hover,
  .nav button:hover{
    transform:none;
    background:rgba(255,255,255,.05);
    border-color:var(--line);
  }

  .nav .btn{
    justify-content:center;
  }

  .nav .pill{
    justify-content:center;
    min-height:38px;
    margin-bottom:2px;
  }

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

  .h1{
    font-size:18px;
  }

  .h2{
    font-size:18px;
  }

  .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{
    align-items:flex-start;
    flex-direction:column;
  }

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

  .footer{
    padding:18px 12px 26px;
  }

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

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

/* Mobile pequeno */
@media (max-width: 520px){
  .container{
    padding:12px 10px 18px;
  }

  .topbar{
    padding:10px;
  }

  .card{
    padding:14px;
  }

  .btn{
    min-height:48px;
    padding:12px 14px;
  }

  .input,
  select,
  textarea{
    min-height:50px;
    padding:12px 14px;
  }

  .brand{
    font-size:16px;
  }
}
/* =========================
   FORÇA MENU MOBILE
========================= */
@media (max-width: 768px){

  .topbar{
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .brand{
    max-width: 170px;
    flex-shrink: 0;
    position: relative;
    z-index: 1002;
  }

  .nav-toggle{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    position: relative;
    z-index: 1002;
  }

  .nav{
    position: fixed !important;
    top: 72px !important;
    right: 0 !important;
    width: min(86vw, 340px) !important;
    height: calc(100vh - 72px) !important;
    background: rgba(11,11,16,.98) !important;
    border-left: 1px solid rgba(255,255,255,.08) !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    overflow-y: auto !important;
    transform: translateX(100%) !important;
    transition: transform .22s ease !important;
    z-index: 1001 !important;
  }

  body.nav-open .nav{
    transform: translateX(0) !important;
  }

  .nav a,
  .nav .btn,
  .nav .pill{
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
  }

  .nav .btn{
    justify-content: center !important;
  }

  .mobile-nav-backdrop{
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.45) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .18s ease !important;
    z-index: 1000 !important;
  }

  body.nav-open .mobile-nav-backdrop{
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}
@media (max-width: 700px){

.profile-card{
flex-direction:column;
align-items:flex-start;
gap:12px;
}

.profile-card .avatar{
width:70px;
height:70px;
}

.profile-card .actions{
width:100%;
display:flex;
gap:10px;
}

.profile-card .actions .btn{
flex:1;
text-align:center;
}

}
/* =========================
   MOBILE BOTTOM NAV
========================= */

.mobile-bottom-nav{
  display:none;
}

@media (max-width: 768px){
  body{
    padding-bottom: calc(var(--mobile-bottom-nav-h) + 10px);
  }

  .mobile-bottom-nav{
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 1100;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 8px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(10,10,16,.94);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px rgba(0,0,0,.30);
  }

  .mobile-bottom-nav a{
    min-height: 58px;
    border-radius: 16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    color: var(--muted);
    background: transparent;
    border: 1px solid transparent;
    transition: background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
    position: relative;
  }

  .mobile-bottom-nav a:active{
    transform: scale(.98);
  }

  .mobile-bottom-nav a.active{
    color: var(--text);
    background: rgba(229,9,20,.10);
    border-color: rgba(229,9,20,.20);
  }

  .mobile-bottom-nav .mb-icon{
    font-size: 18px;
    line-height: 1;
  }

  .mobile-bottom-nav .mb-label{
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
  }

  .mobile-bottom-nav .mb-badge{
    position:absolute;
    top:6px;
    right:14px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 10px;
    font-weight: 800;
    color:#fff;
    background: rgba(239,68,68,.94);
    border:1px solid rgba(255,255,255,.14);
  }
}
/* =========================
   NOTIFICATIONS
========================= */

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

.notification-item{
display:flex;
align-items:center;
gap:12px;
padding:12px;
border-radius:12px;
background:rgba(255,255,255,0.04);
transition:all .15s ease;
text-decoration:none;
color:inherit;
}

.notification-item:hover{
background:rgba(255,255,255,0.08);
}

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

.notification-content{
flex:1;
}

.notification-text{
font-size:14px;
}

.notification-time{
font-size:12px;
opacity:0.6;
margin-top:3px;
}

.empty-state{
text-align:center;
margin-top:40px;
opacity:0.7;
}


/* =========================
   BOTTOM NAV PRODUCTION FINAL
========================= */

:root{
  --td-mobile-nav-gap: 10px;
  --td-mobile-nav-radius: 24px;
  --td-mobile-nav-pad: 8px;
  --td-mobile-nav-icon: 18px;
  --td-mobile-nav-label: 11px;
}

@media (max-width: 768px){

  body{
    padding-bottom: calc(var(--mobile-bottom-nav-h) + 14px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-bottom-nav{
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1200 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--td-mobile-nav-gap) !important;
    padding: var(--td-mobile-nav-pad) !important;
    border-radius: var(--td-mobile-nav-radius) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    background:
      linear-gradient(180deg, rgba(17,24,39,.96), rgba(10,10,16,.96)) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow:
      0 18px 40px rgba(0,0,0,.34),
      0 0 0 1px rgba(255,255,255,.03) inset !important;
  }

  .mobile-bottom-nav a{
    position: relative !important;
    min-height: 58px !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 6px 4px !important;
    color: rgba(255,255,255,.68) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    text-decoration: none !important;
    transition:
      background .16s ease,
      color .16s ease,
      border-color .16s ease,
      transform .14s ease,
      box-shadow .16s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mobile-bottom-nav a:active{
    transform: scale(.97) !important;
  }

  .mobile-bottom-nav a .mb-icon{
    font-size: var(--td-mobile-nav-icon) !important;
    line-height: 1 !important;
    transform: translateY(0);
    transition: transform .16s ease, filter .16s ease !important;
  }

  .mobile-bottom-nav a .mb-label{
    font-size: var(--td-mobile-nav-label) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    white-space: nowrap !important;
  }

  .mobile-bottom-nav a.active{
    color: #fff !important;
    background: linear-gradient(180deg, rgba(229,9,20,.16), rgba(229,9,20,.10)) !important;
    border-color: rgba(229,9,20,.20) !important;
    box-shadow: 0 10px 24px rgba(229,9,20,.14) !important;
  }

  .mobile-bottom-nav a.active .mb-icon{
    transform: translateY(-1px) scale(1.06) !important;
    filter: drop-shadow(0 4px 10px rgba(229,9,20,.24)) !important;
  }

  .mobile-bottom-nav a.active::after{
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 4px !important;
    width: 22px !important;
    height: 3px !important;
    border-radius: 999px !important;
    transform: translateX(-50%) !important;
    background: rgba(255,255,255,.96) !important;
  }

  .mobile-bottom-nav .mb-badge{
    position: absolute !important;
    top: 5px !important;
    right: 10px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    color: #fff !important;
    background: linear-gradient(180deg, rgba(239,68,68,.98), rgba(220,38,38,.98)) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: 0 8px 18px rgba(239,68,68,.22) !important;
  }
}

@media (max-width: 420px){
  :root{
    --td-mobile-nav-gap: 8px;
    --td-mobile-nav-pad: 7px;
    --td-mobile-nav-icon: 17px;
    --td-mobile-nav-label: 10px;
  }

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

  .mobile-bottom-nav a{
    min-height: 56px !important;
    border-radius: 15px !important;
  }

  .mobile-bottom-nav .mb-badge{
    right: 8px !important;
  }
}