.playbook-ai-page { min-height:100vh; color:#eaf5ff; background:#06111f; }
.playbook-ai-page main { overflow:hidden; background:#06111f; }
.playbook-hero { position:relative; padding:145px 0 78px; background:radial-gradient(circle at 75% 25%,rgba(113,230,215,.13),transparent 24rem),radial-gradient(circle at 20% 0,rgba(255,207,96,.12),transparent 22rem),linear-gradient(135deg,#071322,#0d2c46 58%,#06111e); }
.playbook-hero::after { position:absolute; right:-12rem; bottom:-22rem; width:42rem; height:42rem; border:1px solid rgba(255,214,109,.14); border-radius:50%; box-shadow:0 0 0 36px rgba(255,214,109,.025),0 0 0 76px rgba(116,231,215,.02); content:""; }
.playbook-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr); gap:48px; align-items:center; }
.playbook-kicker { color:#f5d77f; font-size:.64rem; font-weight:900; letter-spacing:.17em; }
.playbook-hero h1 { max-width:700px; margin:17px 0; color:#f8fbff; font-size:clamp(2.7rem,6.4vw,5.5rem); font-weight:950; letter-spacing:-.08em; line-height:.96; }
.playbook-hero h1 em { color:#ffd66d; font-style:normal; text-shadow:0 0 28px rgba(255,198,74,.2); }
.playbook-hero p { max-width:650px; color:#b4c7d8; font-size:1rem; line-height:1.8; }
.playbook-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:27px; }
.playbook-actions a { display:inline-flex; min-height:45px; align-items:center; gap:8px; border-radius:11px; padding:11px 15px; font-size:.74rem; font-weight:850; text-decoration:none; transition:transform .2s ease,box-shadow .2s ease; }
.playbook-primary { color:#172637; background:linear-gradient(110deg,#ffd66d,#fff0b1); box-shadow:0 10px 25px rgba(238,184,77,.2); }
.playbook-secondary { border:1px solid rgba(157,197,232,.2); color:#c9e0ed; background:rgba(255,255,255,.045); }
.playbook-actions a:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.25); }
.playbook-orbit { position:relative; display:grid; width:min(100%,390px); aspect-ratio:1; place-items:center; margin:auto; border:1px solid rgba(255,214,109,.2); border-radius:50%; background:radial-gradient(circle,rgba(255,199,77,.18),rgba(10,42,64,.7) 46%,rgba(5,17,30,.25) 70%); box-shadow:0 0 70px rgba(97,222,210,.11),inset 0 0 65px rgba(255,211,112,.08); }
.orbit-ring { position:absolute; border:1px dashed rgba(255,216,119,.3); border-radius:50%; animation:playbookSpin 19s linear infinite; }
.orbit-ring-one { inset:12%; }.orbit-ring-two { inset:27%; border-style:solid; border-color:rgba(116,231,215,.25) transparent; animation-direction:reverse; animation-duration:11s; }
.orbit-core { position:relative; z-index:2; display:grid; width:145px; height:145px; place-items:center; border:1px solid rgba(255,226,137,.68); border-radius:50%; color:#fff1bd; background:radial-gradient(circle at 35% 25%,#a97732,#183952 72%); box-shadow:0 0 0 14px rgba(255,211,112,.06),0 0 55px rgba(238,184,77,.35); text-align:center; }
.orbit-core strong { display:block; font-size:2.5rem; letter-spacing:-.08em; line-height:.9; }.orbit-core span { max-width:90px; color:#ffe3a0; font-size:.48rem; font-weight:850; letter-spacing:.1em; }
.orbit-node { position:absolute; z-index:3; padding:8px 10px; border:1px solid rgba(157,197,232,.2); border-radius:9px; color:#d9eaf4; background:rgba(7,22,39,.86); box-shadow:0 10px 22px rgba(0,0,0,.2); font-size:.55rem; letter-spacing:.08em; }
.node-one { top:15%; left:-3%; color:#ffe3a0; }.node-two { right:-2%; bottom:19%; color:#91f1e1; }.node-three { top:7%; right:12%; }
.playbook-dashboard { padding:55px 0 74px; background:linear-gradient(180deg,#06111f,#0a1c2d 55%,#06111f); }
.guide-section { padding:58px 0 62px; background:linear-gradient(135deg,#081827,#0b2639); }
.guide-intro { margin:0 0 22px; }
.guide-flow { display:grid; grid-template-columns:1fr 28px 1fr 28px 1fr; align-items:center; gap:9px; margin-bottom:20px; }
.guide-flow>div { display:grid; grid-template-columns:32px minmax(0,1fr); column-gap:9px; align-items:center; padding:13px; border:1px solid rgba(116,231,215,.16); border-radius:13px; background:rgba(116,231,215,.05); }
.guide-flow span { display:grid; width:30px; height:30px; grid-row:1/3; place-items:center; border:1px solid rgba(255,214,109,.3); border-radius:9px; color:#ffd66d; background:rgba(255,214,109,.08); font-size:.6rem; font-weight:900; }
.guide-flow strong { color:#eaf8ff; font-size:.72rem; }.guide-flow small { margin-top:3px; color:#8ca7ba; font-size:.56rem; }.guide-flow>i { color:#ffd66d; font-size:.7rem; text-align:center; }
.guide-table-wrap { overflow-x:auto; border:1px solid rgba(157,197,232,.14); border-radius:16px; background:rgba(4,15,27,.45); }
.guide-table { width:100%; min-width:800px; border-collapse:collapse; color:#dfeefa; font-size:.68rem; text-align:center; }.guide-table th,.guide-table td { padding:13px 11px; border-bottom:1px solid rgba(157,197,232,.1); }.guide-table thead th { color:#cce0ed; background:rgba(116,231,215,.08); font-size:.59rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }.guide-table tbody tr:last-child th,.guide-table tbody tr:last-child td { border-bottom:0; }.guide-table tbody tr:hover th,.guide-table tbody tr:hover td { background:rgba(255,255,255,.035); }.guide-table tbody th { min-width:100px; color:#ffd66d; text-align:left; }.guide-table tbody th span,.guide-table tbody th small { display:block; }.guide-table tbody th small { margin-top:3px; color:#819db2; font-size:.53rem; font-weight:600; }.guide-table td { color:#b9cfde; font-weight:750; }.guide-table .jackpot-cell { color:#ffe18b; font-weight:900; }
.guide-note { margin:13px 0 0; color:#829caf; font-size:.61rem; line-height:1.6; }.guide-note i { margin-right:5px; color:#7de8dc; }
.playbook-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }.playbook-stats>div { padding:17px; border:1px solid rgba(157,197,232,.13); border-radius:15px; background:linear-gradient(145deg,rgba(17,38,62,.95),rgba(8,22,39,.97)); }.stat-label { color:#7de8dc; font-size:.53rem; font-weight:900; letter-spacing:.12em; }.playbook-stats strong { display:block; margin:10px 0 3px; color:#f5f9ff; font-size:1.55rem; letter-spacing:-.06em; }.playbook-stats small { color:#819ab2; font-size:.61rem; }
.section-intro { display:flex; align-items:end; justify-content:space-between; gap:25px; margin:53px 0 19px; }.section-intro h2 { margin:7px 0 0; color:#eef8ff; font-size:clamp(1.35rem,3vw,2.1rem); font-weight:900; letter-spacing:-.05em; }.section-intro>p { max-width:390px; margin:0; color:#8ea6bb; font-size:.73rem; line-height:1.65; }
.round-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }.round-card { position:relative; overflow:hidden; padding:15px; border:1px solid rgba(157,197,232,.14); border-radius:17px; background:linear-gradient(145deg,rgba(17,40,64,.95),rgba(7,22,39,.98)); box-shadow:0 15px 30px rgba(0,0,0,.16); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }.round-card::after { position:absolute; right:-30px; top:-30px; width:100px; height:100px; border:1px solid rgba(255,214,109,.12); border-radius:50%; content:""; }.round-card:hover { transform:translateY(-4px); border-color:rgba(255,214,109,.45); box-shadow:0 20px 35px rgba(0,0,0,.25),0 0 24px rgba(255,198,74,.08); }
.round-card-top { display:flex; justify-content:space-between; align-items:center; }.round-chip { color:#ffe3a0; font-size:.55rem; font-weight:900; letter-spacing:.08em; }.round-chip i { margin-right:4px; color:#7de8dc; }.round-views { color:#7892aa; font-size:.58rem; }.round-card h3 { margin:14px 0 3px; color:#f0f7ff; font-size:1.02rem; }.round-card h3 small { display:block; margin-top:3px; color:#8da5b9; font-size:.64rem; font-weight:600; }
.round-signal { display:flex; align-items:center; gap:4px; margin:13px 0 10px; }.round-signal span { width:6px; height:6px; border-radius:50%; background:#7de8dc; box-shadow:0 0 8px rgba(125,232,220,.7); }.round-signal span:nth-child(2) { opacity:.55; }.round-signal span:nth-child(3) { opacity:.28; }.round-signal b { margin-left:4px; color:#7f9ab0; font-size:.48rem; letter-spacing:.1em; }
.level-strip { display:flex; gap:3px; flex-wrap:wrap; }.level-dot { display:grid; width:21px; height:21px; place-items:center; border:1px solid rgba(157,197,232,.16); border-radius:6px; color:#9db4c5; background:rgba(255,255,255,.04); font-size:.5rem; font-weight:850; }.level-dot:nth-child(-n+3) { border-color:rgba(255,214,109,.32); color:#ffe3a0; background:rgba(255,214,109,.08); }
.round-preview { margin:14px 0; padding:9px; border:1px solid rgba(116,231,215,.12); border-radius:10px; background:rgba(116,231,215,.04); }.round-preview>span { color:#7594a8; font-size:.48rem; font-weight:900; letter-spacing:.1em; }.round-preview>div { display:flex; gap:4px; margin-top:7px; }.round-preview b { display:grid; width:24px; height:24px; place-items:center; border:1px solid rgba(116,231,215,.3); border-radius:50%; color:#dffff9; background:rgba(116,231,215,.1); font-size:.53rem; }
.round-open { display:flex; align-items:center; justify-content:space-between; color:#ffd66d; font-size:.62rem; font-weight:850; text-decoration:none; }.round-open:hover { color:#fff0b1; }.round-open i { font-size:.58rem; }.playbook-pagination { display:flex; justify-content:center; gap:6px; margin-top:24px; }.playbook-pagination a { display:inline-flex; min-width:29px; height:29px; align-items:center; justify-content:center; border:1px solid rgba(157,197,232,.15); border-radius:8px; padding:0 9px; color:#91a9bd; background:rgba(255,255,255,.035); font-size:.61rem; text-decoration:none; }.playbook-pagination a.is-current,.playbook-pagination a:hover { border-color:#ffd66d; color:#172536; background:#ffd66d; }
.level-lab { padding:65px 0 85px; background:radial-gradient(circle at 10% 30%,rgba(116,231,215,.07),transparent 25rem),#071522; }.level-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; }.level-card { display:flex; align-items:center; gap:9px; padding:12px; border:1px solid rgba(157,197,232,.12); border-radius:12px; background:rgba(255,255,255,.035); }.level-icon { display:grid; width:34px; height:34px; flex:0 0 34px; place-items:center; border:1px solid rgba(255,214,109,.3); border-radius:10px; color:#ffe3a0; background:rgba(255,214,109,.08); font-size:.58rem; font-weight:900; }.level-card strong { display:block; color:#eaf5ff; font-size:.7rem; }.level-card small { display:block; margin-top:3px; color:#819ab1; font-size:.52rem; }.level-card>i { margin-left:auto; color:#5e7d94; font-size:.58rem; }.return-banner { display:flex; align-items:center; gap:13px; margin-top:29px; padding:18px 20px; border:1px solid rgba(255,214,109,.22); border-radius:16px; background:linear-gradient(100deg,rgba(116,77,22,.3),rgba(18,50,68,.52)); }.return-banner>i { color:#ffd66d; font-size:1.45rem; }.return-banner strong,.return-banner span { display:block; }.return-banner strong { color:#fff0b9; font-size:.83rem; }.return-banner span { margin-top:4px; color:#a4b8c9; font-size:.64rem; line-height:1.5; }.return-banner a { margin-left:auto; flex:0 0 auto; color:#172536; background:#ffd66d; border-radius:9px; padding:9px 11px; font-size:.61rem; font-weight:850; text-decoration:none; }.playbook-empty { padding:35px; border:1px dashed rgba(157,197,232,.2); border-radius:16px; color:#8ea7bc; text-align:center; }
@keyframes playbookSpin { to { transform:rotate(360deg); } }
@media (max-width:991px) { .playbook-hero-grid { grid-template-columns:1fr; }.playbook-orbit { max-width:330px; }.round-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.level-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:575px) { .playbook-hero { padding-top:125px; }.playbook-hero h1 { font-size:2.8rem; }.playbook-stats { grid-template-columns:repeat(2,1fr); }.playbook-stats>div { padding:13px; }.section-intro { display:block; }.section-intro>p { margin-top:10px; }.round-grid { grid-template-columns:1fr; }.level-grid { grid-template-columns:repeat(2,1fr); }.return-banner { display:block; }.return-banner>i { display:block; margin-bottom:9px; }.return-banner a { display:inline-block; margin-top:13px; }.playbook-pagination { flex-wrap:wrap; } }
@media (max-width:575px) { .guide-flow { grid-template-columns:1fr; }.guide-flow>i { transform:rotate(90deg); }.guide-flow>div { grid-template-columns:32px minmax(0,1fr); } }
@media (prefers-reduced-motion:reduce) { .playbook-orbit *,.playbook-actions a,.round-card { animation:none; transition:none; } }