:root{--green: #1b9e4b;--green-dark: #15803d;--green-soft: #e8f6ec;--blue: #1565c0;--red: #c62828;--amber: #f59e0b;--bg: #f4f6f5;--surface: #ffffff;--border: #d5dbe0;--text: #1f2933;--muted: #6b7280}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);line-height:1.45}.app-shell{max-width:1360px;margin:0 auto;padding:16px 20px 32px}.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:12px 18px;margin-bottom:16px;box-shadow:0 2px 8px #1b9e4b0f}.brand{display:flex;align-items:center;gap:12px}.brand-badge{background:var(--green);color:#fff;font-weight:700;font-size:14px;padding:6px 10px;border-radius:4px;letter-spacing:.5px}.brand-title{font-size:18px;font-weight:700;color:var(--green)}.brand-sub{font-size:12px;color:var(--muted)}.topbar-right{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.stat-pill{background:var(--bg);border:1px solid var(--border);padding:5px 10px;border-radius:4px;font-size:12px;color:var(--text)}.stat-pill strong{color:var(--green)}.api-box{display:flex;align-items:center;gap:6px;background:var(--green-soft);border:1px solid #c5e8c9;padding:4px 8px;border-radius:4px;font-size:12px}.api-box code{font-family:Consolas,monospace;font-weight:700;color:var(--green-dark)}.btn{border:1px solid transparent;background:var(--green);color:#fff;font-weight:600;font-size:12px;padding:7px 12px;border-radius:4px;cursor:pointer;transition:background .15s}.btn:hover{background:var(--green-dark)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-blue{background:var(--blue)}.btn-blue:hover{background:#0d47a1}.btn-danger{background:var(--red)}.btn-danger:hover{background:#b71c1c}.btn-outline{background:#fff;color:var(--text);border-color:var(--border)}.btn-outline:hover{background:var(--green-soft);border-color:var(--green);color:var(--green)}.btn-sm{padding:4px 8px;font-size:11px}.input{border:1px solid var(--border);border-radius:4px;padding:6px 10px;font-size:13px;outline:none}.input:focus{border-color:var(--green)}.main-grid{display:grid;grid-template-columns:310px 1fr 320px;gap:16px;align-items:start}@media(max-width:1100px){.main-grid{grid-template-columns:1fr}}.card{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:14px}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #eef1f0}.card-title{font-size:14px;font-weight:700;color:var(--green);text-transform:uppercase}.create-row{display:flex;gap:6px;margin-bottom:12px}.create-row .input{width:110px;text-align:center;font-weight:700;letter-spacing:1px}.room-list{display:flex;flex-direction:column;gap:8px;max-height:520px;overflow-y:auto}.room-item{border:1px solid var(--border);border-radius:4px;padding:10px;cursor:pointer;background:#fafbfa;transition:all .12s}.room-item:hover{border-color:var(--green);background:#fff}.room-item.active{border-color:var(--green);background:var(--green-soft)}.room-item-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.room-code{font-family:Consolas,monospace;font-size:16px;font-weight:700;color:var(--text)}.badge{font-size:11px;font-weight:600;padding:2px 7px;border-radius:3px}.badge-wait{background:#fef3c7;color:#b45309}.badge-play{background:#dcfce7;color:#15803d}.badge-done{background:#fee2e2;color:#b91c1c}.room-meta{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--muted)}.board-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;background:var(--bg);padding:8px 12px;border-radius:4px}.turn-indicator{font-size:14px;font-weight:700}.turn-x{color:var(--red)}.turn-o{color:var(--blue)}.board-wrap{display:flex;flex-direction:column;align-items:center;overflow-x:auto;padding:6px 0}.caro-grid{display:grid;grid-template-columns:24px repeat(15,32px);grid-template-rows:24px repeat(15,32px);border:2px solid #9ca8b0;background:#fdfefc;-webkit-user-select:none;user-select:none}.coord-cell{display:flex;align-items:center;justify-content:center;font-size:10px;font-family:Consolas,monospace;color:var(--muted);background:#eef1f0;border-right:1px solid #d5dbe0;border-bottom:1px solid #d5dbe0}.board-cell{width:32px;height:32px;border-right:1px solid #dce2e6;border-bottom:1px solid #dce2e6;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;cursor:pointer;position:relative}.board-cell:hover{background:var(--green-soft)}.board-cell.cell-x{color:var(--red)}.board-cell.cell-o{color:var(--blue)}.board-cell.last-move{background:#fef08a;box-shadow:inset 0 0 0 2px var(--green)}.moves-list{max-height:380px;overflow-y:auto;border:1px solid var(--border);border-radius:4px}.moves-table{width:100%;border-collapse:collapse;font-size:12px}.moves-table th,.moves-table td{padding:6px 8px;text-align:left;border-bottom:1px solid #eef1f0}.moves-table th{background:#eef1f0;font-weight:600;color:var(--muted);position:sticky;top:0}.moves-table tr.latest-row{background:#fef9c3;font-weight:600}.error-banner{background:#fee2e2;border:1px solid #fca5a5;color:var(--red);padding:8px 12px;border-radius:4px;font-size:12px;margin-bottom:10px}.guide-box{margin-top:14px;background:#f8faf9;border:1px solid var(--border);border-radius:4px;padding:10px;font-size:11.5px;color:var(--muted)}.guide-box code{font-family:Consolas,monospace;color:var(--text);background:#e5e9ec;padding:1px 4px;border-radius:3px}