* { box-sizing: border-box; }
body { font-family: Segoe UI, Arial, sans-serif; margin: 0; background: #121318; color: #fff; }
main { max-width: 960px; margin: 20px auto; padding: 10px; }
h1 { text-align: center; margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.grid-wide { margin-top: 16px; }
.card { background: #1b1f2a; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.6); padding: 16px; }
h2 { margin-top: 0; }
input, select, button { width: 100%; margin: 5px 0; padding: 8px; border-radius: 6px; border: 1px solid #2c3244; color: #eee; background: #272d41; }
button { cursor: pointer; border-color: #505a79; }
button:hover { filter: brightness(1.05); }
.notice { min-height: 20px; }
#packResult, #userStorage, #decksArea { max-height: 260px; overflow: auto; background: #0f1220; border: 1px solid #2c3244; padding: 8px; border-radius: 6px; margin-top: 8px; }

.navbar { display: flex; justify-content: space-between; gap: 10px; background: #1e2540; padding: 10px; border-bottom: 1px solid #2c3244; }
.navbar a { color: #9ec5ff; text-decoration: none; margin-right: 12px; }
.navbar a:hover { text-decoration: underline; }
.navbar .nav-right { display: flex; align-items: center; gap: 10px; }
.navbar button { width: auto; padding: 6px 12px; }

.packs-layout { display: flex; gap: 16px; flex-wrap: wrap; }
.packs-sidebar { min-width: 220px; flex: 0 1 220px; }
.packs-main { flex: 1; }
.log-box { white-space: pre-wrap; height: 140px; overflow-y: auto; }
.storage-box { height: 160px; overflow: auto; }

.collection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.card-tile { background: #1c2132; border: 1px solid #2d3453; border-radius: 6px; padding: 10px; }
.card-tile.not-owned { opacity: 0.35; }

.deck-build-top { margin-bottom: 14px; }
.formation-control { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; align-items: center; }
.pitch { display: grid; grid-template-columns: repeat(11, minmax(70px, 1fr)); gap: 6px; background: linear-gradient(180deg, #1f334f, #12203a); border: 1px solid #2c3244; padding: 8px; border-radius: 6px; }
.pitch-slot { min-height: 60px; display: flex; align-items: center; justify-content: center; background: #1d2f4d; border: 1px solid #2f3f62; border-radius: 4px; cursor: pointer; color: #e3ebff; text-align: center; }
.placed-card { background: rgba(154, 227, 156, 0.15); border: 1px solid #8be28a; border-radius: 4px; padding: 4px; }
.deck-build-bottom { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.user-cards, .position-list { flex: 1 1 320px; background: #1a1e2c; padding: 10px; border-radius: 8px; }
.cards-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); gap: 6px; }
.card-select { background: #24335a; border: 1px solid #3b4f81; color: #edf1ff; border-radius: 5px; margin: 2px; padding: 6px; cursor: pointer; text-align: left; }
.card-select.selected { border-color: #93d07b; background: #3c5940; }
.position-slot { background: #0f1826; border: 1px solid #2c3b5d; margin: 4px 0; border-radius: 4px; padding: 4px; }
.slots-list { max-height: 220px; overflow-y: auto; }