:root{
    --cc-border:#ced4da;
    --cc-focus:#0d6efd;
    --cc-ok:#198754;
    --cc-err:#dc3545;
    --cc-hl:#e9f2ff;
  }
 
  .cc-wrap{position:relative;}
  .cc-input{
    width:100%;box-sizing:border-box;
    font-size:1.05rem;letter-spacing:.5px;
    padding:12px 44px 12px 14px;
    border:1px solid var(--cc-border);border-radius:8px;
    outline:none;background:#fff;
    text-transform:uppercase;
  }
  .cc-input:focus{border-color:var(--cc-focus);box-shadow:0 0 0 3px rgba(13,110,253,.15);}
  .cc-wrap.is-complete .cc-input{border-color:var(--cc-ok);box-shadow:0 0 0 3px rgba(25,135,84,.15);}
  .cc-status{
    position:absolute;right:12px;top:50%;transform:translateY(-50%);
    font-size:1rem;pointer-events:none;color:var(--cc-ok);display:none;
  }
  .cc-wrap.is-complete .cc-status{display:block;}
  .cc-spinner{
    position:absolute;right:14px;top:50%;transform:translateY(-50%);
    width:16px;height:16px;border:2px solid var(--cc-border);border-top-color:var(--cc-focus);
    border-radius:50%;animation:ccspin .7s linear infinite;display:none;
  }
  .cc-wrap.is-loading .cc-spinner{display:block;}
  @keyframes ccspin{to{transform:translateY(-50%) rotate(360deg);}}
 
  .cc-list{
    position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:1000;
    background:#fff;border:1px solid var(--cc-border);border-radius:8px;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
    max-height:280px;overflow-y:auto;-webkit-overflow-scrolling:touch;
    margin:0;padding:4px;list-style:none;display:none;
  }
  .cc-wrap.is-open .cc-list{display:block;}
  .cc-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:6px 12px 4px;gap:8px;
  }
  .cc-head .cc-step-name{
    font-size:.75rem;font-weight:700;
    color:#6c757d;text-transform:uppercase;letter-spacing:.5px;
  }
  .cc-undo{
    border:0;background:#f1f3f5;border-radius:6px;
    min-height:34px;padding:4px 12px;font-size:.85rem;color:#495057;
    cursor:pointer;white-space:nowrap;
  }
  .cc-item{
    display:flex;align-items:center;gap:10px;
    min-height:44px;padding:10px 12px;border-radius:6px;
    cursor:pointer;user-select:none;box-sizing:border-box;
  }
  .cc-item .cc-img{
    width:56px;height:36px;object-fit:contain;flex:0 0 auto;
    margin-left:auto;background:#fff;border-radius:4px;
    pointer-events:none;
  }
  .cc-item .cc-val{font-weight:600;letter-spacing:.5px;white-space:nowrap;}
  .cc-item .cc-desc{font-size:.85rem;color:#6c757d;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .cc-item.is-active, .cc-item:hover{background:var(--cc-hl);}
  .cc-empty{padding:12px;color:#6c757d;font-size:.9rem;}
 
  /* pannello per parametro numerico (range) */
  .cc-range{padding:12px;}
  .cc-range .cc-range-label{font-weight:600;margin-bottom:4px;}
  .cc-range .cc-range-hint{font-size:.85rem;color:#6c757d;margin-bottom:10px;}
  .cc-range .cc-range-err{font-size:.85rem;color:var(--cc-err);margin-top:8px;display:none;}
  .cc-range.has-err .cc-range-err{display:block;}
  .cc-range .cc-confirm{
    display:block;width:100%;min-height:44px;
    border:0;border-radius:6px;background:var(--cc-focus);color:#fff;
    font-size:1rem;font-weight:600;cursor:pointer;
  }
  .cc-range .cc-confirm:disabled{background:var(--cc-border);cursor:default;}
 
  .cc-out{margin-top:16px;font-size:.9rem;color:#495057;min-height:1.4em;}