/* Pickem (Project446) */
.pk-wrap { width: 100%; max-width: 1024px; margin: 0 auto; padding: 32px 16px 48px; box-sizing: border-box; }
.pk-head { margin-bottom: 24px; }
.pk-head h1 { display: flex; align-items: center; gap: 8px; margin: 0; color: #fff; font-size: 20px; font-weight: 700; line-height: 1.2; }
.pk-head h1 svg { width: 20px; height: 20px; flex: 0 0 auto; color: #a4c934; }
.pk-head p { margin: 4px 0 0; color: #8b929a; font-size: 14px; line-height: 1.5; }
.pk-list { display: grid; gap: 12px; }
.pk-card { display: block; overflow: hidden; border: 1px solid rgba(50,73,101,.6); border-radius: 8px; background: #171d25; color: inherit; text-decoration: none; transition: border-color .15s ease; }
.pk-card:hover { border-color: rgba(124,194,66,.6); }
.pk-card-thumb { position: relative; aspect-ratio: 16 / 7; background: linear-gradient(130deg,#12202e,#0d1116); }
.pk-card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pk-card-status { position: absolute; top: 8px; left: 8px; padding: 2px 6px; border-radius: 2px; background: rgba(0,0,0,.6); color: #7cc242; font-size: 9px; font-weight: 700; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; }
.pk-card-body { padding: 12px; }
.pk-card-title { margin: 0; overflow: hidden; color: #fff; font-size: 14px; font-weight: 700; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; transition: color .15s ease; }
.pk-card:hover .pk-card-title { color: #7cc242; }
.pk-card-date { margin: 2px 0 0; color: #67707b; font-size: 11px; line-height: 16px; }

.pk-loading { display: flex; min-height: 160px; align-items: center; justify-content: center; color: #7cc242; }
.pk-spinner { width: 24px; height: 24px; border: 2px solid rgba(124,194,66,.25); border-top-color: #7cc242; border-radius: 50%; animation: pk-spin .8s linear infinite; }
@keyframes pk-spin { to { transform: rotate(360deg); } }
.pk-empty { margin: 0; padding: 56px 24px; border: 1px dashed #35584a; border-radius: 8px; background: rgba(0,0,0,.1); color: #8b929a; font-size: 14px; line-height: 1.6; text-align: center; }
.pk-empty--detail { padding: 64px 24px; }
.pk-empty a { color: #7cc242; }

.pk-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; color: #8b929a; font-size: 12px; text-decoration: none; transition: color .15s ease; }
.pk-back:hover { color: #fff; }
.pk-back svg { width: 14px; height: 14px; }

.pk-banner { margin-bottom: 20px; overflow: hidden; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(124,194,66,.1); }
.pk-banner img { display: block; width: 100%; height: 112px; object-fit: cover; }
.pk-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.pk-title-row h1 { margin: 0; color: #fff; font-size: 20px; font-weight: 700; line-height: 28px; }
.pk-title-row p { margin: 2px 0 0; color: #67707b; font-size: 12px; letter-spacing: .05em; line-height: 16px; text-transform: uppercase; }
.pk-balance { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; background: #141d18; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.4; }
.pk-balance svg { width: 16px; height: 16px; color: #f0c45b; }
.pk-balance span { color: #67707b; font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }

.pk-warning { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 10px 12px; border: 1px solid rgba(240,196,91,.3); border-radius: 6px; background: rgba(240,196,91,.05); color: #f0c45b; font-size: 12px; line-height: 1.4; }
.pk-warning svg { width: 14px; height: 14px; flex: 0 0 auto; }

.pk-section { margin-bottom: 28px; }
.pk-section-title { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: #8b929a; font-size: 11px; font-weight: 700; letter-spacing: .05em; line-height: 16.5px; text-transform: uppercase; }
.pk-section-title svg { width: 14px; height: 14px; flex: 0 0 auto; color: #f0c45b; }
.pk-note { margin: 0 0 8px; padding: 8px 12px; border: 1px solid rgba(240,196,91,.3); border-radius: 6px; background: rgba(240,196,91,.06); color: #f0c45b; font-size: 11px; line-height: 1.45; }
.pk-mybet { margin: 0 0 8px; padding: 8px 12px; border: 1px solid rgba(124,194,66,.3); border-radius: 8px; background: rgba(124,194,66,.06); color: #cfd3d8; font-size: 11px; line-height: 1.5; }
.pk-mybet b { color: #fff; font-weight: 600; }
.pk-mono { color: #a4c934; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.pk-settle { margin-left: 4px; font-weight: 600; }
.pk-settle--won { color: #a4c934; }
.pk-settle--lost { color: #de6b55; }
.pk-settle--refunded { color: #8b929a; }

.pk-champion-grid { display: grid; gap: 8px; }
.pk-choice { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #35584a; border-radius: 8px; background: rgba(0,0,0,.2); color: #cfd3d8; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.pk-choice:hover:not(:disabled) { border-color: #7cc242; background: rgba(124,194,66,.08); }
.pk-choice.is-selected { border-color: rgba(164,201,52,.6); }
.pk-choice:disabled { opacity: .5; cursor: not-allowed; }
.pk-choice-logo { display: flex; width: 24px; height: 24px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 6px; background: rgba(124,194,66,.1); color: #7cc242; font-size: 10px; font-weight: 900; object-fit: cover; }
.pk-choice-name { min-width: 0; flex: 1; overflow: hidden; color: #cfd3d8; font-size: 11px; font-weight: 500; line-height: 16.5px; text-overflow: ellipsis; white-space: nowrap; }
.pk-odds { flex: 0 0 auto; padding: 2px 6px; border-radius: 4px; background: rgba(124,194,66,.1); color: #a4c934; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; line-height: 1.4; }

.pk-rounds { display: grid; gap: 24px; }
.pk-round-title { margin: 0 0 8px; color: #8b929a; font-size: 11px; font-weight: 700; letter-spacing: .05em; line-height: 16.5px; text-transform: uppercase; }
.pk-match-grid { display: grid; gap: 12px; }
.pk-match { overflow: hidden; border: 1px solid #203028; border-radius: 12px; background: linear-gradient(to bottom,#1b2230,#161b25); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.pk-match-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; border-bottom: 1px solid rgba(124,194,66,.08); }
.pk-bo { padding: 2px 6px; border-radius: 4px; background: rgba(124,194,66,.1); color: #8b929a; font-size: 9px; font-weight: 700; letter-spacing: .05em; line-height: 13.5px; text-transform: uppercase; }
.pk-match-tag { color: #67707b; font-size: 9px; font-weight: 600; letter-spacing: .05em; line-height: 13.5px; text-transform: uppercase; }
.pk-match-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 12px 12px 0; }
.pk-team { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.pk-team-logo { display: flex; width: 44px; height: 44px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 8px; background: rgba(124,194,66,.1); color: #7cc242; font-size: 17.6px; font-weight: 900; object-fit: cover; }
.pk-team-name { width: 100%; overflow: hidden; color: #fff; font-size: 12px; font-weight: 700; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.pk-team-name.is-winner { color: #a4c934; }
.pk-team-pct { color: #67707b; font-size: 10px; font-weight: 600; line-height: 15px; }
.pk-score { display: flex; align-items: center; justify-content: center; color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 28px; }
.pk-score em { margin: 0 4px; color: #4e6b58; font-style: normal; }
.pk-bar { display: flex; height: 6px; margin: 12px 12px 0; overflow: hidden; border-radius: 999px; background: #203028; }
.pk-bar i { display: block; height: 100%; }
.pk-bar-a { background: #7cc242; }
.pk-bar-b { background: #8b5cf6; }
.pk-match-body { padding: 12px; }
.pk-bet-question { margin: 0 0 8px; color: #8b929a; font-size: 9px; font-weight: 700; letter-spacing: .05em; line-height: 13.5px; text-align: center; text-transform: uppercase; }
.pk-bet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pk-pick { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid #35584a; border-radius: 8px; background: rgba(0,0,0,.2); color: #cfd3d8; font: inherit; font-size: 11px; font-weight: 500; line-height: 16.5px; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.pk-pick:hover:not(:disabled) { border-color: #7cc242; background: rgba(124,194,66,.08); }
.pk-pick:disabled { opacity: .4; cursor: not-allowed; }
.pk-pick span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-score-toggle { display: block; width: 100%; margin-top: 8px; padding: 0; border: 0; background: none; color: #7cc242; font: inherit; font-size: 9px; font-weight: 700; letter-spacing: .05em; line-height: 1.4; text-align: center; text-transform: uppercase; cursor: pointer; }
.pk-score-toggle:hover { text-decoration: underline; }
.pk-score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.pk-status { margin: 0; color: #67707b; font-size: 10px; font-weight: 600; letter-spacing: .05em; line-height: 15px; text-align: center; text-transform: uppercase; }
.pk-status--you { color: #f0c45b; }

.pk-modal { position: fixed; z-index: 1100; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; background: rgba(0,0,0,.7); }
.pk-modal[hidden] { display: none; }
.pk-modal-card { width: 100%; max-width: 384px; margin: auto; padding: 20px; border-radius: 16px; background: #141d18; box-shadow: inset 0 0 0 1px rgba(124,194,66,.16), 0 24px 80px rgba(0,0,0,.6); }
.pk-modal-card h3 { margin: 0; color: #fff; font-size: 14px; font-weight: 700; line-height: 20px; }
.pk-modal-sub { margin: 4px 0 0; color: #8b929a; font-size: 12px; line-height: 16px; }
.pk-modal-sub span { color: #a4c934; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; }
.pk-field-label { display: block; margin-top: 16px; color: #8b929a; font-size: 11px; letter-spacing: .05em; line-height: 1.3; text-transform: uppercase; }
.pk-input { display: block; width: 100%; height: 38px; margin-top: 4px; padding: 0 10px; border: 0; border-radius: 6px; background: #0b100c; box-shadow: inset 0 0 0 1px rgba(124,194,66,.16); color: #fff; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; outline: none; box-sizing: border-box; }
.pk-input:focus { box-shadow: inset 0 0 0 1px rgba(124,194,66,.7); }
.pk-limits { margin: 4px 0 0; color: #67707b; font-size: 11px; line-height: 1.4; }
.pk-potential { display: flex; align-items: center; gap: 4px; margin: 8px 0 0; color: #8b929a; font-size: 12px; line-height: 1.4; }
.pk-potential b { color: #fff; font-weight: 600; }
.pk-modal-error { margin: 8px 0 0; padding: 6px 8px; border-radius: 4px; background: rgba(235,75,75,.12); color: #ff9b9b; font-size: 11px; line-height: 1.4; }
.pk-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.pk-btn { min-height: 34px; padding: 0 14px; border: 0; border-radius: 6px; background: rgba(124,194,66,.1); color: #cfd3d8; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .15s ease, color .15s ease; }
.pk-btn:hover { background: rgba(124,194,66,.2); color: #fff; }
.pk-btn--primary { background: #3d9c4a; color: #fff; }
.pk-btn--primary:hover { background: #46b356; color: #fff; }
.pk-btn:disabled { opacity: .5; cursor: not-allowed; }

@media (min-width: 640px) {
  .pk-wrap { padding: 48px 16px; }
  .pk-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pk-champion-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pk-match-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pk-banner img { height: 160px; }
}
@media (min-width: 1024px) {
  .pk-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .pk-champion-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .pk-match-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 639px) {
  .pk-wrap { padding: 32px 16px; }
}

body[data-page="pickem"] { background: #0b100c; }