/* Token desain (warna, spasi, radius, bayangan, tipografi) ada di tokens.css.
   File ini mulai dari base dan komponen. */

* { box-sizing: border-box; }

/* Aturan display milik penulis (mis. .auth-form { display: grid }) mengalahkan
   [hidden] bawaan browser, sehingga form yang seharusnya tersembunyi ikut
   tampil. !important memastikan atribut hidden selalu menang. */
[hidden] { display: none !important; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
}

.page {
  display: grid;
  grid-template-columns: minmax(360px, 0.92fr) minmax(460px, 1.08fr);
  min-height: 100vh;
  padding: 20px;
  background: var(--green-dark);
}

.story {
  position: relative;
  display: flex;
  min-height: calc(100vh - 40px);
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(28px, 5vw, 64px);
  color: #f8f7ed;
  background: #41634c;
  isolation: isolate;
}

.story::before,
.story::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.story::before {
  top: 20%;
  right: -12%;
  width: min(36vw, 460px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 254, 234, 0.22);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(255, 254, 234, 0.035), 0 0 0 78px rgba(255, 254, 234, 0.035), 0 0 0 118px rgba(255, 254, 234, 0.035);
}

.story::after {
  right: 0;
  bottom: 0;
  left: 0;
  height: 44%;
  background: linear-gradient(0deg, rgba(25, 49, 32, 0.34), transparent);
}

.brand {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 11px;
  color: inherit;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 34px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  color: #fadcb4;
  font-size: 1.1rem;
  line-height: 1;
}

.story-copy {
  max-width: 520px;
  margin: auto 0;
  padding: 52px 0;
  animation: arrive 650ms ease-out both;
}

.eyebrow {
  margin: 0 0 22px;
  color: #e5dac4;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.story h1 {
  max-width: 520px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4.65rem);
  font-weight: 500;
  line-height: 1.06;
}

.story h1 span { color: #f0bd91; }

.story-description {
  max-width: 360px;
  margin: 24px 0 0;
  color: rgba(248, 247, 237, 0.85);
  font-size: 1rem;
  line-height: 1.7;
}

.story-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(248, 247, 237, 0.8);
  font-size: 0.78rem;
}

.login-side {
  display: grid;
  min-height: calc(100vh - 40px);
  place-items: center;
  padding: 44px clamp(26px, 7vw, 100px);
  background: linear-gradient(145deg, #edf3e8 0%, #dce9d9 100%);
}

.login-box {
  width: min(100%, 410px);
  animation: arrive 650ms 90ms ease-out both;
}

.mobile-brand { display: none; }

.login-box h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.05rem;
  font-weight: 700;
  line-height: 1.2;
}

.intro {
  margin: 10px 0 32px;
  color: var(--muted);
  font-size: 0.96rem;
}

.field { margin-bottom: 20px; }

.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.86rem;
  font-weight: 700;
}

.input-wrap { position: relative; }

.field input {
  width: 100%;
  height: 52px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 5px;
  outline: none;
  color: var(--ink);
  background: var(--white);
  font: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

/* #a3a69d hanya 2.45:1 -> gagal. Digelapkan ke #6f726a (4.85:1). */
.field input::placeholder { color: #6f726a; }

.field input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(66, 107, 78, 0.13);
}

#password { padding-right: 86px; }

.toggle-password {
  position: absolute;
  top: 50%;
  right: 13px;
  padding: 5px 0 5px 8px;
  transform: translateY(-50%);
  border: 0;
  color: var(--green);
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 24px;
  font-size: 0.83rem;
}

.remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #555c52;
  cursor: pointer;
}

.remember input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--green);
}

a { color: var(--green); }

.form-options a,
.signup a {
  font-weight: 700;
  text-decoration: none;
}

.form-options a:hover,
.signup a:hover { text-decoration: underline; }

.submit-button {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 5px;
  color: white;
  background: var(--green);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}

.submit-button:hover { background: var(--green-dark); }
.submit-button:active { transform: translateY(1px); }

.status {
  min-height: 22px;
  margin: 12px 0 0;
  color: var(--green-dark);
  font-size: 0.82rem;
  text-align: center;
}

.status[data-state="error"] { color: #b34739; }

#logout-button { margin-top: 12px; }

.signup {
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  text-align: center;
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 850px) {
  .page { grid-template-columns: minmax(300px, 0.85fr) minmax(390px, 1.15fr); }
  .story { padding: 36px; }
  .login-side { padding: 36px; }
  .story h1 { font-size: clamp(2.45rem, 6vw, 3.5rem); }
}

@media (max-width: 680px) {
  .page { display: block; padding: 0; }
  .story { display: none; }
  .login-side {
    min-height: 100vh;
    padding: 30px 24px;
    background: linear-gradient(145deg, #edf3e8 0%, #dce9d9 100%);
  }
  .login-box { width: min(100%, 430px); }
  .mobile-brand {
    display: inline-flex;
    margin-bottom: 52px;
    color: var(--green);
  }
  .intro { margin-bottom: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

html { scroll-behavior: smooth; }

/* Jangkar navigasi rail: pendaratan presisi dengan napas lega supaya
   target tidak tertutup header sticky. (prefers-reduced-motion sudah
   memaksa scroll-behavior:auto di atas.) */
#feed-column,
#compose-title,
#comments-title,
#profile-title,
#admin-main,
#create-user-title,
#user-list-title,
#comment-list-title {
  scroll-margin-top: 88px;
}

.dashboard-page { min-height: 100vh; }

.dashboard-header {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 7vw, 100px);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.dashboard-header .brand { color: var(--green); }

.dashboard-header .brand-mark {
  border-color: var(--green);
  color: var(--orange);
}

.dashboard-admin-link {
  margin-left: auto;
  margin-right: 24px;
  color: var(--green);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

.dashboard-admin-link:hover { text-decoration: underline; }

.dashboard-logout {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.dashboard-logout:hover {
  border-color: var(--green);
  color: var(--green);
}

.dashboard-main {
  width: min(100% - 48px, 1100px);
  margin: 0 auto;
  padding: clamp(56px, 10vh, 100px) 0 72px;
}

.dashboard-main .eyebrow { color: var(--green); }

.dashboard-greeting {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 48px;
  padding: 24px;
  border-left: 4px solid var(--green);
  border-radius: 5px;
  background: #e5eee3;
}

.dashboard-avatar {
  display: grid;
  width: 88px;
  height: 88px;
  flex: 0 0 88px;
  place-items: center;
  overflow: hidden;
  border: 2px solid var(--green);
  border-radius: 50%;
  color: var(--green-dark);
  background: #e5ece4;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
}

.dashboard-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dashboard-greeting-copy { min-width: 0; }

.dashboard-main h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 600;
  line-height: 1.15;
}

.dashboard-intro {
  margin: 14px 0 0;
  color: var(--muted);
}

.dashboard-account-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  align-items: start;
  gap: 36px;
}

.account-summary {
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.account-summary h2 {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.account-summary dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
}

.account-summary dt {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.82rem;
}

.account-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}

.photo-status-compose {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
}

.photo-status-compose > .eyebrow {
  margin: 0 0 8px;
}

.photo-status-compose h2,
.photo-status-feed-section h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.photo-status-intro {
  margin: 9px 0 16px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.photo-status-form {
  display: grid;
  justify-items: start;
  gap: 10px;
}

.photo-status-preview {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #eef0e9;
}

.photo-status-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-status-caption {
  width: 100%;
  min-height: 84px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--white);
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
}

.photo-status-caption:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.photo-status-feed-section {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.photo-status-feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.photo-status-item {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
}

.photo-status-image-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #eef0e9;
  cursor: zoom-in;
}

.photo-status-image-button:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: -3px;
}

.photo-status-image-button img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.photo-status-lightbox {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(94vw, 720px);
  max-width: 94vw;
  height: min(90vh, 900px);
  max-height: 90vh;
  padding: 72px 18px 18px;
  border: 0;
  border-radius: 12px;
  background: #182019;
}

.photo-status-lightbox[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  gap: 12px;
}

.photo-status-lightbox::backdrop { background: rgba(12, 18, 13, 0.84); }

.photo-status-lightbox > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  border-radius: 8px;
  object-fit: contain;
}

.photo-status-lightbox-code {
  margin: 0;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  font: 700 0.9rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  cursor: pointer;
}

.photo-status-lightbox-code:hover { background: rgba(255, 255, 255, 0.18); }
.photo-status-lightbox-code:focus-visible { outline: 2px solid var(--orange-bright); }

.photo-status-lightbox-actions {
  position: absolute;
  z-index: 1;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
}

.photo-status-lightbox-close,
.photo-status-lightbox-comment {
  display: inline-flex;
  width: 112px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
}

.photo-status-lightbox-close:hover,
.photo-status-lightbox-comment:hover:not(:disabled) { background: rgba(255, 255, 255, 0.24); }
.photo-status-lightbox-comment:disabled { opacity: 0.55; cursor: not-allowed; }

/* Cincin fokus di lightbox gelap harus terang, bukan --orange yang digelapkan. */
.photo-status-lightbox-close:focus-visible,
.photo-status-lightbox-comment:focus-visible { outline: 2px solid var(--orange-bright); }

.photo-status-details {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
}

.photo-status-details strong {
  overflow: hidden;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-status-details time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.72rem;
}

.profile-photo-section {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.profile-photo-preview {
  display: grid;
  width: 104px;
  height: 104px;
  flex: 0 0 104px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--green-dark);
  background: #e5ece4;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
}

.profile-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-photo-content { min-width: 0; }

.profile-photo-content h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
}

.profile-photo-content > p:not(.comments-status) {
  margin: 7px 0 12px;
  color: var(--muted);
  font-size: 0.84rem;
}

.profile-photo-form { display: grid; gap: 9px; }

.profile-photo-input-label {
  position: relative;
  display: inline-flex;
  width: fit-content;
  min-height: var(--tap-min);
  align-items: center;
  gap: 8px;
  overflow: hidden;
  padding: 0 16px;
  border-radius: 4px;
  color: #fff;
  background: var(--green);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.profile-photo-input-label:hover { background: var(--green-dark); }

button.profile-photo-input-label {
  border: 0;
  font: inherit;
}

button.profile-photo-input-label:disabled {
  background: var(--muted);
  cursor: not-allowed;
}

.profile-photo-input-label svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.profile-photo-input-label:has(input:disabled) {
  background: var(--muted);
  cursor: not-allowed;
}

.profile-photo-input-label:focus-within {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.profile-photo-input-label input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.profile-photo-filename {
  max-width: min(100%, 340px);
  min-height: 1.4em;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-photo-actions { display: flex; flex-wrap: wrap; gap: 9px; }

.profile-photo-remove {
  min-height: var(--tap-min);
  padding: 0 14px;
  border: 1px solid #e5c9c5;
  border-radius: 4px;
  color: #a33d32;
  background: transparent;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

.profile-photo-remove:hover { background: #f8e8e5; }
.profile-photo-remove:disabled { cursor: wait; opacity: 0.6; }

.comments-section,
.comment-compose {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.comments-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.comments-heading .eyebrow,
.comment-compose > .eyebrow {
  margin: 0 0 8px;
  color: var(--green);
}

.comments-heading h2,
.comment-compose h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.comments-count {
  display: grid;
  min-width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  color: var(--green-dark);
  background: rgba(66, 107, 78, 0.1);
  font-size: 0.82rem;
  font-weight: 700;
}

.comments-status {
  min-height: 20px;
  margin: 12px 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.comments-status[data-state="error"] { color: #a33d32; }

.comments-empty { color: var(--muted); font-size: 0.9rem; }

.received-comment {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.received-comment-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.received-comment-header strong {
  overflow-wrap: anywhere;
  font-size: 0.88rem;
}

.received-comment-header time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.75rem;
}

.received-comment > p {
  margin: 9px 0 0;
  color: #454b43;
  font-size: 0.92rem;
  line-height: 1.65;
  text-align: left;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.messages-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-5);
}

.messages-layout > * { min-width: 0; }

.sent-comments-section { margin-top: 0; }

.sent-comment .received-comment-header { align-items: center; }

.message-delete {
  min-height: 36px;
  flex: 0 0 auto;
  padding: 0 10px;
  border: 1px solid #d9aaa2;
  border-radius: var(--radius-sm);
  color: #9f3e32;
  background: transparent;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.message-delete:hover { background: rgba(159, 62, 50, 0.08); }
.message-delete:disabled { cursor: wait; opacity: 0.6; }

.received-comment-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.message-reply {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--green);
  border-radius: var(--radius-sm);
  color: var(--green);
  background: transparent;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.message-reply:hover { background: rgba(44, 69, 52, 0.08); }

.profile-password-link {
  display: block;
  width: 100%;
  margin-top: var(--space-4);
  padding: 0.72rem 1rem;
  border: 1px solid var(--green);
  border-radius: var(--radius-md);
  color: var(--white);
  background: var(--green);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.profile-password-link:hover,
.profile-password-link:focus-visible {
  border-color: var(--green-dark);
  background: var(--green-dark);
}

.password-page {
  min-height: 100vh;
  background: linear-gradient(145deg, #f4f3ed 0%, #e8eee4 100%);
}

.password-page-shell {
  display: grid;
  width: min(100% - 2rem, 620px);
  min-height: 100vh;
  margin: 0 auto;
  align-content: center;
  gap: var(--space-5);
  padding-block: var(--space-6);
}

.password-page-brand {
  justify-self: center;
}

.password-card {
  padding: clamp(1.5rem, 5vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  border-color: #34717a;
  color: #f4fbfa;
  background: linear-gradient(145deg, #28565d 0%, #1d5058 100%);
  box-shadow: 0 16px 48px rgba(28, 65, 70, 0.22);
}

.password-back-link {
  display: inline-block;
  margin-bottom: var(--space-5);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}

.password-back-link:hover,
.password-back-link:focus-visible {
  color: #ffffff;
}

.password-card .eyebrow {
  margin: 0 0 var(--space-2);
  color: #b9dfe0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.password-card h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: 400;
  line-height: 1.05;
}

.password-intro {
  max-width: 42ch;
  margin: var(--space-3) 0 var(--space-2);
  color: #d9ecec;
  line-height: 1.6;
}

.password-account {
  margin: 0 0 var(--space-5);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 700;
}

.password-card .change-password-form {
  display: grid;
  gap: var(--space-2);
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  text-align: left;
}

.password-card .change-password-form label {
  color: #d9ecec;
  font-size: 0.75rem;
  font-weight: 700;
}

.password-card .change-password-form input {
  width: 100%;
  min-height: 42px;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
  background: var(--white);
  font: inherit;
}

.password-card .change-password-form input:focus {
  outline: 2px solid #b9dfe0;
  outline-offset: 1px;
}

.password-card .change-password-form .comment-submit {
  width: 100%;
  margin-top: var(--space-1);
  border-radius: var(--radius-md);
}

.password-hint {
  margin-top: calc(var(--space-2) * -1);
  color: #b9dfe0;
  font-size: 0.72rem;
}

.password-card .comments-status {
  margin-bottom: 0;
}
.comment-form select,
.comment-form textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  background: var(--white);
  font: inherit;
  font-size: 0.9rem;
}

.comment-form select { min-height: 46px; }
.comment-form textarea { min-height: 110px; resize: vertical; }
.message-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.message-tools button,
.message-gif-picker button {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: #f4f6f0;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.message-tools button:hover,
.message-gif-picker button:hover { border-color: var(--green); }
.message-tools button:focus-visible,
.message-gif-picker button:focus-visible,
.message-emoji-grid button:focus-visible,
.message-sticker-grid button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.message-insert-panel {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #f8f9f4;
}
.message-emoji-grid,
.message-sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(38px, 1fr));
  gap: 6px;
}
.message-emoji-grid[hidden],
.message-sticker-grid[hidden] { display: none; }
.message-emoji-grid button,
.message-sticker-grid button {
  display: grid;
  min-width: 38px;
  min-height: 40px;
  place-items: center;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 1.25rem;
  cursor: pointer;
}
.message-emoji-grid button:hover,
.message-sticker-grid button:hover { background: #e8eee3; }
.message-sticker-grid button { min-height: 54px; font-size: 1.8rem; }
.message-gif-picker label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 0.78rem; }
.message-gif-picker > div { display: flex; gap: 6px; }
.message-gif-picker input {
  min-width: 0;
  min-height: 38px;
  flex: 1;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.78rem;
}
.message-gif-picker input:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.message-gif-picker button { flex: 0 0 auto; }
.received-comment > p .message-gif {
  display: block;
  width: min(100%, 360px);
  max-height: 360px;
  margin: 8px 0;
  border-radius: var(--radius-sm);
  object-fit: contain;
}
.message-sticker {
  display: inline-grid;
  min-width: 92px;
  min-height: 92px;
  place-items: center;
  padding: 8px;
  border: 1px solid rgba(50, 65, 49, 0.12);
  border-radius: 18px;
  background: linear-gradient(145deg, #fff0d9, #f7e4df);
  font-size: 3.25rem;
  line-height: 1;
  vertical-align: middle;
}

.coding-editor-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f6faf7 100%);
}

.code-share-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.code-share-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--muted);
}

.coding-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 4px;
}

.coding-editor-header h2 {
  margin: 0;
  font-size: 1.2rem;
}

.coding-editor-actions {
  display: grid;
  flex: 0 1 420px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.coding-editor-actions .btn {
  white-space: nowrap;
}

.btn {
  border: 0;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: linear-gradient(180deg, #2a7a44 0%, #1f6138 100%);
  color: #fff;
  box-shadow: 0 10px 18px rgba(37, 104, 65, 0.18);
}

.btn-secondary {
  background: rgba(44, 122, 76, 0.08);
  color: #1f6138;
  border: 1px solid rgba(44, 122, 76, 0.12);
}

.coding-editor-shell {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #101827;
  min-height: 320px;
  height: 100%;
}

.coding-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #dfeaf3;
  font-size: 0.78rem;
  font-weight: 700;
}

.coding-file-name {
  letter-spacing: 0.02em;
}

.coding-language-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(96, 165, 250, 0.14);
  color: #cfe8ff;
  border: 1px solid rgba(96, 165, 250, 0.2);
  text-transform: uppercase;
}

.coding-editor-pane {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 260px;
  height: 100%;
  width: 100%;
}

.coding-line-numbers {
  background: rgba(255, 255, 255, 0.02);
  color: rgba(203, 213, 225, 0.6);
  padding: 14px 10px 14px 0;
  text-align: right;
  font-family: "Fira Code", "Consolas", "SFMono-Regular", monospace;
  font-size: 0.85rem;
  line-height: 1.7;
  white-space: pre;
  user-select: none;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

#coding-editor {
  width: 100%;
  min-height: 260px;
  height: 100%;
  max-height: none;
  resize: none;
  border: 0;
  outline: none;
  background: #101827;
  color: #e2f8e9;
  padding: 14px 16px;
  font-family: "Fira Code", "Consolas", "SFMono-Regular", monospace;
  font-size: 0.86rem;
  line-height: 1.7;
  tab-size: 2;
  white-space: pre;
  flex: 1 1 auto;
}

#coding-editor::placeholder {
  color: rgba(226, 248, 233, 0.45);
}

.coding-output-wrap {
  border: 1px solid #dfe9e2;
  border-radius: 12px;
  overflow: hidden;
  background: #0b1220;
}

.coding-output-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(148, 163, 184, 0.08);
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  color: #dbe7f3;
  font-size: 0.77rem;
  font-weight: 700;
}

.coding-output-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.coding-terminal-clear {
  border: 0;
  padding: 4px 0;
  color: #b8c8d8;
  background: transparent;
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}

.coding-terminal-clear:hover {
  color: #fff;
}

.coding-stdin-wrap {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  color: #c8d5e2;
  font-size: 0.75rem;
}

.coding-stdin-wrap textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 6px;
  padding: 8px 10px;
  color: #e2f8e9;
  background: #101827;
  font: 0.8rem/1.55 "Fira Code", "Consolas", "SFMono-Regular", monospace;
}

.coding-stdin-wrap textarea:focus {
  border-color: #5ebd85;
  outline: 2px solid rgba(94, 189, 133, 0.2);
}

.coding-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.18);
  color: #d6ffe6;
  font-size: 0.7rem;
}

.coding-status.error {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.18);
  color: #ffd9d9;
}

.coding-output {
  margin: 0;
  min-height: 130px;
  max-height: 220px;
  overflow: auto;
  padding: 14px 16px;
  color: #dff9e8;
  background: transparent;
  font-family: "Fira Code", "Consolas", "SFMono-Regular", monospace;
  font-size: 0.83rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.coding-output-muted {
  color: rgba(209, 250, 229, 0.72);
}

.coding-run-feedback {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b1220;
}

.tetris-game {
  --tetris-ink: #edf5ee;
  --tetris-muted: #9bb1a4;
  overflow: hidden;
  border: 1px solid #2c4038;
  border-radius: 8px;
  color: var(--tetris-ink);
  background: #17231f;
}

.tetris-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid #30443b;
  background: #1b2b25;
}

.tetris-header h3 {
  margin: 0;
  font-size: 1.15rem;
}

.tetris-mode {
  display: block;
  margin-top: 3px;
  color: var(--tetris-muted);
  font-size: 0.68rem;
}

.tetris-game-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.tetris-action-button,
.tetris-controls button {
  min-height: 38px;
  border: 1px solid #466052;
  border-radius: 5px;
  color: var(--tetris-ink);
  background: #293a32;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.tetris-action-button {
  padding: 0 12px;
}

.tetris-action-button:disabled {
  cursor: default;
  opacity: 0.55;
}

.tetris-action-button:not(:disabled):hover,
.tetris-controls button:hover {
  border-color: #8ec69e;
  background: #344a3e;
}

.tetris-layout {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(150px, 190px);
  justify-content: center;
  align-items: start;
  gap: 18px;
  padding: 18px;
}

.tetris-board-frame {
  width: min(100%, 300px);
  aspect-ratio: 1 / 2;
  border: 1px solid #52675d;
  border-radius: 4px;
  overflow: hidden;
  background: #101a20;
}

#tetris-board {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

#tetris-board:focus-visible {
  box-shadow: inset 0 0 0 2px #9ad6a8;
}

.tetris-sidebar {
  display: grid;
  gap: 12px;
}

.tetris-stats {
  display: grid;
  gap: 6px;
}

.tetris-stats > div,
.tetris-next-piece {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #34483e;
  border-radius: 5px;
  background: #202f28;
}

.tetris-stats span,
.tetris-next-piece > span {
  color: var(--tetris-muted);
  font-size: 0.76rem;
}

.tetris-stats strong {
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
}

.tetris-next-piece {
  display: grid;
  justify-content: stretch;
}

#tetris-next {
  display: block;
  width: min(100%, 120px);
  height: auto;
  margin: 0 auto;
}

.tetris-message {
  min-height: 1.4em;
  margin: 0;
  color: #f4c95d;
  font-size: 0.8rem;
}

.tetris-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(38px, 1fr));
  gap: 6px;
}

.tetris-controls button {
  min-width: 0;
  padding: 4px;
  font-size: 1rem;
}

.tetris-controls [data-tetris-action="drop"] {
  grid-column: 1 / -1;
  font-size: 0.78rem;
}

@media (max-width: 560px) {
  .tetris-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .tetris-game-actions {
    justify-content: flex-start;
  }

  .tetris-layout {
    grid-template-columns: minmax(0, 300px);
    justify-content: center;
    gap: 10px;
    padding: 12px;
  }

  .tetris-sidebar {
    width: min(100%, 300px);
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tetris-stats {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .tetris-controls {
    grid-column: 1 / -1;
  }
}

.chess-game {
  --chess-ink: #19332b;
  --chess-muted: #647970;
  --chess-border: #d4ded3;
  --chess-accent: #d66a43;
  overflow: hidden;
  border: 1px solid var(--chess-border);
  border-radius: 8px;
  color: var(--chess-ink);
  background: #fbfcf7;
  box-shadow: 0 14px 36px rgba(26, 57, 44, 0.09);
}

.chess-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--chess-border);
  background: #f0f5ec;
}

.chess-kicker,
.chess-header h3 {
  margin: 0;
}

.chess-kicker {
  color: var(--chess-accent);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.chess-header h3 {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
}

.chess-presence {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--chess-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.chess-presence::before,
.chess-online-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #5ba77d;
  content: "";
}

.chess-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  align-items: start;
  gap: 16px;
  padding: 22px;
}

.chess-play-area {
  display: grid;
  width: 100%;
  min-width: 0;
  justify-items: center;
  gap: 12px;
}

.chess-opponents {
  display: flex;
  width: 100%;
  min-height: 38px;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.chess-opponents:empty {
  min-height: 0;
}

.chess-opponent-button,
.chess-invite-action,
.chess-button {
  min-height: 38px;
  border: 1px solid #bfd0c3;
  border-radius: 5px;
  color: var(--chess-ink);
  background: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.chess-opponent-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
}

.chess-opponent-button:disabled,
.chess-button:disabled {
  cursor: default;
  opacity: 0.55;
}

.chess-opponent-button:not(:disabled):hover,
.chess-invite-action:hover,
.chess-button:not(:disabled):hover {
  border-color: #5b9475;
  background: #eef6ed;
}

.chess-board-frame {
  width: min(100%, 660px);
  aspect-ratio: 1;
  padding: 8px;
  border: 1px solid #315e50;
  border-radius: 7px;
  background: #244c41;
  box-shadow: 0 12px 24px rgba(24, 55, 45, 0.16);
}

.chess-board {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template: repeat(8, minmax(0, 1fr)) / repeat(8, minmax(0, 1fr));
  overflow: hidden;
  border-radius: 3px;
}

.chess-square {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  padding: 0;
  place-items: center;
  border: 0;
  color: #18332b;
  cursor: pointer;
}

.chess-square:focus-visible {
  z-index: 2;
  outline: 3px solid #d66a43;
  outline-offset: -3px;
}

.chess-square-light { background: #f0dfbd; }
.chess-square-dark { background: #67927b; }

.chess-square-last {
  box-shadow: inset 0 0 0 4px rgba(224, 157, 68, 0.68);
}

.chess-square-selected {
  box-shadow: inset 0 0 0 4px #de6f46;
}

.chess-square-legal::after {
  position: absolute;
  width: 23%;
  height: 23%;
  border-radius: 50%;
  background: rgba(25, 51, 43, 0.42);
  content: "";
}

.chess-square-legal.chess-square-capture::after {
  width: 78%;
  height: 78%;
  border: 4px solid rgba(214, 106, 67, 0.8);
  background: transparent;
}

.chess-piece {
  z-index: 1;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", serif;
  font-size: 2.55rem;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.14);
  user-select: none;
}

.chess-piece-white {
  color: #fffdf4;
  -webkit-text-stroke: 1px #334b3c;
  text-shadow: 0 2px 1px rgba(18, 43, 32, 0.5);
}

.chess-piece-black { color: #1b3029; }

.chess-coordinate {
  position: absolute;
  top: 3px;
  left: 4px;
  color: rgba(25, 51, 43, 0.68);
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
}

.chess-file-coordinate {
  top: auto;
  right: 4px;
  bottom: 3px;
  left: auto;
}

.chess-square-dark .chess-coordinate { color: rgba(255, 255, 255, 0.8); }

.chess-game-status {
  min-height: 1.5em;
  color: var(--chess-muted);
  font-size: 0.82rem;
  font-weight: 650;
  text-align: center;
}

.chess-sidebar {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.chess-match-panel {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--chess-border);
  border-radius: 6px;
  background: #f1f5ed;
}

.chess-panel-label {
  color: var(--chess-accent);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
}

.chess-match-panel strong {
  overflow-wrap: anywhere;
  font-size: 0.94rem;
}

.chess-match-panel > span:last-child {
  color: var(--chess-muted);
  font-size: 0.76rem;
}

.chess-clock-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.chess-clock-player {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--chess-border);
  border-radius: 5px;
  background: #f1f5ed;
}

.chess-clock-player span {
  color: var(--chess-muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.chess-clock-player strong {
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
}

.chess-clock-player.is-active {
  border-color: #548968;
  background: #e7f1e4;
}

.chess-incoming-list {
  display: grid;
  gap: 8px;
}

.chess-invite {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--chess-border);
  border-radius: 5px;
  background: #fff;
  font-size: 0.78rem;
}

.chess-invite-actions {
  display: flex;
  gap: 6px;
}

.chess-invite-action { min-height: 32px; padding: 0 9px; }
.chess-invite-accept { border-color: #548968; color: #fff; background: #376e55; }
.chess-invite-accept:hover { background: #285b44; }

.chess-move-list {
  display: grid;
  max-height: 300px;
  min-height: 64px;
  grid-auto-rows: min-content;
  gap: 0 12px;
  overflow-y: auto;
  margin: 0;
  padding: 8px 12px 8px 34px;
  border: 1px solid var(--chess-border);
  border-radius: 5px;
  background: #fff;
  color: var(--chess-ink);
  font-family: var(--font-display);
  font-size: 0.84rem;
}

.chess-move-list li { padding: 4px 2px; }
.chess-resign { color: #9c402c; }

.chess-public-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
  gap: 18px;
  padding: 0 22px 22px;
}

.chess-public-section { min-width: 0; }

.chess-public-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.chess-public-heading h4 {
  margin: 0;
  font-size: 0.9rem;
}

.chess-public-heading > span {
  color: var(--chess-muted);
  font-size: 0.7rem;
  text-align: right;
}

.chess-public-matches {
  display: grid;
  max-height: 188px;
  gap: 6px;
  overflow-y: auto;
}

.chess-watch-button {
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--chess-border);
  border-radius: 5px;
  color: var(--chess-ink);
  background: #fff;
  font: inherit;
  font-size: 0.76rem;
  text-align: left;
  cursor: pointer;
}

.chess-watch-button[aria-pressed="true"] {
  border-color: #548968;
  background: #eef6ed;
}

.chess-watch-button:disabled { cursor: default; opacity: 0.65; }
.chess-watch-button span:last-child { color: var(--chess-muted); white-space: nowrap; }

.chess-leaderboard-scroll { max-height: 188px; overflow: auto; }

.chess-leaderboard {
  width: 100%;
  border-collapse: collapse;
  color: var(--chess-ink);
  font-size: 0.76rem;
}

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

.chess-leaderboard th:not(:first-child),
.chess-leaderboard td:not(:first-child) { text-align: right; }
.chess-leaderboard th { color: var(--chess-muted); font-size: 0.67rem; }
.chess-leaderboard td:first-child { max-width: 180px; overflow-wrap: anywhere; }
.chess-leaderboard-empty { color: var(--chess-muted); text-align: center !important; }

@media (max-width: 760px) {
  .chess-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
  }

  .chess-sidebar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .chess-match-panel,
  .chess-incoming-list,
  .chess-resign { grid-column: 1 / -1; }

  .chess-public-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 14px 14px;
  }
}

@media (max-width: 420px) {
  .chess-header { align-items: flex-start; flex-direction: column; }
  .chess-layout { padding: 10px; }
  .chess-public-grid { padding: 0 10px 10px; }
  .chess-board-frame { padding: 5px; }
  .chess-piece { font-size: 1.85rem; }
  .chess-square-last,
  .chess-square-selected { box-shadow: inset 0 0 0 2px #de6f46; }
  .chess-square-last { box-shadow: inset 0 0 0 2px rgba(224, 157, 68, 0.75); }
  .chess-square-legal.chess-square-capture::after { border-width: 2px; }
}

.shared-programs-section {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.shared-programs-heading,
.shared-program-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.shared-programs-heading h3 {
  margin: 0;
  font-size: 1rem;
}

.shared-programs-heading > span,
.shared-program-header time {
  color: var(--muted);
  font-size: 0.78rem;
}

.shared-program-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.shared-program-header strong {
  overflow-wrap: anywhere;
  font-size: 0.88rem;
}

.shared-program-code {
  max-height: 240px;
  overflow: auto;
  margin: 10px 0 0;
  padding: 12px;
  border-radius: 6px;
  color: #e2f8e9;
  background: #101827;
  font-family: "Fira Code", "Consolas", "SFMono-Regular", monospace;
  font-size: 0.8rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.shared-programs-empty {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.comment-form select:focus,
.comment-form textarea:focus {
  border-color: var(--green);
  outline: 2px solid rgba(66, 107, 78, 0.15);
}

.comment-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

/* --- Pemicu pilih-pengguna: tombol kartu pengganti <select> --- */
.recipient-trigger {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
  background: var(--white);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.recipient-trigger:hover:not(:disabled) { border-color: var(--green); }

.recipient-trigger:disabled { cursor: wait; opacity: 0.7; }

.recipient-trigger-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipient-trigger-text small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipient-trigger-chevron {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--muted);
}

/* --- Modal pilih-pengguna: daftar beravatar + pencarian --- */
.recipient-picker {
  position: fixed;
  inset: 0;
  width: min(94vw, 480px);
  /* inset atas+bawah + height:auto = dialog meregang setinggi viewport lalu
     kepangkas max-height: berongga saat pengguna sedikit. fit-content
     mengunci tinggi ke konten; daftar dalam yang scroll bila panjang. */
  height: fit-content;
  max-height: 84vh;
  /* Dialog sendiri tidak boleh jadi scroller kedua: kalau konten
     kepangkas, yang scroll hanya daftar (di bawah). Tanpa ini judul +
     pencarian ikut terscroll keluar tampilan. */
  overflow: hidden;
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.recipient-picker[open] {
  display: flex;
  flex-direction: column;
}

.recipient-picker::backdrop { background: rgba(12, 18, 13, 0.6); }

.recipient-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
}

.recipient-picker-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
}

.recipient-picker-close {
  min-height: var(--tap-min);
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.recipient-picker-close:hover {
  border-color: var(--green);
  color: var(--green);
}

.recipient-picker-search { padding: 0 var(--space-4) var(--space-3); }

.recipient-picker-search input {
  width: 100%;
  min-height: var(--tap-min);
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
  background: var(--paper);
  font: inherit;
  font-size: 0.88rem;
}

.recipient-picker-list {
  display: grid;
  flex: 1 1 auto;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--space-4) var(--space-4);
  overscroll-behavior: contain;
}

.recipient-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.recipient-option:hover { background: rgba(66, 107, 78, 0.08); }

.recipient-option:has(input:checked) {
  border-color: var(--green);
  background: rgba(66, 107, 78, 0.12);
}

.recipient-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.recipient-option input:focus-visible + .avatar-initial,
.recipient-option input:focus-visible + .avatar-image {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.recipient-option-identity {
  min-width: 0;
  flex: 1;
}

.recipient-option-identity strong {
  display: block;
  overflow: hidden;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipient-option-identity span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipient-option-check {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--green);
  opacity: 0;
}

.recipient-option:has(input:checked) .recipient-option-check { opacity: 1; }

.recipient-picker-empty {
  margin: 0;
  padding: var(--space-4);
  color: var(--muted);
  font-size: 0.86rem;
  text-align: center;
}

.comment-form-footer > span { color: var(--muted); font-size: 0.78rem; }

.comment-submit {
  min-height: var(--tap-min);
  padding: 0 16px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: var(--green);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

.comment-submit:hover { background: var(--green-dark); }
.comment-submit:disabled { cursor: not-allowed; opacity: 0.55; }

@media (max-width: 520px) {
  .dashboard-header { min-height: 72px; padding: 0 20px; }
  .dashboard-admin-link { margin-right: 12px; }
  .dashboard-main { width: calc(100% - 40px); }
}

.domino-game {
  --chess-ink: #263b32;
  --chess-muted: #6c7970;
  --chess-border: #d9ded3;
  --chess-accent: #b2543b;
  background: #faf9f3;
}

.domino-table-layout {
  display: grid;
  grid-template-columns: minmax(46px, 0.7fr) minmax(0, 1.6fr) minmax(46px, 0.7fr);
  grid-template-rows: auto minmax(190px, auto) auto;
  align-items: center;
  justify-items: center;
  gap: 5px 8px;
  padding: 18px 20px 22px;
}

.domino-player {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 3px;
  text-align: center;
}

.domino-player.is-turn {
  position: relative;
  z-index: 1;
}

.domino-player.is-turn .domino-seat-number {
  outline: 2px solid #a6c3a7;
  outline-offset: 2px;
}

.domino-player.is-self > strong { color: #315d49; }

.domino-player-top { grid-column: 2; grid-row: 1; }
.domino-player-left { grid-column: 1; grid-row: 2; }
.domino-player-right { grid-column: 3; grid-row: 2; }
.domino-player-bottom { grid-column: 2; grid-row: 3; }

.domino-player strong {
  max-width: 100%;
  color: var(--chess-ink);
  font-size: 0.68rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.domino-player small {
  color: var(--chess-muted);
  font-size: 0.62rem;
  line-height: 1.2;
}

.domino-hand {
  display: flex;
  width: 100%;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.domino-hand-bone {
  width: 44px;
  height: 28px;
  flex: 0 0 44px;
  margin-left: -18px;
  border-radius: 4px;
}

.domino-hand-bone:first-child { margin-left: 0; }

.domino-player-bottom .domino-hand {
  justify-content: flex-start;
  gap: 6px;
  padding: 4px 2px 8px;
}

.domino-player-bottom .domino-hand-bone {
  width: 28px;
  height: 44px;
  flex-basis: 28px;
  margin: 0;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
}

.domino-player-bottom .domino-pips + .domino-pips {
  border-top: 1px solid #c9c9bd;
  border-left: 0;
}

button.domino-hand-bone {
  padding: 2px;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

button.domino-hand-bone:hover:not(:disabled) { transform: translateY(-4px); }
button.domino-hand-bone:disabled { cursor: default; }
button.domino-hand-bone.is-selected {
  position: relative;
  z-index: 2;
  outline: 2px solid #b2543b;
  outline-offset: 2px;
  transform: translateY(-6px);
}

.domino-hand-bone:focus-visible,
.domino-action:focus-visible,
.domino-result button:focus-visible {
  outline: 2px solid #b2543b;
  outline-offset: 3px;
}

.domino-card-back {
  display: block;
  padding: 0;
  border: 1px solid #ccd5c8;
  background-color: #edf0e7;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(69, 104, 80, 0.28) 0,
    rgba(69, 104, 80, 0.28) 1px,
    transparent 1px,
    transparent 5px
  );
}

.domino-player-left .domino-hand,
.domino-player-right .domino-hand {
  flex-direction: column;
  width: auto;
  margin-top: 0;
  overflow: visible;
}

.domino-player-left .domino-hand-bone,
.domino-player-right .domino-hand-bone {
  width: 20px;
  height: 28px;
  flex-basis: 30px;
  margin-top: -8px;
  margin-left: 0;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
}

.domino-player-left .domino-hand-bone:first-child,
.domino-player-right .domino-hand-bone:first-child { margin-top: 0; }

.domino-player-left .domino-pips + .domino-pips,
.domino-player-right .domino-pips + .domino-pips {
  border-top: 1px solid #c9c9bd;
  border-left: 0;
}

.domino-table-surface {
  display: flex;
  width: min(100%, 170px);
  min-width: 0;
  min-height: 190px;
  aspect-ratio: 0.8;
  grid-column: 2;
  grid-row: 2;
  align-items: stretch;
  flex-direction: column;
  gap: 8px;
  padding: 8px 7px;
  border: 5px solid #315d49;
  border-radius: 9px;
  background: #56856a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.domino-seat-number {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid #c5d1c4;
  border-radius: 50%;
  color: #315b48;
  background: #e9f0e7;
  font-size: 0.78rem;
  font-weight: 800;
}

.domino-player-left .domino-seat-number,
.domino-player-right .domino-seat-number {
  border-color: #e3c3b4;
  color: #904431;
  background: #f5e7df;
}

.domino-bone {
  display: grid;
  width: 54px;
  height: 34px;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  padding: 3px;
  border: 1px solid #d9d9cd;
  border-radius: 5px;
  color: #27362e;
  background: #fffef7;
  box-shadow: 0 2px 4px rgba(18, 40, 28, 0.2);
}

.domino-pips {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  place-items: center;
}

.domino-pips + .domino-pips {
  border-left: 1px solid #c9c9bd;
}

.domino-pip {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: transparent;
}

.domino-pip.is-visible { background: currentColor; }

.domino-chain-endpoints {
  display: flex;
  width: 100%;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.6rem;
  font-weight: 700;
}

.domino-chain-endpoints strong {
  display: inline-grid;
  min-width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 50%;
  color: #315d49;
  background: #fffef7;
  font-size: 0.66rem;
}

.domino-chain-scroll {
  display: flex;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
  scrollbar-width: thin;
}

.domino-chain {
  display: flex;
  width: max-content;
  min-width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}

.domino-chain-bone { flex: 0 0 48px; width: 48px; height: 30px; }
.domino-chain-bone + .domino-chain-bone { margin-left: -1px; }

.domino-game-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px 0;
}

.domino-game-info p {
  min-height: 1.4em;
  margin: 0;
  color: var(--chess-muted);
  font-size: 0.76rem;
}

.domino-game-info > span {
  flex: 0 0 auto;
  color: var(--chess-muted);
  font-size: 0.72rem;
}

.domino-game-info strong { color: var(--chess-ink); }

.domino-scheduled-list {
  display: grid;
  gap: 8px;
  margin: 12px 18px 0;
  padding: 12px;
  border: 1px solid #d9ded3;
  border-radius: 6px;
  background: #f1f4ec;
}

.domino-scheduled-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.domino-scheduled-heading h4 {
  margin: 0;
  color: var(--chess-ink);
  font-size: 0.82rem;
}

.domino-scheduled-heading > span {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #315d49;
  font-size: 0.7rem;
  font-weight: 700;
}

.domino-scheduled-matches { display: grid; gap: 7px; }

.domino-scheduled-match {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid #d9ded3;
  border-radius: 4px;
  background: #fffef7;
}

.domino-scheduled-match > div { display: grid; min-width: 0; gap: 3px; }
.domino-scheduled-match > div > span { color: var(--chess-muted); font-size: 0.64rem; font-weight: 700; }
.domino-scheduled-match strong { color: var(--chess-ink); font-size: 0.72rem; overflow-wrap: anywhere; }
.domino-scheduled-versus { color: #b2543b; font-size: 0.62rem; font-weight: 800; }
.domino-scheduled-footer { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 8px; }
.domino-scheduled-footer time { color: var(--chess-muted); font-size: 0.68rem; }
.domino-match-state { padding: 3px 7px; border-radius: 999px; color: #67551d; background: #f6eccb; font-size: 0.62rem; font-weight: 700; }
.domino-match-state.is-active { color: #fff; background: #315d49; }
.domino-scheduled-empty { margin: 0; color: var(--chess-muted); font-size: 0.74rem; }

.domino-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 20px 20px;
}

.domino-action {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #b9c8b9;
  border-radius: 5px;
  color: #315d49;
  background: #fff;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}

.domino-action:hover:not(:disabled) { background: #e9f0e7; }
.domino-action:disabled { cursor: not-allowed; opacity: 0.5; }
.domino-action.domino-pass { border-color: #e3c3b4; color: #904431; }

.domino-result {
  width: min(calc(100% - 32px), 380px);
  padding: 24px;
  border: 1px solid #d9ded3;
  border-radius: 8px;
  color: var(--chess-ink);
  background: #faf9f3;
  box-shadow: 0 18px 60px rgba(18, 40, 28, 0.24);
}

.domino-result::backdrop { background: rgba(15, 28, 21, 0.58); }
.domino-result h3 { margin: 4px 0 8px; font: 500 1.55rem var(--font-display); }
.domino-result p:not(.chess-kicker) { color: var(--chess-muted); font-size: 0.86rem; line-height: 1.5; }
.domino-result .domino-action { margin-top: 8px; color: #fff; background: #315d49; }

@keyframes domino-place {
  from { opacity: 0; transform: translateY(-10px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.domino-place-animation { animation: domino-place 220ms ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .domino-place-animation { animation: none; }
  button.domino-hand-bone { transition: none; }
}

@media (max-width: 560px) {
  .domino-table-layout {
    grid-template-columns: minmax(42px, 0.7fr) minmax(0, 1.6fr) minmax(42px, 0.7fr);
    gap: 5px;
    padding: 14px;
  }

  .domino-table-surface {
    width: min(100%, 145px);
    min-height: 165px;
    padding: 7px 5px;
    border-width: 4px;
  }

  .domino-bone {
    width: 50px;
    height: 32px;
  }

  .domino-game-info { align-items: flex-start; padding: 10px 14px 0; }
  .domino-game-info p { max-width: 68%; }
  .domino-scheduled-list { margin-inline: 14px; padding: 9px; }
  .domino-scheduled-match { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 5px; padding: 7px; }
  .domino-scheduled-match strong { font-size: 0.66rem; }
  .domino-controls { gap: 6px; padding: 0 14px 14px; }
  .domino-action { min-height: 36px; padding: 0 9px; font-size: 0.7rem; }

  .domino-player strong {
    font-size: 0.62rem;
  }

  .domino-player small {
    font-size: 0.57rem;
  }
}

@media (max-width: 520px) {
  .dashboard-account-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .dashboard-greeting { gap: 16px; margin-bottom: 40px; padding: 18px; }
  .dashboard-avatar { width: 68px; height: 68px; flex-basis: 68px; font-size: 1.65rem; }
  .account-summary dl { grid-template-columns: 1fr; }
}

.admin-main {
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  padding: 56px 0 80px;
}

.admin-login-main {
  width: min(calc(100% - 48px), 440px);
  margin: clamp(48px, 12vh, 120px) auto 72px;
}

.admin-login-main > .eyebrow { margin-bottom: 10px; color: var(--green); }

.admin-login-main h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.65rem);
  font-weight: 650;
  line-height: 1.15;
}

.admin-login-form {
  display: grid;
  gap: 19px;
  margin-top: 26px;
}

.admin-login-form label { display: grid; gap: 8px; }

.admin-login-form label span {
  font-size: 0.85rem;
  font-weight: 700;
}

.admin-login-form input {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  background: var(--white);
  font: inherit;
}

.admin-login-form input:focus {
  border-color: var(--green);
  outline: 2px solid rgba(66, 107, 78, 0.15);
}

.admin-login-form .admin-primary { min-height: 48px; margin-top: 4px; }

.admin-login-back {
  display: inline-block;
  margin-top: 22px;
  color: var(--green);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

.admin-login-back:hover { text-decoration: underline; }

.admin-main > .eyebrow { margin-bottom: 10px; color: var(--green); }

.admin-main h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600;
  line-height: 1.15;
}

.admin-intro { margin: 12px 0 32px; color: var(--muted); }

.admin-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  color: var(--muted);
  font-size: 0.85rem;
}

.admin-nav a {
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
}

.admin-nav a:hover { text-decoration: underline; }

.admin-message {
  margin: 0 0 28px;
  padding: 12px 14px;
  border-left: 3px solid var(--green);
  color: var(--green-dark);
  background: rgba(66, 107, 78, 0.08);
  font-size: 0.9rem;
}

.admin-message[data-state="error"] {
  border-color: #b34739;
  color: #92372d;
  background: rgba(179, 71, 57, 0.08);
}

.admin-create {
  padding: 24px 0 30px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.admin-create h2,
.admin-section-heading h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
}

.admin-create-form {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(210px, 1fr) auto;
  align-items: end;
  gap: 16px;
  margin-top: 20px;
}

.admin-create-form label { display: grid; gap: 7px; }

.admin-feature-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, 240px) auto;
  align-items: end;
  gap: 16px;
}

.admin-feature-form label {
  font-size: 0.82rem;
  font-weight: 700;
}

.admin-create-form label span {
  font-size: 0.82rem;
  font-weight: 700;
}

.admin-create-form input,
.admin-table-input {
  width: 100%;
  min-width: 0;
  min-height: var(--tap-min);
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--white);
  font: inherit;
  font-size: 0.84rem;
}

.admin-create-form input:focus,
.admin-table-input:focus {
  border-color: var(--green);
  outline: 2px solid rgba(66, 107, 78, 0.15);
}

.admin-photo-status-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
}

.admin-photo-status-form > label {
  width: 100%;
  margin-bottom: -6px;
  font-size: 0.82rem;
  font-weight: 700;
}

.admin-photo-status-control {
  display: flex;
  width: min(100%, 180px);
  align-items: center;
  gap: 10px;
}

.admin-photo-status-control > span { color: var(--muted); }

.admin-photo-status-form .admin-primary { min-width: 140px; }

.admin-primary,
.admin-save,
.admin-delete {
  min-height: var(--tap-min);
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.admin-primary,
.admin-save {
  color: #fff;
  background: var(--green);
}

.admin-primary:hover,
.admin-save:hover { background: var(--green-dark); }

.admin-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 30px 0 14px;
}

.admin-section-heading > span { color: var(--muted); font-size: 0.82rem; }

.admin-user-search {
  display: grid;
  width: min(100%, 460px);
  gap: 7px;
  margin: 0 0 14px;
}

.admin-user-search span {
  font-size: 0.82rem;
  font-weight: 700;
}

.admin-user-search input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  background: var(--white);
  font: inherit;
  font-size: 0.86rem;
}

.admin-user-search input:focus {
  border-color: var(--green);
  outline: 2px solid rgba(66, 107, 78, 0.15);
}

.admin-table-scroll { overflow-x: auto; }

.admin-table {
  width: 100%;
  min-width: 1580px;
  border-collapse: collapse;
  text-align: left;
}

.admin-photo-cell { width: 64px; }
.admin-phone-cell { min-width: 130px; white-space: nowrap; }
.admin-full-name { min-width: 150px; overflow-wrap: anywhere; }
.admin-email-cell { min-width: 260px; }
.admin-role-cell { min-width: 150px; }
.admin-comment-permission-cell { min-width: 190px; }
.admin-photo-status-limit-cell { min-width: 190px; }
.admin-new-password-cell { min-width: 240px; }

.admin-user-photo,
.admin-user-photo-empty {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  background: #eef0e9;
  object-fit: cover;
  font-size: 0.82rem;
}

.admin-table th,
.admin-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.admin-table th {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.admin-role-cell,
.admin-comment-permission-cell { white-space: nowrap; }

.admin-row-actions { display: flex; gap: 7px; }

.admin-delete {
  border-color: #e5c9c5;
  color: #a33d32;
  background: #fffafa;
}

.admin-delete:hover { background: #f8e8e5; }

.admin-date,
.admin-empty { color: var(--muted); font-size: 0.82rem; }

.admin-empty { padding: 24px 10px !important; text-align: center; }

/* .admin-comments kini memakai kartu .comments-section, jadi garis pemisah
   dan margin lama hanya akan menggigit tepi kartu. */
.admin-comments { margin-top: 0; }

.admin-comments-table { min-width: 980px; }

.admin-comments-table td.admin-comment-body {
  width: 46%;
  min-width: 360px;
  text-align: left;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

@media (max-width: 760px) {
  .admin-main { width: calc(100% - 40px); padding-top: 38px; }
  .admin-create-form { grid-template-columns: 1fr; }
  .admin-feature-form { grid-template-columns: 1fr; }
  .admin-primary { justify-self: start; }
  .admin-nav { gap: 12px; }
  .admin-nav span { display: none; }
}

/* =================================================================
   REDESIGN: kedalaman, hierarki, dan target sentuh
   Diappend sebagai lapisan override supaya aturan asli tetap utuh
   dan mudah dilacak balik bila ada regresi.
   ================================================================= */

/* --- Kontrol: semua target sentuh minimal 44x44 (WCAG 2.5.5) --- */
.toggle-password {
  display: inline-flex;
  min-height: var(--tap-min);
  align-items: center;
  padding: 0 8px;
}

.form-options a,
.signup a {
  display: inline-flex;
  min-height: var(--tap-min);
  align-items: center;
  padding: 0 4px;
}

.remember {
  min-height: var(--tap-min);
}

.admin-login-back,
.admin-nav a {
  display: inline-flex;
  min-height: var(--tap-min);
  align-items: center;
}

.dashboard-admin-link {
  display: inline-flex;
  min-height: var(--tap-min);
  align-items: center;
  padding: 0 6px;
}

.dashboard-logout {
  min-height: var(--tap-min);
  padding: 0 18px;
  border-radius: var(--radius-full);
}

/* Brand di header adalah target sentuh, jadi tinggi minimal 44px */
.brand {
  min-height: var(--tap-min);
}

/* --- Permukaan: kartu bertingkat, bukan garis pemisah tipis --- */
.dashboard-main {
  padding-block: clamp(32px, 6vh, 56px) var(--space-8);
}

.dashboard-greeting {
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border-left: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #eaf2e7 0%, #ddeade 100%);
  box-shadow: var(--shadow-sm);
}

.dashboard-avatar {
  width: 76px;
  height: 76px;
  flex-basis: 76px;
  border-width: 3px;
  box-shadow: var(--shadow-md);
  font-size: 1.75rem;
}

.dashboard-main h1 {
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  letter-spacing: -0.02em;
}

.dashboard-intro {
  margin-top: 6px;
  font-size: 0.92rem;
}

.dashboard-account-layout {
  gap: var(--space-5);
  align-items: stretch;
}

/* Semua blok utama jadi kartu agar hierarki terasa dan mudah dipindai. */
.account-summary,
.photo-status-compose,
.photo-status-feed-section,
.profile-photo-section,
.comments-section,
.comment-compose {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.dashboard-account-layout > .account-summary,
.dashboard-account-layout > .photo-status-compose {
  margin-top: 0;
}

/* Judul bagian: lebih tegas dan punya-rules */
.comments-heading,
.admin-section-heading {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.comments-heading h2,
.comment-compose h2,
.photo-status-feed-section h2,
.photo-status-compose h2,
.account-summary h2,
.profile-photo-content h2,
.admin-create h2,
.admin-section-heading h2 {
  font-size: 1.16rem;
  letter-spacing: -0.01em;
}

.eyebrow {
  letter-spacing: 0.14em;
}

/* Kartu ringkasan akun: isi jadi tiga kartu kecil, bukan daftar longgar */
.account-summary dl {
  gap: var(--space-3);
}

.account-summary dl > div {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #f8f9f4;
}

.account-summary dt {
  margin-bottom: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.account-summary dd {
  font-size: 0.95rem;
}

/* Komentar: kartu terpisah, bukan garis tipis bertumpuk */
.received-comment {
  margin-bottom: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #f8f9f4;
}

.received-comment:last-child {
  margin-bottom: 0;
}

.received-comment-header strong {
  display: inline-flex;
  align-items: center;
  font-size: 0.86rem;
}

.received-comment-header time {
  font-size: 0.76rem;
}

.received-comment > p {
  font-size: 0.9rem;
  line-height: 1.7;
}

/* Status foto: grid rapat dengan tinggi seragam */
.photo-status-feed {
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.photo-status-item {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.photo-status-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.photo-status-details {
  padding: 10px var(--space-3);
}

.photo-status-details strong {
  font-size: 0.8rem;
}

/* Kosong: diberi bentuk, bukan teks telanjang */
.comments-empty {
  display: grid;
  min-height: 96px;
  place-items: center;
  padding: var(--space-5);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  color: var(--muted);
  background: #f8f9f4;
  font-size: 0.9rem;
  text-align: center;
}

/* Form: kontrol lebih tinggi dan fokus lebih jelas */
.comment-form select,
.comment-form textarea,
.admin-login-form input,
.admin-user-search input {
  min-height: var(--tap-min);
  border-radius: var(--radius-sm);
}

.comment-form textarea {
  min-height: 128px;
  padding: var(--space-3);
}

.comment-submit,
.admin-primary,
.admin-save,
.admin-delete {
  min-height: var(--tap-min);
  padding: 0 18px;
  border-radius: var(--radius-sm);
}

.profile-photo-input-label,
.profile-photo-remove {
  min-height: var(--tap-min);
  padding: 0 18px;
  border-radius: var(--radius-sm);
}

.profile-photo-preview {
  box-shadow: var(--shadow-sm);
}

/* Fokus keyboard: satu gaya, jelas di mana pun */
:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Header dashboard */
.dashboard-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 72px;
  box-shadow: var(--shadow-sm);
}

@media (max-width: 520px) {
  .account-summary,
  .photo-status-compose,
  .photo-status-feed-section,
  .profile-photo-section,
  .comments-section,
  .comment-compose {
    padding: var(--space-4);
  }

  .dashboard-greeting {
    padding: var(--space-4);
  }
}

/* =================================================================
   TABEL ADMIN DI LAYAR SEMPIT
   Tabel pengguna punya 10 kolom dan membutuhkan 1624px. Di HP 375px
   itu berarti scroll horizontal 4,3x hanya untuk menjangkau tombol
   Hapus. Di bawah 820px tabel diubah menjadi kartu: setiap <tr>
   jadi satu kartu, label kolom diambil dari atribut data-label.
   ================================================================= */
@media (max-width: 820px) {
  .admin-table-scroll {
    overflow-x: visible;
  }

  /* Di mode kartu, tabel tidak lagi jadi area scroll tinggi: batas tinggi
     dan header lengket hanya relevan di tata letak tabel. */
  .admin-users .admin-table-scroll {
    max-height: none;
    overflow-y: visible;
    border: 0;
    border-radius: 0;
  }

  .admin-table thead th {
    position: static;
  }

  .admin-table {
    min-width: 0;
    display: block;
  }

  .admin-table thead {
    /* Kolom tidak lagi bermakna sebagai header tabel; jadi disembunyikan
       secara visual, bukan dihapus dari DOM, tetap terbaca screen reader
       lewat data-label tiap sel. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .admin-table tbody,
  .admin-table tr,
  .admin-table td {
    display: block;
    width: auto;
    min-width: 0;
  }

  .admin-table tr {
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-sm);
  }

  .admin-table td {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    padding: 6px 0;
    border-bottom: 0;
  }

  .admin-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* Foto jadi baris identitas di atas kartu */
  .admin-photo-cell {
    justify-items: start;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line);
  }

  .admin-photo-cell::before {
    justify-self: start;
  }

  .admin-user-photo,
  .admin-user-photo-empty {
    width: 56px;
    height: 56px;
  }

  /* Aksi jadi tombol penuh lebar di bawah kartu */
  .admin-table tr > td:last-child {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
  }

  .admin-table tr > td:last-child::before {
    display: none;
  }

  .admin-row-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }

  .admin-row-actions .admin-save,
  .admin-row-actions .admin-delete {
    min-height: var(--tap-min);
  }

  .admin-empty,
  #admin-user-no-results td {
    grid-template-columns: 1fr;
  }

  /* Tabel komentar juga menumpuk */
  .admin-comments-table td.admin-comment-body {
    width: auto;
    min-width: 0;
  }
}

/* =================================================================
   KOMPONEN SOSIAL: avatar, cincin status, kartu feed
   ================================================================= */

/* --- Avatar: foto bila ada, inisial bila tidak --- */
.avatar-initial,
.avatar-image {
  --avatar-size: 40px;
  width: var(--avatar-size);
  height: var(--avatar-size);
  flex: 0 0 var(--avatar-size);
  border-radius: 50%;
}

/* Ukuran avatar lewat atribut data, bukan gaya inline: el.style.* diblokir
   CSP style-src dan memunculkan error konsol di setiap render feed. */
[data-avatar-size="38px"] { --avatar-size: 38px; }
[data-avatar-size="44px"] { --avatar-size: 44px; }

.avatar-image {
  object-fit: cover;
  background: #e5ece4;
}

.avatar-initial {
  display: grid;
  place-items: center;
  color: #f8f7ed;
  background: linear-gradient(140deg, #4d7a5a, #2c4a35);
  font-family: var(--font-display);
  font-size: calc(var(--avatar-size) * 0.42);
  font-weight: 700;
  line-height: 1;
}

/* --- Cincin progres 10 menit --- */
/* Cincin progres duduk di header kartu, bukan di atas foto, supaya tidak
   menutupi subjek gambar. Label sisa waktu tetap di sebelahnya sebagai teks. */
.status-ring-wrap {
  display: grid;
  flex: none;
  place-items: center;
  margin-left: auto;
}

.status-ring {
  grid-area: 1 / 1;
  width: 30px;
  height: 30px;
  transform: rotate(-90deg);
}

.ring-track,
.ring-progress {
  fill: none;
  stroke-width: 3.5;
}

.ring-track {
  stroke: rgba(44, 69, 52, 0.18);
}

.ring-progress {
  stroke: var(--green);
  stroke-linecap: round;
  transition: stroke-dashoffset 900ms linear;
}

/* --- Kartu status --- */
.photo-status-feed {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.status-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.status-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.status-card[data-expired="true"] {
  opacity: 0.55;
  filter: grayscale(1);
}

.status-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.status-card-identity {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 1px;
}

.status-sender {
  overflow: hidden;
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-time {
  color: var(--muted);
  font-size: 0.74rem;
}

.status-media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #eef0e9;
  cursor: zoom-in;
}

.status-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.status-media:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: -3px;
}

.status-caption {
  margin: 0;
  padding: 8px 16px 12px;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.6;
  text-align: center;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.status-card-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 12px 12px;
}

.status-like {
  position: relative;
  overflow: visible;
  display: inline-flex;
  min-width: 48px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--white);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.status-like svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.status-like:hover,
.status-like[aria-pressed="true"] {
  border-color: #d98a96;
  color: #a73548;
  background: #fff4f5;
}

.status-like[aria-pressed="true"] svg { fill: currentColor; }
.status-like:disabled { cursor: wait; opacity: 0.65; }
.status-like:focus-visible { outline: 3px solid rgba(167, 53, 72, 0.25); outline-offset: 2px; }

.status-like-sparkle {
  position: absolute;
  z-index: 1;
  color: #d9a72e;
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
  animation: status-like-sparkle 650ms ease-out both;
}

.status-like-sparkle-top-left { top: -5px; left: 3px; --sparkle-x: -8px; --sparkle-y: -13px; }
.status-like-sparkle-top-right { top: -7px; right: 4px; --sparkle-x: 8px; --sparkle-y: -14px; }
.status-like-sparkle-bottom-left { bottom: 0; left: 10px; --sparkle-x: -10px; --sparkle-y: 11px; }
.status-like-sparkle-bottom-right { right: 10px; bottom: -2px; --sparkle-x: 10px; --sparkle-y: 12px; }

@keyframes status-like-sparkle {
  0% { opacity: 0; transform: translate(0, 2px) scale(0.25) rotate(0deg); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--sparkle-x), var(--sparkle-y)) scale(1.15) rotate(35deg); }
}

/* --- Komentar masuk: avatar di samping --- */
.received-comment-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.received-comment-identity {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

@media (max-width: 520px) {
  .received-comment-identity {
    display: grid;
    gap: 1px;
  }
}

/* Dashboard satu kolom dengan navigasi atas. */

.dashboard-layout { min-height: 100vh; }

.dashboard-topbar {
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.dashboard-topbar-inner {
  display: flex;
  width: min(100% - 48px, 1120px);
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-inline: auto;
}

.dashboard-topbar .brand { flex: 0 0 auto; color: var(--green); }

.dashboard-nav {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.dashboard-nav-link {
  position: relative;
  display: inline-flex;
  min-height: var(--tap-min);
  align-items: center;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.dashboard-nav-link:hover,
.dashboard-nav-link.is-current {
  color: var(--green);
  background: rgba(66, 107, 78, 0.08);
}

.dashboard-nav-link .rail-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  font-size: 0.62rem;
}

.dashboard-account {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.dashboard-account-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: #f8f7ed;
  background: linear-gradient(140deg, #4d7a5a, #2c4a35);
  font-family: var(--font-display);
  font-weight: 700;
}

.dashboard-account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dashboard-account-identity {
  display: grid;
  min-width: 0;
  max-width: 150px;
  gap: 1px;
}

.dashboard-account-identity strong,
.dashboard-account-identity span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-account-identity strong { font-size: 0.78rem; }
.dashboard-account-identity span { color: var(--muted); font-size: 0.68rem; }

.dashboard-signout {
  display: inline-flex;
  min-height: var(--tap-min);
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.dashboard-signout:hover { border-color: var(--green); color: var(--green); }
.dashboard-signout .rail-logout-icon { display: block; width: 17px; height: 17px; }

.dashboard-main {
  width: min(100% - 48px, 960px);
  margin: 0 auto;
  padding: 40px 0 64px;
}

.dashboard-main .column-header { padding: 0; }

.dashboard-main .dashboard-welcome {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: 8px;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}

.dashboard-welcome-copy { min-width: 0; }

.dashboard-main .dashboard-welcome .eyebrow {
  margin-bottom: var(--space-2);
  color: var(--green);
}

.dashboard-main .dashboard-welcome h1 { font-size: 2.6rem; }

.dashboard-welcome-note {
  margin: var(--space-2) 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.dashboard-status-summary {
  min-width: 190px;
  padding-left: var(--space-5);
  border-left: 2px solid var(--green);
}

.dashboard-status-summary > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.dashboard-status-summary p {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 4px 0 0;
}

.dashboard-status-summary strong {
  color: var(--green);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
}

.dashboard-status-summary p span {
  color: var(--muted);
  font-size: 0.78rem;
}

.dashboard-tools {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: var(--space-5);
}

.dashboard-tools > * { min-width: 0; }
.profile-area { display: grid; min-width: 0; gap: var(--space-2); align-content: start; }
.dashboard-section-toggle {
  display: inline-flex;
  width: fit-content;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--white);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.dashboard-section-toggle:hover {
  border-color: var(--green);
  color: var(--green-dark);
}
.dashboard-section-toggle:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.dashboard-section-toggle svg { width: 18px; height: 18px; flex: 0 0 auto; }
.latest-status-area {
  display: grid;
  width: 100%;
  gap: var(--space-2);
}
#latest-status-section { min-height: 440px; }
.compose-stack { display: grid; min-width: 0; gap: var(--space-5); }
.dashboard-category-actions {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.dashboard-category-actions a,
.dashboard-category-actions button {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
  background: var(--white);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.dashboard-category-actions a { text-decoration: none; }
.dashboard-category-actions a:hover,
.dashboard-category-actions button:hover,
.dashboard-category-actions button[aria-pressed="true"] {
  border-color: var(--green);
  color: #ffffff;
  background: var(--green);
}
.dashboard-category-actions a:focus-visible,
.dashboard-category-actions button:focus-visible {
  outline: 3px solid rgba(66, 107, 78, 0.25);
  outline-offset: 2px;
}
.group-page {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--space-5);
  min-height: 100vh;
  padding: var(--space-6);
}
.group-page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.1;
}
.group-box-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  grid-auto-rows: minmax(180px, 1fr);
  align-content: stretch;
  gap: var(--space-4);
}
.group-box {
  min-height: 180px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.dashboard-tools .profile-card { text-align: left; }
.dashboard-tools .profile-card .profile-photo-preview { margin-left: 0; }

.theme-select-wrap { display: inline-flex; min-width: 0; }

.theme-select {
  width: 112px;
  min-height: 40px;
  padding: 0 26px 0 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background-color: var(--white);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}

.theme-select:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.back-to-top {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 90;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #fffefa;
  background: var(--green-dark);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.back-to-top svg { width: 22px; height: 22px; }

.back-to-top:hover {
  transform: translateY(-2px);
  background: var(--green);
  box-shadow: var(--shadow-lg);
}

.back-to-top:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

@media (max-width: 620px) {
  .back-to-top {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 760px) {
  .messages-layout { grid-template-columns: minmax(0, 1fr); }
  .dashboard-tools { grid-template-columns: minmax(0, 1fr); }
  .dashboard-tools > .profile-area { order: 1; }
  .dashboard-tools > .compose-stack { order: 2; }
}

@media (max-width: 1050px) {
  .dashboard-topbar-inner {
    flex-wrap: wrap;
    gap: 8px 16px;
    padding-block: 10px;
  }

  .dashboard-nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
    overflow-x: auto;
  }
}

@media (max-width: 620px) {
  .dashboard-topbar-inner,
  .dashboard-main { width: min(100% - 24px, 960px); }

  .dashboard-account-identity { display: none; }

  .dashboard-account { gap: 2px; }

  .dashboard-account .theme-select { width: 96px; }

  .dashboard-nav-link { padding-inline: 8px; font-size: 0.76rem; }

  .dashboard-main { padding-block: 28px 48px; }

  .dashboard-main .dashboard-welcome {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-4);
  }

  .dashboard-main .dashboard-welcome h1 { font-size: 2rem; }

  .dashboard-status-summary {
    min-width: 0;
    padding: var(--space-3) 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

}

.shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr) 320px;
  gap: var(--space-6);
  width: min(100% - 2 * var(--space-6), 1440px);
  margin-inline: auto;
  padding-block: var(--space-6) var(--space-8);
  align-items: start;
}

.rail-inner,
.sidebar {
  position: sticky;
  top: var(--space-6);
  display: grid;
  gap: var(--space-4);
}

/* --- Rail kiri --- */
.rail-nav {
  display: grid;
  gap: 2px;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.rail-link {
  display: flex;
  min-height: var(--tap-min);
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}

.rail-link:hover {
  background: rgba(66, 107, 78, 0.08);
  color: var(--green);
}

.rail-link.is-current {
  color: var(--green);
  background: rgba(66, 107, 78, 0.1);
}

/* Label rail punya versi panjang (desktop) dan versi pendek (mobile).
   Yang tersembunyi dengan display:none tidak ikut terbaca screen reader,
   jadi hanya satu nama yang diumumkan. */
.rail-link-label .label-short { display: none; }

.rail-badge {
  display: grid;
  min-width: 22px;
  height: 22px;
  margin-left: auto;
  padding-inline: 6px;
  place-items: center;
  border-radius: var(--radius-full);
  color: #fff;
  background: var(--green);
  font-size: 0.7rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.rail-user {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

/* Avatar, nama, dan tombol tema berbagi baris pertama; tombol "Keluar"
   melebar penuh di baris kedua. Penempatan eksplisit dipakai supaya urutan
   visual tidak bergantung pada urutan DOM. */
.rail-user-avatar { grid-area: 1 / 1; }
.rail-user-identity { grid-area: 1 / 2; }
.rail-theme { grid-area: 1 / 3; }

.rail-user-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: #f8f7ed;
  background: linear-gradient(140deg, #4d7a5a, #2c4a35);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
}

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

.rail-user-identity {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.rail-user-identity strong {
  overflow: hidden;
  font-size: 0.85rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-user-identity span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-logout {
  grid-column: 1 / -1;
  min-height: var(--tap-min);
  margin-top: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.rail-logout:hover {
  border-color: var(--green);
  color: var(--green);
}

/* Di desktop tombol keluar berupa teks; di layar sempit berubah jadi ikon
   supaya tetap muat di chip rail tanpa memotong target sentuh 44px.
   Aturan dasar WAJIB di sini (sebelum media query): versi lama menaruhnya
   di akhir file sehingga menimpa display:block dari breakpoint dan ikon
   hilang di mobile. */
.rail-logout-icon {
  display: none;
  width: 20px;
  height: 20px;
}

/* --- Kolom tengah --- */
.feed-column {
  display: grid;
  min-width: 0;
  gap: var(--space-5);
}

.column-header {
  padding-inline: var(--space-2);
}

/* Eyebrow global berwarna krem untuk hero gelap; di shell terang ia harus
   memakai hijau, kalau tidak kontrasnya 1.24:1. */
.column-header .eyebrow {
  margin-bottom: var(--space-2);
  color: var(--green);
}

.column-header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.accent {
  color: var(--green);
  font-style: italic;
}

.composer,
.feed-section,
.experience-card,
.daily-tasks-card,
.comments-section,
.profile-card,
.compose-card {
  /* min-width default item grid adalah auto, jadi tabel admin yang lebar bisa
     mendorong kolom tengah keluar dari viewport. Nolkan agar scroll-x-nya
     ditangani oleh .admin-table-scroll, bukan oleh halaman. */
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.composer {
  --composer-surface: var(--white);
  --composer-surface-alt: #f4f5ef;
  --composer-text: var(--ink);
  --composer-muted: var(--muted);
  --composer-border: var(--line);
  --composer-button-bg: var(--green);
  --composer-button-text: #fff;
}

.composer[data-moment-theme="dark"] {
  --composer-surface: #181f1b;
  --composer-surface-alt: #202a25;
  --composer-text: #edf6ee;
  --composer-muted: rgba(237, 246, 238, 0.76);
  --composer-border: rgba(206, 220, 206, 0.2);
  --composer-button-bg: #dff4d5;
  --composer-button-text: #122018;
  background: var(--composer-surface);
  border-color: var(--composer-border);
  color: var(--composer-text);
  box-shadow: 0 12px 32px rgba(9, 12, 10, 0.28);
}

.composer[data-moment-theme="dark"] .composer-head,
.composer[data-moment-theme="dark"] .composer-head-copy,
.composer[data-moment-theme="dark"] .photo-status-form,
.composer[data-moment-theme="dark"] .profile-photo-filename,
.composer[data-moment-theme="dark"] .photo-status-caption,
.composer[data-moment-theme="dark"] .comment-submit,
.composer[data-moment-theme="dark"] .profile-photo-input-label {
  color: var(--composer-text);
}

.composer[data-moment-theme="dark"] .composer-hint,
.composer[data-moment-theme="dark"] .profile-photo-filename,
.composer[data-moment-theme="dark"] .comment-form-footer > span {
  color: var(--composer-muted);
}

.composer[data-moment-theme="dark"] .photo-status-caption {
  background: var(--composer-surface-alt);
  border-color: var(--composer-border);
  color: var(--composer-text);
}

.composer[data-moment-theme="dark"] .photo-status-caption::placeholder {
  color: var(--composer-muted);
}

.composer[data-moment-theme="dark"] .profile-photo-input-label,
.composer[data-moment-theme="dark"] .comment-submit {
  background: var(--composer-button-bg);
  color: var(--composer-button-text);
}

.composer[data-moment-theme="dark"] .profile-photo-input-label:hover,
.composer[data-moment-theme="dark"] .comment-submit:hover {
  background: #cceec0;
}

.composer[data-moment-theme="dark"] .photo-status-preview {
  background: var(--composer-surface-alt);
  border-color: var(--composer-border);
}

.composer[data-moment-theme="dark"] .photo-status-image-button {
  background: var(--composer-surface-alt);
}

.composer[data-moment-theme="dark"] .profile-photo-input-label svg,
.composer[data-moment-theme="dark"] .theme-toggle {
  color: inherit;
}

.composer-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.composer-head-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.composer-avatar {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: #f8f7ed;
  background: linear-gradient(140deg, #4d7a5a, #2c4a35);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
}

.composer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.composer-head strong {
  display: block;
  margin-bottom: 3px;
  font-size: 0.98rem;
}

.composer-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.55;
}

.composer-theme-toggle {
  flex: 0 0 auto;
  margin-left: auto;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.daily-tasks-heading { align-items: center; }
.daily-tasks-heading time { color: var(--muted); font-size: 0.82rem; }
.daily-tasks-progress-row { display: grid; gap: 7px; margin-bottom: var(--space-4); }
.daily-tasks-progress-row > span { color: var(--muted); font-size: 0.8rem; }
.daily-tasks-progress-row progress { width: 100%; height: 8px; accent-color: var(--green); }
.daily-task-form { display: flex; gap: var(--space-2); }
.daily-task-form input {
  min-width: 0;
  min-height: var(--tap-min);
  flex: 1 1 auto;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--white);
  font: inherit;
}
.daily-task-form input:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.daily-task-add {
  display: grid;
  width: 46px;
  min-height: var(--tap-min);
  flex: 0 0 46px;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--green);
  cursor: pointer;
}
.daily-task-add:hover:not(:disabled) { background: var(--green-dark); }
.daily-task-add:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.daily-task-add:disabled { cursor: wait; opacity: 0.65; }
.daily-task-add svg { width: 20px; height: 20px; }
.daily-task-empty { margin: var(--space-4) 0 0; color: var(--muted); font-size: 0.88rem; }
.daily-task-list { display: grid; gap: 6px; margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.daily-task-item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
  padding: 9px 10px;
  border-radius: var(--radius-sm);
}
.daily-task-item:nth-child(5n + 1) { background: #e8f1e4; }
.daily-task-item:nth-child(5n + 2) { background: #e5edf7; }
.daily-task-item:nth-child(5n + 3) { background: #fff0d9; }
.daily-task-item:nth-child(5n + 4) { background: #f7e4df; }
.daily-task-item:nth-child(5n) { background: #e9e7f1; }
.daily-task-item label { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: var(--space-3); cursor: pointer; }
.daily-task-item input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--green); }
.daily-task-item label span { overflow-wrap: anywhere; font-size: 0.9rem; }
.daily-task-item[data-done="true"] label span { color: var(--muted); text-decoration: line-through; }
.daily-task-delete {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}
.daily-task-delete:hover:not(:disabled) { border-color: var(--line); color: #a33d32; }
.daily-task-delete:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.daily-task-delete:disabled { cursor: wait; opacity: 0.65; }
.daily-task-delete svg { width: 18px; height: 18px; }
.experience-heading { align-items: center; }
.experience-heading .eyebrow { margin: 0 0 4px; color: var(--green); font-size: 0.72rem; }
.experience-title-mark {
  display: inline-grid;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  place-items: center;
  vertical-align: -0.2em;
  border-radius: 8px;
  color: var(--white);
  background: linear-gradient(140deg, var(--orange-bright), var(--orange));
  box-shadow: var(--shadow-sm);
}
.experience-title-mark svg { width: 19px; height: 19px; }
.message-title-mark {
  display: inline-grid;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  place-items: center;
  vertical-align: -0.2em;
  border-radius: 8px;
  color: var(--white);
  background: linear-gradient(140deg, var(--green), var(--green-dark));
  box-shadow: var(--shadow-sm);
}
.message-title-mark svg { width: 19px; height: 19px; }
.experience-form textarea {
  display: block;
  width: 100%;
  min-height: 110px;
  resize: vertical;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--white);
  font: inherit;
  line-height: 1.55;
}
.experience-form textarea:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.experience-form-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }
.experience-form-footer > span { color: var(--muted); font-size: 0.78rem; }
.experience-empty { margin: var(--space-4) 0 0; color: var(--muted); font-size: 0.88rem; }
.experience-posts { display: grid; margin-top: var(--space-3); }
.experience-post { min-width: 0; padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.experience-post-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.experience-post-identity { display: flex; min-width: 0; align-items: center; gap: var(--space-3); }
.experience-post-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  font-family: var(--font-display);
  font-size: 1.1rem;
}
.experience-post-details { display: grid; min-width: 0; gap: 2px; }
.experience-post-details strong {
  overflow: hidden;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.experience-post-details time { color: var(--muted); font-size: 0.76rem; line-height: 1.4; }
.experience-post-body {
  position: relative;
  max-width: 66ch;
  margin: var(--space-3) var(--space-3) 0 calc(38px + var(--space-3));
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.8;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  text-wrap: pretty;
}
.experience-post-body::before {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: -10px;
  width: 3px;
  border-radius: 2px;
  background: var(--green);
  content: "";
}
.experience-post-delete {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}
.experience-post-delete:hover:not(:disabled) { border-color: var(--line); color: #a33d32; }
.experience-post-delete:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.experience-post-delete:disabled { cursor: wait; opacity: 0.65; }
.experience-post-delete svg { width: 18px; height: 18px; }

.section-head h2,
.experience-card h2,
.daily-tasks-card h2,
.profile-card h2,
.compose-card h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* --- Sidebar kanan --- */
.profile-card {
  text-align: center;
}

.profile-card h2 {
  margin-bottom: var(--space-3);
}

.profile-card .profile-photo-preview {
  width: 92px;
  height: 92px;
  margin: 0 auto var(--space-3);
  border: 2px solid #d9c6a4;
  box-shadow: 0 0 0 4px rgba(217, 198, 164, 0.22), var(--shadow-md);
  font-size: 2rem;
}

.profile-meta {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  text-align: left;
}

.profile-meta > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.profile-meta > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.profile-meta dt {
  flex: none;
  color: var(--muted);
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-meta dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quota {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: #f8f9f4;
  text-align: left;
}

.quota-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: 0.78rem;
}

.quota-row span {
  color: var(--muted);
}

.quota-bar {
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: #dfe0d7;
  box-shadow: inset 0 1px 2px rgba(34, 40, 32, 0.12);
}

.quota-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green-dark), var(--green));
  transition: width 240ms ease;
}

/* Lebar kuota hanya punya 4 nilai mungkin (sisa 0-3 dari 3), jadi dipetakan
   lewat atribut data, bukan style="width" yang melanggar CSP style-src. */
.quota-bar span[data-pct="0"] { width: 0; }
.quota-bar span[data-pct="33"] { width: 33%; }
.quota-bar span[data-pct="67"] { width: 67%; }
.quota-bar span[data-pct="100"] { width: 100%; }

.profile-photo-form {
  display: grid;
  justify-items: stretch;
  gap: var(--space-2);
}

.profile-photo-form .photo-picker {
  display: grid;
}

.profile-photo-form .profile-photo-input-label {
  width: 100%;
  justify-content: center;
  border-radius: var(--radius-md);
}

.profile-photo-form .pick-menu {
  left: 0;
  right: 0;
}

.profile-photo-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.profile-photo-actions .comment-submit,
.profile-photo-actions .profile-photo-remove {
  width: 100%;
  border-radius: var(--radius-md);
}

.compose-card .comment-form {
  margin-top: var(--space-3);
}

.comment-form-footer {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.comment-form-footer .comment-submit {
  width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--green-dark);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* --- Tablet: rail jadi top bar, sidebar turun --- */
@media (max-width: 1179px) {
  .shell {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .rail {
    grid-column: 1 / -1;
  }

  .rail-inner {
    position: static;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
  }

  .rail-nav {
    grid-auto-flow: column;
    justify-content: start;
    overflow-x: auto;
  }

  .rail-user {
    grid-template-columns: auto auto auto;
    gap: var(--space-1);
    justify-items: center;
    padding: var(--space-2);
  }

  .rail-user-avatar { grid-area: 1 / 1; }

  .rail-user-identity {
    display: none;
  }

  /* Di tablet dan mobile kartu rail jadi chip ringkas, tapi tombol keluar
     tetap wajib ada: tanpa itu pengguna ponsel tidak bisa keluar akun. */
  .rail-logout {
    display: inline-grid;
    width: var(--tap-min);
    height: var(--tap-min);
    grid-area: 1 / 2;
    margin-top: 0;
    padding: 0;
    place-items: center;
    /* Tanpa border supaya sejenis dengan tombol tema di sebelahnya. */
    border-color: transparent;
    background: transparent;
  }

  .rail-logout:hover,
  .rail-logout:focus-visible {
    border-color: var(--green);
    color: var(--green);
  }

  .rail-logout-icon { display: block; }

  .rail-logout-label { display: none; }
}

/* Di ponsel rail jadi dua baris: identitas di baris atas, navigasi penuh di
   bawah. Kalau dipaksa satu baris, daftar navigasi tergencet jadi sekitar
   38px sehingga hampir tidak ada tautan yang terlihat. */
@media (max-width: 719px) {
  .rail-inner {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "brand user"
      "nav nav";
    row-gap: var(--space-3);
  }

  .brand-rail { grid-area: brand; }

  .rail-user {
    grid-area: user;
    justify-self: end;
  }

  /* Navigasi jadi grid dengan lebar dibagi rata: semua tujuan terlihat tanpa
     perlu digeser horizontal. Label panjang diganti versi pendek supaya muat. */
  .rail-nav {
    grid-area: nav;
    display: grid;
    /* grid-auto-flow: column dari blok tablet harus dinetralkan, kalau tidak
       kolom eksplisit ditumpuki kolom implisit dan navigasi tetap melebar. */
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: 4px;
    padding: 6px;
    overflow: visible;
  }

  /* Panel admin punya lima tujuan; tiga kolom memberi label ruang cukup
     tanpa ellipsis, jadi navigasi membungkus dua baris, bukan digeser. */
  .shell-admin .rail-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rail-link {
    position: relative;
    min-height: var(--tap-min);
    justify-content: center;
    padding: 0 4px;
    font-size: 0.72rem;
    line-height: 1.2;
    text-align: center;
  }

  .rail-link-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .rail-link-label .label-long { display: none; }

  .rail-link-label .label-short { display: inline; }

  .rail-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    margin-left: 0;
    padding-inline: 4px;
    font-size: 0.62rem;
  }

  /* Di layar sempit beri napas 12px di kiri-kanan: cukup agar kartu tidak
     menempel tepi layar, tapi tetap jauh lebih lega daripada 32px+24px
     versi sebelumnya. Radius kartu dikembalikan supaya sudutnya rapi. */
  .shell {
    width: 100%;
    gap: var(--space-4);
    padding-inline: var(--space-3);
    padding-block: var(--space-4) var(--space-6);
  }

  .rail-inner {
    padding-inline: 0;
  }

  .rail-nav {
    padding-inline: 4px;
  }

  .composer,
  .feed-section,
  .comments-section,
  .profile-card,
  .compose-card {
    padding: var(--space-4);
  }
}

@media (max-width: 900px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: static;
  }
}

@media (max-width: 620px) {
  .shell {
    gap: var(--space-4);
  }

  .composer,
  .feed-section,
  .comments-section,
  .profile-card,
  .compose-card {
    padding: var(--space-4);
  }

  .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px var(--space-3);
  }

  /* Tanpa ini badge hitungan melebar penuh satu baris dan terlihat seperti
     pil oval raksasa di mobile. */
  .section-head .comments-count,
  .section-head .admin-count {
    justify-self: end;
  }
}

/* =================================================================
   HALAMAN MASUK: editorial, artistik, dan tenang
   ================================================================= */

.auth-page {
  min-height: 100vh;
  background: var(--paper);
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  min-height: 100vh;
}

/* --- Panel artistik --- */
.auth-art {
  position: relative;
  display: flex;
  overflow: hidden;
  padding: clamp(28px, 4.5vw, 64px);
  color: #f4f6f0;
  background:
    radial-gradient(90% 70% at 12% 8%, rgba(232, 199, 155, 0.16) 0%, transparent 55%),
    radial-gradient(120% 90% at 15% 10%, #3e6149 0%, transparent 55%),
    radial-gradient(90% 80% at 85% 95%, #1d3025 0%, transparent 60%),
    linear-gradient(160deg, #33523d 0%, #24392b 55%, #16241b 100%);
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(20px, 4vh, 40px);
  isolation: isolate;
}

/* Orb emas lembut di kiri bawah: cahaya hangat penyeimbang lingkaran
   dingin di kanan atas, panel terasa hidup bukan gradien datar. */
.auth-art::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -18%;
  left: -12%;
  width: min(46vw, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 199, 155, 0.20) 0%, transparent 65%);
  filter: blur(10px);
  pointer-events: none;
}

/* Butiran halus memberi tekstur seperti cetak, bukan gradien datar. */
.auth-art-grain {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
  pointer-events: none;
}

.auth-art-glow {
  position: absolute;
  z-index: -1;
  top: -28%;
  right: -22%;
  width: min(58vw, 620px);
  aspect-ratio: 1;
  border: 1px solid rgba(244, 246, 240, 0.14);
  border-radius: 50%;
  box-shadow:
    0 0 0 46px rgba(244, 246, 240, 0.035),
    0 0 0 96px rgba(244, 246, 240, 0.028),
    0 0 0 150px rgba(244, 246, 240, 0.022);
  pointer-events: none;
  animation: drift 14s ease-in-out infinite alternate;
}

.auth-art-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.brand-word {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.auth-art-meta {
  margin: 0;
  color: rgba(244, 246, 240, 0.5);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.auth-art-copy {
  max-width: 34ch;
  margin-block: 0;
  padding-block: clamp(20px, 4vh, 44px) 0;
  animation: rise 700ms ease-out both;
}

.auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-4);
  padding: 7px 14px 7px 12px;
  border: 1px solid rgba(217, 198, 164, 0.35);
  border-radius: 999px;
  color: #e6d3ab;
  background: rgba(217, 198, 164, 0.10);
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.auth-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: #e8c79b;
  box-shadow: 0 0 10px rgba(232, 199, 155, 0.9);
}

.auth-display {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.4vw, 5.2rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 0.98;
}

.auth-display em {
  color: #e8c79b;
  font-style: italic;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .auth-display em {
    background: linear-gradient(115deg, #f4ddb2 10%, #e8c79b 45%, #d9a86c 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.auth-lede {
  max-width: 34ch;
  margin: var(--space-5) 0 0;
  color: rgba(244, 246, 240, 0.8);
  font-size: 0.98rem;
  line-height: 1.75;
}

.auth-art-foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: clamp(16px, 3vh, 28px);
  color: rgba(244, 246, 240, 0.6);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

/* Sorotan fitur mengisi ruang vertikal panel dengan konten berguna, */
/* bukan kekosongan. Hanya di index.html; panel admin tidak terpengaruh. */
.auth-points {
  display: grid;
  max-width: 40ch;
  margin: clamp(18px, 3.5vh, 30px) 0 0;
  padding: 0;
  gap: 10px;
  list-style: none;
}

.auth-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(244, 246, 240, 0.16);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(244, 246, 240, 0.10), rgba(244, 246, 240, 0.04));
  color: rgba(244, 246, 240, 0.92);
  font-size: 0.85rem;
  line-height: 1.55;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(10px);
  transition: transform 200ms ease, border-color 200ms ease;
  animation: rise 600ms ease-out both;
}

.auth-points li:nth-child(1) { animation-delay: 150ms; }
.auth-points li:nth-child(2) { animation-delay: 240ms; }
.auth-points li:nth-child(3) { animation-delay: 330ms; }

.auth-points li:hover {
  transform: translateY(-2px);
  border-color: rgba(232, 199, 155, 0.45);
}

.auth-points svg {
  width: 18px;
  height: 18px;
  flex: none;
  box-sizing: content-box;
  margin-top: 0;
  padding: 5px;
  border-radius: 50%;
  color: #f0d7a8;
  background: rgba(232, 199, 155, 0.14);
}

.auth-rule {
  height: 1px;
  flex: 1;
  background: rgba(244, 246, 240, 0.22);
}

/* --- Sisi formulir --- */
.auth-form-side {
  display: grid;
  place-items: center;
  padding: clamp(32px, 5vw, 84px) clamp(24px, 5vw, 88px);
  background: var(--paper);
}

.auth-form-wrap {
  width: min(100%, 424px);
  animation: rise 700ms 90ms ease-out both;
}

.auth-mobile-brand {
  display: none;
  margin-bottom: var(--space-7);
  color: var(--green);
}

.auth-form-head {
  margin-bottom: var(--space-6);
}

.auth-form-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.6vw, 2.7rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.auth-form-head .intro {
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.auth-form {
  display: grid;
  gap: var(--space-4);
}

.auth-form .field {
  margin-bottom: 0;
}

.auth-note {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--green);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--muted);
  background: rgba(66, 107, 78, 0.07);
  font-size: 0.83rem;
  line-height: 1.6;
}

.auth-status {
  margin-top: var(--space-4);
}

.submit-button {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.submit-arrow {
  transition: transform 180ms ease;
}

.submit-button:hover .submit-arrow {
  transform: translateX(4px);
}

.submit-button-ghost {
  color: var(--green-dark);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
}

.submit-button-ghost:hover {
  color: #fff;
  background: var(--green);
  box-shadow: none;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-24px, 26px, 0) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-art-glow,
  .auth-art-copy,
  .auth-form-wrap,
  .auth-points li {
    animation: none;
  }

  .auth-points li:hover {
    transform: none;
  }
}

/* --- Responsif ---
   Di bawah 980px panel seni tidak lagi jadi kolom setinggi layar: ia berubah
   jadi pita pembuka, karena layar sempit tidak punya tinggi untuk menanggung
   headline besar + lede + footer sekaligus. */
@media (max-width: 980px) {
  .auth-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .auth-art {
    min-height: auto;
    padding: var(--space-5) var(--space-5) var(--space-6);
    justify-content: flex-start;
  }

  .auth-art-copy {
    max-width: 100%;
    margin-block: 0;
    padding-block: var(--space-6) var(--space-4);
  }

  .auth-lede {
    max-width: 52ch;
  }

  .auth-form-side {
    padding-block: var(--space-6) var(--space-8);
  }
}

/* Di bawah 620px pita dibuat setipis mungkin: brand pindah ke sisi formulir
   (auth-mobile-brand) supaya tidak tampil dua kali, dan lede serta footer
   disembunyikan agar formulir langsung terlihat tanpa perlu menggulir. */
@media (max-width: 620px) {
  .auth-art {
    padding: var(--space-5) var(--space-4) var(--space-5);
  }

  .auth-art-head,
  .auth-art-foot,
  .auth-lede,
  .auth-points {
    display: none;
  }

  .auth-art-copy {
    padding-block: 0;
  }

  .auth-eyebrow {
    margin-bottom: var(--space-3);
  }

  .auth-display {
    font-size: clamp(2.05rem, 8.6vw, 2.9rem);
    line-height: 1.04;
  }

  .auth-art-glow {
    width: 90vw;
  }

  .auth-form-side {
    padding: var(--space-5) var(--space-4) var(--space-7);
  }

  .auth-mobile-brand {
    display: inline-flex;
    margin-bottom: var(--space-5);
  }

  .auth-form-head {
    margin-bottom: var(--space-5);
  }
}

/* =================================================================
   LOGIN NO-SCROLL + POINTS SEJAJAR TITLE (desktop >= 981px)
   - Shell dikunci setinggi viewport (100dvh) + overflow hidden: tidak ada
     scroll halaman di desktop.
   - .auth-art-copy yang punya points jadi grid 2 kolom: teks kiri,
     points kanan sejajar title. Mengisi lebar panel + memangkas tinggi.
   - Panel admin (tanpa .auth-points) tidak tersentuh berkat :has().
   - Mobile (<=980px) tetap boleh scroll: override di bawah.
   ================================================================= */
@media (min-width: 981px) {
  .auth-page {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  .auth-shell {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .auth-art {
    min-height: 0;
    justify-content: space-between;
    gap: clamp(12px, 2vh, 24px);
    padding: clamp(24px, 3.5vw, 48px);
    overflow: hidden;
  }

  /* Dua kolom hanya bila points ada (halaman login saja). */
  .auth-art-copy:has(.auth-points) {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: start;
    gap: clamp(20px, 2.4vw, 40px);
    width: 100%;
    max-width: none;
    margin: auto 0;
    padding-block: clamp(8px, 2vh, 24px);
  }

  .auth-art-text { min-width: 0; }

  .auth-art-copy:has(.auth-points) .auth-display {
    font-size: clamp(2.5rem, 3.9vw, 3.6rem);
    line-height: 1.02;
  }

  .auth-art-copy:has(.auth-points) .auth-lede {
    margin-top: var(--space-4);
    font-size: 0.92rem;
    line-height: 1.6;
  }

  .auth-art-copy:has(.auth-points) .auth-points {
    max-width: none;
    margin: 0;
    /* Sejajar dengan baris judul: bukan di bawah lede lagi. */
    padding-top: clamp(28px, 5vh, 54px);
    gap: 10px;
    align-self: start;
  }

  .auth-art-copy:has(.auth-points) .auth-points li {
    padding: 10px 14px;
    font-size: 0.8rem;
    line-height: 1.5;
  }

  .auth-form-side {
    min-height: 0;
    overflow: hidden;
    padding: clamp(20px, 3.4vh, 40px) clamp(24px, 5vw, 88px);
  }

  .auth-form-wrap {
    width: min(100%, 400px);
    max-height: 100%;
    overflow: hidden;
  }

  .auth-form-head { margin-bottom: var(--space-4); }

  .auth-form-head h2 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); }

  .auth-form { gap: var(--space-3); }

  .auth-form .field input { height: 48px; }

  .auth-form-side .submit-button { min-height: 48px; }

  .auth-form-side .signup { margin-top: var(--space-4); }
}

/* Layar desktop pendek: padatkan lagi supaya tetap tanpa scroll. */
@media (min-width: 981px) and (max-height: 760px) {
  .auth-art-copy:has(.auth-points) .auth-display {
    font-size: clamp(2.2rem, 3.4vw, 3rem);
  }

  .auth-art-copy:has(.auth-points) .auth-points {
    padding-top: 24px;
  }

  .auth-art-copy:has(.auth-points) .auth-points li {
    padding: 8px 12px;
    font-size: 0.78rem;
  }

  .auth-form-head { margin-bottom: var(--space-3); }

  .auth-form { gap: 10px; }
}

/* =================================================================
   PANEL ADMINISTRATOR
   Memakai shell tiga kolom yang sama dengan dashboard supaya admin
   tidak merasa masuk ke aplikasi yang berbeda.
   ================================================================= */

.admin-login-form input {
  border-radius: var(--radius-sm);
}

.composer-head h2 {
  margin: 0 0 3px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.admin-count {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Form tambah pengguna: dua kolom sama besar. Versi tiga kolom dengan
   kolom "auto" membuat label "Alamat email" terpotong jadi dua baris. */
.admin-create-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-create-form .admin-primary {
  min-width: 220px;
  grid-column: 1 / -1;
  justify-self: start;
}

.admin-create-form.admin-chess-event-create { grid-template-columns: minmax(0, 1fr) auto; }
.admin-create-form.admin-chess-pairing-form { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.admin-create-form.admin-domino-match-form { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.admin-score-reset-form { margin-top: 16px; }
.admin-chess-pairing-form .admin-primary { min-width: 0; grid-column: auto; }
.admin-domino-match-form .admin-primary { min-width: 0; }
.admin-tournament-table { min-width: 1120px; }
.admin-tournament-delete-form {
  display: grid;
  grid-template-columns: minmax(0, 400px) auto;
  align-items: end;
  gap: 12px;
  margin-top: 16px;
}
.admin-tournament-delete-form label { display: grid; gap: 7px; }
.admin-tournament-delete-form label span { font-size: 0.82rem; font-weight: 700; }
.admin-tournament-delete-form .admin-delete { justify-self: start; }
.admin-tournament-tie-form { display: grid; min-width: 250px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.admin-tournament-tie-form .admin-primary { min-width: 0; min-height: 36px; grid-column: auto; padding: 0 9px; }
.admin-tournament-row-action { margin-bottom: 6px; }

@media (max-width: 760px) {
  .admin-create-form.admin-chess-event-create,
  .admin-create-form.admin-chess-pairing-form,
  .admin-create-form.admin-domino-match-form { grid-template-columns: 1fr; }

  .admin-chess-pairing-form .admin-primary { grid-column: 1 / -1; }
  .admin-tournament-delete-form { grid-template-columns: 1fr; }
}

/* --- Tabel panjang: mudah dipindai, tidak jadi satu blok teks panjang ---
   Header menempel di atas area scroll, baris belang-belang, dan tinggi
   dibatasi supaya halaman tetap Orientasi. */
.admin-users .admin-table-scroll {
  max-height: min(68vh, 760px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.admin-table thead th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: var(--white);
  box-shadow: inset 0 -1px 0 var(--line);
  white-space: nowrap;
}

.admin-users .admin-table tbody tr:nth-child(even) {
  background: rgba(66, 107, 78, 0.035);
}

.admin-users .admin-table tbody tr:hover {
  background: rgba(66, 107, 78, 0.075);
}

.admin-users .admin-table tbody tr:focus-within {
  background: rgba(217, 160, 102, 0.12);
  box-shadow: inset 3px 0 0 var(--orange);
}

/* Nama jadi penanda baris, email turun satu tingkat supaya mata bisa
   memindai kolom nama lebih dulu. */
.admin-full-name .admin-table-input { font-weight: 700; }

.admin-email-cell .admin-table-input { color: var(--muted); }

.admin-date { white-space: nowrap; }

.admin-save {
  min-height: var(--tap-min);
  padding-inline: 18px;
  border-radius: var(--radius-full);
}

.admin-delete {
  min-height: var(--tap-min);
  border-radius: var(--radius-full);
}

/* --- Empty state: ikon + judul + satu kalimat, bukan tabel kosong --- */
.empty-state {
  display: grid;
  /* Harus melebar penuh: grid feed memakai kolom otomatis, jadi tanpa ini
     empty state hanya menempati satu kolom dan terlihat kecil di kiri. */
  grid-column: 1 / -1;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-4);
  color: var(--muted);
  text-align: center;
}

.empty-state-icon {
  display: grid;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-2);
  place-items: center;
  border-radius: 50%;
  color: var(--green);
  background: rgba(66, 107, 78, 0.1);
}

.empty-state-icon svg {
  width: 26px;
  height: 26px;
}

.empty-state strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.empty-state p {
  max-width: 36ch;
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.6;
}

/* --- Ikon lihat/sembunyikan kata sandi --- */
.toggle-password {
  min-width: var(--tap-min);
  justify-content: center;
  color: var(--muted);
}

.toggle-password-icon {
  width: 20px;
  height: 20px;
}

.toggle-password .eye-slash { opacity: 0; }

.toggle-password[aria-pressed="true"] .eye-slash { opacity: 1; }

.toggle-password:hover,
.toggle-password:focus-visible { color: var(--green); }

/* --- Tombol tema: terang / gelap ---
   Tanpa border dan tanpa kotak: hanya ikon yang berubah warna saat hover.
   Sisi target sentuh 44x44 tetap dijaga. */
.theme-toggle {
  display: inline-grid;
  width: var(--tap-min);
  height: var(--tap-min);
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--green);
  background: rgba(66, 107, 78, 0.1);
}

.theme-icon {
  display: none;
  width: 20px;
  height: 20px;
}

/* Ikon yang tampil ditentukan data-theme di <html>: bulan saat terang,
   matahari saat gelap. Tidak ada JS yang perlu menukar kelas pada tombol. */
:root[data-theme="light"] .theme-icon-light,
:root[data-theme="dark"] .theme-icon-dark {
  display: block;
}

/* .brand-mark dasar memakai border putih untuk panel gelap; di shell terang
   border putih hilang, jadi dipakai warna brand agar lingkarannya terlihat. */
.brand-rail .brand-mark {
  border-color: var(--green);
  color: var(--orange);
}

.rail-user {
  position: relative;
}

/* Penempatan tombol tema sudah diatur di blok .rail-user (grid 1/3).
   Versi lama memakai position: absolute dan masih ada di sini, sehingga
   tombol keluar melompat keluar dari flow dan menimpa tombol logout. */

/* Di panel artistik login, tombol memakai warna terang panel. */
.auth-art-theme .theme-toggle {
  color: rgba(244, 246, 240, 0.82);
}

.auth-art-theme .theme-toggle:hover,
.auth-art-theme .theme-toggle:focus-visible {
  color: #f4f6f0;
  background: rgba(244, 246, 240, 0.14);
}

/* --- Pemilih foto: satu tombol terlihat, dua jalur (kamera + galeri) --- */
/* Chrome Android 14/15 menyembunyikan tile kamera untuk accept="image/*" */
/* saja, jadi input kamera (capture) dan input galeri dipisah; pilihan */
/* dipindah ke menu kecil di aplikasi. */
.photo-picker {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.file-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.pick-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  display: grid;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

.pick-menu[hidden] {
  display: none;
}

.pick-menu button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.pick-menu button:hover {
  background: rgba(0, 0, 0, 0.06);
}

.admin-users .admin-table-scroll,
.admin-comments .admin-table-scroll {
  margin-top: var(--space-4);
}