/* xtweep pro — Phase 1 (from zero)
   Constraints:
   - no linear-gradient backgrounds
   - no borders on buttons/cards
*/

:root{
  --xtp-radius: 26px;
  --xtp-radius-sm: 18px;
  --xtp-pad: clamp(14px, 2.4vw, 26px);
  --xtp-gap: 14px;
  --xtp-shadow: 0 16px 46px rgba(0,0,0,.10);
  --xtp-shadow-soft: 0 10px 30px rgba(0,0,0,.08);

  /* Light mode default */
  --xtp-bg: #f5f7fb;
  --xtp-surface: #ffffff;
  --xtp-surface2: #eef2f8;
  --xtp-field: #eef2f8;
  --xtp-text: #0b1220;
  --xtp-muted: #5b6677;
  --xtp-accent: #ff5a3d;
  --xtp-ok: #1fa971;
  --xtp-info: #2563eb;
  --xtp-danger: #ef4444;
  --xtp-ring: rgba(37, 99, 235, .22);
  --xtp-topbar-bg: rgba(245, 247, 251, .86);

  --xtp-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Dark mode (plugin sets body.sv-dark in many builds) */
body.sv-dark,
html[data-theme="dark"] body,
body.xtp-dark{
  --xtp-bg: #07080a;
  --xtp-surface: #0f1216;
  --xtp-surface2: #151a21;
  --xtp-field: #151a21;
  --xtp-text: #f3f6fb;
  --xtp-muted: #a2adbe;
  --xtp-accent: #ff6a3d;
  --xtp-ring: rgba(255, 106, 61, .22);
  --xtp-topbar-bg: rgba(7, 8, 10, .72);
}

/* Auto mode if plugin hasn’t applied its own theme class */
@media (prefers-color-scheme: dark){
  body.xtp-color-auto{
    --xtp-bg: #07080a;
    --xtp-surface: #0f1216;
    --xtp-surface2: #151a21;
    --xtp-field: #151a21;
    --xtp-text: #f3f6fb;
    --xtp-muted: #a2adbe;
    --xtp-accent: #ff6a3d;
    --xtp-ring: rgba(255, 106, 61, .22);
    --xtp-topbar-bg: rgba(7, 8, 10, .72);
  }
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--xtp-font);
  background: var(--xtp-bg);
  color: var(--xtp-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ max-width:100%; height:auto; }
a{ color: inherit; }

.xtp-skip{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.xtp-skip:focus{
  left: 12px;
  top: 12px;
  width:auto;
  height:auto;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--xtp-surface);
  box-shadow: var(--xtp-shadow-soft);
  z-index: 9999;
}

.xtp-ico{ width:22px; height:22px; display:block; }
.xtp-ico--sm{ width:18px; height:18px; }

.xtp-page{ min-height: 100vh; }
.xtp-container{ max-width: 1040px; margin: 0 auto; padding: var(--xtp-pad); }

.xtp-card{
  background: var(--xtp-surface);
  border: none;
  border-radius: var(--xtp-radius);
  box-shadow: var(--xtp-shadow-soft);
  padding: var(--xtp-pad);
}

.xtp-h1{ margin:0; font-size: 22px; line-height: 1.2; letter-spacing:-.01em; }
@media (min-width: 900px){ .xtp-h1{ font-size: 26px; } }

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

/* Buttons */
.xtp-btn{
  appearance:none;
  border:none;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 14px 18px;
  font-weight: 850;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  transition: transform .06s ease, opacity .2s ease;
}
.xtp-btn:active{ transform: scale(.99); }
.xtp-btn:disabled{ opacity:.55; cursor:not-allowed; }

.xtp-btnPrimary{
  background: var(--xtp-accent);
  color: #fff;
  box-shadow: var(--xtp-shadow);
}
.xtp-btnGhost{
  background: var(--xtp-surface2);
  color: var(--xtp-text);
  box-shadow: none;
}

/* Inputs */
.xtp-field{ display:block; margin-top: 12px; }
.xtp-fieldLbl{ display:block; font-size: 12px; font-weight: 800; margin: 0 0 8px 6px; color: var(--xtp-muted); }

.xtp-input{
  width:100%;
  border:none;
  background: var(--xtp-field);
  color: var(--xtp-text);
  border-radius: 999px;
  padding: 14px 16px;
  font-size: 16px;
  outline: none;
}
.xtp-input::placeholder{ color: color-mix(in srgb, var(--xtp-muted) 80%, transparent); }
.xtp-input:focus{ box-shadow: 0 0 0 3px var(--xtp-ring); }

.xtp-inputRow{ display:flex; gap:10px; align-items:center; }
.xtp-inputRow .xtp-input{ flex:1 1 auto; }

.xtp-iconBtn{
  border:none;
  background: var(--xtp-surface2);
  color: var(--xtp-text);
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.xtp-link{ color: var(--xtp-text); font-weight: 850; text-decoration:none; }
.xtp-link:hover{ opacity:.9; }

/* Alerts */
.xtp-alert{
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--xtp-surface2);
  color: var(--xtp-text);
}
.xtp-alert--ok{ background: color-mix(in srgb, var(--xtp-ok) 16%, var(--xtp-surface2)); }
.xtp-alert--info{ background: color-mix(in srgb, var(--xtp-info) 12%, var(--xtp-surface2)); }

/* Auth pages */
.xtp-auth{
  min-height: 100vh;
  padding: var(--xtp-pad);
}
.xtp-authWrap{ max-width: 1080px; margin: 0 auto; }

.xtp-authTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.xtp-authTopBtn{
  width: 46px;
  height: 46px;
  border-radius: 18px;
  background: var(--xtp-surface);
  box-shadow: var(--xtp-shadow-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.xtp-authTopLink{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 999px;
  background: var(--xtp-surface);
  box-shadow: var(--xtp-shadow-soft);
  text-decoration:none;
  font-weight: 900;
}

.xtp-authShell{
  display:grid;
  gap: 18px;
  align-items: stretch;
}

@media (min-width: 900px){
  .xtp-authShell{ grid-template-columns: .95fr 1.05fr; }
}

.xtp-authBrand{
  background: var(--xtp-surface);
  border:none;
  border-radius: var(--xtp-radius);
  box-shadow: var(--xtp-shadow-soft);
  padding: clamp(18px, 3.2vw, 34px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 12px;
}

@media (max-width: 899px){
  .xtp-authBrand{ display:none; }
}

.xtp-brandMark{
  width: 64px;
  height: 64px;
  border-radius: 22px;
  background: var(--xtp-surface2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  font-size: 28px;
}

.xtp-brandName{ font-size: 24px; font-weight: 950; letter-spacing: -.02em; }
.xtp-brandSub{ color: var(--xtp-muted); line-height: 1.5; }

.xtp-authCard{
  background: var(--xtp-surface);
  border:none;
  border-radius: var(--xtp-radius);
  box-shadow: var(--xtp-shadow);
  padding: clamp(18px, 3.2vw, 34px);
}

.xtp-authTitle{ font-size: 30px; font-weight: 950; letter-spacing: -.03em; }
.xtp-authSubtitle{ margin-top: 8px; color: var(--xtp-muted); }

.xtp-form{ margin-top: 10px; }
.xtp-formRow{ display:flex; justify-content:flex-end; margin-top: 10px; }

.xtp-divider{
  display:flex;
  align-items:center;
  gap: 12px;
  margin: 16px 0;
  color: var(--xtp-muted);
  font-size: 13px;
}
.xtp-divider::before,
.xtp-divider::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background: color-mix(in srgb, var(--xtp-muted) 24%, transparent);
}

.xtp-gMark{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--xtp-surface);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
}

.xtp-foot{ margin-top: 16px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; color: var(--xtp-muted); }

.xtp-legal{
  margin-top: 18px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px 14px;
  justify-content:center;
  font-size: 12px;
}
.xtp-legal a{ color: var(--xtp-muted); text-decoration:none; }
.xtp-legal a:hover{ opacity:.9; }

/* App header */
.xtp-topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px max(12px, env(safe-area-inset-right, 0px)) 12px max(12px, env(safe-area-inset-left, 0px));
  margin: 0 0 14px;
  background: var(--xtp-topbar-bg);
  backdrop-filter: blur(14px) saturate(1.05);
  border:none;
}

.xtp-topbarLeft,
.xtp-topbarRight{ display:flex; align-items:center; gap:10px; min-width:0; }

.xtp-topbarBtn{
  width: 44px;
  height: 44px;
  border-radius: 18px;
  border:none;
  background: var(--xtp-surface);
  box-shadow: var(--xtp-shadow-soft);
  color: var(--xtp-text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  text-decoration:none;
}

.xtp-brand{
  font-weight: 950;
  text-decoration:none;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 50vw;
}

.xtp-topbarTitle{
  font-size: 12px;
  font-weight: 800;
  color: var(--xtp-muted);
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--xtp-surface2);
}

/* Onboarding */
.xtp-onb{ padding: clamp(16px, 2.6vw, 28px); }
.xtp-onbHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
}

.xtp-count{ min-width: 110px; background: var(--xtp-surface2); border-radius: 18px; padding: 10px 12px; text-align:center; }
.xtp-countLbl{ font-size: 12px; color: var(--xtp-muted); font-weight: 800; }
.xtp-countNum{ font-size: 22px; font-weight: 950; }

.xtp-toolbar{ display:flex; gap: 12px; align-items:center; flex-wrap:wrap; margin-top: 14px; }
.xtp-min{ font-size: 13px; font-weight: 850; color: var(--xtp-muted); }
.xtp-input--search{ border-radius: 18px; padding: 12px 14px; }

.xtp-chips{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 14px; }

.xtp-chip{
  border:none;
  background: var(--xtp-surface2);
  color: var(--xtp-text);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 900;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}

.xtp-chip.is-selected{
  background: var(--xtp-accent);
  color: #fff;
}

.xtp-onbFoot{ margin-top: 16px; display:flex; gap: 12px; align-items:center; flex-wrap:wrap; }

.xtp-suggestGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}

.xtp-userCard{
  border:none;
  background: var(--xtp-surface2);
  border-radius: 22px;
  padding: 14px;
  display:grid;
  gap: 10px;
}

.xtp-userTop{ display:flex; gap: 12px; align-items:center; min-width:0; }
.xtp-ava{ width: 46px; height: 46px; border-radius: 999px; background: var(--xtp-surface); object-fit:cover; flex:0 0 auto; }
.xtp-userName{ font-weight: 950; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xtp-userHandle{ font-size: 12px; color: var(--xtp-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.xtp-followBtn{
  width: 100%;
  border:none;
  border-radius: 16px;
  padding: 12px 14px;
  font-weight: 950;
  cursor:pointer;
  background: var(--xtp-text);
  color: var(--xtp-bg);
}

.xtp-followBtn.is-on{
  background: var(--xtp-surface);
  color: var(--xtp-text);
  box-shadow: var(--xtp-shadow-soft);
}

.xtp-progress{ margin-top: 10px; color: var(--xtp-muted); font-weight: 850; }

@media (max-width: 520px){
  .xtp-auth{ padding: 14px; }
  .xtp-container{ padding: 14px; }
  .xtp-authTitle{ font-size: 28px; }
}