:root {
			--dash-bg: #f4f7fc;
			--dash-surface: #ffffff;
			--dash-surface-soft: #f8fbff;
			--dash-border: rgba(31, 54, 92, 0.08);
			--dash-border-strong: rgba(31, 54, 92, 0.14);
			--dash-text: #1f355c;
			--dash-muted: #6a7a93;
			--dash-blue: #3f7dff;
			--dash-blue-deep: #245eea;
			--dash-blue-soft: #eaf2ff;
			--dash-green: #1fbd6a;
			--dash-green-soft: #e9f9ef;
			--dash-purple: #8b5cf6;
			--dash-purple-soft: #f1eaff;
			--dash-orange: #ff9f1c;
			--dash-orange-soft: #fff1dd;
			--dash-shadow: 0 18px 40px rgba(29, 53, 93, 0.08);
			--dash-shadow-soft: 0 10px 24px rgba(29, 53, 93, 0.06);
			--sidebar-width: 280px;
			--topbar-height: 76px;
		}

		* {
			box-sizing: border-box;
		}

		html, body {
			min-height: 100%;
		}

		body {
			margin: 0;
			font-family: 'Inter', sans-serif;
			color: var(--dash-text);
			background:
				radial-gradient(circle at top left, rgba(63, 125, 255, 0.08), transparent 32%),
				radial-gradient(circle at 85% 12%, rgba(139, 92, 246, 0.06), transparent 26%),
				var(--dash-bg);
			overflow-x: hidden;
		}

		a {
			text-decoration: none;
		}

		.dashboard-shell {
			min-height: 100vh;
			display: flex;
			position: relative;
		}

		.dashboard-sidebar {
			width: var(--sidebar-width);
			background: rgba(255, 255, 255, 0.94);
			backdrop-filter: blur(16px);
			border-right: 1px solid var(--dash-border);
			box-shadow: 16px 0 40px rgba(29, 53, 93, 0.03);
			position: fixed;
			inset: 0 auto 0 0;
			z-index: 1040;
			display: flex;
			flex-direction: column;
			transition: transform 0.3s ease;
		}

		.sidebar-brand {
			height: var(--topbar-height);
			padding: 18px 22px;
			display: flex;
			align-items: center;
			gap: 12px;
			border-bottom: 1px solid var(--dash-border);
		}

		.brand-mark {
			width: 38px;
			height: 38px;
			border-radius: 12px;
			display: grid;
			place-items: center;
			background: linear-gradient(145deg, #2e73ff, #5b9cff);
			color: #fff;
			box-shadow: 0 10px 22px rgba(46, 115, 255, 0.22);
			font-size: 1.15rem;
			flex: 0 0 auto;
		}

		.brand-text strong {
			display: block;
			font-size: 1rem;
			line-height: 1.1;
			color: #193055;
		}

		.brand-text span {
			display: block;
			margin-top: 2px;
			font-size: 0.75rem;
			color: var(--dash-muted);
		}

		.sidebar-nav {
			padding: 18px 14px 10px;
			overflow-y: auto;
			flex: 1 1 auto;
		}

		.nav-group-label {
			font-size: 0.72rem;
			font-weight: 700;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			color: #8190a8;
			padding: 12px 12px 8px;
		}

		.sidebar-item {
			border-radius: 16px;
			margin: 2px 0;
		}

		.sidebar-link {
			display: flex;
			align-items: center;
			gap: 14px;
			color: #274062;
			padding: 13px 14px;
			border-radius: 14px;
			transition: all 0.2s ease;
			font-size: 0.95rem;
			font-weight: 500;
		}

		.sidebar-link i {
			width: 20px;
			text-align: center;
			color: #7a8aa4;
			font-size: 0.95rem;
		}

		.sidebar-link.active,
		.sidebar-link:hover {
			background: linear-gradient(135deg, rgba(63, 125, 255, 0.12), rgba(63, 125, 255, 0.06));
			color: var(--dash-blue-deep);
			box-shadow: inset 0 0 0 1px rgba(63, 125, 255, 0.08);
		}

		.sidebar-link.active i,
		.sidebar-link:hover i {
			color: var(--dash-blue);
		}

		.sidebar-card {
			margin: 14px 14px 18px;
			padding: 18px;
			border-radius: 20px;
			background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
			border: 1px solid rgba(63, 125, 255, 0.12);
			box-shadow: var(--dash-shadow-soft);
		}

		.sidebar-card h6 {
			margin: 0 0 8px;
			font-size: 1.05rem;
			font-weight: 700;
			color: #1c3358;
		}

		.sidebar-card p {
			margin: 0 0 16px;
			color: var(--dash-muted);
			font-size: 0.9rem;
			line-height: 1.5;
		}

		.sidebar-cta {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
			padding: 11px 14px;
			border-radius: 14px;
			border: 1px solid rgba(63, 125, 255, 0.28);
			color: var(--dash-blue-deep);
			background: rgba(255, 255, 255, 0.88);
			font-weight: 600;
			box-shadow: 0 10px 20px rgba(63, 125, 255, 0.08);
		}

		.dashboard-main {
			margin-left: var(--sidebar-width);
			width: calc(100% - var(--sidebar-width));
			min-height: 100vh;
			display: flex;
			flex-direction: column;
		}

		.dashboard-topbar {
			height: var(--topbar-height);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 24px 0 22px;
			position: sticky;
			top: 0;
			z-index: 1030;
			background: rgba(244, 247, 252, 0.88);
			backdrop-filter: blur(12px);
		}

		.topbar-left,
		.topbar-right {
			display: flex;
			align-items: center;
			gap: 14px;
		}

		.menu-toggle {
			width: 42px;
			height: 42px;
			border: 0;
			border-radius: 14px;
			background: rgba(255, 255, 255, 0.82);
			color: #30496f;
			box-shadow: var(--dash-shadow-soft);
			display: inline-flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: transform 0.18s ease, box-shadow 0.18s ease;
		}

		.menu-toggle:hover {
			transform: translateY(-1px);
			box-shadow: 0 12px 24px rgba(29, 53, 93, 0.09);
		}

		.topbar-user {
			display: flex;
			align-items: center;
			gap: 12px;
		}

		.notification-btn {
			width: 42px;
			height: 42px;
			border-radius: 999px;
			border: 0;
			background: rgba(255, 255, 255, 0.88);
			color: #2c4771;
			position: relative;
			box-shadow: var(--dash-shadow-soft);
		}

		.notification-badge {
			position: absolute;
			top: 2px;
			right: 1px;
			width: 18px;
			height: 18px;
			border-radius: 999px;
			background: #ff5a67;
			color: #fff;
			font-size: 0.68rem;
			font-weight: 700;
			display: grid;
			place-items: center;
			border: 2px solid #f4f7fc;
		}

		.user-copy {
			text-align: right;
			line-height: 1.1;
		}

		.user-copy small {
			display: block;
			color: #7890ad;
			font-weight: 500;
			font-size: 0.76rem;
			margin-bottom: 4px;
		}

		.user-copy strong {
			display: block;
			font-size: 0.96rem;
			color: #203a61;
		}

		.avatar {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			display: grid;
			place-items: center;
			background: linear-gradient(145deg, #e7f0ff, #dbe8ff);
			color: var(--dash-blue);
			border: 1px solid rgba(63, 125, 255, 0.16);
			font-weight: 800;
			flex: 0 0 auto;
		}

		.content-wrap {
			padding: 0 22px 22px;
			flex: 1 1 auto;
		}

		.hero-card,
		.panel-card,
		.metric-card,
		.quick-card,
		.partner-card,
		.announcement-card,
		.trust-card {
			border: 1px solid var(--dash-border);
			border-radius: 22px;
			background: var(--dash-surface);
			box-shadow: var(--dash-shadow-soft);
		}

		.hero-card {
			overflow: hidden;
			position: relative;
			padding: 34px 34px 28px;
			background:
				radial-gradient(circle at 82% 12%, rgba(88, 136, 255, 0.18), transparent 20%),
				radial-gradient(circle at 70% 55%, rgba(63, 125, 255, 0.12), transparent 30%),
				linear-gradient(135deg, #f2f7ff 0%, #e6efff 100%);
		}

		.hero-card::after {
			content: "";
			position: absolute;
			inset: 0;
			background:
				radial-gradient(circle at 78% 30%, rgba(255, 255, 255, 0.9) 0 8px, transparent 9px),
				radial-gradient(circle at 86% 20%, rgba(255, 255, 255, 0.7) 0 7px, transparent 8px),
				radial-gradient(circle at 90% 48%, rgba(255, 255, 255, 0.75) 0 6px, transparent 7px);
			pointer-events: none;
			opacity: 0.75;
		}

		.hero-copy {
			position: relative;
			z-index: 1;
			max-width: 520px;
		}

		.hero-copy h1 {
			margin: 0 0 12px;
			font-size: clamp(1.7rem, 2.8vw, 2.45rem);
			line-height: 1.15;
			font-weight: 800;
			letter-spacing: -0.03em;
			color: #1b3258;
		}

		.hero-copy p {
			margin: 0;
			font-size: 0.98rem;
			color: #536782;
			max-width: 460px;
		}

		.hero-visual {
			position: absolute;
			right: -6px;
			top: 50%;
			transform: translateY(-50%);
			width: min(44vw, 520px);
			height: 100%;
			min-height: 220px;
			z-index: 0;
			pointer-events: none;
		}

		.world-grid {
			position: absolute;
			inset: 6% 0 8% 22%;
			border-radius: 999px;
			background:
				radial-gradient(circle at 18% 30%, rgba(63, 125, 255, 0.95) 0 2px, transparent 3px),
				radial-gradient(circle at 22% 50%, rgba(63, 125, 255, 0.75) 0 2px, transparent 3px),
				radial-gradient(circle at 28% 65%, rgba(63, 125, 255, 0.8) 0 2px, transparent 3px),
				radial-gradient(circle at 35% 22%, rgba(63, 125, 255, 0.75) 0 2px, transparent 3px),
				radial-gradient(circle at 42% 40%, rgba(63, 125, 255, 0.7) 0 2px, transparent 3px),
				radial-gradient(circle at 49% 58%, rgba(63, 125, 255, 0.7) 0 2px, transparent 3px),
				radial-gradient(circle at 58% 26%, rgba(63, 125, 255, 0.75) 0 2px, transparent 3px),
				radial-gradient(circle at 65% 42%, rgba(63, 125, 255, 0.8) 0 2px, transparent 3px),
				radial-gradient(circle at 71% 60%, rgba(63, 125, 255, 0.75) 0 2px, transparent 3px),
				radial-gradient(circle at 82% 32%, rgba(63, 125, 255, 0.95) 0 2px, transparent 3px),
				radial-gradient(circle at 86% 50%, rgba(63, 125, 255, 0.72) 0 2px, transparent 3px),
				linear-gradient(90deg, rgba(63, 125, 255, 0.10), rgba(63, 125, 255, 0.03));
			opacity: 0.55;
			filter: blur(0.2px);
		}

		.hero-shape {
			position: absolute;
			border-radius: 24px;
			box-shadow: 0 20px 40px rgba(46, 115, 255, 0.14);
			border: 1px solid rgba(255, 255, 255, 0.7);
			backdrop-filter: blur(4px);
		}

		.shield-shape {
			width: 88px;
			height: 88px;
			left: 22%;
			top: 30%;
			transform: rotate(-6deg);
			background: linear-gradient(160deg, rgba(76, 126, 255, 0.95), rgba(45, 89, 210, 0.88));
			border-radius: 28px 28px 34px 34px;
			display: grid;
			place-items: center;
			color: #fff;
			font-size: 2rem;
		}

		.shield-shape::before {
			content: "";
			width: 34px;
			height: 34px;
			border: 3px solid rgba(255, 255, 255, 0.95);
			border-bottom-width: 6px;
			border-radius: 10px 10px 14px 14px;
			position: relative;
		}

		.card-shape {
			width: 98px;
			height: 60px;
			right: 13%;
			top: 34%;
			background: linear-gradient(145deg, #7ea8ff, #4d7cff);
			border-radius: 16px;
		}

		.receipt-shape {
			width: 82px;
			height: 112px;
			right: 8%;
			top: 18%;
			background: rgba(255, 255, 255, 0.75);
			border-radius: 18px;
			padding: 14px 12px;
		}

		.receipt-shape::before,
		.receipt-shape::after {
			content: "";
			display: block;
			height: 10px;
			border-radius: 999px;
			background: rgba(67, 103, 165, 0.2);
			margin-bottom: 9px;
		}

		.receipt-shape::after {
			width: 56%;
			margin-bottom: 0;
		}

		.check-badge {
			position: absolute;
			right: 11%;
			top: 42%;
			width: 28px;
			height: 28px;
			border-radius: 50%;
			background: #4ca2ff;
			color: #fff;
			display: grid;
			place-items: center;
			border: 3px solid rgba(255, 255, 255, 0.88);
			font-size: 0.78rem;
			box-shadow: 0 10px 18px rgba(63, 125, 255, 0.24);
		}

		.metrics-row {
			margin-top: 16px;
		}

		.metric-card {
			padding: 20px;
			height: 100%;
		}

		.metric-icon {
			width: 46px;
			height: 46px;
			border-radius: 14px;
			display: grid;
			place-items: center;
			margin-bottom: 14px;
			color: #fff;
			font-size: 1.05rem;
		}

		.metric-icon.blue {
			background: linear-gradient(145deg, #5b8dff, #2f67f2);
		}

		.metric-icon.green {
			background: linear-gradient(145deg, #31c26d, #1da254);
		}

		.metric-icon.purple {
			background: linear-gradient(145deg, #a56eff, #7c4de7);
		}

		.metric-icon.orange {
			background: linear-gradient(145deg, #ffb14c, #ff930d);
		}

		.metric-card .label {
			display: block;
			font-size: 0.9rem;
			font-weight: 600;
			color: #51647f;
			margin-bottom: 2px;
		}

		.metric-card .value {
			display: block;
			font-size: 1.8rem;
			line-height: 1.05;
			font-weight: 800;
			letter-spacing: -0.03em;
			color: #193055;
			margin-bottom: 8px;
		}

		.metric-card .delta {
			color: #5f758f;
			font-size: 0.9rem;
		}

		.metric-card .delta .up {
			color: var(--dash-green);
			font-weight: 700;
		}

		.quick-panel,
		.announcement-panel {
			margin-top: 16px;
			display: flex;
			flex-direction: column;
			gap: 16px;
		}

		.panel-card {
			padding: 18px;
		}

		.panel-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
			margin-bottom: 16px;
		}

		.panel-header h2,
		.panel-header h3 {
			margin: 0;
			font-size: 1.03rem;
			font-weight: 800;
			letter-spacing: -0.02em;
			color: #1b3258;
		}

		.panel-link {
			font-size: 0.85rem;
			font-weight: 700;
			color: var(--dash-blue);
			white-space: nowrap;
		}

		.quick-grid {
			display: grid;
			grid-template-columns: repeat(4, minmax(0, 1fr));
			gap: 12px;
		}

		.quick-item {
			border: 1px solid rgba(63, 125, 255, 0.12);
			border-radius: 16px;
			padding: 18px 12px 16px;
			background: linear-gradient(180deg, #ffffff, #fbfdff);
			text-align: center;
			color: #203a61;
			transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
			min-height: 92px;
		}

		.quick-item:hover {
			transform: translateY(-2px);
			border-color: rgba(63, 125, 255, 0.24);
			box-shadow: 0 14px 24px rgba(29, 53, 93, 0.07);
		}

		.quick-item .quick-icon {
			width: 34px;
			height: 34px;
			margin: 0 auto 10px;
			border-radius: 12px;
			display: grid;
			place-items: center;
			font-size: 0.95rem;
		}

		.quick-item .quick-icon.blue {
			background: rgba(63, 125, 255, 0.12);
			color: var(--dash-blue);
		}

		.quick-item .quick-icon.green {
			background: rgba(31, 189, 106, 0.12);
			color: var(--dash-green);
		}

		.quick-item .quick-icon.purple {
			background: rgba(139, 92, 246, 0.12);
			color: var(--dash-purple);
		}

		.quick-item .quick-icon.gray {
			background: rgba(131, 145, 165, 0.12);
			color: #5f758f;
		}

		.quick-item span {
			display: block;
			font-size: 0.86rem;
			font-weight: 600;
			line-height: 1.35;
		}

		.partner-card {
			overflow: hidden;
			background:
				radial-gradient(circle at 78% 45%, rgba(63, 125, 255, 0.08), transparent 28%),
				linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
		}

		.partner-body {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 18px;
			padding: 18px;
		}

		.partner-copy {
			flex: 1 1 50%;
			max-width: 340px;
		}

		.partner-copy p {
			margin: 8px 0 0;
			color: var(--dash-muted);
			font-size: 0.92rem;
			line-height: 1.55;
		}

		.slider-controls {
			display: flex;
			align-items: center;
			gap: 10px;
			margin-top: 18px;
		}

		.slider-btn {
			width: 34px;
			height: 34px;
			border: 1px solid rgba(63, 125, 255, 0.14);
			border-radius: 50%;
			display: grid;
			place-items: center;
			color: #42618f;
			background: #fff;
		}

		.dots {
			display: flex;
			align-items: center;
			gap: 9px;
			margin-left: 6px;
		}

		.dots span {
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: #cbd6e6;
		}

		.dots span.active {
			background: var(--dash-blue);
			width: 9px;
			height: 9px;
		}

		.partner-visual {
			flex: 0 0 auto;
			width: min(40vw, 380px);
			min-width: 250px;
			height: 190px;
			border-radius: 18px;
			background:
				radial-gradient(circle at 50% 50%, rgba(63, 125, 255, 0.09) 0 1px, transparent 1px),
				radial-gradient(circle at 30% 50%, rgba(63, 125, 255, 0.08) 0 1px, transparent 1px),
				linear-gradient(135deg, #f8fbff, #edf4ff);
			border: 1px solid rgba(63, 125, 255, 0.08);
			display: grid;
			place-items: center;
			position: relative;
			overflow: hidden;
		}

		.partner-visual::before {
			content: "";
			position: absolute;
			inset: 10% 6%;
			border-radius: 50%;
			background: radial-gradient(circle at 50% 50%, rgba(63, 125, 255, 0.14), transparent 58%);
			filter: blur(6px);
		}

		.partner-visual .partner-logo {
			position: relative;
			z-index: 1;
			width: 160px;
			height: 86px;
			border-radius: 18px;
			background: #ffffff;
			box-shadow: 0 14px 30px rgba(29, 53, 93, 0.08);
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
			font-size: 1.8rem;
			font-weight: 800;
			color: #1b3258;
		}

		.partner-visual .partner-logo i {
			color: #ef6c2f;
			font-size: 2rem;
		}

		.announcement-list {
			display: flex;
			flex-direction: column;
			gap: 18px;
		}

		.announcement-item {
			display: flex;
			gap: 14px;
			align-items: flex-start;
		}

		.announcement-icon {
			width: 44px;
			height: 44px;
			border-radius: 14px;
			display: grid;
			place-items: center;
			flex: 0 0 auto;
			font-size: 0.95rem;
		}

		.announcement-icon.blue {
			background: rgba(63, 125, 255, 0.12);
			color: var(--dash-blue);
		}

		.announcement-icon.green {
			background: rgba(31, 189, 106, 0.12);
			color: var(--dash-green);
		}

		.announcement-icon.purple {
			background: rgba(139, 92, 246, 0.12);
			color: var(--dash-purple);
		}

		.announcement-item h4 {
			margin: 0 0 4px;
			font-size: 0.94rem;
			font-weight: 700;
			color: #1f355c;
		}

		.announcement-item p {
			margin: 0;
			font-size: 0.88rem;
			color: var(--dash-muted);
			line-height: 1.5;
		}

		.announcement-meta {
			margin-top: 4px;
			font-size: 0.78rem;
			color: #8da0b7;
			font-weight: 600;
		}

		.trust-strip {
			margin-top: 16px;
		}

		.trust-card {
			padding: 18px 16px;
		}

		.trust-grid {
			display: grid;
			grid-template-columns: repeat(4, minmax(0, 1fr));
			gap: 12px;
		}

		.trust-item {
			display: flex;
			align-items: flex-start;
			gap: 12px;
			padding: 10px 8px;
			border-radius: 16px;
		}

		.trust-item .trust-icon {
			width: 34px;
			height: 34px;
			border-radius: 50%;
			background: rgba(63, 125, 255, 0.12);
			color: var(--dash-blue);
			display: grid;
			place-items: center;
			flex: 0 0 auto;
		}

		.trust-item h5 {
			margin: 0 0 4px;
			font-size: 0.88rem;
			font-weight: 700;
			color: #1f355c;
		}

		.trust-item p {
			margin: 0;
			color: var(--dash-muted);
			font-size: 0.8rem;
			line-height: 1.45;
		}

		.page-footnote {
			padding: 14px 24px 22px 22px;
			color: #8a9ab1;
			font-size: 0.82rem;
		}

		.sidebar-overlay {
			display: none;
			position: fixed;
			inset: 0;
			background: rgba(15, 26, 46, 0.28);
			z-index: 1035;
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.25s ease;
		}

		body.sidebar-open .sidebar-overlay {
			opacity: 1;
			pointer-events: auto;
		}

		body.sidebar-open .dashboard-sidebar {
			transform: translateX(0);
		}

		@media (max-width: 1199.98px) {
			.hero-visual {
				width: min(45vw, 480px);
			}

			.partner-body {
				flex-direction: column;
				align-items: stretch;
			}

			.partner-copy {
				max-width: none;
			}

			.partner-visual {
				width: 100%;
			}
		}

		@media (max-width: 991.98px) {
			.dashboard-sidebar {
				transform: translateX(-102%);
				box-shadow: 18px 0 45px rgba(29, 53, 93, 0.14);
			}

			.sidebar-overlay {
				display: block;
			}

			.dashboard-main {
				margin-left: 0;
				width: 100%;
			}

			.hero-card {
				padding-right: 26px;
			}

			.hero-visual {
				position: relative;
				right: auto;
				top: auto;
				transform: none;
				width: 100%;
				min-height: 180px;
				margin-top: 26px;
			}

			.quick-grid,
			.trust-grid {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}
		}

		@media (max-width: 767.98px) {
			.dashboard-topbar {
				padding: 0 14px;
			}

			.content-wrap {
				padding: 0 14px 18px;
			}

			.hero-card,
			.panel-card,
			.trust-card {
				border-radius: 18px;
			}

			.hero-card {
				padding: 24px 20px 18px;
			}

			.metric-card {
				padding: 18px;
			}

			.metric-card .value {
				font-size: 1.55rem;
			}

			.quick-grid,
			.trust-grid {
				grid-template-columns: 1fr;
			}

			.partner-visual {
				min-width: 0;
				height: 160px;
			}

			.user-copy {
				display: none;
			}
		}

		@media (prefers-reduced-motion: reduce) {
			*, *::before, *::after {
				animation-duration: 0.01ms !important;
				animation-iteration-count: 1 !important;
				transition-duration: 0.01ms !important;
				scroll-behavior: auto !important;
			}
		}