/* Cup Day – royal blue and silverware gold */
.cd-root, .cd-say, .cd-pic, .cd-stats { --b: #2346d6; --b2: #1a36a8; --n: #0f1a33; --g: #f2b705; --g2: #d99e00; --line: #dde3f0; --soft: #eef2fb; --mute: #5b6680; --ok: #16a34a; }
.cd-root { color: var(--n); font-size: 15px; line-height: 1.45; margin: 18px 0; box-sizing: border-box; }
.cd-root *, .cd-root *::before, .cd-root *::after { box-sizing: border-box; }
.cd-root button, .cd-root input, .cd-root select { font: inherit; color: inherit; }
.cd-root button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cd-root button:disabled { cursor: default; opacity: .55; }
.cd-h { margin: 18px 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); display: flex; gap: 8px; align-items: center; }
.cd-h span { background: var(--b); color: #fff; border-radius: 999px; padding: 0 8px; font-size: 12px; }
.cd-note { font-size: 13px; color: var(--mute); margin: 8px 0; }
.cd-empty { text-align: center; color: var(--mute); padding: 18px; border: 2px dashed var(--line); border-radius: 18px; }
.cd-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.cd-row > .cd-btn { flex: 1 1 130px; }
.cd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 10px 16px; border: 0; border-radius: 14px; background: var(--b); color: #fff !important; font-weight: 700; text-decoration: none !important; text-align: center; transition: background .15s, transform .08s; }
.cd-btn:hover { background: var(--b2); }
.cd-btn:active { transform: translateY(1px); }
.cd-btn--gold { background: var(--g); color: var(--n) !important; }
.cd-btn--gold:hover { background: var(--g2); }
.cd-btn--ghost { background: #fff; color: var(--n) !important; box-shadow: inset 0 0 0 1.5px var(--line); }
.cd-btn--ghost:hover { background: var(--soft); }
.cd-btn--big { width: 100%; min-height: 54px; font-size: 17px; margin-top: 12px; }
.cd-seg { display: flex; gap: 4px; background: #e3e8f4; border-radius: 14px; padding: 4px; margin-bottom: 10px; }
.cd-seg button { flex: 1; border: 0; background: none; border-radius: 10px; padding: 9px 6px; font-size: 13px; font-weight: 700; color: var(--mute); }
.cd-seg button.on { background: #fff; color: var(--b); box-shadow: 0 1px 4px rgba(15, 26, 51, .12); }
.cd-field { display: block; font-size: 12px; font-weight: 700; color: var(--mute); margin: 8px 0; }
.cd-field input, .cd-field select { display: block; width: 100%; margin-top: 4px; min-height: 44px; border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 10px; background: #fff; color: var(--n); font-size: 16px; font-weight: 400; }
.cd-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin: 10px 0; }
.cd-check input { width: 20px; height: 20px; flex: none; accent-color: var(--b); margin: 1px 0 0; }
.cd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.cd-three { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 0 8px; }
.cd-bar { display: block; height: 6px; background: #e3e8f4; border-radius: 3px; overflow: hidden; }
.cd-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--b), var(--g)); }
.cd-team { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; }
.cd-team i { flex: none; width: 12px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.cd-team--tbc { color: var(--mute); font-weight: 400; font-style: italic; font-size: 13px; }
.cd-tip { background: var(--soft); border-left: 4px solid var(--g); border-radius: 0 12px 12px 0; padding: 10px 12px; font-size: 14px; margin: 12px 0; }

/* list of cups */
.cd-hero { background: var(--n) linear-gradient(135deg, #1b2c6b, var(--n)); color: #fff; border-radius: 22px; padding: 18px; }
.cd-hero b { font-size: 22px; display: block; }
.cd-hero p { margin: 6px 0 12px; opacity: .85; font-size: 14px; }
.cd-hero .cd-btn { width: 100%; }
.cd-cups { display: grid; gap: 10px; margin: 14px 0; }
.cd-cupcard { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.cd-cupcard__open { display: grid; gap: 4px; width: 100%; padding: 14px 80px 14px 14px; border: 0; background: none; text-align: left; }
.cd-cupcard__open b { font-size: 17px; }
.cd-cupcard__open small { color: var(--mute); font-size: 12px; }
.cd-cupcard__more { position: absolute; right: 8px; top: 8px; display: flex; gap: 4px; }
.cd-cupcard__more button { width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--soft); }
.cd-backup { display: flex; gap: 8px; flex-wrap: wrap; }
.cd-backup .cd-btn { flex: 1 1 140px; font-size: 14px; }

/* wizard */
.cd-back { border: 0; background: none; color: var(--b); font-weight: 700; padding: 6px 0; margin-bottom: 4px; }
.cd-formats { display: grid; gap: 8px; }
.cd-formats button { text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 16px; padding: 10px 12px; }
.cd-formats button b { display: block; }
.cd-formats button small { color: var(--mute); font-size: 12px; }
.cd-formats button.on { border-color: var(--b); box-shadow: 0 0 0 3px rgba(35, 70, 214, .15); }
.cd-formats button.on b::after { content: ' ✔'; color: var(--b); }
.cd-teams { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: t; }
.cd-teams li { display: grid; grid-template-columns: 36px 1fr 36px; gap: 6px; align-items: center; }
.cd-teams input { min-width: 0; min-height: 42px; border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 10px; background: #fff; font-size: 16px; }
.cd-dot { width: 36px; height: 36px; border-radius: 10px; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--line); }
.cd-x { width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--soft); color: var(--mute); }
.cd-more { margin: 10px 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 4px 12px; }
.cd-more summary { font-weight: 700; padding: 10px 0; cursor: pointer; }
.cd-estimate { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; background: var(--n); color: #fff; border-radius: 18px; padding: 12px 6px; text-align: center; }
.cd-estimate b { display: block; font-size: 20px; color: var(--g); }
.cd-estimate span { font-size: 11px; opacity: .8; }

/* inside a cup */
.cd-top h3 { margin: 2px 0 6px; font-size: 24px; }
.cd-progress small { display: block; color: var(--mute); font-size: 12px; margin-top: 4px; }
.cd-tabs { display: flex; gap: 2px; margin: 14px 0 12px; border-bottom: 2px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.cd-tabs::-webkit-scrollbar { display: none; }
.cd-tabs button { flex: 1 0 auto; border: 0; background: none; padding: 10px 8px; font-weight: 700; color: var(--mute); border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.cd-tabs button.on { color: var(--b); border-color: var(--g); }
.cd-slot { margin: 14px 0 6px; font-size: 13px; color: var(--b); letter-spacing: .05em; }
.cd-slot::before { content: '⏱ '; }
.cd-matches { display: grid; gap: 6px; }
.cd-match { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.cd-match.is-done { border-left: 4px solid var(--ok); }
.cd-match.is-open { box-shadow: 0 6px 20px rgba(15, 26, 51, .12); border-color: var(--b); }
.cd-match__head { display: block; width: 100%; border: 0; background: none; text-align: left; padding: 8px 10px 10px; }
.cd-match__head:disabled { opacity: 1; }
.cd-match__meta { display: block; font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: .05em; }
.cd-match__line { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; margin-top: 4px; }
.cd-match__line > span { min-width: 0; overflow: hidden; }
.cd-match__line > span .cd-team { max-width: 100%; }
.cd-match__line > span.r { display: flex; justify-content: flex-end; text-align: right; }
.cd-match__line > span.r .cd-team { flex-direction: row-reverse; }
.cd-match__line .w .cd-team { color: var(--b); }
.cd-score { font-size: 20px; padding: 2px 10px; background: var(--n); color: #fff; border-radius: 10px; white-space: nowrap; }
.cd-score i { font-style: normal; opacity: .6; padding: 0 3px; }
.cd-pens { grid-column: 2; font-size: 11px; color: var(--mute); text-align: center; }
.cd-vs { font-size: 12px; color: var(--mute); padding: 0 8px; }
.cd-edit { border-top: 1px solid var(--line); padding: 10px; background: var(--soft); }
.cd-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: center; }
.cd-steps small { display: block; font-weight: 700; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-step { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; background: #fff; border-radius: 14px; padding: 4px; margin-top: 4px; box-shadow: inset 0 0 0 1.5px var(--line); }
.cd-step button { height: 44px; border: 0; border-radius: 10px; background: var(--b); color: #fff; font-size: 22px; font-weight: 700; }
.cd-step button:first-child { background: #c9d3ec; color: var(--n); }
.cd-step output { font-size: 30px; font-weight: 800; }
.cd-pensbox { margin-top: 10px; }
.cd-pensbox small { display: block; font-weight: 700; color: var(--b2); margin-bottom: 4px; }
.cd-pensbox input { width: 100%; min-height: 44px; border: 1.5px solid var(--line); border-radius: 12px; padding: 8px; font-size: 16px; }

.cd-group { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 10px; margin-bottom: 10px; }
.cd-group header { display: flex; justify-content: space-between; padding: 2px 4px 6px; }
.cd-ok { color: var(--ok); font-size: 12px; font-weight: 700; }
.cd-tablewrap { overflow-x: auto; }
.cd-root .cd-table { display: table; width: 100%; min-width: 0; border-collapse: collapse; font-size: 13px; box-shadow: none; border-radius: 0; margin: 0; background: transparent; table-layout: auto; }
.cd-root .cd-table thead { display: table-header-group; }
.cd-root .cd-table tbody { display: table-row-group; }
.cd-root .cd-table tr { display: table-row; min-height: 0; outline: 0; background: none; }
.cd-root .cd-table th, .cd-root .cd-table td { display: table-cell; width: auto; min-height: 0; padding: 7px 4px; text-align: center; border-bottom: 1px solid #edf0f7; color: var(--n); vertical-align: middle; }
.cd-root .cd-table th { font-size: 11px; color: var(--mute); text-transform: uppercase; }
.cd-root .cd-table .l { text-align: left; }
.cd-root .cd-table tr.up td { background: #eaf0ff; }
.cd-root .cd-table tr.up td:first-child { box-shadow: inset 3px 0 0 var(--b); }
.cd-table sup { font-size: 9px; color: var(--b); margin-left: 3px; }
.cd-form { display: inline-flex; gap: 2px; margin-left: 6px; vertical-align: middle; }
.cd-form i { font-style: normal; font-size: 9px; font-weight: 800; width: 14px; height: 14px; line-height: 14px; border-radius: 4px; color: #fff; text-align: center; }
.cd-form .fW { background: var(--ok); } .cd-form .fD { background: #94a3b8; } .cd-form .fL { background: #dc2626; }

.cd-bracket { display: grid; grid-template-columns: repeat(var(--rounds), minmax(170px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.cd-round { scroll-snap-align: start; display: flex; flex-direction: column; }
.cd-round h5 { margin: 0 0 8px; font-size: 12px; color: var(--b); text-transform: uppercase; letter-spacing: .06em; }
.cd-round__list { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 8px; }
.cd-box { display: grid; gap: 2px; width: 100%; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 6px 8px; position: relative; }
.cd-box:disabled { opacity: 1; }
.cd-box > span { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; min-width: 0; }
.cd-box > span .cd-team { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cd-box > span.w .cd-team { color: var(--b); }
.cd-box > span.w b { color: var(--b); }
.cd-box small { font-size: 10px; color: var(--mute); }
.cd-box.is-done { border-color: #b9c7f2; }
.cd-box.is-bye { opacity: .6; border-style: dashed; }

.cd-champ { text-align: center; background: var(--n) radial-gradient(circle at 50% 0, #2c4cc9, var(--n) 70%); color: #fff; border-radius: 22px; padding: 18px; }
.cd-champ small { color: var(--g); text-transform: uppercase; letter-spacing: .12em; font-weight: 800; font-size: 12px; }
.cd-champ b { display: block; font-size: 30px; line-height: 1.15; margin: 4px 0; }
.cd-champ p { margin: 0; opacity: .8; font-size: 14px; }
.cd-champ--wait { background: #fff; color: var(--n); border: 2px dashed var(--line); }
.cd-champ--wait small { color: var(--b); }
.cd-card { display: block; width: 100%; height: auto; border-radius: 18px; margin-top: 12px; box-shadow: 0 10px 30px rgba(15, 26, 51, .25); }
.cd-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.cd-facts li { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }

/* home draw machine */
.cd-draw { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 14px; box-shadow: 0 8px 24px rgba(15, 26, 51, .08); }
.cd-draw > small { display: block; color: var(--b); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cd-draw > b { display: block; font-size: 22px; margin-bottom: 10px; }
.cd-names { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cd-names input { min-width: 0; min-height: 40px; border: 1.5px solid var(--line); border-radius: 10px; padding: 6px 8px; font-size: 14px; background: var(--soft); }
.cd-drawout:empty { display: none; }
.cd-drawout { margin-top: 4px; }
.cd-pairs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cd-pairs li { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; background: var(--n); color: #fff; border-radius: 12px; padding: 8px 10px; font-weight: 700; font-size: 14px; }
.cd-pairs li span:last-child { text-align: right; }
.cd-pairs i { font-style: normal; color: var(--g); font-size: 12px; }
.cd-mini { background: var(--n); color: #fff; border-radius: 14px; padding: 10px; display: grid; gap: 4px; }
.cd-mini b { color: var(--g); }
.cd-mini span { background: rgba(255, 255, 255, .08); border-radius: 8px; padding: 6px 8px; font-size: 14px; }
.pop { animation: cd-pop .4s backwards cubic-bezier(.2, .9, .3, 1.3); }
@keyframes cd-pop { from { opacity: 0; transform: scale(.6) translateY(10px); } }

/* tools */
.cd-tool { background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 8px 24px rgba(15, 26, 51, .08); }
.cd-tool__h { display: flex; gap: 8px; align-items: center; padding: 12px 16px; background: var(--n); color: #fff; font-weight: 800; font-size: 17px; border-bottom: 4px solid var(--g); }
.cd-tool__body { padding: 12px 16px 2px; }
.cd-tool__go { display: block; padding: 4px 16px 16px; font-weight: 700; color: var(--b) !important; }
.cd-fmt { display: grid; gap: 6px; margin-top: 8px; }
.cd-fmt div { border: 1.5px solid var(--line); border-radius: 14px; padding: 8px 12px; display: grid; }
.cd-fmt div.best { border-color: var(--g); background: #fff8df; }
.cd-fmt div.best b::after { content: ' ★ best fit'; color: var(--g2); font-size: 12px; }
.cd-fmt div.no { opacity: .5; }
.cd-fmt span { font-size: 14px; }
.cd-fmt small { font-size: 12px; color: var(--mute); }
.cd-games { display: grid; gap: 6px; margin-bottom: 10px; }
.cd-games div { display: grid; grid-template-columns: 1fr 48px auto 48px 1fr; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; }
.cd-games div span:last-child { text-align: right; }
.cd-games input { width: 48px; min-height: 40px; text-align: center; border: 1.5px solid var(--line); border-radius: 10px; font-size: 16px; padding: 4px; }
.cd-games i { font-style: normal; color: var(--mute); }
.cd-why { font-size: 14px; padding-left: 18px; }
.cd-pots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cd-pots div { background: var(--soft); border-radius: 14px; padding: 8px; display: grid; gap: 4px; }
.cd-pots b { font-size: 12px; color: var(--b); }
.cd-pots input { min-width: 0; min-height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; font-size: 14px; background: #fff; }
.cd-timeline { list-style: none; margin: 8px 0; padding: 0 0 0 14px; border-left: 3px solid var(--line); display: grid; gap: 6px; font-size: 14px; }
.cd-timeline li { position: relative; }
.cd-timeline li::before { content: ''; position: absolute; left: -21px; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--b); }
.cd-timeline li.k::before { background: var(--g); }
.cd-timeline li.l::before { background: var(--ok); }
.cd-timeline b { display: inline-block; min-width: 50px; color: var(--b); }
.cd-shoot { display: grid; gap: 8px; }
.cd-shoot > div { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 6px 10px; align-items: center; background: var(--soft); border-radius: 16px; padding: 10px; }
.cd-shoot > div.win { background: #fff3c4; box-shadow: inset 0 0 0 2px var(--g); }
.cd-shoot input { min-width: 0; border: 0; background: none; font-weight: 800; font-size: 16px; padding: 0; }
.cd-shoot b { grid-row: span 2; font-size: 34px; }
.cd-kicks { display: flex; flex-wrap: wrap; gap: 5px; }
.cd-kicks i { width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #c9d3ec; }
.cd-kicks i.in { background: var(--ok); box-shadow: none; }
.cd-kicks i.out { background: #dc2626; box-shadow: none; }
.cd-mini-step { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.cd-mini-step button { width: 22px; height: 26px; border: 0; border-radius: 8px; background: var(--soft); font-weight: 800; padding: 0; }

/* content */
.cd-pic { margin: 18px 0; }
.cd-pic img { display: block; width: 100%; height: auto; border-radius: 20px; }
.cd-pic figcaption { text-align: center; font-size: 13px; color: var(--mute); margin-top: 6px; }
.cd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.cd-stats div { background: var(--n); color: #fff; border-radius: 16px; padding: 12px; }
.cd-stats b { display: block; font-size: 24px; color: var(--g); }
.cd-stats span { font-size: 12px; opacity: .8; }
.cd-say { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 14px); background: var(--n); color: #fff; padding: 10px 16px; border-radius: 14px; font-weight: 700; font-size: 14px; opacity: 0; pointer-events: none; transition: .2s; z-index: 9999; max-width: calc(100% - 32px); text-align: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.cd-say.on { opacity: 1; transform: translate(-50%, 0); }
.entry-content table.cd-plain, table.cd-plain { display: table; width: 100%; min-width: 0; border-collapse: collapse; font-size: 14px; box-shadow: none; }
table.cd-plain tr { display: table-row; background: none; outline: 0; min-height: 0; }
table.cd-plain td, table.cd-plain th { display: table-cell; width: auto; padding: 7px 6px; border-bottom: 1px solid #dde3f0; text-align: left; vertical-align: top; }
@media (min-width: 720px) {
  .cd-stats { grid-template-columns: repeat(4, 1fr); }
  .cd-formats { grid-template-columns: repeat(3, 1fr); }
}