.obr { font-family: var(--sp-font-ui); color: var(--sp-o-ink); }

                
.obr .ob-head { margin: 0 0 14px; }
.obr .ob-head-row { align-items: flex-end; justify-content: space-between; gap: 14px; }
.obr .obr-title { display: flex; flex-direction: column; gap: 4px; }
.obr .obr-crumb { font-size: 13px; color: var(--sp-o-faint); }
.obr .ob-head h1 { margin: 0; font-family: var(--sp-font-ui); font-size: 30px; font-weight: 600; letter-spacing: -0.8px; color: var(--sp-o-ink); }
.obr .ob-sub { color: var(--sp-o-muted); font-size: 14px; }

                 
.obr .ob-card, .obr .ob-top, .obr .ob-assistant, .obr .ob-hw { background: var(--sp-o-card); border: 1px solid var(--sp-o-card-edge); border-radius: var(--sp-radius-card); color: var(--sp-o-ink); }
.obr .ob-card { padding: 18px 20px; }
.obr .ob-top { padding: 14px 16px; }
.obr .ob-assistant { padding: 16px 18px; }
.obr .ob-hw { padding: 12px 14px; }

                                                                
.obr .ob-bar-label { font-size: 13px; font-weight: 500; color: var(--sp-o-ink-2); }
.obr .ob-bar { height: 8px; background: var(--sp-o-seg); border-radius: var(--sp-radius-seg); }
.obr .ob-bar-fill { background: var(--sp-o-primary); }
.obr .ob-owed summary { min-height: var(--sp-target); display: flex; align-items: center; color: var(--sp-o-ink); font-weight: 500; }

                                                
.obr .ob-preview { background: var(--sp-o-summary); color: var(--sp-o-summary-ink); border-radius: var(--sp-radius-lg); font-family: var(--sp-font-ui); font-weight: 600; letter-spacing: normal; padding: 16px 20px; }
.obr .ob-preview small { color: var(--sp-o-summary-sub); opacity: 1; }

                                                                                                                            
.obr .ob-posting { background: var(--sp-o-card); color: var(--sp-o-ink); border: 1px solid var(--sp-o-row-rule); border-radius: var(--sp-radius-lg);
  font-family: var(--sp-font-ui); font-size: 15px; font-weight: 500; padding: 12px 16px; margin: 0 0 12px; }
.obr .ob-posting.bad { color: var(--sp-o-ink); }
.obr .ob-chart-confirm { margin-top: 10px; padding: 12px; border: 1px solid var(--sp-o-row-rule); border-radius: var(--sp-radius-lg); background: var(--sp-o-card); color: var(--sp-o-ink); }

                                                                                        
.obr .ob-unknown { margin-top: 6px; }
.obr .ob-unknown-btn[aria-pressed="true"] { font-weight: 600; }

                                                                              
.obr .ob-bars { grid-template-columns: 1fr; }
.obr .ob-saved { font-size: 13px; color: var(--sp-o-muted); margin-top: 6px; min-height: 18px; }
.obr .ob-saved.bad { color: var(--sp-o-ink); font-weight: 600; }
.obr .ob-owed-count { list-style: none; margin-left: -18px; color: var(--sp-o-muted); }

                                                   
.obr .ob-steps { gap: 4px; padding: 4px; margin: 0 0 14px; background: var(--sp-o-seg); border-radius: var(--sp-radius-seg); }
.obr .ob-step { min-height: var(--sp-target); padding: 0 14px; border: none; background: transparent; border-radius: var(--sp-radius-seg-in);
  font-family: var(--sp-font-ui); font-size: 14px; font-weight: 400; color: var(--sp-o-ink-2); }
.obr .ob-step.done { background: transparent; color: var(--sp-o-ink); }
.obr .ob-step.done::before { content: "✓ "; color: var(--sp-o-muted); }
.obr .ob-step.current { background: var(--sp-o-card); color: var(--sp-o-ink); font-weight: 500; box-shadow: 0 1px 2px var(--sp-o-seg-shadow); border: none; }
.obr .ob-step:focus-visible { outline: 2px solid var(--sp-o-ink); outline-offset: 1px; }

                                 
.obr .ob-section h2 { font-family: var(--sp-font-ui); font-size: 20px; font-weight: 600; color: var(--sp-o-ink); }
.obr .ob-section-status, .obr .ob-help, .obr .ob-hw-why, .obr .ao-note, .obr .ob-assistant p { color: var(--sp-o-muted); }
.obr .ob-q { border-top-color: var(--sp-o-row-rule); padding: 16px 0; }
.obr .ob-q-label { font-size: 15px; font-weight: 500; color: var(--sp-o-ink); }
.obr .ob-req { text-transform: none; letter-spacing: normal; font-size: 12px; font-weight: 500; color: var(--sp-problem); }
.obr .ob-input, .obr .ob-select, .obr .ob-na input, .obr .ob-chart-concept, .obr .ao-in, .obr .ob-login input { min-height: var(--sp-target); box-sizing: border-box; border: 1px solid var(--sp-o-input-edge);
  border-radius: var(--sp-radius); background: var(--sp-o-card); color: var(--sp-o-ink); font-family: var(--sp-font-ui); font-size: 15px; }
                                                             
.obr .ob-start { margin: 12px 0; }
.obr .ob-start h2 { font-family: var(--sp-font-ui); font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.obr .ob-start-step { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--sp-o-row-rule); }
.obr .ob-first-day { font-weight: 600; margin: 4px 0; }
.obr .ob-first-num { font-size: 16px; margin: 2px 0; color: var(--sp-o-ink); }
.obr .ob-first-hist { margin-top: 8px; }
                                                                                                   
.obr .ob-toast-steps { margin: 8px 0; padding-left: 22px; color: var(--sp-o-ink); }
.obr .ob-toast-steps li { margin: 4px 0; }
.obr .ob-toast-field { display: block; margin: 10px 0; }
.obr .ob-toast-field .ob-q-label { display: block; margin-bottom: 4px; }
.obr .ob-toast-field .ob-input { width: 100%; max-width: 520px; }
.obr .ob-toast-found { list-style: none; padding: 0; margin: 8px 0; }
.obr .ob-toast-found li { padding: 8px 0; border-top: 1px solid var(--sp-o-row-rule); }
.obr .ob-toast-found li.bad { color: var(--sp-problem); }
.obr .ob-toast-confirm { display: flex; align-items: center; gap: 6px; min-height: var(--sp-target); }
.obr .ob-toast-call { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--sp-o-row-rule); }
.obr textarea.ob-input, .obr .ob-assistant textarea { min-height: 88px; border: 1px solid var(--sp-o-input-edge); border-radius: var(--sp-radius); font-family: var(--sp-font-ui); }
.obr .ob-choices label, .obr .ao-tick { min-height: var(--sp-target); }

                         
.obr .ob-tbl th { font-family: var(--sp-font-ui); font-size: 12px; font-weight: 500; color: var(--sp-o-muted); border-bottom-color: var(--sp-o-row-rule); }
.obr .ob-tbl td { border-bottom-color: var(--sp-o-row-rule); padding: 6px; }
.obr .ob-tbl input, .obr .ob-tbl select { min-height: 40px; border: 1px solid var(--sp-o-input-edge); border-radius: var(--sp-radius); font-family: var(--sp-font-ui); }

                                     
.obr .ob-btn, .obr .ao-small { min-height: var(--sp-target); padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sp-o-button-edge);
  background: var(--sp-o-card); color: var(--sp-o-ink); border-radius: var(--sp-radius-seg); font-family: var(--sp-font-ui); font-size: 14px; font-weight: 500; }
.obr .ob-btn.small { min-height: var(--sp-target); font-size: 13px; padding: 0 12px; }
.obr .ob-btn.primary, .obr .ao-send { min-height: var(--sp-target); background: var(--sp-o-primary); color: var(--sp-o-primary-ink); border: 1px solid var(--sp-o-primary); border-radius: var(--sp-radius-seg); font-family: var(--sp-font-ui); }
.obr .ob-btn.primary:hover, .obr .ao-send:hover { background: var(--sp-o-ink-hover); }

                              
.obr .ob-assistant h2 { font-family: var(--sp-font-ui); font-size: 16px; font-weight: 600; }
.obr .ob-as-avatar { background: var(--sp-o-page, var(--sp-o-card)); color: var(--sp-o-ink); border-color: var(--sp-o-card-edge); font-family: var(--sp-font-ui); }
.obr .ob-as-sub { color: var(--sp-o-muted); }
.obr .ob-as-msg.user { background: var(--sp-o-seg); }
.obr .ob-as-msg.assistant { background: var(--sp-o-page); border: 1px solid var(--sp-o-card-edge); }

@media (max-width: 600px) {
  .obr .ob-head h1 { font-size: 26px; }
  .obr .ob-card { padding: 14px; }
  .obr .ob-step { flex: 1 1 auto; padding: 0 10px; }
  .obr .ob-tbl tr { border-color: var(--sp-o-card-edge); border-radius: var(--sp-radius-card); }
}

                                                                                                                                     
                                                                                                                                                                                     
#ob-owed-list .ob-link, #ob-section .ob-link { white-space: normal; text-align: left; max-width: 100%; }

                                                                                                                               
.ob-scroll-x { max-width: 100%; overflow-x: auto; }