.pack-page { background: #f1f4f1; }
.pack-hero { background: radial-gradient(circle at 82% 10%, rgba(214,154,53,.26), transparent 27%), radial-gradient(circle at 68% 80%, rgba(117,205,177,.17), transparent 32%), linear-gradient(135deg, #09241f, #164d40); }
.pack-hero h1 { color: #fffdf7; text-shadow: 0 2px 12px rgba(0,0,0,.18); }
.pack-large-mark { color: #6d4c17; background: var(--gold-pale); }
.pack-layout { grid-template-columns: 235px minmax(0,1fr); }
.pack-side-nav a { line-height: 1.25; }
.pack-facts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .7rem; }
.pack-facts article { padding: 1rem; border: 1px solid var(--line); border-radius: .85rem; background: #fbfcfb; }
.pack-facts small, .pack-facts strong { display: block; }
.pack-facts small { color: var(--muted); font-size: .62rem; font-weight: 800; }
.pack-facts strong { margin-top: .3rem; color: var(--forest-950); font-size: .86rem; }
.pack-privacy-note, .pack-readonly-note { display: flex; gap: .75rem; margin-top: 1rem; padding: 1rem; border-radius: .8rem; color: #46645a; background: var(--mint-pale); font-size: .72rem; line-height: 1.55; }
.pack-privacy-note > span:first-child, .pack-readonly-note > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 50%; color: var(--forest-800); background: white; font-weight: 900; }
.pack-readonly-note { color: #6e572f; background: #fff8ea; }
.pack-readonly-note > span:first-child { color: #805313; }
.pack-section-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.7rem 0 .8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.pack-section-title h3 { margin: .15rem 0 0; color: var(--forest-950); font: 500 1.35rem/1.2 Georgia,serif; }
.pack-member-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; }
.pack-member-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .75rem; padding: .9rem; border: 1px solid var(--line); border-radius: .8rem; background: #fbfcfb; }
.pack-member-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #466782; background: var(--blue-pale); font-size: .68rem; font-weight: 900; }
.pack-member-card strong, .pack-member-card small { display: block; }
.pack-member-card small { margin-top: .15rem; color: var(--muted); font-size: .62rem; }
.pack-member-role { padding: .3rem .48rem; border-radius: 999px; color: var(--forest-700); background: var(--mint-pale); font-size: .58rem; font-weight: 900; }
.pack-member-role.captain { color: #775118; background: var(--gold-pale); }
.pack-invitation-grid { margin-top: 0; }
.pack-captain-overview { margin-bottom: 1.4rem; }
.pack-transfer-response { margin: 1rem 0; padding: 1rem; border: 1px solid #b8dacb; border-radius: .8rem; background: #f1faf6; }
.pack-transfer-response > div { display: flex; justify-content: center; gap: .6rem; margin-top: .8rem; }
.pack-transfer-response button { width: auto; }
.pack-campaign-summary { display: grid; grid-template-columns: 1.2fr .8fr; gap: .75rem; margin-bottom: 1rem; }
.pack-campaign-summary article { padding: 1.1rem; border-radius: .9rem; color: white; background: linear-gradient(135deg,var(--forest-800),var(--forest-950)); }
.pack-campaign-summary article:last-child { color: #553c15; background: linear-gradient(135deg,#f8edda,#f3dba9); }
.pack-campaign-summary small, .pack-campaign-summary strong, .pack-campaign-summary span { display: block; }
.pack-campaign-summary small { opacity: .72; font-size: .62rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.pack-campaign-summary strong { margin-top: .35rem; font: 500 1.35rem/1.2 Georgia,serif; }
.pack-campaign-summary span { margin-top: .25rem; font-size: .68rem; opacity: .8; }
.pack-rule-grid { display: grid; gap: .8rem; }
.pack-rule-grid > section { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .9rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: .9rem; background: #fbfcfb; }
.pack-rule-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #805313; background: var(--gold-pale); font-weight: 900; }
.pack-rule-grid h3 { margin: .1rem 0 .3rem; color: var(--forest-950); }
.pack-rule-grid p { margin: 0 0 .8rem; color: var(--muted); font-size: .72rem; line-height: 1.55; }
.pack-rule-grid .field { margin-bottom: .65rem; }
.pack-rule-grid textarea { resize: vertical; }
.pack-rule-grid button { width: auto; }
#pack-rules-message { margin-top: 1rem; }
.primary-button, .secondary-button { text-decoration: none; }

@media (max-width: 900px) {
  .pack-layout { grid-template-columns: 1fr; }
  .pack-side-nav { grid-template-columns: repeat(4,minmax(145px,1fr)); overflow-x: auto; }
  .pack-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .pack-member-grid, .pack-campaign-summary, .invitation-share-grid { grid-template-columns: 1fr; }
  .pack-facts { grid-template-columns: 1fr 1fr; }
  .pack-rule-grid > section { grid-template-columns: 1fr; }
  .pack-rule-icon { width: 36px; height: 36px; }
  .pack-side-nav { grid-template-columns: repeat(4,minmax(170px,1fr)); }
  .invitation-share-card { grid-template-columns: auto 1fr; }
  .invitation-share-card button { grid-column: 1 / -1; width: 100%; }
  .invitation-link-card > div, .pack-transfer-response > div { align-items: stretch; flex-direction: column; }
}
@media (max-width: 480px) {
  .pack-facts { grid-template-columns: 1fr; }
  .pack-member-card { grid-template-columns: auto 1fr; }
  .pack-member-role { grid-column: 1 / -1; justify-self: start; }
}
.pack-faction-description { margin: .55rem 0 .7rem; padding: .7rem; border: 1px solid #dfe8e1; border-radius: .7rem; background: #f5f9f6; }
.pack-faction-description strong, .pack-faction-description span { display: block; }
.pack-faction-description strong { color: #173c32; font-size: .78rem; }
.pack-faction-description span { margin-top: .25rem; color: #64746c; font-size: .7rem; line-height: 1.5; }
.faction-permanent-warning { margin: .6rem 0 .8rem; padding: .8rem; border: 1px solid #e8c473; border-radius: .75rem; color: #684712; background: #fff7e2; }
.faction-permanent-warning strong, .faction-permanent-warning span { display: block; }
.faction-permanent-warning strong { font-size: .76rem; }
.faction-permanent-warning span { margin-top: .25rem; font-size: .69rem; line-height: 1.5; }
.faction-acknowledgement { display: flex; align-items: flex-start; gap: .55rem; margin: .75rem 0; color: #405b52; font-size: .7rem; line-height: 1.45; cursor: pointer; }
.faction-acknowledgement input { margin-top: .12rem; accent-color: var(--forest-800); }
.faction-confirm-dialog { width: min(500px,calc(100vw - 2rem)); padding: 0; border: 0; border-radius: 1.1rem; box-shadow: 0 24px 80px rgba(4,31,25,.3); }
.faction-confirm-dialog::backdrop { background: rgba(5,28,23,.62); backdrop-filter: blur(4px); }
.faction-confirm-dialog form { position: relative; padding: 2rem; text-align: center; }
.faction-confirm-dialog h2 { margin: .35rem 0 .6rem; color: var(--forest-950); font: 500 1.65rem/1.2 Georgia,serif; }
.faction-confirm-dialog p:not(.eyebrow) { color: var(--muted); font-size: .78rem; line-height: 1.6; }
.faction-confirm-mark { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto .9rem; border-radius: 50%; color: #805313; background: var(--gold-pale); font-size: 1.3rem; }
.faction-confirm-actions { display: flex; justify-content: center; gap: .7rem; margin-top: 1.3rem; }
.dialog-close { position: absolute; top: .7rem; right: .8rem; border: 0; color: #557067; background: transparent; font-size: 1.45rem; cursor: pointer; }