/* Bewertungsband – konsumiert die globalen --ta-* Template-Tokens (wie .ta-tool),
   damit das Tool dem Site-Theme-Toggle in Hell und Dunkel folgt. */
.sb-app{
  --sb-bg:            var(--ta-bg, #0C0E11);
  --sb-surface:       var(--ta-bg-surface, #111418);
  --sb-card:          var(--ta-bg-card, #161B22);
  --sb-border:        var(--ta-border, rgba(20,184,166,.16));
  --sb-border-subtle: var(--ta-border-subtle, rgba(255,255,255,.07));
  --sb-text:          var(--ta-text-primary, #E8EDF2);
  --sb-text2:         var(--ta-text-secondary, #B4BFCC);
  --sb-muted:         var(--ta-text-muted, #9AA6B6);
  --sb-faint:         color-mix(in srgb, var(--sb-muted) 62%, transparent);
  --sb-accent:        var(--ta-accent, #14B8A6);
  --sb-accent-rgb:    var(--ta-accent-rgb, 20,184,166);
  --sb-accent-bright: var(--ta-accent-bright, #5EEAD4);
  --sb-accent-dark:   var(--ta-accent-dark, #0D9488);
  --sb-on-accent:     var(--ta-on-accent, #06231F);
  --sb-pos:           var(--ta-pos, #4FD18B);
  --sb-neg:           var(--ta-neg, #F08079);
  --sb-warn:          var(--ta-warn, #E2B45C);
  --sb-input-bg:      var(--ta-input-bg, var(--sb-card));
  --sb-input-border:  var(--ta-input-border, var(--sb-border));
  --sb-radius:        var(--ta-radius-card, 14px);
  --sb-radius-sm:     var(--ta-radius-control, 6px);
  --sb-font-display:  var(--ta-font-display, 'Playfair Display', Georgia, serif);
  --sb-font-body:     var(--ta-font-body, 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  --sb-font-mono:     var(--ta-font-mono, 'JetBrains Mono', ui-monospace, Menlo, monospace);
  --sb-band:          rgba(var(--sb-accent-rgb), .14);

  color:var(--sb-text); font-family:var(--sb-font-body); font-size:15px; line-height:1.5;
}
.sb-app *{box-sizing:border-box}

.sb-app .card{background:var(--sb-card); border:1px solid var(--sb-border); border-radius:var(--sb-radius); padding:16px; position:relative; margin-bottom:16px}
.sb-app .reset-btn{position:absolute; top:12px; right:12px; z-index:8; width:32px; height:32px; padding:0;
  display:inline-flex; align-items:center; justify-content:center; border-radius:var(--sb-radius-sm);
  border:1px solid var(--sb-border); background:var(--sb-surface); color:var(--sb-muted); cursor:pointer;
  transition:color .12s, border-color .12s}
.sb-app .reset-btn:hover{color:var(--sb-accent-bright); border-color:var(--sb-accent)}
.sb-app .reset-btn svg{width:16px; height:16px}

.sb-app .sb-title{font-family:var(--sb-font-display); font-weight:600; font-size:1.3rem; letter-spacing:-.01em;
  color:var(--sb-text); margin:0 0 12px; padding-right:44px; line-height:1.3}

.sb-app .modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:1050; padding:20px}
.sb-app .modal{background:var(--sb-card); border:1px solid var(--sb-border); border-radius:var(--sb-radius); padding:22px 22px 18px; max-width:340px; width:100%; box-shadow:0 18px 50px rgba(0,0,0,.4)}
.sb-app .modal-msg{margin:0 0 18px; font-size:.98rem; color:var(--sb-text); line-height:1.5}
.sb-app .modal-actions{display:flex; gap:10px; justify-content:flex-end}
.sb-app .btn{font-family:var(--sb-font-body); font-size:.9rem; padding:9px 18px; border-radius:var(--sb-radius-sm); cursor:pointer; border:1px solid var(--sb-border)}
.sb-app .btn-ghost{background:transparent; color:var(--sb-muted)}
.sb-app .btn-ghost:hover{color:var(--sb-text); border-color:var(--sb-muted)}
.sb-app .btn-primary{background:var(--sb-accent); color:var(--sb-on-accent); border-color:var(--sb-accent); font-weight:600}
.sb-app .btn-primary:hover{background:var(--sb-accent-bright); border-color:var(--sb-accent-bright)}
.sb-app .btn:disabled{opacity:.45; cursor:not-allowed}

.sb-app .drop{border:1.5px dashed var(--sb-border); border-radius:var(--sb-radius); padding:20px 16px;
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; background:var(--sb-card)}
.sb-app .slot{display:flex; flex-direction:column; gap:6px}
.sb-app .slot label{font-size:.8rem; color:var(--sb-muted); font-family:var(--sb-font-mono); letter-spacing:.04em}
.sb-app .slot .file{font-size:.82rem; color:var(--sb-faint)}
.sb-app .slot.ok .file{color:var(--sb-pos)}
.sb-app input[type=file]{font-size:.8rem; color:var(--sb-muted)}
.sb-app input[type=file]::file-selector-button{font-family:var(--sb-font-body); background:var(--sb-surface); color:var(--sb-text);
  border:1px solid var(--sb-border); border-radius:8px; padding:6px 12px; margin-right:10px; cursor:pointer}
.sb-app input[type=text]{font-family:var(--sb-font-body); font-size:.9rem; background:var(--sb-input-bg); color:var(--sb-text);
  border:1px solid var(--sb-input-border); border-radius:var(--sb-radius-sm); padding:8px 11px; min-width:0}

.sb-app .controls{display:flex; flex-wrap:wrap; gap:14px 20px; align-items:flex-end; margin-bottom:14px; padding-right:38px}
.sb-app .ctrl{display:flex; flex-direction:column; gap:5px}
.sb-app .ctrl > span{font-size:.7rem; font-family:var(--sb-font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--sb-faint)}
.sb-app select{font-family:var(--sb-font-body); font-size:.9rem; background:var(--sb-input-bg); color:var(--sb-text);
  border:1px solid var(--sb-input-border); border-radius:var(--sb-radius-sm); padding:8px 30px 8px 11px; cursor:pointer;
  appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--sb-muted) 50%),linear-gradient(135deg,var(--sb-muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 53%,calc(100% - 11px) 53%; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.sb-app .seg{display:inline-flex; border:1px solid var(--sb-border); border-radius:var(--sb-radius-sm); overflow:hidden}
.sb-app .seg button{font-family:var(--sb-font-mono); font-size:.78rem; letter-spacing:.04em; background:transparent; color:var(--sb-muted);
  border:0; padding:8px 13px; cursor:pointer; border-left:1px solid var(--sb-border)}
.sb-app .seg button:first-child{border-left:0}
.sb-app .seg button.active{background:var(--sb-accent); color:var(--sb-on-accent)}
.sb-app .seg button:disabled{color:var(--sb-faint); opacity:.45; cursor:not-allowed}
.sb-app .row-inline{display:flex; align-items:center; gap:9px}
.sb-app .info{position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; border-radius:50%; border:1px solid var(--sb-border);
  color:var(--sb-muted); font-family:var(--sb-font-display); font-style:italic; font-weight:600; font-size:.74rem;
  cursor:help; flex:0 0 auto; user-select:none; outline:none}
.sb-app .info:hover, .sb-app .info:focus{color:var(--sb-accent-bright); border-color:var(--sb-accent)}
.sb-app .infobox{position:absolute; top:140%; right:0; width:262px; max-width:74vw; z-index:20;
  background:var(--sb-surface); border:1px solid var(--sb-border); border-radius:11px; padding:12px 14px;
  font-family:var(--sb-font-body); font-style:normal; font-weight:400; font-size:.8rem; line-height:1.55; color:var(--sb-text);
  box-shadow:0 10px 30px rgba(0,0,0,.3); text-align:left;
  opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .12s ease, transform .12s ease}
.sb-app .infobox b{color:var(--sb-accent-bright); font-weight:600}
.sb-app .info:hover .infobox, .sb-app .info:focus .infobox, .sb-app .info:focus-within .infobox{opacity:1; visibility:visible; transform:translateY(0)}

.sb-app .chartwrap{position:relative}
.sb-app svg.chart{width:100%; height:auto; display:block; touch-action:pan-y}
.sb-app .axis text{fill:var(--sb-text); font-family:var(--sb-font-mono); font-size:11px}
.sb-app .gridline{stroke:var(--sb-border-subtle)}
.sb-app .band{fill:var(--sb-band); stroke:none}
.sb-app .band-edge{fill:none; stroke:var(--sb-accent-bright); stroke-width:1.4; stroke-dasharray:4 3; opacity:.95}
.sb-app .median{fill:none; stroke:var(--sb-accent); stroke-width:1.6; opacity:.95}
.sb-app .price{fill:none; stroke:var(--sb-text); stroke-width:1.6}
.sb-app .legend{display:flex; flex-wrap:wrap; gap:8px 18px; margin:10px 2px 0; font-size:.82rem; color:var(--sb-muted)}
.sb-app .legend span{display:inline-flex; align-items:center; gap:7px}
.sb-app .swatch{width:16px; height:11px; border-radius:3px; display:inline-block}
.sb-app .sw-band{background:var(--sb-band); border:1px dashed var(--sb-accent-bright)}
.sb-app .sw-price{height:0; border-top:2px solid var(--sb-text); width:18px}

.sb-app .verdict{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:14px}
.sb-app .metrics-mini{font-family:var(--sb-font-mono); font-size:.82rem; color:var(--sb-muted)}
.sb-app .metrics-mini b{color:var(--sb-text); font-weight:600}
.sb-app .status{font-family:var(--sb-font-mono); font-size:.76rem; color:var(--sb-faint); margin-top:12px; line-height:1.7}
.sb-app .status .warn{color:var(--sb-warn)}
.sb-app .empty{color:var(--sb-muted); text-align:center; padding:40px 16px; font-size:.95rem}
.sb-app .empty b{color:var(--sb-text)}
.sb-app .hidden{display:none}

.sb-app .tooltip{position:absolute; pointer-events:none; background:var(--sb-surface); border:1px solid var(--sb-border);
  border-radius:9px; padding:9px 11px; font-size:.78rem; font-family:var(--sb-font-mono); color:var(--sb-text);
  box-shadow:0 6px 22px rgba(0,0,0,.25); transform:translate(-50%,-115%); white-space:nowrap; z-index:5}
.sb-app .tooltip .tk{color:var(--sb-muted)}
.sb-app .tooltip .row{display:flex; justify-content:space-between; gap:14px}

/* gespeicherte / veröffentlichte Analysen */
.sb-app .saved-head{font-size:.7rem; font-family:var(--sb-font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--sb-faint); margin:0 0 12px}
.sb-app .saverow{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px}
.sb-app .saverow input[type=text]{flex:1 1 200px}
.sb-app .loadrow{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.sb-app .loadrow select{flex:1 1 200px}
.sb-app .usage{font-family:var(--sb-font-mono); font-size:.8rem; color:var(--sb-muted)}
.sb-app .usage b{color:var(--sb-text)}
.sb-app .hint{font-size:.86rem; color:var(--sb-muted)}
.sb-app .msg{font-family:var(--sb-font-mono); font-size:.78rem; color:var(--sb-accent-bright); margin-top:10px; min-height:1em}
.sb-app .msg.err{color:var(--sb-neg)}

@media (max-width:640px){
  .sb-app .drop{grid-template-columns:1fr} .sb-app .controls{gap:12px}
}