:root {
  --ink: #eef5f2;
  --muted: #8fa09d;
  --panel: #16242b;
  --panel-soft: #1b2d34;
  --line: rgba(219, 236, 226, .12);
  --accent: #e9c847;
  --blue: #49a7ff;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #0d171d; color: var(--ink); font: 14px/1.45 Inter, ui-sans-serif, system-ui, "Microsoft YaHei", sans-serif; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; padding: 22px clamp(16px, 3vw, 46px) 28px; background: radial-gradient(circle at 50% -30%, #243f42 0, #0d171d 48%, #091116 100%); }
.topbar { max-width: 1540px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: 23px; font-weight: 800; font-style: italic; box-shadow: 0 0 0 5px rgba(233, 200, 71, .08); }
h1, h2, p { margin: 0; }
h1 { font-size: 20px; letter-spacing: .04em; }
h2 { font-size: 16px; letter-spacing: .015em; }
.eyebrow { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.header-actions { display: flex; gap: 8px; }
.text-button, .icon-button, .tool { border: 1px solid transparent; border-radius: 8px; background: transparent; color: #c3d0cd; transition: .18s ease; }
.text-button { padding: 8px 11px; }.text-button:hover { background: rgba(255,255,255,.07); color: #fff; }.text-button.danger:hover { color: #ff8b82; }

.workspace { max-width: 1540px; margin: auto; display: grid; grid-template-columns: 230px minmax(520px, 1fr) 250px; gap: 18px; align-items: start; }
.sidebar, .board-toolbar, .pitch-frame { border: 1px solid var(--line); box-shadow: 0 18px 45px rgba(0, 0, 0, .2); }
.sidebar { border-radius: 13px; background: linear-gradient(145deg, rgba(28, 47, 55, .92), rgba(18, 30, 36, .92)); padding: 17px; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }.panel-heading h2 span { color: var(--accent); font-size: 12px; font-weight: 600; }
.panel-hint { color: var(--muted); font-size: 12px; margin-bottom: 13px; }.icon-button { color: var(--accent); font-size: 24px; line-height: 26px; width: 28px; height: 28px; }.icon-button:hover { background: rgba(233,200,71,.12); }
.roster-list { display: grid; gap: 7px; }
.roster-row { position: relative; display: flex; align-items: center; gap: 8px; padding: 7px; border: 1px solid rgba(255,255,255,.055); border-radius: 8px; background: rgba(4, 12, 15, .22); }
.roster-token { display: grid; place-items: center; flex: 0 0 27px; width: 27px; height: 27px; border: 2px solid #9ed2ff; border-radius: 50%; color: #fff; background: #2872ae; font-size: 10px; font-weight: 800; }
.roster-name { flex: 1; min-width: 0; border: 0; outline: 0; color: #deebe7; background: transparent; font-size: 13px; }.roster-name:focus { color: #fff; }
.remove-player { opacity: 0; border: 0; color: #ee8881; background: transparent; font-size: 17px; }.roster-row:hover .remove-player { opacity: 1; }

.board-area { min-width: 0; }.board-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 12px; padding: 8px; border-radius: 12px; background: rgba(22, 37, 44, .94); }
.tool { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; font-size: 12px; }.tool span { font-size: 16px; line-height: 1; }.tool:hover { background: rgba(255,255,255,.08); color: #fff; }.tool.active { border-color: rgba(233,200,71,.55); color: #ffe170; background: rgba(233,200,71,.12); }.tool.compact { padding: 7px 9px; font-size: 18px; }.toolbar-rule { height: 24px; width: 1px; background: var(--line); margin: 0 3px; }
.palette { display: flex; gap: 6px; }.color { width: 18px; height: 18px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--swatch); }.color.active { box-shadow: 0 0 0 2px #16242b, 0 0 0 4px var(--swatch); }
.pitch-frame { padding: 11px; border-radius: 14px; background: #122128; }.pitch { position: relative; width: 100%; aspect-ratio: 1.4 / 1; overflow: hidden; border: 3px solid rgba(230,245,234,.78); border-radius: 4px; background-color: #217543; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0, rgba(255,255,255,.045) 8.33%, transparent 8.33%, transparent 16.66%); }
.pitch-lines, #drawCanvas, .players-layer { position: absolute; inset: 0; }.pitch-lines { pointer-events: none; }.halfway { position: absolute; top: 50%; width: 100%; border-top: 2px solid rgba(239,251,242,.78); }.centre-circle { position: absolute; top: 50%; left: 50%; width: 21%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 2px solid rgba(239,251,242,.78); border-radius: 50%; }.centre-dot, .penalty-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(239,251,242,.82); }.centre-dot { top: 50%; left: 50%; transform: translate(-50%,-50%); }.penalty-area { position: absolute; left: 50%; width: 37%; height: 16%; transform: translateX(-50%); border: 2px solid rgba(239,251,242,.78); }.penalty-area.top { top: -2px; border-top: 0; }.penalty-area.bottom { bottom: -2px; border-bottom: 0; }.goal { position: absolute; left: 50%; width: 16%; height: 3%; transform: translateX(-50%); border: 2px solid rgba(239,251,242,.78); }.goal.top { top: -3%; }.goal.bottom { bottom: -3%; }.penalty-dot.top { top: 11%; left: 50%; transform: translateX(-50%); }.penalty-dot.bottom { bottom: 11%; left: 50%; transform: translateX(-50%); }
#drawCanvas { z-index: 3; width: 100%; height: 100%; touch-action: none; }.players-layer { z-index: 2; }.player { position: absolute; z-index: 1; width: 38px; height: 38px; transform: translate(-50%, -50%); touch-action: none; user-select: none; cursor: grab; }.player.dragging { cursor: grabbing; z-index: 5; }.player-dot { display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid #b8e1ff; border-radius: 50%; color: #fff; background: linear-gradient(135deg,#378fd5,#17619a); box-shadow: 0 3px 8px rgba(0,0,0,.32); font-size: 11px; font-weight: 800; }.player-name { position: absolute; top: 41px; left: 50%; transform: translateX(-50%); min-width: max-content; max-width: 90px; padding: 2px 5px; overflow: hidden; border-radius: 3px; color: #fff; background: rgba(7,17,21,.72); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; text-align: center; }.player.gk .player-dot { border-color: #f7e489; background: linear-gradient(135deg,#dbad23,#a57400); }
.pitch-label { position: absolute; z-index: 1; color: rgba(232,249,236,.52); font-size: 10px; font-weight: 700; letter-spacing: .08em; pointer-events: none; }.pitch-label.opponent { top: 11px; left: 11px; }.pitch-label.home { right: 11px; bottom: 9px; }
.board-footer { display: flex; justify-content: space-between; gap: 12px; padding: 9px 4px 0; color: var(--muted); font-size: 11px; }.board-footer #toolTip { color: #bbc9c5; }
.field-label { display: block; margin: 18px 0 6px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; }.title-input, textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; outline: none; color: #eaf2ef; background: rgba(6,17,21,.35); transition: border-color .16s; }.title-input { padding: 9px 10px; }.title-input:focus, textarea:focus { border-color: rgba(233,200,71,.65); }textarea { min-height: 152px; padding: 10px; resize: vertical; line-height: 1.5; }.tip-card { display: flex; gap: 8px; margin-top: 16px; padding: 10px; border-left: 2px solid var(--accent); border-radius: 0 7px 7px 0; background: rgba(233,200,71,.07); color: #b8c8c3; font-size: 12px; }.tip-icon { color: var(--accent); }.export-button { width: 100%; margin-top: 15px; padding: 10px; border: 1px solid rgba(233,200,71,.7); border-radius: 8px; color: #ffe68a; background: rgba(233,200,71,.1); font-weight: 700; transition: .18s; }.export-button:hover { background: rgba(233,200,71,.2); }
.toast { position: fixed; z-index: 20; bottom: 24px; left: 50%; transform: translate(-50%, 80px); padding: 10px 14px; border-radius: 8px; color: #edf7f1; background: #192e32; box-shadow: 0 8px 22px rgba(0,0,0,.28); opacity: 0; transition: .25s; pointer-events: none; }.toast.show { transform: translate(-50%, 0); opacity: 1; }
@media (max-width: 1050px) { .workspace { grid-template-columns: 210px minmax(430px,1fr); }.tactics-panel { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }.tactics-panel .panel-heading, .tactics-panel .tip-card, .tactics-panel .export-button { grid-column: 1 / -1; }.tactics-panel textarea { min-height: 90px; } }
@media (max-width: 720px) { .app-shell { padding: 14px 10px 20px; }.topbar { align-items: flex-start; }.header-actions { flex-direction: column; align-items: flex-end; gap: 0; }.workspace { display: flex; flex-direction: column; }.sidebar, .board-area { width: 100%; }.board-area { order: -1; }.roster-list { grid-template-columns: 1fr 1fr; }.pitch { aspect-ratio: 1 / 1.05; }.board-footer { display: none; }.tactics-panel { display: block; }.tool { padding: 6px 7px; }.tool span { font-size: 14px; }.toolbar-rule { margin: 0 1px; }.player, .player-dot { width: 33px; height: 33px; }.player-name { top: 35px; font-size: 10px; } }

/* 双方阵容、轮换席与纵向球场 */
.workspace { grid-template-columns: 240px minmax(420px, 1fr) 260px; }
.roster-token.away { border-color: #ffbeb9; background: #ad3e39; }
.bench-heading { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); color: #d9e6e1; font-size: 12px; font-weight: 700; }.bench-heading span:last-child { color: var(--accent); font-weight: 500; }.bench-hint { margin: 5px 0 9px; }.bench-list { display: grid; gap: 7px; }.bench-card { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px dashed rgba(158,210,255,.35); border-radius: 8px; color: #dbe9e5; background: rgba(35,104,157,.15); cursor: grab; touch-action: none; user-select: none; }.bench-card:active { cursor: grabbing; }.bench-card .roster-token { pointer-events: none; }.bench-card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.bench-card .remove-player { margin-left: auto; }.bench-card:hover .remove-player { opacity: 1; }.empty-bench { padding: 10px; border: 1px dashed rgba(255,255,255,.13); border-radius: 7px; color: #738582; font-size: 12px; text-align: center; }
.pitch-frame { display: grid; place-items: center; }.pitch { width: min(100%, 560px); aspect-ratio: .68 / 1; }
.player.away .player-dot { border-color: #ffbdb7; background: linear-gradient(135deg,#dd625b,#982e2a); }.player.away.gk .player-dot { border-color: #f7e489; background: linear-gradient(135deg,#dbad23,#a57400); }
.notes-section { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--line); }.notes-heading { margin-bottom: 0; }
.bench-drag-ghost { position: fixed; z-index: 30; display: grid; place-items: center; width: 38px; height: 38px; transform: translate(-50%, -50%); border: 2px solid #b8e1ff; border-radius: 50%; color: white; background: #17619a; box-shadow: 0 6px 16px rgba(0,0,0,.36); pointer-events: none; font-size: 11px; font-weight: 800; }
.bench-name { flex: 1; min-width: 0; border: 0; outline: 0; color: #dbe9e5; background: transparent; font: inherit; }.bench-name:focus { color: #fff; }
@media (max-width: 1050px) { .workspace { grid-template-columns: 220px minmax(400px,1fr); }.tactics-panel > .panel-heading, .tactics-panel > .panel-hint, .tactics-panel > .opponent-list { grid-column: 1 / -1; } }
@media (max-width: 720px) { .pitch { width: 100%; aspect-ratio: .72 / 1; } }