/*
  UI 2026 – Dark Premium (Blue/Ice)
  Design-only layer applied on top of existing markup.
  Keeps HTML structure unchanged.
*/

:root{
  /* Core palette (aligned with login) */
  --bg0:#070A12;
  --bg1:#0B1430;
  --surfaceA: rgba(14,26,58,.86);
  --surfaceB: rgba(7,10,18,.84);

  --txt:#EAF0FF;
  --muted: rgba(234,240,255,.72);
  --muted2: rgba(234,240,255,.56);
  --line: rgba(255,255,255,.12);

  --brand:#2F6BFF;     /* Blue */
  --brand2:#7BE3FF;    /* Ice */

  --ok:#1fd58a;
  --warn:#f59e0b;
  --danger:#ff5f7a;

  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --shadow2: 0 12px 28px rgba(0,0,0,.38);
  --r: 18px;

  /* Layout */
  --container: 1120px;
  --gutter: 20px;

  /* Compatibility aliases (older inline styles on some pages) */
  --ink: var(--txt);
  --primary: var(--brand);
  --primary2: var(--brand2);
  --focus: rgba(47,107,255,.22);

  /* Motion vars (set by /assets/motion.js) */
  --mx: 0;
  --my: 0;
}

*{box-sizing:border-box}
html,body{height:100%}
html{ scroll-padding-top: 92px; }


body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--txt);
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(47,107,255,.35), transparent 55%),
    radial-gradient(900px 600px at 80% 25%, rgba(123,227,255,.22), transparent 60%),
    radial-gradient(900px 700px at 50% 120%, rgba(47,107,255,.18), transparent 62%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

/* Animated glow blobs + parallax (subtle) */
body::before,
body::after{
  content:"";
  position: fixed;
  inset: -20%;
  pointer-events:none;
  z-index:-2;
  background:
    radial-gradient(circle at 35% 40%, rgba(47,107,255,.24), transparent 45%),
    radial-gradient(circle at 70% 55%, rgba(123,227,255,.18), transparent 48%);
  filter: blur(40px);
  opacity:.85;
  transform: translate3d(calc(var(--mx) * 26px), calc(var(--my) * 18px), 0);
  animation: uiFloaty 14s ease-in-out infinite;
}
body::after{
  opacity:.62;
  mix-blend-mode: screen;
  animation-duration: 18s;
  transform: rotate(12deg) translate3d(calc(var(--mx) * -18px), calc(var(--my) * 14px), 0);
}

@keyframes uiFloaty{
  0%,100%{transform: translate3d(calc(var(--mx) * 26px), calc(var(--my) * 18px), 0) scale(1)}
  50%{transform: translate3d(calc(var(--mx) * 18px + 10px), calc(var(--my) * 14px - 8px), 0) scale(1.03)}
}

/* Optional stylized background art (kept subtle) */
@supports (background: url("/assets/bg-hug.svg")){
  body{
    background:
      url("/assets/bg-hug.svg") center 110px / min(1200px, 94vw) no-repeat fixed,
      radial-gradient(1200px 700px at 20% 10%, rgba(47,107,255,.35), transparent 55%),
      radial-gradient(900px 600px at 80% 25%, rgba(123,227,255,.22), transparent 60%),
      radial-gradient(900px 700px at 50% 120%, rgba(47,107,255,.18), transparent 62%),
      linear-gradient(180deg, var(--bg0), var(--bg1));
  }
}

a{color:inherit}
a:hover{opacity:.96}

/* Center site content, leave side rails available (ads later) */
.navin,
.wrap,
.container,
.wrapper,
.main,
main{
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Shared small text */
.small{font-size:12px;color:var(--muted)}
.muted{color:var(--muted)}

/* Top bar / nav */
.nav,
.topbar{
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(7,10,18,.78);
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.36);
  backdrop-filter: blur(10px);
}

.topbar{position: fixed; width: 100%;}
.spacer{height:64px}

.navin,
.topbar_in{
  padding-top: 14px;
  padding-bottom: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 900;
  letter-spacing: .2px;
  text-decoration:none;
  color: var(--txt);
}
.brand::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 0 0 6px rgba(47,107,255,.15);
}

.logoDot{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 0 0 6px rgba(47,107,255,.15);
}

/* Pills / badges */
.pill,
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  backdrop-filter: blur(8px);
}
.pill.on{background: rgba(47,107,255,.18); border-color: rgba(47,107,255,.30)}

/* Headings */
.title{
  margin: 10px 0 16px 0;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--txt);
}
h1,h2,h3{color:var(--txt)}

/* Page wrapper */
.wrap{padding-top: 18px; padding-bottom: 30px}

/* Cards / panels */
.card,
.box,
.panel,
.ui-card,
.ui-panel,
.formbox,
.tablewrap,
.profilebox,
.person-card,
.hero{
  border:1px solid var(--line);
  border-radius: calc(var(--r) + 6px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    radial-gradient(900px 520px at 20% 20%, rgba(47,107,255,.22), transparent 62%),
    radial-gradient(900px 520px at 80% 70%, rgba(123,227,255,.14), transparent 64%),
    linear-gradient(180deg, var(--surfaceA), var(--surfaceB));
  box-shadow: var(--shadow2);
  backdrop-filter: blur(10px);
}

.card,
.box,
.panel,
.formbox,
.profilebox,
.person-card{
  padding: 16px;
}

.card:hover,
.box:hover,
.panel:hover,
.formbox:hover,
.profilebox:hover,
.person-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(123,227,255,.22);
}

.card,
.box,
.panel,
.formbox,
.profilebox,
.person-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Buttons */
.btn,
button,
input[type="submit"],
input[type="button"],
a.button{
  appearance:none;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 900;
  cursor:pointer;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, filter .16s ease;
  position: relative;
  overflow: hidden;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover{
  transform: translateY(-1px);
  border-color: rgba(123,227,255,.22);
}

/* Primary */
.btnPrimary,
.btn.btnPrimary,
button.btnPrimary,
button.btn.btnPrimary,
input[type="submit"],
button[type="submit"]{
  color: #06102a !important;
  border-color: rgba(123,227,255,.38);
  background: linear-gradient(135deg, var(--brand), rgba(123,227,255,.92));
  box-shadow: 0 18px 34px rgba(47,107,255,.22);
}

/* Secondary (outline) */
.btn2{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.88);
}

/* Shimmer on primary hover */
.btnPrimary::after,
input[type="submit"]::after,
button[type="submit"]::after{
  content:"";
  position:absolute;
  inset: -40% -40% -40% -40%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.40), transparent 65%);
  transform: translateX(-35%) rotate(8deg);
  opacity:0;
}
.btnPrimary:hover::after,
input[type="submit"]:hover::after,
button[type="submit"]:hover::after{
  opacity:1;
  animation: uiShimmer .9s ease forwards;
}
@keyframes uiShimmer{
  from{transform: translateX(-40%) rotate(8deg)}
  to{transform: translateX(40%) rotate(8deg)}
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  color: var(--txt);
  outline:none;
  font-size: 15px;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

textarea{min-height: 90px; resize: vertical;}

input::placeholder,
textarea::placeholder{color: rgba(234,240,255,.52)}

input:focus,
select:focus,
textarea:focus{
  box-shadow: 0 0 0 5px var(--focus);
  border-color: rgba(123,227,255,.45);
  background: rgba(0,0,0,.20);
}

/* Tables */
table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: calc(var(--r) + 6px);
  overflow:hidden;
  background: rgba(8,12,24,.55);
  box-shadow: var(--shadow2);
}
th, td{
  text-align:left;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
th{
  font-size: 12px;
  color: rgba(234,240,255,.78);
  text-transform: uppercase;
  letter-spacing: .06em;
  background: rgba(47,107,255,.16);
}
tr:last-child td{border-bottom:none}

/* Layout helpers */
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.divider{height:1px; background: rgba(255,255,255,.10); margin: 14px 0}

/* Dashboard layout (filters + results) */
.grid{display:grid; gap:18px; align-items:start}
@media(min-width: 980px){
  .grid{grid-template-columns: minmax(320px, 360px) 1fr}
}

/* Chat layout */
.layout{display:grid; gap:18px; align-items:start}
@media(min-width: 980px){
  .layout{grid-template-columns: 1.55fr .75fr}
}

/* Home hero */
.hero{padding: 20px; overflow:hidden}
.heroGrid{display:grid; gap:18px; align-items:stretch}
@media(min-width: 980px){
  .heroGrid{grid-template-columns: 1.05fr .95fr}
}

.kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  font-weight: 800;
  font-size: 12px;
}
.dot{width:7px;height:7px;border-radius:99px;background: var(--ok)}

.h1{margin: 10px 0 8px 0; font-size: 34px; line-height: 1.08; letter-spacing: -.4px;}
.sub{color: var(--muted); line-height: 1.55; max-width: 56ch;}

.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top: 16px}
.chip{
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  font-weight: 800;
  font-size: 13px;
}

.ctaRow{display:flex; gap:12px; flex-wrap:wrap; margin-top: 16px}
.note{margin-top: 10px; color: var(--muted2); font-size: 12px}

.heroMedia{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: calc(var(--r) + 6px);
  min-height: 280px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    radial-gradient(900px 520px at 30% 20%, rgba(47,107,255,.26), transparent 62%),
    radial-gradient(900px 520px at 80% 70%, rgba(123,227,255,.16), transparent 64%),
    url("/assets/hero.jpg") center/cover no-repeat;
  box-shadow: var(--shadow2);
}

/* Sections */
.section{margin-top: 18px}
.sectionTitle{font-weight: 900; letter-spacing: -.2px; font-size: 16px}

.grid3{display:grid; gap:16px; margin-top: 12px}
@media(min-width: 760px){.grid3{grid-template-columns: repeat(3, minmax(0,1fr));}}

.icon{
  width:42px; height:42px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  box-shadow: 0 12px 24px rgba(0,0,0,.22);
}
.icon svg{width:22px;height:22px}

/* Register / forgot / reset – shell layout */
.shell{width:100%; display:grid; gap:18px; align-items:stretch}
@media(min-width: 980px){
  .shell{grid-template-columns: 1.05fr .95fr}
}

.panel{padding: 20px}
.panel.right{position:relative; overflow:hidden}
.panel.right::before{
  content:"";
  position:absolute;
  right:-60px;
  bottom:-80px;
  width:520px;
  height:520px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(123,227,255,.35), transparent 55%),
    radial-gradient(circle at 65% 65%, rgba(47,107,255,.35), transparent 55%);
  opacity:.45;
  transform: rotate(18deg);
  animation: uiSlowSpin 22s linear infinite;
  pointer-events:none;
}
@keyframes uiSlowSpin{to{transform: rotate(378deg);}}

.form{display:grid; gap:12px}
.field{display:grid; gap:6px}
.helper{color: var(--muted2); font-size: 12px; line-height: 1.45}

.alert{
  border: 1px solid rgba(255,95,122,.28);
  background: rgba(255,95,122,.10);
  color: rgba(255,255,255,.92);
  border-radius: calc(var(--r) + 6px);
  padding: 12px 14px;
}
.alert.ok{
  border-color: rgba(31,213,138,.28);
  background: rgba(31,213,138,.10);
}

.link{color: rgba(123,227,255,.95); text-decoration:none; font-weight: 800}
.link:hover{text-decoration:underline}
.divider{opacity:1}

.btnRow{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top: 6px}
.divider{height:1px}

/* Avatar picker */
.avatarsWrap{border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.12); border-radius: calc(var(--r) + 6px); padding: 12px}
.avatars{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px}
@media(min-width: 520px){.avatars{grid-template-columns: repeat(3, minmax(0,1fr));}}
@media(min-width: 980px){.avatars{grid-template-columns: repeat(4, minmax(0,1fr));}}

.av{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: calc(var(--r) + 4px);
  background: rgba(255,255,255,.04);
  padding: 10px;
  cursor:pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
  position:relative;
}
.av:hover{transform: translateY(-1px); border-color: rgba(123,227,255,.22)}
.av.sel{border-color: rgba(123,227,255,.45); background: rgba(47,107,255,.10)}
.av img{width:100%; height:120px; object-fit:cover; border-radius: 14px; border: 1px solid rgba(255,255,255,.10)}
.av .badge{position:absolute; top:10px; right:10px}

/* Chat bubbles */
.bubble{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: calc(var(--r) + 6px);
  background: rgba(0,0,0,.14);
  padding: 12px 12px;
  margin: 10px 0;
}
.bubble .meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap; color: var(--muted)}
.bubble .name{font-weight: 900; color: rgba(255,255,255,.92)}
.bubble .time{font-size: 12px; color: var(--muted2)}
.bubble .text{margin-top: 8px; white-space: pre-wrap; line-height: 1.45}
.bubble .img{margin-top: 10px; max-width:100%; border-radius: 14px; border: 1px solid rgba(255,255,255,.12)}

/* Online users list */
.users .uitem,
.uitem{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  padding: 10px 12px;
  margin-bottom: 10px;
}

.badgeGreen{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 28px; height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(31,213,138,.16);
  border: 1px solid rgba(31,213,138,.30);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 12px;
}

/* Toast */
.toast{
  border: 1px solid rgba(123,227,255,.22);
  border-radius: calc(var(--r) + 6px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    radial-gradient(900px 520px at 20% 20%, rgba(47,107,255,.20), transparent 62%),
    linear-gradient(180deg, rgba(11,22,52,.72), rgba(7,10,18,.72));
  box-shadow: var(--shadow2);
  padding: 14px 14px;
  display:flex;
  justify-content:space-between;
  gap: 12px;
  align-items:center;
  margin: 12px 0;
}
.toastTitle{font-weight: 900}

/* Select2 (multi-select) dark theme */
.select2-container--default .select2-selection--multiple{
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  padding: 6px 8px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple{
  border-color: rgba(123,227,255,.45);
  box-shadow: 0 0 0 5px var(--focus);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
  background: rgba(47,107,255,.16);
  border: 1px solid rgba(47,107,255,.26);
  color: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 4px 10px;
  margin-top: 6px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
  color: rgba(255,255,255,.80);
  margin-right: 6px;
}
.select2-dropdown{
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(7,10,18,.92) !important;
  color: var(--txt);
  box-shadow: var(--shadow2);
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
  background: rgba(47,107,255,.18) !important;
  color: var(--txt) !important;
}

/* Reveal animation (driven by /assets/motion.js) */
.reveal{opacity:0; transform: translateY(10px)}
.reveal.is-visible{opacity:1; transform: translateY(0); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1)}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  body::before, body::after{animation:none}
  .card, .box, .panel, .formbox, .profilebox, .person-card{transition:none}
  .reveal{opacity:1; transform:none}
  .reveal.is-visible{transition:none}
  .btnPrimary:hover::after{animation:none}
}


/* Dashboard – Persoane: avatar mic la dreapta numelui + link către profil */
.profiles{
  display:grid;
  gap:12px;
}

.p{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    radial-gradient(900px 420px at 30% 0%, rgba(47,107,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(14,26,58,.78), rgba(11,22,52,.78));
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.p:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 52px rgba(0,0,0,.45);
  border-color: rgba(123,227,255,.28);
}

.p > div{
  order:1;
  min-width:0;
}

.pavatarLink{
  order:2;
  flex:0 0 auto;
  display:inline-flex;
  align-items:flex-start;
  justify-content:flex-end;
  text-decoration:none;
}

.pavatar{
  width:34px;
  height:34px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.pavatarLink:hover .pavatar{
  border-color: rgba(123,227,255,.42);
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
  transform: translateY(-1px);
}

.pnameLink, .pnameLink:visited{
  color: var(--txt);
  text-decoration:none;
  font-weight:850;
  letter-spacing:-0.01em;
  display:inline-block;
  max-width:100%;
}
.pnameLink:hover{
  text-decoration:underline;
  text-decoration-color: rgba(123,227,255,.55);
}

.pname{
  font-size:16px;
  line-height:1.15;
  margin:0;
}

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