/* =========================================================
   MODERN GLOBAL DESIGN SYSTEM
   Premium SaaS / Marketplace UI
========================================================= */

/* =========================================================
   ROOT VARIABLES
========================================================= */

:root{

  /* COLORS */
  --primary:#2563eb;
  --primary-hover:#1d4ed8;

  --accent:#7c3aed;

  --text:#0f172a;
  --text-light:#64748b;

  --bg:#f5f7fb;

  --card:
    rgba(255,255,255,0.72);

  --card-solid:#ffffff;

  --border:
    rgba(226,232,240,0.9);

  --success:#10b981;
  --danger:#ef4444;
  --warning:#f59e0b;

  /* SHADOWS */
  --shadow-sm:
    0 4px 12px rgba(15,23,42,0.04);

  --shadow-md:
    0 10px 30px rgba(15,23,42,0.08);

  --shadow-lg:
    0 24px 60px rgba(15,23,42,0.14);

  /* RADIUS */
  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:24px;
  --radius-xl:32px;

  /* TRANSITIONS */
  --transition:
    all .25s ease;

}

/* =========================================================
   RESET
========================================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;

  -webkit-tap-highlight-color:transparent;
}

html{
  scroll-behavior:smooth;
}

body{

  font-family:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;

  background:
    radial-gradient(
      circle at top left,
      rgba(37,99,235,0.10),
      transparent 25%
    ),

    radial-gradient(
      circle at top right,
      rgba(124,58,237,0.10),
      transparent 25%
    ),

    linear-gradient(
      to bottom,
      #f8fafc,
      #f5f7fb
    );

  color:var(--text);

  min-height:100vh;

  line-height:1.5;

  text-rendering:optimizeLegibility;

  -webkit-font-smoothing:antialiased;
}

/* =========================================================
   LINKS
========================================================= */

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

/* =========================================================
   BUTTON RESET
========================================================= */

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

/* =========================================================
   NAVBAR
========================================================= */

.navbar{

  position:sticky;
  top:0;
  z-index:1000;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:14px 28px;

  background:
    rgba(255,255,255,0.72);

  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);

  border-bottom:
    1px solid rgba(255,255,255,0.6);

  box-shadow:
    0 10px 30px rgba(15,23,42,0.05);

  transition:var(--transition);
}

/* subtle glass line */

.navbar::after{

  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:1px;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(148,163,184,0.22),
      transparent
    );
}

/* =========================================================
   NAV SECTIONS
========================================================= */

.nav-left,
.nav-right{

  display:flex;
  align-items:center;
}

.nav-left{
  gap:14px;
}

.nav-right{
  gap:12px;
}

/* =========================================================
   LOGO
========================================================= */

.nav-left .logo{

  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;

  padding:8px 10px;

  border-radius:14px;

  transition:var(--transition);
}

.nav-left .logo:hover{

  background:
    rgba(37,99,235,0.08);

  transform:
    translateY(-1px);
}

/* LOGO IMAGE */

.logo-img{

  height:40px;

  width:auto;

  display:block;

  object-fit:contain;
}

/* =========================================================
   PRIMARY BUTTON
========================================================= */

.nav-btn{

  height:42px;

  padding:0 18px;

  border:none;

  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--accent)
    );

  color:white;

  font-size:14px;
  font-weight:700;

  cursor:pointer;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  box-shadow:
    0 12px 28px rgba(37,99,235,0.24);

  transition:var(--transition);
}

.nav-btn:hover{

  transform:
    translateY(-2px)
    scale(1.01);

  box-shadow:
    0 18px 40px rgba(37,99,235,0.32);
}

/* =========================================================
   SECONDARY BUTTONS
========================================================= */

.nav-right button{

  height:42px;

  padding:0 14px;

  border-radius:14px;

  border:
    1px solid rgba(226,232,240,0.9);

  background:
    rgba(255,255,255,0.75);

  backdrop-filter:blur(12px);

  color:var(--text);

  font-size:14px;
  font-weight:600;

  cursor:pointer;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  transition:var(--transition);

  box-shadow:
    0 4px 14px rgba(15,23,42,0.04);
}

.nav-right button:hover{

  transform:
    translateY(-1px);

  background:white;

  border-color:
    rgba(37,99,235,0.20);

  box-shadow:
    0 10px 24px rgba(15,23,42,0.08);
}

/* =========================================================
   USERNAME CHIP
========================================================= */

/* =========================================================
   USERNAME CHIP
========================================================= */

.username {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 40px;
  height: 42px;

  padding: 0 14px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);

  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);

  font-size: 13px;
  font-weight: 700;
  color: #334155;
  letter-spacing: 0.2px;

  white-space: nowrap;     /* never wrap the name text */
  overflow: hidden;
  text-overflow: ellipsis; /* "👤 Longu..." if too tight */
  max-width: 140px;        /* cap width so it can't push other buttons off */
}

/* =========================================================
   GLASS CARD UTILITY
========================================================= */

.glass{

  background:
    rgba(255,255,255,0.72);

  backdrop-filter:blur(20px);

  border:
    1px solid rgba(255,255,255,0.8);

  box-shadow:
    var(--shadow-md);
}

/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-track{
  background:transparent;
}

::-webkit-scrollbar-thumb{

  background:
    rgba(148,163,184,0.45);

  border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{

  background:
    rgba(100,116,139,0.7);
}

/* =========================================================
   SELECTION
========================================================= */

::selection{
  background:
    rgba(37,99,235,0.18);
}

/* =========================================================
   FOCUS STATES
========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{

  outline:none;

  box-shadow:
    0 0 0 4px rgba(37,99,235,0.14);
}

/* =========================================================
   MOBILE NAVBAR
========================================================= */

@media(max-width:768px){

  .navbar{

    padding:10px 14px;

    gap:10px;

    flex-wrap:wrap;
  }

  .nav-left,
  .nav-right{

    display:flex;
    align-items:center;

    flex-wrap:wrap;

    gap:8px;
  }

  .nav-left{
    flex:1;
    min-width:0;
  }

  .nav-right{
    justify-content:flex-end;
  }

  /* LOGO */

  .logo{

    display:flex;
    align-items:center;

    flex-shrink:0;

    padding:6px 8px;

    border-radius:12px;

    transition:var(--transition);
  }

  .logo:hover{

    background:
      rgba(37,99,235,0.08);
  }

  .logo-img{

    height:34px;

    width:auto;

    display:block;

    object-fit:contain;
  }

  /* BUTTONS */

  .nav-btn,
  .nav-right button{

    height:38px;

    padding:0 12px;

    font-size:13px;

    border-radius:12px;

    white-space:nowrap;

    flex-shrink:0;
  }

  /* USERNAME */

  .username {

    max-width:100px;

    font-size:12px;

    padding:0 10px;

    height:38px;
  }

}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:480px){

  .navbar{

    padding:10px;

    gap:8px;
  }

  .logo-img{

    height:30px;
  }

  .nav-btn,
  .nav-right button{

    height:36px;

    padding:0 10px;

    font-size:12px;
  }

  .username {

    max-width:80px;

    font-size:11px;

    padding:0 8px;

    height:36px;
  }

}