/* ============ THEME VARIABLES ============ */
:root{
  /* DARK (default) */
  --bg:#0b0d10;
  --card:#12161b;
  --text:#f2f5f8;
  --muted:#9aa5b1;
  --brand:#6ea8fe;
  --border:#26303a;
  --control-bg:#0e1217;
  --nav-bg:rgba(11,13,16,.7);
  --nav-h:56px;
}

/* LIGHT overrides */
:root[data-theme="light"]{
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#0b0d10;
  --muted:#566173;
  --brand:#2563eb;
  --border:#e6ebf2;
  --control-bg:#f1f5f9;
  --nav-bg:rgba(255,255,255,.7);
}

/* Respect system if no explicit choice */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#f5f7fb;
    --card:#ffffff;
    --text:#0b0d10;
    --muted:#566173;
    --brand:#2563eb;
    --border:#e6ebf2;
    --control-bg:#f1f5f9;
    --nav-bg:rgba(255,255,255,.7);
  }
}

/* ============ BASE ============ */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font: clamp(15px,1.6vw,16px)/1.5 system-ui,Segoe UI,Roboto,Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

/* Container (feed/pages). Landing overrides it via .x-landing-scope .container */
.container{
  width:min(680px, 100% - 24px);
  margin:calc(var(--nav-h) + 16px) auto 80px;
}
@media(min-width:768px){
  .container{ width:min(840px,100% - 40px); margin:calc(var(--nav-h) + 24px) auto 96px; }
}

/* ============ TOP NAV ============ */
.nav{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; background:var(--nav-bg); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border); z-index:1000;
}
.brand{font-weight:700;color:var(--brand);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.nav a{color:var(--text)}

/* Theme + Menu buttons */
.nav .menu-toggle,
.nav .theme-toggle{
  appearance:none; -webkit-appearance:none;
  border:1px solid var(--border);
  background:var(--control-bg);
  color:var(--text);
  width:40px;height:40px;border-radius:10px;
  line-height:1; font-size:18px; cursor:pointer;
}
.nav .menu-toggle{ display:none !important; }          /* hidden on desktop */
.nav .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; }

/* Search in header */
.nav form.search{display:flex;align-items:center;gap:8px;margin:0 8px}
.nav form.search .input{height:36px;padding:6px 12px;width:240px}

/* Right links */
.nav nav{display:flex;align-items:center;gap:10px}
.nav nav a{
  padding:8px 10px;border-radius:10px;border:1px solid transparent;
}
.nav nav a:focus-visible,
.nav nav a:hover{border-color:var(--border);background:var(--control-bg)}

/* ============ COMMON UI ============ */
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:16px; margin:12px 0;
}
h1,h2,h3{margin:0 0 10px}
p{margin:8px 0}

.input, textarea, select{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--border); background:var(--control-bg); color:var(--text);
}
.input::placeholder, textarea::placeholder{color:var(--muted)}
textarea{resize:vertical; min-height:90px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 14px; min-height:44px;
  border-radius:12px; border:1px solid var(--border);
  background:var(--control-bg); color:var(--text); cursor:pointer;
}
.btn.primary{background:var(--brand); color:#0b0d10; border-color:#5d8de0}
.btn[disabled]{opacity:.6; cursor:not-allowed}

.row{display:flex;gap:12px;align-items:center}
.meta{color:var(--muted);font-size:0.88rem}
hr{border:none;border-top:1px solid var(--border);margin:10px 0}
img.post{max-width:100%;border-radius:12px;border:1px solid var(--border)}

/* Tables (admin) */
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid var(--border)}
th{text-align:left;color:var(--muted);font-weight:600}

/* Utilities */
.hidden{display:none!important}
.center{display:flex;align-items:center;justify-content:center}
.right{margin-left:auto}
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,1,1); border:0 }

/* Focus ring */
:where(a,button,.btn,.input,textarea,select):focus-visible{
  outline:2px solid rgba(110,168,254,.55); outline-offset:2px;
}

/* Toast container can be created by JS; we only make toasts pointer-safe */
#toastbox{pointer-events:none}

/* ============ VERIFIED BADGE (tighter) ============ */
.verified{
  display:inline-flex; vertical-align:text-bottom; margin-left:2px;
  width:16px; height:16px; color:var(--brand);
}
.verified.sm{ width:14px; height:14px }
.verified.md{ width:16px; height:16px }
.verified.lg{ width:18px; height:18px }
.tweet-head .name{ gap:2px; }  /* tighter name–tick spacing */

/* ============ NOTIFICATION BADGE ============ */
.badge{
  display:inline-flex; min-width:18px; height:18px; padding:0 6px;
  border-radius:999px; background:var(--brand); color:#0b0d10;
  font-size:12px; line-height:1; align-items:center; justify-content:center;
  margin-left:6px; transform:scale(0); transition:transform .2s ease;
}
.badge.show{ transform:scale(1); }

/* ============ TWITTER-STYLE FEED ============ */
.tweet{ display:grid; grid-template-columns:48px 1fr; gap:12px; padding:14px }
.tweet .avatar{ text-decoration:none }
.tweet .avatar .bubble{
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),#7cc9ff);
  display:flex;align-items:center;justify-content:center;
  color:#0b0d10;font-weight:700;border:1px solid var(--border);
}
:root[data-theme="light"] .tweet .avatar .bubble{ color:#001221 }
.tweet .avatar .ch{ font-size:18px; line-height:1 }

.tweet .content{ min-width:0 } /* prevent overflow */
.tweet-head{ display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.tweet-head .name{ color:var(--text); text-decoration:none; display:inline-flex; align-items:center }
.tweet-head .handle{ }
.tweet-head .time{ text-decoration:none }
.tweet-head .dot{ color:var(--muted); margin:0 2px }

.tweet-text{ margin:8px 0 10px; white-space:pre-wrap; word-wrap:break-word; line-height:1.45 }
.tweet-media{ margin:8px 0 }
.tweet-media img.post{
  width:100%; height:auto; border-radius:12px; border:1px solid var(--border);
  max-height:70vh; object-fit:contain;
}

.tweet-actions{ margin-top:4px }
.tweet-actions .btn.icon{
  min-height:auto; padding:6px 10px; border-radius:999px; border-color:transparent;
  background:transparent;
}
.tweet-actions .btn.icon:hover{ background:var(--control-bg); border-color:var(--border) }
.tweet-actions .btn.icon.active{ background:rgba(110,168,254,.15); border-color:#5d8de0 }
.tweet-actions .count{ margin-left:6px; font-size:.9rem; color:var(--muted) }

.reply-box{ margin-top:8px; display:block }
.reply-box .input{ background:transparent }
.reply-box .btn{ padding:8px 12px }

/* Composer tweaks */
.composer textarea.input{ min-height:84px }
.composer .btn[for]{ cursor:pointer }

/* ============ MOBILE ============ */
@media (max-width: 640px){
  .container{ width:min(100%, 100% - 12px); margin:calc(var(--nav-h) + 12px) auto 72px }

  /* show hamburger on small screens; collapse links */
  .nav .menu-toggle{ display:inline-flex !important; align-items:center; justify-content:center; }
  .nav form.search .input{ width: min(60vw, 260px) }

  .nav nav{
    display:none; position:fixed; top:var(--nav-h); left:0; right:0;
    background:var(--card); border-bottom:1px solid var(--border);
    padding:10px 12px; gap:8px; flex-wrap:wrap;
  }
  body.menu-open .nav nav{ display:flex }

  @media (max-width:380px){
    .nav form.search{display:none}
  }

  .card{ padding:14px; border-radius:14px }
  .btn{ min-height:44px; padding:10px 14px }

  .tweet{ grid-template-columns:40px 1fr; gap:10px }
  .tweet .avatar .bubble{ width:40px;height:40px }
}


/* ============ MODERN LANDING (X-style) ============ */
/* widen the standard page container only inside the landing scope */
.x-landing-scope .container{
  width: min(1200px, 100% - 48px);
  margin: calc(var(--nav-h) + 24px) auto 96px;
}
@media (max-width: 980px){
  .x-landing-scope .container{
    width:min(1000px, 100% - 24px);
    margin: calc(var(--nav-h) + 16px) auto 72px;
  }
}

/* X-style two-column hero */
.x-landing{
  min-height: calc(100vh - var(--nav-h) - 120px);
  display:grid; grid-template-columns: 1fr 520px;
  align-items:center; gap: clamp(16px, 4vw, 40px);
}
.xl-left{ position:relative; display:flex; align-items:center; justify-content:center }
.xl-right{ width:520px; margin-inline:auto }

.xl-logo{
  font-weight:900; letter-spacing:-0.04em; line-height:.85;
  font-size: clamp(96px, 26vw, 520px);
  background: linear-gradient(180deg, var(--text) 0%, rgba(255,255,255,.88) 60%, rgba(255,255,255,.65) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  /* soft fade to bottom */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 68%, rgba(0,0,0,.6) 84%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 68%, rgba(0,0,0,.6) 84%, rgba(0,0,0,0) 100%);
  filter: drop-shadow(0 28px 80px rgba(0,0,0,.32)) drop-shadow(0 14px 30px rgba(0,0,0,.18));
  user-select:none;
}

/* tasteful background bloom behind the logo */
.xl-left::after{
  content:""; position:absolute; inset:auto 0 14%; height:28%;
  background: radial-gradient(60% 70% at 50% 30%, rgba(110,168,254,.18), rgba(110,168,254,0) 70%);
  pointer-events:none; filter: blur(12px);
}

/* Right column text & buttons */
.xl-title{ font-size: clamp(36px, 5.6vw, 64px); font-weight:900; letter-spacing:-0.01em; margin:0 0 6px }
.xl-sub{   font-size: clamp(20px, 2.6vw, 30px); font-weight:800; margin:8px 0 12px }
.xl-stack{ display:flex; flex-direction:column; gap:10px }
.btn.wide{ width:100%; border-radius:999px; font-weight:700; min-height:52px }
.xl-legal{ margin:10px 0 8px }
.xl-legal a{ color:var(--brand); text-decoration:underline }
.xl-divider{ height:1px; background:var(--border); margin: clamp(10px, 2vw, 18px) 0 }

/* Light/Dark tuning */
:root[data-theme="light"] .xl-logo{
  background: linear-gradient(180deg, #111 0%, #333 55%, #666 100%);
  color:transparent;
}
:root[data-theme="light"] .xl-left::after{
  background: radial-gradient(60% 70% at 50% 30%, rgba(37,99,235,.18), rgba(37,99,235,0) 70%);
}

/* Responsive for landing */
@media (max-width: 980px){
  .x-landing{ grid-template-columns: 1fr; }
  .xl-right{ width:min(460px, 100%); }
  .xl-left{ order:2; opacity:.25; }
}
@media (max-width: 520px){
  .xl-logo{ font-size: 44vw; }
}