.sdsgrid-hero {
    max-width: 640px;
    margin: 56px auto 0;
    padding: 0 28px;
    text-align: center;
}
.sdsgrid-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6C5CE7;
}
.sdsgrid-hero h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 32px;
    color: #F1F2F6;
    margin: 10px 0 8px;
}
.sdsgrid-hero p { color: #8A8F9C; font-size: 14px; margin: 0; }

.sdsgrid-wrap {
    max-width: 960px;
    margin: 36px auto 60px;
    padding: 0 28px;
}

.sdsgrid-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 16px;
}

.sdsgrid-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #171A23;
    border: 1px solid #262A35;
    border-radius: 9px;
    padding: 9px 14px;
    flex: 1;
    min-width: 220px;
    max-width: 360px;
}
.sdsgrid-search input {
    background: transparent;
    border: none;
    outline: none;
    color: #F1F2F6;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    width: 100%;
}

.sdsgrid-pagesize {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #8A8F9C;
}
.sdsgrid-pagesize select {
    background: #171A23;
    border: 1px solid #262A35;
    border-radius: 7px;
    color: #F1F2F6;
    padding: 6px 10px;
    font-size: 12.5px;
    font-family: 'Inter', sans-serif;
}

.sdsgrid-table-scroll {
    background: #171A23;
    border: 1px solid #262A35;
    border-radius: 14px;
    overflow-x: auto;
}

.sdsgrid-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.sdsgrid-table th {
    background: #1A1D28;
    border-bottom: 1px solid #262A35;
    padding: 10px 14px 12px;
    text-align: left;
    cursor: grab;
    user-select: none;
    vertical-align: top;
    transition: background .15s;
}
.sdsgrid-table th.dragging { opacity: 0.4; background: #232733; }
.sdsgrid-table th:hover { background: #1D2029; }

.sdsgrid-col-search {
    width: 100%;
    background: #0F1117;
    border: 1px solid #262A35;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 11.5px;
    color: #F1F2F6;
    font-family: 'Inter', sans-serif;
    margin-bottom: 6px;
    box-sizing: border-box;
}
.sdsgrid-col-search::placeholder { color: #5A5F6D; }

.sdsgrid-col-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8A8F9C;
    display: flex;
    align-items: center;
    gap: 5px;
}
.sdsgrid-drag-handle { color: #4A4F5C; font-size: 12px; }

.sdsgrid-table td {
    padding: 10px 14px;
    border-top: 1px solid #1D2029;
    color: #C4C7D0;
}
.sdsgrid-table tbody tr:hover { background: #1D2029; }

.sdsgrid-status {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
}
.sdsgrid-status.paid { background: rgba(0,217,192,0.12); color: #00D9C0; }
.sdsgrid-status.pending { background: rgba(255,176,32,0.12); color: #FFB020; }
.sdsgrid-status.refunded { background: rgba(255,92,119,0.12); color: #FF5C77; }

.sdsgrid-empty {
    padding: 32px;
    text-align: center;
    color: #8A8F9C;
    font-size: 13px;
}

.sdsgrid-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}
.sdsgrid-pagination-info { font-size: 12px; color: #8A8F9C; }

.sdsgrid-pagination-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sdsgrid-pagination-controls button {
    background: #171A23;
    border: 1px solid #262A35;
    color: #F1F2F6;
    border-radius: 7px;
    width: 30px; height: 30px;
    cursor: pointer;
    font-size: 13px;
}
.sdsgrid-pagination-controls button:hover:not(:disabled) { background: #1D2029; border-color: #6C5CE7; }
.sdsgrid-pagination-controls button:disabled { color: #4A4F5C; cursor: not-allowed; }
.sdsgrid-page-current {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: #F1F2F6;
    min-width: 20px;
    text-align: center;
}

@media (max-width: 700px) {
    .sdsgrid-table-scroll { overflow-x: scroll; }
    .sdsgrid-table { min-width: 640px; }
}