body {
      font-family: 'Inter', sans-serif;
      padding: 20px;
      background: #f5f5f5;
      color: #264947;
    }
    a {
      color: #418b85;
    }

    a:hover {
      color: #418b85;
    }

    .controls {
      margin-bottom: 20px;
    }

    input#collectionName {
      padding: .3rem;
      min-width: 200px;
      border: 1px solid #418b85;
      border-radius: 2px;
    }
    @media (min-width: 700px) {
    input#collectionName {
      min-width: 300px;
    }
  }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    @media (max-width: 700px) {
      .grid {
        grid-template-columns: 1fr;
      }
    }

    .card {
      background: #fff;
      padding: 15px;
      border-radius: 8px;
    }

    .card.dragging {
      opacity: 0.5;
    }

    .card h3 {
      margin-top: 0;
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: .9rem;
    }

    .card h3 span {
      flex: 1;
      cursor: text;
    }


.button-row { 
      display: flex;
      align-items: center;
      justify-content:flex-start;
}

.svg-button-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.drag-handle {
  cursor: grab; 
  font-size: 1.2rem;
  user-select: none;  
  padding: .5rem;
}

.drag-handle:hover {
  cursor: grab;
  color: #326f6a;
   }

.card.dragging .drag-handle {
  cursor: grabbing;   
}


    .card input.rename {
      flex: 1;
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 2px 4px;
    }

    .tabs {
      margin-top: 1rem;
    }

    .tab {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 3px 0;
      padding-top: 3px;
      border-top: 1px solid #eee;
    }

    .tab button,
    h3 button {
      background: none;
      border: none;
      cursor: pointer;
    }

    .tab a {
      text-decoration: none;
      word-break: break-all;
      font-size: .9rem;
    }

    button {
      cursor: pointer;
      margin-right: 5px;
      display: inline-flex;
      align-items: center;
      gap: .25rem;
      border-radius: 2px;
      padding: .4rem .5rem;
      font-size: .8rem;
      background: #b3dcd5;
      border: none;
    }

    button:hover {
    background: #7cbfb6;
    }

    button.secondary:hover {
    background: #f0f0f0;
    color: #326f6a;
    }


    .pin-btn {
      align-items: center;
      padding: 5px;
      top: 5px;
    }

    .pin-btn svg {
      fill: #ccc;
      stroke: none;
    }
  .pin-btn.filled svg {
    fill: #418b85;
    stroke: none;
  }
        
    .backup { 
        font-size: .7rem;
        margin: 5rem auto 2rem 0;
    }
    .backup div {
      margin: .7rem 0;
    }

    footer {
      border-top: 1px solid #b3dcd5;
      font-size: .7rem;
      margin: 2rem auto;
    }