* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
background-color: #f4f6fb;
color: #111827;
}

a {
color: inherit;
text-decoration: none;
}

.login-wrapper {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at top left, #2563eb1a, transparent 55%),
radial-gradient(circle at bottom right, #22c55e1a, transparent 55%),
linear-gradient(120deg, #f3f4f6, #eef2ff);
}

.login-card {
width: 100%;
max-width: 420px;
background-color: #ffffff;
border-radius: 18px;
padding: 32px 32px 28px 32px;
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}

.login-logo {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 26px;
}

.login-logo-icon {
width: 38px;
height: 38px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #ffffff;
font-weight: 700;
font-size: 18px;
}

.login-logo-text-main {
font-weight: 700;
font-size: 20px;
letter-spacing: 0.03em;
}

.login-logo-text-sub {
font-size: 11px;
color: #6b7280;
}

.login-title {
font-size: 22px;
font-weight: 700;
margin-bottom: 4px;
}

.login-subtitle {
font-size: 13px;
color: #6b7280;
margin-bottom: 22px;
}

.field-label {
font-size: 13px;
font-weight: 500;
margin-bottom: 6px;
color: #374151;
}

.input {
width: 100%;
padding: 10px 11px;
font-size: 14px;
border-radius: 10px;
border: 1px solid #e5e7eb;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
background-color: #f9fafb;
}

.input:focus {
border-color: #2563eb;
box-shadow: 0 0 0 1px #2563eb1a;
background-color: #ffffff;
}

.input-error {
border-color: #ef4444;
}

.field-error {
margin-top: 4px;
font-size: 12px;
color: #b91c1c;
}

.field {
margin-bottom: 14px;
}

.role-toggle {
display: flex;
align-items: center;
gap: 8px;
margin: 6px 0 18px 0;
font-size: 13px;
color: #4b5563;
}

.checkbox {
width: 15px;
height: 15px;
border-radius: 4px;
border: 1px solid #d1d5db;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

.checkbox-inner {
width: 9px;
height: 9px;
border-radius: 2px;
background-color: #2563eb;
display: none;
}

.checkbox.checked .checkbox-inner {
display: block;
}

.login-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 18px;
}

.btn {
border: none;
border-radius: 999px;
padding: 10px 18px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: transform 0.1s, box-shadow 0.1s, background-color 0.1s;
}

.btn-primary {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #ffffff;
box-shadow: 0 12px 20px rgba(37, 99, 235, 0.25);
}

.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 16px 30px rgba(37, 99, 235, 0.35);
}

.btn-secondary {
background-color: #f3f4f6;
color: #111827;
}

.btn-secondary:hover {
background-color: #e5e7eb;
}

.small-text {
font-size: 11px;
color: #9ca3af;
}

.app-shell {
display: flex;
min-height: 100vh;
background-color: #f3f4f6;
}

.sidebar {
width: 250px;
background-color: #020617;
color: #e5e7eb;
display: flex;
flex-direction: column;
}

.sidebar-header {
padding: 16px 18px 10px 18px;
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid rgba(31, 41, 55, 0.9);
}

.sidebar-logo-icon {
width: 32px;
height: 32px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #2563eb, #22c55e);
color: #ffffff;
font-size: 16px;
font-weight: 700;
}

.sidebar-logo-text {
font-size: 17px;
font-weight: 700;
letter-spacing: 0.03em;
}

.sidebar-user {
padding: 12px 18px 10px 18px;
border-bottom: 1px solid rgba(31, 41, 55, 0.85);
}

.sidebar-hello {
font-size: 14px;
margin-bottom: 8px;
}

.sidebar-balance-card {
background: linear-gradient(135deg, #0f172a, #020617);
border-radius: 14px;
padding: 10px 12px;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid rgba(148, 163, 184, 0.25);
}

.sidebar-balance-label {
font-size: 12px;
color: #9ca3af;
}

.sidebar-balance-value {
font-size: 14px;
font-weight: 600;
}

.sidebar-nav {
flex: 1;
padding: 10px 8px 8px 8px;
}

.sidebar-nav-section {
margin-bottom: 10px;
}

.sidebar-nav-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 10px;
font-size: 13px;
color: #9ca3af;
cursor: pointer;
transition: background-color 0.12s, color 0.12s;
}

.sidebar-nav-item:hover {
background-color: rgba(15, 23, 42, 0.9);
color: #e5e7eb;
}

.sidebar-nav-item.active {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #ffffff;
}

.sidebar-nav-icon {
width: 18px;
height: 18px;
border-radius: 6px;
background-color: rgba(15, 23, 42, 0.85);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
}

.sidebar-footer {
padding: 10px 14px 14px 14px;
border-top: 1px solid rgba(31, 41, 55, 0.85);
display: flex;
flex-direction: column;
gap: 6px;
font-size: 12px;
color: #9ca3af;
}

.logout-link {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
}

.support-link {
color: #60a5fa;
font-weight: 500;
cursor: pointer;
}

.main {
flex: 1;
display: flex;
flex-direction: column;
}

.main-header {
padding: 18px 24px 10px 24px;
display: flex;
align-items: center;
justify-content: space-between;
}

.main-title {
font-size: 22px;
font-weight: 700;
}

.main-subtitle {
font-size: 13px;
color: #6b7280;
}

.main-header-right {
display: flex;
align-items: center;
gap: 12px;
font-size: 12px;
color: #6b7280;
}

.main-content {
flex: 1;
padding: 6px 24px 20px 24px;
}

.cards-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
margin-bottom: 18px;
}

.card {
background-color: #ffffff;
border-radius: 18px;
padding: 16px 18px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
border: 1px solid #e5e7eb;
}

.card-title {
font-size: 15px;
font-weight: 600;
margin-bottom: 2px;
}

.card-subtitle {
font-size: 12px;
color: #6b7280;
margin-bottom: 10px;
}

.card-value {
font-size: 26px;
font-weight: 700;
margin-bottom: 12px;
}

.link-like {
font-size: 13px;
color: #2563eb;
font-weight: 500;
cursor: pointer;
}

.section-title {
font-size: 17px;
font-weight: 600;
margin-bottom: 6px;
}

.section-subtitle {
font-size: 13px;
color: #6b7280;
margin-bottom: 16px;
}

.empty-state {
height: 260px;
border-radius: 18px;
border: 1px dashed #e5e7eb;
background-color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
color: #6b7280;
font-size: 14px;
}

.empty-icon {
width: 52px;
height: 52px;
border-radius: 999px;
background-color: #eff6ff;
display: flex;
align-items: center;
justify-content: center;
color: #2563eb;
font-size: 24px;
}

.badge {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 4px 10px;
font-size: 11px;
font-weight: 500;
}

.badge-green {
background-color: #dcfce7;
color: #15803d;
}

.badge-blue {
background-color: #dbeafe;
color: #1d4ed8;
}

.grid-two {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
}

.field-inline-label {
font-size: 12px;
color: #6b7280;
margin-bottom: 4px;
}

.textarea {
width: 100%;
min-height: 110px;
resize: vertical;
padding: 10px 11px;
font-size: 14px;
border-radius: 10px;
border: 1px solid #e5e7eb;
outline: none;
background-color: #f9fafb;
transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.textarea:focus {
border-color: #2563eb;
box-shadow: 0 0 0 1px #2563eb1a;
background-color: #ffffff;
}

.helper {
font-size: 11px;
color: #6b7280;
margin-top: 6px;
}

.helper-warning {
color: #b45309;
}

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

.table th,
.table td {
padding: 8px 10px;
border-bottom: 1px solid #e5e7eb;
text-align: left;
}

.table th {
font-size: 12px;
font-weight: 600;
color: #6b7280;
}

.chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 9px;
border-radius: 999px;
font-size: 11px;
}

.chip-pending {
background-color: #fef3c7;
color: #92400e;
}

.chip-completed {
background-color: #dcfce7;
color: #166534;
}

.stack-y {
display: flex;
flex-direction: column;
gap: 10px;
}

.stack-x {
display: flex;
align-items: center;
gap: 8px;
}

.stack-x-between {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}

.mt-8 {
margin-top: 8px;
}

.mt-12 {
margin-top: 12px;
}

.mt-16 {
margin-top: 16px;
}

.mt-20 {
margin-top: 20px;
}

.tag {
font-size: 11px;
color: #6b7280;
}

.tag-strong {
font-weight: 600;
color: #111827;
}

.admin-grid {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
gap: 18px;
}

@media (max-width: 900px) {
.app-shell {
flex-direction: column;
}
.sidebar {
width: 100%;
flex-direction: row;
overflow-x: auto;
}
.sidebar-header,
.sidebar-user,
.sidebar-footer {
display: none;
}
.sidebar-nav {
display: flex;
flex-direction: row;
padding: 8px;
}
.sidebar-nav-item {
white-space: nowrap;
}
.main-header {
padding-top: 12px;
}
}