:root{color-scheme:dark;--bg:#101d23;--panel:#172a31;--line:#2c4148;--ink:#eef1e9;--muted:#97adb2;--gold:#e7bf79;--teal:#80cfb6}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif}header{height:82px;padding:0 36px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:34px;color:var(--gold);display:flex;gap:15px;align-items:center}.brand span{font-size:23px;color:var(--ink);font-weight:650}.brand small{font-size:15px;margin-left:14px;color:var(--muted);font-weight:400}.status{font-size:13px;color:var(--muted)}.status.connected{color:var(--teal)}main{display:grid;grid-template-columns:275px 1fr;max-width:1800px;margin:auto}aside{padding:30px 24px;border-right:1px solid var(--line);min-height:calc(100vh - 82px)}h1,h2,p{margin:0}h1{font-size:28px;letter-spacing:-.7px}h2{font-size:20px;margin:6px 0 10px}.eyebrow{font-size:11px;font-weight:650;letter-spacing:2px;color:var(--teal)}.muted,small{color:var(--muted);font-size:13px}.muted{margin-top:5px}label{display:block;font-size:12px;color:var(--muted);margin:16px 0 6px}input,textarea{width:100%;padding:10px 12px;border:1px solid #3d5159;background:#11232a;border-radius:7px;font:inherit;color:var(--ink);resize:vertical}input:focus,textarea:focus{outline:2px solid var(--teal);outline-offset:2px}button{cursor:pointer;background:var(--gold);color:#17242a;border:0;padding:11px 15px;font:inherit;font-weight:650;border-radius:7px;width:100%;margin:14px 0 0}button.secondary{background:#2c494f;color:var(--ink)}button:disabled{opacity:.5;cursor:wait}details{margin-top:28px;border-top:1px solid var(--line);padding-top:20px}summary{cursor:pointer;font-weight:600}small{display:block;margin-top:8px}.rule-note{margin-top:26px;border-left:2px solid var(--gold);padding-left:12px;font-size:12px;color:var(--muted)}.rule-note b{color:var(--gold)}.rule-note p{margin-top:6px}#error{color:#ffb1a8;font-size:13px;margin-top:14px}.workspace{padding:30px 32px 22px;min-width:0}.section-head{display:flex;justify-content:space-between;align-items:center;gap:20px}.hand{display:flex;gap:7px;flex-wrap:wrap;padding:24px 0;border-bottom:1px solid var(--line)}.hand.empty{color:var(--muted);font-size:14px;min-height:115px;align-items:center}.metrics{display:flex;gap:20px;margin:22px 0;color:var(--muted);font-size:13px}.metrics strong{color:var(--ink);font-weight:600}.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.plan{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}.plan.primary{border-color:#967c50}.plan-top{padding:17px 19px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.plan-top h2{font-size:17px;margin:0}.plan-top .score{font-size:12px;color:var(--gold)}.row{padding:16px 17px 21px;border-bottom:1px solid #284047}.row-head{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin-bottom:12px;gap:4px}.row-head b{font-weight:500;color:var(--teal)}.row-head span{color:var(--muted);font-size:11px}.row-cards{display:flex;gap:5px;padding-bottom:16px}.payout{padding:15px 17px;font-size:12px;display:flex;gap:14px;color:var(--muted)}.payout b{color:var(--gold);font-size:18px;padding-left:5px}.condition{font-size:11px;color:var(--muted);padding:0 17px 16px}.placeholder{grid-column:1/-1;padding:75px 20px;text-align:center;border:1px dashed var(--line);border-radius:12px;color:var(--muted)}.placeholder>span{font:34px Georgia,serif;color:#638983;letter-spacing:20px}.placeholder h2{color:var(--ink);margin-top:20px}.placeholder p{font-size:13px}.progress{margin-top:18px;border-left:3px solid var(--gold);padding:10px 14px;background:var(--panel)}footer{font-size:12px;color:var(--muted);padding-top:24px}body.stale .plan{opacity:.4}
/* Large, font-independent suits and explicit labels for fast card reading. */
body{font-family:"Microsoft YaHei UI","PingFang SC","Microsoft YaHei",Arial,sans-serif}
main{grid-template-columns:240px minmax(0,1fr);max-width:2000px}
aside{padding:28px 20px}.workspace{padding:28px 24px 24px}
.plans{grid-template-columns:repeat(auto-fit,minmax(min(100%,370px),1fr));gap:16px}
.plan{display:block}.plan-top{padding:17px 16px}.plan-top h2{font-size:18px}
.row{padding:16px 16px 21px}.row-head{font-size:15px;margin-bottom:14px}
.row-head b{font-weight:650}.row-head span{font-size:12px}
.row-cards{display:flex;gap:6px;padding-bottom:25px}
.card{position:relative;flex:0 1 76px;min-width:52px;max-width:76px;width:76px;height:96px;border:1px solid #dbdfdf;border-radius:8px;background:#fffef9;color:#111820;box-shadow:0 2px 1px #070f1640;line-height:1;overflow:visible}
.card.red{color:#b92032}
.card .rank{position:absolute;left:8px;top:7px;font:800 32px/1 Arial,"Helvetica Neue",sans-serif;letter-spacing:-1px}
.card .suit{display:block;position:absolute;width:44px;height:44px;left:50%;top:42px;transform:translateX(-50%);fill:currentColor}

.card .slot{position:absolute;left:0;right:0;bottom:-23px;text-align:center;color:#cad9dd;font:600 12px/1.2 Arial,"Microsoft YaHei",sans-serif;white-space:nowrap}
.hand{gap:8px;padding:20px 0 22px}.hand .card{flex:0 0 62px;width:62px;min-width:62px;height:88px;margin-bottom:24px}
.hand .rank{font-size:28px}.hand .suit{width:38px;height:38px;top:37px}
@media(max-width:800px){main{grid-template-columns:1fr}aside{min-height:0;border-right:0;border-bottom:1px solid var(--line)}header{padding:0 20px}.workspace{padding:22px 12px}.section-head{align-items:flex-start;flex-direction:column;gap:0}.metrics{flex-wrap:wrap;gap:8px 20px}h1{font-size:25px}.brand small{display:none}}
@media(max-width:380px){.row{padding-left:10px;padding-right:10px}.row-cards{gap:4px}.card{min-width:46px}.card .suit{width:38px;height:38px}.row-head{font-size:13px}.card .rank{font-size:29px}.card .slot{font-size:11px}}

.card.yellow-highlight{background:linear-gradient(rgba(255,210,0,.38),rgba(255,210,0,.38)),#fffef9}

/* Compact desktop layout: keep all three recommendations side by side. */
@media(min-width:801px){
 header{height:54px;padding:0 24px}.brand{font-size:28px}.brand span{font-size:20px}
 main{grid-template-columns:200px minmax(0,1fr)}
 aside{padding:18px 14px;min-height:calc(100vh - 54px)}
 aside h2{font-size:17px}aside label{margin-top:10px}aside input,aside textarea{padding:7px 9px}
 aside button{padding:8px 10px;margin-top:10px}aside details{margin-top:18px;padding-top:14px}.rule-note{margin-top:16px}
 .workspace{padding:12px 16px}h1{font-size:24px;line-height:1.2}.section-head{gap:12px}
 .hand{gap:6px;padding:8px 0}.hand .card{flex-basis:48px;width:48px;min-width:48px;height:64px;margin-bottom:18px}
 .hand .rank{font-size:23px;top:4px;left:5px}.hand .suit{width:29px;height:29px;top:29px}
 .metrics{gap:16px;margin:7px 0;font-size:12px}
 .plans{grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:12px}
 .plan{border-radius:9px}.plan-top{padding:8px 12px}.plan-top h2{font-size:16px}
 .row{padding:6px 12px}.row-head{font-size:13px;margin-bottom:4px;line-height:20px}.row-head span{font-size:11px}
 .row-cards{gap:5px;padding-bottom:17px}
 .card{flex-basis:60px;max-width:60px;min-width:44px;width:60px;height:76px;border-radius:6px}
 .card .rank{font-size:27px;top:4px;left:6px}.card .suit{width:34px;height:34px;top:34px}
 .card .slot{font-size:11px;bottom:-17px}
 .payout{padding:7px 12px;gap:12px;line-height:20px}.payout b{font-size:16px}
 .condition{padding:0 12px 7px;line-height:15px;font-size:10px}footer{padding-top:9px;font-size:11px}
}

@media(min-width:801px){.hand .rank{font-size:23px;top:4px;left:5px}.hand .suit{width:29px;height:29px;top:29px}}