/* ==============================================
   Sc VeRA – Account Page CSS  (account.css)
   ============================================== */

/* ---- HERO ---- */
#ac-hero {
  position: relative;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 72px;
}

.ac-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0a0a0a 0%, #0f0820 50%, #0a0a0a 100%);
}
.ac-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(168,85,247,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,85,247,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}
.ac-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
}
.ac-hero-title {
  font-family: var(--font-en);
  font-size: clamp(1.6rem, 5vw, 3rem);
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  margin-top: 8px;
}

/* ---- MAIN ---- */
#ac-main {
  padding: 60px 0 100px;
  background: var(--black);
  min-height: 60vh;
}

/* ---- セクション共通 ---- */
.ac-section {
  margin-bottom: 72px;
}
.ac-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-700);
}
.ac-section-title {
  font-family: var(--font-en);
  font-size: 0.88rem;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
}

/* ---- 月ナビ ---- */
.ac-month-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ac-month-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--gray-600);
  border-radius: 50%;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  cursor: pointer;
  background: none;
  transition: all 0.2s;
}
.ac-month-btn:hover { border-color: var(--white); color: var(--white); }
.ac-month-label {
  font-family: var(--font-en);
  font-size: 1.05rem;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.1em;
  color: var(--white);
  min-width: 130px;
  text-align: center;
}

/* ---- ヘッダー右側 ---- */
.ac-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ac-add-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  background: linear-gradient(135deg, #6e3cee, #a855f7);
  border: none;
  border-radius: 24px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-en);
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: opacity 0.2s;
  box-shadow: 0 4px 16px rgba(110,60,238,0.4);
}
.ac-add-card-btn:hover { opacity: 0.85; }

/* ---- 月次サマリー ---- */
.ac-month-summary {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 2px;
  margin-bottom: 20px;
}
.ac-sum-card {
  background: var(--gray-800);
  padding: 12px 10px;
  transition: background 0.2s;
}
.ac-sum-card:hover { background: var(--gray-700); }
.ac-sum-card.highlight { background: var(--white); color: var(--black); }
.ac-sum-card.highlight .ac-sum-label { color: var(--gray-600); }
.ac-sum-label {
  font-family: var(--font-en);
  font-size: 0.5rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 4px;
}
.ac-sum-val {
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 900;
  font-style: normal;
  color: inherit;
  letter-spacing: 0.02em;
}
.ac-sum-card.diff-plus  { border-left: 3px solid #34d399; }
.ac-sum-card.diff-minus { border-left: 3px solid #f87171; }
.ac-sum-card.diff-zero  { border-left: 3px solid var(--gray-600); }
.ac-sum-card.diff-plus  .ac-sum-val { color: #34d399; }
.ac-sum-card.diff-minus .ac-sum-val { color: #f87171; }

/* ---- テーブル共通 ---- */
.ac-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--gray-700);
  border-radius: 8px;
  margin-bottom: 16px;
}
.ac-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.ac-table thead tr {
  background: var(--gray-800);
  border-bottom: 1px solid var(--gray-700);
}
.ac-table th {
  padding: 12px 16px;
  text-align: left;
  font-family: var(--font-en);
  font-size: 0.58rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-400);
  white-space: nowrap;
  vertical-align: top;
  line-height: 1.5;
}
.th-sub {
  display: block;
  font-size: 0.52rem;
  color: var(--gray-600);
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-top: 2px;
}
.ac-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}
.ac-table tbody tr:last-child td { border-bottom: none; }

/* 列幅 */
.col-name    { min-width: 140px; }
.col-usage   { width: 110px; text-align: right; }
.col-deposit { width: 120px; text-align: right; }
.col-extra   { width: 120px; text-align: right; }
.col-pay     { width: 140px; text-align: right; }
.col-action  { width: 44px; text-align: center; }
.col-balance { width: 90px; text-align: right; }

/* ---- 行スタイル ---- */
.ac-fee-row td { transition: background 0.15s; }
.ac-fee-row:hover td { background: rgba(255,255,255,0.025); }
.row-no-activity td { opacity: 0.45; }
.row-fully-covered td { background: rgba(52,211,153,0.03); }
.row-partial td       { background: rgba(251,191,36,0.03); }
.row-needs-pay td     { background: rgba(248,113,113,0.03); }

/* ---- 名前セル ---- */
.ac-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ac-name-swatch {
  width: 10px;
  height: 38px;
  border-radius: 3px;
  flex-shrink: 0;
}
.ac-name-text {
  display: block;
  font-weight: 700;
  color: var(--white);
  font-size: 0.88rem;
}
.ac-name-role {
  display: block;
  font-size: 0.62rem;
  color: var(--gray-500);
  margin-top: 1px;
}

/* ---- 金額 ---- */
.ac-money {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--white);
}
.ac-money.green   { color: #34d399; }
.ac-money.orange  { color: #fb923c; }
.ac-money-big {
  display: block;
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 900;
  color: var(--white);
}
.ac-money-big.green { color: #34d399; }
.gray { color: var(--gray-600) !important; font-size: 0.82rem; }
.ac-deposit-balance {
  display: block;
  font-size: 0.6rem;
  color: var(--gray-500);
  margin-top: 2px;
}

/* ---- 繰越バッジ ---- */
.ac-carryover-badge {
  display: block;
  font-size: 0.62rem;
  color: #fb923c;
  font-weight: 600;
  margin-top: 2px;
}

/* ---- モーダル 繰越表示 ---- */
.acm-val-display.carryover {
  color: #fb923c;
  font-weight: 700;
}
.apr-orange { color: #fb923c; }

/* ---- 預かり金リセットボタン ---- */
.ac-deposit-reset-btn {
  display: block;
  margin: 3px auto 0;
  background: none;
  border: 1px solid rgba(248,113,113,0.4);
  border-radius: 4px;
  color: #f87171;
  font-size: 0.62rem;
  padding: 1px 5px;
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.15s;
}
.ac-deposit-reset-btn:hover {
  background: rgba(248,113,113,0.15);
}

/* ---- 預かり残高セル ---- */
.ac-balance-val {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 0.85rem;
  display: block;
  text-align: right;
}
.ac-balance-val.has-val { color: #60a5fa; }   /* 残高あり：青 */
.ac-balance-val.empty   { color: var(--gray-600); } /* 残高0：グレー */
.ac-extra-note {
  display: block;
  font-size: 0.6rem;
  color: var(--gray-500);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

/* ---- 支払いセル ---- */
.ac-pay-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

/* ---- 支払いバッジ ---- */
.ac-pay-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 0.6rem;
  font-weight: 700;
  white-space: nowrap;
}
.ac-pay-badge.green  { background: rgba(52,211,153,0.12);  color: #34d399; border: 1px solid rgba(52,211,153,0.3); }
.ac-pay-badge.yellow { background: rgba(251,191,36,0.12);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
.ac-pay-badge.red    { background: rgba(248,113,113,0.12); color: #f87171; border: 1px solid rgba(248,113,113,0.3); }
.ac-pay-badge.gray   { background: rgba(255,255,255,0.05); color: var(--gray-500); border: 1px solid var(--gray-700); }

/* ---- 調整ボタン ---- */
.ac-adj-btn {
  background: transparent;
  border: 1px solid rgba(168,85,247,0.3);
  color: rgba(168,85,247,0.6);
  border-radius: 5px;
  padding: 5px 9px;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.18s;
}
.ac-adj-btn:hover {
  background: rgba(168,85,247,0.12);
  border-color: #a855f7;
  color: #d8b4fe;
}

/* ---- 凡例 ---- */
.ac-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 0;
}
.acl-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--gray-400);
}
.acl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.acl-dot.green  { background: #34d399; }
.acl-dot.yellow { background: #fbbf24; }
.acl-dot.red    { background: #f87171; }
.acl-dot.gray   { background: var(--gray-600); }

/* ---- ローディング ---- */
.ac-loading {
  text-align: center;
  padding: 48px;
  color: var(--gray-400);
  font-size: 0.9rem;
}

/* =============================================
   メンバーカードグリッド
   ============================================= */
.ac-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* ---- カード本体 ---- */
.ac-card {
  position: relative;
  border-radius: 16px;
  padding: 18px 18px 14px;
  /* サイズ完全固定 - 画像がはみ出してもカードサイズは変わらない */
  min-height: 130px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;          /* 画像はみ出しOK、カードサイズは不変 */
  box-shadow: 0 6px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12);
  cursor: default;
  transition: transform 0.2s, box-shadow 0.2s;
}
.ac-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 100%);
  border-radius: 16px 16px 0 0;
  pointer-events: none;
}
.ac-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,0.55); }
.ac-card--mine { box-shadow: 0 0 0 2px #a855f7, 0 8px 24px rgba(168,85,247,0.3); }

/* ---- カードカラー ---- */
.ac-color-black        { background: linear-gradient(135deg,#1a1a1a,#000000); }
.ac-color-gray         { background: linear-gradient(135deg,#9ca3af,#4b5563); }
.ac-color-gold         { background: linear-gradient(135deg,#f59e0b,#78350f); }
.ac-color-olive        { background: linear-gradient(135deg,#84855a,#3d3d1f); }
.ac-color-khaki        { background: linear-gradient(135deg,#c8b87a,#8a7a4a); }
.ac-color-purple       { background: linear-gradient(135deg,#a855f7,#4c1d95); }
.ac-color-blue         { background: linear-gradient(135deg,#3b82f6,#1e3a8a); }
.ac-color-pink         { background: linear-gradient(135deg,#ff00cc,#ff69b4); }
.ac-color-vivid_yellow { background: linear-gradient(135deg,#ffff00,#ffe000); }
.ac-color-turquoise    { background: linear-gradient(135deg,#00ffe7,#00bcd4); }
.ac-color-vivid_orange { background: linear-gradient(135deg,#ff6600,#ff2200); }
.ac-color-lime         { background: linear-gradient(135deg,#ccff00,#39ff14); }
.ac-color-twotone_bw   { background: linear-gradient(135deg,#111827 50%,#f3f4f6 50%); }
.ac-color-twotone_rb   { background: linear-gradient(135deg,#ef4444 50%,#111827 50%); }
.ac-color-twotone_bb   { background: linear-gradient(135deg,#3b82f6 50%,#111827 50%); }
.ac-color-camo         { background: #5a6b3a; background-image: radial-gradient(ellipse 18px 14px at 20% 30%,#3b4a24 80%,transparent 80%), radial-gradient(ellipse 14px 10px at 60% 60%,#2e3a1a 80%,transparent 80%), radial-gradient(ellipse 20px 12px at 80% 20%,#6b7a3e 80%,transparent 80%), radial-gradient(ellipse 10px 16px at 40% 80%,#3b4a24 80%,transparent 80%); }
.ac-color-amoeba       { background: #0d0d1a; background-image: radial-gradient(ellipse 36px 26px at 18% 28%,#d400ff 55%,transparent 55%), radial-gradient(ellipse 26px 38px at 52% 62%,#00e5ff 55%,transparent 55%), radial-gradient(ellipse 30px 20px at 78% 18%,#ff0099 55%,transparent 55%), radial-gradient(ellipse 22px 32px at 38% 78%,#ffcc00 55%,transparent 55%), radial-gradient(ellipse 24px 28px at 68% 82%,#00ff88 55%,transparent 55%); }
.ac-color-dark_leopard { background: #111111; background-image: radial-gradient(ellipse 22px 16px at 15% 22%,#3a2800 92%,transparent 92%), radial-gradient(ellipse 16px 22px at 40% 58%,#3a2800 92%,transparent 92%), radial-gradient(ellipse 26px 14px at 68% 28%,#3a2800 92%,transparent 92%), radial-gradient(ellipse 14px 24px at 82% 72%,#3a2800 92%,transparent 92%), radial-gradient(ellipse 20px 14px at 52% 88%,#3a2800 92%,transparent 92%); }
.ac-color-pale_pink    { background: linear-gradient(135deg,#ffe4f0,#ffc8e0); }
.ac-color-pale_yellow  { background: linear-gradient(135deg,#fffde0,#fff5a0); }
.ac-color-pale_orange  { background: linear-gradient(135deg,#ffe8cc,#ffd0a0); }
/* 旧カラー互換 */
.ac-color-mono         { background: linear-gradient(135deg,#374151,#111827); }

/* ---- カード内レイアウト ---- */
.ac-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ac-card-role-badge {
  font-family: var(--font-en);
  font-size: 0.52rem;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
}
.badge-admin         { background: rgba(234,179,8,0.25); color: #fef08a; }
.badge-member        { background: rgba(168,85,247,0.25);  color: #e9d5ff; }
.badge-operations    { background: rgba(251,191,36,0.25);  color: #fde68a; }
.badge-support       { background: rgba(52,211,153,0.25);  color: #a7f3d0; }
.badge-accounting    { background: rgba(59,130,246,0.25);  color: #bfdbfe; }
.badge-friend-company{ background: rgba(249,115,22,0.25);  color: #fed7aa; }

.ac-card-org {
  font-family: var(--font-en);
  font-size: 0.52rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.45);
}
.ac-card-bottom { }
.ac-card-name {
  font-weight: 900;
  font-size: 1rem;
  color: #fff;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.ac-card-meta {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.5);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ac-unpaid {
  color: #fca5a5;
  font-weight: 700;
}

/* ---- 支払金額行（カード最下部） ---- */
.ac-card-fee-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.ac-card-fee-label {
  font-size: 0.58rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.ac-card-fee-val {
  font-size: 1rem;
  font-weight: 900;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.03em;
}
.ac-card-fee-val.ac-card-fee-unpaid {
  color: #fca5a5;
}
.ac-card-fee-val.ac-card-fee-paid {
  color: #86efac;
}
/* 黒文字テーマ */
.ac-text-black .ac-card-fee-label { color: rgba(0,0,0,0.4); }
.ac-text-black .ac-card-fee-val   { color: rgba(0,0,0,0.65); }
.ac-text-black .ac-card-fee-row   { border-top-color: rgba(0,0,0,0.12); }
.ac-text-black .ac-card-fee-val.ac-card-fee-unpaid { color: #dc2626; }
.ac-text-black .ac-card-fee-val.ac-card-fee-paid   { color: #16a34a; }

/* ---- カード編集ボタン ---- */
.ac-card-edit-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.6);
  font-size: 0.68rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s;
  z-index: 2;
}
.ac-card-edit-btn:hover {
  background: rgba(168,85,247,0.4);
  border-color: #a855f7;
  color: #fff;
}

/* ---- カラースウォッチ ---- */
.ac-color-palette {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  width: 100%;
}
.ac-color-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}
.ac-color-swatch:hover { transform: scale(1.1); }
.ac-color-swatch.active {
  border-color: #fff;
  transform: scale(1.15);
  box-shadow: 0 0 8px rgba(255,255,255,0.3);
}
.ac-sw-black        { background: linear-gradient(135deg,#1a1a1a,#000000); }
.ac-sw-gray         { background: linear-gradient(135deg,#9ca3af,#4b5563); }
.ac-sw-gold         { background: linear-gradient(135deg,#f59e0b,#78350f); }
.ac-sw-olive        { background: linear-gradient(135deg,#84855a,#3d3d1f); }
.ac-sw-khaki        { background: linear-gradient(135deg,#c8b87a,#8a7a4a); }
.ac-sw-purple       { background: linear-gradient(135deg,#a855f7,#4c1d95); }
.ac-sw-blue         { background: linear-gradient(135deg,#3b82f6,#1e3a8a); }
.ac-sw-pink         { background: linear-gradient(135deg,#ff00cc,#ff69b4); }
.ac-sw-vivid-yellow { background: linear-gradient(135deg,#ffff00,#ffe000); }
.ac-sw-turquoise    { background: linear-gradient(135deg,#00ffe7,#00bcd4); }
.ac-sw-vivid-orange { background: linear-gradient(135deg,#ff6600,#ff2200); }
.ac-sw-lime         { background: linear-gradient(135deg,#ccff00,#39ff14); }
.ac-sw-twotone-bw   { background: linear-gradient(135deg,#111827 50%,#f3f4f6 50%); }
.ac-sw-twotone-rb   { background: linear-gradient(135deg,#ef4444 50%,#111827 50%); }
.ac-sw-twotone-bb   { background: linear-gradient(135deg,#3b82f6 50%,#111827 50%); }
.ac-sw-camo         { background: #5a6b3a; background-image: radial-gradient(ellipse 8px 6px at 20% 30%,#3b4a24 80%,transparent 80%), radial-gradient(ellipse 6px 5px at 60% 60%,#2e3a1a 80%,transparent 80%), radial-gradient(ellipse 9px 5px at 80% 20%,#6b7a3e 80%,transparent 80%), radial-gradient(ellipse 5px 7px at 40% 80%,#3b4a24 80%,transparent 80%); }
.ac-sw-amoeba       { background: #0d0d1a; background-image: radial-gradient(ellipse 10px 7px at 18% 28%,#d400ff 55%,transparent 55%), radial-gradient(ellipse 7px 10px at 52% 62%,#00e5ff 55%,transparent 55%), radial-gradient(ellipse 9px 6px at 78% 18%,#ff0099 55%,transparent 55%), radial-gradient(ellipse 6px 9px at 38% 78%,#ffcc00 55%,transparent 55%), radial-gradient(ellipse 7px 8px at 68% 82%,#00ff88 55%,transparent 55%); }
.ac-sw-dark-leopard { background: #111111; background-image: radial-gradient(ellipse 11px 8px at 15% 22%,#3a2800 90%,transparent 90%), radial-gradient(ellipse 8px 11px at 40% 58%,#3a2800 90%,transparent 90%), radial-gradient(ellipse 13px 7px at 68% 28%,#3a2800 90%,transparent 90%), radial-gradient(ellipse 7px 12px at 82% 72%,#3a2800 90%,transparent 90%), radial-gradient(ellipse 10px 7px at 52% 88%,#3a2800 90%,transparent 90%); }
.ac-sw-pale-pink    { background: linear-gradient(135deg,#ffe4f0,#ffc8e0); }
.ac-sw-pale-yellow  { background: linear-gradient(135deg,#fffde0,#fff5a0); }
.ac-sw-pale-orange  { background: linear-gradient(135deg,#ffe8cc,#ffd0a0); }

/* =============================================
   カスタム画像（ロゴ・アイコン）
   ============================================= */

/* 右下小アイコン */
.ac-card-img-corner {
  position: absolute;
  bottom: 10px;
  right: 12px;
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 6px;
  opacity: 0.85;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  transition: opacity 0.2s;
}
.ac-card:hover .ac-card-img-corner { opacity: 1; }

/* 中央大アイコン */
.ac-card-img-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 8px;
  opacity: 0.4;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  transition: opacity 0.2s;
}
.ac-card:hover .ac-card-img-center { opacity: 0.55; }

/* 背景画像（::before は使わない - 実img要素で制御するため不要） */

/* モーダル内画像プレビューUI */
.acm-image-url-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.acm-image-preview-box {
  width: 100%;
  height: 90px;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.acm-image-preview-box img {
  max-width: 100%;
  max-height: 88px;
  object-fit: contain;
  border-radius: 6px;
}
.acm-image-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,0.25);
  font-size: 0.7rem;
  text-align: center;
  line-height: 1.4;
}
.acm-image-preview-empty i { font-size: 1.4rem; }

.acm-image-pos-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.acm-img-pos-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  transition: all 0.15s;
}
.acm-img-pos-btn:has(input:checked) {
  border-color: #a855f7;
  background: rgba(168,85,247,0.2);
  color: #e9d5ff;
}
.acm-img-pos-btn input { display: none; }

.acm-image-clear-btn {
  align-self: flex-start;
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.3);
  color: #fca5a5;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}
.acm-image-clear-btn:hover {
  background: rgba(239,68,68,0.3);
  border-color: #ef4444;
}

/* =============================================
   文字色選択UI
   ============================================= */
.acm-text-color-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.acm-text-color-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.7);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}
.acm-text-color-btn.active {
  border-color: #a855f7;
  background: rgba(168,85,247,0.2);
  color: #e9d5ff;
  box-shadow: 0 0 6px rgba(168,85,247,0.3);
}
.acm-text-color-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* カード文字色クラス */
.ac-text-white .ac-card-name,
.ac-text-white .ac-card-meta,
.ac-text-white .ac-card-org,
.ac-text-white .ac-card-role-badge,
.ac-text-white .ac-card-point-chip,
.ac-text-white .ac-card-tap-hint { color: #fff !important; }
.ac-text-white .ac-card-meta      { color: rgba(255,255,255,0.55) !important; }

.ac-text-black .ac-card-name      { color: #555 !important; }
.ac-text-black .ac-card-meta      { color: rgba(80,80,80,0.7) !important; }
.ac-text-black .ac-card-org       { color: rgba(80,80,80,0.55) !important; }
.ac-text-black .ac-card-role-badge{ color: #555 !important; background: rgba(0,0,0,0.10) !important; }
.ac-text-black .ac-card-point-chip{ color: #555 !important; }
.ac-text-black .ac-card-tap-hint  { color: rgba(80,80,80,0.5) !important; }

/* =============================================
   背景画像
   ============================================= */

/* ▼ カード内の全コンテンツを画像より必ず上に */
.ac-card-top,
.ac-card-bottom,
.ac-card-fc-badge-wrap,
.ac-card-stamp,
.ac-card-edit-btn,
.ac-card-tap-hint {
  position: relative;
  z-index: 3;
}

/* ▼ 背景画像本体（コンテンツの下・カード背景の上） */
.ac-card-img-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: 16px;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.25s;
  transform-origin: center center;
}

/* 透過モード */
.ac-card-img-bg.mode-transparent { opacity: 0.22; }
.ac-card:hover .ac-card-img-bg.mode-transparent { opacity: 0.35; }

/* 通常モード */
.ac-card-img-bg.mode-normal { opacity: 1; }

/* ▼ 通常背景モード時：画像の上に黒グラデオーバーレイで文字を守る */
.ac-card.ac-has-img-bg::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 65%;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
  border-radius: 0 0 16px 16px;
  z-index: 2;          /* 画像(z-1)の上・コンテンツ(z-3)の下 */
  pointer-events: none;
}
/* 透過モードのときはグラデ不要 */
.ac-card.ac-has-img-bg.ac-img-transparent::after {
  display: none;
}

/* ▼ プレビューカード本体：コンテンツは非インタラクティブ、画像のみドラッグ可能 */
#acm-card-preview {
  pointer-events: none; /* カード全体はデフォルト無効 */
}
/* ▼ プレビューカードの bg画像はドラッグ可能 */
#acm-card-preview .ac-card-img-bg {
  pointer-events: auto; /* 画像だけ有効化 */
  cursor: grab;
  user-select: none;
}
#acm-card-preview.dragging .ac-card-img-bg {
  cursor: grabbing;
}

/* ズームスライダーUI */
.acm-img-scale-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.acm-img-scale-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.15);
  outline: none;
  cursor: pointer;
}
.acm-img-scale-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #a855f7;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(168,85,247,0.5);
}
.acm-img-scale-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #a855f7;
  cursor: pointer;
  border: none;
}
.acm-img-reset-btn {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 4px 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.acm-img-reset-btn:hover {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.75);
}

/* =============================================
   カスタムスタンプ
   ============================================= */
.ac-card-stamp {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 2.2rem;
  line-height: 1;
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  transition: opacity 0.2s;
}
.ac-card:hover .ac-card-stamp { opacity: 0.75; }

/* =============================================
   背景デコレーション
   ============================================= */
.ac-card.ac-deco-dots::after,
.ac-card.ac-deco-lines::after,
.ac-card.ac-deco-cross::after,
.ac-card.ac-deco-diamonds::after,
.ac-card.ac-deco-waves::after,
.ac-card.ac-deco-stars::after,
.ac-card.ac-deco-hex::after,
.ac-card.ac-deco-circuit::after,
.ac-card.ac-deco-confetti::after,
.ac-card.ac-deco-shooting_stars::after,
.ac-card.ac-deco-rainbow::after,
.ac-card.ac-deco-hearts::after,
.ac-card.ac-deco-sparkles::after,
.ac-card.ac-deco-bubbles::after,
.ac-card.ac-deco-sakura::after,
.ac-card.ac-deco-lightning::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
.ac-card.ac-deco-dots::after {
  background-image: radial-gradient(circle, rgba(255,255,255,0.9) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
}
.ac-card.ac-deco-lines::after {
  background-image: repeating-linear-gradient(
    45deg, rgba(255,255,255,0.8) 0px, rgba(255,255,255,0.8) 1px,
    transparent 1px, transparent 10px
  );
}
.ac-card.ac-deco-cross::after {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.7) 0px, rgba(255,255,255,0.7) 1px, transparent 1px, transparent 12px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.7) 0px, rgba(255,255,255,0.7) 1px, transparent 1px, transparent 12px);
}
.ac-card.ac-deco-diamonds::after {
  background-image: repeating-linear-gradient(
    45deg, rgba(255,255,255,0.7) 0px, rgba(255,255,255,0.7) 1px,
    transparent 1px, transparent 8px
  ), repeating-linear-gradient(
    -45deg, rgba(255,255,255,0.7) 0px, rgba(255,255,255,0.7) 1px,
    transparent 1px, transparent 8px
  );
}
.ac-card.ac-deco-waves::after {
  background-image: repeating-radial-gradient(
    circle at 50% 0%, rgba(255,255,255,0.6) 0px, rgba(255,255,255,0.6) 1px,
    transparent 1px, transparent 12px
  );
  background-size: 24px 24px;
}
.ac-card.ac-deco-stars::after {
  background-image: radial-gradient(circle, rgba(255,255,255,0.9) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.6) 0.5px, transparent 0.5px);
  background-size: 20px 20px, 10px 10px;
  background-position: 0 0, 5px 5px;
}
.ac-card.ac-deco-hex::after {
  background-color: transparent;
  background-image:
    radial-gradient(circle at 0% 50%, rgba(255,255,255,0) 10px, rgba(255,255,255,0.5) 10px, rgba(255,255,255,0.5) 11px, rgba(255,255,255,0) 11px),
    radial-gradient(circle at 100% 50%, rgba(255,255,255,0) 10px, rgba(255,255,255,0.5) 10px, rgba(255,255,255,0.5) 11px, rgba(255,255,255,0) 11px);
  background-size: 22px 38px;
}
.ac-card.ac-deco-circuit::after {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.5) 0px, rgba(255,255,255,0.5) 1px, transparent 1px, transparent 20px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.5) 0px, rgba(255,255,255,0.5) 1px, transparent 1px, transparent 20px);
  background-size: 20px 20px;
  opacity: 0.1;
}
.ac-card.ac-deco-confetti::after {
  background-image:
    radial-gradient(ellipse 2px 3px at 15% 25%, rgba(255,200,100,0.8) 100%, transparent 100%),
    radial-gradient(ellipse 2px 3px at 45% 65%, rgba(100,200,255,0.8) 100%, transparent 100%),
    radial-gradient(ellipse 2px 3px at 75% 35%, rgba(200,100,255,0.8) 100%, transparent 100%),
    radial-gradient(ellipse 2px 3px at 30% 80%, rgba(100,255,150,0.8) 100%, transparent 100%),
    radial-gradient(ellipse 2px 3px at 65% 15%, rgba(255,120,120,0.8) 100%, transparent 100%),
    radial-gradient(ellipse 2px 3px at 85% 70%, rgba(255,220,80,0.8) 100%, transparent 100%);
  background-size: 60px 60px;
  opacity: 0.5;
}

/* ---- 新デコ：流れ星 ---- */
.ac-card.ac-deco-shooting_stars::after {
  background-image:
    radial-gradient(ellipse 1px 1px at 10% 20%, rgba(255,255,255,0.95) 100%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 30% 55%, rgba(255,255,255,0.95) 100%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 55% 15%, rgba(255,255,255,0.95) 100%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 70% 40%, rgba(255,255,255,0.95) 100%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 85% 70%, rgba(255,255,255,0.95) 100%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 20% 80%, rgba(255,255,255,0.95) 100%, transparent 100%),
    radial-gradient(ellipse 1px 1px at 45% 90%, rgba(255,255,255,0.95) 100%, transparent 100%),
    linear-gradient(125deg, rgba(255,255,255,0) 60%, rgba(255,255,255,0.25) 62%, rgba(255,255,255,0) 64%),
    linear-gradient(125deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.2) 22%, rgba(255,255,255,0) 24%),
    linear-gradient(125deg, rgba(255,255,255,0) 75%, rgba(255,255,255,0.2) 77%, rgba(255,255,255,0) 79%);
  background-size: 80px 60px, 60px 50px, 90px 70px, 70px 55px, 80px 65px, 65px 50px, 75px 60px,
    100% 100%, 100% 100%, 100% 100%;
  opacity: 0.55;
}

/* ---- 新デコ：虹 ---- */
.ac-card.ac-deco-rainbow::after {
  background-image:
    repeating-linear-gradient(
      180deg,
      rgba(255,80,80,0.35) 0px, rgba(255,80,80,0.35) 4px,
      rgba(255,160,40,0.35) 4px, rgba(255,160,40,0.35) 8px,
      rgba(255,230,40,0.35) 8px, rgba(255,230,40,0.35) 12px,
      rgba(80,200,80,0.35) 12px, rgba(80,200,80,0.35) 16px,
      rgba(60,140,255,0.35) 16px, rgba(60,140,255,0.35) 20px,
      rgba(160,80,255,0.35) 20px, rgba(160,80,255,0.35) 24px,
      transparent 24px, transparent 60px
    );
  opacity: 0.4;
}

/* ---- 新デコ：ハート ---- */
.ac-card.ac-deco-hearts::after {
  background-image:
    radial-gradient(ellipse 3px 3px at 15% 25%, rgba(255,120,150,0.9) 100%, transparent 100%),
    radial-gradient(ellipse 3px 3px at 40% 60%, rgba(255,100,140,0.9) 100%, transparent 100%),
    radial-gradient(ellipse 3px 3px at 65% 30%, rgba(255,150,170,0.9) 100%, transparent 100%),
    radial-gradient(ellipse 3px 3px at 85% 70%, rgba(255,120,150,0.9) 100%, transparent 100%),
    radial-gradient(ellipse 3px 3px at 25% 80%, rgba(255,100,140,0.9) 100%, transparent 100%),
    radial-gradient(ellipse 3px 3px at 55% 10%, rgba(255,150,170,0.9) 100%, transparent 100%),
    radial-gradient(ellipse 4px 3px at 12% 50%, rgba(255,120,150,0.8) 100%, transparent 100%),
    radial-gradient(ellipse 4px 3px at 75% 50%, rgba(255,100,140,0.8) 100%, transparent 100%);
  background-size: 70px 70px;
  opacity: 0.5;
}

/* ---- 新デコ：キラキラ ---- */
.ac-card.ac-deco-sparkles::after {
  background-image:
    radial-gradient(ellipse 1.5px 5px at 20% 30%, rgba(255,255,220,0.9) 100%, transparent 100%),
    radial-gradient(ellipse 5px 1.5px at 20% 30%, rgba(255,255,220,0.9) 100%, transparent 100%),
    radial-gradient(ellipse 1.5px 5px at 55% 65%, rgba(255,255,200,0.9) 100%, transparent 100%),
    radial-gradient(ellipse 5px 1.5px at 55% 65%, rgba(255,255,200,0.9) 100%, transparent 100%),
    radial-gradient(ellipse 1.5px 4px at 80% 20%, rgba(255,255,220,0.9) 100%, transparent 100%),
    radial-gradient(ellipse 4px 1.5px at 80% 20%, rgba(255,255,220,0.9) 100%, transparent 100%),
    radial-gradient(ellipse 1.5px 4px at 35% 80%, rgba(255,255,200,0.9) 100%, transparent 100%),
    radial-gradient(ellipse 4px 1.5px at 35% 80%, rgba(255,255,200,0.9) 100%, transparent 100%),
    radial-gradient(circle 1px at 10% 70%, rgba(255,255,200,0.95) 100%, transparent 100%),
    radial-gradient(circle 1px at 70% 45%, rgba(255,255,220,0.95) 100%, transparent 100%);
  background-size: 80px 80px;
  opacity: 0.65;
}

/* ---- 新デコ：バブル ---- */
.ac-card.ac-deco-bubbles::after {
  background-image:
    radial-gradient(circle 8px at 15% 30%, rgba(255,255,255,0) 5px, rgba(255,255,255,0.5) 6px, rgba(255,255,255,0.5) 7px, rgba(255,255,255,0) 8px),
    radial-gradient(circle 5px at 40% 65%, rgba(255,255,255,0) 3px, rgba(255,255,255,0.4) 4px, rgba(255,255,255,0.4) 5px, rgba(255,255,255,0) 5px),
    radial-gradient(circle 10px at 65% 25%, rgba(255,255,255,0) 7px, rgba(255,255,255,0.5) 8px, rgba(255,255,255,0.5) 9px, rgba(255,255,255,0) 10px),
    radial-gradient(circle 6px at 80% 70%, rgba(255,255,255,0) 4px, rgba(255,255,255,0.4) 5px, rgba(255,255,255,0.4) 6px, rgba(255,255,255,0) 6px),
    radial-gradient(circle 7px at 30% 80%, rgba(255,255,255,0) 5px, rgba(255,255,255,0.45) 6px, rgba(255,255,255,0.45) 7px, rgba(255,255,255,0) 7px),
    radial-gradient(circle 4px at 55% 45%, rgba(255,255,255,0) 2px, rgba(255,255,255,0.4) 3px, rgba(255,255,255,0.4) 4px, rgba(255,255,255,0) 4px);
  background-size: 100% 100%;
  opacity: 0.6;
}

/* ---- 新デコ：桜 ---- */
.ac-card.ac-deco-sakura::after {
  background-image:
    radial-gradient(ellipse 4px 3px at 10% 20%, rgba(255,180,200,0.9) 100%, transparent 100%),
    radial-gradient(ellipse 3px 4px at 25% 55%, rgba(255,160,190,0.9) 100%, transparent 100%),
    radial-gradient(ellipse 4px 3px at 45% 15%, rgba(255,180,200,0.9) 100%, transparent 100%),
    radial-gradient(ellipse 3px 4px at 60% 70%, rgba(255,160,190,0.9) 100%, transparent 100%),
    radial-gradient(ellipse 4px 3px at 75% 35%, rgba(255,190,210,0.9) 100%, transparent 100%),
    radial-gradient(ellipse 3px 4px at 90% 60%, rgba(255,170,195,0.9) 100%, transparent 100%),
    radial-gradient(ellipse 4px 3px at 15% 80%, rgba(255,180,200,0.9) 100%, transparent 100%),
    radial-gradient(ellipse 3px 3px at 50% 90%, rgba(255,160,190,0.9) 100%, transparent 100%),
    radial-gradient(ellipse 4px 3px at 35% 40%, rgba(255,190,210,0.9) 100%, transparent 100%);
  background-size: 70px 70px;
  opacity: 0.5;
}

/* ---- 新デコ：稲妻 ---- */
.ac-card.ac-deco-lightning::after {
  background-image:
    repeating-linear-gradient(
      60deg,
      rgba(255,240,80,0) 0px, rgba(255,240,80,0) 12px,
      rgba(255,240,80,0.6) 12px, rgba(255,240,80,0.6) 13px,
      rgba(255,240,80,0) 13px, rgba(255,240,80,0) 16px,
      rgba(255,200,40,0.4) 16px, rgba(255,200,40,0.4) 17px,
      rgba(255,240,80,0) 17px, rgba(255,240,80,0) 40px
    ),
    radial-gradient(ellipse 2px 2px at 20% 30%, rgba(255,255,150,0.95) 100%, transparent 100%),
    radial-gradient(ellipse 2px 2px at 55% 65%, rgba(255,255,150,0.95) 100%, transparent 100%),
    radial-gradient(ellipse 2px 2px at 80% 20%, rgba(255,255,150,0.95) 100%, transparent 100%);
  background-size: 30px 60px, 60px 60px, 80px 70px, 50px 55px;
  opacity: 0.45;
}

/* =============================================
   モーダル内スタンプ・デコUIスタイル
   ============================================= */
.acm-stamp-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.acm-stamp-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  line-height: 1;
}
.acm-stamp-btn:first-child { font-size: 0.65rem; color: rgba(255,255,255,0.5); }
.acm-stamp-btn:hover { background: rgba(255,255,255,0.15); transform: scale(1.1); }
.acm-stamp-btn.active {
  border-color: #a855f7;
  background: rgba(168,85,247,0.25);
  box-shadow: 0 0 8px rgba(168,85,247,0.4);
  transform: scale(1.12);
}

.acm-deco-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.acm-deco-btn {
  border: 2px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: all 0.15s;
}
.acm-deco-btn:hover { border-color: rgba(255,255,255,0.3); transform: scale(1.05); }
.acm-deco-btn.active {
  border-color: #a855f7;
  box-shadow: 0 0 8px rgba(168,85,247,0.4);
  transform: scale(1.08);
}
.acm-deco-preview {
  display: block;
  width: 54px;
  height: 38px;
  border-radius: 6px;
  background: linear-gradient(135deg,#374151,#111827);
  position: relative;
  overflow: hidden;
}
.acm-deco-preview.deco-none {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: rgba(255,255,255,0.4);
}
.acm-deco-preview.deco-dots::after        { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,0.9) 1.5px,transparent 1.5px); background-size:10px 10px; }
.acm-deco-preview.deco-lines::after       { content:''; position:absolute; inset:0; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,0.7) 0px,rgba(255,255,255,0.7) 1px,transparent 1px,transparent 8px); }
.acm-deco-preview.deco-cross::after       { content:''; position:absolute; inset:0; background-image:repeating-linear-gradient(0deg,rgba(255,255,255,0.6) 0px,rgba(255,255,255,0.6) 1px,transparent 1px,transparent 10px),repeating-linear-gradient(90deg,rgba(255,255,255,0.6) 0px,rgba(255,255,255,0.6) 1px,transparent 1px,transparent 10px); }
.acm-deco-preview.deco-diamonds::after    { content:''; position:absolute; inset:0; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,0.6) 0px,rgba(255,255,255,0.6) 1px,transparent 1px,transparent 7px),repeating-linear-gradient(-45deg,rgba(255,255,255,0.6) 0px,rgba(255,255,255,0.6) 1px,transparent 1px,transparent 7px); }
.acm-deco-preview.deco-waves::after       { content:''; position:absolute; inset:0; background-image:repeating-radial-gradient(circle at 50% 0%,rgba(255,255,255,0.5) 0px,rgba(255,255,255,0.5) 1px,transparent 1px,transparent 10px); background-size:20px 20px; }
.acm-deco-preview.deco-stars::after       { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,0.9) 1px,transparent 1px),radial-gradient(circle,rgba(255,255,255,0.6) 0.5px,transparent 0.5px); background-size:16px 16px,8px 8px; background-position:0 0,4px 4px; }
.acm-deco-preview.deco-hex::after         { content:''; position:absolute; inset:0; background-image:radial-gradient(circle at 0% 50%,rgba(255,255,255,0) 8px,rgba(255,255,255,0.5) 8px,rgba(255,255,255,0.5) 9px,rgba(255,255,255,0) 9px),radial-gradient(circle at 100% 50%,rgba(255,255,255,0) 8px,rgba(255,255,255,0.5) 8px,rgba(255,255,255,0.5) 9px,rgba(255,255,255,0) 9px); background-size:18px 30px; }
.acm-deco-preview.deco-circuit::after     { content:''; position:absolute; inset:0; background-image:repeating-linear-gradient(0deg,rgba(255,255,255,0.5) 0px,rgba(255,255,255,0.5) 1px,transparent 1px,transparent 14px),repeating-linear-gradient(90deg,rgba(255,255,255,0.5) 0px,rgba(255,255,255,0.5) 1px,transparent 1px,transparent 14px); background-size:14px 14px; }
.acm-deco-preview.deco-confetti::after    { content:''; position:absolute; inset:0; background-image:radial-gradient(ellipse 2px 3px at 15% 25%,rgba(255,200,100,0.9) 100%,transparent 100%),radial-gradient(ellipse 2px 3px at 55% 60%,rgba(100,200,255,0.9) 100%,transparent 100%),radial-gradient(ellipse 2px 3px at 80% 30%,rgba(200,100,255,0.9) 100%,transparent 100%),radial-gradient(ellipse 2px 3px at 35% 80%,rgba(100,255,150,0.9) 100%,transparent 100%),radial-gradient(ellipse 2px 3px at 70% 10%,rgba(255,120,120,0.9) 100%,transparent 100%); background-size:40px 40px; opacity:0.8; }

/* ---- モーダル内プレビュー：新デコ ---- */
.acm-deco-preview.deco-shooting_stars { font-size:1.4rem; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0f1a3a,#0a0a1a); }
.acm-deco-preview.deco-shooting_stars::after { content:''; position:absolute; inset:0;
  background-image: radial-gradient(circle 1px at 20% 25%,#fff 100%,transparent 100%),radial-gradient(circle 1px at 50% 55%,#fff 100%,transparent 100%),radial-gradient(circle 1px at 75% 20%,#fff 100%,transparent 100%),radial-gradient(circle 1px at 35% 70%,#fff 100%,transparent 100%),radial-gradient(circle 1px at 85% 50%,#fff 100%,transparent 100%),linear-gradient(125deg,rgba(255,255,255,0) 55%,rgba(255,255,255,0.6) 57%,rgba(255,255,255,0) 59%),linear-gradient(125deg,rgba(255,255,255,0) 25%,rgba(255,255,255,0.5) 27%,rgba(255,255,255,0) 29%);
  background-size:30px 20px,25px 18px,35px 25px,28px 22px,32px 20px,100% 100%,100% 100%; }
.acm-deco-preview.deco-rainbow { overflow:hidden; }
.acm-deco-preview.deco-rainbow::after { content:''; position:absolute; inset:0;
  background-image:repeating-linear-gradient(180deg,rgba(255,80,80,0.7) 0px,rgba(255,80,80,0.7) 3px,rgba(255,160,40,0.7) 3px,rgba(255,160,40,0.7) 6px,rgba(255,230,40,0.7) 6px,rgba(255,230,40,0.7) 9px,rgba(80,200,80,0.7) 9px,rgba(80,200,80,0.7) 12px,rgba(60,140,255,0.7) 12px,rgba(60,140,255,0.7) 15px,rgba(160,80,255,0.7) 15px,rgba(160,80,255,0.7) 18px,transparent 18px,transparent 36px); }
.acm-deco-preview.deco-hearts::after { content:''; position:absolute; inset:0;
  background-image:radial-gradient(ellipse 2px 2px at 20% 30%,rgba(255,120,150,1) 100%,transparent 100%),radial-gradient(ellipse 2px 2px at 50% 65%,rgba(255,100,140,1) 100%,transparent 100%),radial-gradient(ellipse 2px 2px at 75% 30%,rgba(255,150,170,1) 100%,transparent 100%),radial-gradient(ellipse 2px 2px at 35% 80%,rgba(255,120,150,1) 100%,transparent 100%),radial-gradient(ellipse 2px 2px at 80% 70%,rgba(255,100,140,1) 100%,transparent 100%);
  background-size:40px 40px; }
.acm-deco-preview.deco-sparkles::after { content:''; position:absolute; inset:0;
  background-image:radial-gradient(ellipse 1px 4px at 25% 30%,rgba(255,255,200,1) 100%,transparent 100%),radial-gradient(ellipse 4px 1px at 25% 30%,rgba(255,255,200,1) 100%,transparent 100%),radial-gradient(ellipse 1px 4px at 60% 65%,rgba(255,255,200,1) 100%,transparent 100%),radial-gradient(ellipse 4px 1px at 60% 65%,rgba(255,255,200,1) 100%,transparent 100%),radial-gradient(ellipse 1px 3px at 80% 25%,rgba(255,255,200,1) 100%,transparent 100%),radial-gradient(ellipse 3px 1px at 80% 25%,rgba(255,255,200,1) 100%,transparent 100%);
  background-size:50px 50px; }
.acm-deco-preview.deco-bubbles::after { content:''; position:absolute; inset:0;
  background-image:radial-gradient(circle 6px at 25% 35%,rgba(255,255,255,0) 4px,rgba(255,255,255,0.7) 5px,rgba(255,255,255,0.7) 6px,rgba(255,255,255,0) 6px),radial-gradient(circle 4px at 65% 65%,rgba(255,255,255,0) 2px,rgba(255,255,255,0.6) 3px,rgba(255,255,255,0.6) 4px,rgba(255,255,255,0) 4px),radial-gradient(circle 7px at 75% 25%,rgba(255,255,255,0) 5px,rgba(255,255,255,0.65) 6px,rgba(255,255,255,0.65) 7px,rgba(255,255,255,0) 7px);
  background-size:100% 100%; }
.acm-deco-preview.deco-sakura::after { content:''; position:absolute; inset:0;
  background-image:radial-gradient(ellipse 3px 2px at 15% 25%,rgba(255,180,200,1) 100%,transparent 100%),radial-gradient(ellipse 2px 3px at 40% 60%,rgba(255,160,190,1) 100%,transparent 100%),radial-gradient(ellipse 3px 2px at 65% 20%,rgba(255,190,210,1) 100%,transparent 100%),radial-gradient(ellipse 2px 3px at 80% 65%,rgba(255,170,195,1) 100%,transparent 100%),radial-gradient(ellipse 3px 2px at 30% 80%,rgba(255,180,200,1) 100%,transparent 100%);
  background-size:45px 45px; }
.acm-deco-preview.deco-lightning::after { content:''; position:absolute; inset:0;
  background-image:repeating-linear-gradient(60deg,rgba(255,240,80,0) 0px,rgba(255,240,80,0) 8px,rgba(255,240,80,0.8) 8px,rgba(255,240,80,0.8) 9px,rgba(255,240,80,0) 9px,rgba(255,240,80,0) 12px,rgba(255,200,40,0.6) 12px,rgba(255,200,40,0.6) 13px,rgba(255,240,80,0) 13px,rgba(255,240,80,0) 28px);
  background-size:20px 40px; }

/* =============================================
   モーダル共通
   ============================================= */
.acm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.acm-box {
  background: #141414;
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: 14px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
.acm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: var(--gray-500);
  font-size: 1rem;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 5px;
  transition: color 0.18s;
}
.acm-close:hover { color: var(--white); }
.acm-title {
  font-family: var(--font-en);
  font-size: 0.82rem;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.12em;
  color: var(--white);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.acm-title i { color: #a855f7; }
.acm-member-name {
  font-size: 1rem;
  font-weight: 700;
  color: #d8b4fe;
  margin-bottom: 20px;
}

/* ---- フォーム行 ---- */
.acm-row {
  margin-bottom: 16px;
}
.acm-row.readonly {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--gray-700);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.acm-label {
  display: block;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gray-400);
  text-transform: uppercase;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.acm-label i { color: #a855f7; }
.acm-row.readonly .acm-label { margin-bottom: 0; color: var(--gray-400); }
.acm-val-display {
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 900;
  color: var(--white);
}
.acm-input-wrap {
  display: flex;
  gap: 8px;
}
.acm-input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--gray-700);
  border-radius: 8px;
  color: var(--white);
  font-size: 0.85rem;
  font-family: inherit;
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.18s;
  width: 100%;
  box-sizing: border-box;
}
.acm-input:focus { border-color: #a855f7; }
.acm-input option { background: #1a1a1a; }
.acm-hint {
  font-size: 0.63rem;
  color: var(--gray-500);
  margin-top: 5px;
}


/* ---- プレビュー ---- */
.acm-preview {
  background: rgba(168,85,247,0.04);
  border: 1px solid rgba(168,85,247,0.2);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.acm-preview-title {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(168,85,247,0.7);
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.acm-pr-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  font-size: 0.8rem;
  color: var(--gray-300);
}
.acm-pr-row.strong {
  font-weight: 700;
  color: var(--white);
  padding-top: 8px;
}
.acm-pr-row span:last-child {
  font-family: var(--font-en);
  font-weight: 700;
}
.acm-pr-divider {
  height: 1px;
  background: rgba(168,85,247,0.2);
  margin: 6px 0;
}
.apr-green { color: #34d399 !important; }
.apr-red   { color: #f87171 !important; }
.apr-pay   { font-size: 1.05rem !important; color: var(--white); }

/* ---- エラー ---- */
.acm-error {
  font-size: 0.73rem;
  color: #f87171;
  min-height: 1.2em;
  margin-bottom: 4px;
}

/* ---- フッター ---- */
.acm-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  /* 常に下部に固定 */
  flex-shrink: 0;
  padding: 12px 22px 18px;
  background: #141414;
  border-top: 1px solid rgba(168,85,247,0.15);
}
.acm-cancel {
  background: transparent;
  border: 1px solid var(--gray-700);
  color: var(--gray-400);
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
}
.acm-cancel:hover { border-color: var(--gray-500); color: var(--white); }
.acm-save {
  background: linear-gradient(135deg, #6e3cee, #a855f7);
  border: none;
  color: #fff;
  border-radius: 8px;
  padding: 9px 22px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--font-en);
  letter-spacing: 0.1em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.2s;
  box-shadow: 0 4px 14px rgba(110,60,238,0.35);
}
.acm-save:hover { opacity: 0.85; }
.acm-save:disabled { opacity: 0.5; cursor: not-allowed; }
.acm-delete {
  background: transparent;
  border: 1px solid rgba(248,113,113,0.35);
  color: #f87171;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: auto;
  transition: all 0.2s;
}
.acm-delete:hover { background: rgba(248,113,113,0.1); border-color: #f87171; }

/* モーダルボックス内部構造 */
.acm-box-header {
  padding: 22px 22px 0;
  position: relative;
  flex-shrink: 0;
}
.acm-box-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 22px 0;
  min-height: 0;
}



/* =============================================
   預かり金セクション（モーダル内）
   ============================================= */
.acm-deposit-section {
  background: rgba(96,165,250,0.04);
  border: 1px solid rgba(96,165,250,0.18);
  border-radius: 10px;
  padding: 12px 14px 8px;
  margin-bottom: 16px;
}
.acm-deposit-balance-val {
  color: #60a5fa !important;
}
.acm-deposit-after-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0 2px;
  border-top: 1px solid rgba(96,165,250,0.15);
  margin-top: 4px;
}
.acm-deposit-after-label {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gray-400);
  text-transform: uppercase;
}
.acm-deposit-after-val {
  font-family: var(--font-en);
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--gray-600);
}
.acm-deposit-after-val.has-val {
  color: #60a5fa;
}

/* =============================================
   ベラポイ関連スタイル（account-card）
   ============================================= */

/* カードプレビュー内のポイント表示 */
.ac-card-point-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(245,158,11,0.9);
  font-family: var(--font-en);
  letter-spacing: 0.04em;
}

/* カードグリッド内のポイントチップ */
.ac-card-point-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(245,158,11,0.15);
  border: 1px solid rgba(245,158,11,0.4);
  border-radius: 100px;
  padding: 2px 9px;
  font-size: 0.62rem;
  font-weight: 700;
  color: #f59e0b;
  font-family: var(--font-en);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* モーダル内ポイント表示ボックス */
.acm-point-display {
  background: rgba(245,158,11,0.06);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.acm-pt-balance {
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 900;
  color: #f59e0b;
}
.acm-pt-sub {
  font-size: 0.63rem;
  color: rgba(245,158,11,0.55);
}

/* ---- acm-card-preview内のポイント表示 ---- */
.acm-card-preview-wrap .ac-card-point-label {
  font-size: 0.6rem;
}

/* ---- バッジ追加チェックボックス系 ---- */
.acm-badge-check-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.acm-fc-check-label {
  background: rgba(249,115,22,0.05);
  border: 1px solid rgba(249,115,22,0.2);
  border-radius: 8px;
  padding: 10px 12px;
}
.acm-fc-check-label input[type="checkbox"] {
  accent-color: #f97316;
  margin-top: 2px;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.acm-fc-check-text {
  font-size: 0.78rem;
  color: #fed7aa;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.acm-fc-check-text small {
  font-size: 0.62rem;
  color: rgba(253,215,170,0.5);
  font-weight: 400;
}
.acm-fc-check-icon { display: none; }

/* =============================================
   カードへ送信 — トリガーボタン
   ============================================= */
#ac-send-trigger-row {
  margin-bottom: 12px;
}
#ac-send-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 16px;
  background: rgba(52,211,153,0.12);
  border: 1.5px solid rgba(52,211,153,0.45);
  border-radius: 8px;
  color: #6ee7b7;
  font-size: 0.76rem;
  font-weight: 900;
  font-family: var(--font-en);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.18s;
}
#ac-send-trigger-btn:hover {
  background: rgba(52,211,153,0.22);
  border-color: #34d399;
  box-shadow: 0 0 12px rgba(52,211,153,0.2);
}

/* =============================================
   カードへ送信 — モーダル
   ============================================= */
#ac-send-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 8500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#ac-send-modal {
  background: #141414;
  border: 1px solid rgba(52,211,153,0.3);
  border-radius: 14px;
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#ac-send-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
#ac-send-modal-title {
  font-family: var(--font-en);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6ee7b7;
  display: flex;
  align-items: center;
  gap: 6px;
}
#ac-send-modal-close {
  background: none;
  border: none;
  color: var(--gray-500);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 7px;
  border-radius: 5px;
  transition: color 0.15s;
}
#ac-send-modal-close:hover { color: var(--white); }
#ac-send-modal-hint {
  font-size: 0.68rem;
  color: var(--gray-500);
  padding: 10px 18px 4px;
  flex-shrink: 0;
  margin: 0;
}

/* チェックリスト（スクロール領域） */
#ac-send-checklist {
  flex: 1;
  overflow-y: auto;
  padding: 8px 18px 12px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 7px;
}
.ac-send-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  cursor: pointer;
  font-size: 0.73rem;
  color: var(--gray-300);
  transition: all 0.15s;
  user-select: none;
  white-space: nowrap;
}
.ac-send-item:hover {
  border-color: rgba(52,211,153,0.4);
  background: rgba(52,211,153,0.07);
}
.ac-send-item:has(.ac-send-chk:checked) {
  border-color: rgba(52,211,153,0.6);
  background: rgba(52,211,153,0.12);
  color: #6ee7b7;
}
.ac-send-item input[type="checkbox"] {
  accent-color: #34d399;
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}
.ac-send-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ac-send-name { font-weight: 700; }
.ac-send-pay {
  font-family: var(--font-en);
  font-size: 0.67rem;
  font-weight: 700;
  color: var(--gray-400);
  margin-left: 1px;
}
.ac-send-item:has(.ac-send-chk:checked) .ac-send-pay { color: #6ee7b7; }
.ac-send-badge-update,
.ac-send-badge-new {
  font-size: 0.57rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.03em;
}
.ac-send-badge-update {
  background: rgba(251,191,36,0.12);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,0.28);
}
.ac-send-badge-new {
  background: rgba(52,211,153,0.1);
  color: #34d399;
  border: 1px solid rgba(52,211,153,0.28);
}
.ac-send-empty {
  font-size: 0.72rem;
  color: var(--gray-600);
  padding: 8px 0;
  width: 100%;
}

/* モーダルフッター */
#ac-send-modal-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  flex-wrap: wrap;
}
#ac-send-select-all-btn,
#ac-send-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: var(--gray-400);
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.02em;
}
#ac-send-select-all-btn:hover,
#ac-send-clear-btn:hover {
  border-color: rgba(255,255,255,0.28);
  color: var(--gray-200);
}
#ac-bulk-confirm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  background: linear-gradient(135deg, rgba(52,211,153,0.28), rgba(16,185,129,0.22));
  border: 1.5px solid rgba(52,211,153,0.6);
  border-radius: 8px;
  color: #6ee7b7;
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
  letter-spacing: 0.06em;
  font-family: var(--font-en);
  text-transform: uppercase;
  transition: all 0.18s;
  margin-left: auto;
}
#ac-bulk-confirm-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(52,211,153,0.38), rgba(16,185,129,0.3));
  border-color: #34d399;
  box-shadow: 0 0 14px rgba(52,211,153,0.25);
}
#ac-bulk-confirm-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}


/* ---- カードプレビューラップ（モーダル内） ---- */
.acm-card-preview-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.acm-card-preview-wrap .ac-card {
  width: 220px;
  min-height: 128px;
  user-select: none;
}

/* ---- アクションセル ---- */
.ac-action-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* =============================================
   精算済みチェックボックス
   ============================================= */
.ac-paid-check-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.ac-paid-check-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.ac-paid-check-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--gray-600);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s;
  position: relative;
}
.ac-paid-check-icon::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border-right: 2.5px solid transparent;
  border-bottom: 2.5px solid transparent;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: border-color 0.15s;
}
.ac-paid-check-label:hover .ac-paid-check-icon {
  border-color: #34d399;
  background: rgba(52,211,153,0.08);
}
.ac-paid-check-label input:checked ~ .ac-paid-check-icon {
  background: #34d399;
  border-color: #34d399;
  box-shadow: 0 0 8px rgba(52,211,153,0.4);
}
.ac-paid-check-label input:checked ~ .ac-paid-check-icon::after {
  border-right-color: #fff;
  border-bottom-color: #fff;
}
.ac-paid-check-label input:disabled ~ .ac-paid-check-icon {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- 精算済みバッジ ---- */
.ac-pay-badge.paid-done {
  background: rgba(52,211,153,0.18);
  color: #34d399;
  border: 1px solid rgba(52,211,153,0.45);
  font-weight: 900;
}

/* ---- 精算済み行スタイル ---- */
.row-paid-done td {
  opacity: 0.45;
}
.row-paid-done .ac-name-text,
.row-paid-done .ac-money-big {
  text-decoration: line-through;
  text-decoration-color: rgba(52,211,153,0.5);
}
.row-paid-done .ac-paid-check-label {
  opacity: 1 !important; /* チェックは常に見える */
}
.row-paid-done td:last-child {
  opacity: 1; /* アクション列は常に表示 */
}

/* 支払い金額：精算済みスルー表示 */
.ac-money-big.paid-through {
  color: #34d399;
}

/* ---- 凡例に精算済みを追加 ---- */
.acl-dot.teal { background: #34d399; }

/* ---- 管理者バッジ（追加表示用） ---- */
.badge-admin {
  background: rgba(168,85,247,0.25);
  color: #e9d5ff;
}

/* ---- フレンド企業バッジ追加表示 ---- */
.ac-card-fc-badge-wrap {
  margin-top: 5px;
}
.ac-fc-extra-badge {
  font-size: 0.48rem;
  padding: 2px 8px;
  opacity: 0.85;
}

/* ================================================================
   確定ボタン・確定済みバッジ・カード反映表示
================================================================ */

/* ── 一括確定ボタン ── */
.ac-bulk-confirm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1.5px solid rgba(52,211,153,0.6);
  background: rgba(52,211,153,0.15);
  color: #6ee7b7;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.ac-bulk-confirm-btn:hover:not(:disabled) {
  background: rgba(52,211,153,0.28);
  border-color: rgba(52,211,153,0.9);
  color: #a7f3d0;
  box-shadow: 0 0 12px rgba(52,211,153,0.25);
}
.ac-bulk-confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── 一括確定ボタン：上書きモード（amber） ── */
.ac-bulk-confirm-btn.overwrite {
  border-color: rgba(251,191,36,0.6);
  background: rgba(251,191,36,0.12);
  color: #fcd34d;
}
.ac-bulk-confirm-btn.overwrite:hover:not(:disabled) {
  background: rgba(251,191,36,0.24);
  border-color: rgba(251,191,36,0.9);
  color: #fde68a;
  box-shadow: 0 0 12px rgba(251,191,36,0.22);
}

/* ── 確定済みバッジ（テーブル行の名前欄） ── */
.ac-confirmed-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(52,211,153,0.12);
  border: 1px solid rgba(52,211,153,0.35);
  color: #6ee7b7;
  font-size: 0.52rem;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
}

/* ── 確定済み行のハイライト ── */
.row-confirmed {
  background: rgba(52,211,153,0.04) !important;
}
.row-confirmed td {
  border-color: rgba(52,211,153,0.15) !important;
}

/* ── 凡例：確定済みドット ── */
.acl-dot.confirmed { background: #34d399; box-shadow: 0 0 0 2px rgba(52,211,153,0.3); }

/* ── 預かり金列のセル ── */
.ac-balance-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

/* ================================================================
   アカウントカード内 確定済み月額・預かり金残高表示
================================================================ */
.ac-card-fee-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px 6px;
  background: rgba(0,0,0,0.25);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-radius: 0 0 12px 12px;
  gap: 6px;
  min-height: 28px;
  font-size: 0.72rem;
}
.ac-card-fee-label {
  color: rgba(255,255,255,0.45);
  font-size: 0.65rem;
  flex-shrink: 0;
}
.ac-card-fee-val {
  color: rgba(255,255,255,0.6);
  font-weight: 700;
  font-size: 0.75rem;
}
.ac-card-fee-confirmed {
  width: 100%;
}
.ac-card-fee-month-lbl {
  font-family: 'Nunito', 'M PLUS Rounded 1c', sans-serif;
  font-size: 0.62rem;
  color: #6ee7b7;
  font-weight: 800;
  margin-bottom: 4px;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ac-card-fee-row-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ac-card-fee-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  row-gap: 2px;
  column-gap: 6px;
}
.ac-card-fee-item {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}
.ac-card-fee-sub {
  font-family: 'Nunito', 'M PLUS Rounded 1c', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.04em;
}
.ac-card-fee-num {
  font-family: 'Nunito', 'M PLUS Rounded 1c', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.ac-card-fee-sep {
  color: rgba(255,255,255,0.15);
  font-size: 0.6rem;
}

/* ---- クラブ部長バッジ ---- */
.badge-karaoke { background: rgba(236,72,153,0.25); color: #fbcfe8; }
.badge-running  { background: rgba(34,197,94,0.25);  color: #bbf7d0; }
.badge-mahjong  { background: rgba(234,179,8,0.25);  color: #fef08a; }
.ac-card-club-chief-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-en);
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 100px;
  margin-top: 4px;
}
.ac-card-club-chief-badge.karaoke { background: rgba(236,72,153,0.25); color: #fbcfe8; border: 1px solid rgba(236,72,153,0.4); }
.ac-card-club-chief-badge.running  { background: rgba(34,197,94,0.25);  color: #bbf7d0; border: 1px solid rgba(34,197,94,0.4); }
.ac-card-club-chief-badge.mahjong  { background: rgba(234,179,8,0.25);  color: #fef08a; border: 1px solid rgba(234,179,8,0.4); }

/* ---- クラブ部長チェックボックス（モーダル内） ---- */
.acm-club-check-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid rgba(168,85,247,0.2);
  border-radius: 8px;
  background: rgba(168,85,247,0.04);
  transition: background 0.18s, border-color 0.18s;
  user-select: none;
  margin-bottom: 6px;
}
.acm-club-check-label:hover { background: rgba(168,85,247,0.09); border-color: rgba(168,85,247,0.4); }
.acm-club-check-label input[type="checkbox"] { accent-color: #a855f7; width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; cursor: pointer; }
.acm-club-check-label span { font-size: 0.78rem; font-weight: 700; color: rgba(200,150,255,0.85); }
.acm-club-check-label small { display: block; font-size: 0.6rem; font-weight: 400; color: var(--gray-500); margin-top: 2px; }

/* ---- フレンド企業チェックボックス（モーダル内） ---- */
.acm-fc-check-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 10px 14px;
  border: 1px solid rgba(249,115,22,0.25);
  border-radius: 8px;
  background: rgba(249,115,22,0.04);
  transition: background 0.18s, border-color 0.18s;
  user-select: none;
}
.acm-fc-check-label:hover {
  background: rgba(249,115,22,0.09);
  border-color: rgba(249,115,22,0.45);
}
.acm-fc-check-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.acm-fc-check-icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 2px solid rgba(249,115,22,0.4);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: all 0.18s;
  position: relative;
}
.acm-fc-check-icon::after {
  content: '';
  display: block;
  width: 4px;
  height: 8px;
  border-right: 2.5px solid transparent;
  border-bottom: 2.5px solid transparent;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: border-color 0.15s;
}
.acm-fc-check-label input:checked ~ .acm-fc-check-icon {
  background: #f97316;
  border-color: #f97316;
  box-shadow: 0 0 8px rgba(249,115,22,0.4);
}
.acm-fc-check-label input:checked ~ .acm-fc-check-icon::after {
  border-right-color: #fff;
  border-bottom-color: #fff;
}
.acm-fc-check-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(249,115,22,0.85);
  line-height: 1.4;
}
.acm-fc-check-text i { margin-right: 4px; }
.acm-fc-check-text small {
  font-size: 0.62rem;
  font-weight: 400;
  color: var(--gray-500);
}
.acm-fc-check-label input:checked ~ .acm-fc-check-text {
  color: #fb923c;
}

/* ---- 管理者バッジ チェックボックス（モーダル内） ---- */
.acm-admin-check-label {
  border-color: rgba(168,85,247,0.25);
  background: rgba(168,85,247,0.04);
}
.acm-admin-check-label:hover {
  background: rgba(168,85,247,0.09);
  border-color: rgba(168,85,247,0.45);
}
.acm-admin-check-icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 2px solid rgba(168,85,247,0.4);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: all 0.18s;
  position: relative;
}
.acm-admin-check-icon::after {
  content: '';
  display: block;
  width: 4px;
  height: 8px;
  border-right: 2.5px solid transparent;
  border-bottom: 2.5px solid transparent;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: border-color 0.15s;
}
.acm-admin-check-label input:checked ~ .acm-admin-check-icon {
  background: #a855f7;
  border-color: #a855f7;
  box-shadow: 0 0 8px rgba(168,85,247,0.4);
}
.acm-admin-check-label input:checked ~ .acm-admin-check-icon::after {
  border-right-color: #fff;
  border-bottom-color: #fff;
}
.acm-admin-check-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(168,85,247,0.85);
  line-height: 1.4;
}
.acm-admin-check-text i { margin-right: 4px; }
.acm-admin-check-text small {
  font-size: 0.62rem;
  font-weight: 400;
  color: var(--gray-500);
}
.acm-admin-check-label input:checked ~ .acm-admin-check-text {
  color: #d8b4fe;
}

/* =============================================
   カスタムタブUI（スタンプ/デコ ↔ 画像）
   ============================================= */
.acm-custom-section {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(168,85,247,0.18);
  border-radius: 10px;
  padding: 4px 12px 12px;
  margin-bottom: 16px;
}

/* タブバー */
.acm-tab-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 12px;
  padding-top: 4px;
}
.acm-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255,255,255,0.45);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 8px 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.acm-tab i { font-size: 0.75rem; }
.acm-tab:hover { color: rgba(255,255,255,0.7); }
.acm-tab.active {
  color: #d8b4fe;
  border-bottom-color: #a855f7;
}

/* タブパネル */
.acm-tab-panel {
  /* デコタブ（デフォルト表示）はブロック、画像タブはJSで制御 */
}

/* ---- 画像アップロードUI ---- */
.acm-img-upload-area {
  width: 100%;
}
.acm-img-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 90px;
  border: 2px dashed rgba(168,85,247,0.35);
  border-radius: 10px;
  background: rgba(168,85,247,0.04);
  color: rgba(255,255,255,0.4);
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.18s;
  box-sizing: border-box;
}
.acm-img-drop-zone:hover {
  border-color: #a855f7;
  background: rgba(168,85,247,0.1);
  color: rgba(255,255,255,0.7);
}
.acm-img-drop-zone i {
  font-size: 1.5rem;
  color: rgba(168,85,247,0.6);
}
.acm-img-drop-zone small {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.25);
}

/* プレビューラップ（画像選択後） */
.acm-img-preview-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
}
#acm-img-preview-thumb {
  width: 64px;
  height: 44px;
  object-fit: contain;
  border-radius: 6px;
  background: rgba(0,0,0,0.3);
}

/* 表示位置ラジオ */
.acm-image-pos-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.acm-img-pos-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  transition: all 0.15s;
  user-select: none;
}
.acm-img-pos-btn:has(input:checked) {
  border-color: #a855f7;
  background: rgba(168,85,247,0.18);
  color: #e9d5ff;
}
.acm-img-pos-btn input[type="radio"] { display: none; }

/* 画像削除ボタン */
.acm-image-clear-btn {
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.3);
  color: #fca5a5;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.acm-image-clear-btn:hover {
  background: rgba(239,68,68,0.28);
  border-color: #ef4444;
}

/* =============================================
   マイカード タップ可能ヒント
   ============================================= */
.ac-card--mine {
  cursor: pointer;
}
.ac-card--mine .ac-card-tap-hint {
  display: flex;
}
.ac-card-tap-hint {
  display: none;
  align-items: center;
  gap: 4px;
  font-size: 0.55rem;
  font-weight: 700;
  color: rgba(168,85,247,0.7);
  letter-spacing: 0.08em;
  margin-top: 6px;
}
.ac-card-tap-hint i { font-size: 0.58rem; }

/* =============================================
   ステータス ドロワー
   ============================================= */
.ac-status-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 8000;
  backdrop-filter: blur(2px);
}
.ac-status-overlay.open { display: block; }

.ac-status-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8100;
  background: #111118;
  border-top: 1px solid rgba(168,85,247,0.3);
  border-radius: 20px 20px 0 0;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
  will-change: transform;
}
.ac-status-drawer.open {
  transform: translateY(0);
}

/* ハンドル */
.ac-status-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: rgba(168,85,247,0.35);
  margin: 12px auto 0;
}

/* ヘッダー */
.ac-status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  gap: 12px;
}
.ac-status-card-mini {
  flex: 1;
}
.ac-status-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.18s;
}
.ac-status-close:hover {
  background: rgba(168,85,247,0.25);
  color: #fff;
}

/* ミニカード */
.ac-status-mini-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  width: fit-content;
}
.ac-status-mini-card .mini-role {
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 100px;
}
.ac-status-mini-card .mini-name {
  font-size: 0.95rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.04em;
}
.ac-status-mini-card .mini-pt {
  font-size: 0.62rem;
  font-weight: 700;
  color: #f59e0b;
  font-family: var(--font-en);
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: 100px;
  padding: 1px 8px;
}

/* ボディ */
.ac-status-body {
  padding: 16px 20px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ブロック共通 */
.ac-status-block {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 14px 16px;
}
.ac-status-block-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 10px;
}

/* 預かり金 */
.ac-status-deposit-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ac-status-deposit-val {
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: 900;
  color: #60a5fa;
  letter-spacing: 0.02em;
}
.ac-status-deposit-val.zero { color: rgba(255,255,255,0.25); }
.ac-status-deposit-sub {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.35);
}

/* 未払いリスト */
.ac-status-unpaid-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ac-status-unpaid-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  background: rgba(248,113,113,0.06);
  border: 1px solid rgba(248,113,113,0.18);
  border-radius: 8px;
  font-size: 0.78rem;
}
.ac-status-unpaid-month {
  font-weight: 700;
  color: rgba(255,255,255,0.75);
}
.ac-status-unpaid-amount {
  font-family: var(--font-en);
  font-weight: 900;
  color: #f87171;
}
.ac-status-all-paid {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #34d399;
  font-weight: 700;
  padding: 4px 0;
}

/* ベラポイ購入履歴 */
.ac-status-pt-total {
  margin-left: auto;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 700;
  color: #f59e0b;
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 100px;
  padding: 1px 9px;
}
.ac-status-purchase-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 200px;
  overflow-y: auto;
}
.ac-status-purchase-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(245,158,11,0.04);
  border: 1px solid rgba(245,158,11,0.12);
  border-radius: 8px;
  font-size: 0.73rem;
}
.ac-status-purchase-name {
  font-weight: 700;
  color: rgba(255,255,255,0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-status-purchase-pt {
  font-family: var(--font-en);
  font-weight: 900;
  color: #f59e0b;
  white-space: nowrap;
}
.ac-status-purchase-date {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
}

/* 空状態 */
.ac-status-empty {
  font-size: 0.73rem;
  color: rgba(255,255,255,0.25);
  text-align: center;
  padding: 8px 0;
}

/* ベラポイ受け取り履歴リスト */
.ac-status-earn-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}
.ac-status-earn-row {
  background: rgba(251,191,36,0.05);
  border: 1px solid rgba(251,191,36,0.15);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
/* 上段：イベント名＋ポイント */
.ac-earn-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ac-earn-event-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-earn-pts {
  font-family: var(--font-en);
  font-size: 0.88rem;
  font-weight: 900;
  color: #fbbf24;
  white-space: nowrap;
  flex-shrink: 0;
}
/* 下段：タイプバッジ＋備考＋日付 */
.ac-earn-row-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ac-earn-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ac-earn-type-badge.tournament {
  background: rgba(168,85,247,0.18);
  border: 1px solid rgba(168,85,247,0.35);
  color: #c4b5fd;
}
.ac-earn-type-badge.club_karaoke {
  background: rgba(236,72,153,0.18);
  border: 1px solid rgba(236,72,153,0.35);
  color: #fbcfe8;
}
.ac-earn-type-badge.club_running {
  background: rgba(34,197,94,0.18);
  border: 1px solid rgba(34,197,94,0.35);
  color: #bbf7d0;
}
.ac-earn-type-badge.club_mahjong {
  background: rgba(234,179,8,0.18);
  border: 1px solid rgba(234,179,8,0.35);
  color: #fef08a;
}
.ac-earn-type-badge.other {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.45);
}
.ac-earn-note {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.38);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-earn-date {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.28);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

/* =============================================
   スマホアイコン追加ブロック（トグル式）
   ============================================= */
.ac-status-install-block {
  background: linear-gradient(135deg, rgba(110,60,238,0.08), rgba(168,85,247,0.05));
  border: 1px solid rgba(168,85,247,0.22);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* タイトル行 */
.ac-install-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.ac-install-title-left {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 900;
  color: #e9d5ff;
}
.ac-install-title-sub {
  font-size: 0.6rem;
  color: rgba(200,170,255,0.45);
  white-space: nowrap;
}

/* OS トグルボタン */
.ac-install-toggle-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  background: rgba(168,85,247,0.08);
  border: 1px solid rgba(168,85,247,0.22);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  font-family: var(--font-body);
}
.ac-install-toggle-btn:hover {
  background: rgba(168,85,247,0.15);
  border-color: rgba(168,85,247,0.4);
}
.ac-install-toggle-btn.open {
  background: rgba(168,85,247,0.15);
  border-color: rgba(168,85,247,0.4);
  border-radius: 10px 10px 0 0;
  border-bottom: none;
}
.ac-install-toggle-btn.android {
  background: rgba(52,211,153,0.06);
  border-color: rgba(52,211,153,0.2);
}
.ac-install-toggle-btn.android:hover {
  background: rgba(52,211,153,0.12);
  border-color: rgba(52,211,153,0.38);
}
.ac-install-toggle-btn.android.open {
  background: rgba(52,211,153,0.12);
  border-color: rgba(52,211,153,0.38);
  border-radius: 10px 10px 0 0;
  border-bottom: none;
}
.ac-install-toggle-left {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #c4b5fd;
}
.ac-install-toggle-btn.android .ac-install-toggle-left { color: #6ee7b7; }

/* OS バッジ */
.ac-install-toggle-badge {
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 1px 7px;
  border-radius: 100px;
  background: rgba(168,85,247,0.2);
  border: 1px solid rgba(168,85,247,0.4);
  color: #c4b5fd;
}
.ac-install-toggle-badge.android {
  background: rgba(52,211,153,0.15);
  border-color: rgba(52,211,153,0.35);
  color: #6ee7b7;
}

/* トグルアイコン */
.ac-install-toggle-icon {
  font-size: 0.65rem;
  color: rgba(168,85,247,0.5);
  transition: transform 0.25s;
  flex-shrink: 0;
}
.ac-install-toggle-btn.android .ac-install-toggle-icon { color: rgba(52,211,153,0.5); }
.ac-install-toggle-btn.open .ac-install-toggle-icon { transform: rotate(180deg); }

/* 折りたたみコンテンツ */
.ac-install-collapse {
  display: none;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(168,85,247,0.22);
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 12px 12px 10px;
}
.ac-install-collapse.android-collapse {
  border-color: rgba(52,211,153,0.2);
}
.ac-install-collapse.open { display: block; }

/* ステップ一覧 */
.ac-install-steps-visual {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 8px;
}

/* ステップカード */
.ac-install-step-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 8px 10px;
}
.ac-install-step-card.ac-install-step-done {
  background: rgba(168,85,247,0.07);
  border-color: rgba(168,85,247,0.18);
}

/* ステップ番号丸 */
.ac-install-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(168,85,247,0.2);
  border: 1px solid rgba(168,85,247,0.4);
  color: #c4b5fd;
  font-size: 0.6rem;
  font-weight: 900;
  font-family: var(--font-en);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.ac-install-step-num.done {
  background: rgba(168,85,247,0.35);
  border-color: #a855f7;
  color: #fff;
}

/* ステップ詳細 */
.ac-install-step-detail {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.ac-install-step-main {
  font-size: 0.73rem;
  font-weight: 700;
  color: rgba(255,255,255,0.82);
  line-height: 1.45;
}
.ac-install-step-main strong { color: #e9d5ff; }
.ac-install-step-sub {
  font-size: 0.58rem;
  color: rgba(255,255,255,0.28);
  line-height: 1.4;
}

/* 共有アイコン インライン */
.ac-install-icon-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(168,85,247,0.5);
  border-radius: 3px;
  font-size: 0.62rem;
  color: #c4b5fd;
  font-weight: 900;
  vertical-align: middle;
  margin: 0 2px;
}

/* ステップ間矢印 */
.ac-install-step-arrow {
  display: flex;
  justify-content: center;
  color: rgba(168,85,247,0.25);
  font-size: 0.55rem;
  padding: 2px 0;
}

/* A2HS ネイティブボタン */
.ac-status-install-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #6e3cee, #a855f7);
  border: none;
  border-radius: 20px;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
  box-shadow: 0 3px 12px rgba(110,60,238,0.35);
  font-family: var(--font-body);
  margin-top: 6px;
}
.ac-status-install-btn:hover { opacity: 0.85; }

/* =============================================
   レスポンシブ
   ============================================= */
@media (max-width: 768px) {
  .ac-month-summary { grid-template-columns: 1fr 1fr; }
  .col-deposit, .col-extra { display: none; } /* スマホでは非表示 */
}
@media (max-width: 600px) {
  .ac-month-summary { grid-template-columns: 1fr 1fr; }
  .ac-card-grid:not(.ac-card-grid--mine) { grid-template-columns: 1fr 1fr; }
  .acm-box { padding: 20px 16px 18px; }
}
@media (max-width: 400px) {
  .ac-card-grid:not(.ac-card-grid--mine) { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   ダウンロードパネル
============================================================ */
.ac-dl-panel {
  margin: 0 0 64px;
  background: linear-gradient(135deg, #0f0c29 0%, #1a1060 60%, #24243e 100%);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: var(--radius, 14px);
  overflow: hidden;
}

.ac-dl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ac-dl-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ac-dl-title-wrap > .fas {
  font-size: 1.5rem;
  color: #a855f7;
  flex-shrink: 0;
}

.ac-dl-title {
  font-size: 1rem;
  font-weight: 700;
  color: #e2e8f0;
  margin: 0 0 2px;
}

.ac-dl-sub {
  font-size: 0.72rem;
  color: rgba(180, 150, 255, 0.75);
  margin: 0;
}

.ac-dl-body {
  padding: 22px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* 月バッジ */
.ac-dl-month-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.85rem;
  color: #c4b5fd;
  align-self: flex-start;
}

.ac-dl-month-badge .fas {
  color: #a855f7;
}

/* ボタン群 */
.ac-dl-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.ac-dl-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 28px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  min-width: 160px;
  text-align: center;
}

.ac-dl-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.ac-dl-btn:active:not(:disabled) {
  transform: translateY(0);
}

.ac-dl-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ac-dl-btn .fas {
  font-size: 1.5rem;
  margin-bottom: 2px;
}

.ac-dl-btn span {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
}

.ac-dl-btn small {
  font-size: 0.65rem;
  opacity: 0.8;
  line-height: 1;
}

/* PDFボタン */
.ac-dl-btn.pdf {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: #fff;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);
}

/* PNGボタン */
.ac-dl-btn.png {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

/* 注意書き */
.ac-dl-note {
  font-size: 0.7rem;
  color: rgba(156, 163, 175, 0.8);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.ac-dl-note .fas {
  color: #38bdf8;
  flex-shrink: 0;
}

/* レスポンシブ */
@media (max-width: 600px) {
  .ac-dl-header { padding: 16px 18px 14px; }
  .ac-dl-body   { padding: 16px 18px 22px; gap: 14px; }
  .ac-dl-btns   { flex-direction: column; }
  .ac-dl-btn    { min-width: unset; flex-direction: row; padding: 14px 20px; gap: 10px; }
  .ac-dl-btn .fas { font-size: 1.2rem; margin-bottom: 0; }
}

/* ---- メッセージ通知バナー ---- */
.ac-msg-banner {
  margin-bottom: 20px;
}
.ac-msg-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(168,85,247,0.1);
  border: 1px solid rgba(168,85,247,0.3);
  border-radius: 12px;
  padding: 14px 20px;
  flex-wrap: wrap;
}
.ac-msg-banner-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}
.ac-msg-banner-text {
  flex: 1;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.8);
}
.ac-msg-banner-text strong {
  color: #c084fc;
  font-size: 1rem;
}
.ac-msg-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.ac-msg-banner-btn:hover { opacity: 0.85; }

/* =============================================
   ビュー切り替えタブ（マイカード / 全員一覧）
   ============================================= */
.ac-view-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.ac-view-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 20px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  color: rgba(255,255,255,0.45);
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--font-body);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.12s;
  white-space: nowrap;
}
.ac-view-tab i {
  font-size: 0.8rem;
  opacity: 0.7;
}
.ac-view-tab:hover {
  background: rgba(168,85,247,0.08);
  border-color: rgba(168,85,247,0.35);
  color: rgba(255,255,255,0.75);
}
.ac-view-tab.active {
  background: rgba(168,85,247,0.16);
  border-color: rgba(168,85,247,0.6);
  color: #e9d5ff;
  box-shadow: 0 0 12px rgba(168,85,247,0.2);
}
.ac-view-tab.active i {
  opacity: 1;
  color: #c084fc;
}
.ac-view-tab:active {
  transform: scale(0.97);
}

/* アクティブユーザー名バッジ */
.ac-view-tab-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  background: rgba(168,85,247,0.1);
  border: 1px solid rgba(168,85,247,0.3);
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #c084fc;
  letter-spacing: 0.04em;
  margin-left: 4px;
  white-space: nowrap;
}
.ac-view-tab-badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a855f7;
  box-shadow: 0 0 6px rgba(168,85,247,0.7);
  flex-shrink: 0;
}

/* マイカードビュー時：自分の行をハイライト */
.ac-fee-row.row-my-card td {
  background: rgba(168,85,247,0.06) !important;
}
.ac-fee-row.row-my-card .ac-name-text {
  color: #e9d5ff;
}

/* マイカードビュー時：テーブルを少し大きく見せる */
.ac-view-mine .ac-table td {
  padding: 18px 16px;
}
.ac-view-mine .ac-name-text {
  font-size: 1rem;
}
.ac-view-mine .ac-money-big {
  font-size: 1.2rem;
}

@media (max-width: 480px) {
  .ac-view-tab {
    padding: 7px 14px;
    font-size: 0.72rem;
  }
  .ac-view-tab-badge {
    display: none; /* スマホでは名前バッジ非表示 */
  }
}

/* =============================================
   マイカードビュー：大カード表示
   ============================================= */

/* グリッド：mine モード時は1列（全幅） */
.ac-card-grid--mine {
  grid-template-columns: 1fr !important;
}

/* 大カード本体 */
.ac-card--big {
  min-height: 200px !important;
  padding: 28px 32px 24px !important;
  border-radius: 22px !important;
  box-shadow:
    0 0 0 2px #a855f7,
    0 16px 48px rgba(168,85,247,0.35),
    0 4px 16px rgba(0,0,0,0.5) !important;
}
.ac-card--big:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 0 0 2px #c084fc,
    0 20px 56px rgba(168,85,247,0.45),
    0 6px 20px rgba(0,0,0,0.55) !important;
}

/* 大カード：ロールバッジ・org テキスト */
.ac-card--big .ac-card-role-badge {
  font-size: 0.62rem !important;
  padding: 4px 14px !important;
}
.ac-card--big .ac-card-org {
  font-size: 0.62rem !important;
  letter-spacing: 0.18em !important;
}

/* 大カード：名前 */
.ac-card--big .ac-card-name {
  font-size: 1.8rem !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 8px !important;
  margin-top: 12px !important;
}

/* 大カード：ポイントチップ */
.ac-card--big .ac-card-point-chip {
  font-size: 0.82rem !important;
  padding: 5px 14px !important;
  border-radius: 100px !important;
  gap: 6px !important;
}

/* 大カード：タップヒント */
.ac-card--big .ac-card-tap-hint {
  font-size: 0.65rem !important;
  margin-top: 10px !important;
  gap: 5px !important;
  color: rgba(168,85,247,0.85) !important;
}

/* 大カード：スタンプ */
.ac-card--big .ac-card-stamp {
  font-size: 3.6rem !important;
  bottom: 16px !important;
  right: 22px !important;
}

/* 大カード：編集ボタン */
.ac-card--big .ac-card-edit-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  font-size: 0.82rem !important;
  top: 14px !important;
  right: 14px !important;
}

/* 大カード：追加バッジ群 */
.ac-card--big .ac-fc-extra-badge {
  font-size: 0.55rem !important;
  padding: 3px 10px !important;
}
.ac-card--big .ac-card-club-chief-badge {
  font-size: 0.55rem !important;
  padding: 3px 10px !important;
}

/* 大カード：画像背景の border-radius */
.ac-card--big .ac-card-img-bg {
  border-radius: 22px !important;
}

/* レスポンシブ：スマホでも大カードは全幅・縦に少し大きく */
@media (max-width: 600px) {
  .ac-card--big {
    min-height: 170px !important;
    padding: 22px 22px 18px !important;
    border-radius: 18px !important;
  }
  .ac-card--big .ac-card-name {
    font-size: 1.45rem !important;
  }
  .ac-card--big .ac-card-stamp {
    font-size: 2.8rem !important;
  }
}