body { background: #f6f7fb; }

.compare-board { min-height: calc(100vh - 140px); }

.panel{
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    box-shadow:0 6px 18px rgba(0,0,0,.05);
}

.panel-header{
    padding:14px 16px;
    border-bottom:1px solid rgba(0,0,0,.08);
    font-weight:600;
}

.panel-body{ padding:16px; }

.criteria-item{ cursor:pointer; user-select:none; }
.criteria-item.active{
    background:rgba(13,110,253,.10);
    border-color:rgba(13,110,253,.30);
}

.dropzone{
    min-height:56px;
    padding:10px;
    border:1px dashed rgba(0,0,0,.20);
    border-radius:12px;
    background:rgba(0,0,0,.02);
}

.dropzone.drag-over{
    border-color:rgba(13,110,253,.65);
    background:rgba(13,110,253,.06);
}

/* default card */
.card-item{
    padding:8px 10px;
    border:1px solid rgba(0,0,0,.12);
    border-radius:12px;
    background:#fff;
    cursor:grab;
    user-select:none;
    margin-bottom:8px;
    font-size: .95rem;
}
.card-item:active{ cursor:grabbing; }

.slot{
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    background:#fff;
    overflow:hidden;
}

.slot-head{
    padding:8px 10px;
    border-bottom:1px solid rgba(0,0,0,.08);
    background:rgba(0,0,0,.02);
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:8px;
}

.slot-head .label{ font-weight:800; }
.slot-head .tip{ font-size:.78rem; opacity:.75; }

.slot-body{ padding:10px; }

/* ======= SCALE FIT ======= */
.scale-fit{
    max-height: calc(100vh - 140px);
    overflow: hidden;
}
#scaleFitInner{
    transform-origin: top left;
}

/* 2 колонки — трохи менші відступи між ними */
#scaleGrid{
    --bs-gutter-x: .75rem;
    --bs-gutter-y: .75rem;
}

.scale-col-title{
    font-size: .85rem;
    font-weight: 700;
    color: rgba(0,0,0,.55);
    margin-bottom: 8px;
}

/* ======= CHIPS in scale ======= */
#scaleGrid .dropzone{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-content:flex-start;
    min-height: 42px;
    padding: 8px;
}

#scaleGrid .card-item{
    margin:0;
    padding:4px 10px;
    border-radius:999px;
    font-size:.85rem;
    line-height:1.1;
    white-space:nowrap;
}

/* ======= Save button ======= */
.btn-save{
    border-radius:14px;
    box-shadow:0 10px 24px rgba(13,110,253,.20);
    font-weight:600;
}
.btn-save:active{ transform: translateY(1px); }