/* =========================================================
   GrandPaaChat Global UI Standard
   Same compact size, spacing and visual language
   ========================================================= */

:root{
  --gp-topbar:52px;
  --gp-sidebar:190px;
  --gp-rightbar:190px;
  --gp-gap:10px;
  --gp-bg:#f0f2f5;
  --gp-card:#ffffff;
  --gp-blue:#1877f2;
  --gp-text:#1c1e21;
  --gp-muted:#65676b;
  --gp-border:#dddfe2;
  --gp-radius:9px;
  --gp-card-padding:10px;
  --gp-font:Arial,Helvetica,sans-serif;
}

*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
  width:100%;
  min-height:100%;
  font-family:var(--gp-font);
  background:var(--gp-bg);
  color:var(--gp-text);
  font-size:13px;
}

body{
  overflow-x:hidden;
}

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

button{
  cursor:pointer;
}

a{
  color:var(--gp-blue);
}

/* ===== Global Topbar ===== */

.gp-topbar,
.topbar,
header.gp-topbar{
  min-height:var(--gp-topbar);
  height:var(--gp-topbar);
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border-bottom:1px solid var(--gp-border);
  position:sticky;
  top:0;
  z-index:1000;
}

/* ===== Main Page Width ===== */

.gp-page,
.gp-layout,
.page-layout,
.main-layout{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:10px;
}

/* ===== Common 3 Column Layout ===== */

.gp-3col{
  display:grid;
  grid-template-columns:
    minmax(170px,var(--gp-sidebar))
    minmax(0,1fr)
    minmax(170px,var(--gp-rightbar));
  gap:var(--gp-gap);
  align-items:start;
}

/* ===== Sidebars ===== */

.gp-sidebar,
.gp-left,
.gp-right,
.gp-rightbar,
.left-sidebar,
.right-sidebar{
  min-width:0;
}

.gp-sidebar-card,
.gp-menu,
.gp-widget,
.sidebar-card{
  background:var(--gp-card);
  border:1px solid var(--gp-border);
  border-radius:var(--gp-radius);
  padding:8px;
  margin-bottom:10px;
}

/* ===== Menu Items ===== */

.gp-menu-item,
.sidebar-item{
  width:100%;
  min-height:34px;
  padding:6px 8px;
  border:0;
  border-radius:7px;
  background:transparent;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--gp-text);
  text-align:left;
}

.gp-menu-item:hover,
.sidebar-item:hover{
  background:#f0f2f5;
}

.gp-menu-item.active,
.sidebar-item.active{
  background:#e7f3ff;
  color:var(--gp-blue);
  font-weight:600;
}

.gp-menu-icon{
  width:20px;
  min-width:20px;
  text-align:center;
  font-size:15px;
}

/* ===== Cards ===== */

.card,
.gp-card,
.panel,
.widget,
.create-box,
.form-card,
.content-card{
  background:var(--gp-card);
  border:1px solid var(--gp-border);
  border-radius:var(--gp-radius);
  padding:var(--gp-card-padding);
  margin-bottom:var(--gp-gap);
}

/* ===== Headings ===== */

h1{
  font-size:19px;
  line-height:1.2;
  margin:0 0 8px;
}

h2{
  font-size:17px;
  line-height:1.2;
  margin:0 0 8px;
}

h3{
  font-size:15px;
  line-height:1.2;
  margin:0 0 6px;
}

h4{
  font-size:13px;
  margin:0 0 5px;
}

/* ===== Text ===== */

p{
  margin:4px 0;
  line-height:1.4;
}

.muted,
.text-muted{
  color:var(--gp-muted);
  font-size:11px;
}

/* ===== Inputs ===== */

input,
textarea,
select{
  width:100%;
  min-height:34px;
  padding:7px 9px;
  border:1px solid var(--gp-border);
  border-radius:7px;
  background:#fff;
  font-size:12px;
  outline:none;
}

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

input:focus,
textarea:focus,
select:focus{
  border-color:var(--gp-blue);
}

/* ===== Buttons ===== */

button,
.btn,
.button{
  min-height:32px;
  padding:6px 10px;
  border-radius:7px;
  border:1px solid var(--gp-border);
  background:#fff;
  font-size:12px;
}

button:hover,
.btn:hover,
.button:hover{
  filter:brightness(.97);
}

.btn-primary,
.primary,
button.primary{
  background:var(--gp-blue);
  color:#fff;
  border-color:var(--gp-blue);
}

/* ===== Compact Grids ===== */

.grid,
.card-grid,
.products-grid,
.channel-grid,
.community-grid,
.group-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.grid > *,
.card-grid > *,
.products-grid > *,
.channel-grid > *,
.community-grid > *,
.group-grid > *{
  min-width:0;
}

/* ===== Images ===== */

img{
  max-width:100%;
}

.avatar,
.profile-avatar{
  object-fit:cover;
}

/* ===== Lists ===== */

ul,
ol{
  margin:5px 0;
  padding-left:20px;
}

/* ===== Tables ===== */

table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}

th,
td{
  padding:7px;
  border-bottom:1px solid var(--gp-border);
  text-align:left;
}

/* ===== Modal ===== */

.modal,
.dialog{
  max-width:500px;
  border-radius:10px;
}

/* ===== Responsive ===== */

@media(max-width:1100px){
  .gp-3col{
    grid-template-columns:180px minmax(0,1fr);
  }

  .gp-right,
  .gp-rightbar,
  .right-sidebar{
    display:none;
  }

  .grid,
  .card-grid,
  .products-grid,
  .channel-grid,
  .community-grid,
  .group-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:800px){
  .gp-3col{
    grid-template-columns:1fr;
  }

  .gp-sidebar,
  .gp-left,
  .left-sidebar{
    display:none;
  }

  .gp-page,
  .gp-layout,
  .page-layout,
  .main-layout{
    padding:8px;
  }

  .grid,
  .card-grid,
  .products-grid,
  .channel-grid,
  .community-grid,
  .group-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:600px){
  .gp-topbar,
  .topbar,
  header.gp-topbar{
    height:48px;
    min-height:48px;
    padding:0 8px;
  }

  body{
    font-size:12px;
  }

  h1{font-size:17px}
  h2{font-size:15px}
  h3{font-size:14px}

  .card,
  .gp-card,
  .panel,
  .widget,
  .create-box,
  .form-card,
  .content-card{
    padding:8px;
  }
}

/* ===== GRANDPAACHAT UNIFIED LEGACY PAGE DESIGN ===== */
.gp-legacy-page,
body:has(> .nav) {
  background:#f0f2f5;
  color:#1c1e21;
  font-family:Arial,Helvetica,sans-serif;
}

body:has(> .nav) > .nav {
  height:52px;
  min-height:52px;
  padding:0 16px;
  background:#ffffff;
  border-bottom:1px solid #dddfe2;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  gap:6px;
  position:sticky;
  top:0;
  z-index:100;
}

body:has(> .nav) > .nav button {
  border:0;
  background:transparent;
  border-radius:7px;
  padding:8px 10px;
  cursor:pointer;
  font-size:13px;
  color:#444;
}

body:has(> .nav) > .nav button:hover,
body:has(> .nav) > .nav button.active {
  background:#e7f3ff;
  color:#1877f2;
}

body:has(> .nav) > header {
  max-width:1100px;
  margin:16px auto 0;
  background:#fff;
  border:1px solid #dddfe2;
  border-radius:10px 10px 0 0;
  padding:14px 18px;
  font-size:20px;
  font-weight:700;
}

body:has(> .nav) > main,
body:has(> .nav) > .container {
  max-width:1100px;
  margin:0 auto 18px;
  padding:16px;
  background:#fff;
  border:1px solid #dddfe2;
  border-top:0;
  border-radius:0 0 10px 10px;
}

body:has(> .nav) .card {
  border:1px solid #e4e6eb;
  border-radius:9px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}

body:has(> .nav) .back {
  color:#1877f2;
  text-decoration:none;
  font-size:13px;
}

body:has(> .nav) input,
body:has(> .nav) textarea,
body:has(> .nav) select {
  border:1px solid #ccd0d5;
  border-radius:7px;
  padding:9px 10px;
  font-size:14px;
  background:#fff;
}

body:has(> .nav) button {
  border-radius:7px;
}

@media(max-width:700px){
  body:has(> .nav) > .nav {
    overflow-x:auto;
    padding:0 8px;
  }

  body:has(> .nav) > header,
  body:has(> .nav) > main,
  body:has(> .nav) > .container {
    margin-left:8px;
    margin-right:8px;
  }
}


/* GrandPaaChat — Premium Modern Design Foundation */
:root {
  --gp-bg: #f5f7fc;
  --gp-surface: #fff;
  --gp-text: #18233b;
  --gp-muted: #68758d;
  --gp-primary: #6254e8;
  --gp-primary-dark: #4939ca;
  --gp-border: #e6eaf2;
  --gp-radius: 18px;
  --gp-shadow: 0 8px 28px rgba(31, 42, 86, .07);
}
html { scroll-behavior: smooth; }
body {
  color: var(--gp-text);
  background: radial-gradient(ellipse at top left, #eeedff 0, transparent 38%), var(--gp-bg);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, .btn, .main-btn { border-radius: 12px; }
input, select, textarea, .form-control, .form-select {
  border-radius: 12px;
  border-color: var(--gp-border);
}
input:focus, select:focus, textarea:focus, .form-control:focus, .form-select:focus {
  border-color: var(--gp-primary);
  box-shadow: 0 0 0 3px rgba(98, 84, 232, .12);
  outline: none;
}
.card, .form-container, .post, .modal-content, .panel, .content-card {
  border-color: var(--gp-border);
  border-radius: var(--gp-radius);
}
.card, .post, .panel, .content-card { box-shadow: var(--gp-shadow); }
a { text-underline-offset: 3px; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid rgba(98, 84, 232, .45); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}


/* GrandPaaChat — Premium UI polish */
:root {
  --gp-gradient: linear-gradient(135deg, #6254e8 0%, #8b5cf6 100%);
}

button, .btn, .main-btn, [type="submit"] {
  font-weight: 600;
  letter-spacing: .01em;
}

.main-btn, .btn-primary {
  background: var(--gp-gradient);
  border: 0;
  color: #fff;
  box-shadow: 0 5px 14px rgba(98, 84, 232, .18);
}

.main-btn:hover, .btn-primary:hover {
  box-shadow: 0 8px 20px rgba(98, 84, 232, .25);
  transform: translateY(-1px);
}

input, select, textarea, .form-control, .form-select {
  background-color: #fff;
  min-height: 42px;
}

.card, .post, .panel, .content-card, .form-container {
  background-color: var(--gp-surface);
}

nav a, .nav-link {
  text-decoration: none;
}

img, video {
  border-radius: 12px;
}

::selection {
  color: #fff;
  background: #6254e8;
}

@media (max-width: 768px) {
  body {
    overflow-wrap: anywhere;
  }

  .card, .post, .panel, .content-card {
    border-radius: 14px;
  }

  button, .btn, .main-btn {
    min-height: 42px;
  }
}

/* GrandPaaChat — Compact single-screen welcome page */
body:has(#register) {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

body:has(#register) .form-container {
  width: min(92%, 420px);
  box-sizing: border-box;
  margin: auto;
  padding: 28px;
}

body:has(#register) h1,
body:has(#register) h2 {
  text-align: center;
  letter-spacing: -.035em;
}

body:has(#register) .tab {
  min-width: 0;
  flex: 1;
}

body:has(#register) #register input,
body:has(#register) #login input {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

body:has(#register) .switch {
  padding: 8px 0;
}

@media (max-height: 720px) {
  body:has(#register) .form-container {
    margin: 12px auto;
    padding: 20px;
  }
}

/* Compact login and registration panel */
body:has(#register) .form-container {
  width: min(360px, calc(100% - 28px)) !important;
  max-width: 360px !important;
  padding: 18px !important;
  margin: 20px auto !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}

body:has(#register) .form-container h1,
body:has(#register) .form-container h2 {
  font-size: 21px !important;
  margin: 8px 0 12px !important;
}

body:has(#register) .form-container input,
body:has(#register) .form-container .form-control {
  padding: 9px 11px !important;
  margin-bottom: 9px !important;
  box-sizing: border-box !important;
}

body:has(#register) .form-container button {
  padding: 9px 12px !important;
}


/* Compact centered Login/Register window */
body:has(#register) .form-container {
  width: 320px !important;
  max-width: calc(100vw - 32px) !important;
  padding: 16px !important;
  margin: 16px auto !important;
  box-sizing: border-box !important;
  border-radius: 14px !important;
}

body:has(#register) .form-container h1,
body:has(#register) .form-container h2 {
  font-size: 20px !important;
  margin: 6px 0 12px !important;
}

body:has(#register) .form-container input,
body:has(#register) .form-container .form-control {
  width: 100% !important;
  padding: 8px 10px !important;
  margin-bottom: 8px !important;
  box-sizing: border-box !important;
}

body:has(#register) .form-container button {
  padding: 8px 12px !important;
  font-size: 14px !important;
}


/* GrandPaaChat: left branding, right compact login panel */
body:has(#register) {
  min-height: 100vh !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7vw !important;
  padding: 40px clamp(20px, 8vw, 120px) !important;
  box-sizing: border-box !important;
  background: #f0f2f5 !important;
}

body:has(#register) .form-container {
  grid-column: 2 !important;
  width: 100% !important;
  max-width: 400px !important;
  margin: 0 auto !important;
  padding: 22px !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.12) !important;
}

body:has(#register) .form-container input,
body:has(#register) .form-container .form-control {
  width: 100% !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}

body:has(#register) .form-container button {
  width: 100%;
  min-height: 42px;
}

body:has(#register) footer {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 980px !important;
  margin: 24px auto 0 !important;
  text-align: center !important;
}

@media (max-width: 760px) {
  body:has(#register) {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 28px 16px !important;
  }

  body:has(#register) .form-container {
    width: 100% !important;
    max-width: 400px !important;
  }
}

/* GrandPaaChat: two-box homepage */
body:has(#register) {
  min-height: 100vh !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  gap: 24px !important;
  padding: 28px clamp(16px, 5vw, 72px) !important;
  box-sizing: border-box !important;
  background: #f0f2f5 !important;
}

/* Left box: all social navigation */
body:has(#register) nav,
body:has(#register) .navbar,
body:has(#register) .top-nav,
body:has(#register) .main-nav {
  display: flex !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 420px !important;
  height: 100% !important;
  box-sizing: border-box !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 24px !important;
  background: #fff !important;
  border: 1px solid #e0e3e9 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 18px rgba(24,35,59,.08) !important;
}

/* Keep social links together inside the left box */
body:has(#register) nav a,
body:has(#register) .navbar a,
body:has(#register) .top-nav a,
body:has(#register) .main-nav a {
  display: block !important;
  padding: 10px 12px !important;
  border-radius: 9px !important;
  text-decoration: none !important;
  overflow-wrap: anywhere !important;
}

body:has(#register) nav a:hover,
body:has(#register) .navbar a:hover,
body:has(#register) .top-nav a:hover,
body:has(#register) .main-nav a:hover {
  background: #f0f2ff !important;
}

/* Right box: compact login/register */
body:has(#register) .form-container {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  width: 100% !important;
  max-width: 400px !important;
  margin: 0 auto !important;
  padding: 22px !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid #e0e3e9 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 18px rgba(24,35,59,.08) !important;
}

body:has(#register) footer {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  margin: 0 auto !important;
}

@media (max-width: 760px) {
  body:has(#register) {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    padding: 16px !important;
  }

  body:has(#register) nav,
  body:has(#register) .navbar,
  body:has(#register) .top-nav,
  body:has(#register) .main-nav {
    min-height: auto !important;
    height: auto !important;
    padding: 16px !important;
  }

  body:has(#register) .form-container {
    max-width: 400px !important;
  }
}

/* Left navigation: six compact rows */
body:has(#register) nav,
body:has(#register) .navbar,
body:has(#register) .top-nav,
body:has(#register) .main-nav {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(54px, auto) !important;
  align-content: center !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 22px !important;
  height: auto !important;
  min-height: 400px !important;
  box-sizing: border-box !important;
}

body:has(#register) nav a,
body:has(#register) .navbar a,
body:has(#register) .top-nav a,
body:has(#register) .main-nav a {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  padding: 12px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  background: #f5f7fc !important;
  color: #18233b !important;
  font-size: 14px !important;
  text-decoration: none !important;
  overflow-wrap: anywhere !important;
}

body:has(#register) nav a:hover,
body:has(#register) .navbar a:hover,
body:has(#register) .top-nav a:hover,
body:has(#register) .main-nav a:hover {
  background: #e9e8ff !important;
}

@media (max-width: 760px) {
  body:has(#register) nav,
  body:has(#register) .navbar,
  body:has(#register) .top-nav,
  body:has(#register) .main-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: auto !important;
  }
}

/* Left navigation: six compact rows */
body:has(#register) nav,
body:has(#register) .navbar,
body:has(#register) .top-nav,
body:has(#register) .main-nav {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(54px, auto) !important;
  align-content: center !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 22px !important;
  height: auto !important;
  min-height: 400px !important;
  box-sizing: border-box !important;
}

body:has(#register) nav a,
body:has(#register) .navbar a,
body:has(#register) .top-nav a,
body:has(#register) .main-nav a {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  padding: 12px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  background: #f5f7fc !important;
  color: #18233b !important;
  font-size: 14px !important;
  text-decoration: none !important;
  overflow-wrap: anywhere !important;
}

body:has(#register) nav a:hover,
body:has(#register) .navbar a:hover,
body:has(#register) .top-nav a:hover,
body:has(#register) .main-nav a:hover {
  background: #e9e8ff !important;
}

@media (max-width: 760px) {
  body:has(#register) nav,
  body:has(#register) .navbar,
  body:has(#register) .top-nav,
  body:has(#register) .main-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: auto !important;
  }
}

/* GrandPaaChat: final two-column login homepage */
@media (min-width: 761px) {
  body:has(#login):has(#register) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px) !important;
    grid-template-rows: 1fr auto !important;
    align-items: center !important;
    gap: 24px !important;
    min-height: 100vh !important;
    padding: 24px 5vw !important;
    box-sizing: border-box !important;
  }

  body:has(#login):has(#register) .form-container {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: auto !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 18px rgba(24,35,59,.10) !important;
  }

  body:has(#login):has(#register) nav,
  body:has(#login):has(#register) .navbar,
  body:has(#login):has(#register) .top-nav,
  body:has(#login):has(#register) .main-nav {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(54px, auto) !important;
    align-content: center !important;
    align-self: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 1px solid #e0e3e9 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 18px rgba(24,35,59,.10) !important;
  }

  body:has(#login):has(#register) nav a,
  body:has(#login):has(#register) .navbar a,
  body:has(#login):has(#register) .top-nav a,
  body:has(#login):has(#register) .main-nav a {
    display: flex !important;
    align-items: center !important;
    padding: 12px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    background: #f5f7fc !important;
    text-decoration: none !important;
    overflow-wrap: anywhere !important;
  }

  body:has(#login):has(#register) footer {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
}

@media (max-width: 760px) {
  body:has(#login):has(#register) {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    padding: 16px !important;
  }
}