/* Released draft workspace only; shared SEO pages retain their existing layout. */
.draft-page .seo-hero { padding: 54px 0 28px; background: radial-gradient(ellipse at 15% 0, #24413980, transparent 65%), #0b110f; }
.draft-page .seo-hero h1 { font-size: clamp(2rem, 4vw, 3.4rem); }
.draft-page .seo-lead { font-size: 1rem; }
.draft-page .seo-hero-grid { grid-template-columns: minmax(0, 1fr) 300px; }
.draft-page .seo-summary { border-inline-start: 2px solid #83ff32; }
.draft-page .seo-main { padding-top: 22px; }
.draft-page .seo-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; }
.draft-page .seo-content, .draft-page .pro-cta-sidebar, .draft-page .seo-sidebar, .draft-page .pro-cta-card { min-width: 0; }
.draft-page .seo-content { grid-template-columns: minmax(0, 1fr); }
.draft-page .seo-content > * { min-width: 0; }
.draft-page #tool { padding: 28px; background: #111a16; border-color: #34483d; border-radius: 18px !important; }
.draft-page #tool > h2 { font-size: clamp(1.2rem, 2vw, 1.65rem); margin-bottom: 8px; }
.draft-page #tool > p { color: #aebeb3; font-size: .9rem; max-width: 780px; }
.draft-page .seo-tool { display: block; padding: 0; border: 0; background: transparent; }
.draft-workspace { min-width: 0; margin-top: 20px; --draft-accent: #b6f36b; }
.draft-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.draft-formation { display: flex; align-items: center; gap: 10px; color: #b9c8bf; font-size: .85rem; }
.draft-formation select { min-height: 44px; padding: 8px 32px 8px 12px; background: #1a2921; color: #f1f7f3; border: 1px solid #405347; font: inherit; font-weight: 700; }
.draft-view { display: flex; padding: 4px; background: #080e0b; border: 1px solid #2a3b30; border-radius: 10px; margin-inline-start: auto; }
.draft-view button { border: 0; padding: 8px 16px; min-height: 38px; background: transparent; color: #bccbbf; font: inherit; font-size: .85rem; cursor: pointer; border-radius: 7px; }
.draft-view button[aria-pressed="true"] { background: #2b4032; color: #d1ffa0; }
.draft-quiet { min-height: 44px; padding: 9px 13px; background: #1b2921; border: 1px solid #3b5143; color: #d9e7dc; border-radius: 8px; font: inherit; font-size: .85rem; cursor: pointer; }
.draft-workspace button:disabled { opacity: .45; cursor: not-allowed; }
.draft-workspace button:focus-visible, .draft-workspace select:focus-visible { outline: 3px solid #c9ff8b; outline-offset: 4px; }
.draft-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 18px 0 12px; border: 1px solid #304637; border-radius: 12px; background: #16221a; }
.draft-stats > div { padding: 16px 20px; display: flex; flex-direction: column; gap: 5px; }
.draft-stats > div + div { border-inline-start: 1px solid #304637; }
.draft-stats span { color: #a7bdac; font-size: .75rem; }
.draft-stats strong { color: #edf6ef; font-size: 1.65rem; line-height: 1.2; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.draft-stats > div:first-child strong { color: #c8ff8a; }
.draft-hint { font-size: .8rem; color: #acc3b2; margin: 0 0 16px; }
.draft-board { position: relative; isolation: isolate; width: 100%; max-width: 560px; height: 520px; margin-inline: auto; overflow: hidden; border: 1px solid #47694c; border-radius: 12px; background: repeating-linear-gradient(0deg, #1a3b2a 0%, #1a3b2a 10%, #1d422f 10%, #1d422f 20%); }
.draft-board::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, transparent 30%, #051c1380); }
.draft-pitch-lines { position: absolute; inset: 5% 6%; border: 1px solid #acdb9b40; pointer-events: none; }
.draft-pitch-lines::before { content: ''; position: absolute; inset: 50% 0 auto; border-top: 1px solid #acdb9b40; }
.draft-pitch-lines::after { content: ''; position: absolute; width: 23%; aspect-ratio: 1; border: 1px solid #acdb9b40; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.draft-pitch-lines i, .draft-pitch-lines b { position: absolute; left: 28%; width: 44%; height: 15%; border: 1px solid #acdb9b40; }
.draft-pitch-lines i { top: -1px; }
.draft-pitch-lines b { bottom: -1px; }
.draft-pitch-lines span { position: absolute; width: 3px; height: 3px; background: #b5dda4; border-radius: 50%; left: 50%; top: 50%; }
.draft-slots { position: absolute; inset: 0; direction: ltr; }
.draft-slot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 62px; }
.draft-slot-card { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #fff; cursor: pointer; transition: transform .18s ease; }
.draft-slot-card:hover { transform: translateY(-3px); }
.draft-card-visual { width: 100%; border-radius: 0; }
.draft-role { color: #d4ffb0; font-size: .65rem; font-weight: 800; letter-spacing: .06em; line-height: 1.6; }
.draft-role.is-nearby { color: #ffd78e; }
.draft-slot-lock { position: absolute; right: -10px; top: 17px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #6a8c72; background: #11291f; color: #d8efce; font-size: 1rem; cursor: pointer; display: grid; place-items: center; }
.draft-slot-lock svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.draft-slot.is-locked .draft-slot-lock { color: #152710; background: #c8ff8a; border-color: #c8ff8a; }
.draft-slot.is-selected .draft-slot-card { outline: 2px solid #d0ff9a; outline-offset: 3px; }
.draft-board-label { display: none; }
.draft-board-label > span { color: #c8ff8a; }
.draft-board[data-view="cards"] { max-width: none; height: auto; padding: 20px; background: #0d1812; }
.draft-board[data-view="cards"] .draft-pitch-lines, .draft-board[data-view="cards"] .draft-board-label { display: none; }
.draft-board[data-view="cards"] .draft-slots { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 16px; }
.draft-board[data-view="cards"] .draft-slot { position: relative; left: auto; top: auto; transform: none; width: 100%; max-width: 130px; margin: auto; }
.draft-player-panel { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 16px; margin-top: 14px; border: 1px solid #4e6c45; border-radius: 10px; background: #1d2b1c; }
.draft-player-panel[hidden] { display: none; }
.draft-player-panel > div { display: flex; flex-direction: column; flex: 1; min-width: 140px; gap: 3px; }
.draft-player-panel span, .draft-player-panel small { color: #b9cbb1; font-size: .75rem; }
.draft-footer { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.draft-page .draft-footer .seo-btn { min-height: 46px; padding: 10px 18px; background: #18231c; color: #d8e7dd; border: 1px solid #405748; border-radius: 8px !important; font-size: .85rem; }
.draft-page .draft-footer .seo-draft-ai-btn { display: inline-flex; justify-content: center; align-items: center; gap: 9px; width: auto; min-width: 0; min-height: 46px; border: 1px solid #83ff32; border-radius: 8px !important; background: #83ff32; color: #102009; padding: 10px 18px; font: inherit; font-size: .85rem; font-weight: 700; line-height: 1.4; text-align: center; }
.draft-footer .seo-draft-ai-btn svg { width: 19px; height: 19px; flex: 0 0 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.draft-transfer-hint { margin-top: 8px; color: #a4b6a9; font-size: .73rem; text-align: center; }
.draft-status { margin-top: 16px; color: #c5f498; font-size: .85rem; }
.draft-save-note { color: #a4b6a9; font-size: .72rem; margin-top: 4px; }
@media (max-width: 1050px) { .draft-page .seo-layout { grid-template-columns: minmax(0, 1fr); } .draft-page .pro-cta-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 700px) {
  .draft-page .seo-hero { padding: 30px 0 22px; }
  .draft-page .seo-hero-grid { grid-template-columns: 1fr; gap: 20px; }
  .draft-page .seo-summary { padding: 16px; }
  .draft-page .seo-summary h2 { font-size: 1rem; }
  .draft-page .seo-summary p { font-size: .85rem; }
  .draft-page #tool { padding: 18px 12px; }
  .draft-toolbar { gap: 8px; }
  .draft-stats > div { padding: 13px 10px; }
  .draft-stats strong { font-size: 1.3rem; }
  .draft-stats span { font-size: .65rem; }
  .draft-board { max-width: 400px; height: 450px; }
  .draft-board[data-view="cards"] { height: auto; }
  .draft-slot { width: clamp(40px, 12vw, 48px); }
  .draft-slot-lock { width: 28px; height: 28px; right: -6px; }
  .draft-footer > button { width: 100% !important; }
  .draft-board[data-view="cards"] .draft-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; }
  .draft-board[data-view="cards"] { padding: 12px; }
  .draft-page .pro-cta-sidebar { grid-template-columns: minmax(0, 1fr); }
  .draft-view button { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) { .draft-slot-card { transition: none; } .draft-slot-card:hover { transform: none; } }
@media (max-width: 360px) { .draft-page .site-header.has-account-entry .site-logo span { display: none; } }