:root{
  --bg:#0c0c10;--surf:#14141c;--surf2:#1e1e2a;--surf3:#282838;
  --bdr:#32324a;--gold:#c8942a;--goldL:#e8b84b;--goldD:#6a4e10;
  --red:#b03020;--redL:#e05040;--green:#3aaa66;--blue:#4a9ecc;
  --text:#f0ede8;--textD:#9a9080;--textM:#ab9acc;
  --man:#cc3030;--tong:#2278b8;--suo:#228844;--ji:#aa7722;--hua:#9b59b6;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:'Noto Sans TC',sans-serif;min-height:100vh;
  background-image:radial-gradient(ellipse at 15% 10%,rgba(200,148,42,.07) 0%,transparent 45%),
  radial-gradient(ellipse at 85% 85%,rgba(180,50,30,.05) 0%,transparent 45%);}
.header{text-align:center;padding:20px 20px 14px;border-bottom:2px solid var(--bdr);
  background:linear-gradient(180deg,rgba(200,148,42,.1) 0%,transparent 100%);position:relative;overflow:hidden;}
.header::before{content:'🀄';font-size:180px;opacity:.03;position:absolute;top:-35px;left:50%;transform:translateX(-50%);pointer-events:none;}
.header h1{font-family:'Noto Serif TC',serif;font-size:clamp(18px,3vw,30px);font-weight:900;color:var(--goldL);letter-spacing:.08em;text-shadow:0 0 40px rgba(200,148,42,.5);}
.header p{color:var(--textM);font-size:11px;margin-top:4px;letter-spacing:.14em;}
.tab-bar{display:flex;background:var(--surf2);border-bottom:2px solid var(--bdr);}
.tab-btn{padding:11px 24px;font-size:13px;font-family:'Noto Serif TC',serif;font-weight:700;color:var(--textM);border:none;background:none;cursor:pointer;letter-spacing:.05em;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .15s;}
.tab-btn:hover{color:var(--textD);}
.tab-btn.active{color:var(--goldL);border-bottom-color:var(--gold);background:rgba(200,148,42,.06);}
.tab-pane{display:none;}.tab-pane.active{display:block;}
.main{max-width:1320px;margin:0 auto;padding:16px 12px 110px;display:grid;grid-template-columns:1fr 368px;gap:14px;}
@media(max-width:980px){.main{grid-template-columns:1fr;}}
.panel{background:var(--surf);border:1px solid var(--bdr);border-radius:10px;overflow:hidden;margin-bottom:12px;}
.panel:last-child{margin-bottom:0;}
.panel-hdr{background:var(--surf2);border-bottom:1px solid var(--bdr);padding:10px 14px;display:flex;align-items:center;gap:8px;}
.panel-title{font-family:'Noto Serif TC',serif;font-size:13px;font-weight:700;color:var(--goldL);letter-spacing:.05em;flex:1;}
.step-badge{background:var(--gold);color:#000;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;}
.panel-body{padding:12px 14px;}
.phase-bar{display:flex;gap:5px;margin-bottom:10px;}
.phase-step{flex:1;padding:5px 3px;border-radius:5px;text-align:center;font-size:15px;border:1px solid var(--bdr);color:var(--textM);background:var(--surf2);}
.phase-step.active{border-color:var(--gold);color:var(--goldL);background:rgba(200,148,42,.1);}
.phase-step.done{border-color:var(--green);color:var(--green);background:rgba(58,170,102,.08);}
.suit-section{margin-bottom:10px;}
.suit-label{font-size:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.suit-label.man{color:var(--man);}.suit-label.tong{color:var(--tong);}.suit-label.suo{color:var(--suo);}
.suit-label.feng{color:#4a9ecc;}.suit-label.yuan{color:#e8c060;}.suit-label.hua{color:var(--hua);}
.tile-grid{display:flex;flex-wrap:wrap;gap:4px;}
.tile-btn{border:none;background:transparent;padding:0;cursor:pointer;position:relative;transition:transform .1s,filter .1s;user-select:none;display:block;border-radius:6px;}
.tile-btn:hover:not(:disabled){transform:translateY(-3px);filter:brightness(1.05);}
.tile-btn:disabled{opacity:.35;cursor:not-allowed;transform:none!important;filter:none!important;}
.tile-btn.selected .tile-sel-ring{display:block;}
.tile-sel-ring{display:none;position:absolute;inset:-2px;border-radius:8px;border:2px solid var(--gold);box-shadow:0 0 8px rgba(200,148,42,.5);pointer-events:none;}
.tile-count-badge{position:absolute;top:-3px;right:-3px;background:var(--gold);color:#000;width:15px;height:15px;border-radius:50%;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:2;}
.zones-wrap{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;}
.zone{border-radius:8px;padding:7px;min-height:66px;position:relative;}
.zone-an{background:rgba(74,158,204,.05);border:1.5px solid rgba(74,158,204,.2);}
.zone-ming{background:rgba(200,148,42,.05);border:1.5px dashed rgba(200,148,42,.3);}
.zone-label{font-size:13px;font-weight:700;letter-spacing:.08em;margin-bottom:5px;}
.zone-an .zone-label{color:var(--blue);}.zone-ming .zone-label{color:var(--gold);}
.zone-tiles{display:flex;flex-wrap:wrap;gap:3px;min-height:46px;align-items:flex-start;}
.zone-empty{font-size:15px;color:var(--textM);width:100%;text-align:center;padding:8px 0;}
.zone-tile-btn{border:none;background:transparent;padding:0;cursor:pointer;display:block;transition:transform .1s;border-radius:4px;}
.zone-tile-btn:hover{transform:translateY(-2px);}
.win-label{font-size:15px;color:var(--gold);margin-bottom:4px;display:flex;align-items:center;gap:5px;}
.win-label span{color:var(--textM);}
.win-slot{background:rgba(232,184,75,.05);border:1.5px dashed var(--goldD);border-radius:7px;padding:7px;min-height:56px;display:flex;flex-wrap:wrap;gap:4px;align-items:center;}
.ting-display{background:var(--surf2);border:1px solid var(--bdr);border-radius:6px;padding:7px 10px;margin-bottom:8px;}
.ting-display-label{font-size:14px;color:var(--textM);letter-spacing:.05em;margin-bottom:3px;}
.ting-badge{display:inline-block;padding:4px 12px;border-radius:4px;font-size:16px;font-weight:700;}
.ting-badge.multi{background:rgba(58,170,102,.18);color:var(--green);border:1px solid rgba(58,170,102,.3);}
.ting-badge.single{background:rgba(200,148,42,.18);color:var(--goldL);border:1px solid rgba(200,148,42,.3);}
.ting-badge.edge{background:rgba(155,89,182,.18);color:#c39bd3;border:1px solid rgba(155,89,182,.3);}
.ting-badge.none{background:var(--surf3);color:var(--textM);border:1px solid var(--bdr);}
.status-bar{display:flex;justify-content:space-between;align-items:center;padding:3px 0;margin-bottom:7px;}
.status-text{font-size:15px;color:var(--textM);}
.status-badge{font-size:15px;padding:3px 8px;border-radius:4px;}
.status-badge.need{background:rgba(200,148,42,.12);color:var(--gold);}
.status-badge.ok{background:rgba(58,170,102,.12);color:var(--green);}
.status-badge.win{background:rgba(74,158,204,.12);color:var(--blue);}
.cond-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;}
.cond-group{margin-bottom:7px;}
.cond-label{font-size:15px;color:var(--textM);margin-bottom:4px;}
.toggle-row{display:flex;gap:3px;flex-wrap:wrap;}
.tbtn{padding:5px 10px;border-radius:4px;border:1px solid var(--bdr);background:var(--surf2);color:var(--textM);font-size:15px;cursor:pointer;transition:all .12s;font-family:'Noto Sans TC';white-space:nowrap;}
.tbtn:hover{border-color:var(--goldD);color:var(--text);}
.tbtn.on{background:rgba(200,148,42,.18);border-color:var(--gold);color:var(--goldL);}
hr.div{border:none;border-top:1px solid var(--bdr);margin:9px 0;}
.result-panel{background:var(--surf);border:1px solid var(--bdr);border-radius:10px;overflow:hidden;}
.total-fan{background:linear-gradient(135deg,rgba(200,148,42,.2),rgba(200,148,42,.06));border-bottom:1px solid var(--bdr);padding:16px;text-align:center;}
.total-fan-label{font-size:14px;color:var(--textM);letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px;}
.total-fan-num{font-family:'Noto Serif TC',serif;font-size:46px;font-weight:900;color:var(--goldL);line-height:1;text-shadow:0 0 30px rgba(200,148,42,.6);}
.total-fan-unit{font-size:16px;color:var(--gold);margin-left:2px;}
.total-fan-note{font-size:15px;color:var(--textM);margin-top:4px;}
.fan-scroll{max-height:460px;overflow-y:auto;padding:8px 11px;}
.fan-scroll::-webkit-scrollbar{width:3px;}
.fan-scroll::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:2px;}
.fan-cat{font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--textM);text-transform:uppercase;margin:8px 0 4px;padding-bottom:3px;border-bottom:1px solid var(--bdr);}
.fan-item{display:flex;justify-content:space-between;align-items:center;padding:5px 6px;border-radius:5px;margin-bottom:2px;transition:background .1s;}
.fan-item:hover{background:var(--surf2);}
.fan-name{font-size:16px;color:var(--text);flex:1;}
.fan-note-txt{font-size:14px;color:var(--textM);margin-left:4px;}
.fan-num{font-family:'Noto Serif TC',serif;font-weight:700;color:var(--goldL);font-size:18px;white-space:nowrap;}
.fan-num::after{content:' 番';font-size:10px;color:var(--textM);font-family:'Noto Sans TC';font-weight:400;}
.groups-row{padding:8px 11px;border-bottom:1px solid var(--bdr);}
.groups-row-label{font-size:14px;color:var(--textM);letter-spacing:.05em;margin-bottom:5px;}
.groups-wrap{display:flex;flex-wrap:wrap;gap:5px;}
.group-box{background:var(--surf2);border:1px solid var(--bdr);border-radius:5px;padding:4px 5px;display:flex;flex-direction:column;align-items:center;gap:2px;}
.group-box.is-ming{border-color:rgba(200,148,42,.5);background:rgba(200,148,42,.07);}
.group-box.is-an{border-color:rgba(74,158,204,.35);background:rgba(74,158,204,.05);}
.group-tiles{display:flex;gap:2px;}
.group-type-lbl{font-size:8px;color:var(--textM);}
.group-type-lbl .mtag{color:var(--gold);font-weight:700;}
.group-type-lbl .atag{color:var(--blue);font-weight:700;}
.mini-tile-wrap{display:inline-block;position:relative;}
.win-hl-wrap{outline:2px solid var(--gold);outline-offset:1px;border-radius:3px;}
.waiting-msg{padding:26px 16px;text-align:center;color:var(--textM);font-size:17px;line-height:1.9;}
.waiting-msg .ico{font-size:28px;display:block;margin-bottom:7px;opacity:.4;}
.warning-box{background:rgba(180,50,30,.1);border:1px solid rgba(180,50,30,.3);border-radius:7px;padding:10px 12px;font-size:16px;color:#e88;line-height:1.7;margin:12px;}
.bottom-note{background:var(--surf);border:1px solid var(--bdr);border-radius:10px;padding:12px;font-size:15px;color:var(--textM);line-height:1.9;}
.bottom-note strong{color:var(--textD);}
/* FAB */
.fab-wrap{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center;padding:12px 16px 16px;gap:12px;background:linear-gradient(0deg,rgba(10,5,0,.98) 60%,transparent 100%);z-index:1000;pointer-events:none;}
.fab-reset{pointer-events:all;height:54px;padding:0 20px;background:rgba(30,20,8,.92);border:2px solid rgba(200,148,42,.35);border-radius:40px;color:var(--gold);font-size:14px;font-family:'Noto Serif TC',serif;font-weight:700;white-space:nowrap;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:7px;}
.fab-reset:hover{border-color:var(--gold);background:rgba(50,35,10,.95);}
.fab-calc{pointer-events:all;display:flex;align-items:center;gap:10px;background:linear-gradient(160deg,#e8b84b 0%,#c8942a 50%,#a87020 100%);color:#1a0a00;border:none;border-radius:40px;padding:0 28px;height:54px;font-family:'Noto Serif TC',serif;font-size:20px;font-weight:900;letter-spacing:.1em;cursor:pointer;transition:all .18s;white-space:nowrap;position:relative;overflow:hidden;box-shadow:0 0 0 3px rgba(200,148,42,.3),0 4px 20px rgba(200,148,42,.6);}
.fab-calc::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,transparent 55%);pointer-events:none;}
.fab-calc:hover{transform:translateY(-2px);box-shadow:0 0 0 4px rgba(200,148,42,.4),0 8px 28px rgba(200,148,42,.8);}
.fab-calc:disabled{background:linear-gradient(160deg,#555,#444);color:#777;box-shadow:0 2px 8px rgba(0,0,0,.5);cursor:not-allowed;transform:none;}
.fab-calc:disabled::before{display:none;}
.fab-settings{pointer-events:all;width:52px;height:52px;border-radius:50%;border:2px solid rgba(200,148,42,.35);background:rgba(30,20,8,.92);box-shadow:0 4px 16px rgba(0,0,0,.6);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:var(--gold);}
.fab-settings:hover{transform:rotate(60deg);border-color:var(--gold);}
/* Fan Table */
.fan-table-page{max-width:1100px;margin:0 auto;padding:18px 12px 60px;}
.fan-table-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.fan-table-hdr h2{font-family:'Noto Serif TC',serif;font-size:17px;font-weight:700;color:var(--goldL);}
.fan-sec-title{font-family:'Noto Serif TC',serif;font-size:12px;font-weight:700;color:var(--goldL);background:var(--surf2);border:1px solid var(--bdr);border-radius:5px;padding:6px 11px;margin:12px 0 7px;}
.fan-tbl{width:100%;border-collapse:collapse;background:var(--surf);border:1px solid var(--bdr);border-radius:8px;overflow:hidden;}
.fan-tbl th{background:var(--surf3);color:var(--textD);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:7px 11px;text-align:left;border-bottom:1px solid var(--bdr);}
.fan-tbl td{padding:6px 11px;border-bottom:1px solid rgba(74,60,30,.4);vertical-align:middle;}
.fan-tbl tr:last-child td{border-bottom:none;}
.fan-tbl tr:hover td{background:rgba(255,255,255,.02);}
.fan-name-cell{font-size:13px;color:var(--text);}
.fan-note-cell{font-size:11px;color:var(--textM);line-height:1.5;}
.fan-mingan-label{font-size:13px;font-weight:700;color:var(--text);vertical-align:middle;}
.fan-input{background:var(--surf2);border:1px solid var(--bdr);color:var(--text);padding:3px 6px;border-radius:4px;font-size:11px;font-family:'Noto Sans TC';width:52px;text-align:center;}
.fan-input:focus{outline:none;border-color:var(--gold);}
.reset-tbl-btn{padding:6px 12px;background:var(--surf2);border:1px solid var(--bdr);color:var(--textM);border-radius:5px;font-size:11px;cursor:pointer;transition:all .15s;}
.reset-tbl-btn:hover{border-color:var(--goldD);color:var(--text);}
.save-ind{font-size:11px;color:var(--green);opacity:0;transition:opacity .3s;}
.save-ind.show{opacity:1;}
.menqing-auto{font-size:13px;color:var(--textM);margin-left:4px;}
.kang-zone{border-radius:8px;padding:7px;min-height:58px;}
.kang-an{background:rgba(74,158,204,.05);border:1.5px solid rgba(74,158,204,.25);}
.kang-ming{background:rgba(200,148,42,.05);border:1.5px dashed rgba(200,148,42,.4);}
.kang-label{font-size:15px;font-weight:700;letter-spacing:.06em;margin-bottom:4px;}
.kang-an .kang-label{color:#5abcde;}
.kang-ming .kang-label{color:#e8b050;}
.kang-tiles{display:flex;flex-wrap:wrap;gap:6px;min-height:40px;align-items:flex-start;}
.kang-group{display:flex;gap:2px;padding:4px;border-radius:6px;cursor:pointer;transition:background .12s;position:relative;}
.kang-group:hover{background:rgba(255,255,255,.08);}
.kang-group.kang-group-an{background:rgba(74,158,204,.1);border:1px solid rgba(74,158,204,.3);}
.kang-group.kang-group-ming{background:rgba(200,148,42,.12);border:1px solid rgba(200,148,42,.4);}
.kang-remove{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;background:var(--red);color:white;border:none;font-size:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;}
.kang-info{font-size:13px;color:var(--textM);margin-top:3px;}
.kang-empty{font-size:14px;color:var(--textM);padding:6px 0;}
.can-kang-badge{
  position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);
  background:var(--gold);color:#000;font-size:9px;font-weight:700;
  padding:1px 5px;border-radius:3px;white-space:nowrap;pointer-events:none;z-index:3;
}
.hand-limit-info{font-size:14px;color:var(--textD);padding:3px 0 5px;text-align:right;}