html, body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: #F8FAFC;
    color: #1E293B;
    font-size: 13px;
}

* { box-sizing: border-box; }

a { text-decoration: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

/* ========== Page chrome ========== */
.page-title {
    font-size: 20px;
    font-weight: 700;
    color: #1E293B;
    margin: 16px 24px 8px 24px;
}
.toolbar {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 8px 16px;
    margin: 0 24px 12px 24px;
    gap: 8px;
}
.toolbar .flex-spacer { flex: 1; }
.toolbar input.search {
    border: 1px solid #E2E8F0;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
    width: 280px;
}
.toolbar input.search:focus { outline: none; border-color: #1E40AF; }

/* ========== Excel-style data grid ========== */
.excel-shell {
    margin: 0 24px 16px 24px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    overflow: auto;
}
.excel-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.excel-grid thead th {
    background: #F1F5F9;
    color: #475569;
    font-weight: 600;
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid #E2E8F0;
    border-right: 1px solid #E2E8F0;
    position: sticky;
    top: 0;
    z-index: 1;
}
.excel-grid thead th:last-child { border-right: none; }
.excel-grid tbody td {
    border-bottom: 1px solid #F1F5F9;
    border-right: 1px solid #F1F5F9;
    padding: 0;
    vertical-align: middle;
    height: 32px;
}
.excel-grid tbody td:last-child { border-right: none; }
.excel-grid tbody tr:hover { background: #F8FAFC; }
.cell {
    border: none;
    outline: none;
    width: 100%;
    padding: 6px 10px;
    font: inherit;
    color: #1E293B;
    background: transparent;
}
.cell:focus {
    background: #EFF6FF;
    box-shadow: inset 0 0 0 2px #2563EB;
}
select.cell { padding: 6px 8px; appearance: none; cursor: pointer; }

.cell-center { text-align: center; }
.cell-readonly { color: #64748B; padding: 6px 10px; }

.row-actions {
    display: flex;
    gap: 4px;
    justify-content: center;
}
.icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
}
.icon-btn:hover { background: #F1F5F9; }
.icon-btn.save :deep(svg), .icon-btn.save svg { color: #22C55E; }
.icon-btn.delete :deep(svg), .icon-btn.delete svg { color: #EF4444; }
.icon-btn[disabled] { opacity: .4; cursor: not-allowed; }

.empty {
    text-align: center;
    color: #94A3B8;
    padding: 32px 16px;
    font-style: italic;
}

/* ========== Misc ========== */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.badge-green { background: #DCFCE7; color: #16A34A; }
.badge-amber { background: #FEF3C7; color: #D97706; }
.badge-red { background: #FEE2E2; color: #DC2626; }
.badge-gray { background: #E2E8F0; color: #475569; }