.directions-view{max-width:1500px;margin:0 auto}.directions-panel{padding:28px;background:linear-gradient(145deg,var(--color-surface),#f7fafb)}
.directions-heading{display:flex;align-items:start;justify-content:space-between;gap:20px}.directions-heading h2{font-size:27px;margin:5px 0}.directions-heading p{color:#607888;max-width:760px;line-height:1.5}.directions-revision{font-size:11px;color:#8697a2;white-space:nowrap}
.directions-skills{display:flex;gap:var(--space-2);margin:18px 0}.directions-skills button{border-radius:999px;padding:10px 17px}.directions-skills button[aria-pressed=true]{background:var(--color-text);color:white;border-color:var(--color-text)}
.directions-filters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-3);margin:18px 0 22px}.directions-filters label{min-width:0}.directions-filters select{width:100%}
#directionsStatus{color:#8a582f;min-height:1.4em;font-size:13px}.directions-stats{display:flex;gap:var(--space-3);flex-wrap:wrap;margin:14px 0 24px}.directions-stats span{border:1px solid var(--color-border);background:white;border-radius:9px;padding:13px 18px;color:#57707d;font-size:13px}.directions-stats b{color:#132f40;font-size:21px;margin-right:5px}
.directions-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.9fr);gap:20px}.directions-layout.attack-coded{grid-template-columns:1fr}.directions-court-wrap,.directions-table-wrap,.directions-actions{background:var(--color-surface);border:1px solid #dfe9ee;border-radius:var(--radius-lg);padding:19px}.directions-court-wrap h3,.directions-table-wrap h3,.directions-actions h3{margin:0 0 12px;font-size:17px;color:#173749}.directions-court-wrap small,.directions-table-wrap p{color:#69808d;font-size:12px;line-height:1.5}.directions-svg{display:block;width:100%;max-height:520px;background:radial-gradient(circle at 50% 50%,#f7fbfc,#eef5f6);border-radius:var(--radius-lg)}.direction-code-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:var(--space-3)}.direction-code-card{min-width:0;padding:11px;border:1px solid var(--color-border);border-radius:10px;background:#f9fcfd}.direction-code-card header{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-bottom:var(--space-2);color:#204556}.direction-code-card header strong{font-size:17px}.direction-code-card header span,.direction-code-card small{font-size:11px;color:var(--color-text-muted)}.direction-code-card .directions-svg{max-height:none}.direction-code-card>p{min-height:120px;color:var(--color-text-muted);font-size:12px}.direction-code-card small{display:block;margin-top:var(--space-2)}.direction-half rect{fill:var(--color-court);stroke:var(--color-court-line);stroke-width:2}.direction-half path{fill:none;stroke:var(--color-court-grid);stroke-width:1}.direction-zone-label{fill:#375564;font-size:16px;font-weight:700;opacity:.58}.direction-side-label{font-size:13px;font-weight:700;fill:#467080;letter-spacing:1px}.direction-net{stroke:var(--color-text);stroke-width:4;stroke-dasharray:9 5}.direction-net-label{fill:var(--color-text);font-size:10px;font-weight:700}.direction-arrow{cursor:pointer}.direction-arrow path{fill:none;stroke:var(--color-primary);opacity:.72;transition:opacity .15s,stroke .15s}.direction-arrow:hover path,.direction-arrow.selected path{stroke:var(--color-primary-ink);opacity:1}.direction-origin{cursor:pointer}.direction-origin circle{fill:var(--color-primary);opacity:.72;stroke:var(--color-surface);stroke-width:2}.direction-origin:hover circle,.direction-origin.selected circle{fill:var(--color-primary-ink);opacity:1}.direction-origin text{fill:var(--color-surface);font-weight:700;font-size:16px;pointer-events:none}.direction-marker path{fill:var(--color-primary)}#directionsTable{max-height:490px;overflow:auto}#directionsTable th,#directionsTable td{padding:9px;font-variant-numeric:tabular-nums}#directionsTable th:first-child,#directionsTable td:first-child{padding-left:9px}#directionsTable tr{cursor:default}#directionsTable button{border:0;background:transparent;color:#087f9a;padding:3px;font-weight:700}#directionsTable tr.active{background:#eaf7f7}
.direction-code-card .direction-net-label{display:none}.directions-actions{margin-top:20px}.direction-action{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);border-top:1px solid #e7edef;padding:13px 0}.direction-action>div{display:flex;flex-direction:column;gap:var(--space-1)}.direction-action strong{font-size:14px}.direction-action span,.direction-action small{font-size:12px;color:var(--color-text-muted)}.direction-action button{flex:none;background:#e4f5f7;border-color:#a5d9e2;color:#116477}
@media(max-width:1100px){.directions-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.directions-layout{grid-template-columns:1fr}}@media(max-width:650px){.directions-panel{padding:var(--space-4);display:flex;flex-direction:column}.directions-heading{display:block;order:1}.directions-skills{order:2;flex-wrap:wrap}.directions-revision{white-space:normal}.directions-stats,.directions-panel>#directionsStatus{order:3}.directions-layout{display:contents}.directions-court-wrap{order:4}.directions-filters{order:5;grid-template-columns:repeat(2,minmax(0,1fr))}.directions-table-wrap{order:6}.directions-actions{order:7}.directions-stats span{flex:1 1 100px}.direction-code-gallery{grid-template-columns:1fr}.direction-code-card{max-width:360px;width:100%;justify-self:center}.direction-action{align-items:start;flex-direction:column}.view-nav{align-items:start;gap:10px}.view-nav>div{flex-wrap:wrap;justify-content:end}}
.directions-view .direction-code-card>header{height:auto;min-height:44px;padding:8px 11px;border:0;border-bottom:3px solid var(--color-primary);border-radius:7px;background:var(--color-code-header);color:#f5fdff;display:flex;align-items:center;justify-content:space-between;gap:6px}
.directions-view .direction-code-card>header strong{color:var(--color-surface);font-size:19px;font-weight:800;letter-spacing:.4px}
.directions-view .direction-code-card>header span{color:var(--color-primary-soft);font-size:11px;font-weight:600}
.direction-code-types{display:flex;justify-content:center;gap:5px;margin:7px 0;color:#244653;font-size:11px;font-weight:700}
.direction-code-types span{padding:3px 6px;border-radius:4px;background:#e8f2f5}
.direction-code-types span:nth-child(1){border-left:3px solid var(--color-type-hard)}.direction-code-types span:nth-child(2){border-left:3px solid var(--color-type-soft)}.direction-code-types span:nth-child(3){border-left:3px solid var(--color-type-tip)}
.direction-type-legend{display:flex;flex-wrap:wrap;gap:14px;margin:2px 0 12px;color:#294b59;font-size:12px;font-weight:600}
.direction-type-legend span{display:inline-flex;align-items:center;gap:6px}.direction-type-legend i{display:inline-block;width:25px;border-top:3px solid var(--color-type-hard)}.direction-type-legend .legend-soft{border-top:3px dashed var(--color-type-soft)}.direction-type-legend .legend-tip{border-top:3px dotted var(--color-type-tip)}
.direction-code-card .direction-arrow.direction-type-H path{stroke:var(--color-type-hard);opacity:.9}
.direction-code-card .direction-arrow.direction-type-P path{stroke:var(--color-type-soft);opacity:.95}
.direction-code-card .direction-arrow.direction-type-T path{stroke:var(--color-type-tip);stroke-dasharray:1.5 7;stroke-linecap:round;opacity:.98}
.direction-code-card .direction-arrow.direction-type-unknown path{stroke:#6b7280;stroke-dasharray:4 5}
.direction-code-card .direction-arrow.selected path,.direction-code-card .direction-arrow:hover path{opacity:1;filter:drop-shadow(0 0 3px var(--color-primary))}
.direction-marker-H path{fill:var(--color-type-hard)}.direction-marker-P path{fill:var(--color-type-soft)}.direction-marker-T path{fill:var(--color-type-tip)}.direction-marker-unknown path{fill:#6b7280}
.directions-filters{grid-template-columns:repeat(7,minmax(0,1fr))}
@media(max-width:1100px){.directions-filters{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.directions-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}
.directions-view .direction-code-gallery{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),260px));gap:14px;align-items:start;justify-content:start}
.direction-type-summary{flex:1 1 100%;display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:9px;align-items:stretch}
.direction-type-summary>span{display:flex;flex-direction:column;gap:5px;border:1px solid var(--color-border);border-left:4px solid #6b7280;border-radius:9px;padding:10px 13px;background:#f8fbfc}
.direction-type-summary>span.direction-summary-H{border-left-color:var(--color-type-hard)}.direction-type-summary>span.direction-summary-P{border-left-color:var(--color-type-soft)}.direction-type-summary>span.direction-summary-T{border-left-color:var(--color-type-tip)}
.direction-type-summary strong{font-size:12px;color:#365565}.direction-type-summary b{font-size:19px;color:#18394b}.direction-type-summary small{grid-column:1/-1;color:var(--color-text-muted)}
.directions-view .direction-code-card .directions-svg{width:100%;max-width:230px;height:auto;min-height:0;max-height:420px;margin-inline:auto}.directions-view .direction-arrow.selected path{filter:drop-shadow(0 0 4px var(--color-primary));opacity:1}
@media(max-width:650px){.direction-type-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.directions-view .direction-code-gallery{grid-template-columns:minmax(0,300px);justify-content:center}.directions-view .direction-code-card .directions-svg{max-width:208px;max-height:380px}}
.directions-view .direction-code-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 7px;min-width:0}
.directions-view .direction-code-card .direction-code-description{display:inline;margin:0;color:var(--color-primary-soft);font-size:11px;font-weight:500;line-height:1.35;overflow-wrap:anywhere}
.directions-view .direction-code-card>header>span{flex-shrink:0;white-space:nowrap}
#directionsTable .direction-code-meaning,.opponent-direction-table .direction-code-meaning{display:block;margin-top:2px;color:var(--color-text-muted);font-size:11px;line-height:1.25;font-weight:400}
.direction-setter-glossary{margin-top:var(--space-4);border-top:1px solid var(--color-border);padding-top:12px;color:#294b59}
.direction-setter-glossary>strong{display:block;font-size:13px}.direction-setter-glossary>small{display:block;margin:2px 0 8px;color:var(--color-text-muted);font-size:11px}
.direction-setter-glossary>div{display:flex;flex-wrap:wrap;gap:6px}.direction-setter-glossary>div>span{display:inline-flex;align-items:baseline;gap:5px;border:1px solid var(--color-border);background:#f5fafb;border-radius:var(--radius-sm);padding:4px 7px}
.direction-setter-glossary b{font-size:12px;color:var(--color-code-header)}.direction-setter-glossary span small{font-size:11px;color:#526d7c}

.direction-filter-bar{background:#f1f7f9;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-3);margin-bottom:var(--space-4)}
.direction-filter-bar .directions-filters{margin:0;gap:10px}
.direction-filter-summary{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:var(--space-3)}
.direction-filter-summary button,.direction-filter-chip{padding:6px 9px;border:1px solid #9ecbd6;border-radius:18px;background:var(--color-surface);color:#184b60;font-size:12px}
.direction-filter-summary button[data-clear-all]{margin-left:auto;border-color:transparent;background:transparent;text-decoration:underline}
.direction-filter-summary small{color:var(--color-text-muted)}
.direction-selection{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:10px;margin-bottom:var(--space-3);background:#fff6df;border:1px solid #e3b854;border-radius:var(--radius-md);font-size:13px;color:#594115}
.direction-selection:empty{display:none}.direction-selection button{font-size:12px;padding:6px 9px;background:var(--color-surface)}
.directions-view .direction-code-card:has(.selected){border:2px solid var(--color-primary);padding:10px;background:var(--color-primary-soft)}
.directions-view .direction-code-card>header{flex-wrap:wrap}.directions-view .direction-code-card>header>span{font-size:10px}
.directions-view .direction-arrow.selected path{stroke:var(--color-primary-ink);opacity:1;filter:drop-shadow(0 0 2px var(--color-primary))}
#directionsTable tr.active{background:#fff2cc;box-shadow:inset 4px 0 var(--color-primary)}#directionsTable tr.active button{color:#8a4800}
@media(max-width:650px){.directions-panel .direction-filter-bar{order:2}.directions-panel .directions-skills{order:1}.direction-filter-summary button{min-height:36px}.direction-selection button{min-height:36px}.directions-court-wrap{padding:var(--space-3)}}
.direction-evaluation-group path{fill:none;opacity:.74;transition:opacity .15s,stroke .15s}.direction-evaluation-group:hover path,.direction-evaluation-group.selected path{opacity:1}.direction-evaluation-positive{stroke:var(--color-success,#16845b)}.direction-evaluation-negative{stroke:var(--color-danger,#c94a4a);stroke-dasharray:7 4}.direction-evaluation-neutral{stroke:var(--color-warning,#b8860b);stroke-dasharray:2 4}.direction-evaluation-unknown{stroke:var(--color-primary);stroke-dasharray:5 4}.direction-code-card{cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}.direction-code-card:hover{border-color:var(--color-primary)}.direction-code-card.selected{border:2px solid var(--color-primary);padding:10px;background:var(--color-primary-soft);box-shadow:0 4px 14px rgba(24,113,132,.12)}
.direction-evaluation-legend{display:inline-flex;align-items:center;gap:5px;margin-left:8px;white-space:nowrap}.direction-evaluation-legend i{display:inline-block;width:18px;border-top:3px solid currentColor}.direction-evaluation-legend .direction-evaluation-positive{color:var(--color-success,#16845b)}.direction-evaluation-legend .direction-evaluation-negative{color:var(--color-danger,#c94a4a);border-top-style:dashed}.direction-evaluation-legend .direction-evaluation-unknown{color:var(--color-primary);border-top-style:dotted}.direction-code-card[data-selected="true"]{border:2px solid var(--color-primary);padding:10px;background:var(--color-primary-soft);box-shadow:0 4px 14px rgba(24,113,132,.12)}