
.tss-wrap{max-width:980px;margin:1.5rem auto;padding:1rem;border:1px solid #e5e5e5;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.tss-legend{position:relative;max-width:760px;margin:0 auto 1rem}
.tss-legend-img{width:100%;height:auto;display:block}
.tss-spot{position:absolute;width:42px;height:42px;border-radius:50%;background:transparent;border:none;cursor:pointer;outline:none}
.tss-spot:hover,.tss-spot:focus{outline:3px solid rgba(255,208,0,.85);outline-offset:2px;border-radius:50%}
.tss-tooltip{position:absolute;min-width:220px;max-width:320px;padding:.75rem 1rem;background:#111;color:#fff;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.2);transform:translate(-50%,-120%);pointer-events:none;opacity:0;transition:opacity .18s ease, transform .18s ease;z-index:5}
.tss-tooltip[aria-hidden="false"]{opacity:1;transform:translate(-50%,-140%);}
.tss-tip-title{display:block;font-weight:700;margin-bottom:.25rem}
.tss-form{display:grid;gap:1rem}
.tss-fields{display:grid;grid-template-columns:repeat(5,minmax(110px,1fr));gap:.75rem}
.tss-fields label{display:flex;flex-direction:column;font-size:.9rem;gap:.25rem}
.tss-fields select{padding:.5rem .6rem;border:1px solid #ddd;border-radius:10px;font-size:1rem;background:#fafafa}
.tss-submit{padding:.7rem 1rem;border:none;border-radius:12px;background:#111;color:#fff;font-weight:600;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;text-align:center}
.tss-submit:hover{opacity:.9}
.tss-preview{font-family:ui-monospace, Menlo, Consolas, monospace;background:#f6f6f6;border:1px solid #eee;border-radius:10px;padding:.6rem .8rem}
@media (max-width:720px){
  .tss-fields{grid-template-columns:repeat(2,1fr)}
}
