:root{
    --bg:#d3d3d3;
    --panel:#ffffff;
    --panel-outline:#333;
    --accent:#6ed1ff;
    --card:#d877d8;
    --card-text:#1a0833;
    --danger:#ff3b3b;
    --shadow:0 6px 16px rgba(0,0,0,.15);
    --radius:16px;
    --radius-sm:10px;
  }
  
  *{ box-sizing: border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font:16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    background:var(--bg);
    color:#111;
  }
  
  .container{
    max-width:720px;
    margin:32px auto;
    padding:16px;
  }
  
  .autocomplete{
    position:relative;
    margin-bottom:24px;
  }
  
  .input{
    width:100%;
    padding:12px 14px;
    border:2px solid #333;
    border-radius:6px;
    background:#fff;
    outline:none;
    font-size:16px;
  }
  
  .input:focus{
    box-shadow:0 0 0 3px rgba(0,0,0,.1);
  }
  
  .suggestions{
    position:absolute;
    z-index:10;
    top:100%;
    left:0;
    right:0;
    margin:6px 0 0;
    padding:0;
    list-style:none;
    border:2px solid #333;
    border-radius:6px;
    overflow:hidden;
    background:#fff;
    box-shadow:var(--shadow);
    display:none; 
  }
  
  .suggestions.open{ display:block; }
  
  .suggestion-item{
    padding:10px 12px;
    border-top:2px solid #333;
    background:#e9e9e9;
    cursor:pointer;
  }
  .suggestion-item:first-child{ border-top:none; }
  .suggestion-item[aria-selected="true"],
  .suggestion-item:hover{
    background:var(--accent);
  }
  
  .help{
    margin-top:8px;
    color:#333;
    font-size:12px;
    opacity:.9;
  }
  
  .subtitle{ margin:0 0 8px; font-size:18px; }
  
  .added-list{
    margin:0;
    padding:0;
    list-style:none;
    display:grid;
    gap:12px;
  }
  
  .card{
    display:grid;
    grid-template-columns: 1fr auto;
    gap:8px 12px;
    align-items:center;
    background:var(--card);
    color:var(--card-text);
    border:2px solid #5b2b77;
    border-radius:var(--radius-sm);
    padding:14px;
    box-shadow:var(--shadow);
  }
  
  .card-title{
    margin:0;
    font-weight:700;
  }
  
  .meta{
    grid-column:1 / -1;
    margin:0;
  }
  
  .remove-btn{
    justify-self:end;
    width:34px;
    height:34px;
    border-radius:50%;
    border:2px solid #5b2b77;
    background:transparent;
    font-size:20px;
    line-height:1;
    cursor:pointer;
  }
  .remove-btn:hover{ border-color:var(--danger); color:var(--danger); }
  
  .empty{
    padding:12px;
    opacity:.8;
  }
  
  .visually-hidden{
    position:absolute!important;
    height:1px; width:1px;
    overflow:hidden;
    clip:rect(1px,1px,1px,1px);
    white-space:nowrap;
  }