:root {
color-scheme: light;
--sdisk-bg: radial-gradient(1200px 500px at 10% 0%, #eef2ff 0%, transparent 60%),
radial-gradient(900px 400px at 90% 10%, #e6f0ff 0%, transparent 55%),
linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%);
--sdisk-surface: rgba(255, 255, 255, 0.9);
--sdisk-border: rgba(18, 28, 64, 0.08);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--sdisk-bg);
color: #0f172a;
min-height: 100vh;
}
.sdisk-main {
width: 100%;
}
.sdisk-shell {
margin: 16px;
background: var(--sdisk-surface);
border: 1px solid var(--sdisk-border);
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
border-radius: 20px;
padding: 28px;
backdrop-filter: blur(6px);
}
.sdisk-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
gap: 16px;
}
.sdisk-title {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.02em;
}
.sdisk-subtitle {
font-size: 14px;
color: #64748b;
}
.sdisk-topbar-title {
display: flex;
flex-direction: column;
gap: 6px;
}
.sdisk-app-header {
width: 100%;
background: rgba(255, 255, 255, 0.8);
border-bottom: 1px solid var(--sdisk-border);
backdrop-filter: blur(10px);
}
.sdisk-app-header-inner {
width: 100%;
margin: 0;
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.sdisk-actions {
display: flex;
gap: 12px;
}
.sdisk-filter-row {
align-items: center;
}
.sdisk-filter-actions {
display: flex;
align-items: center;
gap: 16px;
}
.sdisk-profile-btn {
padding: 6px 12px;
border-radius: 999px;
}
.sdisk-table {
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--sdisk-border);
}
.sdisk-spinner {
width: 48px;
height: 48px;
border-radius: 50%;
border: 4px solid rgba(20, 40, 160, 0.15);
border-top-color: #1428a0;
animation: sdisk-spin 0.9s linear infinite;
}
@keyframes sdisk-spin {
to {
transform: rotate(360deg);
}
}
.sdisk-modal-title {
font-size: 20px !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
}
