.us-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.us-tags span {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  font-size: 11px;
}

.us-tags strong {
  margin-right: 4px;
  color: var(--forest);
}

.card-kicker {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-tags {
  min-height: 39px;
}

.card-tags span {
  font-size: 9px;
}

.source-actions { display: grid; justify-items: end; gap: 8px; }
.remove-source { border: 0; background: none; color: var(--muted); font-size: 11px; }
.remove-source:hover { color: var(--orange); }
.source-copy small { display:block; margin-top:6px; color:#82908b; font-size:10px; }
.source-reference { margin-bottom:3px; color:var(--orange); font-size:8px; font-weight:800; letter-spacing:.13em; }
.find-source { border:0; background:none; padding:0; color:var(--orange); font-size:11px; font-weight:800; }
.status-pill { white-space:nowrap; }
.source-confirmation { position:fixed; right:24px; bottom:24px; z-index:50; display:grid; grid-template-columns:38px minmax(180px,1fr) auto; gap:12px; align-items:center; width:min(480px,calc(100% - 32px)); padding:15px 16px; border-radius:10px; background:var(--forest); color:white; box-shadow:0 16px 50px rgba(10,30,26,.28); opacity:0; transform:translateY(22px); pointer-events:none; transition:.22s ease; }
.source-confirmation.show { opacity:1; transform:none; pointer-events:auto; }
.confirmation-check { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--lime); color:var(--forest); font-weight:900; }
.source-confirmation strong,.source-confirmation span { display:block; }
.source-confirmation span { margin-top:2px; color:#d5dfdb; font-size:12px; }
.source-confirmation button { border:0; background:transparent; color:var(--lime); font-size:11px; font-weight:800; }

.timeline-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 24px;
  align-items: center;
}

.timeline-copy > p {
  margin: 0 0 14px;
  color: var(--muted);
}

.practice-visual {
  align-self: stretch;
  margin: -8px -10px -8px 0;
  padding: 12px;
  border: 1px solid #dce4d9;
  border-radius: 9px;
  background: #f1f5ed;
}

.practice-visual figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 3px 5px;
  color: var(--forest);
  font-size: 10px;
}

.practice-visual figcaption span {
  color: var(--orange);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .13em;
}

.practice-visual svg { display: block; width: 100%; height: auto; }
.diagram-field { fill: #dfead8; stroke: #9eb69c; stroke-width: 1.5; }
.field-line { fill: none; stroke: #b6c9b2; stroke-width: 1; }
.team-a { fill: #163f35; stroke: white; stroke-width: 2; }
.team-b { fill: #ed7042; stroke: white; stroke-width: 2; }
.keeper { fill: #d8ff61; stroke: #163f35; stroke-width: 2; }
.ball { fill: white; stroke: #163f35; stroke-width: 1.5; animation: ballPulse 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.cones { fill: #ef9b42; stroke: #a75b1f; stroke-width: 1; }
.route,.press,.shot { fill: none; stroke: #163f35; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 7 5; animation: routeFlow 2s linear infinite; }
.route-ghost { opacity: .35; animation-delay: -.7s; }
.route-delay { animation-delay: -1s; }
.press { stroke: #ef7042; }
.shot { stroke: #ef7042; stroke-width: 2; }
.goal { fill: none; stroke: #526b65; stroke-width: 2; }
.compact-zone { fill: rgba(22,63,53,.07); stroke: #163f35; stroke-width: 1.5; stroke-dasharray: 4 3; }
.half-line { stroke: #9eb69c; stroke-width: 1.5; stroke-dasharray: 4 4; }
.diagram-legend text { fill: #64746f; font-family: "DM Sans", sans-serif; font-size: 8px; }
.diagram-legend .team-a,.diagram-legend .team-b { stroke-width: 1; }
.legend-route { animation: none; stroke-width: 1.5; }
.practice-box,.end-zone,.speed-zone { fill: rgba(255,255,255,.14); stroke: #769a77; stroke-width: 1.3; stroke-dasharray: 4 3; }
.score-zone { fill: rgba(216,255,97,.25); }
.mini-goal,.gate,.finish-line,.duel-line,.split-line,.set-mark { fill: none; stroke: #607b72; stroke-width: 2; }
.gate { stroke: #ef9b42; stroke-width: 3; }
.run-route,.breakout,.recovery-route,.pressure-arrow { fill: none; stroke: #ef7042; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 4; animation: routeFlow 2s linear infinite; }
.support-line,.link-line,.scan-arc,.shield-arc { fill: none; stroke: #163f35; stroke-width: 1.5; }
.neutral { fill: #f2cf59; stroke: white; stroke-width: 2; }
.balls { fill: white; stroke: #163f35; stroke-width: 1; }
.step-number,.zone-label { fill: #526b65; font-family: "DM Sans",sans-serif; font-size: 8px; font-weight: 800; }
.pressure-arrow { stroke: #ef7042; }
.motion-ball { fill: white; stroke: #102f29; stroke-width: 1.5; filter: drop-shadow(0 1px 2px rgba(16,47,41,.55)); }
.motion-player { fill: #163f35; stroke: white; stroke-width: 2; filter: drop-shadow(0 1px 2px rgba(16,47,41,.35)); }
.motion-player.secondary { fill: #163f35; }
.ball-carrier { stroke:#92d5e6; stroke-width:3.5; }
.start-ball { filter:drop-shadow(0 1px 2px rgba(16,47,41,.55)); }
.pass-route { fill:none; stroke:#163f35; stroke-width:2.4; stroke-linecap:round; stroke-dasharray:7 5; animation:routeFlow 2s linear infinite; }
.run-route { stroke:#ef7042; }
.shot-route { fill:none; stroke:#d74635; stroke-width:3; stroke-linecap:round; animation:shotPulse 1.4s ease-in-out infinite; }
.press-route { fill:none; stroke:#167c70; stroke-width:3; stroke-linecap:round; stroke-dasharray:5 4; animation:routeFlow 1.7s linear infinite; }
.opponent-pass { stroke:#ef7042; }
.opponent-attack { fill:none; stroke:#d74635; stroke-width:3; stroke-linecap:round; stroke-dasharray:7 4; animation:routeFlow 1.8s linear infinite; }
.defended-goal { stroke:#344d47; stroke-width:2.5; }
.defended-line { fill:none; stroke:#344d47; stroke-width:2.5; stroke-dasharray:5 3; }
.step-badge { fill:#163f35; font:800 8px "DM Sans",sans-serif; }
.step-badge.run-step { fill:#d65f35; }
.step-badge.shot-step { fill:#c93c31; }
.step-badge.press-step { fill:#167c70; }
.action-label { fill:#526b65; font:800 6.5px "DM Sans",sans-serif; letter-spacing:.04em; }
.diagram-format { margin:0 3px 5px; color:#64746f; font-size:9px; font-weight:700; }
.sequence-explainer { margin:5px 3px 0; padding:7px 8px; border-radius:5px; background:#e7eee3; color:#435b54; font-size:9px; line-height:1.35; }
.widget-flow-controls{display:grid;grid-template-columns:1fr;gap:5px;align-items:center;margin:5px 2px 0}.widget-flow-controls>span{display:flex;gap:4px;overflow:hidden}.widget-flow-controls i{display:flex;align-items:center;gap:3px;min-width:0;color:#536962;font-size:7px;font-style:normal;white-space:nowrap}.widget-flow-controls i b{display:grid;place-items:center;flex:0 0 13px;height:13px;border-radius:50%;background:#173f36;color:#fff;font-size:7px}.practice-visual[data-user-paused="true"] .motion-status i{animation-play-state:paused;background:#8a9792}
.library-practice .widget-flow-controls{grid-template-columns:1fr}.library-practice .widget-flow-controls>button{display:none}
.library-practice .widget-flow-controls::after{content:"– – –  Black dashed line = ball pass";display:block;margin-top:3px;color:#435b54;font-size:7px;font-weight:700;letter-spacing:.01em}
:is(.library-practice,.timeline-card) .practice-visual.has-motion .static-setup .moving-origin{opacity:.28;transition:opacity .25s ease}
:is(.library-practice,.timeline-card) .practice-visual.has-motion .motion-layer,
:is(.library-practice,.timeline-card) .practice-visual.has-motion .saved-practice-motion{opacity:1}
.session-practice-top{display:flex;align-items:center;gap:8px;margin-bottom:9px}.audit-badge{display:none;color:#3f6f4c;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.audit-badge.visible{display:inline}.timeline-copy>.card-tags{margin:10px 0 12px}
.session-source-link,.source-external-link{display:inline-flex;color:var(--orange);font-size:10px;font-weight:800;text-decoration:none}.session-source-link{margin:0 0 12px}.session-source-link:hover,.source-external-link:hover{text-decoration:underline}
.relearn-practice{border:1px solid #b9cabd;border-radius:6px;background:#eef4e9;color:#214b40;padding:6px 8px;font-size:9px;font-weight:800;white-space:nowrap}.relearn-practice:hover{background:#e2ecdd}.relearn-practice:disabled{opacity:.6;cursor:wait}.relearn-practice.complete{border-color:#8eb598;background:#e2f0df;color:#285f37}.relearn-practice.failed{border-color:#d9a394;background:#fae8e2;color:#9d3f2d}.session-practice-top .relearn-practice{margin-left:auto}
.auto-flow-step{pointer-events:none}.auto-flow-step circle{fill:#173f36;stroke:#d8ff61;stroke-width:1.2}.auto-flow-step text{fill:#fff;font:800 7px "DM Sans",sans-serif;text-anchor:middle;paint-order:stroke;stroke:#173f36;stroke-width:1px}.sequence-motion .motion-ball,.sequence-motion .motion-player{filter:drop-shadow(0 1px 2px rgba(16,47,41,.55))}
.safe-zone { fill:rgba(146,213,230,.2); stroke:#4b909f; stroke-width:1.4; stroke-dasharray:4 3; }
.three-mini-goals { fill:none; stroke:#526b65; stroke-width:2; }
.target-player { stroke:#8f7620; stroke-width:1.5; }
.target-label { fill:#5c4c12; font:800 7px "DM Sans",sans-serif; text-anchor:middle; pointer-events:none; }
.gate-label{fill:#755421;font:800 6px "DM Sans",sans-serif;letter-spacing:.04em}.pirouette-posts{fill:#ef9b42;stroke:#8a5a22;stroke-width:1}.pirouette-turn{stroke-dasharray:5 3}
.set-piece-label { fill:#a95037; font:800 6px "DM Sans",sans-serif; letter-spacing:.05em; }
.screen-label { fill:#274f46; }
.shooter-label { fill:#1d6e81; }
.set-piece-wall circle { stroke-width:1.5; }
.attacking-screen circle { stroke:#92d5e6; stroke-width:2; }
.free-kick-shot { stroke-width:3.5; }
.free-kick-pass { stroke:#163f35; stroke-width:2.7; }
.wall-shooter { fill:#163f35; stroke:#92d5e6; stroke-width:3; }
.set-piece-goal { fill:none; stroke:#526b65; stroke-width:2; }
.blocker-route { fill:none; stroke:#6aa5b4; stroke-width:1.8; stroke-dasharray:4 3; animation:routeFlow 2s linear infinite; }
.blocker-bracket { fill:none; stroke:#274f46; stroke-width:1.2; }
.build-goal { fill:none; stroke:#526b65; stroke-width:1.6; }
.buildup-team circle { stroke-width:1.5; }
.buildup-opposition { opacity:.82; }
.method-route { fill:none; stroke:#163f35; stroke-width:1.8; stroke-linecap:round; stroke-dasharray:5 4; animation:routeFlow 2s linear infinite,methodPulse 15s ease-in-out infinite; }
.method-two { animation-delay:-12s; }
.method-three { animation-delay:-9s; }
.method-four { animation-delay:-6s; }
.method-five { animation-delay:-3s; stroke:#d74635; }
.method-label { fill:#526b65; font:800 5.5px "DM Sans",sans-serif; letter-spacing:.03em; }
@keyframes methodPulse { 0%,18% { opacity:1; stroke-width:3; } 24%,100% { opacity:.18; stroke-width:1.5; } }
@keyframes shotPulse { 50% { stroke-width:4; opacity:.72; } }
.motion-status { display: inline-flex; align-items: center; gap: 5px; }
.motion-status i { width: 5px; height: 5px; border-radius: 50%; background: #ef7042; box-shadow: 0 0 0 0 rgba(239,112,66,.45); animation: livePulse 1.7s ease-out infinite; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 5px rgba(239,112,66,0); } 100% { box-shadow: 0 0 0 0 rgba(239,112,66,0); } }
.mover { animation: playerPulse 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.keeper-move { animation: keeperShift 2.1s ease-in-out infinite; }
.ball-two { animation-delay: -.9s; }

@keyframes routeFlow { to { stroke-dashoffset: -24; } }
@keyframes ballPulse { 50% { transform: scale(1.35); } }
@keyframes playerPulse { 50% { transform: scale(1.18); } }
@keyframes keeperShift { 50% { transform: translateY(12px); } }

@media (max-width: 900px) {
  .timeline-card { grid-template-columns: minmax(0, 1fr) 235px; gap: 16px; }
}

@media (max-width: 720px) {
  .timeline-card { grid-template-columns: 1fr; }
  .practice-visual { margin: 4px 0 0; max-width: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  .route,.press,.shot,.ball,.mover,.keeper-move { animation: none; }
  .motion-layer { display: none; }
  .motion-status i { animation: none; }
}

.text-button { text-decoration: none; }
.fun-card { border-left-color: #9fc62e; }

.card-grid { padding:0 clamp(24px,7vw,100px) 24px; grid-template-columns:1fr; gap:14px; max-width:1280px; margin:0 auto; }
.library-practice { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:26px; align-items:center; padding:20px 22px 20px 24px; background:var(--paper); border-left:5px solid var(--orange); border-radius:10px; box-shadow:0 5px 20px rgba(20,48,42,.06); }
.library-practice,.timeline-card{position:relative;cursor:zoom-in;transition:box-shadow .18s ease,transform .18s ease}
.library-practice:hover,.timeline-card:hover{box-shadow:0 12px 32px rgba(20,48,42,.13);transform:translateY(-1px)}
.library-practice:focus-visible,.timeline-card:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.practice-expand-hint{position:absolute;right:12px;top:10px;z-index:3;padding:5px 8px;border:1px solid #ced9ce;border-radius:999px;background:rgba(255,255,255,.92);color:var(--forest);font-size:9px;font-weight:800;letter-spacing:.04em;opacity:0;transform:translateY(-3px);transition:.18s ease;pointer-events:none}
:is(.library-practice,.timeline-card):is(:hover,:focus-visible) .practice-expand-hint{opacity:1;transform:none}
.practice-viewer-open{overflow:hidden}
.practice-viewer-dialog{width:min(1180px,calc(100% - 32px));max-width:none;height:min(850px,calc(100dvh - 32px));max-height:none;border-radius:16px;overflow:auto;background:var(--paper)}
.practice-viewer-dialog::backdrop{background:rgba(8,28,24,.78);backdrop-filter:blur(4px)}
.practice-viewer-shell{padding:26px 30px 32px}
.practice-viewer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;position:sticky;top:-26px;z-index:5;margin:-26px -30px 22px;padding:24px 30px 15px;background:rgba(251,249,243,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.practice-viewer-head .eyebrow{margin:0 0 4px}.practice-viewer-head h2{margin:0;font:800 clamp(25px,3vw,38px)/1.1 Manrope,sans-serif}.practice-viewer-layout{display:grid;grid-template-columns:minmax(240px,.65fr) minmax(520px,1.35fr);gap:28px;align-items:start}.practice-viewer-copy{padding:12px 4px}.practice-viewer-copy>p{color:var(--muted);font-size:17px;line-height:1.65}.practice-viewer-copy .us-tags{display:grid;gap:9px;margin:20px 0}.practice-viewer-copy .card-tags{margin:18px 0}.practice-viewer-board .practice-visual{width:100%;max-width:none;margin:0;padding:18px;border-radius:13px}.practice-viewer-board .practice-visual svg{width:100%;height:auto;min-height:430px}.practice-viewer-board .practice-visual figcaption{font-size:13px}.practice-viewer-board .sequence-explainer{font-size:13px;line-height:1.55;padding:12px}.practice-viewer-board .widget-flow-controls{font-size:11px}
.library-heading-actions{display:flex;align-items:center;gap:10px}.library-heading-actions #openPracticeTrash{border:1px solid var(--line)}.library-heading-actions #openPracticeTrash span{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:5px;padding:0 5px;border-radius:10px;background:#dfe6dc;font-size:11px}.delete-practice{border:0;background:transparent;color:#a44335;padding:8px 5px;font-size:11px;font-weight:800}.delete-practice:hover{text-decoration:underline}.practice-trash-dialog{width:min(680px,calc(100% - 32px));max-width:none}.practice-trash-shell{padding:28px}.practice-trash-shell .dialog-head h2{margin:0}.practice-trash-list{display:grid;gap:10px;margin-top:22px}.practice-trash-item{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px;border:1px solid var(--line);border-radius:10px;background:#fff}.practice-trash-item div{display:grid;gap:4px}.practice-trash-item span,.practice-trash-empty span{color:var(--muted);font-size:13px}.practice-trash-empty{display:grid;gap:7px;padding:34px;text-align:center;border:1px dashed var(--line);border-radius:10px;background:#f2f4ee}
.library-practice.fun-card { border-left-color:#9fc62e; }
.library-practice-copy { min-width:0; }
.library-practice-top { display:flex; align-items:center; gap:8px; margin-bottom:11px; }
.library-badge { padding:5px 8px; border-radius:4px; background:#e9ede7; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.library-duration { color:var(--orange); font-size:10px; font-weight:800; letter-spacing:.11em; }
.library-practice .eyebrow { margin-bottom:7px; }
.library-practice h3 { margin:0 0 7px; font-family:Manrope,sans-serif; font-size:22px; }
.library-practice-copy > p { margin:0 0 13px; color:var(--muted); line-height:1.5; }
.library-practice .practice-visual { margin:0; }
.library-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:13px; }
.library-foot .card-tags { margin:0; }
.library-pager { display:flex; justify-content:center; align-items:center; gap:18px; padding:10px 24px 80px; }
.library-pager strong { min-width:110px; text-align:center; font-size:13px; color:var(--muted); }
.library-pager button:disabled { opacity:.45; cursor:default; transform:none; }

@media (max-width:760px) {
  .library-practice { grid-template-columns:1fr; padding:18px; }
  .library-practice .practice-visual { max-width:none; }
  .library-foot { align-items:flex-start; flex-direction:column; }
  .practice-expand-hint{opacity:1;transform:none}
  .practice-viewer-dialog{width:calc(100% - 16px);height:calc(100dvh - 16px)}
  .practice-viewer-shell{padding:20px 16px 26px}.practice-viewer-head{top:-20px;margin:-20px -16px 18px;padding:18px 16px 12px}.practice-viewer-layout{grid-template-columns:1fr}.practice-viewer-board{order:-1}.practice-viewer-board .practice-visual svg{min-height:0}
  .library-heading-actions{width:100%;justify-content:flex-start}.page-heading .library-heading-actions .button{display:inline-flex}.practice-trash-shell{padding:20px}.practice-trash-item{align-items:flex-start}.practice-trash-item .button{display:inline-flex}
}