* { box-sizing: border-box; }
body { font-family: -apple-system,BlinkMacSystemFont,"Noto Sans TC","Segoe UI",Roboto,Helvetica,Arial; margin:0; background:#0b1020; color:#e8eefc; }
.container { max-width: 1120px; margin: 0 auto; padding: 24px; }
h1 { font-size: 28px; margin: 0 0 8px; }
.subtitle { color:#abc; margin-bottom: 18px; }
.controls { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.grid-editor, .pieces, .settings { background: #121a33; border: 1px solid #1c2a5b; border-radius: 14px; padding: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.grid { display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(3, 56px); gap: 6px; margin-top: 8px; }
.cell { width: 56px; height: 56px; border-radius: 10px; display:flex; align-items:center; justify-content:center; font-weight:700; cursor:pointer; transition:.12s; border:1px solid #2c3e7a; }
.cell.o { background:#3aa2ff22; color:#b7d9ff; }
.cell.x { background:#1a223f; color:#8797c7; }
.btn { background:#1f2a50; color:#d2dcff; border:1px solid #2c3e7a; padding:10px 14px; border-radius:10px; cursor:pointer; transition:.15s; }
.btn:hover { transform: translateY(-1px); background:#243060; }
.btn.primary { background:#215ee6; border-color:#2a69f7; }
.btn.success { background:#1db954; border-color:#29d168; }
.legend { display:flex; gap:10px; align-items:center; margin-top:8px; }
.actions { display:flex; gap:10px; margin-top:10px; }
.piece-list { list-style:none; padding:0; margin:8px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
.piece { background:#0f1530; border:1px solid #1c2a5b; border-radius:12px; padding:10px; width: 120px; }
.piece h4 { margin:0 0 6px; font-size:14px; color:#a9c3ff; }
.thumb { display:grid; grid-template-columns: repeat(3, 18px); grid-template-rows: repeat(3, 18px); gap:3px; margin-bottom:8px; }
.thumb div { width:18px; height:18px; border-radius:4px; border:1px solid #2c3e7a; }
.thumb .o { background:#3aa2ff55; }
.thumb .x { background:#121a33; }
.piece .del { width:100%; margin-top:6px; }
.settings input { width:100%; margin-top:6px; padding:8px; border-radius:8px; border:1px solid #2c3e7a; background:#0e1630; color:#dfe8ff; }
.settings .chk { display:block; margin-top:10px; }
.result { background:#121a33; border:1px solid #1c2a5b; border-radius:14px; padding:16px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); margin-top:18px; }
.cards { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cards .card { background:#0f1530; border:1px solid #1c2a5b; border-radius:12px; padding:12px; }
.cards img { width:100%; border-radius:12px; border:1px solid #2c3e7a; margin-top:8px; }
footer { margin-top:18px; color:#8aa; font-size:12px; text-align:center; border-top:1px solid #1c2a5b; padding-top:12px; }

.loading { position: fixed; inset: 0; background: rgba(6,10,24,.88); display:flex; align-items:center; justify-content:center; flex-direction:column; z-index:999; gap:16px; }
.hidden { display:none; }
.spinner { width:64px; height:64px; border-radius:50%; border:6px solid #2c3e7a; border-top-color:#5aa0ff; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ai-text { color:#b8c8ff; letter-spacing:2px; font-weight:700; }
.ai-text .dot { display:inline-block; animation: bounce 1.2s infinite; }
.ai-text .dot:nth-child(1){ animation-delay: 0s; }
.ai-text .dot:nth-child(2){ animation-delay: .2s; }
@keyframes bounce { 0%,80%,100%{ transform: translateY(0);} 40%{ transform: translateY(-6px);} }

.bar { width: 320px; height: 10px; background:#1a223f; border-radius: 999px; border:1px solid #2c3e7a; overflow:hidden; }
.bar #barFill { width: 0%; height:100%; background:linear-gradient(90deg,#2e7bff,#49daff); transition: width .08s linear; }

@media (max-width: 960px){
  .controls { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
}