/* root colors */
:root{
  --pure-black: #000;
  --dark-bg: #12162c;
  --dark-bg1: #0f1726;
  --deep-blue: #21217C;
  --l-blue: #0286CE;
  --lg-blue: #3A84C8;
  --dg-blue: #364082;
  --muted: #7c94c3;
  --text: #B0C4DE;
  --hilight: #B0E0E6;
  --pure-blue: #1E90FF;
  --alert: #f736b0;
  --card-radius: 2em;
  --card-border: 4px;
  --card-padding: 1.25rem;
  --max-content-width: 75%;
  --shadow-inset: inset 0 0 5px rgba(4,102,155,0.45);
  --header-room: 5rem;
}


body,
html {
    margin: 0;
    padding: 0;
    background: var(--pure-black);
}

.wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
}

.header {
    margin-bottom: 24px;
    color: var(--pure-blue);
}

p {
    color: var(--text);
}

.sub {
    margin-top: 8px;
}

.scripts {
    display: grid;
    gap: 16px;
}

.card {
    padding: 16px;
    border-radius: var(--card-radius);
    border: var(--card-border) solid var(--deep-blue);
     background: var(--dark-bg1);
     box-shadow: var(--shadow-inset);
}

.card-top {
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.title {
    margin: 0;
    color: var(--pure-blue);
}

.meta {
    display: flex;
    gap: 10px;
}

.desc {
    margin: 10px 0 12px;
    color: var(--text);
}

.matches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 14px;
}

.pill {
    padding: 2px 6px;
    display: inline-block;
}

.actions {
    display: flex;
    gap: 10px;
}

.btn {
    padding: 8px 12px;
    display: inline-block;
    text-decoration: none;
    box-shadow: var(--shadow-inset)
}

.btn.ghost {
    opacity: 0.8;
}

.loading,
.error,
.hint {
    margin: 0;
    color: var(--alert);
}