/* 青山猫愛好会 共通スタイル */
body {
  font-family: 'M PLUS 1p', sans-serif;
}

/* Ver.4.05: safer applications and clearer authentication controls. */
.app-password-field {
  position: relative;
  display: block;
}

.app-password-field > .form-input {
  width: 100%;
  padding-right: 3rem;
}

.app-password-toggle {
  position: absolute;
  top: 50%;
  right: 0.45rem;
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  translate: 0 -50%;
  place-items: center;
  border-radius: 5px;
  color: #64776c;
}

.app-password-toggle:hover,
.app-password-toggle:focus-visible {
  background: #e7f0ea;
  color: #145c3b;
}

/* Ver.4.07: password safety feedback. */
.app-caps-lock,
.app-password-match {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  font-size: 0.68rem;
  font-weight: 750;
}

.app-caps-lock {
  color: #9a651f;
}

.app-caps-lock.hidden,
.app-password-match.hidden { display: none; }

.app-password-strength {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.45rem;
}

.app-password-strength > span {
  height: 0.28rem;
  overflow: hidden;
  border-radius: 999px;
  background: #e4e9e6;
}

.app-password-strength i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #9ca9a1;
  transition: width 180ms ease, background 180ms ease;
}

.app-password-strength small {
  color: #748279;
  font-size: 0.66rem;
  font-weight: 700;
}

.app-password-strength.is-weak i { background: #bd5147; }
.app-password-strength.is-weak small { color: #a54238; }
.app-password-strength.is-medium i { background: #c18a2d; }
.app-password-strength.is-medium small { color: #8a621f; }
.app-password-strength.is-strong i { background: #247552; }
.app-password-strength.is-strong small { color: #246747; }

.app-password-match.is-match { color: #28704f; }
.app-password-match.is-mismatch { color: #aa443a; }

.application-file-preview {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 2.35rem;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.65rem;
  padding: 0.65rem;
  border: 1px solid #c8dacf;
  border-radius: 7px;
  background: #f3f8f5;
}

.application-file-preview.hidden { display: none; }

.application-file-preview img {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 5px;
  background: #fff;
  object-fit: contain;
}

.application-file-preview > span {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.application-file-preview b {
  color: #234a35;
  font-size: 0.76rem;
}

.application-file-preview small {
  overflow: hidden;
  color: #6e7e74;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.application-file-preview button {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: 5px;
  color: #7b817d;
}

.application-file-preview button:hover,
.application-file-preview button:focus-visible {
  background: #e6eee9;
  color: #9e4438;
}

.form-input.is-invalid,
.form-file.is-invalid,
fieldset.is-invalid {
  border-color: #c95549 !important;
  box-shadow: 0 0 0 3px rgb(201 85 73 / 10%);
}

fieldset.is-invalid {
  border: 1px solid #c95549;
  border-radius: 7px;
  padding: 0.7rem;
}

.application-field-error {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin-top: 0.35rem;
  color: #a53e34;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.45;
}

.application-field-error i { margin-top: 0.18rem; }

/* Ver.4.06: preview-first member image uploads. */
.member-upload-preview {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) 2.35rem;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem;
  border: 1px solid #c7d9cf;
  border-radius: 7px;
  background: #f3f8f5;
}

.member-upload-preview.hidden { display: none; }

.member-upload-preview img {
  width: 4rem;
  height: 4rem;
  border-radius: 5px;
  background: #fff;
  object-fit: cover;
}

.member-upload-preview > span {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.member-upload-preview b {
  color: #234a35;
  font-size: 0.74rem;
}

.member-upload-preview small {
  overflow: hidden;
  color: #718078;
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-upload-preview button {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: 5px;
  color: #718078;
}

.member-upload-preview button:hover,
.member-upload-preview button:focus-visible {
  background: #e5eee9;
  color: #9e4438;
}

.member-comment-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.member-comment-submit-row > span {
  color: #748279;
  font-size: 0.68rem;
  font-weight: 700;
}

.member-comment-submit-row > span.is-near-limit { color: #a96720; }
.member-comment-submit-row button { min-width: 7.25rem; }
.member-comment-submit-row button:disabled { cursor: not-allowed; opacity: 0.48; }

.profile-avatar-selection-note {
  color: #2b6d4c;
  font-size: 0.7rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.profile-avatar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.profile-avatar-actions > button { flex: 1 1 9rem; }

@media (max-width: 520px) {
  .application-file-preview {
    grid-template-columns: 3.75rem minmax(0, 1fr) 2.35rem;
  }

  .application-file-preview img {
    width: 3.75rem;
    height: 3.75rem;
  }

  .member-upload-preview {
    grid-template-columns: 3.5rem minmax(0, 1fr) 2.35rem;
  }

  .member-upload-preview img {
    width: 3.5rem;
    height: 3.5rem;
  }
}

:focus-visible {
  outline: 3px solid rgba(5, 150, 105, 0.55);
  outline-offset: 3px;
}

.app-body {
  background: #f6f8f5;
}
.site-shell,
.portal-shell {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(248, 250, 247, 0.96), rgba(242, 246, 242, 0.98)),
    #f6f8f5;
}
.site-shell::before,
.portal-shell::before {
  content: '';
  position: fixed;
  right: clamp(-140px, -7vw, -48px);
  bottom: clamp(-140px, -9vw, -64px);
  width: min(52vw, 560px);
  aspect-ratio: 1;
  background: url('/static/aca-mark.png') center / contain no-repeat;
  opacity: 0.045;
  pointer-events: none;
  z-index: -1;
}
.site-header,
.portal-header {
  background: rgba(13, 47, 30, 0.94);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(3, 18, 10, 0.16);
  color: #fff;
  backdrop-filter: blur(10px);
}
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
  padding: 3px;
}
.site-nav-link,
.site-nav-primary,
.portal-ghost-btn,
.portal-primary-btn,
.site-button-primary,
.site-button-secondary,
.site-button-muted,
.site-cta-primary,
.site-cta-secondary,
.site-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-weight: 700;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.site-nav-link,
.portal-ghost-btn {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.24);
  padding: 0.375rem 0.75rem;
}
.site-nav-link:hover,
.portal-ghost-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.site-nav-primary,
.portal-primary-btn {
  background: #fff;
  color: #12341f;
  padding: 0.375rem 0.75rem;
}
.site-nav-primary:hover,
.portal-primary-btn:hover {
  background: #e8efe8;
}
.site-cta-primary,
.site-button-primary {
  background: #115c36;
  color: #fff;
  padding: 0.625rem 1.25rem;
  box-shadow: 0 8px 18px rgba(17, 92, 54, 0.18);
}
.site-cta-primary:hover,
.site-button-primary:hover {
  background: #0d472a;
}
.site-cta-secondary,
.site-button-secondary,
.site-icon-btn {
  background: #fff;
  color: #12341f;
  border: 1px solid #cfd8cf;
  padding: 0.625rem 1.25rem;
}
.site-cta-secondary:hover,
.site-button-secondary:hover,
.site-icon-btn:hover {
  background: #eef3ee;
}
.site-button-muted {
  background: #e7ece7;
  color: #4b5a50;
  padding: 0.625rem 1.25rem;
}
.site-panel,
.portal-panel {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #dfe7df;
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}
.subtle-panel {
  background: rgba(244, 247, 244, 0.92);
  border: 1px solid #d7e1d7;
  border-radius: 8px;
}
.hero-section {
  padding-top: clamp(3rem, 7vw, 6rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
  text-align: center;
}
.hero-mark {
  width: min(34vw, 170px);
  height: auto;
}
.page-heading {
  text-align: center;
  margin-bottom: 0.75rem;
}
.page-mark,
.login-mark,
.success-mark {
  width: 88px;
  height: 88px;
  object-fit: contain;
}
.activity-icon,
.user-dot {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #eef3ee;
  color: #115c36;
  margin-bottom: 0.75rem;
}
.user-dot {
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0;
  flex: 0 0 auto;
}
.date-block {
  background: #eef3ee;
  color: #115c36;
  border: 1px solid #d7e1d7;
  border-radius: 8px;
}
.site-footer {
  background: #0d2f1e;
  color: rgba(255, 255, 255, 0.82);
}
.portal-main h2 {
  color: #12341f;
}
.points-hero,
.modal-hero {
  border-radius: 8px;
  background: linear-gradient(135deg, #0d2f1e, #17613a);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}
.post-card {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.75rem 0.25rem;
  border-bottom: 1px solid #e3eae3;
}
.post-card:hover .post-body {
  background: #f8faf8;
}
.post-avatar {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #eef3ee;
  color: #115c36;
  margin-top: 0.125rem;
}
.post-body {
  min-width: 0;
  border-radius: 8px;
  padding: 0.5rem 0.625rem;
  transition: background 0.15s;
}
.post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.post-author {
  font-size: 0.9rem;
  font-weight: 800;
  color: #17231c;
}
.post-time {
  margin-left: 0.5rem;
  font-size: 0.72rem;
  color: #7a867d;
}
.post-content {
  margin-top: 0.25rem;
  color: #26342b;
  font-size: 0.92rem;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mention-composer {
  position: relative;
}
.mention-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border-radius: 9999px;
  background: #e7f0fd;
  color: #1a66d0;
  border: 1px solid #c6dcf8;
  font-weight: 700;
  padding: 0 0.35rem;
  font-weight: 800;
  line-height: 1.55;
}
.mention-menu {
  position: absolute;
  z-index: 60;
  left: 0.75rem;
  right: auto;
  top: calc(100% + 0.35rem);
  min-width: 230px;
  max-width: min(320px, calc(100% - 0.5rem));
  max-height: 260px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #cfd8cf;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  padding: 0.35rem;
}
.reply-composer .mention-menu {
  max-width: min(300px, 100%);
}
.mention-option {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.5rem;
  width: 100%;
  align-items: center;
  border-radius: 6px;
  padding: 0.5rem;
  text-align: left;
  color: #17231c;
}
.mention-option:hover,
.mention-option.is-active {
  background: #eef7ef;
}
.mention-option-icon {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #eef3ee;
  color: #115c36;
}
.mention-option-label,
.mention-option-sub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mention-option-label {
  font-size: 0.86rem;
  font-weight: 800;
}
.mention-option-sub {
  margin-top: 0.05rem;
  font-size: 0.72rem;
  color: #718078;
}
.post-image {
  display: block;
  width: min(100%, 420px);
  max-height: 320px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #dfe7df;
  margin-top: 0.625rem;
}
.post-actions {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
  color: #647067;
  font-size: 0.82rem;
}
.post-actions button {
  transition: color 0.15s;
}
.post-actions button:hover {
  color: #115c36;
}
.timeline-filter-bar { display:flex; align-items:center; gap:.6rem; }
.timeline-search { flex:1; min-width:0; display:flex; align-items:center; gap:.5rem; border:1px solid #d8e4dc; border-radius:6px; padding:.52rem .7rem; color:#60706a; }
.timeline-search input { min-width:0; width:100%; border:0; outline:0; background:transparent; font:inherit; color:#1f3429; }
.timeline-category { display:inline-flex; align-items:center; margin-left:.35rem; padding:.1rem .42rem; border-radius:999px; font-size:.68rem; font-weight:700; line-height:1.35; background:#edf3ee; color:#466255; }
.timeline-category.is-notice { background:#e8efff; color:#34578e; }
.timeline-category.is-activity { background:#e8f5ed; color:#277445; }
.timeline-category.is-cats { background:#fff2d8; color:#8a5a13; }
.timeline-category.is-chat { background:#f1ebfb; color:#64488c; }
.timeline-category.is-photo { background:#e7f4f3; color:#24736e; }
@media (max-width: 640px) { .timeline-filter-bar { flex-wrap:wrap; } .timeline-search { flex-basis:100%; } }
.post-like.is-liked {
  color: #be123c;
}
.reply-card {
  grid-template-columns: 2rem minmax(0, 1fr);
  padding: 0.5rem 0;
  border-bottom: 0;
}
.reply-card .post-avatar {
  width: 2rem;
  height: 2rem;
}
.reply-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.5rem;
  margin-left: 2.75rem;
}
@media (max-width: 640px) {
  .reply-composer {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .reply-composer .reply-send {
    grid-column: 1 / -1;
  }
}
.reply-card {
  background: #f7faf7;
}
.event-card {
  transition: border-color 0.15s, transform 0.15s;
}
.event-card:hover {
  border-color: #b7c8b7;
  transform: translateY(-1px);
}
.form-label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
  color: #374151;
}
.form-input {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: #fff;
}
.form-input:focus {
  border-color: #15803d;
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.15);
}
.form-file {
  width: 100%;
  font-size: 0.875rem;
  border: 1px dashed #d1d5db;
  border-radius: 0.5rem;
  padding: 0.75rem;
  background: #fafafa;
}
.form-file::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid #cbd5cf;
  border-radius: 999px;
  background: #eef4ef;
  color: #15803d;
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.form-file::file-selector-button:hover {
  background: #e0ebe2;
  border-color: #9db8a4;
}
.payment-option {
  display: block;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0.9375rem;
}
.payment-option:hover {
  border-color: #8cab8c;
  background: #f5f8f5;
}
.payment-option:has(input:checked) {
  border-color: #15803d;
  background: #eef7ef;
  font-weight: 600;
}
.tab-btn {
  padding: 0.5rem 1rem;
  border-radius: 0.75rem 0.75rem 0 0;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.15s;
}
.tab-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.tab-btn.tab-active {
  background: #f0fdf4;
  color: #166534;
  font-weight: 700;
}
.status-badge {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.feeding-cell {
  min-width: 132px;
  vertical-align: top;
}
.feed-shift-card {
  display: grid;
  gap: 0.25rem;
  margin-bottom: 0.375rem;
  padding: 0.5rem;
  border-radius: 8px;
  border: 1px solid #d7e1d7;
  text-align: left;
  background: #f8faf8;
  color: #1f2d24;
}
.feed-shift-time {
  display: block;
  font-size: 0.95rem;
  line-height: 1.2;
  font-weight: 800;
  color: #0d472a;
  word-break: keep-all;
}
.feed-shift-user {
  display: block;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #53635a;
}
.feed-shift-mine {
  border-color: #8cab8c;
  background: #eef7ef;
}
.feed-shift-done {
  border-color: #95c5a0;
  background: #e9f7ec;
}
.feed-shift-other {
  background: #f5f7f5;
}
.mobile-scroll-hint {
  display: none;
}
.feed-mini-btn {
  width: 100%;
  border-radius: 6px;
  padding: 0.25rem 0.375rem;
  font-size: 0.7rem;
  font-weight: 700;
}
.feed-complete-btn {
  background: #115c36;
  color: #fff;
}
.feed-cancel-btn {
  background: #e2e8e2;
  color: #46554b;
}
.feed-detail-btn {
  background: #fff;
  border: 1px solid #cfd8cf;
  color: #12341f;
}
.feed-participate-btn {
  background: #115c36;
  color: #fff;
}
.feed-joined-label {
  display: block;
  width: 100%;
  border-radius: 6px;
  padding: 0.25rem 0.375rem;
  background: #e7ece7;
  color: #4b5a50;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
}
.feed-day-locked {
  width: 100%;
  border: 1px solid #d9e1d9;
  border-radius: 8px;
  padding: 0.375rem 0.25rem;
  color: #8a968d;
  background: #f4f7f4;
  font-size: 0.72rem;
  font-weight: 700;
}

/* Ver.4.09: mobile-first feeding schedule. */
.feeding-mobile-grid { display: none; }

@media (max-width: 760px) {
  .feeding-desktop-grid { display: none; }

  .feeding-mobile-grid {
    display: grid;
    gap: 0.75rem;
  }

  .feeding-mobile-days {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.45rem;
    border: 1px solid #d6dfd9;
    border-radius: 7px;
    background: #f4f7f5;
  }

  .feeding-mobile-day {
    display: grid;
    min-width: 0;
    min-height: 3.7rem;
    place-items: center;
    align-content: center;
    gap: 0.08rem;
    padding: 0.32rem 0.18rem;
    border: 1px solid transparent;
    border-radius: 5px;
    color: #5f6e65;
    background: transparent;
  }

  .feeding-mobile-day span {
    font-size: 0.62rem;
    font-weight: 850;
  }

  .feeding-mobile-day span.is-dow-0 { color: #a7473d; }
  .feeding-mobile-day span.is-dow-6 { color: #356a9b; }

  .feeding-mobile-day b {
    font-size: 0.76rem;
    line-height: 1.15;
  }

  .feeding-mobile-day small {
    color: #7d8a82;
    font-size: 0.56rem;
  }

  .feeding-mobile-day.is-active {
    border-color: #8db39f;
    background: #fff;
    color: #155d3c;
    box-shadow: 0 2px 7px rgb(31 75 51 / 10%);
  }

  .feeding-mobile-day.is-today:not(.is-active) {
    background: #e7efe9;
  }

  .feeding-mobile-day-panel {
    display: grid;
    gap: 0.55rem;
  }

  .feeding-mobile-day-panel.hidden { display: none; }

  .feeding-mobile-slot {
    overflow: hidden;
    border: 1px solid #d7e0da;
    border-radius: 7px;
    background: #fff;
  }

  .feeding-mobile-slot > header {
    display: flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid #e2e8e4;
    background: #f3f6f4;
  }

  .feeding-mobile-slot > header span {
    color: #234a35;
    font-size: 0.74rem;
    font-weight: 850;
  }

  .feeding-mobile-slot > header b {
    color: #75837a;
    font-size: 0.6rem;
  }

  .feeding-mobile-slot > div {
    display: grid;
    gap: 0.45rem;
    padding: 0.55rem;
  }

  .feeding-mobile-slot .feed-shift-card {
    margin: 0;
    padding: 0.65rem;
  }

  .feeding-mobile-register {
    display: inline-flex;
    width: 100%;
    min-height: 2.8rem;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px dashed #8db39f;
    border-radius: 5px;
    background: #f2f7f4;
    color: #216845;
    font-size: 0.72rem;
    font-weight: 850;
  }

  .feeding-mobile-register:hover,
  .feeding-mobile-register:focus-visible {
    border-style: solid;
    background: #e6f0ea;
  }

  .feeding-mobile-empty {
    padding: 0.35rem;
    color: #8a958e;
    font-size: 0.68rem;
    text-align: center;
  }

  .feeding-mobile-slot .feed-day-locked {
    border-radius: 5px;
    padding: 0.55rem;
  }

  .feeding-mobile-slot .free-time-form {
    padding: 0.3rem;
  }
}
.feeding-comment,
.detail-comment {
  border: 1px solid #dfe7df;
  border-radius: 8px;
  padding: 0.75rem;
  background: #f8faf8;
}
.feeding-comment-image,
.detail-comment-image {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #dfe7df;
  margin-top: 0.75rem;
}

/* 管理画面: 落ち着いた運用ツール寄りの見た目 */
.admin-shell {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(248, 250, 247, 0.96), rgba(241, 245, 241, 0.98)),
    #f6f8f5;
  color: #17231c;
}
.admin-shell::before {
  content: '';
  position: fixed;
  right: clamp(-120px, -6vw, -40px);
  bottom: clamp(-120px, -8vw, -56px);
  width: min(52vw, 560px);
  aspect-ratio: 1;
  background: url('/static/aca-mark.png') center / contain no-repeat;
  opacity: 0.055;
  pointer-events: none;
  z-index: -1;
}
.admin-header {
  background: rgba(13, 47, 30, 0.94);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(3, 18, 10, 0.18);
  color: #fff;
  backdrop-filter: blur(10px);
}
.admin-mark {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
  padding: 3px;
}
.admin-panel {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #dfe7df;
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}
.admin-shell .tab-btn {
  border-radius: 6px 6px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
}
.admin-shell .tab-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.admin-shell .tab-btn.tab-active {
  background: #f6f8f5;
  color: #0d3b24;
}
.admin-shell .form-input {
  border-radius: 6px;
  border-color: #cfd8cf;
  background: rgba(255, 255, 255, 0.96);
}
.admin-shell table thead {
  background: #eef3ee;
  color: #34443a;
}
.admin-shell table tr:hover {
  background: #f4f7f4;
}
.member-sort {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  font-weight: 800;
  color: #34443a;
  text-align: left;
  white-space: nowrap;
}
.member-sort:hover {
  color: #0d5d35;
}
.admin-ghost-btn,
.admin-primary-btn,
.admin-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-weight: 700;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.admin-ghost-btn {
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  padding: 0.375rem 0.75rem;
}
.admin-ghost-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.admin-primary-btn {
  background: #fff;
  color: #12341f;
  padding: 0.375rem 0.75rem;
}
.admin-primary-btn:hover {
  background: #e8efe8;
}
.admin-action-btn {
  background: #115c36;
  color: #fff;
  padding: 0.625rem 1.25rem;
}
.admin-action-btn:hover {
  background: #0d472a;
}
.admin-shell .rounded-2xl {
  border-radius: 8px;
}
.admin-shell .shadow {
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}
#admin-events-list > div,
#mail-logs-list > details {
  border: 1px solid #dfe7df;
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}
.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 42rem) minmax(18rem, 1fr);
  gap: 1rem;
  align-items: start;
}
.member-bulk-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
}
.admin-scroll-hint {
  display: none;
}
.admin-table-scroll {
  -webkit-overflow-scrolling: touch;
}
.mail-status-list {
  border-top: 1px solid #dfe7df;
}
.mail-status-row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #dfe7df;
}
.mail-status-row dt {
  color: #64706a;
}
.mail-status-row dd {
  color: #153727;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.visual-editor-block {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #dce6dc;
  background: #fbfdf8;
}
.visual-editor-heading {
  display: grid;
  gap: 0.25rem;
}
.visual-editor-kicker,
.top-preview-kicker {
  color: #6a8c62;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
}
.visual-editor-heading h2 {
  color: #2f6148 !important;
  font-size: 1.25rem;
  font-weight: 850;
}
.visual-editor-heading p {
  color: #64706a;
  font-size: 0.9rem;
}
.top-preview-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0.85rem;
  padding: 1.25rem;
  border: 1px solid #dce6dc;
  background:
    linear-gradient(180deg, rgba(255, 255, 250, 0.94), rgba(238, 249, 235, 0.92)),
    #fffefa;
}
.top-preview-mark {
  position: absolute;
  right: -2.75rem;
  top: -2.75rem;
  width: 13rem;
  opacity: 0.08;
}
.top-preview-mark img {
  width: 100%;
  height: auto;
}
.top-preview-card h2,
.top-preview-card p,
.top-preview-card dl {
  position: relative;
}
.top-preview-card h2 {
  color: #2f6148;
  font-size: 1.25rem;
  font-weight: 850;
  line-height: 1.35;
}
.top-preview-card p {
  color: #4d5b52;
  line-height: 1.65;
}
.top-preview-card dl {
  display: grid;
  gap: 0.5rem;
}
.top-preview-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-top: 1px solid #dce6dc;
}
.top-preview-card dt {
  color: #6b8064;
  font-size: 0.78rem;
  font-weight: 700;
}
.top-preview-card dd {
  color: #245b40;
  font-weight: 800;
  text-align: right;
}
.top-preview-note {
  border-top: 1px solid #dce6dc;
  padding-top: 0.75rem;
  font-size: 0.9rem;
}
@media (max-width: 900px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

/* 2026 visual refinement: less generated, more campus operations */
:root {
  --aca-ink: #223129;
  --aca-muted: #69756e;
  --aca-line: #dce6dc;
  --aca-paper: #fffefa;
  --aca-canvas: #f6faf4;
  --aca-canvas-2: #edf6ec;
  --aca-green: #176a42;
  --aca-green-2: #2d7a54;
  --aca-moss: #7f9a72;
  --aca-brass: #b8945c;
  --aca-danger: #9f3a35;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
  color: var(--aca-ink);
  letter-spacing: 0;
}

.app-body {
  background: var(--aca-canvas);
}

.site-shell,
.portal-shell,
.admin-shell {
  background:
    linear-gradient(180deg, rgba(255, 255, 250, 0.9), rgba(241, 248, 239, 0.96)),
    repeating-linear-gradient(90deg, rgba(24, 33, 28, 0.025) 0, rgba(24, 33, 28, 0.025) 1px, transparent 1px, transparent 76px),
    var(--aca-canvas);
}

.site-shell::before,
.portal-shell::before,
.admin-shell::before {
  display: block;
  content: '';
  position: fixed;
  right: clamp(-120px, -6vw, -44px);
  bottom: clamp(-132px, -9vw, -58px);
  width: min(48vw, 520px);
  aspect-ratio: 1;
  background: url('/static/aca-mark.png') center / contain no-repeat;
  opacity: 0.045;
  pointer-events: none;
  z-index: -1;
  filter: grayscale(0.08) saturate(0.85);
}

.site-header,
.portal-header,
.admin-header {
  background: #13281f;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: none;
  backdrop-filter: none;
}

.site-header nav,
.portal-header nav,
.admin-header nav {
  min-height: 64px;
}

.admin-version {
  color: rgba(247, 244, 234, 0.72);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}

.notification-count {
  display: inline-flex;
  min-width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #b91c1c;
  color: #fff;
  font-size: 0.7rem;
  padding: 0 0.35rem;
}

.notification-card.is-unread {
  border-color: rgba(4, 120, 87, 0.32);
  background: #fbfdf8;
}

/* Ver.4.08: actionable notification center. */
.notification-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.notification-toolbar > div:first-child > p {
  color: #77857c;
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0;
}

.notification-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.notification-filter {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 12rem;
  padding: 0.2rem;
  border: 1px solid #d3ddd7;
  border-radius: 6px;
  background: #f2f5f3;
}

.notification-filter button {
  display: inline-flex;
  min-height: 2.2rem;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: 4px;
  color: #617167;
  font-size: 0.72rem;
  font-weight: 800;
}

.notification-filter button.is-active {
  background: #fff;
  color: #155d3c;
  box-shadow: 0 1px 4px rgb(33 61 45 / 12%);
}

.notification-filter b {
  display: inline-grid;
  min-width: 1.3rem;
  height: 1.3rem;
  place-items: center;
  border-radius: 999px;
  background: #e3ebe6;
  font-size: 0.62rem;
}

.notification-filter button.is-active b {
  background: #dcece3;
  color: #155d3c;
}

.notification-card {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.85rem;
  padding: 1rem;
}

.notification-card.is-unread {
  box-shadow: inset 3px 0 #218259;
}

.notification-type-icon {
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  border-radius: 6px;
  background: #e8f0eb;
  color: #236646;
}

.notification-card-copy { min-width: 0; }

.notification-card-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.28rem;
  color: #77837c;
  font-size: 0.62rem;
  font-weight: 700;
  flex-wrap: wrap;
}

.notification-card-meta b {
  padding: 0.12rem 0.38rem;
  border-radius: 999px;
  background: #dcece3;
  color: #17613f;
}

.notification-card-meta time { margin-left: auto; }

.notification-card-copy h3 {
  color: #173d2b;
  font-size: 0.88rem;
  font-weight: 850;
}

.notification-card-copy p {
  margin-top: 0.3rem;
  color: #647168;
  font-size: 0.75rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

.notification-card-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.notification-card-actions :is(button, a) {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border: 1px solid #d1dcd5;
  border-radius: 5px;
  background: #fff;
  color: #4d6858;
}

.notification-card-actions :is(button, a):hover,
.notification-card-actions :is(button, a):focus-visible {
  border-color: #8daf9c;
  background: #edf4f0;
  color: #155d3c;
}

.notification-empty {
  display: grid;
  min-height: 14rem;
  place-items: center;
  align-content: center;
  gap: 0.5rem;
  border: 1px dashed #ccd8d1;
  border-radius: 7px;
  background: #f7f9f7;
  color: #738078;
  text-align: center;
}

.notification-empty i { font-size: 1.6rem; color: #7e9a8a; }
.notification-empty b { color: #365846; font-size: 0.9rem; }
.notification-empty span { font-size: 0.7rem; }

@media (max-width: 640px) {
  .notification-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .notification-toolbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .notification-filter { min-width: 0; }

  .notification-card {
    grid-template-columns: 2.35rem minmax(0, 1fr) auto;
    gap: 0.65rem;
    padding: 0.85rem;
  }

  .notification-type-icon {
    width: 2.35rem;
    height: 2.35rem;
  }

  .notification-card-meta time {
    width: 100%;
    margin-left: 0;
  }

  .notification-card-actions {
    flex-direction: column;
  }
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}

.dashboard-card {
  display: grid;
  gap: 0.25rem;
}

.dashboard-card-icon {
  color: var(--aca-green);
  font-size: 1.1rem;
}

.dashboard-card-label {
  color: #617166;
  font-size: 0.78rem;
  font-weight: 700;
}

.dashboard-card-value {
  color: #13281f;
  font-size: 1.8rem;
  line-height: 1;
}

.audit-mini-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(19, 40, 31, 0.08);
  padding: 0.45rem 0;
}

.brand-mark,
.admin-mark {
  width: 42px;
  height: 42px;
  border-radius: 4px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: #f7f4ea;
}

.site-nav-link,
.site-nav-primary,
.portal-ghost-btn,
.portal-primary-btn,
.site-button-primary,
.site-button-secondary,
.site-button-muted,
.site-cta-primary,
.site-cta-secondary,
.site-icon-btn,
.admin-ghost-btn,
.admin-primary-btn,
.admin-action-btn,
.feed-mini-btn,
.feed-joined-label,
.feed-day-locked {
  border-radius: 4px;
  box-shadow: none;
  font-weight: 700;
}

.site-nav-link,
.portal-ghost-btn,
.admin-ghost-btn {
  border-color: rgba(255, 255, 255, 0.28);
  background: transparent;
}

.site-nav-primary,
.portal-primary-btn,
.admin-primary-btn {
  background: #f7f4ea;
  color: var(--aca-green);
}

.site-nav-primary:hover,
.portal-primary-btn:hover,
.admin-primary-btn:hover {
  background: #ebe5d8;
}

.site-cta-primary,
.site-button-primary,
.admin-action-btn,
.feed-complete-btn,
.feed-participate-btn {
  background: var(--aca-green);
  color: #fff;
  border: 1px solid var(--aca-green);
}

.site-cta-primary:hover,
.site-button-primary:hover,
.admin-action-btn:hover,
.feed-complete-btn:hover,
.feed-participate-btn:hover {
  background: #0f2d20;
}

.site-cta-secondary,
.site-button-secondary,
.site-icon-btn,
.feed-detail-btn {
  background: var(--aca-paper);
  color: var(--aca-green);
  border: 1px solid var(--aca-line);
}

.site-cta-secondary:hover,
.site-button-secondary:hover,
.site-icon-btn:hover,
.feed-detail-btn:hover {
  background: #f2eee4;
}

.site-button-muted,
.feed-cancel-btn,
.feed-joined-label,
.feed-day-locked {
  background: #ece7dc;
  color: #59635c;
}

.site-panel,
.portal-panel,
.admin-panel,
.subtle-panel {
  background: rgba(255, 253, 248, 0.98);
  border: 1px solid var(--aca-line);
  border-radius: 4px;
  box-shadow: none;
}

.subtle-panel {
  background: #f6f2e8;
}

.hero-section {
  text-align: left;
  padding-top: clamp(3rem, 8vw, 6.5rem);
  padding-bottom: clamp(2.5rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--aca-line);
  background:
    radial-gradient(circle at 86% 15%, rgba(61, 132, 95, 0.1), transparent 25rem),
    linear-gradient(180deg, rgba(251, 250, 244, 0.96), rgba(246, 250, 243, 0.92));
}

.hero-section .max-w-6xl {
  position: relative;
}

.hero-section h1,
.page-heading h1,
.portal-main h2,
.admin-main h1,
.admin-main h2,
.admin-main h3 {
  color: var(--aca-ink) !important;
  letter-spacing: 0;
}

.hero-section p {
  max-width: 42rem;
  color: #4d5b52;
}

.public-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(18rem, 0.68fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.public-hero-copy {
  display: grid;
  gap: 1.1rem;
}

.public-hero-copy h1 {
  color: #153f2c !important;
  font-size: clamp(2.35rem, 6vw, 5.4rem);
  line-height: 1.02;
  max-width: 9.5em;
  font-weight: 850;
}

.public-lead {
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.9;
}

.public-eyebrow,
.public-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #69885f;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.public-hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.6rem;
}

.site-cta-link {
  color: #235a3e;
  font-weight: 850;
  padding: 0.55rem 0.35rem;
}

.public-identity {
  display: grid;
  gap: 1.2rem;
  justify-items: center;
}

.public-identity-mark {
  width: min(100%, 25rem);
  aspect-ratio: 1;
  object-fit: contain;
  filter: saturate(0.95);
}

.public-facts {
  width: min(100%, 26rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #cadbcd;
  border-bottom: 1px solid #cadbcd;
}

.public-facts div {
  display: grid;
  gap: 0.28rem;
  padding: 0.95rem 0.75rem;
  text-align: center;
}

.public-facts div + div {
  border-left: 1px solid #cadbcd;
}

.public-facts dt {
  color: #71806e;
  font-size: 0.75rem;
  font-weight: 850;
}

.public-facts dd {
  color: #173f2d;
  font-size: 0.94rem;
  font-weight: 850;
  line-height: 1.35;
}

.public-section {
  scroll-margin-top: 5rem;
}

.public-section-heading {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1.25rem;
}

.public-section-heading h2 {
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-weight: 850;
  color: #1f4c36;
  line-height: 1.25;
  max-width: 21em;
}

.public-message-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.public-note {
  padding: 1.15rem 0;
  border-top: 1px solid #d8e3d6;
}

.public-note h3,
.public-activity h3 {
  font-size: 1.05rem;
  font-weight: 850;
  margin-bottom: 0.5rem;
  color: #1f4c36;
}

.public-note p,
.public-activity p,
.public-feature p,
.public-steps p,
.public-faq-grid p {
  color: #58625c;
  font-size: 0.92rem;
  line-height: 1.7;
}

.public-activity-list {
  display: grid;
  border-top: 1px solid #d8e3d6;
}

.public-activity {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid #d8e3d6;
}

.public-activity > span {
  color: #83a07f;
  font-size: 0.85rem;
  font-weight: 900;
}

.public-cat-carousel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(17rem, 0.65fr);
  gap: clamp(1rem, 4vw, 2.5rem);
  align-items: end;
  padding: 1rem 0 1.4rem;
  border-top: 1px solid #cadbcd;
  border-bottom: 1px solid #cadbcd;
}

.public-cat-frame {
  position: relative;
  overflow: hidden;
  background: #eef4ee;
  aspect-ratio: 16 / 10;
}

.public-cat-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.public-cat-copy {
  display: grid;
  gap: 0.6rem;
  padding-bottom: 0.2rem;
}

.public-cat-index {
  color: #77906f;
  font-size: 0.78rem;
  font-weight: 900;
}

.public-cat-copy h3 {
  color: #153f2c;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  line-height: 1.35;
  font-weight: 850;
}

.public-cat-copy p {
  color: #58625c;
  line-height: 1.75;
}

.public-feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.public-feature {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(255, 255, 250, 0.74);
  border: 1px solid var(--aca-line);
}

.public-feature > span {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #edf7ed;
  color: #2d7a54;
}

.public-feature h3,
.public-steps h3 {
  font-weight: 850;
  color: #2f6148;
  margin-bottom: 0.25rem;
}

.public-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  counter-reset: step;
}

.public-steps li {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding: 1rem;
  background: #fffefa;
  border: 1px solid var(--aca-line);
}

.public-steps li > span {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #3b8060;
  color: #fff;
  font-weight: 900;
}

.public-faq-grid {
  display: grid;
  gap: 0.7rem;
}

.public-faq-grid summary {
  cursor: pointer;
  font-weight: 850;
  color: #2f6148;
}

.public-faq-grid p {
  margin-top: 0.7rem;
}

.public-empty-event {
  border-top: 1px solid #d8e3d6;
  border-bottom: 1px solid #d8e3d6;
  padding: 1.5rem;
}

.public-join-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.25rem, 4vw, 2rem) 0;
  border-top: 1px solid #cadbcd;
  border-bottom: 1px solid #cadbcd;
}

.public-join-panel h2 {
  margin-top: 0.35rem;
  color: #153f2c;
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 850;
  line-height: 1.35;
}

.public-join-panel p {
  margin-top: 0.6rem;
  color: #58625c;
}

.page-heading {
  text-align: left;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}

.page-heading .page-mark {
  margin: 0;
}

.page-mark,
.login-mark,
.success-mark {
  width: 68px;
  height: 68px;
  border-radius: 4px;
}

.login-mark {
  width: 88px;
  height: 88px;
}

.activity-icon,
.user-dot,
.post-avatar,
.mention-option-icon,
.date-block {
  border-radius: 4px;
  background: #ece7dc;
  color: var(--aca-green);
}

.activity-card {
  min-height: 100%;
}

.date-block {
  border-color: var(--aca-line);
}

.site-footer {
  background: #13281f;
}

.points-hero,
.modal-hero {
  border-radius: 4px;
  background: #172d24;
  box-shadow: none;
}

.post-card {
  border-bottom-color: #e1dacd;
}

.post-body {
  border-radius: 4px;
}

.post-card:hover .post-body {
  background: #f5f1e7;
}

.post-avatar {
  background: #efe9dd;
}

.post-image,
.feeding-comment,
.detail-comment,
.feeding-comment-image,
.detail-comment-image {
  border-radius: 4px;
  border-color: var(--aca-line);
}

.mention-chip {
  border-radius: 3px;
  background: #e7f0fd;
  color: #1a66d0;
  border-color: #c6dcf8;
  font-weight: 700;
}

.mention-menu {
  border-radius: 4px;
  border-color: var(--aca-line);
  box-shadow: 0 16px 28px rgba(24, 33, 28, 0.12);
}

.mention-option {
  border-radius: 3px;
}

.mention-option:hover,
.mention-option.is-active {
  background: #f3edde;
}

.form-label {
  color: #303832;
  font-weight: 700;
}

.form-input,
.form-file {
  border-radius: 4px;
  border-color: var(--aca-line);
  background: #fffefa;
}

.form-input:focus {
  border-color: var(--aca-brass);
  box-shadow: 0 0 0 3px rgba(169, 132, 79, 0.16);
}

.form-file {
  border-style: solid;
  background: #f8f4ea;
}

.payment-option {
  border-radius: 4px;
  border-color: var(--aca-line);
  background: var(--aca-paper);
}

.payment-option:hover,
.payment-option:has(input:checked) {
  border-color: var(--aca-brass);
  background: #f5eee0;
}

.tab-btn {
  border-radius: 0;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, 0.72);
  padding: 0.65rem 0.85rem;
}

.tab-btn:hover {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.28);
}

.tab-btn.tab-active,
.admin-shell .tab-btn.tab-active {
  background: transparent;
  color: #fff;
  border-bottom-color: #d6c299;
  font-weight: 800;
}

.admin-shell .tab-btn {
  border-radius: 0;
}

.status-badge {
  border-radius: 3px;
  border: 1px solid rgba(24, 33, 28, 0.08);
}

.feed-shift-card {
  border-radius: 4px;
  background: #fbf8f0;
  border-color: var(--aca-line);
}

.feed-shift-time {
  color: var(--aca-green);
}

.feed-shift-mine,
.feed-shift-done {
  border-color: #b8a276;
  background: #f5edde;
}

.admin-shell table thead {
  background: #ece7dc;
  color: #313932;
}

.admin-shell table tr:hover {
  background: #f7f2e8;
}

.member-sort:hover {
  color: #6d512c;
}

.admin-shell .rounded-2xl,
.portal-shell .rounded-2xl,
.site-shell .rounded-2xl,
.rounded-xl,
.rounded-lg,
.rounded-full {
  border-radius: 4px !important;
}

#admin-events-list > div,
#mail-logs-list > details {
  border-color: var(--aca-line);
  border-radius: 4px;
  box-shadow: none;
}

.mail-status-list,
.mail-status-row {
  border-color: var(--aca-line);
}

.mail-status-row dd {
  color: var(--aca-green);
}

/* Quiet down Tailwind utility colors that still appear in generated rows */
.text-emerald-700,
.text-emerald-800,
.text-emerald-900,
.text-green-700,
.text-green-600,
.text-orange-600,
.text-orange-500 {
  color: var(--aca-green) !important;
}

.bg-emerald-50,
.bg-green-50,
.bg-green-100,
.bg-orange-50,
.bg-orange-100,
.bg-yellow-50,
.bg-yellow-100 {
  background-color: #f5eee0 !important;
}

.bg-emerald-100 {
  background-color: #ece7dc !important;
}

.bg-orange-600,
.bg-green-600,
.bg-gray-700 {
  background-color: var(--aca-green) !important;
}

.border-emerald-100,
.border-emerald-200,
.border-green-300,
.border-orange-300 {
  border-color: var(--aca-line) !important;
}

.hover\:bg-amber-50:hover,
.hover\:bg-emerald-50:hover,
.hover\:bg-orange-50:hover {
  background-color: #f7f2e8 !important;
}

.text-red-500,
.text-red-600,
.text-red-700 {
  color: var(--aca-danger) !important;
}

.bg-red-50,
.bg-red-100,
.bg-red-600 {
  background-color: #f4e4df !important;
}

.bg-red-600 {
  background-color: var(--aca-danger) !important;
}

@media (max-width: 640px) {
  .hero-section {
    text-align: left;
  }
  .hero-section h1 {
    font-size: 2.1rem;
    line-height: 1.35;
  }
  .page-heading {
    grid-template-columns: 1fr;
  }
}

.site-shell main > section > h2,
.portal-main .tab-panel > h2,
.portal-main .tab-panel > .portal-panel h2,
.admin-main h1 {
  text-align: left !important;
  border-bottom: 1px solid var(--aca-line);
  padding-bottom: 0.7rem;
}

.site-shell main {
  padding-top: 2.75rem;
}

#join-section {
  text-align: left;
  display: grid;
  gap: 0.4rem;
}

.login-shell .site-panel,
.apply-shell .site-panel {
  border-top: 4px solid var(--aca-green);
}

.login-shell {
  padding-top: clamp(2.5rem, 7vw, 5rem);
}

.login-shell .site-panel {
  background:
    linear-gradient(90deg, rgba(22, 58, 42, 0.04), transparent 38%),
    var(--aca-paper);
}

.portal-main,
.admin-main {
  padding-top: 1.75rem;
}

.portal-main .tab-panel,
.admin-main .tab-panel {
  animation: acaFadeIn 120ms ease-out;
}

@keyframes acaFadeIn {
  from {
    opacity: 0.84;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.portal-panel.p-4,
.admin-panel.p-4 {
  padding: 1.1rem !important;
}

.portal-panel.p-6,
.admin-panel.p-6,
.site-panel.p-6 {
  padding: 1.35rem !important;
}

.admin-panel.overflow-x-auto,
.portal-panel.overflow-x-auto {
  background: #fffdf8;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

th,
td {
  border-color: #e3ded2 !important;
}

tbody tr {
  transition: background 0.12s;
}

#timeline-list {
  background: rgba(255, 253, 248, 0.78);
  border: 1px solid var(--aca-line);
  border-radius: 4px;
  padding: 0.4rem 0.85rem;
}

#timeline-list:empty {
  display: none;
}

#timeline-list > .portal-panel {
  border: 0;
  background: transparent;
}

.event-card {
  transition: border-color 0.12s, background 0.12s;
}

.event-card:hover {
  transform: none;
  border-color: #b9aa8c;
  background: #fffaf0;
}

.event-view-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.event-view-header p { color:#77827a; font-size:.66rem; font-weight:800; letter-spacing:.08em; }
.event-view-header h2 { margin-top:.14rem; color:#173f2c; font-size:1.2rem; font-weight:800; }
.event-view-tools { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; justify-content:flex-end; }
.event-view-switch { display:flex; padding:.2rem; border:1px solid #dcd3c4; border-radius:6px; background:#faf7f0; }
.event-view-switch button { padding:.42rem .6rem; border-radius:4px; color:#647067; font-size:.76rem; font-weight:700; }
.event-view-switch button.is-active { background:#174d34; color:#fff; }
.event-calendar-nav { display:flex; align-items:center; gap:.45rem; }
.event-calendar-nav.hidden { display:none; }
.event-calendar-nav b { min-width:6.4rem; text-align:center; color:#284435; font-size:.82rem; }
.event-calendar { overflow:hidden; border:1px solid #e1d8ca; border-radius:6px; background:#fffdf8; }
.event-calendar-weekdays,.event-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.event-calendar-weekdays { border-bottom:1px solid #e8dfd2; background:#faf7f0; }
.event-calendar-weekdays span { padding:.45rem .2rem; text-align:center; color:#717a73; font-size:.68rem; font-weight:800; }
.event-calendar-weekdays span:first-child { color:#b04d4d; }.event-calendar-weekdays span:last-child { color:#4673a2; }
.event-calendar-cell { min-height:6.5rem; padding:.36rem; border-right:1px solid #eee7dc; border-bottom:1px solid #eee7dc; }
.event-calendar-cell:nth-child(7n) { border-right:0; }
.event-calendar-cell > b { display:block; margin-bottom:.25rem; color:#59655d; font-size:.7rem; }
.event-calendar-cell.is-empty { background:#fcfaf5; }
.event-calendar-item { display:block; width:100%; overflow:hidden; margin-bottom:.22rem; padding:.24rem .3rem; border-left:3px solid #31845b; border-radius:2px; background:#eff7f0; color:#1c4d34; font-size:.64rem; font-weight:700; line-height:1.35; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.event-calendar-item span { display:block; color:#6c8272; font-size:.57rem; font-weight:500; }
@media (max-width:640px) { .event-view-header { align-items:flex-start; flex-direction:column; } .event-view-tools { width:100%; justify-content:space-between; } .event-calendar-cell { min-height:4.6rem; padding:.22rem; } .event-calendar-item { padding:.18rem .2rem; font-size:.56rem; } .event-calendar-item span { display:none; } }

#app-modal > div,
#event-modal > div,
#feeding-modal > div {
  border-radius: 4px !important;
  border: 1px solid var(--aca-line);
}

#app-modal,
#event-modal,
#feeding-modal {
  background: rgba(20, 24, 21, 0.58) !important;
}

.detail-comment,
.feeding-comment {
  background: #fffaf0;
}

.user-dot,
.post-avatar,
.profile-avatar-preview {
  border-radius: 999px !important;
  overflow: hidden;
  object-fit: cover;
}

img.user-dot,
img.post-avatar {
  display: block;
  object-fit: cover;
  background: #efe9dd;
}

.user-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #efe9dd;
  color: var(--aca-green);
}

.reward-style--forest {
  --reward-main: #12603b;
  --reward-accent: #6cad7d;
  --reward-soft: #e8f4eb;
}

.reward-style--sky {
  --reward-main: #24668a;
  --reward-accent: #80b9d0;
  --reward-soft: #e8f4f8;
}

.reward-style--sakura {
  --reward-main: #9d5268;
  --reward-accent: #dfa1b1;
  --reward-soft: #faedf1;
}

.reward-style--gold {
  --reward-main: #8b6818;
  --reward-accent: #e0bd5a;
  --reward-soft: #fbf3d8;
}

.reward-style--silver {
  --reward-main: #59636b;
  --reward-accent: #aeb9c0;
  --reward-soft: #eef1f2;
}

.reward-style--midnight {
  --reward-main: #28313f;
  --reward-accent: #65738d;
  --reward-soft: #e9edf3;
}

.reward-style--neon {
  --reward-main: #007f83;
  --reward-accent: #35f2c2;
  --reward-soft: #dcfff6;
}

.reward-style--crimson {
  --reward-main: #9d1838;
  --reward-accent: #ff6577;
  --reward-soft: #fff0f2;
}

.reward-style--aurora {
  --reward-main: #376c77;
  --reward-accent: #70e2bd;
  --reward-soft: #e9fbf8;
}

.reward-style--obsidian {
  --reward-main: #332c48;
  --reward-accent: #8a78bb;
  --reward-soft: #eeebf5;
}

.reward-style--prism {
  --reward-main: #62458c;
  --reward-accent: #ef63b4;
  --reward-soft: #f7efff;
}

.member-title {
  display: inline-flex;
  min-height: 1.35rem;
  align-items: center;
  gap: 0.28rem;
  margin-left: 0.4rem;
  padding: 0.16rem 0.42rem;
  border: 1px solid color-mix(in srgb, var(--reward-main) 35%, transparent);
  border-radius: 999px;
  background: var(--reward-soft);
  color: var(--reward-main);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.1;
  vertical-align: middle;
  white-space: nowrap;
}

.member-title i {
  font-size: 0.58rem;
}

.member-title.reward-style--neon { border-style: dashed; text-shadow: 0 0 8px rgba(32, 221, 184, 0.45); }
.member-title.reward-style--crimson { border-radius: 2px 999px 999px 2px; background: linear-gradient(105deg, #ffe8ed, #fff7f8); }
.member-title.reward-style--aurora { background: linear-gradient(100deg, #dffbef, #e7f4ff 48%, #fae8ff); }
.member-title.reward-style--obsidian { background: linear-gradient(115deg, #282433, #4b405f); color: #f3eaff; }
.member-title.reward-style--prism { background: linear-gradient(100deg, #ffe8ef, #ebfbff 38%, #f3edff 70%, #fff6d7); color: #563378; }

.reward-avatar-frame {
  display: inline-grid !important;
  position: relative;
  place-items: center;
  padding: 2px;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(145deg, var(--reward-accent), var(--reward-main));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--reward-main) 28%, transparent), 0 2px 7px rgba(20, 32, 24, 0.16);
  box-sizing: border-box;
  flex: 0 0 auto;
}

.reward-avatar-frame .reward-avatar-inner {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid #fffdf8;
  border-radius: 999px;
  background: #efe9dd;
  object-fit: cover;
  box-sizing: border-box;
}

.reward-avatar-frame.reward-style--neon {
  background: conic-gradient(from 20deg, #0b5f70, #35f2c2, #dfff4f, #14b8d4, #0b5f70);
  box-shadow: 0 0 0 1px #0c7b80, 0 0 12px rgba(43, 237, 197, 0.55);
}

.reward-avatar-frame.reward-style--crimson {
  background: conic-gradient(from 135deg, #510c1d 0 24%, #ff7180 25% 35%, #8d102f 36% 70%, #ffd1d6 71% 76%, #510c1d 77%);
  box-shadow: 0 0 0 1px #8b1731, 0 3px 11px rgba(160, 20, 54, 0.34);
}

.reward-avatar-frame.reward-style--aurora {
  background: conic-gradient(from 0deg, #61e6b4, #69bff0, #d583e8, #b9f06f, #61e6b4);
  box-shadow: 0 0 0 1px rgba(74, 133, 145, 0.55), 0 0 15px rgba(90, 217, 189, 0.4);
}

.reward-avatar-frame.reward-style--obsidian {
  background: conic-gradient(from 210deg, #15131b, #5f507a 18%, #201b2a 42%, #a18dc4 48%, #17151d 70%, #15131b);
  box-shadow: 0 0 0 1px #332c42, inset 0 0 4px #d6c5ff, 0 4px 12px rgba(24, 19, 34, 0.42);
}

.reward-avatar-frame.reward-style--prism {
  background: conic-gradient(from 45deg, #ff5f85, #ffc94f, #70e48e, #56c8ef, #a878ef, #ff5f85);
  box-shadow: 0 0 0 1px rgba(99, 67, 136, 0.52), 0 0 17px rgba(203, 93, 207, 0.44);
}

/* レアリティ演出: 通常のプロフィール表示を壊さず、称号・フレームにだけ強さを足す。 */
.reward-rarity-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.2rem;
  padding: 0.1rem 0.36rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.57rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 1;
}

.reward-rarity--common { color: #617468; }
.reward-rarity--rare { color: #2375a1; }
.reward-rarity--epic { color: #8457a7; }
.reward-rarity--legendary { color: #a66f0d; }

.reward-rarity-card--rare { border-color: #8eb9cd; }
.reward-rarity-card--epic { border-color: #b18acb; box-shadow: 0 4px 16px rgba(126, 70, 161, 0.16); }
.reward-rarity-card--legendary { border-color: #e1bc54; box-shadow: 0 5px 19px rgba(183, 127, 17, 0.21); }

.member-title.reward-rarity--rare,
.reward-avatar-frame.reward-rarity--rare {
  box-shadow: 0 0 0 1px rgba(45, 137, 186, 0.2), 0 0 10px rgba(58, 159, 210, 0.18);
}

.member-title.reward-rarity--epic,
.reward-avatar-frame.reward-rarity--epic {
  border-color: rgba(139, 84, 174, 0.62) !important;
  box-shadow: 0 0 0 1px rgba(129, 71, 168, 0.34), 0 0 14px rgba(161, 91, 205, 0.32);
  animation: reward-epic-pulse 2.7s ease-in-out infinite;
}

.member-title.reward-rarity--legendary {
  border-color: #e6c466 !important;
  background-image: linear-gradient(115deg, var(--reward-soft), #fff8ce 45%, var(--reward-soft)) !important;
  background-size: 220% 100% !important;
  box-shadow: 0 0 0 1px rgba(191, 140, 25, 0.52), 0 0 18px rgba(230, 176, 55, 0.46), 0 0 31px rgba(196, 117, 19, 0.16);
  animation: reward-legendary-shine 3.2s linear infinite;
}

.reward-avatar-frame.reward-rarity--legendary {
  border-color: #e6c466 !important;
  box-shadow: 0 0 0 1px rgba(191, 140, 25, 0.52), 0 0 18px rgba(230, 176, 55, 0.46), 0 0 31px rgba(196, 117, 19, 0.16);
  animation: reward-legendary-glow 2.5s ease-in-out infinite;
}

.reward-avatar-frame.reward-rarity--legendary::before,
.reward-avatar-frame.reward-rarity--epic::before {
  position: absolute;
  width: calc(100% + 9px);
  height: calc(100% + 9px);
  border: 1px solid currentColor;
  border-radius: 50%;
  content: '';
  opacity: 0.58;
  animation: reward-frame-ring 2.7s ease-out infinite;
}

.reward-avatar-frame.reward-rarity--epic::before { animation-delay: 0.7s; }

@keyframes reward-epic-pulse {
  50% { box-shadow: 0 0 0 2px rgba(129, 71, 168, 0.28), 0 0 19px rgba(161, 91, 205, 0.52); }
}

@keyframes reward-legendary-shine {
  from { background-position: 180% 0; }
  to { background-position: -40% 0; }
}

@keyframes reward-legendary-glow {
  50% { filter: saturate(1.3) brightness(1.12); box-shadow: 0 0 0 2px rgba(255, 218, 108, 0.58), 0 0 24px rgba(230, 176, 55, 0.64); }
}

@keyframes reward-frame-ring {
  0% { transform: scale(0.84); opacity: 0.78; }
  100% { transform: scale(1.17); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .member-title.reward-rarity--epic,
  .reward-avatar-frame.reward-rarity--epic,
  .member-title.reward-rarity--legendary,
  .reward-avatar-frame.reward-rarity--legendary,
  .reward-avatar-frame.reward-rarity--legendary::before,
  .reward-avatar-frame.reward-rarity--epic::before { animation: none; }
}

/* Ver.4.0: admin operations workspace. */
.admin-shell {
  min-height: 100vh;
  background: #f2f5f3;
}

.admin-topbar {
  width: min(100%, 1500px);
}

.admin-frame {
  display: grid;
  width: min(100%, 1500px);
  min-height: calc(100vh - 65px);
  grid-template-columns: 15rem minmax(0, 1fr);
  margin: 0 auto;
}

.admin-sidebar {
  position: sticky;
  z-index: 16;
  top: 65px;
  align-self: start;
  height: calc(100vh - 65px);
  overflow-y: auto;
  border-right: 1px solid #d8e0db;
  background: #f8faf8;
  padding: 1.1rem 0.8rem 1.5rem;
}

.admin-operator {
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  margin: 0 0.35rem 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #dce3df;
}

.admin-operator-icon {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: 6px;
  background: #e3eee8;
  color: #1e6645;
}

.admin-operator b,
.admin-operator small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-operator b { color: #20372b; font-size: 0.78rem; }
.admin-operator small { margin-top: 0.1rem; color: #748078; font-size: 0.64rem; }

.admin-navigation {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0;
  overflow: visible;
}

.admin-nav-label {
  margin: 0.85rem 0.65rem 0.28rem;
  color: #849088;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0;
}

#admin-tabs .tab-btn {
  display: grid;
  width: 100%;
  min-height: 2.65rem;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  justify-content: initial;
  padding: 0.58rem 0.7rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #526158;
  font-size: 0.76rem;
  font-weight: 760;
  text-align: left;
}

#admin-tabs .tab-btn i {
  width: 1.35rem;
  margin: 0 !important;
  color: #78867e;
  text-align: center;
}

#admin-tabs .tab-btn:hover { background: #e9efeb; color: #1e5038; }
#admin-tabs .tab-btn.tab-active { background: #dfece5; color: #155b3a; box-shadow: inset 3px 0 #20734c; }
#admin-tabs .tab-btn.tab-active i { color: #176a43; }

.admin-main {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 1.5rem 1.65rem 3rem !important;
}

.admin-page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.admin-page-heading p,
.admin-operations-grid header small {
  margin-bottom: 0.18rem;
  color: #76837b;
  font-size: 0.58rem;
  font-weight: 900;
}

.admin-page-heading h1 {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  color: #18392a;
  font-size: 1.42rem;
}

.admin-page-heading h1 i { color: #286e4b !important; }
.admin-page-heading small { display: block; margin-top: 0.18rem; color: #718078; font-size: 0.7rem; }
.admin-page-actions { display: flex; gap: 0.45rem; align-items: center; }
.admin-page-actions .admin-ghost-btn { display: inline-flex; gap: 0.4rem; align-items: center; }
.admin-page-actions .is-spinning i { animation: admin-spin 0.7s linear infinite; }
@keyframes admin-spin { to { transform: rotate(360deg); } }

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.55rem;
}

.dashboard-card {
  position: relative;
  display: grid;
  min-height: 5rem;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  padding: 0.85rem;
  border: 1px solid #d7e0da;
  border-top: 1px solid #d7e0da;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(14, 47, 31, 0.04);
}

.dashboard-card-icon {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 6px;
  background: #e8f0eb;
  color: #286d4b;
}

.dashboard-card-copy { min-width: 0; }
.dashboard-card-label { display: block; color: #69776f; font-size: 0.65rem; font-weight: 760; }
.dashboard-card-value { display: block; margin-top: 0.05rem; color: #193d2b; font-size: 1.35rem; line-height: 1.1; }
.dashboard-card.is-attention .dashboard-card-icon { background: #f5ead6; color: #8c6326; }
.dashboard-card.is-danger .dashboard-card-icon { background: #f7e4e0; color: #a14335; }
.dashboard-card-arrow { right: 0.55rem; bottom: 0.5rem; }

.admin-operations-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.75rem;
}

.admin-operations-grid > .admin-panel {
  min-width: 0;
  padding: 1rem;
  box-shadow: 0 2px 9px rgba(14, 47, 31, 0.04);
}

.admin-operations-grid > .admin-panel > header {
  display: flex;
  min-height: 2.3rem;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid #e1e7e3;
}

.admin-operations-grid header h2 {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  color: #233e30;
  font-size: 0.9rem;
  font-weight: 850;
}

.admin-operations-grid header h2 i { color: #347354; }
.admin-operations-grid header > :is(a, button) { color: #2e6c4d; font-size: 0.66rem; font-weight: 800; }
.admin-work-queue { grid-column: span 8; }
.admin-quick-actions { grid-column: span 4; }
.admin-coverage-panel { grid-column: 1 / -1; }
.admin-upcoming-panel, .admin-recent-apps-panel { grid-column: span 6; }
.admin-system-panel { grid-column: span 4; }
.admin-audit-panel { grid-column: span 8; }

#dashboard-alert-count {
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  background: #edf1ef;
  color: #65736b;
  font-size: 0.62rem;
  font-weight: 850;
}

.dashboard-alerts { display: grid; gap: 0.4rem; }
.dashboard-alert {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  width: 100%;
  min-height: 3.6rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid #dce3df;
  border-left: 3px solid #6e8d7d;
  border-radius: 6px;
  background: #fbfcfb;
  color: #263d31;
  text-align: left;
  text-decoration: none;
}

.dashboard-alert.is-warning { border-left-color: #b27b2d; }
.dashboard-alert.is-danger { border-left-color: #b04c3c; }
.dashboard-alert.is-notice { border-left-color: #3c7188; }
.dashboard-alert-icon { display: grid; width: 2.1rem; height: 2.1rem; place-items: center; border-radius: 5px; background: #eef2f0; color: #4f6b5c; }
.dashboard-alert b, .dashboard-alert small { display: block; }
.dashboard-alert b { font-size: 0.76rem; }
.dashboard-alert small { margin-top: 0.12rem; color: #77837c; font-size: 0.63rem; font-weight: 600; }
.dashboard-alert-action { display: inline-flex; gap: 0.35rem; align-items: center; color: #3a6c50; font-size: 0.62rem; font-weight: 850; white-space: nowrap; }
.dashboard-clear { display: flex; min-height: 4.2rem; gap: 0.65rem; align-items: center; padding: 0.75rem; border: 1px solid #c8dbd0; border-radius: 6px; background: #f2f8f4; color: #296346; }
.dashboard-clear b, .dashboard-clear small { display: block; }
.dashboard-clear b { font-size: 0.77rem; }
.dashboard-clear small { margin-top: 0.1rem; color: #668074; font-size: 0.63rem; }

.admin-quick-actions > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.admin-quick-actions > div > :is(button, a) { display: grid; min-height: 4.6rem; place-items: center; align-content: center; gap: 0.35rem; padding: 0.55rem; border: 1px solid #dbe2de; border-radius: 6px; background: #f8faf8; color: #2d503d; font-size: 0.68rem; font-weight: 800; text-align: center; }
.admin-quick-actions > div > :is(button, a):hover { border-color: #9eb7aa; background: #edf4f0; }
.admin-quick-actions > div i { color: #347354; font-size: 1rem; }

.dashboard-coverage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.4rem; }
.coverage-day { display: grid; min-width: 0; gap: 0.16rem; padding: 0.6rem; border: 1px solid #dce3df; border-radius: 6px; background: #f8faf8; color: #30483b; text-align: center; }
.coverage-day small { color: #758179; font-size: 0.58rem; font-weight: 750; }
.coverage-day b { font-size: 0.78rem; }
.coverage-day span { display: inline-flex; justify-content: center; gap: 0.25rem; align-items: center; color: #2b7250; font-size: 0.58rem; font-weight: 800; }
.coverage-day.is-empty { border-color: #e3c5bd; background: #fff8f6; }
.coverage-day.is-empty span { color: #a24e3e; }
.coverage-day.is-complete { border-color: #bad4c5; background: #f0f7f3; }

.dashboard-compact-list { display: grid; gap: 0.28rem; }
.dashboard-list-row { display: grid; width: 100%; min-height: 3.65rem; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.65rem; align-items: center; padding: 0.45rem 0.3rem; border-bottom: 1px solid #e5eae7; color: #294033; text-align: left; }
.dashboard-list-row:last-child { border-bottom: 0; }
.dashboard-list-row > span:nth-child(2) { min-width: 0; }
.dashboard-list-row > span:nth-child(2) b, .dashboard-list-row > span:nth-child(2) small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-list-row > span:nth-child(2) b { font-size: 0.74rem; }
.dashboard-list-row > span:nth-child(2) small { margin-top: 0.12rem; color: #78847d; font-size: 0.61rem; }
.dashboard-date-tile { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; align-content: center; border-radius: 5px; background: #e9f0ec; color: #2a6044; line-height: 1; }
.dashboard-date-tile b { font-size: 0.82rem; }
.dashboard-date-tile small { margin-top: 0.12rem; font-size: 0.52rem; }
.dashboard-person-icon { display: grid; width: 2.3rem; height: 2.3rem; place-items: center; border-radius: 50%; background: #edf2ef; color: #47705a; }
.dashboard-row-meta { color: #66756d; font-size: 0.62rem; white-space: nowrap; }
.dashboard-row-meta i { margin-right: 0.2rem; }
.dashboard-empty-row { padding: 1.2rem 0.4rem; color: #829088; font-size: 0.68rem; text-align: center; }

.system-status-row { display: grid; min-height: 2.65rem; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; border-bottom: 1px solid #e5eae7; color: #536159; font-size: 0.68rem; }
.system-status-row:last-child { border-bottom: 0; }
.system-status-row span { display: inline-flex; gap: 0.4rem; align-items: center; }
.system-status-row span i { width: 1rem; color: #6b7e73; text-align: center; }
.system-status-row b { display: inline-flex; gap: 0.3rem; align-items: center; }
.system-status-row .is-ok { color: #28704d; }
.system-status-row .is-warning { color: #a16426; }
.system-status-row small { max-width: 12rem; overflow: hidden; color: #68776e; font-size: 0.6rem; text-overflow: ellipsis; white-space: nowrap; }

.audit-mini-row { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto; gap: 0.55rem; align-items: center; padding: 0.38rem 0; border-bottom: 1px solid #e7ebe9; }
.audit-mini-row:last-child { border-bottom: 0; }
.audit-mini-icon { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 5px; background: #eef2f0; color: #63776c; font-size: 0.65rem; }
.audit-mini-row > span:nth-child(2) b, .audit-mini-row > span:nth-child(2) small { display: block; }
.audit-mini-row > span:nth-child(2) b { font-size: 0.68rem; }
.audit-mini-row > span:nth-child(2) small { color: #708078; font-size: 0.61rem; }

.application-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.45rem; margin-bottom: 0.7rem; }
.application-stat { display: flex; min-height: 3.6rem; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.65rem 0.75rem; border: 1px solid #d9e1dc; border-radius: 6px; background: #fff; color: #637169; text-align: left; }
.application-stat span { font-size: 0.65rem; font-weight: 760; }
.application-stat b { color: #244936; font-size: 1rem; }
.application-stat.is-active { border-color: #75a78d; background: #e8f2ed; color: #1f6544; box-shadow: inset 0 -2px #2f8057; }

.application-toolbar { display: grid; grid-template-columns: minmax(15rem, 1fr) 12rem 10rem 2.7rem; gap: 0.55rem; align-items: center; margin-bottom: 0.55rem; padding: 0.7rem; box-shadow: none; }
.application-search-field { display: grid; grid-template-columns: 1.35rem minmax(0, 1fr); gap: 0.4rem; align-items: center; min-height: 2.65rem; padding: 0 0.7rem; border: 1px solid #cfd9d3; border-radius: 6px; background: #fff; }
.application-search-field i { color: #718078; text-align: center; }
.application-search-field input { width: 100%; border: 0; outline: 0; background: transparent; color: #263c31; font-size: 0.78rem; }
.application-toolbar .form-input { min-height: 2.65rem; }
.application-toolbar .admin-ghost-btn { min-width: 2.7rem; padding: 0; }
.admin-list-count { margin: 0 0 0.45rem; color: #748179; font-size: 0.65rem; text-align: right; }
.application-row-action .admin-ghost-btn { display: inline-flex; min-height: 2.2rem; gap: 0.35rem; align-items: center; }

@media (max-width: 1180px) {
  .dashboard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-work-queue, .admin-quick-actions { grid-column: span 6; }
  .admin-system-panel, .admin-audit-panel { grid-column: span 6; }
  .application-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .admin-frame { display: block; min-height: 0; }
  .admin-sidebar { top: 64px; height: auto; overflow: visible; border-right: 0; border-bottom: 1px solid #d7e0db; padding: 0; }
  .admin-operator, .admin-nav-label { display: none; }
  .admin-navigation, #admin-tabs { display: flex !important; flex-direction: row; gap: 0.3rem !important; padding: 0.45rem 0.75rem !important; overflow-x: auto !important; scroll-snap-type: x proximity; scrollbar-width: none; }
  #admin-tabs::-webkit-scrollbar { display: none; }
  #admin-tabs .tab-btn { display: inline-flex; flex: 0 0 auto; width: auto; min-height: 2.35rem; gap: 0.35rem; padding: 0.42rem 0.65rem; box-shadow: none; white-space: nowrap; }
  #admin-tabs .tab-btn i { width: auto; }
  #admin-tabs .tab-btn.tab-active { box-shadow: inset 0 -2px #20734c; }
  .admin-main { padding: 1rem 0.85rem 2.5rem !important; }
  .application-toolbar { grid-template-columns: minmax(0, 1fr) minmax(8.5rem, auto) 2.7rem; }
  .application-toolbar .application-search-field { grid-column: 1 / -1; }
  #application-sort { grid-column: 1 / 2; }
}

@media (max-width: 680px) {
  .admin-page-heading { align-items: flex-start; }
  .admin-page-heading h1 { font-size: 1.18rem; }
  .admin-page-actions .admin-ghost-btn span { display: none; }
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-card { min-height: 4.5rem; padding: 0.7rem; }
  .dashboard-card-value { font-size: 1.18rem; }
  .admin-operations-grid { grid-template-columns: 1fr; }
  .admin-operations-grid > .admin-panel { grid-column: 1 !important; padding: 0.85rem; }
  .admin-work-queue { order: 1; }
  .admin-coverage-panel { order: 2; }
  .admin-quick-actions { order: 3; }
  .admin-upcoming-panel { order: 4; }
  .admin-recent-apps-panel { order: 5; }
  .admin-system-panel { order: 6; }
  .admin-audit-panel { order: 7; }
  .dashboard-alert { grid-template-columns: 2rem minmax(0, 1fr); }
  .dashboard-alert-action { grid-column: 2; justify-self: start; }
  .dashboard-coverage { grid-template-columns: repeat(7, minmax(4.25rem, 1fr)); overflow-x: auto; padding-bottom: 0.25rem; scroll-snap-type: x proximity; }
  .coverage-day { scroll-snap-align: start; }
  .application-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .application-stat { min-height: 3.2rem; padding: 0.5rem; }
  .application-stat span { font-size: 0.59rem; }
  .application-toolbar { grid-template-columns: minmax(0, 1fr) 2.7rem; }
  .application-toolbar #status-filter, .application-toolbar #application-sort { grid-column: auto; min-width: 0; }
  .application-toolbar #status-filter { grid-column: 1; }
  .application-toolbar #application-sort { grid-column: 1; }
  .application-toolbar #application-filter-reset { grid-column: 2; grid-row: 2 / 4; height: 100%; }

  #applications-table { display: block; min-width: 0; }
  #applications-table thead { display: none; }
  #applications-table tbody { display: grid; gap: 0.55rem; padding: 0.55rem; }
  #applications-table .application-row { display: grid; grid-template-columns: 1fr; padding: 0.7rem; border: 1px solid #d9e2dc; border-left: 3px solid #889a90; border-radius: 6px; background: #fff; }
  #applications-table .application-row[data-status="unconfirmed"] { border-left-color: #7a8780; }
  #applications-table .application-row[data-status="awaiting_payment"] { border-left-color: #b27b2d; }
  #applications-table .application-row[data-status="paid"] { border-left-color: #3c7188; }
  #applications-table .application-row[data-status="approved"] { border-left-color: #2f8057; }
  #applications-table .application-row[data-status="rejected"] { border-left-color: #af4d3e; }
  #applications-table .application-row td { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0.55rem; align-items: start; padding: 0.36rem 0; border-bottom: 1px solid #edf0ee; overflow-wrap: anywhere; }
  #applications-table .application-row td::before { content: attr(data-label); color: #7a867f; font-size: 0.61rem; font-weight: 750; }
  #applications-table .application-row .application-row-action { display: block; padding-top: 0.65rem; border-bottom: 0; }
  #applications-table .application-row .application-row-action::before { display: none; }
  #applications-table .application-row-action .admin-ghost-btn { width: 100%; justify-content: center; }
  .admin-scroll-hint { display: none; }
  .admin-table-scroll { overflow: visible; border: 0; background: transparent; box-shadow: none; }
}

@media (max-width: 390px) {
  .dashboard-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-card { grid-template-columns: 1.9rem minmax(0, 1fr); gap: 0.45rem; }
  .dashboard-card-icon { width: 1.9rem; height: 1.9rem; }
  .application-stats { gap: 0.3rem; }
}

/* Ver.3.11: permission-aware admin command search. */
.admin-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.4rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  color: #fff;
  font-weight: 750;
}

.admin-search-trigger kbd {
  padding: 0.12rem 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  font: inherit;
  font-size: 0.65rem;
  opacity: 0.72;
}

.admin-search-modal {
  position: fixed;
  z-index: 70;
  inset: 0;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: min(12vh, 6rem) 1rem 1rem;
}

.admin-search-modal.hidden { display: none; }
.admin-search-open { overflow: hidden; }

.admin-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 28, 19, 0.62);
  backdrop-filter: blur(3px);
}

.admin-search-panel {
  position: relative;
  width: min(42rem, 100%);
  max-height: min(76vh, 42rem);
  overflow: hidden;
  border: 1px solid #cbd9d1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(7, 37, 24, 0.24);
}

.admin-search-field {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #dfe8e2;
}

.admin-search-field > i { color: #287451; }
.admin-search-field label { display: block; color: #64766d; font-size: 0.68rem; font-weight: 800; }
.admin-search-field input { width: 100%; border: 0; outline: 0; background: transparent; color: #143d2b; font-size: 1rem; font-weight: 700; }
.admin-search-field input::placeholder { color: #96a59d; font-weight: 500; }
.admin-search-field input::-webkit-search-cancel-button {
  width: 0;
  height: 0;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

.admin-search-close {
  display: grid;
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 5px;
  color: #60736a;
}

.admin-search-close:hover { background: #edf4f0; color: #174a33; }
.admin-search-results { max-height: min(57vh, 31rem); overflow-y: auto; padding: 0.45rem; }

.admin-search-group h3 {
  display: flex;
  justify-content: space-between;
  padding: 0.55rem 0.65rem 0.3rem;
  color: #718078;
  font-size: 0.7rem;
  font-weight: 850;
}

.admin-search-group h3 span { font-weight: 650; }
.admin-search-result {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto 0.8rem;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.65rem;
  border-radius: 6px;
  text-align: left;
}

.admin-search-result:hover,
.admin-search-result.is-active { background: #e9f3ed; }
.admin-search-result-icon { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: 5px; background: #edf4f0; color: #226e4b; }
.admin-search-result-copy { min-width: 0; }
.admin-search-result-copy b, .admin-search-result-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-search-result-copy b { color: #173d2c; font-size: 0.88rem; }
.admin-search-result-copy small { margin-top: 0.12rem; color: #708078; font-size: 0.7rem; }
.admin-search-result-meta { padding: 0.2rem 0.4rem; border-radius: 4px; background: #f1f3f2; color: #5f6d66; font-size: 0.65rem; font-weight: 750; white-space: nowrap; }
.admin-search-result > i { color: #91a098; font-size: 0.68rem; }

.admin-search-empty { display: grid; min-height: 11rem; place-items: center; align-content: center; gap: 0.7rem; color: #77877f; text-align: center; font-size: 0.82rem; }
.admin-search-empty > i { color: #4c8066; font-size: 1.2rem; }
.admin-search-empty.is-error, .admin-search-empty.is-error > i { color: #a44738; }
.admin-search-footer { display: flex; gap: 1rem; padding: 0.55rem 0.8rem; border-top: 1px solid #e2e9e5; background: #f8faf9; color: #7a8780; font-size: 0.65rem; }
.admin-search-footer kbd { display: inline-block; min-width: 1.2rem; margin-right: 0.12rem; padding: 0.1rem 0.25rem; border: 1px solid #cbd5cf; border-radius: 3px; background: #fff; color: #485950; font: inherit; text-align: center; }

.admin-search-target { outline: 3px solid rgba(34, 132, 87, 0.34); outline-offset: 3px; }

.admin-event-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.admin-event-row {
  border: 1px solid #dce7e0;
  border-radius: 7px !important;
  box-shadow: 0 3px 10px rgba(14, 56, 37, 0.05) !important;
}

@media (max-width: 640px) {
  .admin-search-trigger kbd { display: none; }
  .admin-search-modal { padding: 0; align-items: end; }
  .admin-search-panel { width: 100%; max-height: 88dvh; border-width: 1px 0 0; border-radius: 8px 8px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .admin-search-results { max-height: calc(88dvh - 7.5rem); }
  .admin-search-result { grid-template-columns: 2.25rem minmax(0, 1fr) auto; }
  .admin-search-result > i { display: none; }
  .admin-search-result-meta { max-width: 5.5rem; overflow: hidden; text-overflow: ellipsis; }
  .admin-search-footer { display: none; }
}

.post-member-title {
  margin-top: 0.12rem;
}

.comment-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.profile-avatar-panel {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1rem;
  border: 1px solid var(--aca-line);
  background: #fffaf0;
  border-radius: 4px;
}

.profile-avatar-preview {
  width: 5.25rem;
  height: 5.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efe9dd;
  color: var(--aca-green);
  font-size: 1.8rem;
  border: 1px solid #d9cfbd;
}

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

.profile-avatar-form {
  display: grid;
  gap: 0.65rem;
}

.portal-home-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid #d9cfbd;
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.96), rgba(245, 241, 231, 0.9)),
    rgba(255, 253, 248, 0.88);
  border-radius: 4px;
  box-shadow: 0 16px 44px rgba(26, 39, 31, 0.08);
}

.home-avatar {
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: #efe9dd;
  border: 1px solid #d9cfbd;
  color: var(--aca-green);
  font-size: 1.45rem;
}

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

.home-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.home-priority-card {
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.96), rgba(243, 238, 226, 0.92)),
    #fffdf8 !important;
  border-color: #d4c7b2 !important;
  box-shadow: 0 14px 34px rgba(26, 39, 31, 0.07);
}

.home-date-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.85rem;
  padding: 0.3rem 0.72rem;
  border-radius: 999px;
  background: #173b2a;
  color: #fffdf8;
  font-size: 0.78rem;
  font-weight: 800;
}

.home-task-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.home-task-item {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 4.4rem;
  padding: 0.75rem;
  border: 1px solid #e1d7c6;
  border-radius: 4px;
  background: rgba(255, 253, 248, 0.86);
  text-align: left;
  color: #25342b;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

.home-task-item:hover,
.home-task-item:focus-visible {
  background: #fffaf0;
  border-color: #b9aa8c;
  transform: translateY(-1px);
}

.home-task-icon {
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #efe9dd;
  border: 1px solid #ded3c1;
  color: var(--aca-green);
}

.home-task-item.is-attention .home-task-icon {
  background: #fff3d6;
  border-color: #e8c57c;
  color: #996515;
}

.home-task-item.is-notice .home-task-icon {
  background: #e8f4ee;
  border-color: #b9d8c6;
}

.home-task-item b,
.home-task-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-task-item b {
  font-size: 0.9rem;
  font-weight: 900;
}

.home-task-item small {
  margin-top: 0.16rem;
  color: #6b746d;
  font-size: 0.76rem;
}

.home-task-arrow {
  color: #9b927f;
  font-size: 0.75rem;
}

.home-card {
  position: relative;
  min-height: 11.5rem;
  background: rgba(255, 253, 248, 0.9) !important;
  border-color: #d9cfbd !important;
  box-shadow: 0 12px 30px rgba(26, 39, 31, 0.06);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.home-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #173b2a;
  opacity: 0.86;
}

.home-card:hover {
  transform: translateY(-1px);
  border-color: #b9aa8c !important;
  box-shadow: 0 18px 42px rgba(26, 39, 31, 0.09);
}

.home-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}

.home-section-head h2 {
  font-size: 1rem;
  font-weight: 800;
  color: #173b2a;
}

.home-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.42rem 0.7rem;
  border: 1px solid #d8cfbd;
  border-radius: 999px;
  background: #fffdf8;
  color: #173b2a;
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: 0 5px 14px rgba(26, 39, 31, 0.06);
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.14s ease;
}

.home-nav-btn:hover,
.home-nav-btn:focus-visible {
  background: #173b2a;
  border-color: #173b2a;
  color: #fffdf8;
  transform: translateY(-1px);
}

.home-nav-btn i {
  font-size: 0.72rem;
}

.home-list {
  display: grid;
  gap: 0.45rem;
}

.home-list-item {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  padding: 0.68rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.home-list-item:hover {
  background: #f8f3e8;
  border-color: #eadfce;
}

.home-list-item b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #25342b;
  font-size: 0.92rem;
}

.home-list-item small {
  display: block;
  margin-top: 0.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #7a7f78;
  font-size: 0.76rem;
}

.home-list-icon {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #efe9dd;
  color: var(--aca-green);
  border-radius: 999px;
  border: 1px solid #ded3c1;
}

.home-empty {
  color: #7a7f78;
  font-size: 0.88rem;
  padding: 0.75rem 0.55rem;
  border: 1px dashed #ddd2c0;
  background: rgba(248, 243, 232, 0.6);
  border-radius: 4px;
}

.home-point-total {
  font-size: 2.25rem;
  line-height: 1;
  font-weight: 900;
  color: #173b2a;
}

.home-point-total span {
  margin-left: 0.25rem;
  font-size: 1rem;
  color: #667368;
}

.home-ranking {
  display: grid;
  gap: 0.35rem;
  color: #5d665e;
  font-size: 0.86rem;
  padding-top: 0.65rem;
  border-top: 1px solid #ece4d6;
}

.points-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.points-shop-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-left: 3px solid var(--aca-green);
}

.points-section-head h2 {
  margin: 0.1rem 0 0;
  color: #143f2b;
  font-size: 1.08rem;
  font-weight: 900;
}

.points-section-kicker {
  color: #7b837c;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0;
}

.points-balance-pill {
  display: inline-flex;
  min-width: 5.2rem;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.7rem;
  border: 1px solid #d4c7b2;
  border-radius: 999px;
  background: #f7f1e5;
  color: #173b2a;
  font-size: 0.82rem;
  font-weight: 900;
}

.reward-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 0.85rem;
}

.reward-card {
  display: grid;
  grid-template-rows: 6rem minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #ddd4c5;
  border-radius: 6px;
  background: #fffdf8;
  box-shadow: 0 1px 0 rgba(15, 52, 37, 0.04);
}

.reward-card.is-owned {
  border-color: #b7cdbb;
}

.reward-card.is-locked {
  background: #fbfaf7;
}

.reward-preview {
  display: grid;
  min-width: 0;
  place-items: center;
  padding: 0.75rem;
  background: linear-gradient(145deg, #f3eee3, #faf8f2);
  border-bottom: 1px solid #e5ddcf;
  position: relative;
  isolation: isolate;
}

.reward-card--gold .reward-preview,
.reward-card--silver .reward-preview,
.reward-card--midnight .reward-preview,
.reward-card--neon .reward-preview,
.reward-card--crimson .reward-preview,
.reward-card--aurora .reward-preview,
.reward-card--obsidian .reward-preview,
.reward-card--prism .reward-preview {
  overflow: hidden;
}

.reward-card--gold .reward-preview::before,
.reward-card--silver .reward-preview::before,
.reward-card--midnight .reward-preview::before,
.reward-card--neon .reward-preview::before,
.reward-card--crimson .reward-preview::before,
.reward-card--aurora .reward-preview::before,
.reward-card--obsidian .reward-preview::before,
.reward-card--prism .reward-preview::before {
  position: absolute;
  z-index: -1;
  width: 135%;
  height: 200%;
  content: '';
  transform: rotate(22deg) translateX(-72%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  animation: reward-shimmer 3.8s ease-in-out infinite;
}

.reward-card--gold { border-color: #dbc36d; box-shadow: 0 4px 14px rgba(180, 133, 23, 0.14); }
.reward-card--gold .reward-preview { background: radial-gradient(circle at 50% 20%, #fff9d9, #f5e5a7); }
.reward-card--silver { border-color: #bac4c9; box-shadow: 0 4px 14px rgba(79, 94, 103, 0.12); }
.reward-card--silver .reward-preview { background: radial-gradient(circle at 50% 20%, #ffffff, #dce5e8); }
.reward-card--midnight { border-color: #6e7c9a; box-shadow: 0 4px 14px rgba(31, 44, 74, 0.2); }
.reward-card--midnight .reward-preview { background: radial-gradient(circle at 50% 20%, #53617d, #202938); }
.reward-card--neon { border-color: #57cdbd; box-shadow: 0 4px 16px rgba(24, 177, 161, 0.16); }
.reward-card--neon .reward-preview { background: linear-gradient(145deg, #092c35, #0d5960); }
.reward-card--crimson { border-color: #d77b8f; box-shadow: 0 4px 16px rgba(157, 24, 56, 0.16); }
.reward-card--crimson .reward-preview { background: linear-gradient(145deg, #4b0d1c, #9a1d3a); }
.reward-card--aurora { border-color: #83cfc0; box-shadow: 0 4px 17px rgba(70, 168, 153, 0.16); }
.reward-card--aurora .reward-preview { background: linear-gradient(130deg, #ddfaeb, #dff2ff 52%, #f5ddfa); }
.reward-card--obsidian { border-color: #766a8f; box-shadow: 0 4px 17px rgba(45, 37, 60, 0.23); }
.reward-card--obsidian .reward-preview { background: linear-gradient(145deg, #17141d, #3f354e); }
.reward-card--prism { border-color: #cb8fbd; box-shadow: 0 4px 18px rgba(156, 78, 158, 0.2); }
.reward-card--prism .reward-preview { background: linear-gradient(125deg, #ffe4ea, #dff7ff 34%, #eee4ff 68%, #fff3c9); }

@media (max-width: 640px) {
  .points-shop-link { align-items: stretch; flex-direction: column; }
  .points-shop-link .site-button-primary { justify-content: center; width: 100%; }
}

@keyframes reward-shimmer {
  0%, 42% { transform: rotate(22deg) translateX(-72%); }
  72%, 100% { transform: rotate(22deg) translateX(78%); }
}

.reward-preview.is-compact {
  width: 4.25rem;
  min-height: 4.25rem;
  padding: 0.4rem;
  border: 0;
  border-radius: 4px;
}

.reward-title-preview {
  max-width: 100%;
  margin: 0;
  font-size: 0.76rem;
}

.reward-frame-preview {
  width: 4.1rem;
  height: 4.1rem;
  font-size: 1.15rem;
}

.reward-preview.is-compact .reward-frame-preview {
  width: 3.3rem;
  height: 3.3rem;
}

.reward-card-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 0.85rem;
}

.reward-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: #767d76;
  font-size: 0.68rem;
  font-weight: 800;
}

.reward-card-meta b {
  color: #17613a;
}

.reward-card h3,
.owned-reward-row h3 {
  margin: 0.3rem 0 0;
  color: #173b2a;
  font-size: 0.98rem;
  font-weight: 900;
}

.reward-card-body > p {
  min-height: 2.8rem;
  margin: 0.35rem 0 0.8rem;
  color: #626b64;
  font-size: 0.76rem;
  line-height: 1.55;
}

.reward-cost-progress {
  height: 0.28rem;
  overflow: hidden;
  margin: -0.25rem 0 0.7rem;
  border-radius: 999px;
  background: #e5e1d9;
}

.reward-cost-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #247650, #67a87e);
}

.reward-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-top: auto;
}

.reward-card-footer strong {
  color: #173b2a;
  font-size: 1.35rem;
  font-weight: 900;
}

.reward-card-footer strong small {
  margin-left: 0.18rem;
  color: #69726b;
  font-size: 0.7rem;
}

.reward-card-footer button {
  min-width: 6.8rem;
}

.reward-card-footer button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.reward-gacha-only {
  display: inline-flex;
  min-height: 2.35rem;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid #8e72b1;
  border-radius: 5px;
  background: #eee8f7;
  color: #5e3d82;
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.reward-card-footer .reward-gacha-price {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #69468d;
  font-size: 0.85rem;
}

.reward-category {
  display: grid;
  gap: 0.8rem;
}

.reward-category + .reward-category {
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid #e4dccd;
}

.reward-category-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.reward-category-head > span {
  display: inline-grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border: 1px solid #d8cfbf;
  border-radius: 5px;
  background: #f6f1e6;
  color: var(--aca-green);
}

.reward-category-head p,
.reward-category-head h3,
.reward-category-head small {
  margin: 0;
}

.reward-category-head p {
  color: #748077;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.reward-category-head h3 {
  color: #173b2a;
  font-size: 1rem;
  font-weight: 900;
}

.reward-category-head small { color: #69726b; font-size: 0.7rem; }

.reward-view-tabs {
  position: sticky;
  z-index: 12;
  top: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  margin-bottom: 1rem;
  padding: 0.35rem;
  border: 1px solid #d9d1c3;
  border-radius: 7px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 5px 18px rgba(31, 55, 40, 0.08);
  backdrop-filter: blur(10px);
}

.reward-view-tabs button {
  display: inline-flex;
  min-height: 2.85rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 0;
  border-radius: 5px;
  color: #637068;
  font-size: 0.8rem;
  font-weight: 900;
}

.reward-view-tabs button.is-active {
  background: #173f2c;
  color: #fff;
}

.reward-view-tabs b {
  display: inline-grid;
  min-width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(20, 57, 39, 0.09);
  font-size: 0.62rem;
}

.reward-view-tabs .is-active b { background: rgba(255, 255, 255, 0.18); }

.reward-shop-tools {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto minmax(8rem, auto) minmax(9rem, auto);
  gap: 0.55rem;
  align-items: end;
  margin-bottom: 1.2rem;
  padding: 0.75rem;
  border: 1px solid #e0d8ca;
  border-radius: 6px;
  background: #f8f5ee;
}

.reward-search {
  display: flex;
  min-height: 2.55rem;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.75rem;
  border: 1px solid #cfc8bc;
  border-radius: 5px;
  background: #fff;
  color: #718078;
}

.reward-search:focus-within { border-color: #39805c; box-shadow: 0 0 0 2px rgba(57, 128, 92, 0.13); }
.reward-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #263a2e; font-size: 0.8rem; }

.reward-type-filter {
  display: flex;
  gap: 0.2rem;
  padding: 0.2rem;
  border: 1px solid #d5cec2;
  border-radius: 5px;
  background: #fff;
}

.reward-type-filter button {
  min-height: 2.1rem;
  padding: 0 0.6rem;
  border-radius: 3px;
  color: #68736c;
  font-size: 0.72rem;
  font-weight: 850;
  white-space: nowrap;
}

.reward-type-filter button.is-active { background: #e3eee7; color: #165839; }
.reward-type-filter i { margin-right: 0.25rem; }

.reward-select { display: grid; gap: 0.18rem; }
.reward-select span { color: #727a74; font-size: 0.6rem; font-weight: 850; }
.reward-select select { min-height: 2.55rem; padding: 0 1.8rem 0 0.55rem; border: 1px solid #cfc8bc; border-radius: 5px; background: #fff; color: #314238; font-size: 0.72rem; font-weight: 750; }
.reward-result-count { color: #68736c; font-size: 0.72rem; font-weight: 850; white-space: nowrap; }

.reward-gacha-panel {
  position: relative;
  display: flex;
  min-height: 9.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  overflow: hidden;
  padding: 1.2rem 1.35rem;
  border: 1px solid #75609e;
  border-radius: 7px;
  background: linear-gradient(125deg, #222944, #45326e 55%, #846138);
  color: #fff;
  box-shadow: 0 8px 20px rgba(42, 32, 75, 0.2);
}

.reward-gacha-panel::after {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.14), transparent 62%);
  transform: translateX(-100%);
  animation: gacha-sweep 5s ease-in-out infinite;
}

.reward-gacha-copy,
.reward-gacha-action { position: relative; z-index: 1; }
.reward-gacha-copy { max-width: 32rem; }
.reward-gacha-copy p { margin: 0; color: #f2d278; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.09em; }
.reward-gacha-copy h2 { margin: 0.15rem 0 0.3rem; color: #fff !important; font-size: 1.3rem; font-weight: 900; }
.reward-gacha-copy span { color: #e4e4ed; font-size: 0.75rem; line-height: 1.55; }
.reward-gacha-action { display: grid; gap: 0.45rem; justify-items: end; text-align: right; }
.reward-gacha-action strong { color: #fff5c8; font-size: 1.8rem; font-weight: 900; line-height: 1; }
.reward-gacha-action strong small { margin-left: 0.25rem; color: #eee8ff; font-size: 0.66rem; }
.reward-gacha-action .site-button-primary { border-color: #f2d278; background: #f7e09a; color: #36254d; }
.reward-gacha-orbit { position: absolute; border: 1px solid rgba(255,255,255,0.18); border-radius: 50%; pointer-events: none; }
.reward-gacha-orbit-a { width: 15rem; height: 15rem; right: 22%; top: -10rem; }
.reward-gacha-orbit-b { width: 9rem; height: 9rem; right: 2%; bottom: -5.5rem; border-color: rgba(242,210,120,0.45); }

@keyframes gacha-sweep {
  0%, 45% { transform: translateX(-110%); }
  75%, 100% { transform: translateX(130%); }
}

.reward-gacha-modal {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(20, 23, 37, 0.64);
}

.reward-gacha-result-card {
  width: min(100%, 25rem);
  padding: 1.5rem;
  border: 1px solid #f1d67e;
  border-radius: 8px;
  background: radial-gradient(circle at 50% 0, #fff7cf, #fffdf8 58%);
  box-shadow: 0 18px 55px rgba(0,0,0,0.34);
  text-align: center;
}

.reward-gacha-result-card > p { margin: 0 0 0.55rem; color: #84641c; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.09em; }
.reward-gacha-result-preview { display: grid; min-height: 6.5rem; place-items: center; }
.reward-gacha-result-card > span { color: #69726b; font-size: 0.72rem; font-weight: 800; }
.reward-gacha-result-card h2 { margin: 0.35rem 0; color: #173b2a; font-size: 1.35rem; font-weight: 900; }
.reward-gacha-result-card > small { display: block; min-height: 2.5rem; color: #5e675f; font-size: 0.77rem; line-height: 1.55; }
.reward-gacha-result-card button { width: 100%; margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .reward-card--gold .reward-preview::before,
  .reward-card--silver .reward-preview::before,
  .reward-card--midnight .reward-preview::before,
  .reward-gacha-panel::after { animation: none; }
}

.owned-reward-list {
  display: grid;
  gap: 0.6rem;
}

.owned-reward-row {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.65rem;
  border: 1px solid #e0d8ca;
  border-radius: 6px;
  background: #fffdf8;
}

.owned-reward-row.is-equipped {
  border-color: #a7c1ab;
  background: #f4faf5;
}

.owned-reward-type {
  color: #757d77;
  font-size: 0.67rem;
  font-weight: 800;
}

.owned-reward-row p {
  margin-top: 0.18rem;
  color: #7b827c;
  font-size: 0.68rem;
}

.points-empty {
  grid-column: 1 / -1;
  padding: 1rem;
  border: 1px dashed #d9cfbd;
  border-radius: 4px;
  background: #faf7f0;
  color: #777f78;
  font-size: 0.8rem;
}

.reward-redemption-list {
  display: grid;
  gap: 0.4rem;
}

.reward-redemption-list > li:not(.points-empty) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid #ece5d9;
  color: #344139;
  font-size: 0.8rem;
}

.reward-redemption-list small {
  display: block;
  margin-top: 0.15rem;
  color: #818781;
  font-size: 0.68rem;
}

.reward-redemption-list strong {
  color: #9b3d3d;
  white-space: nowrap;
}

.profile-equipped {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.8rem;
  border: 1px solid #ded5c6;
  border-radius: 6px;
  background: #faf7f0;
}

.profile-equipped > div {
  min-width: 0;
}

.profile-equipped > div > span:first-child {
  display: block;
  margin-bottom: 0.28rem;
  color: #777f78;
  font-size: 0.68rem;
  font-weight: 800;
}

.profile-equipped .member-title {
  margin-left: 0;
}

.profile-rewards-section {
  margin-bottom: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #e7dfd1;
}

.profile-rewards-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.profile-rewards-head p {
  color: #77827a;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.profile-rewards-head h3 {
  margin-top: 0.12rem;
  color: #173f2c;
  font-size: 0.95rem;
  font-weight: 800;
}

.reward-owned-note {
  color: #427153;
  font-size: 0.78rem;
  font-weight: 800;
}

.cat-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.library-filter-panel {
  background: rgba(255, 253, 248, 0.92) !important;
  border-color: #d9cfbd !important;
}

.library-filter-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 10rem 9rem auto;
  gap: 0.75rem;
  align-items: end;
}

.library-filter-grid label {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.library-filter-grid label > span {
  color: #3f493f;
  font-size: 0.78rem;
  font-weight: 800;
}

.library-filter-grid .site-button-secondary {
  min-height: 2.6rem;
  white-space: nowrap;
}

.library-result-count {
  margin-top: 0.75rem;
  color: #737b74;
  font-size: 0.82rem;
  font-weight: 700;
}

.cat-map-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.3rem;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: #e9f4ee;
  color: #145238;
  font-size: 0.74rem;
  font-weight: 900;
}

.feeding-map-spots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.feeding-map-spot {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  padding: 0.85rem;
  border: 1px solid #d9cfbd;
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.86);
}

.feeding-map-spot-badge {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 999px;
  background: #0f3f2a;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
}

.feeding-map-spot h4 {
  margin: 0 0 0.25rem;
  color: #143f2b;
  font-size: 0.98rem;
  font-weight: 900;
}

.feeding-map-spot p {
  margin: 0;
  color: #5d665e;
  font-size: 0.84rem;
  line-height: 1.65;
}

.feeding-map-admin-spots {
  display: grid;
  gap: 0.85rem;
}

.feeding-map-admin-spot {
  margin: 0;
  padding: 0.9rem;
  border: 1px solid #d9cfbd;
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.8);
}

.feeding-map-admin-spot legend {
  padding: 0 0.4rem;
  color: #17442f;
  font-size: 0.78rem;
  font-weight: 900;
}

.feeding-map-admin-spot label {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.65rem;
  color: #3f493f;
  font-size: 0.78rem;
  font-weight: 800;
}

.settings-wide-panel {
  grid-column: 1 / -1;
}

.role-permissions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.85rem;
}

.role-permission-presets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.65rem;
}

.role-preset-btn {
  display: grid;
  gap: 0.2rem;
  min-height: 4.4rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid #cddccd;
  border-radius: 8px;
  background: #f7faf7;
  color: #143f2b;
  text-align: left;
  transition: border-color 0.14s ease, background 0.14s ease, transform 0.14s ease;
}

.role-preset-btn:hover {
  border-color: #8cab8c;
  background: #eef7ef;
}

.role-preset-btn b {
  font-size: 0.86rem;
  font-weight: 900;
}

.role-preset-btn span {
  color: #5d665e;
  font-size: 0.72rem;
  line-height: 1.45;
}

.role-permission-card {
  display: grid;
  gap: 0.8rem;
  padding: 0.95rem;
  border: 1px solid #d9cfbd;
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.82);
}

.role-permission-card h3 {
  margin: 0;
  color: #143f2b;
  font-size: 0.98rem;
  font-weight: 900;
}

.role-permission-card p {
  margin: 0.2rem 0 0;
  color: #6b746c;
  font-size: 0.76rem;
  line-height: 1.55;
}

.role-permission-options {
  display: grid;
  gap: 0.48rem;
}

.role-permission-options label {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  color: #3f493f;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.45;
}

.role-permission-options input {
  margin-top: 0.15rem;
  accent-color: #11633c;
}

.cat-card {
  display: grid;
  overflow: hidden;
  padding: 0;
  text-align: left;
  transition: border-color 0.14s ease, transform 0.14s ease, background 0.14s ease;
}

.cat-card:hover {
  transform: translateY(-1px);
  border-color: #b9aa8c;
  background: #fffaf0;
}

.cat-card-image,
.cat-card-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #efe9dd;
}

.cat-card-placeholder,
.admin-cat-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--aca-green);
  font-size: 2rem;
}

.cat-card-body {
  display: grid;
  gap: 0.35rem;
  padding: 1rem;
}

.cat-card-status {
  width: fit-content;
  padding: 0.18rem 0.45rem;
  border: 1px solid #dce6dc;
  background: #edf7ed;
  color: #2d7a54;
  font-size: 0.72rem;
  font-weight: 800;
}

.cat-card-body b {
  color: #25342b;
  font-size: 1.05rem;
}

.cat-card-body small,
.cat-card-meta,
.cat-card-desc {
  color: #667368;
  font-size: 0.84rem;
  line-height: 1.6;
}

.cat-detail-hero {
  position: relative;
  background: #efe9dd;
}

.cat-detail-image {
  display: block;
  width: 100%;
  max-height: 430px;
  object-fit: cover;
  background: #efe9dd;
}

.cat-detail-hero .cat-modal-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
}

.cat-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.cat-detail-list div {
  border: 1px solid var(--aca-line);
  background: #fffaf0;
  padding: 0.75rem;
}

.cat-detail-list dt {
  color: #6b8064;
  font-size: 0.74rem;
  font-weight: 800;
}

.cat-detail-list dd {
  margin-top: 0.18rem;
  color: #25342b;
  font-weight: 700;
}

.cat-detail-section {
  border-top: 1px solid var(--aca-line);
  padding-top: 1rem;
  margin-top: 1rem;
}

.cat-detail-section h3 {
  color: #2f6148;
  font-weight: 850;
  margin-bottom: 0.35rem;
}

.cat-detail-section p {
  color: #4d5b52;
  line-height: 1.75;
  white-space: pre-wrap;
}

.admin-library-grid {
  display: grid;
  grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.admin-main .admin-ghost-btn {
  border-color: #cbd8ce;
  background: #f8faf7;
  color: #17442f;
}

.admin-main .admin-ghost-btn:hover {
  border-color: #91aa96;
  background: #edf4ee;
}

.admin-danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.7rem;
  border: 1px solid #dfb9b9;
  border-radius: 4px;
  background: #fff7f7;
  color: #963d3d;
  font-weight: 800;
}

.admin-danger-btn:hover {
  border-color: #c88484;
  background: #fceaea;
}

.admin-reward-layout {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.reward-admin-preview {
  display: grid;
  min-height: 7.5rem;
  place-items: center;
  padding: 1rem;
  border: 1px solid #ddd4c5;
  border-radius: 6px;
  background: linear-gradient(145deg, #f2ede2, #faf8f2);
}

.admin-reward-frame {
  width: 5rem;
  height: 5rem;
  font-size: 1.35rem;
}

.admin-reward-list {
  display: grid;
  gap: 0.7rem;
}

.admin-reward-item {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.8rem;
  border: 1px solid #ded6c8;
  border-radius: 6px;
  background: #fffdf8;
}

.admin-reward-item.is-inactive {
  background: #f4f4f1;
  opacity: 0.72;
}

.admin-reward-visual {
  display: grid;
  width: 5.25rem;
  min-height: 5.25rem;
  place-items: center;
  padding: 0.35rem;
  border-radius: 4px;
  background: #f3eee3;
}

.admin-reward-meta,
.admin-reward-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  color: #727a73;
  font-size: 0.68rem;
  font-weight: 800;
}

.admin-reward-meta b {
  color: #17613a;
}

.admin-reward-item h3 {
  margin-top: 0.22rem;
  color: #173b2a;
  font-size: 0.95rem;
  font-weight: 900;
}

.admin-reward-item p {
  margin: 0.18rem 0 0.5rem;
  color: #606a62;
  font-size: 0.74rem;
  line-height: 1.5;
}

.admin-reward-stats strong {
  color: #173b2a;
  font-size: 0.78rem;
}

.admin-reward-actions {
  display: grid;
  gap: 0.45rem;
}

.admin-cat-list {
  display: grid;
  gap: 0.75rem;
}

.admin-cat-card {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.9rem;
  padding: 0.8rem;
  border: 1px solid var(--aca-line);
  background: #fffefa;
}

.admin-cat-card img,
.admin-cat-placeholder {
  width: 7.5rem;
  height: 6rem;
  object-fit: cover;
  background: #efe9dd;
}

.admin-cat-card-body {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.admin-cat-card-body b,
.admin-cat-card-body small {
  display: block;
}

.admin-cat-card-body small,
.admin-cat-card-body p {
  color: #667368;
  font-size: 0.82rem;
  line-height: 1.5;
}

.admin-cat-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.2rem;
}

@media (max-width: 640px) {
  .profile-avatar-panel {
    grid-template-columns: 1fr;
  }

  .portal-home-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-actions {
    justify-content: flex-start;
  }

  .cat-detail-list,
  .admin-library-grid,
  .admin-reward-layout,
  .admin-cat-card {
    grid-template-columns: 1fr;
  }

  .admin-reward-item {
    grid-template-columns: 4.25rem minmax(0, 1fr);
  }

  .admin-reward-visual {
    width: 4.25rem;
    min-height: 4.25rem;
  }

  .admin-reward-actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }

  .admin-reward-actions > button {
    width: 100%;
  }

  .admin-cat-card img,
  .admin-cat-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* Ver.3.09: idle-session warning. */
.session-warning-open {
  overflow: hidden;
}

.session-timeout-layer {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(7, 30, 21, 0.72);
  backdrop-filter: blur(5px);
}

.session-timeout-layer.hidden {
  display: none;
}

.session-timeout-dialog {
  width: min(100%, 27rem);
  padding: 1.5rem;
  border: 1px solid #b8cbbf;
  border-top: 4px solid #1d724b;
  border-radius: 8px;
  background: #fffefb;
  box-shadow: 0 24px 60px rgba(3, 24, 16, 0.3);
  color: #173d2e;
  text-align: center;
}

.session-timeout-icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.8rem;
  place-items: center;
  border-radius: 50%;
  background: #e5f1ea;
  color: #176843;
  font-size: 1.2rem;
}

.session-timeout-dialog > p:first-of-type {
  margin: 0 0 0.3rem;
  color: #6d8177;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.session-timeout-dialog h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 850;
}

#session-timeout-description {
  margin: 0.7rem auto 1rem;
  color: #66736d;
  font-size: 0.84rem;
  line-height: 1.7;
}

#session-timeout-countdown {
  display: block;
  margin-bottom: 1.2rem;
  color: #164f37;
  font-variant-numeric: tabular-nums;
  font-size: 2rem;
  line-height: 1;
}

.session-timeout-actions {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 0.65rem;
}

.session-timeout-actions button {
  min-height: 2.8rem;
}

@media (max-width: 420px) {
  .session-timeout-dialog {
    padding: 1.25rem 1rem;
  }

  .session-timeout-actions {
    grid-template-columns: 1fr;
  }
}

/* Ver.4.01: team tasks and member action center. */
.admin-shell .dashboard-grid {
  grid-template-columns: repeat(auto-fit, minmax(9.25rem, 1fr));
}

.admin-task-panel {
  grid-column: 1 / -1;
}

.dashboard-task-open.is-overdue {
  border-left: 3px solid #b34d3d;
  background: #fff9f7;
}

.task-priority-dot {
  border-radius: 6px;
}

.task-priority-dot.is-urgent {
  background: #f7e2de;
  color: #aa4132;
}

.task-priority-dot.is-high {
  background: #f7ebd8;
  color: #95641e;
}

.operation-task-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.operation-task-stats button {
  display: flex;
  min-height: 3.6rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #d7e0da;
  border-radius: 6px;
  background: #fff;
  color: #66756d;
  text-align: left;
}

.operation-task-stats button span {
  font-size: 0.68rem;
  font-weight: 780;
}

.operation-task-stats button b {
  color: #234936;
  font-size: 1.08rem;
}

.operation-task-stats button.is-active {
  border-color: #75a68c;
  background: #e8f2ed;
  color: #1d6543;
  box-shadow: inset 0 -2px #2f8057;
}

.operation-task-stats button.is-overdue b {
  color: #a64536;
}

.operation-task-toolbar {
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) 10rem 10rem 12rem 2.7rem;
  gap: 0.55rem;
  align-items: center;
  margin-bottom: 0.55rem;
  padding: 0.7rem;
  box-shadow: none;
}

.operation-task-search {
  display: grid;
  min-height: 2.65rem;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: 0.4rem;
  align-items: center;
  padding: 0 0.7rem;
  border: 1px solid #cfd9d3;
  border-radius: 6px;
  background: #fff;
}

.operation-task-search i {
  color: #718078;
  text-align: center;
}

.operation-task-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #263c31;
  font-size: 0.78rem;
}

.operation-task-toolbar .form-input {
  min-height: 2.65rem;
}

.operation-task-toolbar > .admin-ghost-btn {
  min-width: 2.7rem;
  padding: 0;
}

.operation-task-list {
  display: grid;
  gap: 0.55rem;
}

.operation-task-row {
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid #d8e0db;
  border-left: 3px solid #6f9480;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(14, 47, 31, 0.035);
}

.operation-task-row.is-overdue {
  border-left-color: #b34d3d;
  background: #fffaf8;
}

.operation-task-row.is-closed {
  border-left-color: #aeb9b3;
  background: #f7f9f8;
}

.operation-task-priority {
  display: grid;
  min-height: 3.1rem;
  place-items: center;
  align-content: center;
  gap: 0.2rem;
  border-radius: 6px;
  background: #edf2ef;
  color: #60766a;
  font-size: 0.62rem;
  font-weight: 850;
}

.operation-task-priority.is-urgent {
  background: #f6e1dd;
  color: #a23f31;
}

.operation-task-priority.is-high {
  background: #f7ecd9;
  color: #8d611f;
}

.operation-task-priority.is-low {
  background: #e9f0f4;
  color: #527184;
}

.operation-task-copy {
  min-width: 0;
}

.operation-task-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
}

.operation-task-title-row h3 {
  min-width: 0;
  color: #173c2a;
  font-size: 0.9rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.operation-task-copy > p {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 0.28rem;
  color: #65736b;
  font-size: 0.7rem;
  line-height: 1.55;
  white-space: pre-line;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.operation-task-status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.18rem 0.48rem;
  border: 1px solid #cbd8d1;
  border-radius: 999px;
  background: #f4f7f5;
  color: #577064;
  font-size: 0.58rem;
  font-weight: 850;
  white-space: nowrap;
}

.operation-task-status.is-in_progress {
  border-color: #9dc3b0;
  background: #e8f4ed;
  color: #246d49;
}

.operation-task-status.is-done {
  border-color: #bdcadf;
  background: #eef2f8;
  color: #526b93;
}

.operation-task-status.is-cancelled {
  color: #7d8580;
}

.operation-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem 0.9rem;
  margin-top: 0.45rem;
  color: #77837c;
  font-size: 0.62rem;
  font-weight: 650;
}

.operation-task-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.operation-task-meta .is-overdue {
  color: #a33f31;
  font-weight: 850;
}

.operation-task-meta .is-today,
.operation-task-meta .is-soon {
  color: #8a5e1d;
}

.operation-task-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.operation-task-action,
.operation-task-icon-btn {
  display: inline-flex;
  min-height: 2.35rem;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid #bfd0c7;
  border-radius: 5px;
  background: #f3f7f5;
  color: #285e43;
  font-size: 0.66rem;
  font-weight: 820;
}

.operation-task-action.is-complete {
  border-color: #2d7651;
  background: #2d7651;
  color: #fff;
}

.operation-task-icon-btn {
  width: 2.35rem;
  padding: 0;
}

.operation-task-icon-btn.is-danger {
  border-color: #e0c0ba;
  background: #fff8f6;
  color: #a34839;
}

.operation-task-empty {
  display: grid;
  min-height: 12rem;
  place-items: center;
  align-content: center;
  gap: 0.35rem;
  padding: 2rem;
  border: 1px dashed #cbd7d0;
  border-radius: 7px;
  background: #f8faf9;
  color: #6f7d75;
  text-align: center;
}

.operation-task-empty i {
  color: #3b7a58;
  font-size: 1.5rem;
}

.operation-task-empty b {
  color: #2a4938;
  font-size: 0.84rem;
}

.operation-task-empty small {
  font-size: 0.68rem;
}

.operation-task-modal {
  position: fixed;
  z-index: 80;
  top: var(--task-viewport-offset, 0);
  right: 0;
  bottom: auto;
  left: 0;
  display: grid;
  width: 100%;
  height: var(--task-viewport-height, 100dvh);
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  overflow: hidden;
}

.operation-task-modal.hidden {
  display: none;
}

.operation-task-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(13, 29, 21, 0.58);
}

.operation-task-dialog {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(40rem, 100%);
  max-width: 100%;
  max-height: min(44rem, 100%);
  min-height: 0;
  overflow: hidden;
  border: 1px solid #ccd8d1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(8, 27, 17, 0.24);
}

.operation-task-dialog > header,
.operation-task-dialog > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid #dce4df;
}

.operation-task-dialog > header small {
  display: block;
  color: #708078;
  font-size: 0.55rem;
  font-weight: 850;
  letter-spacing: 0;
}

.operation-task-dialog > header h2 {
  color: #173c2a;
  font-size: 1rem;
  font-weight: 850;
}

.operation-task-close {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border: 1px solid #d5dfd9;
  border-radius: 5px;
  color: #597065;
}

.operation-task-form-body {
  display: grid;
  min-width: 0;
  min-height: 0;
  gap: 0.85rem;
  overflow-y: auto;
  padding: 1rem;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.operation-task-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.operation-task-dialog > footer {
  justify-content: flex-end;
  flex: 0 0 auto;
  border-top: 1px solid #dce4df;
  border-bottom: 0;
  background: #f7f9f8;
}

.operation-task-dialog > footer .admin-ghost-btn {
  border-color: #cbd7d0;
  background: #fff;
  color: #365746;
}

.operation-task-modal-open {
  overflow: hidden;
}

.home-action-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.65rem;
}

.home-action-summary:empty {
  display: none;
}

.home-action-summary-item {
  display: flex;
  min-width: 0;
  min-height: 2.7rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid #d9e2dd;
  border-radius: 6px;
  background: #f7f9f8;
  color: #53665b;
  text-decoration: none;
}

.home-action-summary-item span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.38rem;
  overflow: hidden;
  font-size: 0.65rem;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-action-summary-item i {
  width: 0.8rem;
  color: #367455;
  text-align: center;
}

.home-action-summary-item b {
  display: grid;
  min-width: 1.6rem;
  height: 1.6rem;
  place-items: center;
  border-radius: 50%;
  background: #e5ece8;
  color: #214f37;
  font-size: 0.72rem;
}

.home-action-summary-item.is-notice {
  border-color: #abcbb9;
  background: #eef7f2;
}

.home-action-summary-item.is-attention {
  border-color: #dfb4ab;
  background: #fff7f5;
}

.home-action-summary-item.is-attention :is(i, b) {
  color: #9d4032;
}

.home-task-item {
  text-decoration: none;
}

.home-task-item.is-feeding .home-task-icon {
  border-color: #b7d4c5;
  background: #eaf4ee;
  color: #28704c;
}

.home-task-item.is-event .home-task-icon {
  border-color: #b9cde1;
  background: #edf3f8;
  color: #3e6f91;
}

@media (max-width: 1040px) {
  .operation-task-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .operation-task-toolbar {
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(8.5rem, auto)) 2.7rem;
  }

  .operation-task-search,
  .operation-task-toolbar label:has(#operation-task-assignee-filter) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .admin-shell .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-task-panel {
    order: 2;
  }

  .admin-coverage-panel {
    order: 3;
  }

  .admin-quick-actions {
    order: 4;
  }

  .operation-task-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operation-task-stats button {
    min-height: 3.2rem;
    padding: 0.5rem 0.6rem;
  }

  .operation-task-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.7rem;
  }

  .operation-task-search,
  .operation-task-toolbar label:has(#operation-task-assignee-filter) {
    grid-column: 1 / -1;
  }

  .operation-task-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
    padding: 0.75rem;
  }

  .operation-task-priority {
    display: inline-flex;
    min-height: 1.7rem;
    justify-self: start;
    gap: 0.32rem;
    padding: 0.2rem 0.5rem;
  }

  .operation-task-actions {
    justify-content: flex-start;
    padding-top: 0.55rem;
    border-top: 1px solid #e3e8e5;
  }

  .operation-task-action {
    flex: 1 1 auto;
  }

  .operation-task-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .operation-task-modal {
    align-items: end;
    padding: max(0.35rem, env(safe-area-inset-top)) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  }

  .operation-task-dialog {
    width: 100%;
    height: min(46rem, 100%);
    max-height: 100%;
    border-radius: 8px 8px 0 0;
  }

  .operation-task-dialog > header {
    padding: 0.72rem 0.8rem;
  }

  .operation-task-form-body {
    gap: 0.65rem;
    padding: 0.75rem 0.8rem;
  }

  .operation-task-form-body textarea {
    min-height: 5rem;
  }

  .operation-task-dialog > footer {
    position: relative;
    z-index: 2;
    min-height: calc(3.8rem + env(safe-area-inset-bottom));
    padding: 0.65rem max(0.8rem, env(safe-area-inset-right)) max(0.65rem, env(safe-area-inset-bottom)) max(0.8rem, env(safe-area-inset-left));
    box-shadow: 0 -8px 20px rgba(14, 43, 28, 0.08);
  }

  .operation-task-dialog > footer > button {
    min-height: 2.65rem;
    flex: 1 1 0;
  }

  .home-action-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-task-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-task-item b,
  .home-task-item small {
    white-space: normal;
  }
}

@media (max-width: 380px) {
  .operation-task-action-label {
    display: none;
  }

  .home-action-summary-item {
    padding-inline: 0.5rem;
  }
}

/* Ver.4.39: PWA・スマホブラウザ・PCでの表示領域とセーフエリアを統一する。 */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

:is(.site-shell, .portal-shell, .admin-shell),
:is(.site-header, .portal-header, .admin-header),
:is(.site-main, .portal-main, .admin-main, .reward-page-main) {
  min-width: 0;
  max-width: 100%;
}

:is(img, video, canvas) {
  max-width: 100%;
}

@media (display-mode: standalone) and (max-width: 760px) {
  .site-header .app-header-row,
  .portal-header .app-header-row,
  .admin-header .app-header-row {
    padding-top: max(0.55rem, env(safe-area-inset-top)) !important;
    padding-right: max(0.75rem, env(safe-area-inset-right)) !important;
    padding-left: max(0.75rem, env(safe-area-inset-left)) !important;
  }

  .site-shell,
  .portal-shell,
  .admin-shell {
    min-height: 100dvh;
  }
}

/* Ver.3.10: full-screen viewer for member-posted images. */
.member-viewable-image {
  cursor: zoom-in;
  transition: filter 150ms ease, opacity 150ms ease;
}

.member-viewable-image:hover {
  filter: brightness(0.96);
}

.member-viewable-image:active {
  opacity: 0.82;
}

.member-image-viewer-open {
  overflow: hidden;
}

.member-image-viewer {
  position: fixed;
  z-index: 10020;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: rgba(4, 14, 10, 0.96);
  color: #fff;
}

.member-image-viewer.hidden {
  display: none;
}

.member-image-toolbar {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  min-height: 4rem;
  padding: 0.65rem max(0.8rem, env(safe-area-inset-right)) 0.65rem max(0.8rem, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  background: #09271c;
}

.member-image-toolbar > div:first-child {
  min-width: 0;
}

.member-image-toolbar small,
.member-image-toolbar strong {
  display: block;
}

.member-image-toolbar small {
  color: #9bb9aa;
  font-size: 0.57rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.member-image-toolbar strong {
  overflow: hidden;
  margin-top: 0.1rem;
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-image-tools {
  display: flex;
  flex: 0 0 auto;
  gap: 0.35rem;
  align-items: center;
}

.member-image-tools button {
  display: inline-flex;
  min-width: 2.5rem;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.member-image-tools button:hover {
  background: rgba(255, 255, 255, 0.16);
}

.member-image-tools > span {
  min-width: 2.8rem;
  color: #c5d6cd;
  font-size: 0.65rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  text-align: center;
}

.member-image-tools .member-image-download {
  padding-right: 0.7rem;
  padding-left: 0.7rem;
  border-color: #6ea98a;
  background: #176843;
}

.member-image-stage {
  display: grid;
  overflow: auto;
  padding: 1rem;
  place-items: center;
  overscroll-behavior: contain;
  scrollbar-color: #47705d #0a1d15;
  touch-action: pan-x pan-y;
}

.member-image-stage.is-zoomed {
  place-items: safe center;
  cursor: grab;
}

.member-image-stage img {
  display: block;
  max-width: min(100%, 1200px);
  max-height: calc(100vh - 6rem);
  object-fit: contain;
  transform-origin: center;
  transition: transform 160ms ease;
  user-select: none;
  -webkit-user-drag: none;
}

@media (max-width: 600px) {
  .member-image-toolbar {
    min-height: calc(3.75rem + env(safe-area-inset-top));
    padding-top: max(0.55rem, env(safe-area-inset-top));
  }

  .member-image-toolbar > div:first-child {
    display: none;
  }

  .member-image-tools {
    width: 100%;
    justify-content: space-between;
  }

  .member-image-tools button {
    min-width: 2.55rem;
    min-height: 2.55rem;
  }

  .member-image-tools > span {
    min-width: 2.4rem;
  }

  .member-image-stage {
    padding: 0.5rem;
  }
}

@media (max-width: 360px) {
  .member-image-download span,
  [data-viewer-reset] {
    display: none !important;
  }
}

.application-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.student-number-assist {
  display: flex;
  align-items: flex-start;
  gap: 0.42rem;
  margin-top: 0.45rem;
  color: #627068;
  font-size: 0.76rem;
  line-height: 1.55;
}

.student-number-assist i {
  flex: 0 0 auto;
  margin-top: 0.18rem;
  color: #567267;
}

.student-number-assist.is-success {
  color: #176a48;
}

.student-number-assist.is-success i {
  color: #1d7a52;
}

.student-number-assist.is-warning {
  color: #8a621f;
}

.student-number-assist.is-warning i {
  color: #a57422;
}

/* Ver.4.03: consistent feedback, confirmation, and busy states. */
.app-toast-region {
  position: fixed;
  z-index: 180;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  width: min(23rem, calc(100vw - 2rem));
  gap: 0.55rem;
  pointer-events: none;
}

.app-toast {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 2rem;
  gap: 0.55rem;
  align-items: center;
  min-height: 3.6rem;
  padding: 0.6rem 0.55rem 0.6rem 0.7rem;
  border: 1px solid #cbd7d0;
  border-left: 4px solid #397b5a;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 32px rgba(13, 40, 25, 0.17);
  color: #23372c;
  pointer-events: auto;
  animation: app-toast-enter 180ms ease-out both;
}

.app-toast.is-success { border-left-color: #248653; }
.app-toast.is-warning { border-left-color: #bb8428; }
.app-toast.is-error { border-left-color: #b44c3e; }
.app-toast.is-leaving { animation: app-toast-leave 160ms ease-in both; }

.app-toast-icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: #e8f1ec;
  color: #276b49;
}

.app-toast.is-warning .app-toast-icon {
  background: #fff3d7;
  color: #986716;
}

.app-toast.is-error .app-toast-icon {
  background: #fae9e5;
  color: #a44335;
}

.app-toast-message {
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.app-toast-close {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 5px;
  color: #728078;
}

.app-toast-close:hover { background: #edf1ee; color: #263b30; }

@keyframes app-toast-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes app-toast-leave {
  to { opacity: 0; transform: translateY(5px) scale(0.98); }
}

.app-control-busy {
  gap: 0.45rem !important;
  cursor: wait !important;
}

.reward-load-error {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  min-height: 5rem;
}

.reward-load-error > i { color: #a94335; }

.reward-load-error > button {
  min-height: 2.5rem;
  justify-content: center;
}

.app-dialog-open { overflow: hidden; }

.app-dialog-layer {
  position: fixed;
  z-index: 170;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  animation: app-dialog-fade 140ms ease-out both;
}

.app-dialog-layer.is-leaving { animation: app-dialog-fade-out 140ms ease-in both; }

.app-dialog-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: rgba(12, 27, 19, 0.58);
  backdrop-filter: blur(2px);
}

.app-dialog-card {
  position: relative;
  width: min(30rem, 100%);
  overflow: hidden;
  border: 1px solid #cdd8d2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(9, 30, 18, 0.26);
  animation: app-dialog-card-enter 170ms ease-out both;
}

.app-dialog-card > header {
  display: grid;
  grid-template-columns: 2.65rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  padding: 1.05rem 1.1rem 0.8rem;
}

.app-dialog-symbol {
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  place-items: center;
  border-radius: 50%;
  background: #e6f0ea;
  color: #236a47;
  font-size: 1rem;
}

.app-dialog-layer.is-danger .app-dialog-symbol {
  background: #fae9e5;
  color: #a94335;
}

.app-dialog-card > header small {
  display: block;
  margin-bottom: 0.18rem;
  color: #789086;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.app-dialog-card > header h2 {
  color: #183a29;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.35;
}

.app-dialog-message {
  padding: 0 1.1rem 1rem;
  color: #53655b;
  font-size: 0.84rem;
  line-height: 1.7;
  white-space: pre-wrap;
}

.app-dialog-input {
  padding: 0 1.1rem 1rem;
}

.app-dialog-input label > span {
  display: block;
  margin-bottom: 0.35rem;
  color: #40584b;
  font-size: 0.72rem;
  font-weight: 850;
}

.app-dialog-input textarea { min-height: 6.5rem; resize: vertical; }

.app-dialog-card > footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  padding: 0.8rem 1.1rem 1.05rem;
  border-top: 1px solid #e1e7e3;
  background: #f8faf8;
}

.app-dialog-card > footer button {
  min-height: 2.8rem;
  justify-content: center;
}

.app-dialog-confirm.is-danger {
  border-color: #a94335 !important;
  background: #a94335 !important;
}

@keyframes app-dialog-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes app-dialog-fade-out {
  to { opacity: 0; }
}

@keyframes app-dialog-card-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
  .app-toast-region {
    right: 0.65rem;
    bottom: 0.65rem;
    width: calc(100vw - 1.3rem);
  }

  body:has(#portal-mobile-nav) .app-toast-region {
    bottom: calc(4.65rem + env(safe-area-inset-bottom));
  }

  .app-dialog-layer {
    align-items: end;
    padding: 0;
  }

  .app-dialog-card {
    width: 100%;
    border-width: 1px 0 0;
    border-radius: 8px 8px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .app-dialog-card > footer button { min-height: 3rem; }
}

@media (max-width: 360px) {
  .app-dialog-card > footer { grid-template-columns: 1fr; }
  .app-dialog-cancel { order: 2; }
  .reward-load-error { grid-template-columns: auto minmax(0, 1fr); }
  .reward-load-error > button { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .app-toast,
  .app-dialog-layer,
  .app-dialog-card {
    animation: none !important;
  }
}

/* Ver.4.04: draft-safe forms and a clearer timeline composer. */
.post-compose-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.45rem;
  color: #73847a;
  font-size: 0.66rem;
  font-weight: 700;
}

.post-compose-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.post-compose-meta #post-draft-status.is-saved { color: #2a7651; }
.post-compose-meta #post-char-count.is-near-limit { color: #a96720; }
.post-compose-meta #post-char-count.is-at-limit { color: #ad4538; }

.post-image-preview {
  display: grid;
  grid-template-columns: 3.7rem minmax(0, 1fr) 2.35rem;
  gap: 0.7rem;
  align-items: center;
  margin-top: 0.65rem;
  padding: 0.55rem;
  border: 1px solid #cad9d1;
  border-radius: 7px;
  background: #f5f9f6;
}

.post-image-preview.hidden { display: none; }

.post-image-preview img {
  width: 3.7rem;
  height: 3.7rem;
  border-radius: 5px;
  object-fit: cover;
}

.post-image-preview > span {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.post-image-preview b {
  color: #254a36;
  font-size: 0.75rem;
}

.post-image-preview small {
  overflow: hidden;
  color: #718078;
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-image-preview button {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: 5px;
  color: #718078;
}

.post-image-preview button:hover { background: #e5eee9; color: #9e4438; }

.app-form-status {
  display: flex;
  width: fit-content;
  min-height: 1.8rem;
  align-items: center;
  gap: 0.35rem;
  margin: -0.15rem 0 0.7rem auto;
  padding: 0.25rem 0.55rem;
  border: 1px solid #e1c895;
  border-radius: 999px;
  background: #fff8e8;
  color: #805e20;
  font-size: 0.64rem;
  font-weight: 850;
}

.app-form-status.hidden { display: none; }

.admin-panel.app-form-dirty,
.operation-task-dialog.app-form-dirty {
  border-color: #d9bd82 !important;
  box-shadow: inset 3px 0 #c58b2b, var(--aca-shadow-soft);
}

.operation-task-dialog > .app-form-status {
  position: absolute;
  z-index: 2;
  top: 1rem;
  right: 3.7rem;
  margin: 0;
}

@media (max-width: 520px) {
  .post-compose-meta {
    align-items: flex-start;
    font-size: 0.61rem;
  }

  .post-image-preview {
    grid-template-columns: 3.2rem minmax(0, 1fr) 2.35rem;
  }

  .post-image-preview img {
    width: 3.2rem;
    height: 3.2rem;
  }

  .operation-task-dialog > .app-form-status {
    position: static;
    margin: 0.65rem 0.75rem 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .member-viewable-image,
  .member-image-stage img {
    transition: none;
  }
}

@media (max-width: 760px) {
  .hero-section {
    padding-top: 1.5rem;
    padding-bottom: 1.75rem;
  }

  .public-hero-grid {
    gap: 1.4rem;
  }

  .public-hero-copy {
    gap: 0.8rem;
  }

  .public-hero-grid,
  .public-message-grid,
  .public-cat-carousel,
  .public-feature-list,
  .public-steps {
    grid-template-columns: 1fr;
  }

  .public-hero-copy h1 {
    font-size: clamp(2.05rem, 10vw, 2.8rem);
  }

  .public-lead {
    font-size: 0.96rem;
    line-height: 1.72;
  }

  .public-identity {
    justify-items: start;
    gap: 0.9rem;
  }

  .public-identity-mark {
    width: min(48vw, 10rem);
    justify-self: center;
  }

  .public-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .public-facts div + div {
    border-left: 1px solid #cadbcd;
    border-top: 0;
  }

  .public-facts div {
    text-align: center;
    padding: 0.65rem 0.45rem;
  }

  .public-facts dd {
    font-size: 0.78rem;
  }

  .public-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .public-hero-actions .site-cta-primary,
  .public-hero-actions .site-cta-secondary {
    width: 100%;
    min-height: 2.8rem;
  }

  .public-section-heading {
    margin-bottom: 0.9rem;
  }

  .public-feature,
  .public-steps li {
    padding: 0.9rem;
  }

  .public-activity {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 0.85rem;
  }

  .public-cat-carousel {
    align-items: start;
  }

  .public-cat-frame {
    aspect-ratio: 4 / 3;
  }

  .public-join-panel {
    display: grid;
  }

  .admin-shell::before {
    right: -48vw;
    bottom: -18vw;
    width: 94vw;
    opacity: 0.035;
  }

  .admin-header nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
    padding-top: 0.7rem !important;
    padding-bottom: 0.55rem !important;
  }

  .admin-header nav > span {
    min-width: 0;
    font-size: 1rem;
    gap: 0.55rem;
  }

  .admin-header nav > span > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-header nav > div {
    justify-content: flex-end;
    gap: 0.35rem;
    min-width: 0;
  }

  .admin-header .admin-version {
    display: inline-flex;
    min-height: 1.7rem;
    align-items: center;
    padding: 0.2rem 0.42rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    font-size: 0.65rem;
  }

  .admin-mark {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
  }

  .admin-ghost-btn,
  .admin-primary-btn {
    min-height: 2.15rem;
    padding: 0.42rem 0.58rem;
    font-size: 0.8rem;
    line-height: 1;
    white-space: nowrap;
  }

  #admin-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-bottom: 0.65rem !important;
    overflow: visible !important;
  }

  #admin-tabs .tab-btn {
    min-height: 2.5rem;
    width: 100%;
    padding: 0.46rem 0.28rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    border-bottom-width: 3px;
    font-size: 0.72rem;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
  }

  #admin-tabs .tab-btn i {
    margin-right: 0 !important;
  }

  .admin-main {
    padding: 1rem 0.75rem 5rem !important;
  }

  .admin-main h1 {
    font-size: 1.16rem;
    line-height: 1.35;
    margin-bottom: 0.85rem !important;
  }

  .admin-panel.p-4,
  .admin-panel.p-6 {
    padding: 1rem !important;
  }

  .admin-main .grid {
    min-width: 0;
  }

  .member-bulk-grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 0.7rem;
  }

  .member-bulk-grid > div {
    min-width: 0 !important;
  }

  .member-bulk-grid .admin-action-btn,
  .member-bulk-grid .admin-ghost-btn {
    width: 100%;
    min-height: 2.55rem;
  }

  .admin-scroll-hint {
    display: inline-flex;
    align-items: center;
    margin: -0.05rem 0 0.45rem;
    padding: 0.36rem 0.62rem;
    border: 1px solid #dbe7dd;
    border-radius: 999px;
    background: rgba(255, 253, 248, 0.92);
    color: #53635a;
    font-size: 0.72rem;
    font-weight: 800;
  }

  .admin-table-scroll {
    padding: 0 !important;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .admin-table-scroll table {
    min-width: 760px;
    background: #fffdf8;
    border: 1px solid var(--aca-line);
  }

  .portal-shell::before {
    right: -42vw;
    bottom: -18vw;
    width: 92vw;
    opacity: 0.035;
  }

  .portal-header {
    position: sticky;
    top: 0;
  }

  .portal-header nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding-top: 0.7rem !important;
    padding-bottom: 0.55rem !important;
  }

  .portal-header .brand-mark {
    width: 34px;
    height: 34px;
  }

  .portal-header nav > a {
    font-size: 1rem;
    gap: 0.55rem;
    min-width: 0;
  }

  .portal-header nav > div {
    justify-content: flex-end;
    gap: 0.4rem;
    min-width: 0;
  }

  .portal-header nav > div #user-info {
    display: none !important;
  }

  .portal-ghost-btn,
  .portal-primary-btn {
    min-height: 2.15rem;
    padding: 0.42rem 0.62rem;
    flex: 0 0 auto;
    font-size: 0.82rem;
    line-height: 1;
    white-space: nowrap;
  }

  #portal-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-bottom: 0.65rem !important;
    gap: 0.35rem !important;
    overflow: visible !important;
    scroll-snap-type: none;
  }

  #portal-tabs::-webkit-scrollbar {
    display: none;
  }

  #portal-tabs .tab-btn {
    min-height: 2.55rem;
    width: 100%;
    padding: 0.48rem 0.32rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex: none;
    scroll-snap-align: none;
    border-bottom-width: 3px;
    font-size: 0.76rem;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
  }

  #portal-tabs .tab-btn[data-tab="timeline"] {
    font-size: 0.72rem;
  }

  #portal-tabs .tab-btn i {
    margin-right: 0 !important;
  }

  .portal-main {
    padding: 1rem 0.75rem 5rem !important;
  }

  .portal-panel.p-4,
  .portal-panel.p-6 {
    padding: 1rem !important;
  }

  .portal-home-hero {
    gap: 0.9rem;
    padding: 1rem;
    box-shadow: 0 10px 28px rgba(26, 39, 31, 0.07);
  }

  .home-avatar {
    width: 3.7rem;
    height: 3.7rem;
  }

  .portal-home-hero h1 {
    font-size: 1.35rem;
    white-space: normal;
  }

  .home-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .home-actions .site-button-primary,
  .home-actions .site-button-secondary {
    width: 100%;
    min-height: 2.8rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .home-task-list {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .home-task-item {
    min-height: 3.9rem;
    padding: 0.65rem;
  }

  .home-task-item b,
  .home-task-item small {
    white-space: normal;
  }

  .home-card {
    min-height: auto;
  }

  .library-filter-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .library-filter-grid .site-button-secondary {
    width: 100%;
  }

  .library-result-count {
    margin-top: 0.65rem;
  }

  .feeding-map-spots {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .feeding-map-spot {
    padding: 0.75rem;
  }

  .home-section-head {
    align-items: flex-start;
    margin-bottom: 0.65rem;
  }

  .home-section-head h2 {
    font-size: 0.96rem;
    line-height: 1.35;
  }

  .home-nav-btn {
    min-height: 2.2rem;
    padding: 0.48rem 0.72rem;
    flex: 0 0 auto;
  }

  .home-list-item {
    grid-template-columns: 1.9rem minmax(0, 1fr);
    padding: 0.65rem 0.35rem;
  }

  .post-card {
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.55rem;
    padding: 0.65rem 0;
  }

  .post-avatar {
    width: 2rem;
    height: 2rem;
  }

  .post-body {
    padding: 0.45rem 0.5rem;
  }

  .post-meta {
    align-items: flex-start;
  }

  .post-time {
    display: block;
    margin-left: 0;
    margin-top: 0.1rem;
  }

  .reply-composer {
    grid-template-columns: 1fr auto;
  }

  .reply-composer .reply-send {
    grid-column: 1 / -1;
    width: 100%;
  }

  .event-card.p-5 {
    padding: 1rem !important;
  }

  .event-card .event-detail.flex {
    min-width: 0 !important;
    width: 100%;
    flex: 1 1 100%;
  }

  .event-card .event-detail.flex > div:last-child {
    min-width: 0;
  }

  .event-card .site-button-primary,
  .event-card .site-button-secondary {
    min-height: 2.45rem;
    flex: 1 1 auto;
  }

  #feeding-grid {
    position: relative;
    padding: 0 !important;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }

  #feeding-grid::after {
    content: '';
    position: sticky;
    right: 0;
    top: 0;
    display: block;
    width: 2.4rem;
    height: 0;
    pointer-events: none;
    box-shadow: -18px 0 24px rgba(246, 248, 245, 0.9);
    z-index: 3;
  }

  #feeding-grid table {
    min-width: 720px;
    background: #fffdf8;
    border: 1px solid var(--aca-line);
    border-radius: 4px;
    overflow: hidden;
  }

  #feeding-grid th,
  #feeding-grid td {
    scroll-snap-align: start;
  }

  #feeding-grid th:first-child,
  #feeding-grid td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #f5f0e6;
    box-shadow: 1px 0 0 var(--aca-line);
  }

  .feeding-cell {
    min-width: 98px;
    padding: 0.45rem !important;
  }

  .feed-shift-card {
    gap: 0.32rem;
    padding: 0.58rem 0.5rem;
    margin-bottom: 0.45rem;
  }

  .feed-shift-time {
    font-size: 0.9rem;
    line-height: 1.25;
  }

  .feed-shift-user {
    font-size: 0.7rem;
  }

  .mobile-scroll-hint {
    display: inline-flex;
    align-items: center;
    margin: -0.1rem 0 0.45rem;
    padding: 0.36rem 0.62rem;
    border: 1px solid #dbe7dd;
    border-radius: 999px;
    background: rgba(255, 253, 248, 0.92);
    color: #53635a;
    font-size: 0.72rem;
    font-weight: 800;
  }

  .feed-mini-btn,
  .feed-joined-label,
  .feed-day-locked {
    width: 100%;
    justify-content: center;
    min-height: 1.85rem;
    margin-top: 0.15rem;
  }

  .role-permission-presets,
  .role-permissions-grid {
    grid-template-columns: 1fr;
  }

  .reward-catalog-grid {
    grid-template-columns: 1fr;
  }

  .reward-page-main {
    padding: 0.85rem 0.7rem 2rem !important;
  }

  .portal-shell:has(.reward-page-main) .portal-header .app-header-row > a:first-child {
    min-width: 0;
    gap: 0.5rem;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  .portal-shell:has(.reward-page-main) .portal-header .brand-mark {
    width: 32px;
    height: 32px;
  }

  .portal-shell:has(.reward-page-main) .portal-header .portal-ghost-btn {
    min-height: 2.2rem;
    padding: 0.4rem 0.55rem;
    font-size: 0.7rem;
    white-space: nowrap;
  }

  .reward-page-head {
    align-items: flex-end;
    gap: 0.7rem;
    padding: 0.35rem 0.15rem 0.8rem;
  }

  .reward-page-head h1 { font-size: 1.35rem; }
  .reward-page-head > div > span { display: none; }
  .reward-page-head > strong { font-size: 1.65rem; }

  .reward-view-tabs {
    position: static;
    top: 0;
    margin-inline: -0.1rem;
  }

  .reward-view-tabs button {
    min-height: 3rem;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.7rem;
  }

  .reward-view-tabs button b {
    position: absolute;
    margin: -1.4rem 0 0 2.5rem;
  }

  .reward-shop-tools {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-inline: -0.25rem;
    padding: 0.55rem;
  }

  .reward-search,
  .reward-type-filter {
    grid-column: 1 / -1;
  }

  .reward-type-filter button { flex: 1; }
  .reward-select select { width: 100%; }

  .reward-card {
    grid-template-columns: 1fr;
    grid-template-rows: 4.6rem auto;
  }

  .reward-preview {
    min-height: 4.6rem;
    border-right: 0;
    border-bottom: 1px solid #e5ddcf;
  }

  .reward-preview .member-title {
    max-width: calc(100% - 1rem);
    overflow: hidden;
    margin-left: 0;
    text-overflow: ellipsis;
  }

  .reward-frame-preview {
    width: 3.7rem;
    height: 3.7rem;
  }

  .reward-card-body > p {
    min-height: 0;
    margin-bottom: 0.55rem;
  }

  .reward-card-body { padding: 0.72rem; }
  .reward-card h3 { font-size: 0.93rem; }
  .reward-card-footer strong { font-size: 1.15rem; }
  .reward-card-footer button { min-width: 6.3rem; min-height: 2.3rem; padding-inline: 0.55rem; }

  .reward-card-footer {
    align-items: flex-end;
  }

  .reward-gacha-panel {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 0.9rem;
  }

  .reward-gacha-copy h2 {
    color: #fff !important;
    font-size: 1.08rem;
  }

  .reward-gacha-action {
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-items: stretch;
    text-align: left;
  }

  .reward-gacha-action .site-button-primary {
    min-width: 8rem;
  }

  .owned-reward-row {
    grid-template-columns: 3.8rem minmax(0, 1fr);
  }

  .owned-reward-row .reward-preview.is-compact {
    width: 3.8rem;
    min-height: 3.8rem;
  }

  .owned-reward-row > button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .profile-equipped {
    grid-template-columns: 1fr;
  }

  .profile-equipped .home-nav-btn {
    width: 100%;
  }

  .profile-rewards-head {
    align-items: flex-start;
  }

  .profile-rewards-head .home-nav-btn,
  .owned-reward-row > a.home-nav-btn {
    width: 100%;
  }

  .owned-reward-row > a.home-nav-btn {
    grid-column: 1 / -1;
  }

  .role-preset-btn {
    min-height: 0;
    padding: 0.72rem;
  }

  #event-modal,
  #feeding-modal,
  #app-modal {
    padding: 0.75rem !important;
  }

  #event-modal > div,
  #feeding-modal > div,
  #app-modal > div {
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    max-width: 100% !important;
  }

  .modal-hero {
    padding: 1rem !important;
  }

  .modal-hero h2 {
    font-size: 1.35rem;
    line-height: 1.35;
  }
}

@media (min-width: 761px) {
  #admin-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

@media (max-width: 420px) {
  .portal-header nav > a {
    width: 100%;
  }

  .home-actions {
    grid-template-columns: 1fr;
  }

  .home-section-head {
    flex-direction: column;
    gap: 0.55rem;
  }

  .home-nav-btn {
    width: 100%;
  }

  #portal-tabs .tab-btn {
    font-size: 0.84rem;
  }

  .portal-main .tab-panel > h2,
  .portal-main .tab-panel > .portal-panel h2 {
    font-size: 1.08rem;
  }
}

/* Ver.3.00 - operations expansion */
.feeding-substitute-box {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  border: 1px solid #d8b36b;
  border-radius: 7px;
  background: #fff8e8;
  padding: 0.9rem;
  color: #68470e;
}

.feeding-substitute-box > i {
  font-size: 1.25rem;
  text-align: center;
  margin-top: 0.15rem;
}

.feeding-substitute-box p {
  margin-top: 0.15rem;
  font-size: 0.8rem;
}

.feeding-substitute-box.is-filled {
  border-color: #abd1bd;
  background: #edf7f1;
  color: #195c3b;
}

.survey-list,
.admin-survey-list,
.admin-request-list {
  display: grid;
  gap: 0.8rem;
}

.survey-card {
  overflow: hidden;
  padding: 1rem;
}

.survey-card-head,
.admin-survey-item header,
.admin-survey-item footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.survey-card-head h3,
.admin-survey-item h3 {
  margin-top: 0.35rem;
  color: #203b2c;
  font-size: 1rem;
  font-weight: 900;
}

.survey-card-head > span,
.admin-survey-item header > b {
  color: var(--aca-muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.survey-status {
  display: inline-flex;
  border: 1px solid #c8d2cc;
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  color: #59645e;
  font-size: 0.68rem;
  font-weight: 900;
}

.survey-status.is-open {
  border-color: #87b69c;
  background: #eaf5ee;
  color: #175b39;
}

.survey-status.is-draft {
  border-color: #b8c6d0;
  background: #edf3f7;
  color: #32627d;
}

.survey-description {
  margin: 0.8rem 0;
  color: #5f6963;
  font-size: 0.86rem;
  white-space: pre-wrap;
}

.survey-response-form,
.survey-options {
  display: grid;
  gap: 0.65rem;
}

.survey-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  min-height: 3.2rem;
  border: 1px solid #d7dfda;
  border-radius: 6px;
  background: #fafbfa;
  padding: 0.65rem 0.75rem;
}

.survey-option:has(input) {
  cursor: pointer;
}

.survey-option.is-selected,
.survey-option:has(input:checked) {
  border-color: #6f9b82;
  background: #eef6f1;
}

.survey-option-main {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  font-size: 0.84rem;
}

.survey-result-track,
.survey-admin-bar {
  display: block;
  height: 0.3rem;
  overflow: hidden;
  border-radius: 999px;
  background: #e1e6e3;
}

.survey-result-track i,
.survey-admin-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--aca-blue);
}

.survey-option-count {
  color: #66716b;
  font-size: 0.7rem;
  white-space: nowrap;
}

.survey-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.survey-card-actions small {
  color: var(--aca-muted);
  font-size: 0.7rem;
}

.survey-response-msg {
  border-radius: 6px;
  padding: 0.65rem;
  font-size: 0.8rem;
}

.reward-outfit-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.85fr);
  gap: 1rem;
  align-items: center;
}

.reward-outfit-preview {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 7rem;
  border: 1px solid #d5ded9;
  border-radius: 7px;
  background: #f7f9f7;
  padding: 1rem;
}

.reward-outfit-preview small {
  color: var(--aca-blue);
  font-size: 0.68rem;
  font-weight: 900;
}

.reward-outfit-preview h3 {
  margin: 0.15rem 0 0.4rem;
  font-weight: 900;
}

.reward-avatar-large {
  width: 4.5rem !important;
  height: 4.5rem !important;
  flex: 0 0 4.5rem;
}

.reward-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

.dashboard-alerts {
  display: grid;
  gap: 0.5rem;
}

.dashboard-alert,
.dashboard-clear {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  width: 100%;
  border: 1px solid #d6ddd9;
  border-radius: 6px;
  background: #fff;
  padding: 0.75rem 0.85rem;
  color: #34423a;
  text-align: left;
  font-size: 0.82rem;
  font-weight: 800;
}

.dashboard-alert.is-warning {
  border-left: 4px solid #ad782c;
}

.dashboard-alert.is-danger {
  border-left: 4px solid var(--aca-danger);
}

.dashboard-alert.is-notice {
  border-left: 4px solid var(--aca-blue);
}

.dashboard-clear {
  grid-template-columns: 1.4rem minmax(0, 1fr);
  border-color: #bed7c9;
  background: #f0f7f3;
  color: #246044;
}

.admin-request-row,
.admin-survey-item {
  border: 1px solid #d9dfdb;
  border-radius: 7px;
  background: #fff;
  padding: 0.9rem;
}

.admin-request-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.8rem;
  align-items: center;
}

.admin-request-row h3 {
  margin-top: 0.25rem;
  font-weight: 900;
}

.admin-request-row p,
.admin-request-row small,
.admin-request-meta {
  display: block;
  color: var(--aca-muted);
  font-size: 0.72rem;
}

.admin-request-actions {
  display: flex;
  gap: 0.4rem;
}

.admin-reward-meta .is-approval {
  border-color: #a8c5d4;
  background: #eaf2f6;
  color: #2d617d;
}

.admin-survey-layout {
  display: grid;
  grid-template-columns: minmax(17rem, 0.75fr) minmax(0, 1.25fr);
  gap: 1rem;
  align-items: start;
}

.survey-setting {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.8rem;
  border: 1px solid #d8dfdb;
  border-radius: 6px;
  padding: 0.6rem;
}

.admin-survey-item > p {
  margin: 0.7rem 0;
  color: var(--aca-muted);
  font-size: 0.8rem;
  white-space: pre-wrap;
}

.admin-survey-item ul {
  display: grid;
  gap: 0.5rem;
  margin: 0.8rem 0;
}

.admin-survey-item li {
  display: grid;
  grid-template-columns: minmax(6rem, 0.8fr) minmax(5rem, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.74rem;
}

.survey-admin-bar {
  height: 0.45rem;
}

.admin-survey-item footer {
  align-items: center;
  border-top: 1px solid #e2e7e4;
  padding-top: 0.75rem;
  color: var(--aca-muted);
  font-size: 0.7rem;
}

@media (max-width: 760px) {
  #portal-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  #portal-tabs .tab-btn {
    font-size: 0.64rem;
  }

  #portal-tabs .tab-btn > i:first-child {
    display: none;
  }

  .reward-outfit-panel,
  .admin-survey-layout,
  .admin-request-row {
    grid-template-columns: 1fr;
  }

  .survey-card-actions,
  .admin-survey-item footer {
    align-items: stretch;
    flex-direction: column;
  }

  .survey-option {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .survey-option-count {
    grid-column: 2;
  }

  .admin-request-meta {
    text-align: left;
  }

  .admin-request-actions > button {
    flex: 1;
  }

  .admin-survey-item li {
    grid-template-columns: minmax(5rem, 0.9fr) minmax(4rem, 1fr) auto;
  }
}

/* Mobile portal navigation */
.portal-mobile-nav,
.portal-more-layer {
  display: none;
}

@media (max-width: 760px) {
  .portal-shell:has(#portal-mobile-nav) #portal-tabs {
    display: none !important;
  }

  .portal-shell:has(#portal-mobile-nav) .portal-header .app-header-row {
    min-height: 3.75rem;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .portal-shell:has(#portal-mobile-nav) .portal-main {
    padding-bottom: calc(6rem + env(safe-area-inset-bottom)) !important;
  }

  .portal-mobile-nav {
    position: fixed;
    z-index: 50;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    min-height: calc(4.4rem + env(safe-area-inset-bottom));
    align-items: flex-start;
    padding: 0.38rem 0.28rem calc(0.35rem + env(safe-area-inset-bottom));
    border-top: 1px solid #ccd6d0;
    /* iOS Safari/PWAはfixed要素にbackdrop-filterがあると固定が壊れる既知バグがあるため、
       ぼかしは使わず不透明背景にする。translateZ(0)はスクロール中の固定を安定させる */
    background: #fffdf8;
    box-shadow: 0 -5px 18px rgba(15, 44, 29, 0.12);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  .portal-mobile-nav > button {
    display: flex;
    min-width: 0;
    min-height: 3.55rem;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.18rem;
    border-radius: 6px;
    color: #6d7971;
    font-size: 0.62rem;
    font-weight: 850;
    line-height: 1;
  }

  .portal-mobile-nav > button > i,
  .portal-mobile-icon > i {
    font-size: 1.08rem;
  }

  .portal-mobile-nav > button.is-active {
    background: #e6f0e9;
    color: #125638;
  }

  .portal-mobile-icon {
    display: inline-flex;
    position: relative;
  }

  #mobile-notification-count {
    display: inline-grid;
    position: absolute;
    top: -0.55rem;
    right: -0.75rem;
    min-width: 1.1rem;
    height: 1.1rem;
    place-items: center;
    padding: 0 0.2rem;
    border: 2px solid #fffdf8;
    border-radius: 999px;
    background: #b52f3f;
    color: #fff;
    font-size: 0.52rem;
    font-weight: 950;
  }

  #mobile-notification-count.hidden { display: none; }

  .portal-more-layer:not(.hidden) {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: flex;
    align-items: flex-end;
  }

  .portal-more-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: rgba(13, 27, 19, 0.54);
  }

  .portal-more-sheet {
    position: relative;
    width: 100%;
    max-height: min(78vh, 36rem);
    overflow-y: auto;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    border-radius: 8px 8px 0 0;
    background: #fffdf8;
    box-shadow: 0 -16px 44px rgba(8, 29, 17, 0.24);
    animation: portal-sheet-in 0.2s ease-out;
  }

  .portal-more-sheet > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
  }

  .portal-more-sheet header small {
    color: #78837b;
    font-size: 0.58rem;
    font-weight: 900;
  }

  .portal-more-sheet header h2 {
    margin-top: 0.08rem;
    color: #163c2a;
    font-size: 1.12rem;
    font-weight: 900;
  }

  .portal-more-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .portal-more-grid > button,
  .portal-more-grid > a {
    display: grid;
    min-height: 6.2rem;
    grid-template-columns: 2rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.55rem;
    align-content: center;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid #d7dfda;
    border-radius: 7px;
    background: #f7f9f7;
    color: #183e2b;
    text-align: left;
  }

  .portal-more-grid > :is(button, a) > i {
    grid-row: 1 / 3;
    color: #2f7752;
    font-size: 1.2rem;
    text-align: center;
  }

  .portal-more-grid > :is(button, a) > span {
    align-self: end;
    font-size: 0.82rem;
    font-weight: 900;
  }

  .portal-more-grid > :is(button, a) > small {
    align-self: start;
    color: #778079;
    font-size: 0.61rem;
  }

  body.portal-more-open { overflow: hidden; }

  @keyframes portal-sheet-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-more-sheet { animation: none !important; }
}

/* Ver.2.30 - shared UI refinement */
:root {
  --aca-ink: #1f2b25;
  --aca-muted: #68736d;
  --aca-line: #d9dfdb;
  --aca-paper: #ffffff;
  --aca-canvas: #f3f5f2;
  --aca-canvas-2: #e9efec;
  --aca-green: #155b3a;
  --aca-green-2: #2f7958;
  --aca-moss: #71877b;
  --aca-brass: #aa763d;
  --aca-blue: #326783;
  --aca-blue-soft: #eaf2f6;
  --aca-danger: #9a403d;
  --ui-shadow: 0 1px 2px rgba(20, 35, 27, 0.05), 0 8px 24px rgba(20, 35, 27, 0.04);
}

html {
  background: var(--aca-canvas);
  scroll-behavior: smooth;
}

body {
  color: var(--aca-ink);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
label,
select {
  -webkit-tap-highlight-color: transparent;
}

button:disabled,
.site-button-primary:disabled,
.admin-action-btn:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

:focus-visible {
  outline: 3px solid rgba(50, 103, 131, 0.42);
  outline-offset: 2px;
}

.app-body,
.site-shell,
.portal-shell,
.admin-shell {
  background: var(--aca-canvas);
}

.site-shell::before,
.portal-shell::before,
.admin-shell::before {
  opacity: 0.035;
}

.site-header,
.portal-header,
.admin-header {
  background: #123b29;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 2px 12px rgba(9, 27, 18, 0.14);
  backdrop-filter: none;
}

.app-header-row {
  min-height: 4rem;
}

.brand-mark,
.admin-mark {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 6px;
  background: #fff;
  padding: 2px;
}

.site-nav-link,
.site-nav-primary,
.portal-ghost-btn,
.portal-primary-btn,
.site-button-primary,
.site-button-secondary,
.site-button-muted,
.site-cta-primary,
.site-cta-secondary,
.site-icon-btn,
.admin-ghost-btn,
.admin-primary-btn,
.admin-action-btn,
.admin-danger-btn {
  min-height: 2.65rem;
  border-radius: 6px;
  box-shadow: none;
  font-weight: 800;
  line-height: 1.2;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.14s ease;
}

.site-nav-link:active,
.site-nav-primary:active,
.portal-ghost-btn:active,
.portal-primary-btn:active,
.site-button-primary:active,
.site-button-secondary:active,
.site-cta-primary:active,
.site-cta-secondary:active,
.admin-ghost-btn:active,
.admin-primary-btn:active,
.admin-action-btn:active {
  transform: translateY(1px);
}

.site-cta-primary,
.site-button-primary,
.admin-action-btn {
  border: 1px solid var(--aca-green);
  background: var(--aca-green);
  color: #fff;
}

.site-cta-primary:hover,
.site-button-primary:hover,
.admin-action-btn:hover {
  border-color: #0f432b;
  background: #0f432b;
}

.site-cta-secondary,
.site-button-secondary,
.site-icon-btn,
.admin-main .admin-ghost-btn {
  border: 1px solid #cdd6d1;
  background: #fff;
  color: #244333;
}

.site-cta-secondary:hover,
.site-button-secondary:hover,
.site-icon-btn:hover,
.admin-main .admin-ghost-btn:hover {
  border-color: #9fb1a7;
  background: #edf2ef;
}

.site-panel,
.portal-panel,
.admin-panel,
.subtle-panel {
  border: 1px solid var(--aca-line);
  border-radius: 7px;
  background: #fff;
  box-shadow: var(--ui-shadow);
}

.subtle-panel {
  background: #f6f8f6;
  box-shadow: none;
}

.form-label {
  margin-bottom: 0.38rem;
  color: #344139;
  font-size: 0.8rem;
  font-weight: 800;
}

.form-input {
  min-height: 2.85rem;
  border: 1px solid #cbd4cf;
  border-radius: 6px;
  background: #fff;
  color: var(--aca-ink);
  padding: 0.68rem 0.8rem;
  font-size: 0.92rem;
  box-shadow: 0 1px 0 rgba(31, 43, 37, 0.02);
}

textarea.form-input {
  min-height: 5.4rem;
  resize: vertical;
}

.form-input:hover {
  border-color: #aebbb4;
}

.form-input:focus {
  border-color: var(--aca-blue);
  box-shadow: 0 0 0 3px rgba(50, 103, 131, 0.13);
}

.form-input::placeholder {
  color: #9aa39e;
}

.form-file {
  min-height: 3rem;
  border: 1px dashed #b9c5be;
  border-radius: 6px;
  background: #f7f9f7;
  padding: 0.72rem;
}

input[type='checkbox'],
input[type='radio'] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--aca-green);
}

.payment-option {
  display: flex;
  min-height: 3.1rem;
  align-items: center;
  border: 1px solid #d5dcd8;
  border-radius: 6px;
  background: #fff;
  padding: 0.72rem 0.85rem;
}

.payment-option:hover {
  border-color: #9eb1a6;
  background: #f5f8f6;
}

.payment-option:has(input:checked) {
  border-color: var(--aca-green);
  background: #edf5f0;
  box-shadow: inset 3px 0 0 var(--aca-green);
}

.ui-page-shell {
  padding-top: clamp(2rem, 5vw, 3.5rem) !important;
  padding-bottom: clamp(3.5rem, 7vw, 6rem) !important;
}

.page-heading {
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.page-mark,
.login-mark,
.success-mark {
  width: 104px;
  height: 104px;
  object-fit: contain;
}

.form-surface {
  overflow: hidden;
  border-top: 3px solid var(--aca-green);
}

.form-section {
  display: grid;
  gap: 1rem;
  padding: 0.5rem 0 1.8rem;
}

.form-section + .form-section {
  border-top: 1px solid #e2e7e4;
  padding-top: 1.8rem;
}

.form-section-final {
  padding-bottom: 0;
}

.form-section-heading {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  margin-bottom: 0.15rem;
}

.form-section-heading > span {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border-radius: 999px;
  background: var(--aca-blue-soft);
  color: var(--aca-blue);
  font-size: 0.72rem;
  font-weight: 900;
}

.form-section-heading h2 {
  color: var(--aca-ink);
  font-size: 1rem;
  font-weight: 900;
}

.form-section-heading p {
  margin-top: 0.08rem;
  color: var(--aca-muted);
  font-size: 0.74rem;
}

.auth-shell {
  display: grid;
  min-height: calc(100vh - 4rem);
  align-content: center;
  padding-top: 2.5rem !important;
  padding-bottom: 4rem !important;
}

.auth-panel {
  border-top: 3px solid var(--aca-green);
}

.auth-heading {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
}

.auth-kicker {
  color: var(--aca-blue);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
}

.hero-section {
  border-bottom: 1px solid var(--aca-line);
  background: #f8faf8;
}

.public-identity,
.public-note,
.public-feature,
.public-activity,
.public-join-panel {
  border-color: var(--aca-line);
  background: #fff;
}

.public-section-heading h2,
.public-cat-copy h3,
.public-join-panel h2 {
  color: var(--aca-ink) !important;
}

.public-hero-copy h1 {
  font-size: 3.8rem;
}

.public-lead {
  font-size: 1.1rem;
}

.public-section-heading h2 {
  font-size: 2rem;
}

.public-cat-copy h3 {
  font-size: 1.7rem;
}

.public-join-panel h2 {
  font-size: 1.8rem;
}

.public-eyebrow,
.public-section-kicker {
  color: var(--aca-blue);
}

.public-cat-frame {
  background: #eef2ef;
}

.site-footer {
  background: #123b29;
}

.app-tabbar {
  gap: 0.35rem !important;
}

.portal-shell .tab-btn,
.admin-shell .tab-btn {
  min-height: 2.55rem;
  border: 1px solid transparent;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 700;
}

.portal-shell .tab-btn:hover,
.admin-shell .tab-btn:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.portal-shell .tab-btn.tab-active,
.admin-shell .tab-btn.tab-active {
  border-color: #fff;
  background: #fff;
  color: #163d2b;
  box-shadow: none;
}

.app-workspace {
  padding-top: 1.4rem !important;
  padding-bottom: 5rem !important;
}

.tab-panel:not(.hidden) {
  animation: ui-panel-in 0.16s ease-out;
}

@keyframes ui-panel-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.portal-home-hero {
  border: 1px solid #d7e1db;
  border-radius: 7px;
  background: #edf3ef;
  box-shadow: none;
}

.home-priority-card {
  border-left: 3px solid var(--aca-blue) !important;
  background: #fff !important;
}

.home-card,
.event-card,
.notification-card,
.reward-card,
.owned-reward-row,
.cat-card,
.admin-reward-item {
  border-radius: 7px;
}

.home-task-item,
.home-nav-btn {
  border-radius: 6px;
}

.home-task-item {
  border-color: #dce3df;
  background: #f8faf8;
}

.home-task-item:hover,
.home-nav-btn:hover {
  border-color: #aebdb5;
  background: #eef3f0;
}

.home-list-icon,
.home-task-icon {
  background: var(--aca-blue-soft);
  color: var(--aca-blue);
}

.home-empty,
.points-empty {
  border-color: #d7ddda;
  background: #f7f8f7;
  color: #707a74;
}

.points-hero,
.modal-hero {
  border-radius: 7px;
  background: #163f2d;
  box-shadow: none;
}

.post-card {
  border-bottom-color: #e2e7e4;
}

.post-body,
.detail-comment,
.feeding-comment {
  border-radius: 6px;
}

.post-body:hover,
.post-card:hover .post-body {
  background: #f4f7f5;
}

.library-filter-panel {
  background: #f7f9f7 !important;
}

.map-card img {
  border-color: #d3dad6 !important;
  border-radius: 7px !important;
}

.dashboard-grid {
  gap: 0.75rem;
}

.dashboard-card {
  border-top: 3px solid var(--aca-blue);
}

.dashboard-card-value {
  color: #183b2a;
}

.admin-main h1 {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid #dce2de;
}

.admin-table-scroll {
  border-radius: 7px;
}

.admin-shell table thead {
  background: #edf2ef;
}

.admin-shell table tbody tr:nth-child(even) {
  background: #fbfcfb;
}

.admin-shell table tbody tr:hover {
  background: #eef4f0;
}

.status-badge {
  border: 1px solid currentColor;
  border-radius: 999px;
  font-weight: 800;
}

#app-modal > div,
#event-modal > div,
#feeding-modal > div {
  border-radius: 8px !important;
  box-shadow: 0 18px 60px rgba(11, 28, 18, 0.22);
}

@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;
  }
}

@media (max-width: 760px) {
  .app-header-row {
    min-height: 3.5rem;
  }

  .site-header .app-header-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .site-header .app-header-row > a {
    min-width: 0;
    font-size: 0.96rem;
  }

  .site-header .app-header-row > div {
    gap: 0.35rem;
  }

  .site-header .site-nav-link,
  .site-header .site-nav-primary {
    min-height: 2.3rem;
    padding: 0.42rem 0.58rem;
    font-size: 0.72rem;
  }

  .brand-mark,
  .admin-mark {
    width: 34px;
    height: 34px;
  }

  .ui-page-shell {
    padding-top: 1.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  .page-mark,
  .login-mark,
  .success-mark {
    width: 88px;
    height: 88px;
  }

  .auth-shell {
    min-height: calc(100vh - 3.5rem);
    align-content: start;
    padding-top: 1.5rem !important;
  }

  .auth-panel,
  .form-surface {
    padding: 1rem !important;
  }

  .form-section {
    padding-bottom: 1.35rem;
  }

  .form-section + .form-section {
    padding-top: 1.35rem;
  }

  .form-section .grid.grid-cols-2 {
    grid-template-columns: 1fr;
  }

  .form-input {
    min-height: 2.9rem;
    font-size: 16px;
  }

  .site-button-primary,
  .site-button-secondary,
  .admin-action-btn,
  .admin-main .admin-ghost-btn {
    min-height: 2.75rem;
  }

  .public-hero-copy h1 {
    font-size: 2.1rem;
    line-height: 1.32;
  }

  .public-lead {
    font-size: 0.96rem;
  }

  .public-section-heading h2 {
    font-size: 1.65rem;
  }

  .public-cat-copy h3,
  .public-join-panel h2 {
    font-size: 1.45rem;
  }

  #portal-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.3rem !important;
  }

  #portal-tabs .tab-btn {
    min-height: 2.6rem;
    padding: 0.42rem 0.2rem;
    border: 1px solid transparent;
    font-size: 0.7rem;
  }

  #admin-tabs {
    display: grid !important;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-template-rows: repeat(2, 2.55rem);
    grid-auto-columns: minmax(7rem, 1fr);
    gap: 0.3rem !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  #admin-tabs .tab-btn {
    min-height: 2.55rem;
    padding: 0.38rem 0.3rem;
    border: 1px solid transparent;
    font-size: 0.68rem;
    scroll-snap-align: start;
  }

  .app-workspace {
    padding-top: 1rem !important;
  }

  .portal-home-hero {
    padding: 0.9rem;
  }

  .home-priority-card {
    border-left-width: 3px !important;
  }

  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-card-value {
    font-size: 1.55rem;
  }

  .admin-main h1 {
    padding-bottom: 0.55rem;
  }

  #app-modal,
  #event-modal,
  #feeding-modal {
    padding: 0.5rem !important;
  }

  #app-modal > div,
  #event-modal > div,
  #feeding-modal > div {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
}

@media (max-width: 420px) {
  .portal-header nav > a {
    width: auto !important;
  }

  .portal-header nav > div {
    gap: 0.28rem;
  }

  .portal-header .portal-ghost-btn,
  .portal-header .portal-primary-btn {
    min-height: 2.2rem;
    padding: 0.4rem 0.5rem;
    font-size: 0.7rem;
  }

  .home-section-head {
    flex-direction: row;
    align-items: flex-start;
  }

  .home-nav-btn {
    width: auto;
  }

  .form-section-heading {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .form-section-heading > span {
    width: 2rem;
    height: 2rem;
  }
}

@media (max-width: 760px) {
  #portal-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  #portal-tabs .tab-btn {
    font-size: 0.64rem;
  }

  #portal-tabs .tab-btn > i:first-child {
    display: none;
  }
}

/* Reward vault: game-like collection HUD while keeping the exchange flow compact. */
.reward-page-main {
  max-width: 72rem !important;
}

.reward-vault-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.1rem 2rem;
  overflow: hidden;
  margin-bottom: 1rem;
  padding: 1.35rem;
  border: 1px solid #39634f;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(125deg, #0b2d20 0 58%, #183b48 100%);
  box-shadow: 0 10px 24px rgba(8, 38, 27, 0.16);
  color: #fff;
}

.reward-vault-hero::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.3rem;
  height: 100%;
  background: #e2c56f;
  content: '';
}

.reward-vault-intro,
.reward-wallet,
.reward-vault-stats {
  position: relative;
  z-index: 1;
}

.reward-vault-intro > p {
  margin: 0;
  color: #e7ce83;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.reward-vault-intro h1 {
  margin: 0.18rem 0 0.25rem;
  color: #fff !important;
  font-size: 1.65rem;
  font-weight: 950;
}

.reward-vault-intro > span {
  color: #c8d9d0;
  font-size: 0.78rem;
}

.reward-wallet {
  min-width: 8.8rem;
  align-self: start;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(231, 206, 131, 0.56);
  border-radius: 6px;
  background: rgba(4, 25, 18, 0.58);
  text-align: right;
}

.reward-wallet > small {
  display: block;
  color: #d6c78e;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.reward-wallet strong {
  display: block;
  margin-top: 0.12rem;
  color: #fff2b5;
  font-size: 2rem;
  font-weight: 950;
  line-height: 1;
}

.reward-wallet strong b {
  margin-left: 0.2rem;
  color: #d3dfd8;
  font-size: 0.7rem;
}

.reward-vault-stats {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(12rem, 1.6fr) repeat(2, minmax(7rem, 0.7fr));
  gap: 0.55rem;
}

.reward-vault-stat {
  min-width: 0;
  padding: 0.62rem 0.72rem;
  border: 1px solid rgba(216, 230, 222, 0.18);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
}

.reward-vault-stat > span {
  display: block;
  color: #9fb9ab;
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.reward-vault-stat > strong {
  display: block;
  margin-top: 0.18rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
}

.reward-vault-stat > strong b {
  color: #f0da92;
  font-size: 1.15rem;
}

.reward-collection-track {
  height: 0.28rem;
  overflow: hidden;
  margin-top: 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.reward-collection-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #49b47d, #f1d77f);
  transition: width 0.35s ease;
}

.reward-view-tabs button > span {
  display: grid;
  line-height: 1.05;
}

.reward-view-tabs button > span small {
  color: inherit;
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  opacity: 0.58;
}

.reward-featured {
  display: grid;
  grid-template-columns: minmax(11rem, 0.7fr) minmax(0, 1.3fr);
  min-height: 12rem;
  overflow: hidden;
  border: 1px solid #c8b374;
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: 0 8px 22px rgba(57, 49, 29, 0.09);
}

.reward-featured-visual {
  min-width: 0;
  border-right: 1px solid #ded4bf;
  background: #efe9dc;
}

.reward-featured-visual .reward-preview {
  height: 100%;
  min-height: 12rem;
  border: 0;
}

.reward-featured-visual .member-title {
  max-width: calc(100% - 1.5rem);
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
}

.reward-featured-visual .reward-frame-preview {
  width: 5.7rem;
  height: 5.7rem;
}

.reward-featured-copy {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 1.25rem 1.4rem;
}

.reward-featured-copy > div:first-child {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem;
  margin-bottom: 0.35rem;
  padding-right: 5rem;
}

.reward-featured-copy > div:first-child > small {
  color: #9a7726;
  font-size: 0.61rem;
  font-weight: 950;
  letter-spacing: 0.1em;
}

.reward-featured-copy > .reward-rarity-badge {
  position: absolute;
  top: 1.25rem;
  right: 1.4rem;
}

.reward-featured-copy h2 {
  margin: 0.2rem 0 0.3rem;
  padding-right: 5rem;
  color: #143d2a;
  font-size: 1.45rem;
  font-weight: 950;
}

.reward-featured-copy > p {
  margin: 0;
  color: #647068;
  font-size: 0.8rem;
  line-height: 1.6;
}

.reward-featured-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid #e8e0d2;
}

.reward-featured-footer > strong {
  color: #183f2c;
  font-size: 1.35rem;
  font-weight: 950;
}

.reward-featured-footer > strong small {
  margin-left: 0.18rem;
  color: #69736c;
  font-size: 0.65rem;
}

.reward-featured-action {
  display: inline-flex;
  min-height: 2.55rem;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid #196642;
  border-radius: 5px;
  background: #14603d;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 900;
}

.reward-featured-action:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.reward-featured-complete {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: linear-gradient(120deg, #eef8f1, #fff8dc);
}

.reward-featured-complete > span {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #d2b456;
  border-radius: 50%;
  background: #fff8d8;
  color: #9b7113;
  font-size: 1.3rem;
}

.reward-featured-complete small { color: #897129; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.08em; }
.reward-featured-complete h2 { margin: 0.2rem 0; color: #16422d; font-size: 1.15rem; font-weight: 950; }
.reward-featured-complete p { margin: 0; color: #68726b; font-size: 0.76rem; }

.reward-preview-tier {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  z-index: 2;
}

.reward-tier-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  color: rgba(92, 104, 97, 0.3);
  font-size: 0.48rem;
}

.reward-tier-stars .is-lit {
  color: #d6a92e;
  filter: drop-shadow(0 1px 2px rgba(120, 79, 8, 0.24));
}

.reward-card.is-owned::after {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  z-index: 3;
  padding: 0.18rem 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 3px;
  background: #17613a;
  color: #fff;
  content: 'OWNED';
  font-size: 0.48rem;
  font-weight: 950;
  letter-spacing: 0.07em;
}

.reward-card {
  position: relative;
}

.reward-card.is-gacha-only .reward-preview-tier .is-lit {
  color: #f0c85d;
}

.reward-rarity-card--epic .reward-preview,
.reward-rarity-card--legendary .reward-preview {
  background-size: 180% 180%;
  animation: reward-vault-surface 7s ease-in-out infinite alternate;
}

@keyframes reward-vault-surface {
  from { background-position: 0 30%; }
  to { background-position: 100% 70%; }
}

.reward-gacha-panel {
  min-height: 12rem;
  padding: 1.25rem 1.35rem;
  border-color: #7464a4;
  background: linear-gradient(115deg, #182733 0 36%, #403467 66%, #744b4c 100%);
}

.reward-gacha-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 22px 22px;
  mask-image: linear-gradient(90deg, transparent, #000 35%, #000);
  pointer-events: none;
}

.reward-gacha-copy {
  max-width: 38rem;
}

.reward-gacha-rates {
  display: grid;
  grid-template-columns: repeat(4, minmax(4rem, 1fr));
  gap: 0.3rem;
  margin-top: 0.8rem;
}

.reward-gacha-rate {
  display: grid;
  gap: 0.05rem;
  padding: 0.38rem 0.45rem;
  border-top: 2px solid currentColor;
  background: rgba(4, 10, 20, 0.32);
}

.reward-gacha-rate b {
  font-size: 0.46rem;
  letter-spacing: 0.05em;
}

.reward-gacha-rate strong {
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
}

.reward-gacha-rate--common { color: #a7b8ae; }
.reward-gacha-rate--rare { color: #70c9ef; }
.reward-gacha-rate--epic { color: #d79bff; }
.reward-gacha-rate--legendary { color: #ffdb69; }

.reward-gacha-action > small:first-child {
  color: #cdd3dc;
  font-size: 0.62rem;
  font-weight: 800;
}

.reward-gacha-action .site-button-primary:disabled {
  border-color: #7f8290;
  background: #555d69;
  color: #d8dce1;
  cursor: not-allowed;
  opacity: 1;
}

.reward-gacha-result-stars {
  min-height: 1.2rem;
  margin-top: -0.15rem;
}

.reward-gacha-result-stars .reward-tier-stars {
  gap: 0.22rem;
  font-size: 0.8rem;
}

.reward-gacha-modal--rare .reward-gacha-result-card { border-color: #62b8df; background: linear-gradient(145deg, #eaf8ff, #fffdf8 58%); }
.reward-gacha-modal--epic .reward-gacha-result-card { border-color: #bb7be3; background: linear-gradient(145deg, #f1e7ff, #fffdf8 58%); box-shadow: 0 18px 60px rgba(116, 53, 154, 0.4); }
.reward-gacha-modal--legendary .reward-gacha-result-card { border-color: #f1c851; background: linear-gradient(145deg, #fff0a6, #fffdf8 58%); box-shadow: 0 18px 65px rgba(183, 119, 18, 0.48); }

@media (max-width: 640px) {
  .reward-vault-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem;
    padding: 1rem 0.85rem 0.85rem 1rem;
  }

  .reward-vault-intro h1 {
    font-size: 1.28rem;
  }

  .reward-vault-intro > span {
    display: none;
  }

  .reward-wallet {
    min-width: 6.7rem;
    padding: 0.55rem 0.65rem;
  }

  .reward-wallet strong {
    font-size: 1.55rem;
  }

  .reward-vault-stats {
    grid-template-columns: 1.45fr 0.8fr 0.8fr;
    gap: 0.3rem;
  }

  .reward-vault-stat {
    padding: 0.48rem;
  }

  .reward-vault-stat > span {
    overflow: hidden;
    font-size: 0.45rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .reward-vault-stat > span i {
    display: none;
  }

  .reward-vault-stat > strong,
  .reward-vault-stat > strong b {
    font-size: 0.8rem;
  }

  .reward-view-tabs button > span small {
    display: none;
  }

  .reward-featured {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .reward-featured-visual {
    border-right: 0;
    border-bottom: 1px solid #ded4bf;
  }

  .reward-featured-visual .reward-preview {
    min-height: 6rem;
  }

  .reward-featured-visual .reward-frame-preview {
    width: 4.2rem;
    height: 4.2rem;
  }

  .reward-featured-copy {
    padding: 0.9rem;
  }

  .reward-featured-copy > .reward-rarity-badge {
    top: 0.9rem;
    right: 0.9rem;
  }

  .reward-featured-copy h2 {
    padding-right: 4.6rem;
    font-size: 1.08rem;
  }

  .reward-featured-copy > p {
    font-size: 0.74rem;
  }

  .reward-featured-footer {
    margin-top: 0.7rem;
    padding-top: 0.65rem;
  }

  .reward-featured-action {
    min-height: 2.35rem;
    padding-inline: 0.7rem;
  }

  .reward-gacha-panel {
    padding: 0.9rem;
  }

  .reward-gacha-rates {
    gap: 0.2rem;
    margin-top: 0.65rem;
  }

  .reward-gacha-rate {
    padding: 0.3rem;
  }

  .reward-gacha-rate b {
    overflow: hidden;
    font-size: 0.41rem;
    text-overflow: ellipsis;
  }

  .reward-gacha-rate strong {
    font-size: 0.64rem;
  }

  .reward-gacha-action {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .reward-gacha-action > small:first-child {
    grid-column: 1 / -1;
  }

  .reward-card.is-owned::after {
    top: 0.4rem;
    left: 0.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reward-rarity-card--epic .reward-preview,
  .reward-rarity-card--legendary .reward-preview,
  .reward-collection-track i {
    animation: none;
    transition: none;
  }
}

/* Collection album and in-world draw confirmation. */
.reward-collection-summary {
  color: #173f2c;
  font-size: 1.05rem;
  font-weight: 950;
  white-space: nowrap;
}

.reward-collection-tools {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 1rem;
  padding: 0.55rem;
  border: 1px solid #ded6c9;
  border-radius: 6px;
  background: #f8f5ee;
}

.reward-collection-filter {
  display: flex;
  flex: 1;
  gap: 0.2rem;
  padding: 0.2rem;
  border: 1px solid #d5cec2;
  border-radius: 5px;
  background: #fff;
}

.reward-collection-filter button {
  min-height: 2.15rem;
  flex: 1;
  padding: 0 0.65rem;
  border-radius: 3px;
  color: #66736b;
  font-size: 0.72rem;
  font-weight: 850;
}

.reward-collection-filter button i {
  margin-right: 0.28rem;
}

.reward-collection-filter button.is-active {
  background: #173f2c;
  color: #fff;
}

.reward-collection-tools > label {
  display: grid;
  width: 9rem;
  gap: 0.18rem;
}

.reward-collection-tools > label span {
  color: #727a74;
  font-size: 0.58rem;
  font-weight: 850;
}

.reward-collection-tools select {
  min-height: 2.55rem;
  padding: 0 1.8rem 0 0.55rem;
  border: 1px solid #cfc8bc;
  border-radius: 5px;
  background: #fff;
  color: #314238;
  font-size: 0.72rem;
  font-weight: 750;
}

.reward-album-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.reward-album-card {
  position: relative;
  display: grid;
  grid-template-rows: 7.25rem minmax(7.6rem, auto);
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dcd4c7;
  border-radius: 7px;
  background: #fffdf8;
}

.reward-album-card.is-equipped {
  border-color: #2f8b5e;
  box-shadow: 0 0 0 2px rgba(47, 139, 94, 0.13);
}

.reward-album-card.is-owned::after {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  z-index: 4;
  padding: 0.16rem 0.32rem;
  border-radius: 3px;
  background: #17613a;
  color: #fff;
  content: 'UNLOCKED';
  font-size: 0.43rem;
  font-weight: 950;
  letter-spacing: 0.06em;
}

.reward-album-card.is-equipped::after {
  background: #9a7114;
  content: 'EQUIPPED';
}

.reward-album-visual {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-bottom: 1px solid #e4dccf;
}

.reward-album-visual > .reward-preview {
  height: 100%;
  border: 0;
}

.reward-album-visual .member-title {
  max-width: calc(100% - 1rem);
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
}

.reward-album-card.is-locked .reward-album-visual > .reward-preview {
  filter: grayscale(0.7) brightness(0.82);
  opacity: 0.62;
}

.reward-album-card.is-locked .reward-album-visual::after {
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  padding: 0.25rem;
  background: rgba(20, 30, 25, 0.72);
  color: #eef2ef;
  content: 'LOCKED';
  font-size: 0.45rem;
  font-weight: 950;
  letter-spacing: 0.09em;
  text-align: center;
}

.reward-album-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 0.7rem;
}

.reward-album-body > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  color: #747d77;
  font-size: 0.58rem;
  font-weight: 800;
}

.reward-album-body h3 {
  overflow: hidden;
  margin: 0.42rem 0 0;
  color: #173b2a;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reward-album-body > p {
  margin: 0.3rem 0 0;
  color: #6e7871;
  font-size: 0.68rem;
  font-weight: 800;
}

.reward-album-body > p i {
  width: 1rem;
  color: #2d7a52;
}

.reward-album-card.is-locked .reward-album-body > p i {
  color: #858d87;
}

.reward-album-equip {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 0.35rem 0.5rem;
  border: 1px solid #bed1c4;
  border-radius: 4px;
  background: #f0f6f2;
  color: #17613a;
  font-size: 0.67rem;
  font-weight: 850;
}

.reward-gacha-confirm-card {
  position: relative;
  width: min(100%, 26rem);
  overflow: hidden;
  padding: 1.4rem;
  border: 1px solid #d9bf64;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(23, 63, 44, 0.045) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(rgba(23, 63, 44, 0.045) 1px, transparent 1px) 0 0 / 20px 20px,
    #fffdf8;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.38);
  text-align: center;
}

.reward-modal-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 2;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid #d8d0c2;
  border-radius: 50%;
  background: #fff;
  color: #536159;
}

.reward-gacha-confirm-card > p {
  margin: 0;
  color: #8c6b18;
  font-size: 0.6rem;
  font-weight: 950;
  letter-spacing: 0.09em;
}

.reward-gacha-core {
  position: relative;
  display: grid;
  width: 5rem;
  height: 5rem;
  margin: 0.75rem auto;
  place-items: center;
  border: 1px solid #b99a3d;
  border-radius: 50%;
  background: conic-gradient(from 45deg, #143b2a, #2f8e67, #e5c85e, #456b85, #143b2a);
  box-shadow: 0 0 0 5px #f8f1d8, 0 8px 24px rgba(37, 78, 57, 0.24);
  color: #fff4b9;
  font-size: 1.45rem;
  animation: reward-core-pulse 2.4s ease-in-out infinite;
}

.reward-gacha-confirm-card h2 {
  margin: 0.9rem 0 0.25rem;
  color: #173b2a;
  font-size: 1.25rem;
  font-weight: 950;
}

.reward-gacha-confirm-card > span {
  color: #68726b;
  font-size: 0.74rem;
  line-height: 1.55;
}

.reward-gacha-confirm-stats {
  display: grid;
  grid-template-columns: 1fr auto 1fr 1fr;
  gap: 0.35rem;
  align-items: center;
  margin-top: 1rem;
}

.reward-gacha-confirm-stats > div {
  min-width: 0;
  padding: 0.55rem 0.35rem;
  border: 1px solid #ddd4c4;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.88);
}

.reward-gacha-confirm-stats > i {
  color: #9b8d70;
  font-size: 0.65rem;
}

.reward-gacha-confirm-stats small {
  display: block;
  color: #8a908b;
  font-size: 0.45rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.reward-gacha-confirm-stats strong {
  display: block;
  margin-top: 0.16rem;
  color: #173f2c;
  font-size: 0.68rem;
  font-weight: 900;
}

.reward-gacha-confirm-stats strong b {
  font-size: 0.92rem;
}

.reward-gacha-confirm-actions {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: 0.55rem;
  margin-top: 1rem;
}

.reward-gacha-confirm-actions button {
  min-height: 2.8rem;
}

@keyframes reward-core-pulse {
  50% { filter: saturate(1.28) brightness(1.1); box-shadow: 0 0 0 6px #f8f1d8, 0 8px 30px rgba(200, 156, 43, 0.4); }
}

@media (max-width: 640px) {
  .reward-collection-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .reward-collection-tools > label {
    width: 100%;
  }

  .reward-album-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .reward-album-card {
    grid-template-rows: 5.8rem minmax(7.1rem, auto);
  }

  .reward-album-visual .reward-frame-preview {
    width: 3.7rem;
    height: 3.7rem;
  }

  .reward-album-body {
    padding: 0.58rem;
  }

  .reward-album-body > div:first-child > span:first-child {
    display: none;
  }

  .reward-album-body h3 {
    font-size: 0.76rem;
  }

  .reward-album-body > p,
  .reward-album-equip {
    font-size: 0.6rem;
  }

  .reward-gacha-confirm-card {
    padding: 1.15rem 0.85rem 0.9rem;
  }

  .reward-gacha-core {
    width: 4.35rem;
    height: 4.35rem;
  }

  .reward-gacha-confirm-stats {
    grid-template-columns: 1fr auto 1fr;
  }

  .reward-gacha-confirm-stats > div:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 350px) {
  .reward-album-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reward-gacha-core {
    animation: none;
  }
}

/* Reward acquisition history. */
.reward-history-list {
  display: grid;
  gap: 0.5rem;
}

.reward-history-row {
  position: relative;
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  overflow: hidden;
  padding: 0.6rem 0.7rem 0.6rem 0.55rem;
  border: 1px solid #ded7cb;
  border-left: 3px solid #3a7d5a;
  border-radius: 6px;
  background: #fffdf8;
}

.reward-history-row.is-gacha {
  border-left-color: #8457a7;
  background: linear-gradient(100deg, #faf6ff, #fffdf8 42%);
}

.reward-history-row > .reward-preview.is-compact {
  width: 4.1rem;
  min-height: 4.1rem;
}

.reward-history-copy {
  min-width: 0;
}

.reward-history-copy > div {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.reward-history-copy > div > small {
  color: #7c847f;
  font-size: 0.6rem;
  font-weight: 800;
}

.reward-history-copy h3 {
  overflow: hidden;
  margin: 0.28rem 0 0;
  color: #173b2a;
  font-size: 0.88rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reward-history-copy p {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.22rem 0 0;
  color: #68736c;
  font-size: 0.64rem;
  font-weight: 750;
}

.reward-history-copy p > i {
  color: #357b57;
}

.reward-history-row.is-gacha .reward-history-copy p > i {
  color: #8457a7;
}

.reward-history-copy time {
  margin-left: auto;
  color: #8a908c;
  font-size: 0.58rem;
  font-weight: 650;
}

.reward-history-row > strong {
  color: #963d43;
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.reward-request-subsection {
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid #e5ded2;
}

.reward-request-subsection > div {
  margin-bottom: 0.55rem;
}

.reward-request-subsection h3 {
  margin: 0.12rem 0 0;
  color: #173f2c;
  font-size: 0.95rem;
  font-weight: 900;
}

@media (max-width: 640px) {
  .reward-history-row {
    grid-template-columns: 3.6rem minmax(0, 1fr) auto;
    gap: 0.55rem;
    padding: 0.5rem;
  }

  .reward-history-row > .reward-preview.is-compact {
    width: 3.5rem;
    min-height: 3.5rem;
  }

  .reward-history-copy h3 {
    font-size: 0.76rem;
  }

  .reward-history-copy p {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.3rem;
    font-size: 0.57rem;
  }

  .reward-history-copy time {
    grid-column: 2;
    margin-left: 0;
    font-size: 0.53rem;
  }

  .reward-history-row > strong {
    font-size: 0.66rem;
  }
}

/* Admin reward economy overview. */
.reward-admin-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
}

.reward-admin-summary > article {
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid #d9e1dc;
  border-radius: 7px;
  background: #f8faf8;
}

.reward-admin-summary > article > span {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  color: #68766e;
  font-size: 0.62rem;
  font-weight: 850;
}

.reward-admin-summary > article > span i {
  color: #28744f;
}

.reward-admin-summary > article > strong {
  display: block;
  overflow: hidden;
  margin-top: 0.3rem;
  color: #173f2c;
  font-size: 1.35rem;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reward-admin-summary > article > strong small {
  margin-left: 0.2rem;
  color: #6c7770;
  font-size: 0.62rem;
}

.reward-admin-summary > article > p {
  margin: 0.35rem 0 0;
  color: #808782;
  font-size: 0.52rem;
  line-height: 1.35;
}

.reward-admin-insights {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(17rem, 0.85fr);
  gap: 1.25rem;
}

.reward-admin-insights > div + div {
  padding-left: 1.25rem;
  border-left: 1px solid #e2e7e3;
}

.reward-admin-insights h2 {
  margin: 0.12rem 0 0.8rem;
  color: #173f2c;
  font-size: 0.95rem;
  font-weight: 900;
}

.reward-rarity-stats {
  display: grid;
  gap: 0.5rem;
}

.reward-admin-rarity {
  display: grid;
  grid-template-columns: 5.4rem minmax(4rem, 1fr) 6.5rem;
  gap: 0.55rem;
  align-items: center;
}

.reward-admin-rarity > span {
  color: #647068;
  font-size: 0.58rem;
  font-weight: 950;
  letter-spacing: 0.05em;
}

.reward-admin-rarity > div {
  height: 0.42rem;
  overflow: hidden;
  border-radius: 999px;
  background: #e7ebe8;
}

.reward-admin-rarity > div i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #71827a;
}

.reward-admin-rarity.is-rare > div i { background: #3389b2; }
.reward-admin-rarity.is-epic > div i { background: #9865b9; }
.reward-admin-rarity.is-legendary > div i { background: #c69224; }

.reward-admin-rarity > strong {
  color: #233c2f;
  font-size: 0.72rem;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.reward-admin-rarity > strong small {
  margin-left: 0.25rem;
  color: #7a847e;
  font-size: 0.52rem;
}

.reward-daily-draws {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.32rem;
  height: 8.2rem;
  align-items: end;
  padding-top: 0.2rem;
}

.reward-daily-draws > div {
  display: grid;
  min-width: 0;
  height: 100%;
  grid-template-rows: 1rem minmax(0, 1fr) 1rem;
  gap: 0.2rem;
  align-items: end;
  text-align: center;
}

.reward-daily-draws strong {
  color: #405148;
  font-size: 0.58rem;
  font-weight: 900;
}

.reward-daily-draws span {
  position: relative;
  display: flex;
  height: 100%;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 1px solid #ccd5cf;
  background: linear-gradient(90deg, transparent 48%, rgba(53, 111, 79, 0.06) 48% 52%, transparent 52%);
}

.reward-daily-draws span i {
  display: block;
  width: min(1.35rem, 70%);
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #aa7ac7, #396f86);
}

.reward-daily-draws small {
  overflow: hidden;
  color: #7b847f;
  font-size: 0.5rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .reward-admin-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .reward-admin-insights {
    grid-template-columns: 1fr;
  }

  .reward-admin-insights > div + div {
    padding-top: 1rem;
    padding-left: 0;
    border-top: 1px solid #e2e7e3;
    border-left: 0;
  }
}

@media (max-width: 520px) {
  .reward-admin-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reward-admin-summary > article:last-child {
    grid-column: 1 / -1;
  }

  .reward-admin-rarity {
    grid-template-columns: 4.4rem minmax(3rem, 1fr) 5.5rem;
    gap: 0.4rem;
  }
}

/* Ver.3.07: shared interaction and mobile navigation polish. */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(38, 128, 87, 0.32);
  outline-offset: 2px;
}

:where(button, a, input, select, textarea) {
  -webkit-tap-highlight-color: rgba(28, 106, 70, 0.12);
}

:where(button, .site-button-primary, .site-button-secondary, .portal-primary-btn, .portal-ghost-btn, .admin-primary-btn, .admin-ghost-btn) {
  touch-action: manipulation;
}

:where(button, .site-button-primary, .site-button-secondary):active:not(:disabled) {
  transform: translateY(1px);
}

:where(button, input, select, textarea):disabled {
  cursor: not-allowed;
}

.app-brand {
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.app-brand > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-brand-label-short {
  display: none;
}

.app-header-actions {
  flex: 0 0 auto;
}

.header-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.header-action i {
  margin: 0 !important;
}

.app-tabbar {
  scroll-padding-inline: 1rem;
}

.app-tabbar .tab-btn {
  scroll-snap-align: center;
}

.tab-panel:not(.hidden) {
  animation: ui-panel-enter 180ms ease-out both;
}

@keyframes ui-panel-enter {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .portal-header .app-header-row,
  .admin-header .app-header-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    flex-wrap: nowrap !important;
    gap: 0.55rem !important;
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
  }

  .portal-header .app-brand,
  .admin-header .app-brand {
    gap: 0.55rem !important;
    font-size: 0.96rem !important;
  }

  .portal-header .brand-mark,
  .admin-header .admin-mark {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }

  .app-brand-label-full {
    display: none;
  }

  .app-brand-label-short {
    display: inline;
  }

  .app-header-actions {
    gap: 0.35rem !important;
  }

  .portal-header .header-action,
  .admin-header .header-action {
    width: 2.45rem;
    min-width: 2.45rem;
    min-height: 2.45rem;
    padding: 0 !important;
    border-radius: 6px;
    font-size: 0.86rem !important;
  }

  .portal-header .header-action-label,
  .admin-header .header-action-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .admin-header .admin-version {
    padding: 0.32rem 0.4rem;
    font-size: 0.58rem;
    letter-spacing: 0;
  }

  #admin-tabs {
    display: flex !important;
    grid-template: none !important;
    gap: 0.35rem !important;
    padding-top: 0.15rem;
    padding-bottom: 0.55rem !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  #admin-tabs::-webkit-scrollbar {
    display: none;
  }

  #admin-tabs .tab-btn {
    flex: 0 0 auto;
    min-width: auto;
    min-height: 2.45rem;
    padding: 0.42rem 0.7rem;
    font-size: 0.68rem;
    white-space: nowrap;
  }

  .portal-main,
  .admin-main,
  .reward-page-main {
    padding-right: 0.75rem !important;
    padding-left: 0.75rem !important;
  }

  .portal-mobile-nav {
    padding-bottom: max(0.35rem, env(safe-area-inset-bottom));
  }

  .portal-shell:has(#portal-mobile-nav) .portal-main {
    padding-bottom: calc(5.4rem + env(safe-area-inset-bottom)) !important;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  .admin-table-scroll {
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
  }
}

@media (max-width: 380px) {
  .admin-header .admin-version {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab-panel:not(.hidden) {
    animation: none;
  }
}

/* Ver.3.08: async feedback and direct dashboard navigation. */
.tab-panel.is-loading::before {
  content: "";
  position: sticky;
  z-index: 8;
  top: 0;
  display: block;
  width: 100%;
  height: 3px;
  margin-bottom: -3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, #27865a 35%, #d6b45d 50%, #27865a 65%, transparent 100%);
  background-size: 220% 100%;
  animation: tab-loading-bar 1.1s linear infinite;
}

@keyframes tab-loading-bar {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

.tab-load-error {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid #e2b7ad;
  border-left: 3px solid #b4503d;
  border-radius: 6px;
  background: #fff9f7;
  color: #713b32;
  font-size: 0.82rem;
  font-weight: 650;
}

.tab-load-error > i {
  color: #b4503d;
}

.tab-load-error button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.25rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid #d5a499;
  border-radius: 5px;
  background: #fff;
  color: #713b32;
  font-weight: 800;
}

.dashboard-card.is-actionable {
  position: relative;
  width: 100%;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.dashboard-card.is-actionable:hover {
  border-color: #8bb4a0;
  box-shadow: 0 5px 14px rgba(20, 69, 47, 0.08);
  transform: translateY(-1px);
}

.dashboard-card-arrow {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  color: #8da198;
  font-size: 0.68rem;
}

@media (max-width: 520px) {
  .tab-load-error {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .tab-load-error button {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab-panel.is-loading::before {
    animation-duration: 2.4s;
  }

  .dashboard-card.is-actionable {
    transition: none;
  }
}

/* Keep the Ver.4.0 workspace above legacy component refinements in the cascade. */
.admin-shell .dashboard-card {
  border-top: 1px solid #d7e0da;
}

.admin-main .admin-page-heading h1 {
  gap: 0.45rem;
  padding: 0;
  border-bottom: 0;
}

.admin-shell .dashboard-alert > span:nth-child(2) {
  min-width: 0;
}

.admin-shell .dashboard-alert :is(b, small) {
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .admin-sidebar #admin-tabs .tab-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 6.1rem;
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  .admin-sidebar #admin-tabs {
    scroll-padding-inline: 0.75rem;
  }

  .admin-sidebar #admin-tabs .tab-btn {
    min-width: 5.8rem;
    padding-inline: 0.55rem;
  }
}

/* Ver.4.02: unified portal and operations UX. */
:root {
  --aca-control-height: 2.75rem;
  --aca-surface-subtle: #f6f8f6;
  --aca-surface-active: #e8f1ec;
  --aca-focus: #2f7892;
  --aca-shadow-soft: 0 1px 2px rgba(18, 43, 29, 0.05), 0 8px 22px rgba(18, 43, 29, 0.045);
}

.portal-point-chip {
  display: none;
}

.portal-panel,
.admin-panel {
  box-shadow: var(--aca-shadow-soft);
}

.portal-section-intro,
.portal-section-toolbar,
.portal-compose-card,
.event-view-header {
  position: relative;
  overflow: hidden;
  border-left: 3px solid #2d7654 !important;
}

.portal-section-intro h2,
.portal-section-toolbar h2,
.portal-compose-card .portal-page-title,
.event-view-header h2 {
  color: #173d2b !important;
  letter-spacing: 0;
}

.portal-compose-card textarea {
  min-height: 6.5rem;
  background: #fbfcfb;
}

.portal-home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.home-profile {
  min-width: 0;
}

.home-actions {
  flex-wrap: nowrap;
}

.home-actions :is(.site-button-primary, .site-button-secondary) {
  min-width: 7rem;
}

.home-nav-btn {
  white-space: nowrap;
}

.reward-category-head h3 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.reward-category-head h3 b {
  display: inline-grid;
  min-width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: #e6ede9;
  color: #52675c;
  font-size: 0.62rem;
}

.reward-load-more {
  display: grid;
  min-height: 4.25rem;
  grid-column: 1 / -1;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.7rem 0.85rem;
  border: 1px dashed #aebdb5;
  border-radius: 7px;
  background: #f6f8f6;
  color: #234a35;
  text-align: left;
}

.reward-load-more:hover {
  border-color: #5d8d72;
  background: #edf3ef;
}

.reward-load-more > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: #dfece5;
  color: #206744;
}

.reward-load-more > b {
  font-size: 0.82rem;
  font-weight: 900;
}

.reward-load-more > small {
  color: #718078;
  font-size: 0.68rem;
  font-weight: 800;
}

.reward-load-more--album {
  align-self: stretch;
}

.admin-main > .tab-panel > h1 {
  margin-bottom: 1rem !important;
  padding: 0 0 0.75rem;
  border-bottom: 1px solid #dce3df;
  color: #18392a;
  font-size: 1.35rem;
}

#admin-tabs .tab-btn[aria-current='page'],
#portal-tabs .tab-btn[aria-current='page'] {
  font-weight: 900;
}

.admin-page-actions :is(button, a),
.portal-section-toolbar :is(button, a) {
  min-height: var(--aca-control-height);
}

@media (max-width: 760px) {
  .portal-header,
  .admin-header {
    z-index: 40;
  }

  .portal-point-chip {
    display: inline-flex;
    min-height: 2.45rem;
    align-items: center;
    gap: 0.2rem;
    padding: 0 0.48rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.7rem;
    line-height: 1;
    white-space: nowrap;
  }

  .portal-point-chip i {
    color: #f0cf69;
    font-size: 0.65rem;
  }

  .portal-point-chip b {
    font-size: 0.76rem;
    font-weight: 900;
  }

  .portal-point-chip small {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.55rem;
  }

  .portal-header .app-header-actions {
    gap: 0.28rem !important;
  }

  .portal-header .app-brand > span {
    font-size: 0.9rem;
  }

  .portal-home-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem !important;
    padding: 0.85rem !important;
  }

  .home-profile {
    gap: 0.75rem !important;
  }

  .home-avatar {
    width: 3.3rem;
    height: 3.3rem;
  }

  .portal-home-hero h1 {
    font-size: 1.2rem !important;
    line-height: 1.3;
  }

  .home-actions {
    display: grid !important;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.45rem;
  }

  .home-actions :is(.site-button-primary, .site-button-secondary) {
    width: 100%;
    min-width: 0;
    min-height: 2.55rem;
    padding-inline: 0.55rem;
  }

  .home-section-head {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.55rem !important;
  }

  .home-section-head h2 {
    min-width: 0;
    font-size: 0.94rem;
  }

  .home-nav-btn {
    width: auto !important;
    min-height: 2.15rem;
    flex: 0 0 auto;
    padding: 0.4rem 0.62rem;
    font-size: 0.7rem;
  }

  .home-priority-card,
  .home-card {
    padding: 0.85rem !important;
  }

  .home-action-summary {
    gap: 0.4rem;
  }

  .home-action-summary-item {
    min-height: 2.55rem;
  }

  .portal-section-intro,
  .portal-section-toolbar,
  .portal-compose-card,
  .event-view-header {
    padding: 0.85rem !important;
  }

  .portal-section-intro h2,
  .portal-section-toolbar h2,
  .event-view-header h2 {
    font-size: 1.05rem !important;
  }

  .portal-compose-card textarea {
    min-height: 5.75rem;
  }

  .portal-mobile-nav {
    min-height: calc(4.15rem + env(safe-area-inset-bottom));
    align-items: stretch;
    padding-top: 0;
    border-top-color: #c8d3cd;
    background: #ffffff;
  }

  .portal-mobile-nav > button {
    position: relative;
    min-height: 3.75rem;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .portal-mobile-nav > button.is-active {
    color: #145d3c;
  }

  .portal-mobile-nav > button.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 28%;
    width: 44%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: #176a43;
  }

  .portal-more-grid > :is(button, a) {
    min-height: 5.6rem;
  }

  .portal-shell:has(.reward-page-main) .portal-header {
    position: sticky;
    z-index: 45;
    top: 0;
  }

  .reward-view-tabs {
    position: sticky !important;
    z-index: 32;
    top: 3.75rem !important;
    margin-right: -0.7rem;
    margin-left: -0.7rem;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .reward-view-tabs button {
    min-height: 3.25rem;
  }

  .reward-load-more {
    min-height: 3.8rem;
  }

  .admin-sidebar {
    border-bottom: 1px solid #d5dfd9;
    box-shadow: 0 4px 12px rgba(20, 54, 36, 0.06);
  }

  .admin-sidebar #admin-tabs {
    padding-right: 0.75rem !important;
    padding-left: 0.75rem !important;
  }

  .admin-sidebar #admin-tabs .tab-btn {
    min-height: 2.55rem;
  }

  .operation-task-toolbar label:has(#operation-task-assignee-filter) {
    grid-column: 1 / 3;
  }

  .operation-task-toolbar #operation-task-filter-reset {
    width: 2.7rem;
    grid-column: 3;
    justify-self: end;
  }

  .admin-page-heading {
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .admin-page-heading h1,
  .admin-main > .tab-panel > h1 {
    font-size: 1.16rem;
  }

  .admin-page-actions {
    gap: 0.35rem;
  }

  .admin-page-actions :is(button, a) {
    min-height: 2.55rem;
  }
}

@media (max-width: 360px) {
  .portal-point-chip {
    padding-inline: 0.38rem;
  }

  .portal-header .app-brand > span {
    font-size: 0.82rem;
  }

  .home-actions :is(.site-button-primary, .site-button-secondary) {
    font-size: 0.72rem;
  }

  .home-nav-btn {
    padding-inline: 0.5rem;
  }

  .admin-page-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .admin-page-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .admin-page-actions .admin-action-btn {
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
  }

  .reward-load-more {
    grid-template-columns: 1.8rem minmax(0, 1fr) auto;
    padding-inline: 0.65rem;
  }
}

/* Officer directory */
.portal-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #ccd8d1;
}

.portal-section-heading span {
  display: block;
  color: #527064;
  font-size: 0.7rem;
  font-weight: 800;
}

.portal-section-heading h2,
.portal-section-heading h3 {
  margin-top: 0.2rem;
  color: #123d2a;
  font-size: 1.35rem;
  font-weight: 800;
}

.portal-section-heading p {
  margin-top: 0.35rem;
  color: #64706a;
  font-size: 0.86rem;
}

.library-cat-heading {
  margin: 1.75rem 0 0.75rem;
}

.library-cat-heading span {
  color: #527064;
  font-size: 0.7rem;
  font-weight: 800;
}

.library-cat-heading h3 {
  margin-top: 0.15rem;
  color: #123d2a;
  font-size: 1.15rem;
  font-weight: 800;
}

.officer-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.officer-profile-card {
  display: grid;
  grid-template-columns: minmax(135px, 36%) minmax(0, 1fr);
  min-height: 255px;
  overflow: hidden;
  border: 1px solid #d3ddd7;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(21, 55, 38, 0.07);
}

.officer-profile-photo {
  position: relative;
  min-height: 255px;
  overflow: hidden;
  background: #e6ece8;
}

.officer-profile-photo img,
.officer-profile-placeholder {
  width: 100%;
  height: 100%;
  min-height: 255px;
  object-fit: cover;
}

.officer-profile-placeholder {
  display: grid;
  place-items: center;
  color: #708078;
  font-size: 2.4rem;
}

.officer-profile-photo > span {
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  left: 0.65rem;
  padding: 0.45rem 0.6rem;
  background: rgba(13, 50, 34, 0.9);
  color: white;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
}

.officer-profile-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 1.15rem;
}

.officer-profile-body header small {
  color: #668075;
  font-size: 0.64rem;
  font-weight: 800;
}

.officer-profile-body h3 {
  margin-top: 0.1rem;
  color: #123d2a;
  font-size: 1.25rem;
  font-weight: 800;
}

.officer-profile-body header p {
  margin-top: 0.15rem;
  color: #64706a;
  font-size: 0.78rem;
}

.officer-profile-copy {
  margin-top: 0.85rem;
  color: #36453e;
  font-size: 0.88rem;
  line-height: 1.75;
  white-space: pre-line;
}

.officer-profile-body blockquote {
  display: flex;
  gap: 0.55rem;
  margin-top: auto;
  padding-top: 1rem;
  color: #345b49;
  font-size: 0.8rem;
  line-height: 1.65;
  white-space: pre-line;
}

.officer-profile-body blockquote i {
  margin-top: 0.2rem;
  color: #92a79d;
  font-size: 0.7rem;
}

.admin-officer-list {
  display: grid;
  gap: 0.75rem;
}

.admin-officer-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 0.85rem;
  padding: 0.75rem;
  border: 1px solid #d6dfda;
  border-radius: 8px;
  background: #fff;
}

.admin-officer-card > img,
.admin-officer-placeholder {
  width: 86px;
  height: 108px;
  border-radius: 5px;
  object-fit: cover;
  background: #e7ece9;
}

.admin-officer-placeholder {
  display: grid;
  place-items: center;
  color: #718078;
  font-size: 1.5rem;
}

.admin-officer-card header,
.admin-officer-card footer {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.65rem;
}

.admin-officer-card header span,
.admin-officer-card header small {
  display: block;
}

.admin-officer-card header small,
.admin-officer-card p,
.admin-officer-card footer small {
  color: #63716a;
  font-size: 0.75rem;
}

.admin-officer-card p {
  margin-top: 0.45rem;
  line-height: 1.5;
}

.admin-officer-card header em {
  flex: 0 0 auto;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  background: #e8ebe9;
  color: #5d6963;
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 800;
}

.admin-officer-card header em.is-public {
  background: #dcebe3;
  color: #17633f;
}

.admin-officer-card footer {
  align-items: center;
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid #e2e7e4;
}

.admin-officer-card footer span {
  display: flex;
  gap: 0.35rem;
}

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

@media (max-width: 520px) {
  .portal-section-heading h2,
  .portal-section-heading h3 {
    font-size: 1.18rem;
  }

  .officer-profile-card {
    grid-template-columns: 118px minmax(0, 1fr);
    min-height: 230px;
  }

  .officer-profile-photo,
  .officer-profile-photo img,
  .officer-profile-placeholder {
    min-height: 230px;
  }

  .officer-profile-body {
    padding: 0.9rem;
  }

  .officer-profile-body h3 {
    font-size: 1.08rem;
  }

  .officer-profile-copy {
    font-size: 0.8rem;
    line-height: 1.6;
  }

  .officer-profile-body blockquote {
    padding-top: 0.65rem;
    font-size: 0.75rem;
  }

  .admin-officer-card {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .admin-officer-card > img,
  .admin-officer-placeholder {
    width: 72px;
    height: 92px;
  }
}

/* 幹部フォームの顔写真プレビュー */
.officer-image-field {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.officer-image-preview.hidden {
  display: none;
}

.officer-image-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex: none;
}

.officer-image-preview img {
  width: 86px;
  height: 108px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #d6ded9;
  background: #e7ece9;
}

.officer-image-preview span {
  font-size: 0.68rem;
  color: #718078;
  text-align: center;
}

/* First login tour */
.profile-tour-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #d8e0db;
}

.profile-tour-row > span {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.profile-tour-row > span > i {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #e2ece6;
  color: #17633f;
}

.profile-tour-row b,
.profile-tour-row small {
  display: block;
}

.profile-tour-row b {
  color: #173c2b;
  font-size: 0.88rem;
}

.profile-tour-row small {
  margin-top: 0.15rem;
  color: #69736e;
  font-size: 0.72rem;
}

body.onboarding-open {
  overflow: hidden;
}

.onboarding-tour {
  position: fixed;
  z-index: 10050;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.onboarding-tour.hidden {
  display: none;
}

.onboarding-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 25, 17, 0.72);
  backdrop-filter: blur(3px);
}

.onboarding-dialog {
  position: relative;
  width: min(100%, 460px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  background: #fbfcfb;
  box-shadow: 0 24px 70px rgba(3, 16, 10, 0.36);
}

.onboarding-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #dbe3de;
}

.onboarding-header > div {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.onboarding-header img {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 5px;
  object-fit: contain;
}

.onboarding-header small,
.onboarding-header b {
  display: block;
}

.onboarding-header small {
  color: #6b7972;
  font-size: 0.58rem;
  font-weight: 800;
}

.onboarding-header b {
  color: #153c29;
  font-size: 0.88rem;
}

.onboarding-skip {
  min-height: 2.2rem;
  padding: 0.35rem 0.55rem;
  color: #65716b;
  font-size: 0.76rem;
  font-weight: 700;
}

.onboarding-progress {
  height: 4px;
  background: #dfe6e2;
}

.onboarding-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: #20754b;
  transition: width 220ms ease;
}

.onboarding-content {
  min-height: 345px;
  padding: 2rem 2rem 1.25rem;
  text-align: center;
}

.onboarding-icon {
  display: grid;
  width: 4.6rem;
  height: 4.6rem;
  margin: 0 auto 1.1rem;
  place-items: center;
  border: 1px solid #bdd1c5;
  border-radius: 50%;
  background: #e4eee8;
  color: #145f3a;
  font-size: 1.75rem;
}

#onboarding-step-label {
  color: #557065;
  font-size: 0.65rem;
  font-weight: 900;
}

.onboarding-content h2 {
  margin-top: 0.35rem;
  color: #123d2a;
  font-size: 1.45rem;
  font-weight: 800;
}

#onboarding-description {
  margin: 0.75rem auto 0;
  color: #48564f;
  font-size: 0.9rem;
  line-height: 1.75;
}

.onboarding-tip {
  display: flex;
  align-items: start;
  gap: 0.6rem;
  margin-top: 1.15rem;
  padding: 0.8rem;
  border: 1px solid #d8dfd0;
  border-radius: 6px;
  background: #f4f5ee;
  color: #515b45;
  font-size: 0.76rem;
  line-height: 1.55;
  text-align: left;
}

.onboarding-tip i {
  margin-top: 0.15rem;
  color: #7b832d;
}

.onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1rem 1rem;
  border-top: 1px solid #dbe3de;
}

.onboarding-actions button {
  min-height: 2.8rem;
}

.onboarding-actions .site-button-primary {
  margin-left: auto;
}

@media (max-width: 520px) {
  .profile-tour-row {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-tour-row button {
    width: 100%;
  }

  .onboarding-tour {
    align-items: end;
    padding: 0;
  }

  .onboarding-dialog {
    width: 100%;
    max-height: calc(100dvh - 1rem);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 8px 8px 0 0;
  }

  .onboarding-content {
    min-height: 330px;
    padding: 1.5rem 1.25rem 1rem;
  }

  .onboarding-content h2 {
    font-size: 1.25rem;
  }

  #onboarding-description {
    font-size: 0.84rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-progress span {
    transition: none;
  }
}

/* スマホ向けフィルタ折りたたみ */
.mobile-collapse-toggle {
  display: none;
}

@media (max-width: 640px) {
  .mobile-collapse-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    padding: 0.1rem 0;
    border: 0;
    background: none;
    color: #18392a;
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
  }

  .mobile-collapse-toggle .collapse-caret {
    margin-left: auto;
    color: #718078;
    transition: transform 0.2s;
  }

  .mobile-collapsible.is-open .collapse-caret {
    transform: rotate(180deg);
  }

  .mobile-collapsible .mobile-collapse-body {
    display: none;
  }

  .mobile-collapsible.is-open .mobile-collapse-body {
    display: block;
    margin-top: 0.8rem;
  }
}

/* ===== 質感・エフェクト磨き込み ===== */

/* ヘッダーにわずかな深みを出す */
.app-header {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.08));
  box-shadow: 0 2px 10px rgba(13, 47, 30, 0.22);
}

/* 主要ボタン: グラデーションと押下フィードバック */
.site-cta-primary,
.site-button-primary,
.admin-action-btn {
  background-image: linear-gradient(165deg, #1b7448 0%, #115c36 55%, #0e4d2d 100%);
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.16s ease, box-shadow 0.16s ease;
}

@media (hover: hover) {
  .site-cta-primary:hover,
  .site-button-primary:hover,
  .admin-action-btn:hover {
    background-image: linear-gradient(165deg, #196a42 0%, #0d472a 60%, #0a3c23 100%);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(17, 92, 54, 0.26);
  }
}

.site-cta-primary:active,
.site-button-primary:active,
.admin-action-btn:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(17, 92, 54, 0.2);
}

/* 二次ボタンにも軽い反応を付ける */
.site-cta-secondary,
.site-button-secondary,
.site-icon-btn,
.admin-ghost-btn {
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.16s ease, box-shadow 0.16s ease;
}

@media (hover: hover) {
  .site-cta-secondary:hover,
  .site-button-secondary:hover,
  .site-icon-btn:hover {
    border-color: #9db8a4;
    background: #f4f8f3;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(34, 49, 41, 0.1);
  }
}

.site-cta-secondary:active,
.site-button-secondary:active,
.site-icon-btn:active,
.admin-ghost-btn:active {
  transform: translateY(1px);
}

/* 操作できるカードは浮き上がって応える */
.dashboard-card.is-actionable,
.event-card,
.officer-profile-card,
.dashboard-alert {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

@media (hover: hover) {
  .dashboard-card.is-actionable:hover,
  .event-card:hover,
  .officer-profile-card:hover,
  .dashboard-alert:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(34, 49, 41, 0.13);
  }
}

/* タブ切替時にパネルをふわっと表示 */
.portal-main .tab-panel:not(.hidden),
.admin-main .tab-panel:not(.hidden) {
  animation: aca-panel-in 0.22s ease both;
}

@keyframes aca-panel-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* モーダル背景をぼかして視線を集める */
.app-dialog-layer,
.fixed.inset-0.bg-black\/50 {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.fixed.inset-0.bg-black\/50 {
  animation: aca-fade-in 0.16s ease both;
}

@keyframes aca-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* キーボード操作時のフォーカスを明確に */
button:focus-visible,
a:focus-visible,
[role="tab"]:focus-visible {
  outline: 2px solid rgba(45, 122, 84, 0.85);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .portal-main .tab-panel:not(.hidden),
  .admin-main .tab-panel:not(.hidden),
  .fixed.inset-0.bg-black\/50 {
    animation: none;
  }

  .site-cta-primary,
  .site-button-primary,
  .admin-action-btn,
  .site-cta-secondary,
  .site-button-secondary,
  .site-icon-btn,
  .admin-ghost-btn,
  .dashboard-card.is-actionable,
  .event-card,
  .officer-profile-card,
  .dashboard-alert {
    transition: none;
    transform: none;
  }
}


/* ===== ダークモード =====
   <html data-theme="dark"> のとき適用。初期値はOS設定、ヘッダーのボタンで切替。 */

:root[data-theme="dark"] {
  --aca-ink: #e4eae5;
  --aca-muted: #99a89f;
  --aca-line: #2d3a32;
  --aca-paper: #171f1a;
  --aca-canvas: #0f1512;
  --aca-canvas-2: #131b16;
  --aca-green: #4fae7e;
  --aca-green-2: #5cb98a;
  --aca-moss: #7d9a72;
  --aca-brass: #c9a76d;
  --aca-danger: #e0736b;
  color-scheme: dark;
}

[data-theme="dark"] body,
[data-theme="dark"] .app-body {
  background: var(--aca-canvas);
  color: var(--aca-ink);
}

[data-theme="dark"] .site-shell,
[data-theme="dark"] .portal-shell,
[data-theme="dark"] .admin-shell {
  background: var(--aca-canvas);
}

[data-theme="dark"] .site-shell::before,
[data-theme="dark"] .portal-shell::before,
[data-theme="dark"] .admin-shell::before {
  opacity: 0.05;
  filter: invert(1) hue-rotate(180deg);
}

/* Tailwindのデフォルト枠線色(#e5e7eb)を暗色へ */
[data-theme="dark"] *,
[data-theme="dark"] ::before,
[data-theme="dark"] ::after {
  border-color: var(--aca-line);
}

/* 面(パネル・カード類) */
[data-theme="dark"] :is(
  .portal-panel, .admin-panel, .subtle-panel, .site-panel,
  .app-dialog-card, .app-toast, .session-timeout-dialog,
  .event-card, .post-card, .post-body, .home-card, .home-priority-card,
  .home-list-item, .home-task-item, .home-nav-btn, .home-action-summary-item,
  .cat-card, .admin-cat-card, .reward-card, .role-permission-card,
  .admin-task-panel, .operation-task-row, .admin-request-row,
  .admin-reward-item, .admin-survey-item, .admin-search-empty,
  .dashboard-card, .dashboard-alert, .dashboard-clear, .dashboard-task-open,
  .coverage-day, .application-stat, .application-stats, .application-toolbar,
  .application-search-field, .application-file-preview,
  .officer-profile-card, .admin-officer-card,
  .public-feature, .public-activity, .public-identity, .public-note,
  .public-join-panel, .payment-option, .detail-comment, .feeding-comment,
  .feeding-map-admin-spot, .member-upload-preview, .reward-vault-stat,
  .reward-collection-track, .operation-task-icon-btn, .owned-reward-row,
  .feed-detail-btn, .feed-cancel-btn
) {
  background: var(--aca-paper);
  border-color: var(--aca-line);
  color: var(--aca-ink);
}

[data-theme="dark"] .public-steps li,
[data-theme="dark"] .reward-admin-summary > article,
[data-theme="dark"] .reward-gacha-confirm-stats > div,
[data-theme="dark"] .admin-quick-actions > div {
  background: var(--aca-paper);
  border-color: var(--aca-line);
}

[data-theme="dark"] .library-filter-panel {
  background: rgba(23, 31, 26, 0.94) !important;
  border-color: var(--aca-line) !important;
}

[data-theme="dark"] .hero-section {
  background: linear-gradient(180deg, rgba(15, 21, 18, 0.96), rgba(19, 27, 22, 0.92));
  border-bottom-color: var(--aca-line);
}

/* 入力欄 */
[data-theme="dark"] :is(.form-input, .form-file, .reward-select select, .reward-collection-tools select) {
  background: #121a15;
  border-color: #35453c;
  color: var(--aca-ink);
}

[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .form-file::placeholder {
  color: #6f7f75;
}

[data-theme="dark"] .form-input:focus {
  border-color: var(--aca-green);
  box-shadow: 0 0 0 3px rgba(79, 174, 126, 0.2);
}

[data-theme="dark"] .form-file::file-selector-button {
  background: #22301f;
  background: rgba(79, 174, 126, 0.16);
  border-color: #3a4c41;
  color: #7ccba1;
}

/* 表 */
[data-theme="dark"] .admin-shell table thead,
[data-theme="dark"] thead.bg-gray-100 {
  background: #1d2721 !important;
  color: var(--aca-ink);
}

[data-theme="dark"] .admin-shell table tr:hover {
  background: #1a231d;
}

/* Tailwind文字色の再割り当て */
[data-theme="dark"] :is(.text-gray-900, .text-gray-800, .text-gray-700) { color: #dbe3dd !important; }
[data-theme="dark"] :is(.text-gray-600, .text-gray-500, .text-stone-500) { color: #a2b1a8 !important; }
[data-theme="dark"] .text-gray-400 { color: #7f8e85 !important; }
[data-theme="dark"] :is(.text-emerald-950, .text-emerald-900, .text-emerald-800) { color: #a9d9bf !important; }
[data-theme="dark"] :is(.text-emerald-700, .text-green-700, .text-green-600) { color: #6fc296 !important; }
[data-theme="dark"] :is(.text-red-700, .text-red-600, .text-red-500) { color: #e58079 !important; }
[data-theme="dark"] :is(.text-blue-700, .text-blue-600, .text-blue-500) { color: #85b7e4 !important; }
[data-theme="dark"] :is(.text-amber-700, .text-yellow-800) { color: #d9b36a !important; }
[data-theme="dark"] .text-orange-500 { color: #e0a066 !important; }

/* Tailwind背景色の再割り当て */
[data-theme="dark"] .bg-white { background-color: var(--aca-paper) !important; }
[data-theme="dark"] .bg-gray-50 { background-color: #1a231d !important; }
[data-theme="dark"] .bg-gray-100 { background-color: #1d2721 !important; }
[data-theme="dark"] .bg-gray-700 { background-color: #33413a !important; }
[data-theme="dark"] :is(.bg-red-50, .bg-red-100) { background-color: rgba(224, 115, 107, 0.16) !important; }
[data-theme="dark"] :is(.bg-green-50, .bg-green-100, .bg-emerald-50) { background-color: rgba(79, 174, 126, 0.16) !important; }
[data-theme="dark"] :is(.bg-yellow-50, .bg-yellow-100, .bg-orange-50, .bg-orange-100) { background-color: rgba(217, 179, 106, 0.16) !important; }
[data-theme="dark"] .bg-blue-100 { background-color: rgba(127, 179, 227, 0.18) !important; }

/* 二次ボタン */
[data-theme="dark"] :is(.site-cta-secondary, .site-button-secondary, .site-icon-btn, .admin-main .admin-ghost-btn, .theme-toggle-btn.site-icon-btn) {
  background: #1c2620;
  border-color: #35453c;
  color: #cfdad2;
}

@media (hover: hover) {
  [data-theme="dark"] :is(.site-cta-secondary:hover, .site-button-secondary:hover, .site-icon-btn:hover, .admin-main .admin-ghost-btn:hover) {
    background: #24312a;
    border-color: #46584d;
  }
}

/* 見出し・小見出しの固定色を補正 */
[data-theme="dark"] .admin-page-heading h1 i { color: var(--aca-green) !important; }
[data-theme="dark"] :is(.admin-page-heading p, .admin-operations-grid header small, .admin-page-heading small) { color: var(--aca-muted); }
[data-theme="dark"] .hero-section p { color: #b9c6bd; }
[data-theme="dark"] .public-hero-copy h1 { color: #e9f1ea !important; }

/* ダイアログ・トースト */
[data-theme="dark"] .app-dialog-card > footer { background: #131b16; }
[data-theme="dark"] .app-dialog-message { color: #c3d0c8; }

/* 資料室・幹部カードまわり */
[data-theme="dark"] .officer-profile-photo { background: #1d2721; }
[data-theme="dark"] .officer-profile-placeholder,
[data-theme="dark"] .admin-officer-placeholder { background: #22301f; background: #1f2a23; color: #7f9a72; }
[data-theme="dark"] .officer-image-preview img { background: #1f2a23; border-color: #35453c; }
[data-theme="dark"] .officer-image-preview span { color: var(--aca-muted); }

/* 餌やり */
[data-theme="dark"] .feeding-mobile-register {
  background: rgba(79, 174, 126, 0.12);
  border-color: #3d5748;
  color: #7ccba1;
}
[data-theme="dark"] .feed-day-locked { background: #1d2721; color: var(--aca-muted); }

/* 初回ツアー */
[data-theme="dark"] .onboarding-dialog { background: var(--aca-paper); }
[data-theme="dark"] .onboarding-tip { background: #1d2721; color: #c3d0c8; }

/* フィルタ折りたたみトグル */
[data-theme="dark"] .mobile-collapse-toggle { color: #cfdad2; }
[data-theme="dark"] .mobile-collapse-toggle .collapse-caret { color: var(--aca-muted); }

/* 申込カード(モバイル) */
@media (max-width: 680px) {
  [data-theme="dark"] #applications-table .application-row { background: var(--aca-paper); border-color: var(--aca-line); }
  [data-theme="dark"] #applications-table .application-row td { border-bottom-color: #222d26; }
  [data-theme="dark"] #applications-table .application-row td::before { color: var(--aca-muted); }
}

/* スクロールヒント */
[data-theme="dark"] .admin-scroll-hint { background: #1a231d; border-color: var(--aca-line); color: var(--aca-muted); }

/* ダークモード: !important付き明色背景への対応 */
[data-theme="dark"] .portal-home-hero {
  background: linear-gradient(135deg, rgba(26, 35, 29, 0.96), rgba(19, 27, 22, 0.92));
  border-color: var(--aca-line);
}

[data-theme="dark"] .home-priority-card { background: var(--aca-paper) !important; }

[data-theme="dark"] .home-card {
  background: rgba(23, 31, 26, 0.96) !important;
  border-color: var(--aca-line) !important;
}

[data-theme="dark"] .notification-card { background: var(--aca-paper); border-color: var(--aca-line); }
[data-theme="dark"] .bg-emerald-100 { background-color: rgba(79, 174, 126, 0.2) !important; }
[data-theme="dark"] .portal-more-grid :is(button, a) { background: var(--aca-paper); border-color: var(--aca-line); color: var(--aca-ink); }

/* ダークモード: 通知・タイムライン・餌やり・ナビ */
[data-theme="dark"] .notification-card-copy h3 { color: #a9d9bf; }
[data-theme="dark"] .notification-card-copy p { color: #a2b1a8; }
[data-theme="dark"] #timeline-list { background: var(--aca-paper); border-color: var(--aca-line); }

[data-theme="dark"] .feeding-mobile-days { background: #131b16; border-color: var(--aca-line); }
[data-theme="dark"] .feeding-mobile-day { color: #93a29a; }
[data-theme="dark"] .feeding-mobile-day b { color: #dbe3dd; }
[data-theme="dark"] .feeding-mobile-day small { color: #7f8e85; }
[data-theme="dark"] .feeding-mobile-day span.is-dow-0 { color: #e58079; }
[data-theme="dark"] .feeding-mobile-day span.is-dow-6 { color: #85b7e4; }
[data-theme="dark"] .feeding-mobile-day.is-active { background: rgba(79, 174, 126, 0.14); border-color: #3d5748; color: #7ccba1; }
[data-theme="dark"] .feeding-mobile-day.is-active b { color: #a9d9bf; }
[data-theme="dark"] .feeding-mobile-day.is-today:not(.is-active) { background: #1d2721; }
[data-theme="dark"] .feeding-mobile-slot { background: var(--aca-paper); border-color: var(--aca-line); }
[data-theme="dark"] .feeding-mobile-slot > header { background: #1d2721; }
[data-theme="dark"] .feeding-mobile-slot > header span { color: #a9d9bf; }
[data-theme="dark"] .feeding-mobile-slot > header b { color: var(--aca-muted); }
[data-theme="dark"] .feeding-mobile-empty { color: var(--aca-muted); }

[data-theme="dark"] .portal-mobile-nav { background: #0f1512; border-top-color: var(--aca-line); }
[data-theme="dark"] .portal-mobile-nav > button { color: #8d9c93; }
[data-theme="dark"] .portal-mobile-nav > button.is-active { background: rgba(79, 174, 126, 0.16); color: #7ccba1; }

[data-theme="dark"] .portal-more-sheet { background: #141c17; }
[data-theme="dark"] .portal-more-sheet header small { color: var(--aca-muted); }
[data-theme="dark"] .portal-more-sheet header h2 { color: var(--aca-ink); }

/* ダークモード: マイページ・見出し補正 */
[data-theme="dark"] .profile-avatar-panel { background: var(--aca-paper); }
[data-theme="dark"] .profile-equipped { background: var(--aca-paper); }
[data-theme="dark"] .profile-avatar-preview { background: #1d2721; border-color: var(--aca-line); }
[data-theme="dark"] .portal-main h3 { color: #a9d9bf; }
[data-theme="dark"] .portal-main .officer-profile-body header p { color: var(--aca-muted); }
[data-theme="dark"] .officer-profile-copy { color: #b7c4bb; }
[data-theme="dark"] .officer-profile-body blockquote { color: #9fb59f; }
[data-theme="dark"] .portal-section-heading span,
[data-theme="dark"] .library-cat-heading span { color: var(--aca-muted); }
[data-theme="dark"] .home-list-item b { color: #dbe3dd; }
[data-theme="dark"] .portal-home-hero .portal-home-name,
[data-theme="dark"] .portal-home-hero b { color: #e4eae5; }

/* ダークモード: 空表示など */
[data-theme="dark"] .points-empty { background: #1a231d; border-color: var(--aca-line); color: var(--aca-muted); }

/* ダークモード: イベント */
[data-theme="dark"] .portal-panel h2 { color: #a9d9bf; }
[data-theme="dark"] .date-block { background: #1f2a23; border-color: #35453c; color: #a9d9bf; }
[data-theme="dark"] .event-view-switch { background: #131b16; border-color: var(--aca-line); }
[data-theme="dark"] .event-view-switch button { color: #93a29a; }
[data-theme="dark"] .event-view-switch button.is-active { background: rgba(79, 174, 126, 0.2); color: #a9d9bf; }
[data-theme="dark"] .event-calendar-cell { background: var(--aca-paper); border-color: var(--aca-line); }
[data-theme="dark"] .event-calendar-cell.is-empty { background: transparent; }
[data-theme="dark"] .event-calendar-weekdays span { color: var(--aca-muted); }
[data-theme="dark"] .event-calendar { background: var(--aca-paper); border-color: var(--aca-line); }
[data-theme="dark"] .event-calendar-weekdays { background: #1a231d; border-bottom-color: var(--aca-line); }
[data-theme="dark"] .event-calendar-cell > b { color: var(--aca-muted); }
[data-theme="dark"] .event-calendar-nav b { color: #cfdad2; }
[data-theme="dark"] .event-calendar-item { background: rgba(79, 174, 126, 0.16); color: #a9d9bf; border-left-color: #4fae7e; }

/* ダークモード: 管理ナビゲーション */
[data-theme="dark"] .admin-sidebar { background: #131b16; border-right-color: var(--aca-line); border-bottom-color: var(--aca-line); }
[data-theme="dark"] .admin-sidebar .tab-btn,
[data-theme="dark"] #admin-tabs .tab-btn { color: #a2b1a8; }
[data-theme="dark"] .admin-sidebar .tab-btn:hover,
[data-theme="dark"] #admin-tabs .tab-btn:hover { background: rgba(79, 174, 126, 0.1); color: #cfdad2; }
[data-theme="dark"] .admin-sidebar .tab-btn.tab-active,
[data-theme="dark"] #admin-tabs .tab-btn.tab-active { background: rgba(79, 174, 126, 0.18); color: #a9d9bf; border-color: #3d5748; }
[data-theme="dark"] #admin-tabs .tab-btn.tab-active { box-shadow: inset 0 -2px #4fae7e; }
[data-theme="dark"] .admin-nav-label { color: #6f7f75; }
[data-theme="dark"] .admin-operator { border-bottom-color: var(--aca-line); }
[data-theme="dark"] .admin-operator b { color: #dbe3dd; }
[data-theme="dark"] .admin-operator small { color: var(--aca-muted); }

/* ダークモード: 管理テーブル行 */
[data-theme="dark"] tbody tr { background: var(--aca-paper); }
[data-theme="dark"] .admin-shell table tbody tr:nth-child(even) { background: #1a231d; }
[data-theme="dark"] .admin-shell table tbody tr:hover { background: #1f2a23; }
[data-theme="dark"] .admin-shell table { color: #cfdad2; }
[data-theme="dark"] table { background: transparent; }

/* ダークモード: 公開ページの文字色 */
[data-theme="dark"] .public-identity dd { color: #a9d9bf; }
[data-theme="dark"] .public-identity dt { color: var(--aca-muted); }
[data-theme="dark"] .site-cta-link { color: #6fc296; }
[data-theme="dark"] :is(.public-feature h3, .public-activity h3, .public-join-panel h2, .public-section-heading h2, .public-cat-copy h3) { color: #cfe5d6 !important; }
[data-theme="dark"] :is(.public-feature p, .public-activity p, .public-note p) { color: #a8b7ad; }
[data-theme="dark"] .public-eyebrow { color: var(--aca-muted); }

/* ダークモード: 交換所 */
[data-theme="dark"] .reward-view-tabs { background: rgba(23, 31, 26, 0.94); border-color: var(--aca-line); }
[data-theme="dark"] .reward-view-tabs button { color: #a2b1a8; }
[data-theme="dark"] .reward-view-tabs b { background: #1d2721; color: #cfdad2; }
[data-theme="dark"] .reward-featured { background: var(--aca-paper); }
[data-theme="dark"] .reward-featured-copy p { color: #a8b7ad; }

/* テーマ切替ボタン */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.3rem;
  min-height: 2.3rem;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 6px;
  color: #fff;
  transition: background 0.15s, border-color 0.15s;
}

.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 480px) {
  .site-header .app-header-row > a {
    font-size: 1.02rem;
    white-space: nowrap;
  }
}

/* ===== 交換所 演出強化 ===== */

/* 抽選中オーバーレイ */
.reward-gacha-drawing {
  position: fixed;
  z-index: 110;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 15, 12, 0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.reward-gacha-drawing-inner {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 15rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.gacha-orb {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 5.4rem;
  height: 5.4rem;
  border-radius: 999px;
  background: radial-gradient(circle at 34% 28%, #2f8a58, #14532d 68%);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08), 0 0 34px rgba(79, 174, 126, 0.55);
  color: #eaf6ee;
  font-size: 2rem;
  animation: gacha-orb-shake 0.72s ease-in-out infinite;
}

@keyframes gacha-orb-shake {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  20% { transform: rotate(-9deg) translateY(-4px); }
  45% { transform: rotate(7deg) translateY(2px); }
  70% { transform: rotate(-5deg) translateY(-2px); }
}

.gacha-rings {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.gacha-rings span {
  position: absolute;
  width: 5.4rem;
  height: 5.4rem;
  border: 2px solid rgba(124, 203, 161, 0.55);
  border-radius: 999px;
  animation: gacha-ring 1.9s ease-out infinite;
}

.gacha-rings span:nth-child(2) { animation-delay: 0.62s; }
.gacha-rings span:nth-child(3) { animation-delay: 1.24s; }

@keyframes gacha-ring {
  from { opacity: 0.9; transform: scale(1); }
  to { opacity: 0; transform: scale(2.9); }
}

.gacha-drawing-label {
  margin-top: 5.2rem;
  color: #d7e5db;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.gacha-dots i {
  display: inline-block;
  font-style: normal;
  animation: gacha-dot 1.2s ease-in-out infinite;
}

.gacha-dots i:nth-child(2) { animation-delay: 0.2s; }
.gacha-dots i:nth-child(3) { animation-delay: 0.4s; }

@keyframes gacha-dot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.gacha-jackpot-label {
  display: none;
  margin-top: 0.7rem;
  color: #ffd75e;
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-shadow: 0 0 18px rgba(255, 215, 94, 0.65);
}

/* ジャックポット(高レア確定)演出 */
.reward-gacha-drawing.is-jackpot .gacha-orb {
  background: conic-gradient(from 0deg, #ff8fc4, #ffd75e, #7be0b0, #7fb3ff, #c39bff, #ff8fc4);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18), 0 0 60px rgba(255, 215, 94, 0.8);
  color: #23301f;
  animation: gacha-orb-shake 0.34s ease-in-out infinite, gacha-orb-spinhue 1.1s linear infinite;
}

@keyframes gacha-orb-spinhue {
  to { filter: hue-rotate(360deg); }
}

.reward-gacha-drawing.is-jackpot .gacha-rings span {
  border-color: rgba(255, 215, 94, 0.75);
  animation-duration: 0.85s;
}

.reward-gacha-drawing.is-jackpot .gacha-drawing-label { display: none; }
.reward-gacha-drawing.is-jackpot .gacha-jackpot-label { display: block; animation: gacha-jackpot-pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both; }

@keyframes gacha-jackpot-pop {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

/* 結果カードの出現 */
.reward-gacha-result-card { position: relative; overflow: hidden; }

.reward-gacha-result-card.is-revealing {
  animation: gacha-card-reveal 0.55s cubic-bezier(0.18, 1.25, 0.32, 1) both;
}

@keyframes gacha-card-reveal {
  0% { opacity: 0; transform: translateY(34px) scale(0.82); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

.reward-gacha-result-card.is-revealing .reward-gacha-result-preview {
  animation: gacha-preview-pop 0.6s 0.18s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

@keyframes gacha-preview-pop {
  from { opacity: 0; transform: scale(0.55); }
  to { opacity: 1; transform: scale(1); }
}

.reward-gacha-result-stars i { display: inline-block; }

.reward-gacha-result-card.is-revealing .reward-gacha-result-stars i {
  animation: gacha-star-pop 0.42s cubic-bezier(0.2, 1.6, 0.45, 1) both;
}

.reward-gacha-result-card.is-revealing .reward-gacha-result-stars i:nth-child(1) { animation-delay: 0.32s; }
.reward-gacha-result-card.is-revealing .reward-gacha-result-stars i:nth-child(2) { animation-delay: 0.44s; }
.reward-gacha-result-card.is-revealing .reward-gacha-result-stars i:nth-child(3) { animation-delay: 0.56s; }
.reward-gacha-result-card.is-revealing .reward-gacha-result-stars i:nth-child(4) { animation-delay: 0.68s; }
.reward-gacha-result-card.is-revealing .reward-gacha-result-stars i:nth-child(5) { animation-delay: 0.8s; }

@keyframes gacha-star-pop {
  from { opacity: 0; transform: scale(0) rotate(-40deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

/* レジェンダリー結果のシャイン */
.reward-gacha-modal--legendary .reward-gacha-result-card::before {
  content: '';
  position: absolute;
  inset: -60% auto auto -40%;
  width: 55%;
  height: 240%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: rotate(18deg) translateX(-140%);
  animation: gacha-shine 1.9s 0.5s ease-in-out 2;
  pointer-events: none;
}

@keyframes gacha-shine {
  to { transform: rotate(18deg) translateX(460%); }
}

/* 紙吹雪 */
.gacha-confetti-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.gacha-confetti {
  position: absolute;
  top: 34%;
  left: 50%;
  width: 8px;
  height: 12px;
  opacity: 0;
  animation: gacha-confetti-burst 1.9s var(--delay, 0ms) cubic-bezier(0.16, 0.8, 0.4, 1) both;
}

@keyframes gacha-confetti-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(0deg); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px) + 130px)) scale(1) rotate(var(--rot, 180deg)); }
}

/* カタログのレアリティ演出 */
.reward-rarity-card--legendary {
  border-color: #e3c25c !important;
  animation: legendary-breathe 2.8s ease-in-out infinite;
}

@keyframes legendary-breathe {
  0%, 100% { box-shadow: 0 4px 16px rgba(183, 141, 34, 0.2); }
  50% { box-shadow: 0 4px 26px rgba(224, 178, 60, 0.44); }
}

.reward-rarity-card--epic {
  border-color: #c3a1e6 !important;
  animation: epic-breathe 3.2s ease-in-out infinite;
}

@keyframes epic-breathe {
  0%, 100% { box-shadow: 0 4px 14px rgba(122, 79, 179, 0.16); }
  50% { box-shadow: 0 4px 22px rgba(146, 96, 209, 0.34); }
}

.reward-card .reward-preview { position: relative; overflow: hidden; }

.reward-card .reward-preview::after {
  content: '';
  position: absolute;
  inset: -40% auto auto -30%;
  width: 40%;
  height: 200%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: rotate(16deg) translateX(-180%);
  transition: none;
  pointer-events: none;
}

@media (hover: hover) {
  .reward-card:hover .reward-preview::after {
    transition: transform 0.7s ease;
    transform: rotate(16deg) translateX(520%);
  }
}

/* 新スタイル: ギャラクシー / オーシャン / ハナビ */
.reward-style--galaxy {
  --reward-main: #3b3a75;
  --reward-accent: #8f8fe0;
  --reward-soft: #ecebff;
}

.reward-style--ocean {
  --reward-main: #0f5e6e;
  --reward-accent: #4fb3c4;
  --reward-soft: #e4f6f8;
}

.reward-style--hanabi {
  --reward-main: #8a4030;
  --reward-accent: #e88f5a;
  --reward-soft: #fdeee4;
}

.member-title.reward-style--galaxy {
  border-color: rgba(143, 143, 224, 0.55);
  background:
    radial-gradient(1px 1px at 18% 32%, #fff, transparent 60%),
    radial-gradient(1px 1px at 62% 18%, #ffe9ad, transparent 60%),
    radial-gradient(1.4px 1.4px at 84% 62%, #bfd7ff, transparent 60%),
    radial-gradient(1px 1px at 38% 74%, #fff, transparent 60%),
    linear-gradient(120deg, #1d1b3f, #3b3a75 58%, #24476f);
  color: #dcdcff;
  text-shadow: 0 0 8px rgba(143, 143, 224, 0.6);
}

.member-title.reward-style--ocean {
  background: linear-gradient(105deg, #d7f2f5, #b8e6ec 52%, #e2f8fc);
}

.member-title.reward-style--hanabi {
  border-color: rgba(232, 143, 90, 0.6);
  background:
    radial-gradient(1.4px 1.4px at 22% 30%, #ffd75e, transparent 60%),
    radial-gradient(1px 1px at 72% 24%, #ff8fc4, transparent 60%),
    radial-gradient(1.2px 1.2px at 56% 70%, #7fb3ff, transparent 60%),
    linear-gradient(115deg, #33202c, #58273b 62%, #3a2030);
  color: #ffd9c0;
}

.reward-avatar-frame.reward-style--galaxy {
  background: conic-gradient(from 220deg, #23214d, #6b6ad0, #35619c, #8f8fe0, #23214d);
}

.reward-avatar-frame.reward-style--ocean {
  background: conic-gradient(from 180deg, #0f5e6e, #4fb3c4, #9adfe8, #1f7f92, #0f5e6e);
}

.reward-avatar-frame.reward-style--hanabi {
  background: conic-gradient(from 300deg, #58273b, #e88f5a, #ffd75e, #c4527a, #58273b);
}

.reward-card--galaxy .reward-preview { background: radial-gradient(circle at 50% 18%, #35335f, #171531); }
.reward-card--ocean .reward-preview { background: radial-gradient(circle at 50% 18%, #d9f3f6, #a8dde6); }
.reward-card--hanabi .reward-preview { background: radial-gradient(circle at 50% 18%, #4a2b3a, #241420); }
.reward-card--galaxy { border-color: #7a79c9; }
.reward-card--ocean { border-color: #7cc4d1; }
.reward-card--hanabi { border-color: #d08a67; }

/* 減モーション環境では演出を止める */
@media (prefers-reduced-motion: reduce) {
  .gacha-orb,
  .gacha-rings span,
  .gacha-dots i,
  .reward-gacha-result-card.is-revealing,
  .reward-gacha-result-card.is-revealing .reward-gacha-result-preview,
  .reward-gacha-result-card.is-revealing .reward-gacha-result-stars i,
  .reward-gacha-modal--legendary .reward-gacha-result-card::before,
  .gacha-confetti,
  .reward-rarity-card--legendary,
  .reward-rarity-card--epic {
    animation: none !important;
  }
}

/* ===== 交換所 ゲームUI(10連ガチャ・バナー) ===== */

.reward-gacha-banner-art {
  position: absolute;
  top: 50%;
  right: 34%;
  width: 8.6rem;
  height: 8.6rem;
  transform: translateY(-50%);
  opacity: 0.9;
  pointer-events: none;
}

.reward-gacha-buttons {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.reward-draw-btn {
  position: relative;
  display: grid;
  min-width: 8.6rem;
  gap: 0.12rem;
  justify-items: center;
  padding: 0.6rem 1rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s, border-color 0.16s;
}

.reward-draw-btn span { font-size: 0.82rem; font-weight: 900; }
.reward-draw-btn strong { color: #fff5c8; font-size: 1.3rem; font-weight: 900; line-height: 1; }
.reward-draw-btn strong small { margin-left: 0.15rem; font-size: 0.6rem; }

.reward-draw-btn em {
  position: absolute;
  top: -0.7rem;
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  background: linear-gradient(120deg, #f7c948, #f7e09a);
  color: #4a3413;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.reward-draw-btn.is-ten {
  border-color: #f2d278;
  background: linear-gradient(155deg, rgba(247, 224, 154, 0.24), rgba(247, 201, 72, 0.12));
  box-shadow: 0 0 18px rgba(247, 201, 72, 0.25);
}

@media (hover: hover) {
  .reward-draw-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  }
  .reward-draw-btn.is-ten:hover:not(:disabled) {
    background: linear-gradient(155deg, rgba(247, 224, 154, 0.34), rgba(247, 201, 72, 0.2));
    box-shadow: 0 8px 24px rgba(247, 201, 72, 0.4);
  }
}

.reward-draw-btn:active:not(:disabled) { transform: translateY(1px); }
.reward-draw-btn:disabled { opacity: 0.55; }

/* 10連リザルト */
.reward-gacha-multi-card {
  position: relative;
  width: min(100%, 30rem);
  max-height: min(88vh, 46rem);
  overflow-y: auto;
  padding: 1.4rem 1.2rem 1.2rem;
  border: 1px solid #f1d67e;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 0, #fff7cf, #fffdf8 58%);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.34);
  text-align: center;
}

.reward-gacha-multi-card > p { margin: 0 0 0.5rem; color: #84641c; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.09em; }

.reward-gacha-multi-best {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.85rem;
  padding: 0.3rem 0.8rem;
  border: 1px solid rgba(132, 100, 28, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
}

.reward-gacha-multi-best span { color: #84641c; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.08em; }

.reward-gacha-multi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.gacha-multi-cell {
  display: grid;
  gap: 0.3rem;
  justify-items: center;
  padding: 0.6rem 0.4rem;
  border: 1px solid #e3ddcc;
  border-radius: 8px;
  background: #fff;
}

.gacha-multi-cell b { font-size: 0.72rem; color: #26332b; line-height: 1.3; }
.gacha-multi-cell--rare { border-color: #86aecf; box-shadow: 0 0 10px rgba(97, 146, 190, 0.2); }
.gacha-multi-cell--epic { border-color: #bb7be3; background: linear-gradient(160deg, #f8f1ff, #fff); box-shadow: 0 0 14px rgba(146, 96, 209, 0.3); }
.gacha-multi-cell--legendary { border-color: #e3c25c; background: linear-gradient(160deg, #fff5d4, #fff); box-shadow: 0 0 16px rgba(224, 178, 60, 0.42); }

.reward-gacha-multi-card.is-revealing .gacha-multi-cell {
  animation: gacha-cell-in 0.42s cubic-bezier(0.2, 1.3, 0.4, 1) both;
  animation-delay: calc(0.12s + var(--i, 0) * 0.11s);
}

@keyframes gacha-cell-in {
  from { opacity: 0; transform: translateY(14px) scale(0.7); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 560px) {
  .reward-gacha-multi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .gacha-multi-cell b { font-size: 0.64rem; }
}

@media (max-width: 760px) {
  .reward-gacha-banner-art { display: none; }
  .reward-gacha-buttons { justify-content: stretch; width: 100%; }
  .reward-draw-btn { flex: 1 1 0; min-width: 0; }
}

/* ダークモード対応 */
[data-theme="dark"] .reward-gacha-multi-card { background: radial-gradient(circle at 50% 0, #2c2617, #171f1a 58%); border-color: #8a7434; }
[data-theme="dark"] .reward-gacha-multi-card > p { color: #d9b36a; }
[data-theme="dark"] .reward-gacha-multi-best { background: rgba(23, 31, 26, 0.7); border-color: rgba(217, 179, 106, 0.4); }
[data-theme="dark"] .reward-gacha-multi-best span { color: #d9b36a; }
[data-theme="dark"] .gacha-multi-cell { background: #1d2721; border-color: var(--aca-line); }
[data-theme="dark"] .gacha-multi-cell b { color: #dbe3dd; }
[data-theme="dark"] .gacha-multi-cell--epic { background: linear-gradient(160deg, #241d31, #1d2721); }
[data-theme="dark"] .gacha-multi-cell--legendary { background: linear-gradient(160deg, #2c2617, #1d2721); }

@media (prefers-reduced-motion: reduce) {
  .reward-gacha-multi-card.is-revealing .gacha-multi-cell { animation: none; }
}
.gacha-multi-cell .member-title {
  max-width: 100%;
  margin-left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.58rem;
}

/* ===== 現金手渡し 受付枠(予約カレンダー風) ===== */

.cash-slot-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
}

.cash-slot-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.cash-slot-nav b { min-width: 9.5rem; text-align: center; color: #26332b; font-size: 0.8rem; }

.booking-grid-wrap {
  overflow-x: auto;
  border: 1px solid #dbe3dd;
  border-radius: 8px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

.booking-grid {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.72rem;
}

.booking-grid th,
.booking-grid td {
  padding: 0.28rem;
  border-bottom: 1px solid #edf1ee;
  border-right: 1px solid #edf1ee;
  text-align: center;
}

.booking-grid thead th {
  position: sticky;
  top: 0;
  background: #f4f7f5;
  color: #4d5b52;
  font-weight: 800;
}

.booking-grid thead th b { display: block; font-size: 0.76rem; }
.booking-grid thead th small { color: #7d8a82; font-size: 0.6rem; }
.booking-grid thead th.is-sun small, .booking-grid thead th.is-sun b { color: #b04d4d; }
.booking-grid thead th.is-sat small, .booking-grid thead th.is-sat b { color: #4673a2; }

.booking-grid tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 4.2rem;
  background: #f4f7f5;
  color: #26332b;
  font-weight: 800;
  white-space: nowrap;
}

.booking-grid .booking-corner {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #f4f7f5;
}

.booking-cell {
  display: inline-grid;
  place-items: center;
  width: 2.7rem;
  height: 2.55rem;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 900;
  transition: background 0.14s, color 0.14s, transform 0.12s;
}

.booking-cell.is-open {
  background: #eef6f0;
  color: #1c7145;
  border: 1px solid #cfe3d5;
  cursor: pointer;
}

@media (hover: hover) {
  .booking-cell.is-open:hover { background: #dfeee4; transform: scale(1.06); }
}

.booking-cell.is-selected {
  background: linear-gradient(160deg, #1c7a4b, #115c36);
  border: 1px solid #0d472a;
  color: #fff;
  box-shadow: 0 3px 8px rgba(17, 92, 54, 0.35);
  cursor: pointer;
}

.booking-cell.is-off {
  color: #b9c3bc;
  cursor: default;
}

.booking-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin-bottom: 0.55rem;
  color: #5c6a61;
  font-size: 0.72rem;
  font-weight: 700;
}

.booking-mark {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 5px;
  font-weight: 900;
}

.booking-mark.is-open { background: #eef6f0; border: 1px solid #cfe3d5; color: #1c7145; }
.booking-mark.is-num { background: linear-gradient(160deg, #1c7a4b, #115c36); color: #fff; }

.booking-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.7rem;
}

.booking-pick {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.4rem 0.3rem 0.6rem;
  border: 1px solid #cfe3d5;
  border-radius: 999px;
  background: #eef6f0;
  color: #17442c;
  font-size: 0.74rem;
  font-weight: 800;
}

.booking-pick b {
  color: #1c7145;
  font-size: 0.66rem;
}

.booking-pick button {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: rgba(28, 113, 69, 0.12);
  color: #1c7145;
}

.booking-pick-empty { color: #7d8a82; font-size: 0.74rem; }

/* ダークモード */
[data-theme="dark"] .booking-grid-wrap { background: var(--aca-paper); border-color: var(--aca-line); }
[data-theme="dark"] .booking-grid th, [data-theme="dark"] .booking-grid td { border-color: #222d26; }
[data-theme="dark"] .booking-grid thead th,
[data-theme="dark"] .booking-grid tbody th,
[data-theme="dark"] .booking-grid .booking-corner { background: #1d2721; color: #cfdad2; }
[data-theme="dark"] .booking-grid thead th small { color: var(--aca-muted); }
[data-theme="dark"] .booking-cell.is-open { background: rgba(79, 174, 126, 0.14); border-color: #3d5748; color: #7ccba1; }
[data-theme="dark"] .booking-cell.is-off { color: #4d5a52; }
[data-theme="dark"] .booking-legend { color: var(--aca-muted); }
[data-theme="dark"] .booking-mark.is-open { background: rgba(79, 174, 126, 0.14); border-color: #3d5748; color: #7ccba1; }
[data-theme="dark"] .booking-pick { background: rgba(79, 174, 126, 0.14); border-color: #3d5748; color: #b9d8c5; }
[data-theme="dark"] .booking-pick b, [data-theme="dark"] .booking-pick button { color: #7ccba1; }
[data-theme="dark"] .booking-pick-empty { color: var(--aca-muted); }
[data-theme="dark"] .cash-slot-nav b { color: #cfdad2; }

/* マイページのダークモードスイッチ */
.theme-switch {
  position: relative;
  flex: none;
  width: 3.2rem;
  height: 1.8rem;
  border: 1px solid #cfd8cf;
  border-radius: 999px;
  background: #e7ece8;
  transition: background 0.18s, border-color 0.18s;
}

.theme-switch-knob {
  position: absolute;
  top: 0.14rem;
  left: 0.16rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(20, 32, 24, 0.3);
  transition: transform 0.18s ease, background 0.18s;
}

.theme-switch.is-on {
  border-color: #0d472a;
  background: linear-gradient(160deg, #1c7a4b, #115c36);
}

.theme-switch.is-on .theme-switch-knob {
  transform: translateX(1.36rem);
  background: #f7e09a;
}

[data-theme="dark"] .theme-switch { border-color: #35453c; background: #1d2721; }

@media (prefers-reduced-motion: reduce) {
  .theme-switch, .theme-switch-knob { transition: none; }
}
.profile-tour-row .theme-switch {
  width: 3.2rem !important;
  height: 1.8rem;
  min-height: 0;
  padding: 0;
  align-self: flex-start;
}

/* 交換所ファーストビュー調整: モバイルでもバナーアート表示 + NEWリボン */
.reward-card { position: relative; }

.reward-new-ribbon {
  position: absolute;
  top: 0.55rem;
  left: -0.4rem;
  z-index: 2;
  padding: 0.18rem 0.7rem 0.18rem 0.55rem;
  border-radius: 3px 999px 999px 3px;
  background: linear-gradient(120deg, #e0575c, #f08a3c);
  box-shadow: 0 3px 8px rgba(224, 87, 92, 0.4);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

@media (max-width: 760px) {
  .reward-gacha-banner-art {
    display: block;
    top: 0.4rem;
    right: 0.4rem;
    width: 5.6rem;
    height: 5.6rem;
    transform: none;
    opacity: 0.85;
  }

  .reward-gacha-panel { padding-top: 1.4rem; }
  .reward-gacha-copy { padding-right: 5.4rem; }
}

/* ===== 動く景品(アニメーション称号・フレーム) ===== */

/* フレームの土台: 疑似要素の回転リングより中身を前面に */
.reward-avatar-frame .reward-avatar-inner,
.reward-avatar-frame > * {
  position: relative;
  z-index: 1;
}

/* EPIC/LEGENDARYフレーム: リングを光が周回する */
.reward-avatar-frame.reward-rarity--epic::after,
.reward-avatar-frame.reward-rarity--legendary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 999px;
  background: conic-gradient(from 0deg, transparent 0deg 295deg, rgba(255, 255, 255, 0.95) 330deg, transparent 360deg);
  animation: frame-ring-sweep 3.6s linear infinite;
  pointer-events: none;
}

.reward-avatar-frame.reward-rarity--epic::after {
  opacity: 0.55;
  animation-duration: 4.6s;
}

@keyframes frame-ring-sweep {
  to { transform: rotate(360deg); }
}

/* LEGENDARYフレーム: 輝きの呼吸を追加 */
.reward-avatar-frame.reward-rarity--legendary {
  animation: frame-breathe 2.8s ease-in-out infinite;
}

@keyframes frame-breathe {
  0%, 100% { filter: drop-shadow(0 0 2px color-mix(in srgb, var(--reward-accent) 55%, transparent)); }
  50% { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--reward-accent) 90%, transparent)); }
}

/* 特殊スタイルのフレーム: グラデーション自体がゆっくり回転する */
.reward-avatar-frame:is(.reward-style--prism, .reward-style--aurora, .reward-style--galaxy, .reward-style--ocean, .reward-style--hanabi)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 999px;
  animation: frame-gradient-spin 7s linear infinite;
  pointer-events: none;
}

.reward-avatar-frame.reward-style--prism::before {
  background: conic-gradient(from 0deg, #ef63b4, #f7c948, #6fc296, #5aa7e8, #a678e8, #ef63b4);
}

.reward-avatar-frame.reward-style--aurora::before {
  background: conic-gradient(from 120deg, #35b184, #5aa7e8, #a678e8, #64c9a5, #35b184);
}

.reward-avatar-frame.reward-style--galaxy::before {
  background: conic-gradient(from 220deg, #23214d, #6b6ad0, #35619c, #8f8fe0, #23214d);
}

.reward-avatar-frame.reward-style--ocean::before {
  background: conic-gradient(from 180deg, #0f5e6e, #4fb3c4, #9adfe8, #1f7f92, #0f5e6e);
  animation-duration: 10s;
}

.reward-avatar-frame.reward-style--hanabi::before {
  background: conic-gradient(from 300deg, #58273b, #e88f5a, #ffd75e, #c4527a, #58273b);
  animation-duration: 5.5s;
}

@keyframes frame-gradient-spin {
  to { transform: rotate(360deg); }
}

/* 称号: EPIC/LEGENDARYは光の帯(シャイン)が走る */
.member-title {
  position: relative;
  overflow: hidden;
}

.member-title:is(.reward-rarity--epic, .reward-rarity--legendary)::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  animation: title-shimmer 3.2s ease-in-out infinite;
  pointer-events: none;
}

.member-title.reward-rarity--legendary::after {
  animation-duration: 2.4s;
}

@keyframes title-shimmer {
  0% { transform: translateX(-130%) skewX(-18deg); }
  55%, 100% { transform: translateX(340%) skewX(-18deg); }
}

/* LEGENDARY称号: 光彩の呼吸 */
.member-title.reward-rarity--legendary {
  animation: title-glow 2.6s ease-in-out infinite;
}

@keyframes title-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  50% { box-shadow: 0 0 10px color-mix(in srgb, var(--reward-main) 60%, transparent); }
}

/* スタイル署名: きらめき */
.member-title.reward-style--galaxy::before,
.member-title.reward-style--hanabi::before {
  content: '✦';
  position: absolute;
  top: 0.02rem;
  right: 0.3rem;
  z-index: 1;
  color: #fff;
  font-size: 0.5em;
  animation: title-star-blink 1.9s ease-in-out infinite;
  pointer-events: none;
}

.member-title.reward-style--hanabi::before {
  color: #ffd75e;
  animation-duration: 1.4s;
}

@keyframes title-star-blink {
  0%, 100% { opacity: 0.15; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* ネオン称号: 灯りの明滅 */
.member-title.reward-style--neon {
  animation: neon-title-pulse 2.2s ease-in-out infinite;
}

@keyframes neon-title-pulse {
  0%, 100% { text-shadow: 0 0 8px rgba(32, 221, 184, 0.45); }
  50% { text-shadow: 0 0 14px rgba(32, 221, 184, 0.85); }
}

/* 減モーション環境ではすべて停止 */
@media (prefers-reduced-motion: reduce) {
  .reward-avatar-frame.reward-rarity--epic::after,
  .reward-avatar-frame.reward-rarity--legendary::after,
  .reward-avatar-frame.reward-rarity--legendary,
  .reward-avatar-frame:is(.reward-style--prism, .reward-style--aurora, .reward-style--galaxy, .reward-style--ocean, .reward-style--hanabi)::before,
  .member-title:is(.reward-rarity--epic, .reward-rarity--legendary)::after,
  .member-title.reward-rarity--legendary,
  .member-title.reward-style--galaxy::before,
  .member-title.reward-style--hanabi::before,
  .member-title.reward-style--neon {
    animation: none !important;
  }
}

/* 受付枠の希望数バッジ */
.booking-cell { position: relative; }

.slot-demand {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  display: grid;
  place-items: center;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: #1c7145;
  color: #fff;
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 900;
  box-shadow: 0 1px 4px rgba(20, 32, 24, 0.35);
}

.slot-demand.is-orphan { background: #b04d4d; }

/* バックアップ一覧 */
.backup-rows {
  display: grid;
  gap: 0.4rem;
}

.backup-rows li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid #e2e8e2;
  border-radius: 6px;
  background: #fafcfa;
}

.backup-rows li i.fa-file-zipper { color: #4d7c5f; }
.backup-rows li b { flex: 1; color: #26332b; font-size: 0.8rem; font-weight: 700; overflow-wrap: anywhere; }
.backup-rows li small { color: #7d8a82; }

/* 年度更新プレビュー */
.rollover-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.rollover-grid span {
  padding: 0.35rem 0.7rem;
  border: 1px solid #dbe3dd;
  border-radius: 999px;
  background: #f4f7f5;
  color: #3f493f;
  font-size: 0.76rem;
  font-weight: 700;
}

.rollover-grid span b { color: #115c36; }
.rollover-grid span.is-grad { border-color: #d8b24a; background: #fbf3da; }
.rollover-grid span.is-grad b { color: #8a6a15; }

[data-theme="dark"] .backup-rows li { background: #1a231d; border-color: var(--aca-line); }
[data-theme="dark"] .backup-rows li b { color: #dbe3dd; }
[data-theme="dark"] .rollover-grid span { background: #1d2721; border-color: var(--aca-line); color: #cfdad2; }
[data-theme="dark"] .rollover-grid span b { color: #7ccba1; }
[data-theme="dark"] .rollover-grid span.is-grad { background: rgba(217, 179, 106, 0.14); border-color: #8a7434; }
[data-theme="dark"] .rollover-grid span.is-grad b { color: #d9b36a; }

/* タイムラインの区切り */
.timeline-new-divider,
.timeline-date-sep {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.9rem 0 0.5rem;
  color: #7d8a82;
  font-size: 0.7rem;
  font-weight: 800;
}

.timeline-new-divider::before, .timeline-new-divider::after,
.timeline-date-sep::before, .timeline-date-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #dbe3dd;
}

.timeline-new-divider { color: #b0762a; }
.timeline-new-divider::before, .timeline-new-divider::after { background: #e5c88f; }
.timeline-new-divider span, .timeline-date-sep span { display: inline-flex; gap: 0.35rem; align-items: center; }

/* 照合ログ・エラーログの行 */
.report-rows { display: grid; gap: 0.4rem; }

.report-rows li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid #e2e8e2;
  border-radius: 6px;
  background: #fafcfa;
  font-size: 0.78rem;
}

.report-rows li span { flex: 1; color: #3f493f; overflow-wrap: anywhere; }
.report-rows li time { color: #99a69f; font-size: 0.68rem; white-space: nowrap; }
.report-rows li.is-ok i { color: #2f8057; }
.report-rows li.is-warn i { color: #b0762a; }

[data-theme="dark"] .timeline-new-divider::before, [data-theme="dark"] .timeline-new-divider::after { background: #6b5b33; }
[data-theme="dark"] .timeline-date-sep::before, [data-theme="dark"] .timeline-date-sep::after { background: var(--aca-line); }
[data-theme="dark"] .report-rows li { background: #1a231d; border-color: var(--aca-line); }
[data-theme="dark"] .report-rows li span { color: #cfdad2; }

/* 管理画面: セキュリティ監視 */
.security-panel-head,
.error-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.security-panel-head small {
  display: block;
  color: #718078;
  font-size: 0.68rem;
  font-weight: 800;
}

.security-panel-head h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #173d2b;
  font-size: 1rem;
  font-weight: 800;
}

.security-health {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 50px;
  padding: 0.75rem 0;
  border-top: 1px solid #dce5df;
  border-bottom: 1px solid #dce5df;
}

.security-health span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 88px;
  font-weight: 800;
}

.security-health p { color: #65736b; font-size: 0.82rem; }
.security-health.is-healthy span { color: #197047; }
.security-health.is-warning span { color: #9a671d; }
.security-health.is-danger span { color: #b33d45; }
.security-health.is-loading span { color: #65736b; }

.security-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid #dce5df;
}

.security-metric {
  display: grid;
  gap: 0.08rem;
  padding: 1rem;
  border-right: 1px solid #dce5df;
}

.security-metric:last-child { border-right: 0; }
.security-metric span, .security-metric small { color: #718078; font-size: 0.7rem; }
.security-metric strong { color: #163c2a; font-size: 1.55rem; line-height: 1.1; }
.security-metric.is-warning strong { color: #9a671d; }
.security-metric.is-danger strong { color: #b33d45; }

.security-detail-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 1.25rem;
  padding-top: 1rem;
}

.security-detail-grid h3 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
  color: #34493d;
  font-size: 0.78rem;
  font-weight: 800;
}

.security-trend { display: grid; gap: 0.45rem; }
.security-trend-row { display: grid; grid-template-columns: 66px 1fr 26px; align-items: center; gap: 0.45rem; font-size: 0.68rem; }
.security-trend-row time { color: #718078; }
.security-trend-row > div { position: relative; height: 8px; overflow: hidden; background: #edf1ee; }
.security-trend-row span { position: absolute; inset: 0 auto 0 0; max-width: 100%; }
.security-trend-row .is-login { background: #d19a3d; }
.security-trend-row .is-error { top: 4px; height: 4px; background: #c6545b; }
.security-trend-row b { color: #435149; text-align: right; }

.security-compact-list { display: grid; gap: 0.45rem; }
.security-compact-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.7rem; padding-bottom: 0.45rem; border-bottom: 1px solid #e5ebe7; }
.security-compact-list li:last-child { padding-bottom: 0; border-bottom: 0; }
.security-compact-list span { display: grid; min-width: 0; }
.security-compact-list b { color: #34493d; font-size: 0.72rem; overflow-wrap: anywhere; }
.security-compact-list small, .security-compact-list time { color: #7c8981; font-size: 0.65rem; }
.security-compact-list strong { color: #92434a; font-size: 0.72rem; white-space: nowrap; }

.error-log-head select { width: 116px; min-height: 38px; padding: 0.45rem 1.8rem 0.45rem 0.65rem; }
.error-log-rows li { align-items: center; }
.error-log-rows li span { display: grid; gap: 0.15rem; }
.error-log-rows li span small { color: #66736c; }
.error-log-rows li.is-resolved { opacity: 0.72; }
.error-log-rows li.is-resolved > i { color: #2f8057; }
.error-log-rows li button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #cfdad2; color: #336047; }

[data-theme="dark"] .security-panel-head h2,
[data-theme="dark"] .security-metric strong,
[data-theme="dark"] .security-detail-grid h3,
[data-theme="dark"] .security-compact-list b { color: #dce7df; }
[data-theme="dark"] .security-health,
[data-theme="dark"] .security-metrics { border-color: var(--aca-line); }
[data-theme="dark"] .security-health p,
[data-theme="dark"] .security-metric span,
[data-theme="dark"] .security-metric small { color: #9eaaa2; }
[data-theme="dark"] .security-metric { border-color: var(--aca-line); }
[data-theme="dark"] .security-trend-row > div { background: #28332c; }
[data-theme="dark"] .security-compact-list li { border-color: var(--aca-line); }
[data-theme="dark"] .error-log-rows li span small { color: #aab6ae; }

@media (max-width: 900px) {
  .security-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .security-metric:nth-child(2) { border-right: 0; }
  .security-metric:nth-child(-n + 2) { border-bottom: 1px solid #dce5df; }
  .security-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .security-panel-head, .error-log-head { align-items: flex-start; }
  .security-health { align-items: flex-start; flex-direction: column; gap: 0.25rem; }
  .security-metric { padding: 0.8rem 0.65rem; }
  .security-metric strong { font-size: 1.3rem; }
  .error-log-rows li { display: grid; grid-template-columns: 18px 1fr 34px; }
  .error-log-rows li time { grid-column: 2; }
  .error-log-rows li button { grid-column: 3; grid-row: 1 / span 2; }
}

/* Tailwindビルド化(4.44)以降、tailwind.cssが先に読まれるため、style.css内のdisplay指定が
   同一詳細度の .hidden{display:none} を打ち消してしまう。常に .hidden を最優先で適用する。 */
.hidden { display: none !important; }

/* ===== ポイントランキング期間タブ ===== */
.ranking-panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.ranking-period-tabs { display: inline-flex; background: rgba(6, 78, 59, 0.08); border-radius: 999px; padding: 3px; gap: 2px; }
.ranking-period-tabs button {
  border: 0; background: transparent; color: #065f46; font-size: 0.78rem; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.ranking-period-tabs button.is-active { background: #047857; color: #fff; }
.ranking-period-label { font-size: 0.72rem; color: #6b7280; letter-spacing: 0.02em; }
.ranking-my-rank {
  font-size: 0.8rem; background: rgba(4, 120, 87, 0.08); color: #065f46;
  border-radius: 10px; padding: 8px 10px; margin-bottom: 10px;
}
.ranking-last-results { margin-top: 12px; border-top: 1px dashed rgba(6, 78, 59, 0.25); padding-top: 10px; }
.ranking-last-results h4 { font-size: 0.78rem; font-weight: 700; color: #92610a; margin-bottom: 6px; }
.ranking-last-results ol { display: grid; gap: 4px; }
.ranking-last-results li { display: flex; justify-content: space-between; font-size: 0.78rem; color: #374151; }
.ranking-last-results li b { color: #047857; }
[data-theme="dark"] .ranking-period-tabs { background: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .ranking-period-tabs button { color: #a7f3d0; }
[data-theme="dark"] .ranking-period-tabs button.is-active { background: #059669; color: #06241b; }
[data-theme="dark"] .ranking-my-rank { background: rgba(5, 150, 105, 0.18); color: #a7f3d0; }
[data-theme="dark"] .ranking-last-results li { color: #d1d5db; }
[data-theme="dark"] .ranking-last-results h4 { color: #fbbf24; }

/* ===== 年会費納入ページ ===== */
.renewal-status { display: flex; gap: 14px; align-items: flex-start; border-radius: 14px; padding: 16px; }
.renewal-status > i { font-size: 1.6rem; margin-top: 2px; }
.renewal-status h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.renewal-status p { font-size: 0.85rem; line-height: 1.7; }
.renewal-status.is-ok { background: rgba(4, 120, 87, 0.08); color: #065f46; }
.renewal-status.is-notice { background: rgba(217, 119, 6, 0.1); color: #92400e; }
.renewal-status.is-blocked { background: rgba(220, 38, 38, 0.08); color: #991b1b; }
.renewal-fee { font-size: 0.95rem; margin: 16px 0 4px; color: #065f46; }
.renewal-fee b { font-size: 1.2rem; }
.renewal-methods { margin-top: 8px; display: grid; gap: 12px; }
.renewal-method { border: 1px solid rgba(6, 78, 59, 0.15); border-radius: 12px; padding: 14px; }
.renewal-method h3 { font-weight: 700; color: #065f46; margin-bottom: 6px; font-size: 0.92rem; }
.renewal-method p { font-size: 0.82rem; color: #374151; line-height: 1.7; margin-bottom: 8px; }
[data-theme="dark"] .renewal-status.is-ok { background: rgba(5, 150, 105, 0.16); color: #a7f3d0; }
[data-theme="dark"] .renewal-status.is-notice { background: rgba(217, 119, 6, 0.16); color: #fcd34d; }
[data-theme="dark"] .renewal-status.is-blocked { background: rgba(220, 38, 38, 0.16); color: #fca5a5; }
[data-theme="dark"] .renewal-method { border-color: rgba(255, 255, 255, 0.14); }
[data-theme="dark"] .renewal-method p { color: #d1d5db; }
[data-theme="dark"] .renewal-method h3 { color: #a7f3d0; }
[data-theme="dark"] .renewal-fee { color: #a7f3d0; }

/* マイページの会費バナーと会員詳細の会費操作 */
.renewal-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(217, 119, 6, 0.1); color: #92400e;
  border: 1px solid rgba(217, 119, 6, 0.3); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 16px;
}
.renewal-banner > i { font-size: 1.3rem; }
.renewal-banner > div { flex: 1; min-width: 200px; }
.renewal-banner b { display: block; font-size: 0.92rem; }
.renewal-banner p { font-size: 0.8rem; margin-top: 2px; }
[data-theme="dark"] .renewal-banner { background: rgba(217, 119, 6, 0.16); color: #fcd34d; border-color: rgba(217, 119, 6, 0.4); }
.member-fee-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

/* ===== Ver.4.65: 称号・アイコンフレームの見た目強化 =====
   初期スタイルが単色パステルで見劣りしていたため、全スタイルを
   グラデーション+質感+スタイル別の個性で統一強化する。 */

.member-title {
  padding: 0.2rem 0.52rem;
  letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 3px rgba(15, 30, 20, 0.14);
}

/* --- 称号: スタイル別の質感 --- */
.member-title.reward-style--forest {
  border-color: rgba(108, 173, 125, 0.55);
  background: linear-gradient(115deg, #0d3f27, #1d6b43 55%, #0f4d2f);
  color: #d9f3e0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 4px rgba(13, 63, 39, 0.35);
}
.member-title.reward-style--sky {
  border-color: rgba(96, 156, 190, 0.5);
  background: linear-gradient(110deg, #e4f4fd, #bfe1f2 48%, #eef9ff);
  color: #1c567a;
}
.member-title.reward-style--sakura {
  border-color: rgba(223, 161, 177, 0.65);
  background:
    radial-gradient(2.2px 2.2px at 82% 28%, #ffffff, transparent 65%),
    radial-gradient(1.6px 1.6px at 22% 68%, #fff3f7, transparent 65%),
    linear-gradient(110deg, #ffe3ec, #f7cbd9 55%, #ffeef4);
  color: #97445f;
}
.member-title.reward-style--gold {
  border-color: rgba(206, 158, 41, 0.75);
  background: linear-gradient(115deg, #f8e7ac, #ffd75e 30%, #d9a92f 52%, #ffe9a8 74%, #ecc75f);
  background-size: 200% 100%;
  color: #57400a;
  text-shadow: 0 1px 0 rgba(255, 246, 214, 0.65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 5px rgba(183, 132, 26, 0.35);
  animation: reward-metal-sheen 4.5s ease-in-out infinite;
}
.member-title.reward-style--silver {
  border-color: rgba(140, 152, 160, 0.7);
  background: linear-gradient(115deg, #f4f6f8, #cad3d9 32%, #eef1f2 54%, #b3bec6 76%, #eff2f4);
  background-size: 200% 100%;
  color: #3d474f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  animation: reward-metal-sheen 5.5s ease-in-out infinite;
}
.member-title.reward-style--midnight {
  border-color: rgba(101, 115, 141, 0.6);
  background:
    radial-gradient(1.2px 1.2px at 78% 30%, #fff, transparent 60%),
    radial-gradient(1px 1px at 30% 62%, #cfd9ec, transparent 60%),
    linear-gradient(115deg, #171c27, #2b3546 58%, #1b2230);
  color: #cfd9ec;
}
.member-title.reward-style--neon {
  border-style: solid;
  border-color: rgba(53, 242, 194, 0.65);
  background: linear-gradient(115deg, #04211d, #0a3a34 55%, #05241f);
  color: #35f2c2;
  text-shadow: 0 0 9px rgba(53, 242, 194, 0.75);
  box-shadow: inset 0 0 7px rgba(53, 242, 194, 0.18), 0 0 9px rgba(53, 242, 194, 0.3);
}
.member-title.reward-style--crimson {
  border-radius: 2px 999px 999px 2px;
  border-color: rgba(255, 101, 119, 0.55);
  background: linear-gradient(115deg, #560d1e, #9d1838 55%, #6d0f26);
  color: #ffd6dc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 5px rgba(157, 24, 56, 0.4);
}
.member-title.reward-style--aurora {
  border-color: rgba(112, 226, 189, 0.6);
  background: linear-gradient(100deg, #d3f8e9, #d7ecff 34%, #f2e2ff 62%, #dcfbef);
  background-size: 250% 100%;
  color: #226057;
  animation: reward-aurora-flow 6s ease-in-out infinite;
}
.member-title.reward-style--prism {
  border-color: rgba(180, 120, 220, 0.55);
  background: linear-gradient(100deg, #ffe0ec, #dff6ff 30%, #ece2ff 55%, #fff3cf 80%, #ffe0ec);
  background-size: 260% 100%;
  color: #563378;
  animation: reward-aurora-flow 5s linear infinite;
}
.member-title.reward-style--ocean {
  border-color: rgba(79, 179, 196, 0.6);
  background:
    radial-gradient(2px 1.2px at 74% 26%, rgba(255, 255, 255, 0.8), transparent 65%),
    linear-gradient(110deg, #0d4f60, #1a7f92 55%, #0f5b6c);
  color: #c9f0f6;
}

/* --- フレーム: 初期スタイルにも金属・素材感のあるリングを --- */
.reward-avatar-frame.reward-style--forest {
  background: conic-gradient(from 160deg, #0d3f27, #2e8c55, #74c791, #14522f, #0d3f27);
  box-shadow: 0 0 0 1px #14532d, 0 2px 8px rgba(13, 63, 39, 0.35);
}
.reward-avatar-frame.reward-style--sky {
  background: conic-gradient(from 200deg, #2f7096, #8fc7e0, #e9f7ff, #5da5c6, #2f7096);
  box-shadow: 0 0 0 1px #3a7ea6, 0 2px 8px rgba(36, 102, 138, 0.3);
}
.reward-avatar-frame.reward-style--sakura {
  background: conic-gradient(from 320deg, #c76d87, #f4b7c8, #fff0f5, #dfa1b1, #c76d87);
  box-shadow: 0 0 0 1px #c97b93, 0 2px 8px rgba(157, 82, 104, 0.3);
}
.reward-avatar-frame.reward-style--gold {
  background: conic-gradient(from 30deg, #a87c14, #ffd75e, #fff3c4, #d9a92f, #8b6818, #ffe9a8, #a87c14);
  box-shadow: 0 0 0 1px #a87c14, 0 0 12px rgba(230, 176, 55, 0.5), 0 2px 8px rgba(139, 104, 24, 0.35);
}
.reward-avatar-frame.reward-style--silver {
  background: conic-gradient(from 90deg, #8b979f, #dfe6ea, #f7fafb, #aeb9c0, #79858d, #e6ecef, #8b979f);
  box-shadow: 0 0 0 1px #8b979f, 0 0 9px rgba(174, 185, 192, 0.55), 0 2px 7px rgba(89, 99, 107, 0.3);
}
.reward-avatar-frame.reward-style--midnight {
  background: conic-gradient(from 250deg, #141a26, #4d5a73, #8ea0c2, #202839, #141a26);
  box-shadow: 0 0 0 1px #2b3546, inset 0 0 4px rgba(207, 217, 236, 0.5), 0 3px 10px rgba(20, 26, 38, 0.45);
}

@keyframes reward-metal-sheen {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}
@keyframes reward-aurora-flow {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

/* ダークモードでは光沢と縁を少し強めて背景に沈まないようにする */
[data-theme="dark"] .member-title { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 4px rgba(0, 0, 0, 0.45); }
[data-theme="dark"] .member-title.reward-style--sky { background: linear-gradient(110deg, #b7ddf1, #90c4e2 48%, #c9ecff); color: #123c57; }
[data-theme="dark"] .member-title.reward-style--sakura { color: #7c3049; }
[data-theme="dark"] .member-title.reward-style--aurora { color: #174840; }
[data-theme="dark"] .member-title.reward-style--prism { color: #46265f; }

@media (prefers-reduced-motion: reduce) {
  .member-title.reward-style--gold,
  .member-title.reward-style--silver,
  .member-title.reward-style--aurora,
  .member-title.reward-style--prism { animation: none; }
}

/* ===== Ver.4.7: 画像アイコンフレーム (AI生成アート版) =====
   10スタイルは透過WebPのフレームアートで描画する。
   アートは猫耳・鈴が円の外へはみ出すソシャゲ風。中央の穴からアバターが見える。 */
.reward-avatar-frame:is(.reward-style--gold, .reward-style--silver, .reward-style--forest, .reward-style--sakura, .reward-style--midnight, .reward-style--neon, .reward-style--crimson, .reward-style--galaxy, .reward-style--ocean, .reward-style--hanabi) {
  background: transparent !important;
  box-shadow: none !important;
}
.reward-avatar-frame:is(.reward-style--gold, .reward-style--silver, .reward-style--forest, .reward-style--sakura, .reward-style--midnight, .reward-style--neon, .reward-style--crimson, .reward-style--galaxy, .reward-style--ocean, .reward-style--hanabi)::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 178%;
  height: 178%;
  transform: translate(-50%, -50.5%);
  background: var(--frame-art) center / contain no-repeat;
  pointer-events: none;
  z-index: 2;
}
.reward-avatar-frame.reward-style--gold { --frame-art: url('/static/rewards/frame-gold.webp'); }
.reward-avatar-frame.reward-style--silver { --frame-art: url('/static/rewards/frame-silver.webp'); }
.reward-avatar-frame.reward-style--forest { --frame-art: url('/static/rewards/frame-forest.webp'); }
.reward-avatar-frame.reward-style--sakura { --frame-art: url('/static/rewards/frame-sakura.webp'); }
.reward-avatar-frame.reward-style--midnight { --frame-art: url('/static/rewards/frame-midnight.webp'); }
.reward-avatar-frame.reward-style--neon { --frame-art: url('/static/rewards/frame-neon.webp'); }
.reward-avatar-frame.reward-style--crimson { --frame-art: url('/static/rewards/frame-crimson.webp'); }
.reward-avatar-frame.reward-style--galaxy { --frame-art: url('/static/rewards/frame-galaxy.webp'); }
.reward-avatar-frame.reward-style--ocean { --frame-art: url('/static/rewards/frame-ocean.webp'); }
.reward-avatar-frame.reward-style--hanabi { --frame-art: url('/static/rewards/frame-hanabi.webp'); }

/* アート版の内側リング線は不要になるため控えめに */
.reward-avatar-frame:is(.reward-style--gold, .reward-style--silver, .reward-style--forest, .reward-style--sakura, .reward-style--midnight, .reward-style--neon, .reward-style--crimson, .reward-style--galaxy, .reward-style--ocean, .reward-style--hanabi) .reward-avatar-inner {
  border-width: 1px;
}

/* スタイル別の光エフェクト (アートに重ねるソシャゲ風の演出) */
.reward-avatar-frame.reward-style--gold::after { filter: drop-shadow(0 0 6px rgba(255, 205, 74, 0.55)); animation: frame-art-glow 2.8s ease-in-out infinite; }
.reward-avatar-frame.reward-style--hanabi::after { filter: drop-shadow(0 0 6px rgba(255, 140, 90, 0.5)); animation: frame-art-glow 3.2s ease-in-out infinite; }
.reward-avatar-frame.reward-style--neon::after { filter: drop-shadow(0 0 6px rgba(191, 64, 255, 0.6)); animation: frame-art-flicker 2.4s steps(1, end) infinite; }
.reward-avatar-frame.reward-style--galaxy::after { filter: drop-shadow(0 0 5px rgba(147, 112, 219, 0.55)); animation: frame-art-glow 3.6s ease-in-out infinite; }
.reward-avatar-frame.reward-style--crimson::after { filter: drop-shadow(0 0 5px rgba(255, 69, 58, 0.5)); animation: frame-art-glow 2.4s ease-in-out infinite; }
.reward-avatar-frame.reward-style--silver::after { filter: drop-shadow(0 0 4px rgba(190, 205, 230, 0.55)); }
.reward-avatar-frame.reward-style--midnight::after { filter: drop-shadow(0 0 4px rgba(120, 140, 200, 0.5)); }
.reward-avatar-frame.reward-style--sakura::after { filter: drop-shadow(0 0 4px rgba(244, 183, 200, 0.55)); }
.reward-avatar-frame.reward-style--ocean::after { filter: drop-shadow(0 0 4px rgba(79, 179, 196, 0.5)); }
.reward-avatar-frame.reward-style--forest::after { filter: drop-shadow(0 0 4px rgba(110, 180, 130, 0.45)); }

@keyframes frame-art-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 210, 90, 0.35)) brightness(1); }
  50% { filter: drop-shadow(0 0 10px rgba(255, 214, 100, 0.75)) brightness(1.08); }
}
@keyframes frame-art-flicker {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(191, 64, 255, 0.6)) brightness(1); }
  46% { filter: drop-shadow(0 0 6px rgba(64, 220, 255, 0.65)) brightness(1.05); }
  52% { filter: drop-shadow(0 0 11px rgba(191, 64, 255, 0.85)) brightness(1.14); }
  58% { filter: drop-shadow(0 0 6px rgba(64, 220, 255, 0.65)) brightness(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .reward-avatar-frame::after { animation: none !important; }
}

/* ===== Ver.4.7: 画像称号プレート =====
   両端の猫の装飾はborder-imageで固定し、中央の帯だけ文字幅に応じて伸縮する。 */
.member-title:is(.reward-style--gold, .reward-style--silver, .reward-style--forest, .reward-style--sakura, .reward-style--midnight, .reward-style--neon, .reward-style--crimson, .reward-style--galaxy, .reward-style--ocean, .reward-style--hanabi) {
  border-style: solid;
  border-color: transparent;
  border-width: 0 1.5em;
  border-image-source: var(--title-plate);
  border-image-slice: 0 130 0 130 fill;
  border-image-width: 0 1.5em;
  border-image-repeat: stretch;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  min-height: 2em;
  padding: 0.45em 0.15em 0.55em;
  justify-content: center;
  font-family: 'M PLUS Rounded 1c', 'M PLUS 1p', sans-serif;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  animation: none;
}
.member-title.reward-style--gold { --title-plate: url('/static/rewards/plate-gold.webp'); color: #6b4a10; text-shadow: 0 1px 0 rgba(255, 248, 224, 0.8); }
.member-title.reward-style--silver { --title-plate: url('/static/rewards/plate-silver.webp'); color: #454a68; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85); }
.member-title.reward-style--forest { --title-plate: url('/static/rewards/plate-forest.webp'); color: #eaf6da; text-shadow: 0 1px 2px rgba(16, 46, 24, 0.85); }
.member-title.reward-style--sakura { --title-plate: url('/static/rewards/plate-sakura.webp'); color: #93425c; text-shadow: 0 1px 0 rgba(255, 241, 245, 0.85); }
.member-title.reward-style--midnight { --title-plate: url('/static/rewards/plate-midnight.webp'); color: #e3e9ff; text-shadow: 0 1px 2px rgba(10, 14, 40, 0.9); }
.member-title.reward-style--neon { --title-plate: url('/static/rewards/plate-neon.webp'); color: #7df3ff; text-shadow: 0 0 6px rgba(64, 220, 255, 0.85); }
.member-title.reward-style--crimson { --title-plate: url('/static/rewards/plate-crimson.webp'); color: #ffd9d9; text-shadow: 0 1px 2px rgba(60, 4, 10, 0.9); }
.member-title.reward-style--galaxy { --title-plate: url('/static/rewards/plate-galaxy.webp'); color: #f3ebff; text-shadow: 0 1px 3px rgba(30, 12, 60, 0.9); }
.member-title.reward-style--ocean { --title-plate: url('/static/rewards/plate-ocean.webp'); color: #12606d; text-shadow: 0 1px 0 rgba(240, 253, 255, 0.85); }
.member-title.reward-style--hanabi { --title-plate: url('/static/rewards/plate-hanabi.webp'); color: #8a501a; text-shadow: 0 1px 0 rgba(255, 246, 226, 0.85); }
.member-title:is(.reward-style--gold, .reward-style--hanabi).reward-rarity--legendary {
  background-image: none !important;
  filter: drop-shadow(0 0 5px rgba(255, 205, 90, 0.55));
}

/* ===== 餌やり: 登録がある日の色分け (1日1回想定で「登録あり=緑 / 未登録=注意色」) ===== */
.feeding-day-covered { background: rgba(16, 185, 129, 0.16); border-radius: 8px 8px 0 0; color: #047857; }
.feeding-day-covered i { font-size: 0.6rem; vertical-align: 1px; }
.feeding-day-open { color: #c2410c; }
.feeding-cell-covered { background: rgba(16, 185, 129, 0.07); }
.feeding-mobile-day.is-covered { border-color: rgba(5, 150, 105, 0.45); background: rgba(16, 185, 129, 0.14); }
.feeding-mobile-day.is-covered small { color: #047857; font-weight: 800; }
.feeding-mobile-day.is-open small { color: #c2410c; font-weight: 700; }
[data-theme="dark"] .feeding-day-covered { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
[data-theme="dark"] .feeding-day-open { color: #fb923c; }
[data-theme="dark"] .feeding-cell-covered { background: rgba(16, 185, 129, 0.1); }
[data-theme="dark"] .feeding-mobile-day.is-covered { background: rgba(16, 185, 129, 0.22); border-color: rgba(110, 231, 183, 0.4); }
[data-theme="dark"] .feeding-mobile-day.is-covered small { color: #6ee7b7; }
[data-theme="dark"] .feeding-mobile-day.is-open small { color: #fb923c; }

/* 交換所などのプレビュー表示ではプレート称号を大きめに保つ */
.member-title.reward-title-preview:is(.reward-style--gold, .reward-style--silver, .reward-style--forest, .reward-style--sakura, .reward-style--midnight, .reward-style--neon, .reward-style--crimson, .reward-style--galaxy, .reward-style--ocean, .reward-style--hanabi) {
  font-size: 0.82rem;
}

/* 餌やりモバイル: 時間帯ヘッダーの登録済み表示 */
.feeding-mobile-slot header b.is-registered { color: #047857; }
[data-theme="dark"] .feeding-mobile-slot header b.is-registered { color: #6ee7b7; }

/* ===== Ver.4.74: 追加素材 第1弾 (フレーム5種 + 称号プレート7種) ===== */
/* 基本色 (レアリティバッジやカード枠に使用) */
.reward-style--crystal { --reward-main: #6b5fa8; --reward-accent: #b9a8e8; --reward-soft: #f1edfb; }
.reward-style--cyber { --reward-main: #5b2d91; --reward-accent: #b44df0; --reward-soft: #f3e8ff; }
.reward-style--rose { --reward-main: #7a1f2e; --reward-accent: #c8973f; --reward-soft: #faeded; }
.reward-style--ribbon { --reward-main: #c05c7c; --reward-accent: #f2a9bf; --reward-soft: #fdeef3; }
.reward-style--tabby { --reward-main: #a06a2c; --reward-accent: #e0b077; --reward-soft: #faf1e4; }
.reward-style--pearl { --reward-main: #8a6d1f; --reward-accent: #dcc26a; --reward-soft: #fbf6e6; }
.reward-style--moonlight { --reward-main: #3d5a8f; --reward-accent: #9db8e0; --reward-soft: #eef3fb; }
.reward-style--emerald { --reward-main: #14532d; --reward-accent: #4fa870; --reward-soft: #e9f5ec; }
.reward-style--shell { --reward-main: #14707f; --reward-accent: #7fd0d8; --reward-soft: #e8f8f9; }

/* フレーム画像 */
.reward-avatar-frame:is(.reward-style--crystal, .reward-style--cyber, .reward-style--rose, .reward-style--ribbon, .reward-style--tabby) {
  background: transparent !important;
  box-shadow: none !important;
}
.reward-avatar-frame:is(.reward-style--crystal, .reward-style--cyber, .reward-style--rose, .reward-style--ribbon, .reward-style--tabby)::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 178%;
  height: 178%;
  transform: translate(-50%, -50.5%);
  background: var(--frame-art) center / contain no-repeat;
  pointer-events: none;
  z-index: 2;
}
.reward-avatar-frame:is(.reward-style--crystal, .reward-style--cyber, .reward-style--rose, .reward-style--ribbon, .reward-style--tabby) .reward-avatar-inner {
  border-width: 1px;
}
.reward-avatar-frame.reward-style--crystal { --frame-art: url('/static/rewards/frame-crystal.webp'); }
.reward-avatar-frame.reward-style--cyber { --frame-art: url('/static/rewards/frame-cyber.webp'); }
.reward-avatar-frame.reward-style--rose { --frame-art: url('/static/rewards/frame-rose.webp'); }
.reward-avatar-frame.reward-style--ribbon { --frame-art: url('/static/rewards/frame-ribbon.webp'); }
.reward-avatar-frame.reward-style--tabby { --frame-art: url('/static/rewards/frame-tabby.webp'); }
.reward-avatar-frame.reward-style--crystal::after { filter: drop-shadow(0 0 6px rgba(185, 168, 232, 0.65)); animation: frame-art-glow 3.4s ease-in-out infinite; }
.reward-avatar-frame.reward-style--cyber::after { filter: drop-shadow(0 0 7px rgba(180, 77, 240, 0.65)); animation: frame-art-flicker 2.2s steps(1, end) infinite; }
.reward-avatar-frame.reward-style--rose::after { filter: drop-shadow(0 0 6px rgba(200, 62, 80, 0.5)); animation: frame-art-glow 3s ease-in-out infinite; }
.reward-avatar-frame.reward-style--ribbon::after { filter: drop-shadow(0 0 4px rgba(242, 169, 191, 0.55)); }
.reward-avatar-frame.reward-style--tabby::after { filter: drop-shadow(0 0 4px rgba(224, 176, 119, 0.5)); }

/* 称号プレート画像 */
.member-title:is(.reward-style--pearl, .reward-style--moonlight, .reward-style--ribbon, .reward-style--emerald, .reward-style--cyber, .reward-style--rose, .reward-style--shell) {
  border-style: solid;
  border-color: transparent;
  border-width: 0 1.5em;
  border-image-slice: 0 130 0 130 fill;
  border-image-width: 0 1.5em;
  border-image-repeat: stretch;
  border-image-source: var(--title-plate);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  min-height: 2em;
  padding: 0.45em 0.15em 0.55em;
  justify-content: center;
  font-family: 'M PLUS Rounded 1c', 'M PLUS 1p', sans-serif;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  animation: none;
}
.member-title.reward-style--pearl { --title-plate: url('/static/rewards/plate-pearl.webp'); color: #7a5716; text-shadow: 0 1px 0 rgba(255, 250, 232, 0.85); }
.member-title.reward-style--moonlight { --title-plate: url('/static/rewards/plate-moonlight.webp'); color: #33507e; text-shadow: 0 1px 0 rgba(240, 247, 255, 0.85); }
.member-title.reward-style--ribbon { --title-plate: url('/static/rewards/plate-ribbon.webp'); color: #a04b66; text-shadow: 0 1px 0 rgba(255, 241, 246, 0.85); }
.member-title.reward-style--emerald { --title-plate: url('/static/rewards/plate-emerald.webp'); color: #dcf3cd; text-shadow: 0 1px 2px rgba(10, 40, 20, 0.9); }
.member-title.reward-style--cyber { --title-plate: url('/static/rewards/plate-cyber.webp'); color: #7df3ff; text-shadow: 0 0 6px rgba(64, 220, 255, 0.85); }
.member-title.reward-style--rose { --title-plate: url('/static/rewards/plate-rose.webp'); color: #e8c9a8; text-shadow: 0 1px 2px rgba(20, 10, 6, 0.9); }
.member-title.reward-style--shell { --title-plate: url('/static/rewards/plate-shell.webp'); color: #1e7080; text-shadow: 0 1px 0 rgba(240, 253, 255, 0.85); }
.member-title.reward-title-preview:is(.reward-style--pearl, .reward-style--moonlight, .reward-style--ribbon, .reward-style--emerald, .reward-style--cyber, .reward-style--rose, .reward-style--shell) {
  font-size: 0.82rem;
}

/* ===== 個人情報のマスク表示 (会計未満のロール向け) ===== */
.privacy-redacted {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.1em 0.55em;
  background: #1f2937;
  color: #9ca3af;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: help;
}
.privacy-redacted i { font-size: 0.6rem; }
[data-theme="dark"] .privacy-redacted { background: #0b1220; color: #6b7280; }

/* ===== タブ内セクションジャンプナビ ===== */
.tab-jump-nav {
  position: sticky;
  top: 8px;
  z-index: 30;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px;
  margin-bottom: 12px;
  background: rgba(250, 249, 244, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(6, 78, 59, 0.12);
  border-radius: 999px;
  scrollbar-width: none;
}
.tab-jump-nav::-webkit-scrollbar { display: none; }
.tab-jump-nav button,
.tab-jump-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  white-space: nowrap;
  border: 0;
  background: transparent;
  color: #065f46;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
}
.tab-jump-nav button:hover,
.tab-jump-nav a:hover { background: rgba(4, 120, 87, 0.1); }
.tab-jump-nav i { font-size: 0.72rem; opacity: 0.75; }
.tab-jump-nav a { color: #92610a; }
.jump-section { scroll-margin-top: 72px; }
[data-theme="dark"] .tab-jump-nav {
  background: rgba(18, 28, 24, 0.92);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .tab-jump-nav button { color: #a7f3d0; }
[data-theme="dark"] .tab-jump-nav button:hover,
[data-theme="dark"] .tab-jump-nav a:hover { background: rgba(16, 185, 129, 0.15); }
[data-theme="dark"] .tab-jump-nav a { color: #fbbf24; }

/* ===== 会員名簿のアイコン表示 ===== */
.roster-name-cell { display: inline-flex; align-items: center; gap: 8px; }
.roster-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid rgba(6, 78, 59, 0.15);
  background: #eef2ee;
}
.roster-avatar.is-lg { width: 44px; height: 44px; }
.roster-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9ca9a0;
  font-size: 0.8rem;
}
[data-theme="dark"] .roster-avatar { border-color: rgba(255, 255, 255, 0.14); background: #1c2622; }
[data-theme="dark"] .roster-avatar-fallback { color: #5c6b63; }

/* ===== メンテナンス画面 ===== */
.maintenance-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.maintenance-card {
  max-width: 480px;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(6, 78, 59, 0.14);
  border-radius: 20px;
  padding: 40px 32px;
  box-shadow: 0 10px 40px rgba(10, 30, 20, 0.08);
}
.maintenance-icon {
  width: 72px; height: 72px; margin: 0 auto 18px;
  display: grid; place-items: center;
  background: rgba(4, 120, 87, 0.1); color: #047857;
  border-radius: 999px; font-size: 1.6rem;
}
.maintenance-card h1 { font-size: 1.25rem; font-weight: 800; color: #064e3b; margin-bottom: 10px; }
.maintenance-card p { font-size: 0.85rem; color: #4b5563; line-height: 1.8; margin-bottom: 14px; }
.maintenance-note {
  background: #fffbeb; border: 1px solid #fcd34d; color: #92610a;
  border-radius: 12px; padding: 12px 14px; font-size: 0.82rem;
  white-space: pre-wrap; text-align: left; margin-bottom: 18px;
}
[data-theme="dark"] .maintenance-card { background: #16211c; border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .maintenance-card h1 { color: #a7f3d0; }
[data-theme="dark"] .maintenance-card p { color: #9ca3af; }
[data-theme="dark"] .maintenance-note { background: rgba(252, 211, 77, 0.08); color: #fbbf24; border-color: rgba(252, 211, 77, 0.3); }

/* 管理: メンテナンスパネル */
.maintenance-status-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid rgba(6, 78, 59, 0.15); border-radius: 12px; padding: 12px 14px;
}
.maintenance-status-row b.is-on { color: #b91c1c; }
.maintenance-status-row b.is-off { color: #047857; }

/* ===== 資料室ハブ (サムネイル選択) ===== */
.library-menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 640px) { .library-menu { grid-template-columns: 1fr; } }
.library-menu-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 128px;
  padding: 18px 18px 16px;
  border: 0;
  border-radius: 18px;
  cursor: pointer;
  text-align: left;
  color: #fff;
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 14px rgba(10, 30, 20, 0.14);
  transition: transform 0.15s, box-shadow 0.15s;
}
.library-menu-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(10, 30, 20, 0.2); }
.library-menu-card.is-officers { background-image: linear-gradient(140deg, #0b5a3c, #128a5c); }
.library-menu-card.is-cats { background-image: linear-gradient(140deg, #92610a, #d99a26); }
.library-menu-card b { font-size: 1.05rem; font-weight: 800; }
.library-menu-card small { font-size: 0.75rem; opacity: 0.85; }
.library-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 1.15rem;
}
.library-menu-arrow { position: absolute; right: 16px; bottom: 16px; opacity: 0.7; }
.library-back {
  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px 16px;
  border: 1.5px solid rgba(6, 78, 59, 0.25);
  border-radius: 999px;
  background: #fff;
  color: #065f46;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.library-back:hover { background: rgba(4, 120, 87, 0.06); }
[data-theme="dark"] .library-back { background: #16211c; color: #a7f3d0; border-color: rgba(255, 255, 255, 0.15); }

/* 資料室ハブの件数バッジ */
.library-menu-count {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 9px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  vertical-align: 2px;
}
.library-menu-count:empty { display: none; }

/* ===== 資料室: オリエンテーション動画 ===== */
.library-menu-card.is-videos { background-image: linear-gradient(140deg, #223a75, #3b62b8); }
.library-video-list { display: grid; gap: 12px; }
.library-video-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  background: #fff; border: 1.5px solid #dfe7e0; border-radius: 16px; padding: 14px 16px;
}
.library-video-thumb {
  flex: 0 0 auto; width: 64px; height: 64px; border-radius: 14px;
  background: linear-gradient(140deg, #223a75, #3b62b8); color: #fff;
  display: grid; place-items: center; font-size: 1.4rem;
}
.library-video-card .video-info { flex: 1; min-width: 200px; }
.library-video-card h4 { font-size: 0.95rem; font-weight: 800; color: #14301f; }
.library-video-card .video-desc { font-size: 0.78rem; color: #5c6b62; margin-top: 2px; }
.library-video-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; font-size: 0.72rem; color: #6b7a72; }
.video-progress-track { flex: 1; min-width: 120px; max-width: 260px; height: 8px; background: #e8ede9; border-radius: 999px; overflow: hidden; }
.video-progress-track i { display: block; height: 100%; background: linear-gradient(90deg, #10b981, #059669); border-radius: 999px; }
.video-attend-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: #d1fae5; color: #047857; font-weight: 800; font-size: 0.7rem;
  padding: 3px 10px; border-radius: 999px;
}
.video-attend-badge.is-pending { background: #fef3c7; color: #92610a; }
[data-theme="dark"] .library-video-card { background: #16211c; border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .library-video-card h4 { color: #e5efe8; }
[data-theme="dark"] .video-progress-track { background: #243029; }

/* プレイヤーモーダル */
.video-player-layer {
  position: fixed; inset: 0; z-index: 90; background: rgba(8, 12, 10, 0.92);
  display: grid; place-items: center; padding: 16px;
}
.video-player-box { width: min(920px, 100%); }
.video-player-box video { width: 100%; max-height: 70vh; border-radius: 12px; background: #000; }
.video-player-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #fff; margin-bottom: 10px; }
.video-player-head h3 { font-size: 1rem; font-weight: 800; }
.video-player-close { background: rgba(255,255,255,0.12); border: 0; color: #fff; border-radius: 999px; width: 38px; height: 38px; font-size: 1rem; cursor: pointer; }
.video-player-status { color: #a7f3d0; font-size: 0.78rem; margin-top: 10px; display: flex; gap: 14px; flex-wrap: wrap; }

/* トグルのノブ移動: Tailwindのtransformリセットと競合するためleftで動かす (Ver.4.812)
   スイッチ幅3.2rem・ノブ幅1.4rem・左余白0.16rem → ON時の左位置は 3.2 - 1.4 - 0.16 = 1.64rem */
.theme-switch-knob { transition: left 0.18s ease, background 0.18s; }
.theme-switch.is-on .theme-switch-knob {
  transform: none;
  left: 1.64rem;
  background: #f7e09a;
}

/* 入会申込: 在学生/OB・OGの種別セレクタ (Ver.4.83) */
.apply-type-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  max-width: 34rem;
  margin: 0 auto 1.5rem;
}
.apply-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.9rem 0.75rem;
  border: 2px solid #d5ded6;
  border-radius: 1rem;
  background: #fff;
  color: #4b5563;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.apply-type-card i { font-size: 1.3rem; margin-bottom: 0.2rem; }
.apply-type-card b { font-size: 0.95rem; }
.apply-type-card small { font-size: 0.7rem; color: #9ca3af; }
.apply-type-card.is-active {
  border-color: #12724a;
  background: #f0faf4;
  color: #0b3d2a;
}
.apply-type-card.is-active small { color: #12724a; }
[data-theme="dark"] .apply-type-card { background: #1d2721; border-color: #35453c; color: #c7d2c9; }
[data-theme="dark"] .apply-type-card.is-active { background: #10281c; border-color: #2f9e6a; color: #d9f2e4; }

/* OB・OG申込のチップ表示 */
.admin-chip {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #ede9fe;
  color: #5b21b6;
  font-size: 0.68rem;
  font-weight: 700;
  vertical-align: middle;
}
[data-theme="dark"] .admin-chip { background: #312e81; color: #c4b5fd; }

/* イベント出席QRの全画面表示 (Ver.4.84) */
.checkin-qr-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(10, 25, 18, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}
.checkin-qr-panel {
  background: #fff;
  border-radius: 1.25rem;
  padding: 1.5rem;
  width: min(24rem, 100%);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 24px 48px rgba(10, 25, 18, 0.35);
}
.checkin-qr-panel h3 { font-weight: 800; color: #0b3d2a; }
.checkin-qr-event { font-size: 0.85rem; color: #4b5563; margin: 0.2rem 0 0.8rem; }
.checkin-qr-svg { max-width: 17rem; margin: 0 auto; }
.checkin-qr-svg svg { width: 100%; height: auto; display: block; }
.checkin-qr-count { margin: 0.8rem 0 0.3rem; color: #0b3d2a; }
.checkin-qr-count b { font-size: 1.3rem; }
.checkin-qr-note { font-size: 0.72rem; color: #6b7280; margin-bottom: 0.8rem; }
.checkin-qr-list {
  text-align: left;
  font-size: 0.8rem;
  max-height: 9rem;
  overflow-y: auto;
  border-top: 1px solid #e5e7eb;
  margin-bottom: 0.9rem;
}
.checkin-qr-list li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.1rem;
  border-bottom: 1px solid #f0f2f0;
}
.checkin-qr-list li i { color: #12724a; }
.checkin-qr-list li time { margin-left: auto; color: #9ca3af; font-size: 0.7rem; }
[data-theme="dark"] .checkin-qr-panel { background: #16211b; }
[data-theme="dark"] .checkin-qr-panel h3, [data-theme="dark"] .checkin-qr-count { color: #d9f2e4; }
[data-theme="dark"] .checkin-qr-svg { background: #fff; border-radius: 0.75rem; padding: 0.5rem; }
[data-theme="dark"] .checkin-qr-list { border-color: #2c3a31; }
[data-theme="dark"] .checkin-qr-list li { border-color: #222e27; }

/* ===== デイリー機能 (Ver.4.85) ===== */
.daily-stamp {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  text-align: left;
  border: 2px dashed #b8cdbd;
  border-radius: 1rem;
  padding: 0.8rem 0.9rem;
  background: #f7faf7;
  transition: border-color 0.15s, background 0.15s;
}
button.daily-stamp:hover { border-color: #12724a; background: #eef8f1; }
.daily-stamp.is-done { border-style: solid; border-color: #12724a; background: #eef8f1; }
.daily-stamp-mark {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: #12724a;
  color: #fff;
  animation: daily-stamp-pop 0.4s ease;
}
.daily-stamp-mark.is-waiting { background: #d5ded6; color: #6b7280; animation: none; }
@keyframes daily-stamp-pop {
  0% { transform: scale(0.4) rotate(-18deg); }
  60% { transform: scale(1.2) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}
.daily-stamp b { display: block; font-size: 0.92rem; color: #0b3d2a; }
.daily-stamp small { color: #6b7280; font-size: 0.72rem; }

.daily-cat-box { margin-top: 0.8rem; }
.daily-cat {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  background: linear-gradient(135deg, #fdf9ee, #f4f8ef);
  border-radius: 1rem;
  padding: 0.7rem 0.8rem;
}
.daily-cat img, .daily-cat-fallback {
  flex: none;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 999px;
  object-fit: cover;
  background: #e5ece6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a89a;
  font-size: 1.4rem;
}
.daily-cat small { display: block; font-size: 0.65rem; color: #a08c46; font-weight: 700; letter-spacing: 0.08em; }
.daily-cat b { color: #0b3d2a; }
.daily-cat p { font-size: 0.72rem; color: #6b7280; margin-top: 0.1rem; }

.vcat-stage-area { display: flex; gap: 0.9rem; align-items: center; }
.vcat-avatar {
  flex: none;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 999px;
  font-size: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 25%, #f2fbf5, #dcefe2);
  border: 2px solid #bcd9c6;
  cursor: pointer;
  transition: transform 0.15s;
}
.vcat-avatar:hover { transform: scale(1.06); }
.vcat-avatar.is-petted { animation: vcat-bounce 0.55s ease; }
@keyframes vcat-bounce {
  0% { transform: scale(1); }
  30% { transform: scale(1.25) rotate(-8deg); }
  55% { transform: scale(0.95) rotate(6deg); }
  100% { transform: scale(1); }
}
.vcat-info { flex: 1; min-width: 0; }
.vcat-name { color: #0b3d2a; font-size: 1.05rem; }
.vcat-name-form { display: flex; gap: 0.4rem; margin-bottom: 0.3rem; }
.vcat-exp-bar {
  height: 0.55rem;
  border-radius: 999px;
  background: #e3eae4;
  overflow: hidden;
  margin: 0.35rem 0 0.2rem;
}
.vcat-exp-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1c7a4b, #57b380); transition: width 0.5s ease; }
.vcat-info small { display: block; font-size: 0.7rem; color: #6b7280; }
.vcat-hint { margin-top: 0.15rem; }

.sighting-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.2rem;
  border-bottom: 1px solid #eef1ee;
  font-size: 0.82rem;
}
.sighting-row i { color: #d97706; margin-top: 0.2rem; }
.sighting-row span { flex: 1; min-width: 0; color: #374151; }
.sighting-row small { display: block; color: #9ca3af; font-size: 0.7rem; }
.sighting-row time { flex: none; font-size: 0.65rem; color: #9ca3af; text-align: right; }
.sighting-form { display: grid; gap: 0.5rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed #d8e0d9; }

.mission-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.2rem;
  border-bottom: 1px solid #eef1ee;
}
.mission-row > i { flex: none; width: 1.6rem; text-align: center; color: #12724a; }
.mission-row.is-bonus > i { color: #d4a017; }
.mission-row span { flex: 1; min-width: 0; }
.mission-row b { font-size: 0.8rem; color: #1f2937; display: block; }
.mission-row small { font-size: 0.68rem; color: #9ca3af; }
.mission-bar {
  display: block;
  height: 0.4rem;
  border-radius: 999px;
  background: #e3eae4;
  overflow: hidden;
  margin: 0.25rem 0 0.1rem;
}
.mission-bar span { display: block; height: 100%; background: linear-gradient(90deg, #1c7a4b, #57b380); border-radius: 999px; }
.mission-row.is-claimed { opacity: 0.62; }
.mission-reward { flex: none; font-size: 0.72rem; font-weight: 700; color: #9ca3af; }
.mission-claimed-mark { flex: none; font-size: 0.72rem; color: #12724a; font-weight: 700; }
.mission-claim { flex: none; white-space: nowrap; }

[data-theme="dark"] .daily-stamp { background: #1c2620; border-color: #3a4a40; }
[data-theme="dark"] .daily-stamp.is-done { background: #14301f; border-color: #2f9e6a; }
[data-theme="dark"] .daily-stamp b { color: #d9f2e4; }
[data-theme="dark"] .daily-cat { background: linear-gradient(135deg, #241f14, #1b2418); }
[data-theme="dark"] .daily-cat b { color: #ead9a8; }
[data-theme="dark"] .vcat-avatar { background: radial-gradient(circle at 30% 25%, #1d2b22, #16211b); border-color: #35503f; }
[data-theme="dark"] .vcat-name { color: #d9f2e4; }
[data-theme="dark"] .vcat-exp-bar, [data-theme="dark"] .mission-bar { background: #26332a; }
[data-theme="dark"] .sighting-row, [data-theme="dark"] .mission-row { border-color: #232e26; }
[data-theme="dark"] .sighting-row span { color: #cbd5cf; }
[data-theme="dark"] .mission-row b { color: #d5e0d8; }

/* 育成猫の画像表示 */
.vcat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 999px;
  padding: 0.3rem;
}

/* ホームのいまねこ1行リンク (Ver.4.87) */
.home-sighting-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.65rem 0.9rem;
  border-radius: 1rem;
  background: #fff7ec;
  border: 1px solid #f0dcc0;
  color: #92400e;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  transition: background 0.15s;
}
.home-sighting-link:hover { background: #fdefdb; }
.home-sighting-link span { flex: 1; }
.home-sighting-link b { font-size: 1rem; }
[data-theme="dark"] .home-sighting-link { background: #2b2116; border-color: #4a3a22; color: #e8c58a; }

/* 今日の猫カードをタップ可能に (Ver.4.88) */
button.daily-cat { width: 100%; text-align: left; cursor: pointer; transition: filter 0.15s; }
button.daily-cat:hover { filter: brightness(1.02); }
.daily-cat-go { margin-left: auto; color: #c4b183; flex: none; }

/* メンション付き投稿の宛先限定バッジ (Ver.4.9) */
.mention-limited-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.66rem;
  font-weight: 700;
  vertical-align: middle;
}
[data-theme="dark"] .mention-limited-chip { background: #3a2f14; color: #e8c58a; }


/* ダークモードのメンション色 (Ver.4.91) */
[data-theme="dark"] .mention-chip { background: #14273f; color: #7ab3f5; border-color: #24405f; }

/* 幹部紹介: 歴代会長セクションの区切り (Ver.4.94) */
.officer-section-divider {
  margin: 2rem 0 1rem;
  padding-top: 1.4rem;
  border-top: 2px dashed #d5ded6;
  text-align: center;
}
.officer-section-divider h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #8a6d1a;
}
.officer-section-divider p { font-size: 0.78rem; color: #6b7280; margin-top: 0.25rem; }
[data-theme="dark"] .officer-section-divider { border-color: #35453c; }
[data-theme="dark"] .officer-section-divider h3 { color: #e3c76a; }

/* 幹部紹介の詳細モーダル (Ver.4.95) */
.officer-profile-card.is-clickable { cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.officer-profile-card.is-clickable:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 44, 29, 0.14); }
.officer-detail-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #12724a;
}
.officer-detail-hero { position: relative; background: linear-gradient(160deg, #10402a, #1c6a44); }
.officer-detail-image { width: 100%; max-height: 340px; object-fit: cover; display: block; cursor: zoom-in; }
.officer-detail-placeholder {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: 3rem;
}
.officer-modal-close { position: absolute; top: 0.7rem; right: 0.7rem; background: rgba(255, 255, 255, 0.92); }
.officer-detail-kicker { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; color: #8a9b90; }
.officer-detail-titlerow { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.25rem; }
.officer-detail-titlerow h2 { font-size: 1.5rem; font-weight: 800; color: #0b3d2a; }
.officer-detail-position {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: #e6f4ea;
  color: #0d5d35;
  font-size: 0.76rem;
  font-weight: 700;
}
.officer-detail-academic { color: #6b7280; font-size: 0.85rem; margin-top: 0.3rem; }
.officer-detail-heading { font-weight: 700; color: #145d3c; font-size: 0.9rem; margin-bottom: 0.3rem; }
.officer-detail-copy { font-size: 0.9rem; color: #374151; white-space: pre-wrap; line-height: 1.75; }
.officer-detail-quote {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border-radius: 0.9rem;
  background: #f4f8f2;
  display: flex;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: #1f2937;
}
.officer-detail-quote i { color: #97b8a5; margin-top: 0.15rem; }
[data-theme="dark"] #officer-modal > div { background: #16211b; }
[data-theme="dark"] .officer-detail-titlerow h2 { color: #d9f2e4; }
[data-theme="dark"] .officer-detail-quote { background: #1c2620; color: #cbd5cf; }
[data-theme="dark"] .officer-detail-copy { color: #b8c4bc; }

/* 管理画面: アップデート履歴 (Ver.4.96) */
.version-history-panel summary {
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-weight: 700;
  color: #0b3d2a;
  list-style: none;
  display: flex;
  align-items: center;
}
.version-history-panel summary::-webkit-details-marker { display: none; }
.version-history-panel summary::after { content: '▾'; margin-left: auto; color: #9ca3af; transition: transform 0.15s; }
.version-history-panel[open] summary::after { transform: rotate(180deg); }
.version-history-current {
  margin-left: 0.6rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: #e6f4ea;
  color: #0d5d35;
  font-size: 0.7rem;
}
.version-history-list {
  padding: 0 1.25rem 1.25rem;
  max-height: 420px;
  overflow-y: auto;
}
.version-history-list > li { padding: 0.7rem 0; border-top: 1px solid #eef1ee; }
.version-history-head { display: flex; align-items: baseline; gap: 0.6rem; }
.version-history-head b { color: #145d3c; }
.version-history-head time { font-size: 0.72rem; color: #9ca3af; }
.version-history-list > li > ul { margin-top: 0.3rem; }
.version-history-list > li > ul > li {
  font-size: 0.8rem;
  color: #4b5563;
  padding: 0.15rem 0 0.15rem 1rem;
  position: relative;
}
.version-history-list > li > ul > li::before { content: '・'; position: absolute; left: 0.2rem; color: #12724a; }

/* 経費申請 (Ver.4.97) */
.expense-status {
  display: inline-flex;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  background: #f3f4f6;
  color: #4b5563;
}
.expense-status.is-pending { background: #fef3c7; color: #92400e; }
.expense-status.is-approved { background: #dbeafe; color: #1d4ed8; }
.expense-status.is-paid { background: #dcfce7; color: #15803d; }
.expense-status.is-rejected { background: #fee2e2; color: #b91c1c; }
.expense-status.is-cancelled { background: #f3f4f6; color: #9ca3af; }
.expense-row { padding: 0.6rem 0; border-bottom: 1px solid #eef1ee; }
.expense-row-main { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.9rem; }
.expense-row-amount { font-weight: 800; color: #0b3d2a; white-space: nowrap; }
.expense-row-meta { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.25rem; flex-wrap: wrap; }
.expense-row-meta small { color: #9ca3af; font-size: 0.72rem; }
.expense-receipt-link { font-size: 0.72rem; color: #1a66d0; font-weight: 600; }
.expense-receipt-link i { margin-right: 0.2rem; }
.expense-cancel {
  font-size: 0.72rem;
  color: #b91c1c;
  font-weight: 600;
  text-decoration: underline;
}
.expense-row-note { margin-top: 0.3rem; font-size: 0.75rem; color: #b45309; }
.expense-receipt-image { max-width: 100%; max-height: 420px; border-radius: 0.75rem; border: 1px solid #e5e7eb; }
[data-theme="dark"] .expense-row { border-color: #232e26; }
[data-theme="dark"] .expense-row-amount { color: #d9f2e4; }

/* レシート自動読み取りの状態表示 (Ver.4.98) */
.expense-scan-hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  padding: 0.45rem 0.7rem;
  border-radius: 0.6rem;
  background: #fef9e7;
  color: #92600e;
  font-size: 0.78rem;
  font-weight: 600;
}
.expense-scan-hint.is-done { background: #ecfdf3; color: #157347; }
.expense-scan-hint.hidden { display: none; }
[data-theme="dark"] .expense-scan-hint { background: #2b2410; color: #e3c76a; }
[data-theme="dark"] .expense-scan-hint.is-done { background: #14301f; color: #7ccba1; }

/* 個人情報削除済みチップ (Ver.4.99) */
.admin-chip.is-anonymized { background: #e5e7eb; color: #4b5563; }