:root { font-family: 'Segoe UI', Arial, sans-serif; color: #e9edef; background: #101415; color-scheme: dark; --muted: #879596; --green: #c5f67b; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font-family: inherit; font-size: 13px; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { opacity: .38; cursor: default; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
input, select { width: 100%; padding: 11px 12px; border: 1px solid #34403f; border-radius: 7px; background: #1a2223; color: #edf1ef; outline: none; }
input:focus, select:focus { border-color: var(--green); }
input[type=number] { appearance: textfield; }
h1,h2,h3,p { margin-top: 0; }
h1 { font-size: 25px; font-weight: 700; margin-bottom: 7px; letter-spacing: -.9px; }
h2 { font-size: 23px; font-weight: 600; margin: 7px 0 0; letter-spacing: -.6px; }
h3 { font-size: 14px; font-weight: 700; margin: 0; }
.header { display: flex; height: 78px; padding: 0 38px; align-items: center; justify-content: space-between; border-bottom: 1px solid #293131; }
.header__brand { font-size: 27px; font-weight: 800; display: flex; align-items: center; color: var(--green); text-decoration: none; }
.header__brand>span { font-size: 17px; margin-left: 12px; color: #f0f4ef; letter-spacing: 1px; }
.header__light { font-weight: 400; color: var(--muted); }
.header__badge { font-size: 10px; font-weight: 700; padding: 8px 12px; border: 1px solid #344137; border-radius: 30px; color: var(--green); letter-spacing: 1px; }
.app { display: flex; max-width: 1920px; margin: 0 auto; align-items: stretch; }
.settings { width: 260px; padding: 28px 20px; flex-shrink: 0; border-right: 1px solid #293131; }
.eyebrow { font-size: 9px; font-weight: 700; color: var(--muted); letter-spacing: 1.8px; }
.settings>.eyebrow { margin-bottom: 15px; color: var(--green); }
.muted { font-size: 12px; color: var(--muted); line-height: 1.8; }
.field { font-size: 11px; font-weight: 600; display: block; margin: 16px 0 0; color: #b5c0bf; }
.field input,.field select { display: block; margin-top: 7px; }
.fields { display: flex; margin: 0 -6px; }
.fields>.field { width: 50%; padding: 0 6px; }
.settings__divider { height: 1px; margin: 23px 0 20px; background: #2b3434; }
.settings__start { width: 100%; margin-top: 24px; justify-content: space-between; }
.settings__note { font-size: 10px; margin: 15px 0 0; color: #7c8988; line-height: 1.8; }
.workspace { width: calc(100% - 260px); padding: 28px 24px; }
.workspace__heading { display: flex; margin-bottom: 25px; align-items: center; justify-content: space-between; }
.button { font-size: 12px; font-weight: 700; display: inline-flex; min-height: 41px; padding: 11px 18px; align-items: center; justify-content: center; border: 1px solid #3a4645; border-radius: 7px; background: #222d2d; color: #e4eae6; transition: background .15s, transform .15s; }
.button:hover:enabled { background: #344240; }
.button:active:enabled { transform: translateY(1px); }
.button--primary { border-color: var(--green); background: var(--green); color: #1e2d17; }
.button--primary:hover:enabled { background: #d7ffa1; }
.button--small { min-height: 35px; padding: 8px 12px; background: transparent; }
.button--call { border-color: #577c6a; background: #2a473c; color: #c4e8ce; }
.table-panel { padding: 19px 24px 16px; border: 1px solid #303b3a; border-radius: 14px; background: radial-gradient(ellipse at center, #253630 0%, #1a2423 68%); }
.table-panel__top,.table-panel__bottom { font-size: 10px; display: flex; align-items: center; justify-content: space-between; color: #a8b6b0; }
.table-panel__bottom { min-height: 28px; margin-top: 8px; }
.pill { font-size: 8px; font-weight: 700; padding: 5px 8px; border: 1px solid #4b5d53; border-radius: 4px; color: #b6c9bc; letter-spacing: 1px; white-space: nowrap; }
.pill--amber { border-color: #5b4c31; color: #dbbf7a; }
.poker-table { height: 400px; max-width: 850px; margin: 18px auto 8px; position: relative; }
.poker-table::before { position: absolute; inset: 42px 24px 47px; border: 13px solid #3b4841; border-radius: 47%; background: radial-gradient(ellipse at center, #28664f, #1d4d3e 85%); box-shadow: 0 0 0 2px #4b5850, 0 18px 28px #0005, inset 0 0 0 2px #74928140, inset 0 0 50px #0b3228; content: ''; }
.poker-table::after { position: absolute; inset: 66px 49px 71px; border: 1px solid #a0c4a72b; border-radius: 47%; pointer-events: none; content: ''; }
.poker-table__mark { font-size: 9px; font-weight: 800; position: absolute; top: 86px; left: 0; right: 0; color: #a1c7b045; text-align: center; letter-spacing: 4px; }
.poker-table__center { position: absolute; top: 111px; left: 50%; z-index: 1; transform: translateX(-50%); text-align: center; }
.poker-table__center>.eyebrow { color: #a5c9b4; }
.poker-table__pot { font-size: 28px; font-weight: 800; margin: 4px 0 8px; color: #eff6e8; }
.poker-table__pot small { font-size: 10px; font-weight: 500; color: #a4c4b2; }
.poker-table__hint { font-size: 8px; margin-top: 9px; color: #92b7a3; white-space: nowrap; }
.seat { width: 152px; position: absolute; z-index: 2; text-align: center; }
.seat--left { top: 16px; left: 20px; }
.seat--right { top: 16px; right: 20px; }
.seat--bottom { bottom: 0; left: calc(50% - 76px); }
.seat__body { padding: 9px 10px; border: 1px solid #4c5f53; border-radius: 9px; background: #1a2724; box-shadow: 0 5px 15px #0004; }
.seat--active .seat__body { border-color: var(--green); box-shadow: 0 0 0 3px #c5f67b12; }
.seat--folded { opacity: .45; }
.seat__name { font-size: 10px; font-weight: 600; display: flex; justify-content: space-between; color: #c4d2c8; }
.seat__name small { font-size: 8px; color: var(--green); }
.seat__stack { font-size: 20px; font-weight: 800; margin-top: 4px; }
.seat__stack small { font-size: 9px; font-weight: 400; color: #94ac9c; }
.seat__bet { font-size: 9px; display: inline-block; min-height: 21px; padding: 4px 8px; margin: 5px 0; border-radius: 20px; background: #15231c; color: #c5e4b0; }
.cards { display: flex; margin: 0 -3px; justify-content: center; }
.cards__slot { padding: 0 3px; }
.card { font-family: Georgia, serif; font-size: 22px; font-weight: 700; display: flex; width: 45px; height: 61px; padding: 5px 6px; align-items: flex-start; justify-content: space-between; border: 1px solid #d8ddd1; border-radius: 5px; background: #f4f4e9; color: #253333; box-shadow: 0 3px 5px #0003; }
.card span { font-size: 17px; align-self: flex-end; }
.card--red { color: #c04b49; }
.card--empty { font-family: inherit; font-size: 20px; align-items: center; justify-content: center; border: 1px dashed #82ac9470; background: #15392c80; color: #92b79a; box-shadow: none; }
.card--back { background: repeating-linear-gradient(45deg,#314c43,#314c43 3px,#2a4139 3px,#2a4139 6px); color: #b3c7a5; }
.cards--board .card { width: 38px; height: 52px; font-size: 19px; }
.cards--board .card span { font-size: 14px; }
.card:disabled { opacity: .28; }
.seat>.cards { margin-bottom: 6px; }
.action-bar { padding: 22px; margin: 18px 0 24px; border: 1px solid #394b40; border-radius: 12px; background: #1b2521; scroll-margin-top: 20px; }
.action-bar__info h3 { font-size: 18px; margin-top: 8px; }
.action-bar__info p { font-size: 12px; margin: 7px 0 0; color: #a7bab0; line-height: 1.6; }
.action-bar__slot:last-child:has([hidden]) { display: none; }
.action-bar__heading { display: flex; margin: 0 -12px 20px; align-items: flex-start; }
.action-bar__info { min-width: 0; padding: 0 12px; flex: 1; }
.action-bar__sizing { width: 172px; padding: 0 12px; flex-shrink: 0; }
.action-bar__sizing label { font-size: 11px; font-weight: 600; display: block; margin-bottom: 8px; color: #b9c9c0; }
.action-bar__amount { display: flex; align-items: center; overflow: hidden; border: 1px solid #52654e; border-radius: 7px; background: #121d18; }
.action-bar__amount:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px #c5f67b12; }
.action-bar__amount input { font-size: 17px; font-weight: 700; width: 100%; min-width: 0; height: 42px; padding: 9px 10px; border: 0; border-radius: 0; background: transparent; }
.action-bar__amount span { font-size: 11px; padding-right: 12px; color: #91a59a; }
.action-bar__buttons { display: flex; margin: 0 -5px -10px; align-items: stretch; flex-wrap: wrap; }
.action-bar__slot { width: 25%; padding: 0 5px 10px; }
.action-bar__slot--next { width: 100%; }
.action-bar__slot--next .button { width: 100%; }
.action-choice--raise { border-color: #66834e; background: #303d29; color: #d5edb7; }
.action-choice { width: 100%; min-height: 76px; padding: 12px; flex-direction: column; white-space: nowrap; }
.action-choice strong { font-size: 14px; }
.action-choice small { font-size: 10px; font-weight: 400; margin-top: 6px; color: #afc0b8; }
.action-choice--shove { border-color: #9a7550; background: #483929; color: #f4d0a7; }
.detail { width: calc(50% - 16px); padding: 20px; margin: 0 8px; border: 1px solid #2d3836; border-radius: 10px; background: #171e1e; }
.detail__heading { display: flex; margin-bottom: 17px; align-items: center; justify-content: space-between; }
.detail__footnote { font-size: 10px; color: #6e8179; }
.text-button { font-size: 11px; padding: 0; border: 0; background: transparent; color: var(--green); }
.detail ol { font-size: 11px; max-height: 185px; padding: 0; margin: 0; overflow-y: auto; list-style: none; }
.detail li { display: flex; padding: 9px 0; justify-content: space-between; border-bottom: 1px solid #29342f; color: #b3c0b8; }
.detail li span { color: #82968a; }
.strategy__title { font-size: 17px; font-weight: 700; margin: 0 0 12px; color: var(--green); }
.strategy__actions { padding: 0; margin: 0 0 15px; list-style: none; }
.detail .strategy__action { font-size: 11px; padding: 10px 0; align-items: center; }
.strategy__action strong { font-size: 14px; color: #81928a; }
.strategy__action--played strong { color: var(--green); }
.strategy__note { font-size: 10px; margin: 10px 0; color: #91a098; line-height: 1.7; }
.strategy__source { font-size: 10px; display: inline-block; margin-top: 5px; color: var(--green); text-decoration: none; }
.strategy__source:hover { text-decoration: underline; }
.strategy__coverage { font-size: 9px; padding-top: 12px; margin: 15px 0 0; border-top: 1px solid #29342f; color: #91a098; line-height: 1.7; }
.strategy__assessment { font-size: 9px; display: block; margin: 5px 10px 0 0; color: #a7baae; line-height: 1.5; }
.strategy__assessment--in_strategy { color: var(--green); }
.strategy__assessment--zero_frequency { color: #eab58e; }
.picker { width: 710px; max-width: calc(100vw - 28px); padding: 26px; border: 1px solid #4a5e4c; border-radius: 14px; background: #18221e; color: #ecf1e8; }
.picker::backdrop { background: #050c0be6; backdrop-filter: blur(5px); }
.picker__heading { display: flex; margin-bottom: 24px; align-items: center; justify-content: space-between; }
.picker__deck { display: flex; margin: 0 -3px 15px; flex-direction: column; }
.picker__row { display: flex; margin-bottom: 8px; }
.picker__row>.cards__slot { width: 7.6923%; }
.picker__row .card { width: 100%; height: 57px; font-size: 20px; }
.toast { font-size: 13px; max-width: calc(100vw - 40px); padding: 15px 22px; position: fixed; bottom: 24px; left: 50%; z-index: 10; border: 1px solid #bd7964; border-radius: 9px; background: #442e27; color: #ffded2; transform: translateX(-50%); }
.sr-only { width: 1px; height: 1px; padding: 0; position: absolute; overflow: hidden; clip: rect(0,0,0,0); }
.detail__heading { flex-wrap: wrap; }
.detail__heading .pill { margin-top: 5px; }
.detail .strategy__action { flex-wrap: wrap; }
.strategy__action>span { max-width: 78%; line-height: 1.6; }
.strategy__bar { width: 100%; height: 4px; margin-top: 9px; overflow: hidden; border-radius: 3px; background: #303d34; }
.strategy__bar span { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.strategy__details { padding-top: 12px; margin-top: 16px; border-top: 1px solid #344039; }
.strategy__details summary { font-size: 11px; color: #a8bbaa; cursor: pointer; }
.picker__heading { margin-bottom: 12px; }
.picker__progress { font-size: 13px; font-weight: 600; padding: 12px; margin-bottom: 20px; border: 1px solid #4f664a; border-radius: 7px; color: var(--green); }
summary:focus-visible { outline: 2px solid var(--green); outline-offset: 5px; }
.workspace__body { display: flex; margin: 0 -10px; align-items: flex-start; }
.workspace__table { width: calc(100% - 330px); min-width: 0; padding: 0 10px; }
.analysis { width: 310px; padding: 23px; margin: 0 10px; position: sticky; top: 20px; flex-shrink: 0; border: 1px solid #829e54; border-top: 3px solid var(--green); border-radius: 12px; background: linear-gradient(150deg,#253224,#18221c); box-shadow: 0 12px 30px #0003; }
.analysis__heading { padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid #42533b; }
.analysis__heading .eyebrow { color: #b5d992; }
.analysis__heading h2 { font-size: 23px; margin: 9px 0 13px; }
.analysis__cards { width: 100%; margin-top: 22px; }
.strategy__decision { font-size: 23px; font-weight: 700; margin: 0 0 12px; color: var(--green); line-height: 1.4; }
.strategy__explanation { font-size: 12px; margin-bottom: 20px; color: #c0cdbb; line-height: 1.8; }
.strategy__title { font-size: 14px; padding-top: 18px; border-top: 1px solid #3c4b36; color: #e3eddd; }
.strategy__action { font-size: 12px; display: flex; padding: 12px 0; align-items: center; justify-content: space-between; flex-wrap: wrap; border-bottom: 1px solid #34432f; }
.strategy__action>span { max-width: 74%; color: #c0ccbc; }
.workspace__table>.detail { width: 100%; margin: 0; }
.detail__export { margin-top: 18px; }
.poker-table::before { left: 5px; right: 5px; }
.seat--left { left: 0; }
.seat--right { right: 0; }
.seat { width: 120px; }
.seat--bottom { left: calc(50% - 60px); }

[hidden] { display: none !important; }
@media (max-width: 1023px) {
  .action-bar__slot { width: 50%; }
  .action-bar__slot--next { width: 100%; }
  .workspace__body { flex-direction: column; }
  .workspace__table { width: 100%; }
  .analysis { width: calc(100% - 20px); margin-bottom: 20px; position: static; order: -1; }

  .settings { width: 220px; padding: 28px 20px; }
  .workspace { width: calc(100% - 220px); padding: 28px 20px; }
  h2 { font-size: 19px; }
  .table-panel { padding: 16px 12px; }
  .poker-table::before { left: 9px; right: 9px; }
  .seat--left { left: 0; }
  .seat--right { right: 0; }
  .seat { width: 123px; }
  .seat--bottom { left: calc(50% - 61px); }
  .detail { width: calc(100% - 16px); margin-bottom: 16px; }
}
@media (max-width: 767px) {
  .header { height: 65px; padding: 0 20px; }
  .app { flex-direction: column; }
  .settings { width: 100%; padding: 24px 20px; border-right: 0; border-bottom: 1px solid #293131; }
  #settings-form { display: flex; margin: 0 -7px; flex-wrap: wrap; }
  #settings-form>.field { width: calc(50% - 14px); margin: 14px 7px 0; }
  #settings-form>.fields { width: 50%; padding: 0 7px; margin: 0; }
  #settings-form>.fields>.field { padding: 0; }
  #settings-form>.fields>.field:first-child { padding-right: 7px; }
  .settings__divider { display: none; }
  #stack-fields { display: flex; width: 100%; }
  #stack-fields>.field { width: 33.333%; padding: 0 7px; }
  .settings__start { width: calc(100% - 14px); margin: 20px 7px 0; }
  .workspace { width: 100%; padding: 25px 20px; }
  .workspace__heading { margin-bottom: 20px; }
  .poker-table { height: 430px; }
  .detail { width: calc(50% - 16px); }
}
@media (max-width: 480px) {
  .action-bar__heading { flex-direction: column; }
  .action-bar__sizing { width: 100%; margin-top: 16px; }
  .action-bar__amount { max-width: 180px; }
  .action-choice strong { font-size: 13px; }
  .action-choice small { font-size: 9px; }
  .header__brand>span { font-size: 14px; }
  .header__badge { font-size: 8px; padding: 7px; }
  .workspace { padding: 22px 12px; }
  .workspace__heading h2 { font-size: 16px; }
  .workspace__heading .eyebrow { font-size: 8px; }
  .button--small { font-size: 10px; padding: 8px; }
  .seat { width: 105px; }
  .seat--bottom { left: calc(50% - 52px); }
  .seat__stack { font-size: 17px; }
  .seat__stack small { font-size: 8px; }
  .poker-table__center { top: 142px; }
  .poker-table::before { inset: 50px 0 50px; border-width: 9px; border-radius: 43%; }
  .poker-table::after { inset: 68px 17px 68px; border-radius: 43%; }
  .action-bar .button { padding: 10px 12px; }
  .detail { width: calc(100% - 16px); }
  .picker { padding: 17px; }
  .picker__row { flex-wrap: wrap; margin-bottom: 6px; }
  .picker__row>.cards__slot { width: 14.285%; padding-bottom: 6px; }
  .picker__row .card { height: 46px; font-size: 17px; }
  .picker__row .card span { font-size: 12px; }
  .workspace__heading { align-items: flex-start; flex-direction: column; }
  .workspace__heading>.button { margin-top: 14px; }
  .action-bar { padding: 16px; }
}