#btn-tutorial.active{background:#eef3fb;border-color:#c8d8f0;color:var(--text)}#tutorial-dim{position:fixed;inset:0;z-index:2300;background:rgba(26,24,22,.12);pointer-events:none;opacity:0;transition:opacity .12s}#tutorial-dim.visible{opacity:1}#tutorial-spotlight{position:fixed;z-index:2311;border:2px solid var(--accent);border-radius:var(--r2);box-shadow:0 0 0 4px rgba(26,95,180,.16),0 10px 32px rgba(0,0,0,.22);pointer-events:none;opacity:0;transition:left .16s,top .16s,width .16s,height .16s,opacity .12s}#tutorial-spotlight.visible{opacity:1}#tutorial-panel{position:fixed;top:58px;right:14px;width:min(360px,calc(100vw - 28px));max-height:min(640px,calc(100vh - 84px));z-index:2310;display:none;flex-direction:column;background:var(--surface);border:1px solid var(--border2);border-radius:var(--r2);box-shadow:var(--shadow2),0 18px 54px rgba(0,0,0,.18);overflow:hidden}#tutorial-panel.visible{display:flex}.tutorial-head{display:flex;align-items:center;gap:10px;padding:13px 14px 12px;border-bottom:1px solid var(--border)}.tutorial-title{min-width:0;flex:1}.tutorial-title strong{display:block;font-size:13px;color:var(--text);line-height:1.2}.tutorial-title span{display:block;margin-top:3px;font-size:11.5px;color:var(--text3)}.tutorial-close{width:26px;height:26px;border:0;border-radius:var(--r);background:var(--surface3);color:var(--text3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}.tutorial-close:hover{color:var(--text);background:var(--border)}.tutorial-close svg{width:11px;height:11px}.tutorial-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:5px;padding:7px;overflow:auto}.tutorial-item{width:100%;min-height:62px;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;padding:6px 5px;border:1px solid var(--border);border-radius:var(--r2);background:var(--surface2);color:var(--text);font:inherit;text-align:center;cursor:pointer}.tutorial-item:hover:not(:disabled){border-color:var(--border2);background:var(--surface3)}.tutorial-item:disabled{cursor:default;opacity:.62}.tutorial-item-icon{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r);background:var(--surface);color:var(--brand);border:1px solid var(--border)}.tutorial-item-icon svg{width:14px;height:14px}.tutorial-item-label{min-width:0;width:100%}.tutorial-item-label strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:10px;line-height:1.08;color:var(--text)}#tutorial-coach{position:fixed;z-index:2312;width:min(330px,calc(100vw - 24px));display:none;background:var(--surface);border:1px solid var(--border2);border-radius:var(--r2);box-shadow:var(--shadow2),0 16px 48px rgba(0,0,0,.2);overflow:hidden}#tutorial-coach.visible{display:block}.tutorial-coach-body{padding:13px 14px 12px}.tutorial-step-kicker{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}.tutorial-step-title{margin-top:5px;font-size:13px;font-weight:700;color:var(--text)}.tutorial-step-text{margin-top:7px;font-size:12px;line-height:1.48;color:var(--text2)}.tutorial-actions{display:flex;justify-content:flex-end;gap:7px;padding:10px 12px;border-top:1px solid var(--border);background:var(--surface2)}.tutorial-actions button{padding:6px 11px;border:1px solid var(--border2);border-radius:var(--r);background:var(--surface);color:var(--text2);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer}.tutorial-actions button:hover:not(:disabled){background:var(--surface3);color:var(--text)}.tutorial-actions button:disabled{opacity:.45;cursor:default}.tutorial-actions .primary{background:var(--brand);border-color:var(--brand);color:#fff}.tutorial-actions .primary:hover:not(:disabled){background:var(--brand-d);border-color:var(--brand-d);color:#fff}@media (max-width:700px){#tutorial-panel{top:52px;right:8px;left:8px;width:auto}#tutorial-coach{left:8px!important;right:8px;width:auto}}