.ob-mock-wrap{max-width:480px;margin:0 auto 16px}.ob-frame{border:1px solid var(--border);background:var(--surface);border-radius:10px;overflow:hidden;box-shadow:0 4px 24px #0003}.ob-chrome{border-bottom:1px solid var(--border);background:#ffffff05;align-items:center;gap:10px;padding:8px 12px;display:flex}.ob-dots{gap:4px;display:flex}.ob-dots span{background:#ffffff12;border-radius:50%;width:7px;height:7px}.ob-url{color:var(--text-2);border:1px solid var(--border);background:#ffffff05;border-radius:4px;flex:1;align-items:center;gap:5px;padding:3px 8px;font-size:10px;display:flex}.ob-body{min-height:220px;display:flex;position:relative}.ob-sidebar{border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;gap:5px;width:42px;padding:10px 6px;display:flex}.ob-nav-item{background:#ffffff0a;border-radius:3px;height:7px}.ob-nav-active{background:#be185d26}.ob-main{flex:1;padding:12px;position:relative}.ob-content-bar{background:#ffffff0f;border-radius:3px;width:55%;height:8px;margin-bottom:12px}.ob-cards-row{gap:6px;margin-bottom:10px;display:flex}.ob-card{background:#ffffff06;border:1px solid #ffffff0a;border-radius:4px;flex:1;height:44px}.ob-card-hl{background:#be185d08;border-color:#be185d40}.ob-rows{flex-direction:column;gap:5px;display:flex}.ob-row{background:#ffffff06;border-radius:3px;height:12px}.ob-tour-modal{background:var(--surface);z-index:3;text-align:center;border:1px solid #be185d4d;border-radius:10px;width:220px;padding:16px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 8px 32px #00000080}.ob-tour-modal-step{text-transform:uppercase;letter-spacing:.05em;color:var(--accent);margin-bottom:8px;font-size:9px;font-weight:700}.ob-tour-modal-title{color:var(--text-1);margin-bottom:6px;font-size:14px;font-weight:600}.ob-tour-modal-desc{color:var(--text-2);margin-bottom:12px;font-size:11px;line-height:1.5}.ob-tour-modal-dots{justify-content:center;gap:5px;margin-bottom:12px;display:flex}.ob-tour-modal-actions{justify-content:space-between;gap:8px;display:flex}.ob-tour-btn-back,.ob-tour-btn-next{cursor:default;border:none;border-radius:5px;flex:1;padding:6px 0;font-size:11px;font-weight:600}.ob-tour-btn-back{color:var(--text-2);border:1px solid var(--border);background:#ffffff0a}.ob-tour-btn-next{color:#fff;background:var(--accent)}.ob-tour-dots{gap:4px;display:flex}.ob-dot-done,.ob-dot-active,.ob-dot-todo{border-radius:50%;width:6px;height:6px}.ob-dot-done{background:var(--accent);opacity:.4}.ob-dot-active{background:var(--accent)}.ob-dot-todo{background:#ffffff1a}.ob-tour-highlight{pointer-events:none;border:2px solid #be185d66;border-radius:4px;width:calc(33.3% - 4px);height:44px;animation:2s ease-in-out infinite ob-pulse;position:absolute;top:39px;left:70px}@keyframes ob-pulse{0%,to{box-shadow:0 0 #be185d33}50%{box-shadow:0 0 0 6px #be185d00}}.ob-form{flex-direction:column;gap:6px;display:flex}.ob-form-label{color:var(--text-2);text-transform:uppercase;letter-spacing:.04em;font-size:9px;font-weight:600}.ob-form-input{background:#ffffff08;border:1px solid #ffffff0f;border-radius:4px;height:24px}.ob-form-input-short{flex:1}.ob-form-toggle-row{align-items:center;gap:8px;display:flex}.ob-toggle{background:#22c55e;border-radius:8px;flex-shrink:0;width:28px;height:16px;position:relative}.ob-toggle-knob{background:#fff;border-radius:50%;width:12px;height:12px;position:absolute;top:2px;right:2px}.ob-tooltip{background:var(--surface);z-index:2;border:1px solid #be185d40;border-radius:7px;width:180px;padding:10px;position:absolute;top:88px;right:14px;box-shadow:0 4px 20px #00000059}.ob-tooltip-arrow{background:var(--surface);border-bottom:1px solid #be185d40;border-left:1px solid #be185d40;width:10px;height:10px;position:absolute;top:10px;left:-6px;transform:rotate(45deg)}.ob-tooltip-text{color:var(--text-1);margin-bottom:8px;font-size:10.5px;line-height:1.5}.ob-tooltip-dismiss{color:var(--accent);text-align:right;font-size:10px;font-weight:600}.ob-cl{background:var(--surface);border:1px solid var(--border);z-index:2;border-radius:8px;width:175px;position:absolute;bottom:12px;right:12px;overflow:hidden;box-shadow:0 4px 24px #00000059}.ob-cl-head{color:var(--text-1);justify-content:space-between;align-items:center;padding:10px 12px 4px;font-size:11px;font-weight:650;display:flex}.ob-cl-progress{color:var(--text-2);font-size:9px;font-weight:500}.ob-cl-bar{background:#ffffff0f;border-radius:2px;height:3px;margin:4px 12px 6px;overflow:hidden}.ob-cl-fill{background:#22c55e;border-radius:2px;width:40%;height:100%}.ob-cl-items{border-top:1px solid var(--border);padding:4px 0}.ob-cl-item{color:var(--text-2);align-items:center;gap:6px;padding:4px 12px;font-size:10px;display:flex}.ob-cl-done{opacity:.5;text-decoration:line-through}.ob-cl-done svg{color:#22c55e}.ob-cl-current{color:var(--text-1);font-weight:500}.ob-cl-circle{border:1.5px solid var(--border);border-radius:50%;flex-shrink:0;width:9px;height:9px}.ob-cl-current .ob-cl-circle{border-color:var(--accent);background:#be185d26}.ob-banner{background:#be185d14;border:1px solid #be185d26;border-radius:6px;align-items:center;gap:6px;margin-bottom:2px;padding:8px 12px;display:flex}.ob-banner-icon{color:var(--accent);font-size:12px}.ob-banner-text{color:var(--text-1);flex:1;font-size:10px}.ob-banner-text strong{font-weight:650}.ob-banner-x{color:var(--text-2);cursor:default;font-size:14px}@media (max-width:560px){.ob-tour-modal{width:170px}.ob-cl{display:none}.ob-tooltip{width:150px}}