.card{
    background: var(--app-panel);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-md);
    padding: 24px;
    box-shadow: var(--app-shadow);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  .card:hover{
    transform: translateY(-2px);
    border-color: var(--app-hover-border);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1);
  }

  .toolbar{display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px;}
  .btn{
    align-items: center;
    appearance: none;
    background: var(--app-brand);
    border: 1px solid transparent;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    gap: 8px;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    transition: background-color .18s ease, box-shadow .18s ease, opacity .18s ease;
  }
  .btn:hover{background: var(--app-brand-strong); box-shadow: 0 6px 18px rgba(0, 113, 227, .22);}
  .btn[disabled]{opacity: .55; cursor: not-allowed; transform: none; box-shadow: none;}
  .btn--accent{min-width: 108px;}
  .btn--ghost{
    background: #ffffff;
    border: 1px solid var(--app-border);
    color: var(--app-muted);
  }
  .btn--ghost:hover{box-shadow: none; color: var(--app-text);}

  .chips{display: flex; flex-wrap: wrap; gap: 8px;}
  .chip{
    background: var(--app-brand-soft);
    border: 1px solid rgba(0, 113, 227, 0.24);
    color: var(--app-brand-strong);
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .chip b{color: var(--app-text);}

  .drop{
    margin-top: 12px;
    padding: 22px;
    border-radius: 16px;
    border: 1px dashed var(--app-border);
    background: linear-gradient(150deg, #fcfcff, #f9fbff);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 10px;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  }
  .drop.dragover{
    border-color: var(--app-brand);
    background: var(--app-brand-soft);
    box-shadow: var(--app-focus-ring);
  }
  .drop input{display: none;}
  .drop p{margin: 0;}
  .drop small{color: var(--app-muted); display: block; margin-top: 6px;}

  .status{
    margin: 14px 0 6px;
    color: var(--app-muted);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--app-panel-soft);
  }
  .status.ok{color: var(--app-success); border-color: #a5d8c7; background: #ecf8f2;}
  .status.warn{color: var(--app-warning); border-color: #e7c99c; background: #fff7ec;}
  .status.err{color: var(--app-danger); border-color: #f3cccc; background: #fff3f2;}

  .controls{display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px;}
  .search{
    flex: 1 1 280px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    padding: 8px 10px;
  }
  .search input{flex: 1; border: none; background: transparent; color: var(--app-text); outline: none; font: inherit;}

  .grid{
    margin-top: 16px;
    border: 1px solid var(--app-border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--app-panel);
  }
  .grid table{width: 100%; border-collapse: collapse;}
  .grid thead th{
    background: var(--app-panel-soft);
    text-align: left;
    padding: 12px;
    border-bottom: 1px solid var(--app-border);
    color: var(--app-muted);
    font-weight: 800;
  }
  .grid tbody td{padding: 10px 12px; border-bottom: 1px solid var(--app-border); vertical-align: top;}
  .grid tbody tr:nth-child(odd){background: #fff;}
  .grid tbody tr:nth-child(even){background: var(--app-panel-soft);}
  .grid tbody tr:hover{background: var(--app-brand-soft);}

  .note{color: var(--app-muted); margin-top: 6px; font-size: .93rem;}
  .toast{
    position: fixed;
    bottom: 18px;
    right: 18px;
    background: #ffffff;
    border: 1px solid var(--app-border);
    color: var(--app-text);
    padding: 12px 14px;
    border-radius: 16px;
    box-shadow: var(--app-shadow);
    opacity: 0;
    transform: translateY(8px);
    transition: .25s ease;
  }
  .toast.show{opacity: 1; transform: translateY(0);}
  .mono{font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;}

  @media (max-width: 620px){
    .wrap{
      width: min(100% - 22px, 1180px);
      margin: 20px auto 32px;
    }
    .toolbar > .btn{flex: 1 1 calc(50% - 10px);}
    .btn--ghost{flex-basis: 100%;}
  }