:root {
				--primary: #004FB3;
				--primary-light: #05A5E5;
				--primary-dark: #003d8f;
				--accent: #32C1FA;
				--success: #10b981;
				--danger: #FE3F35;
				--warning: #FFFBEB;
				--gray-50: #f9fafb;
				--gray-100: #f3f4f6;
				--gray-200: #e5e7eb;
				--gray-300: #d1d5db;
				--gray-400: #9ca3af;
				--gray-500: #6b7280;
				--gray-600: #4b5563;
				--gray-700: #374151;
				--gray-800: #1f2937;
				--gray-900: #111827;
				--safe-top: env(safe-area-inset-top, 44px);
				--safe-bottom: env(safe-area-inset-bottom, 34px);
			}

			/* Dark Mode Theme */
			[data-theme="dark"] {
				--primary: #60a5fa;
				--primary-light: #93c5fd;
				--primary-dark: #2563eb;
				--accent: #60a5fa;
				--success: #34d399;
				--danger: #f87171;
				--warning: #fbbf24;
				--gray-50: #0f172a;
				--gray-100: #1e293b;
				--gray-200: #334155;
				--gray-300: #475569;
				--gray-400: #64748b;
				--gray-500: #94a3b8;
				--gray-600: #cbd5e1;
				--gray-700: #e2e8f0;
				--gray-800: #f1f5f9;
				--gray-900: #f8fafc;
			}

			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				-webkit-tap-highlight-color: transparent;
			}

			body {
				font-family:
					"Inter",
					-apple-system,
					BlinkMacSystemFont,
					sans-serif;
				background: #000;
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
				padding: 20px;
			}

			.phone-frame {
				width: 393px;
				height: 852px;
				background: #fff;
				border-radius: 50px;
				overflow: hidden;
				position: relative;
				box-shadow:
					0 50px 100px rgba(0, 0, 0, 0.5),
					inset 0 0 0 10px #1a1a1a;
			}

			.phone-screen {
				width: 100%;
				height: 100%;
				background: var(--gray-50);
				position: relative;
				overflow: hidden;
			}

			/* Status Bar - Hidden by default (only for desktop mockup) */
			.status-bar {
				display: none;
			}

			.status-time {
				font-size: 15px;
				font-weight: 600;
				color: var(--gray-900);
			}

			.status-icons {
				display: flex;
				gap: 5px;
				align-items: center;
			}

			.status-icons svg {
				width: 18px;
				height: 18px;
			}

			/* Dynamic Island - Hidden by default (only for desktop mockup) */
			.dynamic-island {
				display: none;
			}

			/* App Header */
			.app-header {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				background: #fff;
				padding: 12px 16px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-radius: 0;
				border-bottom: 1px solid var(--gray-100);
				z-index: 100;
			}

			.header-left {
				display: flex;
				align-items: center;
				gap: 12px;
			}

			.hamburger {
				width: 24px;
				height: 24px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 5px;
				cursor: pointer;
			}

			.hamburger span {
				width: 20px;
				height: 2px;
				background: var(--gray-700);
				border-radius: 1px;
			}

			.back-button {
				width: 36px;
				height: 36px;
				border-radius: 50%;
				background: var(--gray-100);
				display: none;
				align-items: center;
				justify-content: center;
				cursor: pointer;
			}

			.back-button:active {
				background: var(--gray-200);
			}

			.back-button svg {
				width: 20px;
				height: 20px;
				color: var(--gray-700);
			}

			.back-button.visible {
				display: flex;
			}

			.hamburger.hidden {
				display: none;
			}

			.logo.hidden {
				display: none;
			}

			.header-title {
				display: none;
				font-size: 17px;
				font-weight: 600;
				color: var(--gray-900);
			}

			.header-title.visible {
				display: block;
			}

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

			.logo-icon {
				width: 28px;
				height: 28px;
				background: var(--primary);
				border-radius: 8px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.logo-icon svg {
				width: 16px;
				height: 16px;
				fill: #fff;
			}

			.logo-text {
				font-size: 20px;
				font-weight: 700;
				color: var(--primary);
				letter-spacing: -0.5px;
			}

			.header-right {
				display: flex;
				align-items: center;
				gap: 16px;
			}

			.header-icon {
				width: 22px;
				height: 22px;
				color: var(--gray-600);
				cursor: pointer;
				position: relative;
			}

			.notification-badge {
				position: absolute;
				top: -4px;
				right: -4px;
				width: 16px;
				height: 16px;
				background: var(--danger);
				border-radius: 50%;
				font-size: 10px;
				font-weight: 600;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.avatar {
				width: 28px;
				height: 28px;
				border-radius: 50%;
				background: #dbeafe;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 11px;
				font-weight: 600;
				color: #1e40af;
			}
			.avatar.green { background: #d1fae5; color: #065f46; }
			.avatar.amber { background: #fef3c7; color: #92400e; }
			.avatar.pink { background: #fce7f3; color: #9d174d; }
			.avatar.purple { background: #ede9fe; color: #5b21b6; }

			/* Screen Container */
			.screen-container {
				height: 100%;
				overflow-y: auto;
				overflow-x: hidden;
				-webkit-overflow-scrolling: touch;
				position: relative;
				scrollbar-width: none;
				-ms-overflow-style: none;
				padding-top: 72px;
				padding-bottom: 88px;
			}
			.screen-container::-webkit-scrollbar {
				display: none;
			}

			.screen {
				display: none;
				min-height: 100%;
			}

			.screen.active {
				display: block;
			}

			/* Tutorial — intentionally empty, all styles are inline to avoid conflicts */

			/* Bottom Navigation */
			.bottom-nav {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 64px;
				background: #fff;
				border-radius: 0;
				border-top: 1px solid var(--gray-100);
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 0 4px;
				z-index: 100;
			}

			.nav-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 3px;
				cursor: pointer;
				padding: 8px 12px;
				min-width: 48px;
				min-height: 48px;
				transition: all 0.25s ease;
				-webkit-tap-highlight-color: transparent;
				touch-action: manipulation;
				user-select: none;
			}

			.nav-item svg {
				width: 22px;
				height: 22px;
				color: var(--gray-400);
				flex-shrink: 0;
				padding: 6px;
				box-sizing: content-box;
				border-radius: 12px;
				transition: all 0.25s ease;
			}

			.nav-item span {
				font-size: 10px;
				font-weight: 500;
				color: var(--gray-400);
				white-space: nowrap;
				transition: color 0.25s ease;
			}

			.nav-item.active svg {
				background: none;
				color: var(--primary);
			}

			.nav-item.active span {
				color: var(--primary);
				font-weight: 600;
			}

			/* More menu popup */
			.more-menu-overlay {
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 88px;
				z-index: 99;
			}
			.more-menu-overlay.visible {
				display: block;
			}
			.more-menu {
				display: none;
				position: absolute;
				bottom: 88px;
				right: 12px;
				background: #fff;
				border-radius: 16px;
				box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
				padding: 8px 0;
				z-index: 150;
				min-width: 180px;
			}
			.more-menu.visible {
				display: block;
			}
			.more-menu-item {
				display: flex;
				align-items: center;
				gap: 12px;
				padding: 12px 20px;
				cursor: pointer;
				transition: background 0.15s;
				font-size: 14px;
				font-weight: 500;
				color: var(--gray-800);
			}
			.more-menu-item:active {
				background: var(--gray-50);
			}
			.more-menu-item svg {
				width: 22px;
				height: 22px;
				color: var(--gray-500);
				flex-shrink: 0;
			}
			.more-menu-item.active-screen {
				color: var(--primary);
			}
			.more-menu-item.active-screen svg {
				color: var(--primary);
			}

			/* Section Styles */
			.section {
				padding: 16px 20px 20px;
			}
			.section:has(> .section-header:only-child) {
				padding-bottom: 6px;
			}
			.prices-panel .section {
				padding: 12px 20px 4px;
			}

			.section-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10px;
			}
			.prices-panel .section-header {
				margin-bottom: 0;
			}

			.section-title {
				font-size: 18px;
				font-weight: 700;
				color: var(--gray-900);
			}

			.section-link {
				font-size: 13px;
				font-weight: 600;
				color: var(--accent);
				cursor: pointer;
			}

			/* Tile group label */
			.tile-group-label {
				font-size: 11px;
				font-weight: 600;
				color: var(--gray-500);
				text-transform: uppercase;
				letter-spacing: 0.5px;
				padding: 12px 20px 4px;
				background: #fff;
			}

			/* Markets Grid */
			.markets-grid {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 12px;
				padding: 4px 20px 16px;
				background: #fff;
			}

			.market-tile {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 8px;
				cursor: pointer;
				overflow: hidden;
			}

			.market-icon {
				width: 56px;
				height: 56px;
				border-radius: 8px;
				background: var(--gray-100);
				display: flex;
				align-items: center;
				justify-content: center;
				transition: transform 0.2s;
			}

			.market-icon svg {
				width: 28px;
				height: 28px;
			}

			.market-name {
				font-size: 11px;
				font-weight: 500;
				color: var(--gray-600);
				text-align: center;
			}

			/* Features Row */
			.features-grid {
				display: flex;
				flex-direction: row;
				gap: 12px;
				padding: 8px 20px 20px;
				background: #fff;
				overflow-x: auto;
				scrollbar-width: none;
				-ms-overflow-style: none;
				cursor: grab;
			}

			.features-grid::-webkit-scrollbar {
				display: none;
			}

			.features-grid.dragging {
				cursor: grabbing;
			}

			.feature-tile {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
				gap: 8px;
				padding: 14px 10px 12px;
				background: var(--gray-50);
				border-radius: 16px;
				cursor: pointer;
				flex-shrink: 0;
				width: 76px;
			}

			.feature-tile:active {
				background: var(--gray-100);
			}

			.feature-tile-icon {
				width: 44px;
				height: 44px;
				border-radius: 8px;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
			}

			.feature-tile-icon svg {
				width: 22px;
				height: 22px;
				stroke: #fff;
				fill: none;
				stroke-width: 2;
				flex-shrink: 0;
			}

			.feature-tile > span {
				font-size: 12px;
				font-weight: 600;
				color: var(--gray-700);
				text-align: center;
				min-height: 32px;
				display: flex;
				align-items: flex-start;
				justify-content: center;
				line-height: 1.3;
			}

			/* Price Cards */
			.price-cards-scroll {
				display: flex;
				gap: 12px;
				overflow-x: auto;
				-webkit-overflow-scrolling: touch;
				padding: 14px 20px 22px;
				margin: -6px 0 -6px;
				scrollbar-width: none;
				-ms-overflow-style: none;
			}
			.price-cards-scroll::-webkit-scrollbar {
				display: none;
			}

			@keyframes priceAutoScroll {
				0% {
					transform: translateX(0);
				}
				100% {
					transform: translateX(-50%);
				}
			}

			.price-card {
				flex-shrink: 0;
				width: 240px;
				background: #fff;
				border-radius: 16px;
				padding: 16px;
				border: 1px solid rgba(0, 0, 0, 0.08);
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 4px 12px -4px rgba(0, 0, 0, 0.25);
				cursor: pointer;
				display: flex;
				flex-direction: column;
				gap: 6px;
			}

			.price-card-strip {
				display: none;
			}

			.price-card-header {
				display: flex;
				flex-direction: column;
				margin-bottom: 4px;
			}

			.price-card-flag {
				display: none;
			}

			.flag-icon {
				width: 22px;
				height: 16px;
				border-radius: 3px;
				display: inline-block;
				flex-shrink: 0;
				border: 1px solid var(--gray-200);
				overflow: hidden;
			}
			.flag-icon.flag-in {
				background: linear-gradient(180deg, #FF9933 0%, #FF9933 33.3%, #fff 33.3%, #fff 66.6%, #138808 66.6%, #138808 100%);
			}
			.flag-icon.flag-cn {
				background: #DE2910;
			}
			.flag-icon.flag-au {
				background: #00008B;
			}
			.flag-icon.flag-us {
				background: linear-gradient(180deg, #B22234 0%, #B22234 15%, #fff 15%, #fff 30%, #B22234 30%, #B22234 45%, #fff 45%, #fff 60%, #B22234 60%, #B22234 75%, #fff 75%, #fff 90%, #B22234 90%);
			}

			.trade-tag {
				font-size: 9px;
				font-weight: 600;
				height: 18px;
				padding: 0 6px;
				border-radius: 4px;
				text-transform: uppercase;
				display: inline-flex;
				align-items: center;
				flex-shrink: 0;
			}

			.trade-tag.dom {
				background: var(--gray-100);
				color: var(--gray-700);
				border: none;
			}

			.trade-tag.imp {
				background: var(--gray-100);
				color: var(--gray-700);
				border: none;
			}

			.trade-tag.exp {
				background: var(--gray-100);
				color: var(--gray-700);
				border: none;
			}

			.price-card-value {
				text-align: left;
			}

			.price-amount {
				font-size: 24px;
				font-weight: 700;
				color: var(--gray-900);
			}

			.price-change {
				font-size: 13px;
				font-weight: 600;
				display: flex;
				align-items: center;
				gap: 2px;
				justify-content: flex-start;
			}

			.price-change.up {
				color: var(--success);
			}

			.price-change.down {
				color: var(--danger);
			}

			.price-card-name {
				font-size: 14px;
				font-weight: 600;
				color: var(--gray-800);
				margin-top: 6px;
				line-height: 1.3;
			}

			.price-card-spec {
				font-size: 12px;
				color: var(--gray-500);
			}

			.price-card-meta {
				display: flex;
				align-items: center;
				font-size: 11px;
				color: var(--gray-400);
				margin-top: 4px;
			}

			.price-card-add {
				display: none;
			}

			.price-card-add.added {
				background: var(--success);
				color: #fff;
				font-size: 12px;
			}

			/* Price Status Tags */
			.price-status-tag {
				display: inline-flex;
				align-items: center;
				gap: 3px;
				font-size: 9px;
				font-weight: 600;
				height: 18px;
				padding: 0 5px;
				border-radius: 4px;
				text-transform: uppercase;
				letter-spacing: 0.3px;
				cursor: pointer;
				position: relative;
				white-space: nowrap;
				flex-shrink: 0;
			}

			.price-status-tag .status-dot {
				width: 5px;
				height: 5px;
				border-radius: 50%;
				flex-shrink: 0;
			}

			.price-status-tag.delayed {
				background: #fef3c7;
				color: #92400e;
			}
			.price-status-tag.delayed .status-dot {
				background: #f59e0b;
			}

			.price-status-tag.early {
				background: #d1fae5;
				color: #065f46;
			}
			.price-status-tag.early .status-dot {
				background: #10b981;
			}

			.price-status-tag.on-hold {
				background: #f3f4f6;
				color: #6b7280;
			}
			.price-status-tag.on-hold .status-dot {
				background: #9ca3af;
			}

			.price-status-tag.withheld {
				background: #fee2e2;
				color: #991b1b;
			}
			.price-status-tag.withheld .status-dot {
				background: #ef4444;
			}

			.price-status-tag.under-review {
				background: #dbeafe;
				color: #1e40af;
			}
			.price-status-tag.under-review .status-dot {
				background: #3b82f6;
			}

			/* Explore carousel is compact — status tags hidden to prevent overlap */
			#screen-explore .price-cards-scroll .price-status-tag {
				display: none;
			}

			.price-status-tooltip {
				display: none;
				position: absolute;
				bottom: calc(100% + 6px);
				left: 50%;
				transform: translateX(-50%);
				background: #1f2937;
				color: #fff;
				font-size: 10px;
				font-weight: 400;
				padding: 6px 10px;
				border-radius: 6px;
				white-space: nowrap;
				z-index: 100;
				text-transform: none;
				letter-spacing: 0;
				line-height: 1.4;
				max-width: 180px;
				white-space: normal;
				text-align: center;
			}

			.price-status-tooltip::after {
				content: "";
				position: absolute;
				top: 100%;
				left: 50%;
				transform: translateX(-50%);
				border: 5px solid transparent;
				border-top-color: #1f2937;
			}

			.price-status-tag:hover .price-status-tooltip,
			.price-status-tag.show-tooltip .price-status-tooltip {
				display: block;
			}

			/* News Cards */
			.news-list {
				display: flex;
				flex-direction: column;
				gap: 1px;
				background: var(--gray-100);
			}

			.news-card {
				display: flex;
				gap: 12px;
				padding: 16px 20px;
				background: #fff;
				cursor: pointer;
				transition: background 0.2s;
			}

			.news-card:active {
				background: var(--gray-50);
			}

			.news-content {
				flex: 1;
				min-width: 0;
			}

			.news-tag {
				display: inline-flex;
				align-items: center;
				gap: 6px;
				margin-bottom: 8px;
			}

			.news-tag-source {
				font-size: 11px;
				font-weight: 600;
				color: var(--primary);
			}

			.news-tag-divider {
				width: 3px;
				height: 3px;
				border-radius: 50%;
				background: var(--gray-300);
			}

			.news-tag-category {
				font-size: 11px;
				font-weight: 500;
				color: var(--warning);
			}

			.news-title {
				font-size: 14px;
				font-weight: 500;
				color: var(--gray-800);
				line-height: 1.4;
				margin-bottom: 8px;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

			.news-meta {
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				justify-content: flex-start;
				gap: 16px;
				font-size: 11px;
				color: var(--gray-400);
			}
			.news-share-btn {
				margin-left: auto;
				width: 28px;
				height: 28px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				background: var(--gray-50);
				cursor: pointer;
				flex-shrink: 0;
				transition: background 0.2s;
			}
			.news-share-btn:active {
				background: var(--gray-200);
				transform: scale(0.9);
			}
			.news-share-btn svg {
				width: 14px;
				height: 14px;
				color: var(--gray-500);
			}

			.news-meta-item {
				display: flex;
				align-items: center;
				gap: 4px;
			}

			.news-meta-item + .news-meta-item::before {
				content: "·";
				margin-right: 8px;
				font-weight: 700;
				font-size: 14px;
				color: var(--gray-300);
			}

			.news-image {
				width: 100px;
				height: 80px;
				border-radius: 12px;
				background: var(--gray-200);
				flex-shrink: 0;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.news-image img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			/* ========== News Feed (NDTV Beeps-style) ========== */
			#screen-newsfeed {
				background: #0d1117;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				overflow: hidden;
			}
			#screen-newsfeed.active {
				display: block;
			}

			.newsfeed-container {
				height: 100%;
				position: relative;
				overflow: hidden;
				touch-action: none;
			}

			.newsfeed-card {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				display: flex;
				flex-direction: column;
				padding: 10px 12px;
				transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
				will-change: transform;
			}

			.newsfeed-card-inner {
				flex: 1;
				border-radius: 16px;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				background: #1c2333;
				position: relative;
			}

			.newsfeed-image {
				height: 38%;
				background-size: cover;
				background-position: center;
				position: relative;
				flex-shrink: 0;
			}
			.newsfeed-image::after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 60px;
				background: linear-gradient(transparent, #1c2333);
			}

			.newsfeed-share-btn {
				position: absolute;
				top: 14px;
				right: 14px;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				background: rgba(30, 40, 60, 0.75);
				border: none;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				z-index: 3;
				backdrop-filter: blur(4px);
			}
			.newsfeed-share-btn svg {
				width: 18px;
				height: 18px;
				color: #fff;
			}
			.newsfeed-share-btn:active {
				transform: scale(0.9);
			}

			.newsfeed-body {
				flex: 1;
				padding: 16px 20px 20px;
				display: flex;
				flex-direction: column;
				overflow: hidden;
			}

			.newsfeed-headline {
				font-size: 20px;
				font-weight: 700;
				line-height: 1.3;
				margin: 0 0 16px 0;
				color: #fff;
			}

			.newsfeed-summary {
				list-style: none;
				padding: 0;
				margin: 0;
				display: flex;
				flex-direction: column;
				gap: 12px;
				flex: 1;
			}
			.newsfeed-summary li {
				font-size: 14px;
				line-height: 1.55;
				color: rgba(255, 255, 255, 0.72);
				padding-left: 20px;
				position: relative;
			}
			.newsfeed-summary li::before {
				content: "\2022";
				position: absolute;
				left: 0;
				top: 0;
				color: rgba(255, 255, 255, 0.5);
				font-size: 18px;
				line-height: 1.3;
			}

			.newsfeed-readmore {
				display: inline-block;
				padding: 10px 28px;
				border: 1.5px solid rgba(255, 255, 255, 0.3);
				border-radius: 24px;
				color: #fff;
				font-size: 14px;
				font-weight: 600;
				text-decoration: none;
				cursor: pointer;
				transition: all 0.2s;
				align-self: center;
				margin-top: auto;
				text-align: center;
			}
			.newsfeed-readmore:active {
				background: rgba(255, 255, 255, 0.1);
				transform: scale(0.96);
			}

			/* Card stacking: only current and next are visible */
			.newsfeed-card[data-state="prev"] {
				transform: translateY(-110%);
				pointer-events: none;
			}
			.newsfeed-card[data-state="current"] {
				transform: translateY(0);
				z-index: 2;
			}
			.newsfeed-card[data-state="next"] {
				transform: translateY(calc(100% - 60px));
				z-index: 1;
			}
			.newsfeed-card[data-state="hidden"] {
				transform: translateY(120%);
				pointer-events: none;
				z-index: 0;
			}
			/* During swipe drag — disable transition */
			.newsfeed-card.dragging {
				transition: none;
			}

			/* Daily mover */
			.mover-section {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 12px;
				padding: 0 20px;
				overflow: hidden;
			}

			.mover-card {
				background: #fff;
				border-radius: 16px;
				padding: 16px;
				border: 1px solid rgba(0, 0, 0, 0.08);
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 4px 12px -4px rgba(0, 0, 0, 0.25);
				overflow: visible;
				min-width: 0;
			}

			.mover-card-header {
				display: flex;
				align-items: center;
				gap: 8px;
				margin-bottom: 12px;
			}

			.mover-icon {
				width: 28px;
				height: 28px;
				border-radius: 8px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.mover-icon.gainers {
				background: #d1fae5;
				color: var(--success);
			}

			.mover-icon.losers {
				background: #fee2e2;
				color: var(--danger);
			}

			.mover-card-title {
				font-size: 13px;
				font-weight: 600;
				color: var(--gray-700);
			}

			.mover-list {
				display: flex;
				flex-direction: column;
				gap: 10px;
			}

			.mover-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 8px;
			}
			.mover-info {
				display: flex;
				flex-direction: column;
				min-width: 0;
				flex: 1;
			}
			.mover-name {
				font-size: 12px;
				color: var(--gray-600);
				font-weight: 500;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				position: relative;
			}
			.mover-tooltip {
				position: fixed;
				background: var(--gray-900);
				color: #fff;
				padding: 8px 12px;
				border-radius: 8px;
				font-size: 11px;
				font-weight: 400;
				line-height: 1.5;
				white-space: pre-line;
				z-index: 500;
				pointer-events: none;
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
				max-width: 200px;
				opacity: 0;
				transition: opacity 0.2s ease;
			}
			.mover-tooltip.visible {
				opacity: 1;
			}
			.mover-spec {
				font-size: 10px;
				color: var(--gray-400);
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.mover-price-col {
				text-align: right;
				flex-shrink: 0;
			}
			.mover-price {
				font-size: 12px;
				font-weight: 700;
				color: var(--gray-900);
				display: block;
			}
			.mover-value {
				font-size: 10px;
				font-weight: 600;
				display: block;
			}

			.mover-value.up {
				color: var(--success);
			}

			.mover-value.down {
				color: var(--danger);
			}

			/* Events */
			.event-card {
				background: #fff;
				border-radius: 16px;
				overflow: hidden;
				border: 1px solid rgba(0, 0, 0, 0.08);
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 4px 12px -4px rgba(0, 0, 0, 0.25);
				margin: 0 20px 12px;
				cursor: pointer;
			}
			.events-carousel {
				display: flex;
				gap: 12px;
				overflow-x: auto;
				padding: 14px 20px 22px;
				margin: -6px 0 -6px;
				scrollbar-width: none;
				-ms-overflow-style: none;
			}
			.events-carousel::-webkit-scrollbar {
				display: none;
			}
			.events-carousel .event-card {
				flex-shrink: 0;
				width: 300px;
				margin: 0;
			}

			.event-image {
				height: 140px;
				background: linear-gradient(
					135deg,
					var(--primary) 0%,
					var(--primary-light) 100%
				);
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
			}

			.event-image-text {
				font-size: 24px;
				font-weight: 700;
				color: rgba(255, 255, 255, 0.3);
				text-align: center;
				padding: 20px;
			}

			.event-badge {
				position: absolute;
				top: 12px;
				right: 12px;
				background: rgba(255, 255, 255, 0.9);
				padding: 6px 12px;
				border-radius: 24px;
				font-size: 11px;
				font-weight: 600;
				color: var(--primary);
			}
			.event-badge.past {
				background: var(--gray-200);
				color: var(--gray-600);
			}
			.event-btn.booked {
				background: var(--success);
				color: #fff;
				cursor: default;
			}
			.event-tagline {
				font-size: 12px;
				color: var(--gray-500);
				margin: -4px 0 8px;
				font-style: italic;
			}
			.event-organizer {
				display: flex;
				align-items: center;
				gap: 8px;
				margin-bottom: 8px;
			}
			.organizer-logo {
				width: 24px;
				height: 24px;
				border-radius: 6px;
				background: linear-gradient(
					135deg,
					var(--primary) 0%,
					var(--accent) 100%
				);
				color: #fff;
				font-size: 9px;
				font-weight: 700;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
			}
			.organizer-name {
				font-size: 12px;
				color: var(--gray-600);
				font-weight: 500;
			}

			.event-content {
				padding: 16px;
			}

			.event-title {
				font-size: 15px;
				font-weight: 600;
				color: var(--gray-900);
				margin-bottom: 8px;
			}

			.event-info {
				display: flex;
				flex-direction: column;
				gap: 6px;
				margin-bottom: 12px;
			}

			.event-info-item {
				display: flex;
				align-items: center;
				gap: 8px;
				font-size: 12px;
				color: var(--gray-500);
			}

			.event-info-item svg {
				width: 14px;
				height: 14px;
				color: var(--gray-400);
			}

			.event-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.event-attendees {
				display: flex;
				align-items: center;
			}

			.attendee-avatar {
				width: 24px;
				height: 24px;
				border-radius: 50%;
				border: 2px solid #fff;
				margin-left: -8px;
				background: #dbeafe;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 10px;
				font-weight: 600;
				color: #1e40af;
			}
			.attendee-avatar:nth-child(2) { background: #d1fae5; color: #065f46; }
			.attendee-avatar:nth-child(3) { background: #fce7f3; color: #9d174d; }
			.attendee-avatar:nth-child(4) { background: #fef3c7; color: #92400e; }
			.attendee-avatar:nth-child(5) { background: #ede9fe; color: #5b21b6; }

			.attendee-avatar:first-child {
				margin-left: 0;
			}

			.attendee-count {
				font-size: 11px;
				color: var(--gray-500);
				margin-left: 8px;
			}

			.event-btn {
				padding: 8px 16px;
				background: var(--primary);
				color: #fff;
				border: none;
				border-radius: 24px;
				font-size: 12px;
				font-weight: 600;
				cursor: pointer;
			}

			/* RM Card */
			.rm-card {
				margin: 10px 20px;
				background: #fff;
				border-radius: 16px;
				padding: 16px 20px;
				border: 1px solid var(--gray-100);
			}

			.rm-card[data-rm-assigned="false"] {
				display: none;
			}

			.rm-header {
				font-size: 10px;
				font-weight: 600;
				color: var(--gray-500);
				margin-bottom: 12px;
				text-transform: uppercase;
				letter-spacing: 0.5px;
			}

			.rm-content {
				display: flex;
				align-items: center;
				gap: 12px;
			}

			.rm-avatar {
				width: 44px;
				height: 44px;
				border-radius: 50%;
				background: #d1fae5;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 16px;
				font-weight: 600;
				color: #065f46;
				flex-shrink: 0;
			}

			.rm-info {
				flex: 1;
				min-width: 0;
			}

			.rm-name {
				font-size: 14px;
				font-weight: 600;
				color: var(--gray-800);
				margin-bottom: 2px;
			}

			.rm-contact {
				font-size: 12px;
				color: var(--gray-500);
			}

			.rm-actions {
				display: flex;
				gap: 8px;
			}

			.rm-action {
				width: 36px;
				height: 36px;
				border-radius: 50%;
				background: #fff;
				border: 1.5px solid var(--gray-200);
				display: flex;
				align-items: center;
				justify-content: center;
				color: var(--gray-600);
				cursor: pointer;
			}

			.rm-action:active {
				background: var(--gray-50);
			}
			.rm-action svg {
				width: 16px;
				height: 16px;
			}
			.rm-action.call svg {
				color: var(--success);
			}
			.rm-action.email svg {
				color: var(--accent);
			}

			/* Tabs */
			.tabs {
				display: flex;
				gap: 0;
				padding: 0 20px;
				background: #fff;
				overflow-x: auto;
				scrollbar-width: none;
				border-bottom: 1px solid var(--gray-200);
				position: sticky;
				top: -1px;
				z-index: 90;
			}

			.tabs::-webkit-scrollbar {
				display: none;
			}

			.tab {
				padding: 12px 16px;
				font-size: 14px;
				font-weight: 500;
				color: var(--gray-400);
				white-space: nowrap;
				cursor: pointer;
				border-bottom: 2px solid transparent;
				background: none;
				position: relative;
			}

			.tab.active {
				color: var(--primary);
				font-weight: 600;
				border-bottom-color: var(--primary);
			}

			/* Search Bar */
			.search-bar {
				margin: 16px 20px;
				position: relative;
			}

			.search-input {
				width: 100%;
				padding: 14px 20px 14px 48px;
				background: var(--gray-100);
				border: none;
				border-radius: 12px;
				font-size: 15px;
				color: var(--gray-800);
				outline: none;
			}

			.search-input::placeholder {
				color: var(--gray-400);
			}

			.search-icon {
				position: absolute;
				left: 18px;
				top: 50%;
				transform: translateY(-50%);
				width: 20px;
				height: 20px;
				color: var(--gray-400);
			}

			.search-mic {
				position: absolute;
				right: 16px;
				top: 50%;
				transform: translateY(-50%);
				width: 20px;
				height: 20px;
				color: var(--gray-400);
				cursor: pointer;
			}

			/* Watchlist */
			.portfolio-actions-bar {
				padding: 12px 20px;
				background: #fff;
				border-bottom: 1px solid var(--gray-100);
			}
			.portfolio-search-row {
				display: flex;
				gap: 10px;
				align-items: center;
			}
			.portfolio-search-input {
				flex: 1;
				display: flex;
				align-items: center;
				gap: 8px;
				background: var(--gray-50);
				border: 1px solid var(--gray-200);
				border-radius: 12px;
				padding: 8px 12px;
			}
			.portfolio-search-input svg {
				width: 18px;
				height: 18px;
				color: var(--gray-400);
				flex-shrink: 0;
			}
			.portfolio-search-input input {
				border: none;
				outline: none;
				background: none;
				font-size: 13px;
				font-family: "Inter", sans-serif;
				color: var(--gray-800);
				width: 100%;
			}
			.portfolio-search-input input::placeholder {
				color: var(--gray-400);
			}
			.create-watchlist-btn {
				display: flex;
				align-items: center;
				gap: 4px;
				background: var(--primary);
				color: #fff;
				padding: 8px 14px;
				border-radius: 12px;
				font-size: 13px;
				font-weight: 600;
				cursor: pointer;
				flex-shrink: 0;
			}
			.create-watchlist-btn svg {
				width: 16px;
				height: 16px;
			}
			.portfolio-search-results {
				margin-top: 8px;
				background: #fff;
				border: 1px solid var(--gray-200);
				border-radius: 12px;
				max-height: 200px;
				overflow-y: auto;
			}
			.portfolio-search-results::-webkit-scrollbar {
				display: none;
			}
			.search-result-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px 14px;
				border-bottom: 1px solid var(--gray-100);
				cursor: pointer;
				transition: background 0.2s;
			}
			.search-result-item:last-child {
				border-bottom: none;
			}
			.search-result-item:hover {
				background: var(--gray-50);
			}
			.search-result-name {
				font-size: 13px;
				font-weight: 500;
				color: var(--gray-800);
			}
			.search-result-spec {
				font-size: 11px;
				color: var(--gray-500);
			}
			.search-result-add {
				width: 28px;
				height: 28px;
				border-radius: 50%;
				background: var(--primary);
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 16px;
				font-weight: 600;
				flex-shrink: 0;
			}

			/* Create Watchlist Modal */
			.create-wl-overlay {
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0, 0.5);
				z-index: 100;
				align-items: center;
				justify-content: center;
			}
			.create-wl-overlay.open {
				display: flex;
			}
			.create-wl-modal {
				background: #fff;
				border-radius: 20px;
				padding: 24px;
				width: 300px;
				text-align: center;
			}
			.create-wl-modal h3 {
				font-size: 16px;
				font-weight: 700;
				color: var(--gray-900);
				margin-bottom: 16px;
			}
			.create-wl-modal input {
				width: 100%;
				padding: 10px 14px;
				border: 1.5px solid var(--gray-200);
				border-radius: 12px;
				font-size: 14px;
				font-family: "Inter", sans-serif;
				outline: none;
				box-sizing: border-box;
			}
			.create-wl-modal input:focus {
				border-color: var(--accent);
			}
			.create-wl-actions {
				display: flex;
				gap: 10px;
				margin-top: 16px;
			}
			.create-wl-actions button {
				flex: 1;
				padding: 10px;
				border-radius: 12px;
				font-size: 14px;
				font-weight: 600;
				font-family: "Inter", sans-serif;
				cursor: pointer;
				border: none;
			}
			.create-wl-cancel {
				background: var(--gray-100);
				color: var(--gray-600);
			}
			.create-wl-save {
				background: var(--primary);
				color: #fff;
			}

			.watchlist-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 16px 20px 12px;
				background: #fff;
			}

			.watchlist-title {
				display: flex;
				align-items: center;
				gap: 8px;
			}

			.watchlist-name {
				font-size: 15px;
				font-weight: 600;
				color: var(--gray-800);
			}

			.add-assessment-row {
				display: flex;
				align-items: center;
				gap: 8px;
				padding: 12px 20px;
				font-size: 13px;
				font-weight: 600;
				color: var(--accent);
				background: #fff;
				border-bottom: 1px solid var(--gray-100);
				cursor: pointer;
			}
			.add-assessment-row:active {
				background: var(--gray-50);
			}

			.watchlist-edit {
				width: 20px;
				height: 20px;
				color: var(--gray-400);
				cursor: pointer;
			}

			/* Price List */
			.price-list {
				display: flex;
				flex-direction: column;
				gap: 1px;
				background: var(--gray-100);
			}

			.price-list-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 16px 20px;
				background: #fff;
				cursor: pointer;
			}

			.price-list-left {
				display: flex;
				align-items: center;
				gap: 12px;
				flex: 1;
			}

			.price-list-indicator {
				display: none;
			}

			.price-list-indicator.up {
				background: var(--success);
			}

			.price-list-indicator.down {
				background: var(--danger);
			}

			.price-list-info {
				flex: 1;
			}

			.price-list-name {
				font-size: 14px;
				font-weight: 600;
				color: var(--gray-800);
				margin-bottom: 4px;
			}

			.price-list-spec {
				font-size: 12px;
				color: var(--gray-500);
			}

			.price-list-right {
				text-align: right;
			}

			.price-list-value {
				font-size: 16px;
				font-weight: 700;
				color: var(--gray-900);
				margin-bottom: 2px;
			}

			.price-list-change {
				font-size: 12px;
				font-weight: 600;
			}

			.price-list-change.up {
				color: var(--success);
			}

			.price-list-change.down {
				color: var(--danger);
			}

			.price-list-remove {
				width: 32px;
				height: 32px;
				border-radius: 50%;
				background: var(--gray-100);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 12px;
				color: var(--gray-400);
			}

			/* Reports */
			.report-card {
				display: flex;
				gap: 16px;
				padding: 16px 20px;
				background: #fff;
				border-bottom: 1px solid var(--gray-100);
				cursor: pointer;
			}

			.report-image {
				width: 100px;
				height: 130px;
				border-radius: 12px;
				background: linear-gradient(
					135deg,
					var(--primary) 0%,
					var(--accent) 100%
				);
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
			}

			.report-image-text {
				font-size: 12px;
				font-weight: 600;
				color: rgba(255, 255, 255, 0.8);
				text-align: center;
				padding: 10px;
			}

			.report-content {
				flex: 1;
				display: flex;
				flex-direction: column;
			}

			.report-title {
				font-size: 15px;
				font-weight: 600;
				color: var(--gray-800);
				margin-bottom: 8px;
				line-height: 1.3;
			}

			.report-date {
				font-size: 12px;
				color: var(--gray-500);
				display: flex;
				align-items: center;
				gap: 6px;
				margin-bottom: 12px;
			}

			.report-ai {
				display: inline-flex;
				align-items: center;
				gap: 6px;
				padding: 6px 10px;
				background: #f0fdf4;
				border-radius: 6px;
				font-size: 11px;
				font-weight: 500;
				color: #166534;
				margin-bottom: 12px;
				align-self: flex-start;
			}

			.report-actions {
				display: flex;
				gap: 16px;
				margin-top: auto;
			}

			.report-action {
				display: flex;
				align-items: center;
				gap: 4px;
				font-size: 12px;
				color: var(--gray-500);
				cursor: pointer;
			}

			.report-action svg {
				width: 16px;
				height: 16px;
			}

			/* Tenders */
			.tender-collections {
				display: flex;
				gap: 12px;
				padding: 16px 20px;
				overflow-x: auto;
				scrollbar-width: none;
			}

			.tender-collections::-webkit-scrollbar {
				display: none;
			}

			.tender-collection {
				flex-shrink: 0;
				width: 140px;
				height: 100px;
				border-radius: 16px;
				padding: 16px;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				cursor: pointer;
				transition: transform 0.2s;
			}

			.tender-collection.expiring {
				background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
			}

			.tender-collection.import {
				background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
			}

			.tender-collection.export {
				background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
			}

			.tender-collection.ferro {
				background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
			}

			.tender-collection-title {
				font-size: 12px;
				font-weight: 600;
				color: var(--gray-700);
				line-height: 1.3;
			}

			.tender-card {
				margin: 0 20px 12px;
				background: #fff;
				border-radius: 16px;
				padding: 16px;
				border: 1px solid rgba(0, 0, 0, 0.08);
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 4px 12px -4px rgba(0, 0, 0, 0.25);
			}

			.tender-card-header {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 12px;
			}

			.tender-type {
				padding: 4px 10px;
				border-radius: 6px;
				font-size: 11px;
				font-weight: 600;
				text-transform: uppercase;
			}

			.tender-type.sell {
				background: #fee2e2;
				color: #dc2626;
			}

			.tender-type.buy {
				background: #d1fae5;
				color: #059669;
			}

			.tender-title {
				font-size: 14px;
				font-weight: 600;
				color: var(--gray-800);
				flex: 1;
				margin-right: 12px;
			}

			.tender-details {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 8px;
				margin-bottom: 12px;
			}

			.tender-detail {
				font-size: 12px;
				color: var(--gray-500);
			}

			.tender-detail strong {
				color: var(--gray-700);
			}

			.tender-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 12px;
				border-top: 1px solid var(--gray-100);
			}

			.tender-location {
				font-size: 12px;
				color: var(--gray-500);
				display: flex;
				align-items: center;
				gap: 4px;
			}

			.tender-deadline {
				font-size: 12px;
				font-weight: 600;
				color: var(--warning);
			}

			.tender-actions {
				display: flex;
				gap: 12px;
			}

			.tender-action {
				width: 32px;
				height: 32px;
				border-radius: 50%;
				background: var(--gray-100);
				display: flex;
				align-items: center;
				justify-content: center;
				color: var(--gray-500);
				cursor: pointer;
			}

			/* Sidebar Menu */
			/* Bottom Sheet Menu */
			.sidebar-overlay {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0, 0.4);
				z-index: 500;
				opacity: 0;
				visibility: hidden;
				transition: all 0.3s;
			}

			.sidebar-overlay.open {
				opacity: 1;
				visibility: visible;
			}

			.sidebar {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				max-height: 75%;
				background: #fff;
				z-index: 600;
				transform: translateY(100%);
				transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
				display: flex;
				flex-direction: column;
				border-radius: 24px 24px 0 0;
			}

			.sidebar.open {
				transform: translateY(0);
			}

			.sidebar-drag-handle {
				display: flex;
				justify-content: center;
				padding: 12px 0 4px;
				cursor: grab;
			}

			.sidebar-drag-handle::after {
				content: '';
				width: 40px;
				height: 4px;
				background: var(--gray-300);
				border-radius: 2px;
			}

			.sidebar-header {
				padding: 8px 24px 20px;
				background: #fff;
				border-radius: 24px 24px 0 0;
			}

			.sidebar-logo {
				display: none;
			}

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

			.sidebar-avatar {
				display: none;
			}

			.sidebar-user-info {
				flex: 1;
			}

			.sidebar-user-name {
				font-size: 18px;
				font-weight: 700;
				color: var(--gray-900);
			}

			.sidebar-user-email {
				font-size: 13px;
				color: var(--gray-500);
				margin-top: 2px;
			}

			.sidebar-menu {
				flex: 1;
				overflow-y: auto;
				padding: 8px 0 32px;
				scrollbar-width: none;
				-ms-overflow-style: none;
			}

			.sidebar-menu::-webkit-scrollbar {
				display: none;
			}

			.sidebar-menu-item {
				display: flex;
				align-items: center;
				gap: 16px;
				padding: 14px 24px;
				cursor: pointer;
				transition: background 0.2s;
			}

			.sidebar-menu-item:active {
				background: var(--gray-50);
			}

			.sidebar-menu-item svg {
				width: 22px;
				height: 22px;
				color: var(--gray-500);
			}

			.sidebar-menu-item span {
				font-size: 15px;
				color: var(--gray-800);
				font-weight: 500;
				min-width: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.sidebar-menu-divider {
				height: 1px;
				background: var(--gray-100);
				margin: 8px 24px;
			}

			.sidebar-close {
				display: none;
			}

			/* Sidebar Drill-down Menu */
			.sidebar-drill-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 13px 24px;
				cursor: pointer;
				transition: background 0.15s;
			}
			.sidebar-drill-item:active {
				background: var(--gray-50);
			}
			.sidebar-drill-item .drill-left {
				display: flex;
				align-items: center;
				gap: 14px;
				flex: 1;
				min-width: 0;
			}
			.sidebar-drill-item .drill-icon {
				width: 22px;
				height: 22px;
				color: var(--gray-500);
				flex-shrink: 0;
			}
			.sidebar-drill-item .drill-label {
				font-size: 15px;
				color: var(--gray-700);
				font-weight: 500;
				min-width: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.sidebar-drill-item .drill-arrow {
				width: 16px;
				height: 16px;
				color: var(--gray-400);
				transition: transform 0.2s;
				flex-shrink: 0;
			}
			.sidebar-drill-item.expanded > .drill-arrow {
				transform: rotate(90deg);
			}
			.sidebar-drill-item.expanded {
				background: var(--gray-50);
			}

			.drill-children {
				max-height: 0;
				overflow: hidden;
				transition: max-height 0.35s ease;
			}
			.drill-children.open {
				max-height: 3000px;
			}

			/* Level indentation */
			.drill-level-1 > .sidebar-drill-item {
				padding-left: 40px;
			}
			.drill-level-1 > .sidebar-drill-item .drill-icon {
				display: none;
			}
			.drill-level-1 > .sidebar-drill-item .drill-label {
				font-size: 14px;
			}

			.drill-level-2 > .sidebar-drill-item {
				padding-left: 56px;
			}
			.drill-level-2 > .sidebar-drill-item .drill-icon {
				display: none;
			}
			.drill-level-2 > .sidebar-drill-item .drill-label {
				font-size: 13px;
				color: var(--gray-600);
			}

			/* Leaf items — last selectable level */
			.sidebar-drill-leaf {
				display: flex;
				align-items: center;
				gap: 8px;
				padding: 10px 20px 10px 72px;
				cursor: pointer;
				font-size: 13px;
				color: var(--accent);
				font-weight: 500;
				transition: background 0.15s;
			}
			.sidebar-drill-leaf:active {
				background: #eff6ff;
			}
			.sidebar-drill-leaf .leaf-dot {
				width: 5px;
				height: 5px;
				border-radius: 50%;
				background: var(--accent);
				flex-shrink: 0;
			}
/* ======================================
   Toast, Overlays & Additional Styles
   ====================================== */

			/* Toast styles */
			.toast {
				position: fixed;
				bottom: 120px;
				left: 50%;
				transform: translateX(-50%) translateY(100px);
				background: var(--gray-800);
				color: #fff;
				padding: 12px 24px;
				border-radius: 24px;
				font-size: 14px;
				font-weight: 500;
				opacity: 0;
				transition: all 0.3s ease;
				z-index: 1000;
				white-space: nowrap;
			}
			.toast.show {
				transform: translateX(-50%) translateY(0);
				opacity: 1;
			}

			/* Search Panel (inside phone-screen) */
			.search-panel-overlay {
				position: absolute; inset:0;
				background: rgba(0,0,0,0.35);
				z-index: 399;
				opacity: 0;
				pointer-events: none;
				transition: opacity 0.3s;
			}
			.search-panel-overlay.open {
				opacity: 1;
				pointer-events: auto;
			}
			.search-panel {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 50px;
				background: #fff;
				z-index: 400;
				display: flex;
				flex-direction: column;
				border-radius: 24px 24px 0 0;
				transform: translateY(100%);
				transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
			}
			.search-panel.open {
				transform: translateY(0);
			}
			.sheet-drag-handle {
				display: flex;
				justify-content: center;
				padding: 12px 0 4px;
				cursor: pointer;
			}
			.sheet-drag-handle-bar {
				width: 40px;
				height: 4px;
				border-radius: 2px;
				background: var(--gray-300);
			}
			.search-panel-header {
				background: #fff;
				padding: 8px 20px 12px;
				display: flex;
				align-items: center;
				gap: 10px;
				flex-shrink: 0;
				border-radius: 24px 24px 0 0;
			}
			.search-filter-chips {
				display: flex;
				gap: 8px;
				padding: 0 20px 14px;
				flex-shrink: 0;
				border-bottom: 1px solid var(--gray-100);
			}
			.search-filter-chip {
				padding: 8px 18px;
				border-radius: 24px;
				font-size: 13px;
				font-weight: 600;
				cursor: pointer;
				border: none;
				font-family: inherit;
				background: var(--gray-100);
				color: var(--gray-500);
				transition: all 0.15s;
			}
			.search-filter-chip.active {
				background: var(--primary);
				color: #fff;
			}
			.search-back-btn {
				display: none;
			}
			.search-back-btn svg {
				width: 20px;
				height: 20px;
				color: var(--gray-700);
			}
			.search-input-wrap {
				flex: 1;
				display: flex;
				align-items: center;
				gap: 10px;
				padding: 12px 16px;
				background: var(--gray-50);
				border: 1px solid var(--gray-200);
				border-radius: 12px;
				min-width: 0;
			}
			.search-input-icon {
				width: 20px;
				height: 20px;
				color: var(--gray-400);
				flex-shrink: 0;
			}
			.search-input {
				flex: 1;
				border: none;
				outline: none;
				background: transparent;
				font-size: 15px;
				font-family: inherit;
				color: var(--gray-800);
				min-width: 0;
			}
			.search-input::placeholder {
				color: var(--gray-400);
			}
			.voice-search-btn {
				width: 24px;
				height: 24px;
				flex-shrink: 0;
				cursor: pointer;
				color: var(--gray-400);
				transition: all 0.2s;
			}
			.voice-search-btn svg {
				width: 20px;
				height: 20px;
			}
			.voice-search-btn:active {
				transform: scale(0.9);
			}
			.voice-search-btn.listening {
				color: var(--danger);
				animation: pulse-mic 1s infinite;
			}
			@keyframes pulse-mic {
				0%, 100% { opacity: 1; }
				50% { opacity: 0.4; }
			}
			.search-action-btn {
				display: none;
			}
			.search-suggestions-area {
				flex: 1 1 0;
				overflow-y: auto;
				padding: 20px;
				-webkit-overflow-scrolling: touch;
				scrollbar-width: none;
				min-height: 0;
			}
			.search-suggestions-area::-webkit-scrollbar {
				display: none;
			}
			.search-section-label {
				font-size: 12px;
				font-weight: 600;
				color: var(--gray-400);
				text-transform: uppercase;
				letter-spacing: 0.5px;
				margin-bottom: 14px;
			}
			.search-recent-item {
				display: flex;
				align-items: center;
				gap: 12px;
				padding: 11px 0;
				border-bottom: 1px solid var(--gray-100);
				cursor: pointer;
				font-size: 14px;
				color: var(--gray-700);
			}
			.search-recent-item:active {
				color: var(--primary);
			}
			.search-recent-item > svg:first-child {
				width: 18px;
				height: 18px;
				color: var(--gray-400);
				flex-shrink: 0;
			}
			.search-recent-item span {
				flex: 1;
			}
			.search-recent-x {
				width: 16px;
				height: 16px;
				color: var(--gray-300);
				cursor: pointer;
				flex-shrink: 0;
			}
			.search-popular-chips {
				display: flex;
				flex-wrap: wrap;
				gap: 8px;
			}
			.search-chip {
				padding: 7px 16px;
				border-radius: 24px;
				background: var(--gray-100);
				color: var(--gray-600);
				font-size: 13px;
				font-weight: 500;
				cursor: pointer;
			}
			.search-chip:active {
				background: var(--primary);
				color: #fff;
			}
			.search-results-area {
				flex: 1 1 0;
				display: flex;
				flex-direction: column;
				overflow: hidden;
				min-height: 0;
			}
			.search-results-label {
				padding: 12px 20px 8px;
				font-size: 13px;
				color: var(--gray-500);
				flex-shrink: 0;
			}
			.search-results-label span {
				color: var(--gray-800);
				font-weight: 600;
			}
			.search-filter-row {
				display: flex;
				align-items: center;
				gap: 10px;
				padding: 6px 20px 10px;
				flex-shrink: 0;
			}
			.search-sort-btn {
				display: flex;
				align-items: center;
				gap: 5px;
				padding: 5px 12px;
				border-radius: 8px;
				background: var(--gray-100);
				cursor: pointer;
				flex-shrink: 0;
			}
			.search-sort-btn svg {
				width: 14px;
				height: 14px;
				color: var(--gray-600);
			}
			.search-sort-btn span {
				font-size: 12px;
				font-weight: 600;
				color: var(--gray-600);
			}
			.search-filters-scroll {
				display: flex;
				gap: 6px;
				overflow-x: auto;
				scrollbar-width: none;
			}
			.search-filters-scroll::-webkit-scrollbar {
				display: none;
			}
			.search-filter-chip {
				padding: 5px 12px;
				border-radius: 16px;
				background: var(--gray-100);
				color: var(--gray-500);
				font-size: 11px;
				font-weight: 600;
				white-space: nowrap;
				cursor: pointer;
			}
			.search-filter-chip.active {
				background: var(--primary);
				color: #fff;
			}
			.search-tabs {
				display: flex;
				gap: 0;
				border-bottom: 1px solid var(--gray-200);
				overflow-x: auto;
				flex-shrink: 0;
				background: #fff;
				scrollbar-width: none;
			}
			.search-tabs::-webkit-scrollbar {
				display: none;
			}
			.search-tab {
				padding: 10px 14px;
				font-size: 13px;
				font-weight: 500;
				color: var(--gray-500);
				white-space: nowrap;
				cursor: pointer;
				border-bottom: 2px solid transparent;
			}
			.search-tab.active {
				color: var(--primary);
				border-bottom-color: var(--primary);
				font-weight: 600;
			}
			.search-tab-count {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				background: var(--gray-100);
				color: var(--gray-500);
				font-size: 10px;
				font-weight: 700;
				padding: 1px 6px;
				border-radius: 12px;
				margin-left: 4px;
			}
			.search-tab.active .search-tab-count {
				background: #dbeafe;
				color: var(--accent);
			}
			.search-tabs-wrapper {
				flex: 1 1 0;
				min-height: 0;
				display: flex;
				flex-direction: column;
				overflow: hidden;
			}
			.search-tab-content {
				flex: 1 1 0;
				min-height: 0;
				overflow-y: auto;
				padding: 12px 20px;
				-webkit-overflow-scrolling: touch;
				scrollbar-width: none;
			}
			.search-tab-content::-webkit-scrollbar {
				display: none;
			}
			.search-result-card {
				display: flex;
				background: #fff;
				border-radius: 12px;
				border: 1px solid rgba(0, 0, 0, 0.08);
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 4px 12px -4px rgba(0, 0, 0, 0.25);
				overflow: hidden;
				margin-bottom: 10px;
				cursor: pointer;
			}
			.sr-price-strip {
				display: none;
			}
			.sr-price-strip.up {
				background: linear-gradient(180deg, #10b981, #34d399);
			}
			.sr-price-strip.down {
				background: linear-gradient(180deg, #ef4444, #f87171);
			}
			.sr-price-body {
				padding: 12px 14px;
				flex: 1;
			}
			.sr-price-top {
				display: flex;
				align-items: center;
				gap: 6px;
				margin-bottom: 6px;
			}
			.sr-flag {
				font-size: 14px;
			}
			.sr-tag {
				font-size: 9px;
				font-weight: 600;
				padding: 2px 6px;
				border-radius: 4px;
			}
			.sr-tag.dom {
				background: #dbeafe;
				color: #1e40af;
			}
			.sr-tag.imp {
				background: #fef3c7;
				color: #92400e;
			}
			.sr-price-amt {
				font-size: 16px;
				font-weight: 700;
				color: var(--gray-900);
				margin-bottom: 3px;
			}
			.sr-change {
				font-size: 12px;
				font-weight: 600;
				margin-left: 6px;
			}
			.sr-change.up {
				color: var(--success);
			}
			.sr-change.down {
				color: var(--danger);
			}
			.sr-price-name {
				font-size: 13px;
				font-weight: 600;
				color: var(--gray-800);
				margin-bottom: 2px;
			}
			.sr-price-spec {
				font-size: 11px;
				color: var(--gray-500);
			}
			.sr-news-card {
				display: flex;
				gap: 12px;
				padding: 12px 0;
				border-bottom: 1px solid var(--gray-100);
				cursor: pointer;
			}
			.sr-news-card:active {
				opacity: 0.7;
			}
			.sr-news-body {
				flex: 1;
				min-width: 0;
			}
			.sr-news-meta {
				font-size: 11px;
				color: var(--gray-500);
				margin-bottom: 4px;
			}
			.sr-news-source {
				font-weight: 600;
				color: #1e40af;
				background: #dbeafe;
				padding: 1px 6px;
				border-radius: 4px;
				font-size: 10px;
			}
			.sr-news-source.ins {
				color: #065f46;
				background: #d1fae5;
			}
			.sr-news-source.anl {
				color: #92400e;
				background: #fef3c7;
			}
			.sr-news-cat {
				color: var(--gray-400);
			}
			.sr-news-title {
				font-size: 13px;
				font-weight: 600;
				color: var(--gray-800);
				line-height: 1.4;
				margin-bottom: 4px;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
			.sr-news-time {
				font-size: 11px;
				color: var(--gray-400);
			}
			.sr-news-thumb {
				width: 64px;
				height: 64px;
				border-radius: 12px;
				flex-shrink: 0;
			}
			.sr-report-card {
				display: flex;
				gap: 14px;
				padding: 12px 0;
				border-bottom: 1px solid var(--gray-100);
				cursor: pointer;
			}
			.sr-report-card:active {
				opacity: 0.7;
			}
			.sr-report-thumb {
				width: 48px;
				height: 60px;
				border-radius: 8px;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
			}
			.sr-report-thumb svg {
				width: 22px;
				height: 22px;
			}
			.sr-report-info {
				flex: 1;
			}
			.sr-report-title {
				font-size: 13px;
				font-weight: 600;
				color: var(--gray-800);
				line-height: 1.4;
				margin-bottom: 4px;
			}
			.sr-report-meta {
				font-size: 11px;
				color: var(--gray-400);
			}
			.sr-tender-card {
				background: #fff;
				border-radius: 12px;
				border: 1px solid rgba(0, 0, 0, 0.08);
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 4px 12px -4px rgba(0, 0, 0, 0.25);
				padding: 14px;
				margin-bottom: 10px;
				cursor: pointer;
			}
			.sr-tender-header {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 8px;
			}
			.sr-tender-title {
				font-size: 13px;
				font-weight: 600;
				color: var(--gray-800);
				flex: 1;
				margin-right: 8px;
			}
			.sr-tender-badge {
				font-size: 10px;
				font-weight: 700;
				padding: 3px 10px;
				border-radius: 12px;
				text-transform: uppercase;
			}
			.sr-tender-badge.buy {
				background: #d1fae5;
				color: #065f46;
			}
			.sr-tender-badge.sell {
				background: #dbeafe;
				color: #1e40af;
			}
			.sr-tender-detail {
				font-size: 12px;
				color: var(--gray-500);
				line-height: 1.6;
			}
			.sr-event-card {
				display: flex;
				gap: 14px;
				padding: 14px;
				background: #fff;
				border-radius: 12px;
				border: 1px solid rgba(0, 0, 0, 0.08);
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 4px 12px -4px rgba(0, 0, 0, 0.25);
				margin-bottom: 10px;
				cursor: pointer;
			}
			.sr-event-date-block {
				width: 52px;
				height: 52px;
				border-radius: 12px;
				background: #eff6ff;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
			}
			.sr-event-month {
				font-size: 10px;
				font-weight: 700;
				color: var(--accent);
				text-transform: uppercase;
			}
			.sr-event-day {
				font-size: 14px;
				font-weight: 700;
				color: var(--primary);
			}
			.sr-event-info {
				flex: 1;
			}
			.sr-event-title {
				font-size: 13px;
				font-weight: 600;
				color: var(--gray-800);
				margin-bottom: 3px;
			}
			.sr-event-loc {
				font-size: 12px;
				color: var(--gray-500);
				margin-bottom: 2px;
			}
			.sr-event-meta {
				font-size: 11px;
				color: var(--gray-400);
			}
			.sr-media-card {
				display: flex;
				gap: 14px;
				padding: 12px 0;
				border-bottom: 1px solid var(--gray-100);
				cursor: pointer;
			}
			.sr-media-card:active {
				opacity: 0.7;
			}
			.sr-media-thumb {
				width: 100px;
				height: 64px;
				border-radius: 12px;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				flex-shrink: 0;
			}
			.sr-media-play {
				width: 28px;
				height: 28px;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.9);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 10px;
				color: var(--gray-800);
			}
			.sr-media-dur {
				position: absolute;
				bottom: 4px;
				right: 6px;
				background: rgba(0, 0, 0, 0.7);
				color: #fff;
				font-size: 9px;
				font-weight: 600;
				padding: 1px 5px;
				border-radius: 4px;
			}
			.sr-media-info {
				flex: 1;
			}
			.sr-media-title {
				font-size: 13px;
				font-weight: 600;
				color: var(--gray-800);
				margin-bottom: 4px;
				line-height: 1.4;
			}
			.sr-media-meta {
				font-size: 11px;
				color: var(--gray-400);
			}

			/* Notifications Panel (inside phone-screen) */
			.notif-panel {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: var(--gray-50);
				z-index: 400;
				display: flex;
				flex-direction: column;
				transform: translateX(100%);
				transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
			}
			.notif-panel.open {
				transform: translateX(0);
			}
			.notif-panel-header {
				background: #fff;
				padding: 12px 16px;
				border-bottom: 1px solid var(--gray-100);
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-shrink: 0;
				z-index: 10;
			}
			.notif-panel-header-left {
				display: flex;
				align-items: center;
				gap: 12px;
			}
			.notif-back-btn {
				width: 36px;
				height: 36px;
				border-radius: 50%;
				background: var(--gray-100);
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
			}
			.notif-back-btn svg {
				width: 20px;
				height: 20px;
				color: var(--gray-700);
			}
			.notif-panel-title {
				font-size: 17px;
				font-weight: 600;
				color: var(--gray-900);
			}
			.notif-mark-all {
				font-size: 13px;
				font-weight: 600;
				color: var(--accent);
				cursor: pointer;
			}
			.notif-mark-all:active {
				opacity: 0.6;
			}
			.notif-unread-strip {
				padding: 10px 20px;
				background: var(--gray-50);
				font-size: 12px;
				font-weight: 500;
				color: var(--gray-500);
				border-bottom: 1px solid var(--gray-100);
				flex-shrink: 0;
			}
			.notif-unread-badge {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				background: var(--danger);
				color: #fff;
				font-size: 10px;
				font-weight: 700;
				width: 18px;
				height: 18px;
				border-radius: 50%;
				margin-left: 6px;
				vertical-align: middle;
			}
			.notif-scroll {
				flex: 1;
				overflow-y: auto;
				-webkit-overflow-scrolling: touch;
				scrollbar-width: none;
			}
			.notif-scroll::-webkit-scrollbar {
				display: none;
			}
			.notif-group-label {
				padding: 14px 20px 6px;
				font-size: 11px;
				font-weight: 600;
				color: var(--gray-400);
				text-transform: uppercase;
				letter-spacing: 0.5px;
				background: var(--gray-50);
			}
			.notif-item {
				display: flex;
				align-items: flex-start;
				gap: 14px;
				padding: 14px 20px;
				background: #fff;
				border-bottom: 1px solid var(--gray-100);
				cursor: pointer;
				transition: background 0.15s;
				position: relative;
			}
			.notif-item.unread {
				background: #eff6ff;
			}
			.notif-item:active {
				background: var(--gray-100);
			}
			.notif-item.unread::before {
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				width: 3px;
				background: var(--accent);
				border-radius: 0 2px 2px 0;
			}
			.notif-icon-circle {
				width: 42px;
				height: 42px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
				margin-top: 1px;
			}
			.notif-icon-circle svg {
				width: 18px;
				height: 18px;
			}
			.notif-icon-circle.price {
				background: #d1fae5;
				color: var(--success);
			}
			.notif-icon-circle.news {
				background: #dbeafe;
				color: var(--accent);
			}
			.notif-icon-circle.event {
				background: #fef3c7;
				color: var(--warning);
			}
			.notif-icon-circle.tender {
				background: #fee2e2;
				color: var(--danger);
			}
			.notif-body {
				flex: 1;
				min-width: 0;
			}
			.notif-text {
				font-size: 13px;
				font-weight: 400;
				color: var(--gray-800);
				line-height: 1.4;
				margin-bottom: 3px;
			}
			.notif-item.unread .notif-text {
				font-weight: 600;
				color: var(--gray-900);
			}
			.notif-desc {
				font-size: 12px;
				color: var(--gray-500);
				line-height: 1.4;
				margin-bottom: 5px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.notif-time {
				font-size: 11px;
				color: var(--gray-400);
				font-weight: 500;
			}
			.notif-chevron {
				width: 16px;
				height: 16px;
				color: var(--gray-300);
				flex-shrink: 0;
				margin-top: 4px;
			}
			.notif-empty {
				display: none;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 80px 40px;
				text-align: center;
				flex: 1;
			}
			.notif-empty.visible {
				display: flex;
			}
			.notif-empty-icon {
				width: 72px;
				height: 72px;
				border-radius: 50%;
				background: var(--gray-100);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20px;
			}
			.notif-empty-icon svg {
				width: 32px;
				height: 32px;
				color: var(--gray-400);
			}
			.notif-empty-title {
				font-size: 16px;
				font-weight: 600;
				color: var(--gray-700);
				margin-bottom: 8px;
			}
			.notif-empty-sub {
				font-size: 13px;
				color: var(--gray-400);
				margin-bottom: 24px;
				line-height: 1.5;
			}
			.notif-refresh-btn {
				display: flex;
				align-items: center;
				gap: 8px;
				background: var(--primary);
				color: #fff;
				border: none;
				border-radius: 24px;
				padding: 10px 24px;
				font-size: 14px;
				font-weight: 600;
				font-family: inherit;
				cursor: pointer;
			}
			.notif-refresh-btn svg {
				width: 16px;
				height: 16px;
			}

			/* Clickable cursor for interactive elements */
			.section-link,
			.mover-item,
			.rm-info {
				cursor: pointer;
			}
			.mover-item {
				transition: background 0.15s ease;
				border-radius: 6px;
				padding: 4px 0;
			}
			.mover-item:active {
				background: var(--gray-50);
			}

			/* Announcement Banner */
			.announcement-banner {
				margin: 0 20px 16px;
				background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
				border-radius: 12px;
				padding: 14px 16px;
				display: flex;
				align-items: center;
				gap: 12px;
				cursor: pointer;
			}
			.announcement-banner:active {
				opacity: 0.85;
			}
			.announcement-icon {
				width: 36px;
				height: 36px;
				border-radius: 8px;
				background: rgba(245, 158, 11, 0.2);
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
			}
			.announcement-icon svg {
				width: 18px;
				height: 18px;
				color: #b45309;
			}
			.announcement-content {
				flex: 1;
				min-width: 0;
			}
			.announcement-headline {
				font-size: 13px;
				font-weight: 600;
				color: #92400e;
				line-height: 1.3;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
			.announcement-cta {
				font-size: 11px;
				font-weight: 600;
				color: #b45309;
				white-space: nowrap;
			}

			/* Reports Carousel (Home) */
			.reports-scroll {
				display: flex;
				gap: 12px;
				overflow-x: auto;
				padding: 14px 20px 22px;
				margin: -6px 0 -6px;
				scrollbar-width: none;
			}
			.reports-scroll::-webkit-scrollbar {
				display: none;
			}
			.report-cover-card {
				flex-shrink: 0;
				width: 130px;
				cursor: pointer;
				transition: transform 0.2s;
			}
			.report-cover-image {
				width: 130px;
				height: 170px;
				border-radius: 12px;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 16px;
				margin-bottom: 8px;
			}
			.report-cover-image span {
				font-size: 12px;
				font-weight: 600;
				color: rgba(255, 255, 255, 0.85);
				text-align: center;
				line-height: 1.3;
			}
			.report-cover-title {
				font-size: 12px;
				font-weight: 500;
				color: var(--gray-700);
				line-height: 1.3;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

			/* Industry Carousel (Home) */
			.industry-scroll {
				display: flex;
				gap: 16px;
				overflow-x: auto;
				padding: 14px 20px 22px;
				margin: -6px 0 -6px;
				scrollbar-width: none;
			}
			.industry-scroll::-webkit-scrollbar {
				display: none;
			}
			.industry-card {
				flex-shrink: 0;
				width: 140px;
				height: 110px;
				border-radius: 16px;
				overflow: hidden;
				position: relative;
				cursor: pointer;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
			}
			.industry-card::after {
				content: "";
				position: absolute;
				inset: 0;
				background: linear-gradient(
					0deg,
					rgba(0, 0, 0, 0.52) 0%,
					rgba(0, 0, 0, 0.08) 55%,
					transparent 100%
				);
				pointer-events: none;
			}
			.industry-card:active {
				opacity: 0.85;
				transform: scale(0.97);
			}
			.industry-icon {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -65%);
				width: 44px;
				height: 44px;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 12px;
				backdrop-filter: blur(4px);
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.industry-icon svg {
				width: 22px;
				height: 22px;
			}
			.industry-card-content {
				position: relative;
				z-index: 2;
				padding: 8px 12px 10px;
			}
			.industry-name {
				font-size: 12px;
				font-weight: 700;
				color: #fff;
				display: block;
				margin-bottom: 3px;
			}
			.industry-count {
				font-size: 10px;
				color: rgba(255, 255, 255, 0.75);
				display: flex;
				align-items: center;
				gap: 3px;
			}

			/* Recently viewed */
			.recently-viewed-list {
				display: flex;
				flex-direction: column;
				gap: 1px;
				background: var(--gray-100);
			}
			.recently-viewed-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 14px 20px;
				background: #fff;
				cursor: pointer;
			}
			.recently-viewed-item:active {
				background: var(--gray-50);
			}
			.rv-left {
				display: flex;
				align-items: center;
				gap: 12px;
				flex: 1;
				min-width: 0;
			}
			.rv-indicator {
				display: none;
			}
			.rv-indicator.up {
				background: var(--success);
			}
			.rv-indicator.down {
				background: var(--danger);
			}
			.rv-info {
				flex: 1;
				min-width: 0;
			}
			.rv-name {
				font-size: 13px;
				font-weight: 600;
				color: var(--gray-800);
				margin-bottom: 2px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.rv-spec {
				font-size: 11px;
				color: var(--gray-500);
			}
			.rv-right {
				text-align: right;
			}
			.rv-price {
				font-size: 15px;
				font-weight: 700;
				color: var(--gray-900);
				margin-bottom: 2px;
			}
			.rv-change {
				font-size: 11px;
				font-weight: 600;
			}
			.rv-change.up {
				color: var(--success);
			}
			.rv-change.down {
				color: var(--danger);
			}

			/* Videos & Podcasts */
			.video-grid {
				display: flex;
				flex-direction: column;
				gap: 16px;
				padding: 0 20px;
			}
			.video-card {
				background: #fff;
				border-radius: 16px;
				overflow: hidden;
				border: 1px solid var(--gray-100);
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
				cursor: pointer;
				transition: transform 0.2s;
			}
			.video-card:active {
				transform: scale(0.98);
			}
			.video-thumbnail {
				height: 160px;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.video-play-icon {
				width: 48px;
				height: 48px;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.85);
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
			}
			.video-play-icon svg {
				width: 20px;
				height: 20px;
				color: var(--gray-800);
				margin-left: 2px;
			}
			.video-type-badge {
				position: absolute;
				top: 10px;
				left: 10px;
				padding: 4px 10px;
				border-radius: 4px;
				font-size: 10px;
				font-weight: 700;
				color: #fff;
				text-transform: uppercase;
				letter-spacing: 0.3px;
			}
			.video-type-badge.video { background: var(--danger); }
			.video-type-badge.live { background: var(--danger); }
			.video-type-badge.podcast { background: #8b5cf6; }
			.video-duration {
				position: absolute;
				bottom: 10px;
				right: 10px;
				padding: 3px 8px;
				border-radius: 4px;
				background: rgba(0, 0, 0, 0.6);
				font-size: 11px;
				font-weight: 600;
				color: #fff;
			}
			.video-info {
				padding: 12px 14px;
			}
			.video-title {
				font-size: 14px;
				font-weight: 600;
				color: var(--gray-800);
				line-height: 1.4;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				margin-bottom: 4px;
			}
			.video-meta {
				font-size: 12px;
				color: var(--gray-500);
			}

			/* Infographics Coverflow */
			.infographics-scroll {
				overflow: hidden;
				padding: 14px 0;
				position: relative;
				cursor: grab;
			}
			.infographics-scroll.dragging {
				cursor: grabbing;
				user-select: none;
			}
			.infographics-track {
				display: flex;
				transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
				will-change: transform;
			}
			.infographic-card {
				flex-shrink: 0;
				width: 220px;
				margin: 0 8px;
				border-radius: 16px;
				overflow: hidden;
				cursor: pointer;
				transform: scale(0.82);
				opacity: 0.5;
				transition:
					transform 0.35s ease,
					opacity 0.35s ease;
				transform-origin: center center;
				background: #fff;
				border: 1px solid rgba(0, 0, 0, 0.08);
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 4px 12px -4px rgba(0, 0, 0, 0.25);
			}
			.infographic-image {
				height: 150px;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20px;
				position: relative;
				background: #dbeafe;
			}
			.infographic-image svg {
				width: 40px;
				height: 40px;
				opacity: 0.6;
				color: var(--primary);
				stroke: var(--primary);
			}
			.infographic-actions {
				position: absolute;
				top: 10px;
				right: 10px;
				display: flex;
				gap: 6px;
			}
			.infographic-action-btn {
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.85);
				display: flex;
				align-items: center;
				justify-content: center;
				border: none;
				cursor: pointer;
			}
			.infographic-action-btn svg {
				width: 14px;
				height: 14px;
				color: var(--gray-600);
				stroke: var(--gray-600);
				opacity: 1;
			}
			.infographic-info {
				padding: 12px 14px;
			}
			.infographic-title {
				font-size: 13px;
				font-weight: 600;
				color: var(--gray-800);
				line-height: 1.3;
				margin-bottom: 4px;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
			.infographic-meta {
				font-size: 11px;
				color: var(--gray-400);
				font-weight: 500;
			}

			/* Tenders Home Carousel */
			.tenders-home-scroll {
				display: flex;
				gap: 12px;
				overflow-x: auto;
				padding: 14px 20px 22px;
				margin: -6px 0 -6px;
				scrollbar-width: none;
			}
			.tenders-home-scroll::-webkit-scrollbar {
				display: none;
			}
			.tender-home-card {
				flex-shrink: 0;
				width: 272px;
				background: #fff;
				border-radius: 16px;
				padding: 16px;
				border: 1px solid rgba(0, 0, 0, 0.08);
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 4px 12px -4px rgba(0, 0, 0, 0.25);
				cursor: pointer;
				transition: transform 0.2s;
				display: flex;
				flex-direction: column;
				gap: 6px;
			}
			.tender-home-card:active {
				transform: scale(0.98);
			}
			.tender-home-header {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				gap: 8px;
			}
			.tender-home-title {
				font-size: 14px;
				font-weight: 700;
				color: var(--gray-900);
				line-height: 1.35;
				flex: 1;
			}
			.tender-home-closes {
				flex-shrink: 0;
				text-align: right;
			}
			.tender-home-closes-label {
				font-size: 9px;
				color: var(--danger);
				font-weight: 500;
				text-transform: uppercase;
				letter-spacing: 0.3px;
			}
			.tender-home-closes-time {
				font-size: 14px;
				font-weight: 700;
				color: var(--danger);
				line-height: 1.2;
			}
			.tender-home-badge {
				display: inline-block;
				font-size: 11px;
				font-weight: 700;
				padding: 3px 12px;
				border-radius: 4px;
				text-transform: uppercase;
				letter-spacing: 0.5px;
				width: fit-content;
			}
			.tender-home-badge.buy {
				background: #d1fae5;
				color: #065f46;
			}
			.tender-home-badge.sell {
				background: #dbeafe;
				color: #1e40af;
			}
			.tender-home-meta {
				font-size: 12px;
				color: var(--gray-600);
				font-weight: 500;
				line-height: 1.4;
			}
			.tender-home-type {
				font-size: 12px;
				color: var(--gray-500);
				font-weight: 500;
			}
			.tender-home-progress {
				margin-top: 2px;
			}
			.tender-home-progress-bar {
				width: 100%;
				height: 5px;
				background: var(--gray-100);
				border-radius: 3px;
				overflow: hidden;
			}
			.tender-home-progress-fill {
				height: 100%;
				border-radius: 3px;
				background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
			}
			.tender-home-progress-labels {
				display: flex;
				justify-content: space-between;
				margin-top: 4px;
				font-size: 10px;
				color: var(--gray-400);
				font-weight: 500;
			}

			/* Market pulse */
			.pulse-category-data {
				display: none;
			}
			.pulse-category-data.active {
				display: block;
			}
			.market-pulse-container {
				display: flex;
				margin: 0 20px;
				background: #fff;
				border-radius: 16px;
				border: 1px solid rgba(0, 0, 0, 0.08);
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 4px 12px -4px rgba(0, 0, 0, 0.25);
				overflow: hidden;
				height: 300px;
			}
			.market-pulse-rail {
				width: 90px;
				background: var(--gray-50);
				border-right: 1px solid var(--gray-100);
				overflow-y: auto;
				scrollbar-width: none;
				flex-shrink: 0;
			}
			.market-pulse-rail::-webkit-scrollbar {
				display: none;
			}
			.pulse-rail-item {
				padding: 12px 10px;
				font-size: 11px;
				font-weight: 500;
				color: var(--gray-500);
				text-align: center;
				cursor: pointer;
				border-left: 3px solid transparent;
			}
			.pulse-rail-item.active {
				background: #fff;
				color: var(--primary);
				font-weight: 600;
				border-left-color: var(--primary);
			}
			.pulse-main {
				flex: 1;
				display: flex;
				flex-direction: column;
				min-width: 0;
			}
			.pulse-tabs {
				display: flex;
				border-bottom: 1px solid var(--gray-100);
			}
			.pulse-tab {
				flex: 1;
				padding: 10px;
				font-size: 12px;
				font-weight: 500;
				color: var(--gray-400);
				text-align: center;
				cursor: pointer;
				border-bottom: 2px solid transparent;
			}
			.pulse-tab.active {
				color: var(--primary);
				font-weight: 600;
				border-bottom-color: var(--primary);
			}
			.pulse-content-area {
				flex: 1;
				overflow-y: auto;
				scrollbar-width: none;
			}
			.pulse-content-area::-webkit-scrollbar {
				display: none;
			}
			.pulse-content-panel {
				display: none;
			}
			.pulse-content-panel.active {
				display: block;
			}
			.pulse-price-item {
				display: flex;
				align-items: center;
				padding: 12px;
				border-bottom: 1px solid var(--gray-100);
				cursor: pointer;
				gap: 10px;
			}
			.pulse-price-item:active {
				background: var(--gray-50);
			}
			.pulse-price-indicator {
				display: none;
			}
			.pulse-price-indicator.up {
				background: var(--success);
			}
			.pulse-price-indicator.down {
				background: var(--danger);
			}
			.pulse-price-info {
				flex: 1;
				min-width: 0;
			}
			.pulse-price-name {
				font-size: 13px;
				font-weight: 600;
				color: var(--gray-800);
				margin-bottom: 2px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.pulse-price-spec {
				font-size: 11px;
				color: var(--gray-500);
			}
			.pulse-price-right {
				text-align: right;
				flex-shrink: 0;
			}
			.pulse-price-val {
				font-size: 14px;
				font-weight: 700;
				color: var(--gray-900);
				white-space: nowrap;
			}
			.pulse-price-chg {
				font-size: 11px;
				font-weight: 600;
				margin-top: 2px;
			}
			.pulse-price-chg.up {
				color: var(--success);
			}
			.pulse-price-chg.down {
				color: var(--danger);
			}
			.pulse-news-item {
				padding: 10px 12px;
				border-bottom: 1px solid var(--gray-50);
				cursor: pointer;
			}
			.pulse-news-item:active {
				background: var(--gray-50);
			}
			.pulse-news-title {
				font-size: 12px;
				font-weight: 500;
				color: var(--gray-700);
				line-height: 1.3;
				margin-bottom: 4px;
			}
			.pulse-news-meta {
				font-size: 10px;
				color: var(--gray-400);
			}

			/* Statistics Screen Styles */
			.stats-tabs .tab.active {
				color: var(--primary);
				border-bottom-color: var(--primary);
			}
			.stats-category-list {
				padding: 0;
				background: #fff;
			}
			.stats-category-item {
				display: flex;
				align-items: center;
				gap: 14px;
				padding: 14px 20px;
				border-bottom: 1px solid var(--gray-100);
				cursor: pointer;
				transition: background 0.15s;
			}
			.stats-category-item:active {
				background: var(--gray-50);
			}
			.stats-category-icon {
				width: 40px;
				height: 40px;
				border-radius: 8px;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
			}
			.stats-category-icon svg {
				width: 22px;
				height: 22px;
			}
			.stats-category-info {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				min-width: 0;
			}
			.stats-category-name {
				font-size: 14px;
				font-weight: 500;
				color: var(--gray-800);
			}
			.stats-category-count {
				font-size: 13px;
				font-weight: 500;
				color: var(--gray-400);
				margin-left: 8px;
				flex-shrink: 0;
			}
			.stats-chevron {
				width: 18px;
				height: 18px;
				color: var(--gray-300);
				flex-shrink: 0;
			}
			/* Region Cards Scroll */
			.stats-region-scroll {
				display: flex;
				gap: 12px;
				overflow-x: auto;
				padding: 0 20px 20px;
				scrollbar-width: none;
				-ms-overflow-style: none;
			}
			.stats-region-scroll::-webkit-scrollbar {
				display: none;
			}
			.stats-region-card {
				flex-shrink: 0;
				width: 130px;
				height: 90px;
				border-radius: 16px;
				background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
				position: relative;
				overflow: hidden;
				cursor: pointer;
				display: flex;
				align-items: flex-end;
				padding: 12px;
				transition: transform 0.2s;
			}
			.stats-region-overlay {
				position: absolute;
				inset: 0;
				background: linear-gradient(
					180deg,
					transparent 40%,
					rgba(0, 0, 0, 0.5) 100%
				);
			}
			.stats-region-name {
				position: relative;
				z-index: 1;
				font-size: 13px;
				font-weight: 600;
				color: #fff;
			}
			.stats-region-map {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 70px;
				height: 70px;
				opacity: 0.5;
			}
			/* Infographics Horizontal Scroll */
			.stats-infographics-scroll {
				display: flex;
				gap: 12px;
				overflow-x: auto;
				padding: 14px 20px 22px;
				margin: -6px 0 -6px;
				scrollbar-width: none;
				-ms-overflow-style: none;
			}
			.stats-infographics-scroll::-webkit-scrollbar {
				display: none;
			}
			.stats-infographic-card {
				flex-shrink: 0;
				width: 200px;
				border-radius: 16px;
				overflow: hidden;
				background: #fff;
				border: 1px solid rgba(0, 0, 0, 0.08);
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 4px 12px -4px rgba(0, 0, 0, 0.25);
				cursor: pointer;
				transition: transform 0.2s;
			}
			.stats-infographic-image {
				height: 100px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.stats-infographic-content {
				padding: 10px 12px;
			}
			.stats-infographic-title {
				font-size: 12px;
				font-weight: 600;
				color: var(--gray-800);
				line-height: 1.3;
				margin-bottom: 4px;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
			.stats-infographic-meta {
				font-size: 10px;
				color: var(--gray-400);
			}

			/* Tab Panel Content Switching */
			.tab-panel {
				display: none;
			}
			.tab-panel.active {
				display: block;
			}

			/* Sub-tabs (second-level pill tabs) */
			.prices-market-tabs {
				display: flex;
				gap: 8px;
				padding: 10px 20px 0;
				background: #fff;
				border-bottom: 1px solid var(--gray-100);
				overflow-x: auto;
				scrollbar-width: none;
			}
			.prices-market-tabs::-webkit-scrollbar {
				display: none;
			}
			.prices-market-tab {
				padding: 8px 14px;
				font-size: 13px;
				font-weight: 600;
				color: var(--gray-500);
				white-space: nowrap;
				cursor: pointer;
				border-bottom: 2px solid transparent;
				margin-bottom: -1px;
			}
			.prices-market-tab.active {
				color: var(--primary);
				border-bottom-color: var(--primary);
			}

			.sub-tabs {
				display: flex;
				gap: 6px;
				padding: 10px 20px;
				background: #fff;
				overflow-x: auto;
				scrollbar-width: none;
			}
			.sub-tabs::-webkit-scrollbar {
				display: none;
			}
			.sub-tab {
				padding: 6px 14px;
				border-radius: 16px;
				font-size: 12px;
				font-weight: 500;
				color: var(--gray-500);
				background: var(--gray-100);
				white-space: nowrap;
				cursor: pointer;
				border: 1px solid transparent;
			}
			.sub-tab.active {
				background: var(--primary);
				color: #fff;
			}

			.sub-commodity-tabs {
				display: flex;
				gap: 6px;
				padding: 6px 20px;
				background: #fff;
				overflow-x: auto;
				flex-wrap: nowrap;
				scrollbar-width: none;
				-ms-overflow-style: none;
				-webkit-overflow-scrolling: touch;
			}
			.sub-commodity-tabs::-webkit-scrollbar { display: none; }
			.sub-commodity-tab {
				flex-shrink: 0;
				white-space: nowrap;
				padding: 4px 12px;
				border-radius: 12px;
				font-size: 11px;
				font-weight: 500;
				color: var(--gray-500);
				background: var(--gray-50);
				border: 1px solid var(--gray-200);
				white-space: nowrap;
				cursor: pointer;
				flex-shrink: 0;
			}
			.sub-commodity-tab.active {
				background: var(--accent);
				color: #fff;
				border-color: var(--accent);
			}

			/* Filter Row */
			.filter-row {
				display: flex;
				gap: 8px;
				padding: 8px 20px 12px;
				background: #fff;
				overflow-x: auto;
				scrollbar-width: none;
				position: sticky;
				top: 43px;
				z-index: 89;
			}
			.filter-row::-webkit-scrollbar {
				display: none;
			}

			/* ── News screen: flex-column layout so tabs never scroll ── */
			#screen-news.active {
				display: flex;
				flex-direction: column;
				height: 100%;
			}
			/* Tabs become a pinned flex header — sticky no longer needed */
			#screen-news > .tabs {
				flex-shrink: 0;
				position: static;
			}
			/* Active panel gets all remaining height and owns its scroll */
			#screen-news .news-panel.active {
				flex: 1;
				overflow-y: auto;
				overflow-x: hidden;
				-webkit-overflow-scrolling: touch;
				scrollbar-width: none;
				-ms-overflow-style: none;
				display: block;
			}
			#screen-news .news-panel.active::-webkit-scrollbar {
				display: none;
			}
			/* filter-row and sub-tabs are now sticky inside their own panel */
			#screen-news .filter-row {
				position: sticky;
				top: 0;
				z-index: 50;
			}
			#screen-news .sub-tabs {
				position: sticky;
				top: 0;
				z-index: 50;
			}
			.filter-chip {
				padding: 6px 12px;
				background: #fff;
				border-radius: 24px;
				font-size: 12px;
				color: var(--gray-600);
				display: flex;
				align-items: center;
				gap: 4px;
				cursor: pointer;
				white-space: nowrap;
				border: 1px solid var(--gray-300);
			}
			.filter-chip:active {
				background: var(--gray-100);
				border-color: var(--gray-400);
			}
			.filter-chip svg {
				width: 12px;
				height: 12px;
				flex-shrink: 0;
				color: var(--gray-400);
			}
			.filter-chip.has-value {
				border-color: var(--primary);
				color: var(--primary);
				background: #eff6ff;
			}
			.filter-chip.has-value svg {
				color: var(--primary);
			}
			.filter-chip-clear {
				border-color: var(--danger);
				color: var(--danger);
				background: #fef2f2;
			}
			.filter-chip-clear:active {
				background: #fee2e2 !important;
				border-color: var(--danger) !important;
			}
			.filter-chip-clear svg {
				color: var(--danger) !important;
			}
			.no-filter-results {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 40px 20px;
				text-align: center;
				color: var(--gray-400);
				font-size: 13px;
				font-weight: 500;
			}

			/* Filter Dropdown — Inline (anchored below chip) */
			.filter-dropdown-overlay {
				display: none;
				position: absolute;
				inset: 0;
				z-index: 500;
			}
			.filter-dropdown-overlay.show {
				display: block;
			}
			.filter-dropdown-sheet {
				position: absolute;
				background: #fff;
				border-radius: 12px;
				min-width: 180px;
				max-width: 280px;
				max-height: 300px;
				overflow-y: auto;
				box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
				padding: 6px 0;
				z-index: 501;
				animation: fddDropIn 0.15s ease;
			}
			@keyframes fddDropIn {
				from {
					opacity: 0;
					transform: translateY(-6px);
				}
				to {
					opacity: 1;
					transform: translateY(0);
				}
			}
			.filter-dropdown-sheet::-webkit-scrollbar {
				display: none;
			}
			.fdd-body {
				padding: 0;
			}
			.fdd-option {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px 16px;
				cursor: pointer;
				transition: background 0.15s;
			}
			.fdd-option:active {
				background: var(--gray-50);
			}
			.fdd-option-label {
				font-size: 13px;
				color: var(--gray-700);
				font-weight: 500;
			}
			.fdd-option-sub {
				font-size: 11px;
				color: var(--gray-400);
				margin-left: 6px;
			}
			.fdd-option.selected .fdd-option-label {
				color: var(--primary);
				font-weight: 600;
			}
			.fdd-check {
				width: 16px;
				height: 16px;
				color: var(--primary);
				display: none;
				flex-shrink: 0;
			}
			.fdd-option.selected .fdd-check {
				display: block;
			}

			/* Detailed Price Card */
			.price-card-detailed {
				display: flex;
				align-items: center;
				gap: 12px;
				padding: 14px 20px;
				background: #fff;
				border-bottom: 1px solid var(--gray-100);
				cursor: pointer;
			}
			.price-card-detailed:active {
				background: var(--gray-50);
			}
			.price-card-img {
				display: none;
			}
			.price-card-img svg {
				display: none;
			}
			.price-card-body {
				flex: 1;
				min-width: 0;
			}
			.price-card-badge-row {
				display: flex;
				gap: 6px;
				align-items: center;
				margin-bottom: 4px;
				flex-wrap: nowrap;
				overflow: hidden;
			}
			.price-card-spec-line {
				font-size: 14px;
				font-weight: 600;
				color: var(--gray-800);
				margin-bottom: 2px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.price-card-grade-line {
				font-size: 11px;
				color: var(--gray-500);
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.price-card-meta-line {
				display: none;
			}
			.price-card-price-col {
				text-align: right;
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				gap: 2px;
			}
			.price-card-price-col .price-val {
				font-size: 16px;
				font-weight: 700;
				color: var(--gray-900);
			}
			.price-card-price-col .price-chg {
				font-size: 11px;
				font-weight: 600;
			}
			.price-card-price-col .price-chg.up {
				color: var(--success);
			}
			.price-card-price-col .price-chg.down {
				color: var(--danger);
			}
			/* Skeleton loading overlay */
			.prices-loading-overlay {
				background: #fff;
				pointer-events: none;
				opacity: 1;
				transition: opacity 0.4s ease;
				overflow: hidden;
			}
			.prices-loading-overlay.fade-out {
				opacity: 0;
			}
			.prices-loading-overlay.hidden {
				display: none;
			}
			.skel-card {
				display: flex;
				align-items: flex-start;
				gap: 12px;
				padding: 14px 20px;
				border-bottom: 1px solid var(--gray-100);
			}
			.skel-strip {
				width: 4px;
				height: 44px;
				border-radius: 2px;
				background: var(--gray-100);
				flex-shrink: 0;
				margin-top: 4px;
				animation: skelShimmer 1.4s ease-in-out infinite;
			}
			.skel-body {
				flex: 1;
				min-width: 0;
			}
			.skel-badge-row {
				display: flex;
				gap: 6px;
				margin-bottom: 6px;
			}
			.skel-block {
				height: 12px;
				border-radius: 4px;
				background: var(--gray-100);
				animation: skelShimmer 1.4s ease-in-out infinite;
			}
			.skel-price-col {
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				padding-top: 14px;
			}
			@keyframes skelShimmer {
				0%, 100% { opacity: 0.5; }
				50% { opacity: 1; }
			}
			[data-theme="dark"] .prices-loading-overlay {
				background: var(--gray-50);
			}
			[data-theme="dark"] .skel-block,
			[data-theme="dark"] .skel-strip {
				background: var(--gray-200);
			}

			/* ========== Feature Discovery Tooltips ========== */
			.discovery-overlay {
				position: absolute;
				inset: 0;
				z-index: 500;
				pointer-events: none;
				opacity: 1;
				transition: opacity 0.4s ease;
			}
			.discovery-overlay.hidden {
				display: none;
			}
			.discovery-overlay.fade-out {
				opacity: 0;
			}
			.discovery-dot {
				position: absolute;
				width: 12px;
				height: 12px;
				border-radius: 50%;
				background: #3b82f6;
				pointer-events: auto;
				cursor: pointer;
				z-index: 501;
			}
			.discovery-dot::before {
				content: '';
				position: absolute;
				inset: -4px;
				border-radius: 50%;
				background: rgba(59, 130, 246, 0.3);
				animation: discoveryPulse 2s ease-in-out infinite;
			}
			.discovery-dot::after {
				content: '';
				position: absolute;
				inset: -8px;
				border-radius: 50%;
				background: rgba(59, 130, 246, 0.12);
				animation: discoveryPulse 2s ease-in-out infinite 0.3s;
			}
			@keyframes discoveryPulse {
				0%, 100% { transform: scale(1); opacity: 1; }
				50% { transform: scale(1.5); opacity: 0.4; }
			}
			.discovery-tooltip {
				position: absolute;
				background: #1e293b;
				color: #fff;
				padding: 8px 14px;
				border-radius: 12px;
				font-size: 13px;
				font-weight: 600;
				white-space: nowrap;
				display: flex;
				align-items: center;
				gap: 7px;
				pointer-events: auto;
				opacity: 0;
				transform: translateY(4px);
				transition: opacity 0.2s, transform 0.2s;
				box-shadow: 0 8px 24px rgba(0,0,0,0.25);
				z-index: 502;
			}
			.discovery-tooltip.visible {
				opacity: 1;
				transform: translateY(0);
			}
			.discovery-tooltip::before {
				content: '';
				position: absolute;
				width: 8px;
				height: 8px;
				background: #1e293b;
				transform: rotate(45deg);
			}
			.discovery-tooltip.arrow-top::before {
				top: -4px;
				left: 50%;
				margin-left: -4px;
			}
			.discovery-tooltip.arrow-bottom::before {
				bottom: -4px;
				left: 50%;
				margin-left: -4px;
			}
			.discovery-tooltip.arrow-left::before {
				left: -4px;
				top: 50%;
				margin-top: -4px;
			}
			.discovery-tooltip.arrow-right::before {
				right: -4px;
				top: 50%;
				margin-top: -4px;
			}
			.discovery-tooltip svg {
				width: 14px;
				height: 14px;
				flex-shrink: 0;
			}
			.discovery-dismiss-bar {
				position: absolute;
				bottom: 100px;
				left: 50%;
				transform: translateX(-50%);
				pointer-events: auto;
				z-index: 503;
			}
			.discovery-dismiss-btn {
				background: #1e293b;
				color: #fff;
				border: none;
				padding: 10px 24px;
				border-radius: 24px;
				font-size: 13px;
				font-weight: 600;
				font-family: 'Inter', sans-serif;
				cursor: pointer;
				box-shadow: 0 8px 24px rgba(0,0,0,0.3);
				display: flex;
				align-items: center;
				gap: 6px;
				transition: transform 0.2s, background 0.2s;
			}
			.discovery-dismiss-btn:active {
				transform: scale(0.95);
				background: #334155;
			}
			.discovery-dismiss-btn svg {
				width: 16px;
				height: 16px;
			}

			/* Expandable price card details */
			.price-card-expand-btn {
				width: 20px;
				height: 20px;
				flex-shrink: 0;
				color: var(--gray-400);
				cursor: pointer;
				transition: transform 0.2s;
				margin-left: 4px;
			}
			.price-card-detailed.expanded .price-card-expand-btn {
				transform: rotate(180deg);
			}
			.price-card-expand-data {
				max-height: 0;
				overflow: hidden;
				transition: max-height 0.3s ease;
				background: var(--gray-50);
				border-bottom: 1px solid var(--gray-100);
			}
			.price-card-detailed.expanded + .price-card-expand-data {
				max-height: 60px;
			}
			.price-card-expand-inner {
				display: flex;
				justify-content: space-around;
				padding: 10px 20px;
				gap: 8px;
			}
			.price-expand-stat {
				font-size: 11px;
				color: var(--gray-500);
				white-space: nowrap;
			}
			.price-expand-stat span {
				font-weight: 600;
				color: var(--gray-800);
			}
			.price-card-remove-btn {
				display: none;
			}
			.price-card-remove-btn:active {
				background: var(--gray-200);
			}

			/* Parent-Child Assessment — multi-city expandable */
			.parent-child-wrapper {
				background: #fff;
				border-bottom: 1px solid var(--gray-100);
			}
			.parent-child-trigger {
				display: flex;
				align-items: center;
				gap: 6px;
				padding: 6px 20px 8px;
				font-size: 12px;
				font-weight: 500;
				color: var(--accent);
				cursor: pointer;
			}
			.parent-child-trigger:active {
				opacity: 0.7;
			}
			.parent-child-trigger svg {
				width: 14px;
				height: 14px;
				transition: transform 0.2s;
				flex-shrink: 0;
			}
			.parent-child-wrapper.expanded .parent-child-trigger svg {
				transform: rotate(180deg);
			}
			.parent-child-cities {
				max-height: 0;
				overflow: hidden;
				transition: max-height 0.3s ease;
				background: var(--gray-50);
			}
			.parent-child-wrapper.expanded .parent-child-cities {
				max-height: 600px;
			}
			.parent-child-cities .price-card-detailed {
				margin-left: 20px;
				border-left: 3px solid var(--accent);
				border-bottom: 1px solid var(--gray-100);
				background: #fff;
			}
			.parent-child-cities .price-card-detailed:last-child {
				border-bottom: none;
			}
			.child-city-label {
				display: inline-flex;
				align-items: center;
				font-size: 9px;
				font-weight: 600;
				color: var(--accent);
				background: #dbeafe;
				padding: 0 6px;
				height: 18px;
				border-radius: 4px;
			}

			/* Share Bottom Sheet */
			.share-overlay {
				position: absolute;
				inset: 0;
				background: rgba(0, 0, 0, 0.5);
				z-index: 300;
				opacity: 0;
				visibility: hidden;
				transition: all 0.3s;
			}
			.share-overlay.show {
				opacity: 1;
				visibility: visible;
			}
			@keyframes fadeIn {
				from { opacity: 0; transform: translateY(-8px); }
				to { opacity: 1; transform: translateY(0); }
			}

			/* Add Assessment Bottom Sheet */
			.assessment-overlay {
				position: absolute;
				top: 0; left: 0; right: 0; bottom: 0;
				background: rgba(0,0,0,0.5);
				z-index: 300;
				opacity: 0;
				visibility: hidden;
				transition: all 0.3s ease;
			}
			.assessment-overlay.show {
				opacity: 1;
				visibility: visible;
			}
			.assessment-sheet {
				position: absolute;
				bottom: 0; left: 0; right: 0;
				background: #fff;
				border-radius: 24px 24px 0 0;
				padding: 20px;
				transform: translateY(100%);
				transition: transform 0.3s ease;
				z-index: 301;
				max-height: 75%;
				display: flex;
				flex-direction: column;
			}
			.assessment-overlay.show .assessment-sheet {
				transform: translateY(0);
			}
			.assessment-sheet-handle {
				width: 40px;
				height: 4px;
				background: var(--gray-300);
				border-radius: 2px;
				margin: 0 auto 16px;
			}
			.assessment-sheet-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 12px;
			}
			.assessment-sheet-header h3 {
				font-size: 16px;
				font-weight: 700;
				color: var(--gray-900);
			}
			.assessment-sheet-close {
				width: 28px; height: 28px;
				border-radius: 50%;
				background: var(--gray-100);
				display: flex; align-items: center; justify-content: center;
				cursor: pointer;
			}
			.assessment-sheet-close svg {
				width: 14px; height: 14px;
				color: var(--gray-600);
			}
			.assessment-search {
				display: flex;
				align-items: center;
				gap: 8px;
				padding: 10px 12px;
				border: 1px solid var(--gray-200);
				border-radius: 12px;
				margin-bottom: 12px;
			}
			.assessment-search svg {
				width: 16px; height: 16px;
				color: var(--gray-400);
				flex-shrink: 0;
			}
			.assessment-search input {
				flex: 1; border: none; outline: none;
				font-size: 13px; font-family: 'Inter', sans-serif;
				color: var(--gray-800); background: transparent;
			}
			.assessment-search input::placeholder { color: var(--gray-400); }
			.assessment-results {
				flex: 1;
				overflow-y: auto;
				scrollbar-width: none;
			}
			.assessment-results::-webkit-scrollbar { display: none; }
			.assessment-item {
				display: flex;
				align-items: center;
				gap: 12px;
				padding: 12px 0;
				border-bottom: 1px solid var(--gray-100);
				cursor: pointer;
				transition: all 0.2s;
			}
			.assessment-item:active { background: var(--gray-50); }
			.assessment-item-indicator {
				width: 4px; height: 36px;
				border-radius: 2px;
			}
			.assessment-item-indicator.up { background: var(--success); }
			.assessment-item-indicator.down { background: var(--danger); }
			.assessment-item-indicator.flat { background: var(--gray-300); }
			.assessment-item-info { flex: 1; }
			.assessment-item-name {
				font-size: 13px; font-weight: 600;
				color: var(--gray-800);
				margin-bottom: 2px;
			}
			.assessment-item-spec {
				font-size: 11px; color: var(--gray-500);
			}
			.assessment-item-price {
				text-align: right;
			}
			.assessment-item-value {
				font-size: 14px; font-weight: 700;
				color: var(--gray-900);
			}
			.assessment-item-change {
				font-size: 11px; font-weight: 500;
			}
			.assessment-item-change.up { color: var(--success); }
			.assessment-item-change.down { color: var(--danger); }
			.assessment-item-add {
				width: 28px; height: 28px;
				border-radius: 50%;
				background: var(--primary);
				display: flex; align-items: center; justify-content: center;
				flex-shrink: 0;
			}
			.assessment-item-add svg {
				width: 14px; height: 14px;
				color: #fff;
			}

			.share-sheet {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				background: #fff;
				border-radius: 24px 24px 0 0;
				padding: 20px;
				transform: translateY(100%);
				transition: transform 0.3s ease;
				z-index: 301;
			}
			.share-overlay.show .share-sheet {
				transform: translateY(0);
			}
			.share-handle {
				width: 40px;
				height: 4px;
				background: var(--gray-300);
				border-radius: 2px;
				margin: 0 auto 16px;
			}
			.share-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20px;
			}
			.share-title {
				font-size: 17px;
				font-weight: 700;
				color: var(--gray-900);
			}
			.share-close {
				width: 32px;
				height: 32px;
				border-radius: 50%;
				background: var(--gray-100);
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				border: none;
			}
			.share-close svg {
				width: 18px;
				height: 18px;
				color: var(--gray-600);
			}
			.share-platforms {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				gap: 16px 0;
				margin-bottom: 20px;
			}
			.share-platforms .share-platform {
				width: 25%;
			}
			.share-platform {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 8px;
				cursor: pointer;
			}
			.share-platform-icon {
				width: 52px;
				height: 52px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.share-platform-icon svg {
				width: 24px;
				height: 24px;
				color: #fff;
			}
			.share-platform-icon.whatsapp {
				background: #25d366;
			}
			.share-platform-icon.email {
				background: #ea4335;
			}
			.share-platform-icon.sms {
				background: #34b7f1;
			}
			.share-platform-icon.linkedin {
				background: #0a66c2;
			}
			.share-platform-icon.twitter {
				background: #000;
			}
			.share-platform-icon.facebook {
				background: #1877f2;
			}
			.share-platform span {
				font-size: 11px;
				color: var(--gray-600);
				font-weight: 500;
			}
			.share-copy-link {
				display: flex;
				align-items: center;
				gap: 12px;
				padding: 14px;
				background: var(--gray-50);
				border-radius: 12px;
				cursor: pointer;
			}
			.share-copy-link:active {
				background: var(--gray-100);
			}
			.share-copy-link svg {
				width: 20px;
				height: 20px;
				color: var(--gray-500);
			}
			.share-copy-link span {
				font-size: 13px;
				color: var(--gray-700);
				font-weight: 500;
				flex: 1;
			}
			.share-copy-link .copy-btn {
				font-size: 12px;
				color: var(--accent);
				font-weight: 600;
				flex: none;
			}

			/* Badge chips — flat color blocks */
			.badge-dom {
				display: inline-block;
				padding: 2px 6px;
				border-radius: 4px;
				font-size: 9px;
				font-weight: 600;
				background: var(--gray-100);
				color: var(--gray-700);
				border: none;
				text-transform: uppercase;
			}
			.badge-imp {
				display: inline-block;
				padding: 2px 6px;
				border-radius: 4px;
				font-size: 9px;
				font-weight: 600;
				background: var(--gray-100);
				color: var(--gray-700);
				border: none;
				text-transform: uppercase;
			}
			.badge-exp {
				display: inline-block;
				padding: 2px 6px;
				border-radius: 4px;
				font-size: 9px;
				font-weight: 600;
				background: var(--gray-100);
				color: var(--gray-700);
				border: none;
				text-transform: uppercase;
			}

			/* News card actions (share/listen) */
			.news-actions {
				display: none;
			}
			.news-action-icon {
				width: 28px;
				height: 28px;
				border-radius: 50%;
				background: var(--gray-100);
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				color: var(--gray-400);
			}
			.news-action-icon:active {
				background: var(--gray-200);
			}
			.news-action-icon svg {
				width: 14px;
				height: 14px;
			}

			/* View more link */
			.view-more-link {
				display: block;
				padding: 10px 20px;
				background: #fff;
				font-size: 12px;
				font-weight: 500;
				color: var(--accent);
				cursor: pointer;
				border-bottom: 1px solid var(--gray-100);
				text-align: center;
			}
			.view-more-link:active {
				background: var(--gray-50);
			}

			/* Hero Banner (Events) */
			.hero-banner {
				padding: 10px 20px;
				background: #fff;
				border-bottom: 1px solid var(--gray-100);
			}
			.hero-banner-title {
				font-size: 14px;
				font-weight: 700;
				color: var(--gray-900);
				display: inline;
			}
			.hero-banner-subtitle {
				font-size: 12px;
				color: var(--gray-500);
				display: block;
				margin-top: 2px;
			}

			/* Event actions (share/bookmark) */
			.event-actions {
				display: flex;
				gap: 8px;
			}
			.event-action-icon {
				width: 32px;
				height: 32px;
				border-radius: 50%;
				background: var(--gray-100);
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				color: var(--gray-500);
			}
			.event-action-icon:active {
				background: var(--gray-200);
			}
			.event-action-icon svg {
				width: 16px;
				height: 16px;
			}

			/* Industry Pulse (Prices screen) */
			.industry-pulse-tabs {
				display: flex;
				gap: 8px;
				padding: 12px 20px;
				background: #fff;
				overflow-x: auto;
				scrollbar-width: none;
			}
			.industry-pulse-tabs::-webkit-scrollbar {
				display: none;
			}
			.industry-pulse-tab {
				padding: 7px 16px;
				border-radius: 24px;
				font-size: 12px;
				font-weight: 500;
				color: var(--gray-500);
				background: var(--gray-100);
				white-space: nowrap;
				cursor: pointer;
			}
			.industry-pulse-tab.active {
				background: var(--primary);
				color: #fff;
			}
			@keyframes fadeSlideIn {
				from {
					opacity: 0;
					transform: translateY(8px);
				}
				to {
					opacity: 1;
					transform: translateY(0);
				}
			}

			/* ========== News Access Gating & Blur (PRD 9e) ========== */
			.news-card.gated {
				filter: blur(6px);
				pointer-events: none;
				user-select: none;
				-webkit-user-select: none;
				opacity: 0.7;
			}

			.news-gating-cta {
				display: none;
				margin: 0 20px 16px;
				padding: 20px;
				background: linear-gradient(
					135deg,
					var(--primary) 0%,
					var(--primary-light) 100%
				);
				border-radius: 16px;
				text-align: center;
				position: relative;
				overflow: hidden;
			}

			.news-gating-cta::before {
				content: "";
				position: absolute;
				top: -20px;
				right: -20px;
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.08);
			}

			.news-gating-cta.visible {
				display: block;
			}

			.news-gating-cta .gating-icon {
				width: 44px;
				height: 44px;
				background: rgba(255, 255, 255, 0.15);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 auto 12px;
			}

			.news-gating-cta .gating-icon svg {
				width: 22px;
				height: 22px;
				color: #fff;
			}

			.news-gating-cta .gating-title {
				font-size: 16px;
				font-weight: 700;
				color: #fff;
				margin-bottom: 6px;
			}

			.news-gating-cta .gating-text {
				font-size: 13px;
				color: rgba(255, 255, 255, 0.8);
				line-height: 1.4;
				margin-bottom: 16px;
			}

			.news-gating-cta .gating-btn {
				display: inline-flex;
				padding: 10px 28px;
				background: #fff;
				color: var(--primary);
				border: none;
				border-radius: 24px;
				font-size: 14px;
				font-weight: 600;
				font-family: "Inter", sans-serif;
				cursor: pointer;
			}

			.news-panel .section.gated,
			.news-panel .news-list.gated {
				filter: blur(6px);
				pointer-events: none;
				user-select: none;
				opacity: 0.7;
			}

			/* Subscription Plan Overlay */
			.subscription-overlay {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0, 0.6);
				z-index: 500;
				display: none;
				align-items: flex-end;
				justify-content: center;
			}
			.subscription-overlay.open {
				display: flex;
			}
			.subscription-panel {
				background: #fff;
				border-radius: 24px 24px 0 0;
				padding: 24px 20px 32px;
				width: 100%;
				max-height: 85%;
				overflow-y: auto;
				animation: slideUpPlan 0.3s ease;
			}
			@keyframes slideUpPlan {
				from {
					transform: translateY(100%);
				}
				to {
					transform: translateY(0);
				}
			}
			.subscription-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 4px;
			}
			.subscription-header h3 {
				font-size: 18px;
				font-weight: 700;
				color: var(--gray-900);
				margin: 0;
			}
			.subscription-close {
				width: 32px;
				height: 32px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				background: var(--gray-100);
				cursor: pointer;
			}
			.subscription-subtitle {
				font-size: 13px;
				color: var(--gray-500);
				margin: 0 0 20px;
			}
			.plan-cards {
				display: flex;
				flex-direction: column;
				gap: 12px;
				margin-bottom: 20px;
			}
			.plan-card {
				border: 2px solid var(--gray-200);
				border-radius: 16px;
				padding: 16px;
				cursor: pointer;
				position: relative;
			}
			.plan-card.selected {
				border-color: var(--primary);
				background: #f0f5ff;
			}
			.plan-card.popular {
				border-color: var(--accent);
			}
			.plan-badge {
				position: absolute;
				top: -10px;
				right: 16px;
				background: var(--accent);
				color: #fff;
				font-size: 10px;
				font-weight: 600;
				padding: 3px 10px;
				border-radius: 12px;
			}
			.plan-name {
				font-size: 15px;
				font-weight: 700;
				color: var(--gray-900);
				margin-bottom: 4px;
			}
			.plan-price {
				font-size: 22px;
				font-weight: 700;
				color: var(--primary);
				margin-bottom: 8px;
			}
			.plan-price span {
				font-size: 13px;
				font-weight: 400;
				color: var(--gray-500);
			}
			.plan-features {
				list-style: none;
				padding: 0;
				margin: 0;
				display: flex;
				flex-wrap: wrap;
				gap: 4px 12px;
			}
			.plan-features li {
				font-size: 12px;
				color: var(--gray-600);
				position: relative;
				padding-left: 14px;
			}
			.plan-features li::before {
				content: "";
				position: absolute;
				left: 0;
				top: 5px;
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background: var(--success);
			}
			.subscribe-confirm-btn {
				width: 100%;
				padding: 14px;
				background: var(--primary);
				color: #fff;
				border: none;
				border-radius: 12px;
				font-size: 15px;
				font-weight: 600;
				font-family: "Inter", sans-serif;
				cursor: pointer;
			}
			.subscribe-confirm-btn:disabled {
				background: var(--gray-300);
				cursor: not-allowed;
			}

			/* Industry Snapshot (News screen) */
			.industry-snapshot {
				display: flex;
				margin: 0 20px;
				background: #fff;
				border-radius: 16px;
				border: 1px solid rgba(0, 0, 0, 0.08);
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 4px 12px -4px rgba(0, 0, 0, 0.25);
				overflow: hidden;
				min-height: 200px;
			}
			.snapshot-rail {
				width: 100px;
				background: var(--gray-50);
				border-right: 1px solid var(--gray-100);
				flex-shrink: 0;
			}
			.snapshot-rail-item {
				padding: 12px 10px;
				font-size: 11px;
				font-weight: 500;
				color: var(--gray-500);
				text-align: center;
				cursor: pointer;
				border-left: 3px solid transparent;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 2px;
			}
			.snapshot-rail-item:active {
				background: var(--gray-100);
			}
			.snapshot-rail-item svg {
				width: 18px;
				height: 18px;
			}
			.snapshot-rail-item.active {
				background: #fff;
				color: var(--primary);
				font-weight: 600;
				border-left-color: var(--primary);
			}
			.snapshot-content {
				flex: 1;
				padding: 10px 12px;
				overflow-y: auto;
			}
			.snapshot-news-item {
				padding: 8px 0;
				border-bottom: 1px solid var(--gray-50);
				cursor: pointer;
			}
			.snapshot-news-item:last-child {
				border-bottom: none;
			}
			.snapshot-news-title {
				font-size: 12px;
				font-weight: 500;
				color: var(--gray-700);
				line-height: 1.3;
				margin-bottom: 3px;
			}
			.snapshot-news-meta {
				font-size: 10px;
				color: var(--gray-400);
			}
			.snapshot-content {
				scrollbar-width: none;
				-ms-overflow-style: none;
			}
			.snapshot-content::-webkit-scrollbar {
				display: none;
			}
			.snapshot-news-item:active {
				background: var(--gray-50);
			}

			/* Portfolio Tender Card */
			.portfolio-tender-card {
				margin: 0 20px 12px;
				background: #fff;
				border-radius: 16px;
				overflow: hidden;
				border: 1px solid rgba(0, 0, 0, 0.08);
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 4px 12px -4px rgba(0, 0, 0, 0.25);
				cursor: pointer;
			}
			.portfolio-tender-card:active {
				background: var(--gray-50);
			}
			.portfolio-tender-img {
				height: 100px;
				background: linear-gradient(
					135deg,
					var(--primary) 0%,
					var(--accent) 100%
				);
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.portfolio-tender-img span {
				font-size: 14px;
				font-weight: 600;
				color: rgba(255, 255, 255, 0.6);
				text-align: center;
			}
			.portfolio-tender-body {
				padding: 14px 16px;
			}
			.portfolio-tender-body h4 {
				font-size: 14px;
				font-weight: 600;
				color: var(--gray-800);
				margin-bottom: 6px;
			}
			.portfolio-tender-row {
				display: flex;
				gap: 6px;
				align-items: center;
				font-size: 12px;
				color: var(--gray-500);
				margin-bottom: 4px;
			}
			.portfolio-tender-actions {
				display: flex;
				gap: 8px;
				margin-top: 8px;
			}

			/* Watchlist collapsed state */
			.watchlist-collapsed .price-list,
			.watchlist-collapsed .price-card-detailed {
				display: none;
			}

			/* ========== DARK MODE OVERRIDES ========== */
			[data-theme="dark"] .phone-frame {
				background: var(--gray-100);
			}
			[data-theme="dark"] .app-header {
				background: var(--gray-100);
				border-color: var(--gray-200);
			}
			[data-theme="dark"] .bottom-nav {
				background: var(--gray-100);
				border-color: var(--gray-200);
			}
			[data-theme="dark"] .sidebar {
				background: var(--gray-100);
			}
			[data-theme="dark"] .tabs {
				background: var(--gray-100);
			}
			[data-theme="dark"] .sub-tabs {
				background: var(--gray-100);
			}
			[data-theme="dark"] .filter-row {
				background: var(--gray-100);
			}
			[data-theme="dark"] .markets-grid {
				background: var(--gray-100);
			}
			[data-theme="dark"] .features-grid {
				background: var(--gray-100);
			}
			[data-theme="dark"] .news-card {
				background: var(--gray-100);
			}
			[data-theme="dark"] .news-card:active {
				background: var(--gray-200);
			}
			[data-theme="dark"] .price-card {
				background: var(--gray-100);
			}
			[data-theme="dark"] .price-card-detailed {
				background: var(--gray-100);
			}
			[data-theme="dark"] .price-card-expand-data {
				background: var(--gray-50);
				border-bottom-color: var(--gray-200);
			}
			[data-theme="dark"] .price-expand-stat span {
				color: var(--gray-800);
			}
			[data-theme="dark"] .mover-card {
				background: var(--gray-100);
			}
			[data-theme="dark"] .event-card {
				background: var(--gray-100);
			}
			[data-theme="dark"] .report-card {
				background: var(--gray-100);
			}
			[data-theme="dark"] .tender-card {
				background: var(--gray-100);
			}
			[data-theme="dark"] .tender-home-card {
				background: var(--gray-100);
			}
			[data-theme="dark"] .video-card {
				background: var(--gray-100);
			}
			[data-theme="dark"] .stats-category-list {
				background: var(--gray-100);
			}
			[data-theme="dark"] .stats-infographic-card {
				background: var(--gray-100);
			}
			[data-theme="dark"] .recently-viewed-item {
				background: var(--gray-100);
			}
			[data-theme="dark"] .price-list-item {
				background: var(--gray-100);
			}
			[data-theme="dark"] .watchlist-header {
				background: var(--gray-100);
			}
			[data-theme="dark"] .portfolio-actions-bar {
				background: var(--gray-100);
			}
			[data-theme="dark"] .portfolio-search-results {
				background: var(--gray-100);
			}
			[data-theme="dark"] .parent-child-wrapper {
				background: var(--gray-100);
			}
			[data-theme="dark"] .parent-child-cities .price-card-detailed {
				background: var(--gray-100);
			}
			[data-theme="dark"] .industry-snapshot {
				background: var(--gray-100);
			}
			[data-theme="dark"] .snapshot-rail {
				background: var(--gray-200);
			}
			[data-theme="dark"] .pulse-rail-item.active {
				background: var(--gray-100);
			}
			[data-theme="dark"] .search-panel {
				background: var(--gray-100);
			}
			[data-theme="dark"] .search-panel-header {
				background: var(--gray-100);
			}
			[data-theme="dark"] .search-tabs {
				background: var(--gray-100);
			}
			[data-theme="dark"] .search-result-card {
				background: var(--gray-100);
			}
			[data-theme="dark"] .sr-tender-card {
				background: var(--gray-100);
			}
			[data-theme="dark"] .sr-event-card {
				background: var(--gray-100);
			}
			[data-theme="dark"] .notif-panel-header {
				background: var(--gray-100);
			}
			[data-theme="dark"] .notif-item {
				background: var(--gray-100);
			}
			[data-theme="dark"] .filter-chip {
				background: var(--gray-200);
			}
			[data-theme="dark"] .filter-chip.has-value {
				background: #1e3a5f;
				border-color: var(--primary);
			}
			[data-theme="dark"] .filter-dropdown-sheet {
				background: var(--gray-100);
				border: 1px solid var(--gray-200);
			}
			[data-theme="dark"] .fdd-option.selected .fdd-option-label {
				color: var(--primary);
			}
			[data-theme="dark"] .share-sheet {
				background: var(--gray-100);
			}
			[data-theme="dark"] .create-wl-modal {
				background: var(--gray-100);
			}
			[data-theme="dark"] .create-wl-input {
				background: var(--gray-200);
				border-color: var(--gray-300);
				color: var(--gray-900);
			}
			[data-theme="dark"] .sidebar-user {
				border-bottom-color: var(--gray-200);
			}
			[data-theme="dark"] .sidebar-nav-item:active {
				background: var(--gray-200);
			}
			[data-theme="dark"] .badge-dom {
				background: var(--gray-200);
				color: var(--gray-600);
			}
			[data-theme="dark"] .badge-imp {
				background: var(--gray-200);
				color: var(--gray-600);
			}
			[data-theme="dark"] .badge-exp {
				background: var(--gray-200);
				color: var(--gray-600);
			}
			[data-theme="dark"] .news-gating-cta {
				background: var(--gray-100);
				border-color: var(--gray-200);
			}
			[data-theme="dark"] .subscribe-overlay .subscribe-sheet {
				background: var(--gray-100);
			}
			[data-theme="dark"] .plan-card {
				border-color: var(--gray-300);
			}
			[data-theme="dark"] .plan-card.selected {
				border-color: var(--primary);
				background: #1e293b;
			}

			/* ========== MOBILE RESPONSIVE - Fullscreen Mode ========== */
			@media screen and (max-width: 500px) {
				html {
					overflow: hidden;
					overscroll-behavior: none;
					height: 100dvh;
				}
				body {
					overflow: hidden;
					overscroll-behavior: none;
					padding: 0 !important;
					height: 100dvh;
					margin: 0;
				}
				.phone-frame {
					width: 100%;
					height: 100dvh;
					border-radius: 0;
					box-shadow: none;
				}
				.screen-container {
					height: 100dvh;
					padding-top: 72px;
					padding-bottom: 88px;
				}

				.sidebar {
					border-radius: 24px 24px 0 0;
					max-height: 80%;
				}
			}

			/* Tablets and small desktop - keep phone frame but adjust */
			@media screen and (min-width: 501px) and (max-width: 900px) {
				body {
					padding: 10px;
				}

				.phone-frame {
					max-height: 95vh;
				}
			}
			/* Events Top Bar */
			.events-top-bar {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				gap: 8px;
				padding: 8px 16px;
				background: #fff;
			}

			.events-toggle {
				display: flex;
				background: var(--gray-100);
				border-radius: 8px;
				padding: 3px;
				flex-shrink: 0;
			}

			.events-toggle-btn {
				padding: 6px 14px;
				font-size: 12px;
				font-weight: 500;
				color: var(--gray-500);
				border-radius: 6px;
				cursor: pointer;
			}

			.events-toggle-btn.active {
				background: var(--primary);
				color: #fff;
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
			}
			.events-type-tabs {
				display: flex;
				width: 100%;
				border-bottom: 1px solid var(--gray-200);
				background: #fff;
			}
			.events-type-tab {
				flex: 1;
				text-align: center;
				padding: 8px 0;
				font-size: 13px;
				font-weight: 500;
				color: var(--gray-500);
				cursor: pointer;
				border-bottom: 2px solid transparent;
			}
			.events-type-tab.active {
				color: var(--primary);
				border-bottom-color: var(--primary);
				font-weight: 600;
			}
			.events-filters {
				display: flex;
				gap: 8px;
				flex: 1;
				justify-content: flex-end;
			}
			.evt-dropdown-wrapper {
				background: #fff;
				padding: 0 16px;
			}
			.evt-dropdown {
				background: #fff;
				border: 1px solid var(--gray-200);
				border-radius: 12px;
				padding: 6px 0;
				box-shadow: 0 4px 16px rgba(0,0,0,0.08);
			}
			.evt-dd-item {
				padding: 10px 16px;
				font-size: 13px;
				font-weight: 500;
				color: var(--gray-700);
				cursor: pointer;
			}
			.evt-dd-item:hover {
				background: var(--gray-50);
			}
			.evt-dd-item.active {
				background: var(--primary-light);
				color: #fff;
			}
			.filter-chip.active-filter {
				background: var(--primary);
				color: #fff;
				border-color: var(--primary);
			}
			.filter-chip.active-filter svg {
				color: rgba(255, 255, 255, 0.7);
			}

			/* Market Detail Page */
			.market-detail-features {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 12px;
				padding: 16px 20px;
				background: var(--gray-50);
			}

			.market-feature-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 8px;
				cursor: pointer;
				background: #fff;
				border-radius: 16px;
				padding: 16px 8px 12px;
				border: 1px solid var(--gray-100);
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
				transition: transform 0.2s;
			}
			.market-feature-item:active {
				transform: scale(0.96);
			}

			.market-feature-icon {
				width: 48px;
				height: 48px;
				border-radius: 8px;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: transform 0.2s;
			}

			.market-feature-icon svg {
				width: 22px;
				height: 22px;
			}

			.market-feature-label {
				font-size: 11px;
				font-weight: 500;
				color: var(--gray-600);
				text-align: center;
			}

			.market-methodology-link {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 4px;
				padding: 8px 20px 16px;
				background: #fff;
				font-size: 13px;
				font-weight: 600;
				color: var(--accent);
				cursor: pointer;
			}

			.market-methodology-link:hover {
				text-decoration: underline;
			}

			.commodity-chips-section {
				padding: 16px 20px;
				background: #fff;
				margin-top: 8px;
			}

			.commodity-chips-title {
				font-size: 14px;
				font-weight: 600;
				color: var(--gray-800);
				margin-bottom: 12px;
			}

			.commodity-chips {
				display: flex;
				gap: 12px;
				overflow-x: auto;
				scrollbar-width: none;
				-ms-overflow-style: none;
				padding-bottom: 4px;
			}

			.commodity-chips::-webkit-scrollbar {
				display: none;
			}

			.commodity-image-card {
				flex-shrink: 0;
				width: 130px;
				height: 100px;
				border-radius: 16px;
				overflow: hidden;
				position: relative;
				cursor: pointer;
				transition: transform 0.2s;
			}

			.commodity-image-card img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.commodity-image-card .commodity-img-bg {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.commodity-image-card .commodity-img-bg svg {
				width: 36px;
				height: 36px;
				opacity: 0.3;
			}

			.commodity-image-card .commodity-card-label {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				padding: 8px 6px;
				background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
				color: #fff;
				font-size: 12px;
				font-weight: 600;
				text-align: center;
				line-height: 1.2;
			}

			.regional-trends-section {
				padding: 16px 20px;
				background: #fff;
				margin-top: 8px;
			}

			.regional-trends-title {
				font-size: 14px;
				font-weight: 600;
				color: var(--gray-800);
				margin-bottom: 12px;
			}

			.regional-trends-grid {
				display: flex;
				gap: 12px;
				overflow-x: auto;
				scrollbar-width: none;
				-ms-overflow-style: none;
				padding-bottom: 4px;
			}

			.regional-trends-grid::-webkit-scrollbar {
				display: none;
			}

			.regional-trend-card {
				flex-shrink: 0;
				width: 100px;
				height: 100px;
				border-radius: 16px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 8px;
				cursor: pointer;
				transition: transform 0.2s;
				position: relative;
				overflow: hidden;
			}

			.regional-trend-card .country-flag {
				width: 40px;
				height: 40px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20px;
				font-weight: 700;
				color: #fff;
				background: rgba(255, 255, 255, 0.25);
			}

			.regional-trend-card .country-code {
				font-size: 14px;
				font-weight: 700;
				color: #fff;
			}

			/* ========================================
           OVERFLOW FIXES — Global safeguards
           ======================================== */
			.video-grid {
				overflow: hidden;
			}
			.video-card {
				min-width: 0;
			}
			.event-info-item span {
				min-width: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.price-card-flag {
				min-width: 0;
			}
			.price-card-header {
				min-width: 0;
			}
			.screen {
				/* overflow-x intentionally omitted — screen-container handles clipping;
				   setting overflow here breaks position:sticky on tabs/filter-row */
			}

			/* ========================================
           PROFESSIONAL ANIMATIONS & INTERACTIONS
           ======================================== */

			/* Smooth button press — universal for all buttons */
			.section-link,
			.filter-tab,
			.market-filter-tab,
			.tab,
			.sub-tab,
			.nav-item,
			.book-now-btn,
			.event-book-btn,
			.subscribe-btn,
			.notif-mark-all,
			.sidebar-close,
			.header-icon,
			.back-button,
			.share-option {
				transition:
					transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94),
					opacity 0.15s ease;
				will-change: transform;
			}

			.header-icon:active {
				opacity: 0.7;
			}

			/* Nav item tap — smooth lift */
			.nav-item {
				transition:
					transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94),
					color 0.2s ease;
			}
			/* Filter/Tab chips — smooth color transition */

			/* Cards — subtle press with shadow shift */
			.mover-card,
			.event-card,
			.news-card,
			.tender-home-card,
			.recently-viewed-item,
			.announcement-banner {
				transition:
					transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94),
					box-shadow 0.18s ease;
			}

			.event-card:active {
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
			}

			/* Price card — refined press with shadow */
			.price-card {
				transition:
					transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94),
					box-shadow 0.18s ease;
			}
			.price-card:active {
				box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
			}

			/* Feature tiles — spring bounce on tap */
			.feature-tile {
				transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
			}
			/* Market tiles — smooth pulse */
			.market-tile {
				transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
			}
			/* Industry card — smooth shrink */
			.industry-card {
				transition:
					transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94),
					opacity 0.18s ease;
			}
			.industry-card:active {
				opacity: 0.85;
				transform: scale(0.97);
			}

			/* Report cards — tilt effect */
			.report-cover-card {
				transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
			}
			/* Video cards — press down */
			.video-card {
				transition: transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
			}
			/* Sidebar items — smooth highlight */
			.sidebar-menu-item {
				transition:
					background 0.15s ease,
					transform 0.12s ease;
			}
			.sidebar-menu-item:active {
				transform: translateX(3px);
			}

			.sidebar-drill-item {
				transition:
					background 0.15s ease,
					transform 0.12s ease;
			}
			.sidebar-drill-item:active {
				transform: translateX(2px);
			}

			.sidebar-drill-leaf {
				transition:
					background 0.15s ease,
					transform 0.12s ease;
			}
			.sidebar-drill-leaf:active {
				transform: translateX(4px);
			}

			/* Tender collection cards */
			.tender-collection {
				transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
			}
			/* Notification items — slide highlight */
			.notif-item {
				transition:
					background 0.15s ease,
					transform 0.12s ease;
			}
			.notif-item:active {
				transform: translateX(2px);
				background: var(--gray-100);
			}

			/* Search chips — bounce tap */
			.search-chip {
				transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
			}
			/* Smooth panel transitions */
			.sidebar {
				transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
			}
			.search-panel {
				transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
			}
			.notif-panel {
				transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
			}

			/* Infographic coverflow — smooth slide */
			.infographic-card {
				transition:
					transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
					opacity 0.2s ease;
			}
			.infographic-card:active {
				opacity: 0.85;
			}

			/* Smooth scroll-snap for carousels that benefit from it */
			.features-grid {
				scroll-snap-type: x proximity;
				scroll-behavior: smooth;
			}
			.feature-tile {
				scroll-snap-align: start;
			}