.input-field-no-label {
  gap: 0;
}

/* Input Field Component */

.input-field-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 12px;
}

.input-field-label {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: normal;
  color: #adadad;
  margin: 0;
}

.input-field-wrapper {
  width: 100%;
  flex: 1 0 0;
  min-width: 0;
}

.input-field {
  width: 100%;
  background-color: #0f0f0f;
  border: 1px solid #3d3d3d;
  border-radius: 8px;
  padding: 12px 16px;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
  color: #ffffff;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-field::placeholder {
  color: #adadad;
  font-size: 14px;
}

.input-field:focus {
  border-color: #3d3d3d;
  box-shadow: 0 0 0 3px rgba(61, 61, 61, 0.2);
}

.input-field:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Textarea support */
.input-field.textarea {
  min-height: 150px;
  resize: vertical;
}

.create-entry-content-textarea.input-field.textarea {
  min-height: 200px;
  height: 200px;
}

.edit-entry-content-textarea.input-field.textarea {
  min-height: 200px;
  height: 200px;
}

/* Select support */
.input-field.select {
  cursor: pointer;
}

/* File input support */
.input-field[type="file"] {
  padding: 12px 16px;
  cursor: pointer;
}

.input-field[type="file"]::file-selector-button {
  display: none;
}

/* Button Component */

.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  background-color: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
  box-sizing: border-box;
  white-space: nowrap;
  height: 47px;
}

.ui-button:hover {
  background-color: #1d4ed8;
}

.ui-button:active {
  background-color: #1e40af;
  transform: translateY(1px);
}

.ui-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
}

.ui-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #9ca3af;
}

.ui-button:disabled:hover {
  background-color: #9ca3af;
  transform: none;
}

/* Button with border variant */
.ui-button-bordered {
  border: 1px solid #ffffff;
}

.ui-button-bordered:hover {
  border-color: #ffffff;
}

.ui-button-bordered:active {
  border-color: #ffffff;
}

.ui-button-bordered:disabled {
  border-color: rgba(255, 255, 255, 0.3);
}

/* Button text */
.ui-button-text {
  display: inline-block;
}

/* Button icons */
.ui-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.ui-button-icon-left {
  margin-right: 0;
}

.ui-button-icon-right {
  margin-left: 0;
}

/* Icon-only button support (add .ui-button-icon-only class manually if needed) */
.ui-button-icon-only {
  padding: 10px;
  min-width: 40px;
}

/* Page Header Component */

.page-header {
  display: flex;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: normal;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.6;
  font-size: 16px;
  color: #ffffff;
  width: 100%;
}

.page-header-text {
  margin: 0;
  text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-style: solid;
  flex-shrink: 0;
}

.page-header-number {
  margin: 0;
  flex-shrink: 0;
}

/* Form Component */

.ui-form-fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}

.ui-form {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}

.ui-form-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* Form row for side-by-side fields (like GitHub URL and Profile Image URL) */
.ui-form-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}

.ui-form-row > * {
  flex: 1 0 0;
  min-width: 0;
}

/* Responsive: stack fields on smaller screens */
@media (max-width: 768px) {
  .ui-form-row {
    flex-direction: column;
  }
}

/* Global Dark Mode Styles */

html, body {
  background-color: #000000;
  color: #ffffff;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  margin: 0 0 32px 0;
}

/* Ensure all text is visible on dark background */
* {
  color: inherit;
}

/* Links should be visible */
a {
  color: #ffffff;
}

a:hover {
  color: #e0e0e0;
}

/* Override any white backgrounds in cards/containers */
.card {
  background-color: #1a1a1a !important;
  border-color: #3d3d3d !important;
  color: #ffffff !important;
}

.card-body {
  color: #ffffff !important;
}

.entry {
  background-color: #1a1a1a !important;
  border-color: #3d3d3d !important;
  color: #ffffff !important;
}

/* Muted text should be lighter gray for dark mode */
.muted {
  color: #adadad !important;
}

/* Ensure inputs and textareas have dark styling */
input[type="text"],
input[type="url"],
input[type="password"],
input[type="email"],
input[type="file"],
textarea,
select {
  background-color: #0f0f0f !important;
  border-color: #3d3d3d !important;
  color: #ffffff !important;
}

input[type="text"]::placeholder,
input[type="url"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder {
  color: #adadad !important;
}

/* Fix Chrome autofill background color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #0f0f0f inset !important;
  -webkit-text-fill-color: #ffffff !important;
  background-color: #0f0f0f !important;
  border-color: #3d3d3d !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Also apply to input-field class specifically */
.input-field:-webkit-autofill,
.input-field:-webkit-autofill:hover,
.input-field:-webkit-autofill:focus,
.input-field:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #0f0f0f inset !important;
  -webkit-text-fill-color: #ffffff !important;
  background-color: #0f0f0f !important;
  border-color: #3d3d3d !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Logo Component Styles */

.app-logo {
  display: inline-block;
  vertical-align: middle;
}

.app-logo-small {
  width: 27px;
  height: 32px;
}

.app-logo-large {
  width: 40px;
  height: 48px;
}

/* Arrow icon in buttons */
.ui-button-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.arrow-icon-svg {
  width: 16px;
  height: 16px;
  transform: rotate(90deg);
  display: block;
}

/* Dark button variant (for login/signup pages) */
.ui-button-dark {
  background-color: #0f0f0f;
  border: 1px solid #3d3d3d;
  color: #ffffff;
  padding: 0 12px;
  gap: 4px;
}

.ui-button-dark:hover {
  background-color: #1a1a1a;
  border-color: #3d3d3d;
}

.ui-button-dark:active {
  background-color: #0a0a0a;
}

.ui-button-dark:focus-visible {
  box-shadow: 0 0 0 3px rgba(61, 61, 61, 0.2);
}

.ui-button-ghost {
  background-color: transparent;
  border: none;
  color: #ffffff;
  padding: 0 12px;
  gap: 4px;
}

.ui-button-ghost:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.ui-button-ghost:active {
  background-color: rgba(255, 255, 255, 0.12);
}

/* Comment Input Component */

.comment-input-container {
  width: 100%;
}

.comment-input-wrapper {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
}

.comment-input-field {
  flex: 1 0 0;
  min-width: 0;
  background-color: #0f0f0f;
  border: 1px solid #3d3d3d;
  border-radius: 8px;
  padding: 12px 16px;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
  color: #ffffff;
  outline: none;
  resize: vertical;
  min-height: 44px;
  line-height: 1.5;
}

.comment-input-field::placeholder {
  color: #adadad;
  font-size: 14px;
}

.comment-input-field:focus {
  border-color: #3d3d3d;
  box-shadow: 0 0 0 3px rgba(61, 61, 61, 0.2);
}

.comment-submit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #0f0f0f;
  border: 1px solid #3d3d3d;
  border-radius: 8px;
  padding: 0 12px;
  color: #ffffff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  align-self: flex-start;
  height: 42.5px;
}

.comment-submit-button:hover {
  background-color: #1a1a1a;
  border-color: #3d3d3d;
}

.comment-submit-button:active {
  background-color: #0a0a0a;
}

.comment-submit-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(61, 61, 61, 0.2);
}

.comment-reply-icon {
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
  display: block;
}

.comment-button-text {
  display: inline-block;
}

/* Comment input without label - hide the label wrapper */
.comment-input-no-label .input-field-group {
  gap: 0;
}

.comment-input-no-label .input-field-wrapper {
  width: 100%;
}

.comment-input-no-label .input-field {
  height: 44px;
  line-height: 1.5;
}

/* Reply icon in buttons */
.ui-button-reply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.reply-icon-svg {
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
  display: block;
}

/* Comment submit button specific styling */
.comment-submit-btn {
  align-self: flex-start;
  padding: 0 12px;
  gap: 6px;
  height: 42.5px;
}

/* User Card Component */
.user-card {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  position: relative;
}

.user-card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex: 1 1 auto;
  cursor: pointer;
}

.user-card-link:hover {
  opacity: 0.9;
}

.user-card-main {
  display: flex;
  gap: 24px;
  align-items: center;
  flex: 1 1 auto;
}

.user-card-prominent {
  gap: 24px;
  padding: 24px;
  border: 1px solid #3d3d3d;
  border-radius: 8px;
  background-image: linear-gradient(145.34deg, rgba(44, 87, 255, 0) 80.952%, rgba(44, 87, 255, 0.2) 99.433%), linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
  box-shadow: inset 0 0 14.8px 0 rgba(44, 87, 255, 0.5);
}

.user-card-avatar {
  width: 64px;
  height: 64px;
  border-radius: 100px;
  border: 1px solid #3d3d3d;
  overflow: hidden;
  flex-shrink: 0;
  background-color: #0f0f0f;
}

.user-card-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-card-avatar-placeholder {
  width: 100%;
  height: 100%;
  background-color: #c3c3c3;
  display: block;
}

.user-card-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  min-width: 0;
}

.user-card-name {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #ffffff;
  line-height: 1;
  margin: 0;
}

.user-card-github {
  display: flex;
  gap: 4px;
  align-items: center;
  color: #adadad;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.user-card-github-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #adadad;
}

.user-card-github-icon-img {
  width: 16px;
  height: 16px;
  display: block;
}

.user-card-github-handle {
  color: #adadad;
  text-decoration: none;
}

.user-card-github-handle:hover {
  color: #ffffff;
}

.user-card-status {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #adadad;
  line-height: 1;
  white-space: nowrap;
}

.user-card-status--accent {
  color: #e6e628;
}

.user-card-status--warning {
  color: #e6b828;
}

.user-card-status--muted {
  color: #adadad;
}

.user-card-action-btn {
  height: 41px;
  padding: 0 12px;
  gap: 6px;
  flex-shrink: 0;
}

.user-card-action-form {
  margin: 0;
}

.user-card-action-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.user-card-action-icon-img {
  width: 16px;
  height: 16px;
  display: block;
  filter: brightness(0) invert(1);
}

/* Author Stats Component */
.author-stats {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  width: 100%;
}

.author-stat-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
  flex: 1 1 0;
  width: 100%;
}

.author-stat-label {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #0088ff;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}

.author-stat-label--static {
  pointer-events: none;
  cursor: default;
  color: #adadad;
  background-color: transparent;
}

.author-stat-label:hover {
  color: #66b3ff;
}

.author-stat-label-icon {
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.author-stat-label-icon-img {
  width: 12px;
  height: 12px;
  display: block;
  transform: rotate(90deg);
  filter: brightness(0) saturate(100%) invert(46%) sepia(84%) saturate(2666%) hue-rotate(186deg) brightness(99%) contrast(97%);
}

.author-stat-value-wrapper {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  justify-content: center;
}

.author-stat-value {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #ffffff;
  line-height: 1;
}

.author-stat-badge {
  width: 8px;
  height: 8px;
  border-radius: 10px;
  margin-top: 4px;
}

.author-stat-badge--accent {
  background-color: #e6e628;
}

.author-stat-badge--warning {
  background-color: #ffa500;
}

.author-stat-badge--muted {
  background-color: #adadad;
}

.author-about {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.author-about-profile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.author-about-user {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1 1 auto;
}

.author-card-inline {
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  gap: 24px;
  width: 100%;
}

.author-card-inline .user-card-main {
  flex: 1 1 auto;
}

.author-card-inline .user-card-avatar {
  width: 80px;
  height: 80px;
}

.author-card-inline .user-card-avatar-placeholder {
  background-color: #1a1a1a;
}

.author-card-inline .user-card-name {
  font-size: 32px;
}

.author-about-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.author-about-action {
  height: 41px;
  padding: 0 12px;
  gap: 6px;
}

.author-about-action[aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

.author-about-action-icon {
  width: 16px;
  height: 16px;
  display: block;
  filter: brightness(0) invert(1);
}

.author-about-bio {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #adadad;
  line-height: 1.6;
  margin: 0;
}

/* Like and Comment Counter Component */
.like-comment-counter {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
}

.counter-item {
  display: flex;
  gap: 4px;
  align-items: center;
}

.like-button-form {
  margin: 0;
  position: relative;
  z-index: 1;
}

.counter-like-button {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

.counter-like-button:focus-visible {
  outline: 2px solid rgba(255, 68, 68, 0.6);
  outline-offset: 2px;
}

.counter-like-button--active .counter-number {
  color: #ff8080;
}

.counter-like-button--active .counter-icon-heart svg path {
  fill: currentColor;
}

.counter-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.counter-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Heart icon - red outline */
.counter-icon-heart {
  color: #ff4444;
}

/* Chat bubble icon - blue outline */
.counter-icon-chat {
  color: #4444ff;
}

.counter-number {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #adadad;
  line-height: 1;
  white-space: nowrap;
}

/* Entry Component*/
.entry-card {
  background-color: #000000;
  border: 1px solid #3d3d3d;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  box-shadow: inset 0px 0px 14.8px 0px rgba(44, 87, 255, 0.5);
  overflow-x: hidden;
  min-width: 0;
}

.entry-card-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.entry-card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 24px;
  cursor: pointer;
  overflow-x: hidden;
  min-width: 0;
  width: 100%;
}

.entry-card-link:hover {
  opacity: 0.9;
}

.entry-header {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.entry-author-info-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.entry-author-info-link:hover {
  opacity: 0.8;
}

.entry-author-info {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.entry-author-avatar {
  width: 36px;
  height: 36px;
  border-radius: 100px;
  border: 1px solid #3d3d3d;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background-color: #c3c3c3;
  display: block;
}

.entry-author-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 0 0;
}

.entry-author-name {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1;
  white-space: nowrap;
}

.entry-timestamp {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #adadad;
  line-height: 1;
  white-space: nowrap;
}

.entry-counters {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.entry-edit-button {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.entry-edit-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.entry-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

.entry-title {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.4;
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

.entry-description {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #adadad;
  line-height: 1.6;
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

.entry-body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #adadad;
  line-height: 1.6;
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  min-width: 0;
}

.entry-content p.entry-body {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.entry-image {
  width: 100%;
  height: 448px;
  border-radius: 8px;
  overflow: hidden;
  border: none;
  position: relative;
}

.entry-image-img {
  width: 100%;
  height: 448px;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.entry-comment-section {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Navigation Tab Component */
.nav-tab {
  display: flex;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.nav-tab-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
}

.nav-tab-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.nav-tab-icon-svg {
  width: 24px;
  height: 24px;
  display: block;
}

.nav-tab-selected .nav-tab-icon {
  background-color: rgba(44, 87, 255, 0.35);
  border-radius: 8px;
}

.nav-tab-text {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  line-height: 1;
  white-space: nowrap;
}

/* Navigation Bar Component */
.nav-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.nav-bar-logo {
  flex-shrink: 0;
}

.nav-bar-tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 0 0 auto;
  width: 100%;
}

.nav-bar-logout {
  flex-shrink: 0;
}

.nav-logout-button {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  height: 41px;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  box-sizing: border-box;
}

.nav-logout-icon {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
}

.nav-logout-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.nav-logout-text {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1;
  white-space: nowrap;
}

/* Comment Component */
.comment-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}

.comment-header {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.comment-author-info-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.comment-author-info-link:hover {
  opacity: 0.8;
}

.comment-author-info {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.comment-author-avatar {
  width: 36px;
  height: 36px;
  border-radius: 100px;
  border: 1px solid #3d3d3d;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.comment-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.comment-avatar-placeholder {
  width: 100%;
  height: 100%;
  background-color: #c3c3c3;
  display: block;
}

.comment-author-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 0 0;
}

.comment-author-name {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1;
  white-space: nowrap;
}

.comment-timestamp {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #adadad;
  line-height: 1;
  white-space: nowrap;
}

.comment-like-form {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

.comment-like-button {
  display: flex;
  gap: 3px;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #adadad;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.comment-like-button:hover {
  opacity: 0.8;
}

.comment-like-button--active {
  color: #ff8080;
}

.comment-like-button--active .comment-like-number {
  color: #ff8080;
}

.comment-like-display {
  display: flex;
  gap: 3px;
  align-items: center;
  color: #adadad;
}

.comment-like-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ff4444;
}

.comment-like-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.comment-like-number {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #adadad;
  line-height: 1;
  white-space: nowrap;
}

.comment-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}

.comment-text {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #adadad;
  margin: 0;
  width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
}