/* ==========================================
   PART 1: PROFILE PAGE
   ========================================== */

/* PAGE */
.profile-page { 
  background:#f0f2f5;
}

/* COVER */
.profile-cover { 
  position:relative;
}

.profile-cover img { 
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
}

/* COVER BUTTON */
.cover-btn { 
  position:absolute;
  right:12px;
  bottom:12px;
  width:36px;
  height:36px;
  background:rgba(0,0,0,.6);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  z-index:5;
}

/* HEADER */
.profile-header { 
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  background:#fff;
  margin-top:-20px;
  border-radius:12px 12px 0 0;
}

/* AVATAR WRAP */
.avatar-wrap { 
  position:relative;
  width:80px;
  height:80px;
  flex:0 0 80px;
}

/* AVATAR IMAGE */
.avatar-img { 
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #fff;
  background:#fff;
  display:block;
}

/* AVATAR BUTTON */
.avatar-btn { 
  position:absolute;
  right:0;
  bottom:0;
  width:28px;
  height:28px;
  background:#1877f2;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border:2px solid #fff;
  z-index:5;
}

/* NAME */
.profile-name h2 { 
  margin:0;
  font-size:20px;
  font-weight:700;
  color:#111827;
}

.profile-name p { 
  margin:4px 0 0;
  font-size:14px;
  color:#65676b;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ACTION BUTTONS */
.profile-actions {
  display: flex;
  gap: 8px;
  padding: 10px;
  background: #fff;
  flex-wrap: wrap;
}

.profile-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 13px;
  text-decoration: none;
  font-weight: 500;
}

.profile-follow {
  background: #1877f2;
  color: #fff;
}

.profile-message {
  background: #e4e6eb;
  color: #050505;
}

.profile-edit {
  background: #f0f2f5;
  color: #050505;
}

/* TABS */
.profile-tabs {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: #fff;
  border-top: 1px solid #eee;
  overflow-x: auto;
}

.profile-tabs a {
  font-size: 13px;
  color: #65676b;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

.profile-tabs a:hover {
  background: #f0f2f5;
  color: #050505;
}

/* CONTENT AREA */
.profile-content {
  padding: 10px;
}

/* Bio Card Styles */

.bio-card {
  display:block;
  width:100%;
  background:#f8f9fb;
  color:#1c1c1c;
  box-shadow:0 2px 10px rgba(0,0,0,0.06);
  border:1px solid #e9edf2;
  padding:12px;
  font-family:Arial;
}

.bio-text {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:14px;
  line-height:1.4;
  text-align:center;
}

.bio-quote {
  font-size:16px;
  color:#888;
  line-height:1;
}

.bio-quote-left {
  margin-right:2px;
}

.bio-quote-right {
  margin-left:2px;
}

/* DARK MODE */
body.dark .profile-page {
  background:#0f1115;
}

/* COVER */
body.dark .profile-cover img {
  filter:brightness(0.75) contrast(1.05);
}

/* HEADER */
body.dark .profile-header {
  background:#1a1d24;
  border-top:1px solid #2a2f3a;
}

/* NAME */
body.dark .profile-name h2 {
  color:#e6e6e6;
}

body.dark .profile-name p {
  color:#a9b0bb;
}

/* COVER BUTTON */
body.dark .cover-btn {
  background:rgba(255,255,255,0.12);
  color:#fff;
}

body.dark .cover-btn:hover {
  background:rgba(255,255,255,0.18);
}

/* AVATAR */
body.dark .avatar-img {
  border-color:#1a1d24;
  background:#1a1d24;
}

/* AVATAR BUTTON */
body.dark .avatar-btn {
  background:#2d6cdf;
  border-color:#1a1d24;
}

body.dark .avatar-btn:hover {
  background:#1f5bd6;
}

/* PROFILE ACTION */
body.dark .profile-actions {
  background:#242526;
}

body.dark .profile-message {
  background:#3a3b3c;
  color:#e4e6eb;
}

body.dark .profile-edit {
  background:#3a3b3c;
  color:#e4e6eb;
}

/* TABS */
body.dark .profile-tabs {
  background:#242526;
  border:1px solid #303540;
}

body.dark .profile-tabs a {
  color:#b0b3b8;
}

body.dark .profile-tabs a:hover {
  background:#3a3b3c;
  color:#fff;
}

/* BIO */
body.dark .bio-card {
  background:#1f2229;
  color:#f1f1f1;
  box-shadow:0 4px 14px rgba(0,0,0,0.5);
  border:1px solid #2a2d35;
}

body.dark .bio-quote {
  color:#aaa;
}


/* ==========================================
   PART 2: EDIT PROFILE PAGE
   ========================================== */

/* EDIT PROFILE PAGE */
.ui-page {
  background: #f0f2f5;
}

/* HEADER */
.ui-header {
  background: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  margin: 8px 10px;
  border: 1px solid #e4e6eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ui-header h2 {
  font-size: 15px;
  font-weight: 600;
  color: #65676b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ui-header h2 i {
  font-size: 18px;
}

.ui-header a {
  font-size: 12px;
  color: #1877f2;
  text-decoration: none;
}

/* FORM */
.ui-form-card {
  background: #fff;
  margin: 10px;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* LABELS */
.ui-block label {
  font-size: 12px;
  color: #65676b;
  display: block;
  margin-bottom: 5px;
}

/* INPUTS */
.ui-block input, 
.ui-block textarea, 
.ui-block select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  background: #fff;
}

/* TEXTAREA */
.ui-block textarea {
  min-height: 80px;
  resize: none;
}

/* DOB */
.dob-row {
  display: flex;
  gap: 6px;
}

.dob-row select {
  flex: 1;
}

/* BUTTON */
.save-btn {
  background: #1877f2;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
}

/* DARK MODE EDIT PROFILE */
body.dark .ui-page {
  background: #18191a;
}

body.dark .ui-header {
  background: #242526;
  border-color: #3a3b3c;
}

body.dark .ui-header h2 {
  color: #e4e6eb;
}

body.dark .ui-form-card {
  background: #242526;
}

body.dark .ui-block input,
body.dark .ui-block textarea,
body.dark .ui-block select {
  background: #3a3b3c;
  border-color: #555;
  color: #e4e6eb;
}

body.dark .ui-header a {
  color: #2d88ff;
}

body.dark .save-btn{
  background:#1877f2;
  color:#fff;
}


/* ==========================================
   PART 3: COMMENT UI
   ========================================== */

/* MAIN WRAPPER */
.comment-wrap {  
  max-width: 600px;  
  margin: auto;  
  background: #fff;  
  font-family: Helvetica, Arial, sans-serif;  
  color: #1c1e21;  
  transition: 0.3s ease;
}

/* COMMENT INPUT FORM */
.comment-form {  
  padding: 10px 12px;  
  border-top: 1px solid #e4e6eb;
}

.comment-input-row {  
  display: flex;  
  gap: 8px;  
  align-items: flex-end;
}

.comment-input-row textarea {  
  flex: 1;  
  border: none;  
  background: #f0f2f5;  
  border-radius: 18px;  
  padding: 10px 12px;  
  font-size: 14px;  
  outline: none;  
  resize: none;  
  height: 40px;  
  color: #1c1e21;
}

.comment-input-row button {  
  background: #1877f2;  
  border: none;  
  color: #fff;  
  padding: 8px 14px;  
  border-radius: 18px;  
  font-size: 13px;  
  cursor: pointer;  
  height: 40px;
}

/* LIST & LAYOUT ITEMS */
.comment-list {  
  padding: 10px 12px;
}

.comment-item {  
  display: flex;  
  gap: 8px;  
  margin-bottom: 12px;
}

.comment-avatar {  
  width: 32px;  
  height: 32px;  
  border-radius: 50%;  
  object-fit: cover;
}

/* TEXT CONTENT & BUBBLES */
.comment-bubble {  
  display: inline-block;  
  background: #f0f2f5;  
  padding: 6px 10px;  
  border-radius: 16px;
}

.comment-name {  
  display: block;  
  font-size: 14px;  
  font-weight: 600;  
  color: #050505;  
  margin-bottom: 2px; 
  text-transform: capitalize;
}

.comment-name a {
  display: inline;
}

.comment-text {  
  font-size: 14px;  
  color: #1c1e21;
}

.comment-meta {  
  font-size: 12px;  
  color: #65676b;  
  margin-left: 42px;  
  margin-top: 3px;
}

.comment-meta span {  
  margin-right: 10px;  
  cursor: pointer;
}

/* NESTED REPLIES */
.reply {  
  margin-left: 40px;  
  margin-top: 10px;  
  border-left: 2px solid #e4e6eb;  
  padding-left: 8px;
}

.reply-bubble {  
  display: inline-block;  
  align-items: center;  
  background: #f0f2f5;  
  font-size: 12px;  
  padding: 6px 10px;  
  border-radius: 16px;
}

.reply-name {  
  display: inline-block;  
  font-weight: 600;  
  color: #050505;  
  margin-right: 6px;  
  text-transform: capitalize;
}

/* EMPTY STATE */
.no-comment {  
  text-align: center;  
  padding: 25px 10px;  
  color: #8a8d91;
}

.no-comment i {  
  font-size: 48px;  
  color: #bcc0c4;  
  display: block;  
  margin-bottom: 8px;  
  opacity: 0.9;
}

.no-comment h2 {
  font-size: 16px;
  font-weight: 400;
  color: #65676b;
  margin: 10px;
  text-align: center;
}

.no-comment p {  
  margin: 0;  
  font-size: 12px;  
  color: #8a8d91;
}

/* DARK MODE COMMENT */
body.dark .comment-wrap {  
  background: #18191a;  
  color: #e4e6eb;
}

body.dark .comment-form {  
  border-top: 1px solid #3a3b3c;
}

body.dark .comment-input-row textarea {  
  background: #242526;  
  color: #e4e6eb;
}

body.dark .comment-bubble {  
  background: #242526;
}

body.dark .comment-name {  
  color: #e4e6eb;
}

body.dark .comment-text {  
  color: #e4e6eb;
}

body.dark .comment-meta {  
  color: #b0b3b8;
}

body.dark .reply {  
  border-left: 2px solid #3a3b3c;
}

body.dark .reply-bubble {  
  background: #242526;
}

body.dark .reply-name {  
  color: #e4e6eb;
}

body.dark .no-comment {  
  color: #b0b3b8;
}

body.dark .no-comment i {  
  color: #6c6f73;
}

body.dark .no-comment p {  
  color: #b0b3b8;
}

body.dark .no-comment h2 {
  color: #b0b3b8;
}


/* ==========================================
   PART 4: LOGIN UI
   ========================================== */

/* PAGE LAYOUT & CONTAINER */
.login-page {  
  min-height: auto;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  padding: 20px;
}

.login-card {  
  width: 100%;  
  max-width: 380px;  
  background: #fff;  
  border-radius: 16px;  
  padding: 24px;  
  text-align: center;  
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

.login-logo {  
  width: 70px;  
  height: 70px;  
  margin: 0 auto 15px;  
  border-radius: 50%;  
  background: #1877f2;  
  color: #fff;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  font-size: 32px;
}

.login-card h2 {  
  margin: 0;  
  font-size: 24px;
}

.login-card p {  
  margin: 8px 0 20px;  
  color: #65676b;  
  font-size: 14px;
}

/* FORM INPUTS & ELEMENTS */
.login-form input {  
  width: 100%;  
  height: 48px;  
  border: 1px solid #ddd;  
  border-radius: 12px;  
  padding: 0 14px;  
  margin-bottom: 12px;  
  outline: none;
}

.pass-box {
  position: relative;
  height: 48px;
}

.pass-box input {  
  height: 48px;
}

.pass-box i {  
  position: absolute;  
  right: 12px;  
  top: 0;  
  bottom: 0;  
  display: flex;  
  align-items: center;  
  cursor: pointer;  
  font-size: 18px;  
  color: #65676b;
}

.remember-box {  
  display: flex;  
  align-items: center;  
  gap: 8px;  
  font-size: 13px;  
  color: #65676b;  
  margin: 10px 0;  
  cursor: pointer;
}

.remember-box input {  
  width: 16px;  
  height: 16px;  
  margin: 0;  
  accent-color: #1877f2;
}

.remember-box span {  
  line-height: 1;
}

/* BUTTONS & LINKS */
.login-form button {  
  width: 100%;  
  height: 48px;  
  border: none;  
  border-radius: 12px;  
  background: #1877f2;  
  color: #fff;  
  font-weight: 600;  
  cursor: pointer;
}

.forgot-link {  
  display: block;  
  margin: 15px 0;  
  text-decoration: none;  
  color: #1877f2;  
  font-size: 14px;
}

.create-account {  
  display: block;  
  width: 100%;  
  padding: 12px 20px;  
  border-radius: 12px;  
  background: #42b72a;  
  color: #fff;  
  text-decoration: none;  
  font-weight: 600;  
  text-align: center;  
  box-sizing: border-box; 
  height: 48px;
}

/* CONTENT DIVIDER */
.login-divider {  
  position: relative;  
  margin: 20px 0;
}

.login-divider:before {  
  content: "";  
  position: absolute;  
  top: 50%;  
  left: 0;  
  right: 0;  
  height: 1px;  
  background: #ddd;
}

.login-divider span {  
  position: relative;  
  background: #fff;  
  padding: 0 10px;  
  color: #65676b;  
  font-size: 13px;
}

/* DARK MODE LOGIN */
body.dark .login-card {  
  background: #1c1c1c;  
  box-shadow: none;
}

body.dark .login-card h2 {  
  color: #fff;
}

body.dark .login-card p,
body.dark .login-divider span {  
  color: #b0b3b8;
}

body.dark .login-divider:before {  
  background: #3a3b3c;
}

body.dark .login-form input {  
  background: #242526;  
  border-color: #3a3b3c;  
  color: #fff;
}

body.dark .login-form input::placeholder {  
  color: #b0b3b8;
}

body.dark .login-divider span {  
  background: #1c1c1c;
}

body.dark .remember-box {  
  color: #b0b3b8;
}

body.dark .pass-box i {  
  color: #b0b3b8;
}


/* ==========================================
   PART 5: REGISTER UI
   ========================================== */

/* PAGE LAYOUT & CONTAINER */
.register-page {  
  min-height: auto;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  padding: 20px;  
  font-family: Helvetica, Arial, sans-serif;
}

.register-card {  
  width: 100%;  
  max-width: 420px;  
  background: #fff;  
  border-radius: 16px;  
  padding: 24px;  
  text-align: center;  
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

.register-logo {  
  width: 70px;  
  height: 70px;  
  margin: 0 auto 15px;  
  border-radius: 50%;  
  background: #1877f2;  
  color: #fff;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  font-size: 32px;
}

.register-card h2 {  
  margin: 0;  
  font-size: 24px;
}

.register-card p {  
  margin: 8px 0 20px;  
  color: #65676b;  
  font-size: 14px;
}

/* FORM ELEMENTS */
.register-form input,
.register-form select {  
  width: 100%;  
  height: 48px;  
  border: 1px solid #ddd;  
  border-radius: 12px;  
  padding: 0 14px;  
  margin-bottom: 12px;  
  outline: none;  
  background: #fff;
}

.check-box {  
  display: flex;  
  align-items: center;  
  gap: 8px;  
  font-size: 13px;  
  color: #65676b;  
  margin-bottom: 12px;  
  cursor: pointer;
}

.check-box input {  
  width: 16px;  
  height: 16px;  
  accent-color: #1877f2;  
  margin: 0;
}

.check-box a {  
  color: #1877f2;  
  text-decoration: none;
}

/* BIRTHDAY SELECTION */
.birthday-box {  
  margin-bottom: 12px;  
  text-align: left;
}

.birthday-box label {  
  display: block;  
  font-size: 14px;  
  margin-bottom: 6px;  
  color: #65676b;
}

.birthday-row {  
  display: flex;  
  gap: 8px;
}

.birthday-row select {  
  flex: 1;  
  height: 48px;  
  border: 1px solid #ddd;  
  border-radius: 12px;  
  padding: 0 8px;  
  outline: none;
}

/* BUTTONS & INTERACTIVE LINKS */
.register-form button {  
  width: 100%;  
  height: 48px;  
  border: none;  
  border-radius: 12px;  
  background: #1877f2;  
  color: #fff;  
  font-weight: 600;  
  cursor: pointer;
}

.register-divider {  
  margin: 18px 0 12px;  
  color: #65676b;  
  font-size: 14px;
}

.login-link {  
  display: block;  
  width: 100%;  
  height: 48px;  
  text-align: center;  
  padding: 12px 20px;  
  border-radius: 12px;  
  background: #2ea043;  
  color: #fff;  
  text-decoration: none;  
  font-weight: 600;  
  box-sizing: border-box;
}

/* DARK MODE REGISTER */
body.dark .register-card {  
  background: #1c1c1c;  
  box-shadow: none;
}

body.dark .register-card h2 {  
  color: #fff;
}

body.dark .register-card p,
body.dark .register-divider,
body.dark .birthday-box label {  
  color: #b0b3b8;
}

body.dark .register-form input,
body.dark .register-form select {  
  background: #242526;  
  border-color: #3a3b3c;  
  color: #fff;
}

body.dark .login-link {  
  background: #2ea043;
}

body.dark .check-box {  
  color: #b0b3b8;
}

body.dark .check-box a {  
  color: #4ea1ff;
}