/**
 * Gosu AI Report Styles - Redesign v2
 *
 * Modern card layout with collapsible sections, trading signals grid,
 * colored financial metrics, and border-left news cards.
 * TradingView Lightweight Charts integration.
 *
 * @package HelloElementorChild
 * @since 2.0.8
 */

/* ============================================================================
   Design Tokens (Tailwind-inspired CSS Variables)
   ============================================================================ */

:root {
	/* Primary Colors - Blue */
	--gosu-blue-50: #eff6ff;
	--gosu-blue-100: #dbeafe;
	--gosu-blue-200: #bfdbfe;
	--gosu-blue-300: #93c5fd;
	--gosu-blue-400: #60a5fa;
	--gosu-blue-500: #3b82f6;
	--gosu-blue-600: #2563eb;
	--gosu-blue-700: #1d4ed8;
	--gosu-blue-800: #1e40af;
	--gosu-blue-900: #1e3a8a;

	/* Success Colors - Green */
	--gosu-green-50: #f0fdf4;
	--gosu-green-100: #dcfce7;
	--gosu-green-200: #bbf7d0;
	--gosu-green-300: #86efac;
	--gosu-green-400: #4ade80;
	--gosu-green-500: #22c55e;
	--gosu-green-600: #16a34a;
	--gosu-green-700: #15803d;

	/* Danger Colors - Red */
	--gosu-red-50: #fef2f2;
	--gosu-red-100: #fee2e2;
	--gosu-red-200: #fecaca;
	--gosu-red-300: #fca5a5;
	--gosu-red-400: #f87171;
	--gosu-red-500: #ef4444;
	--gosu-red-600: #dc2626;
	--gosu-red-700: #b91c1c;

	/* Purple */
	--gosu-purple-50: #faf5ff;
	--gosu-purple-100: #f3e8ff;
	--gosu-purple-200: #e9d5ff;
	--gosu-purple-300: #d8b4fe;
	--gosu-purple-400: #c084fc;
	--gosu-purple-500: #a855f7;
	--gosu-purple-600: #9333ea;
	--gosu-purple-700: #7c3aed;

	/* Orange */
	--gosu-orange-50: #fff7ed;
	--gosu-orange-100: #ffedd5;
	--gosu-orange-200: #fed7aa;
	--gosu-orange-300: #fdba74;
	--gosu-orange-400: #fb923c;
	--gosu-orange-500: #f97316;
	--gosu-orange-600: #ea580c;

	/* Cyan */
	--gosu-cyan-50: #ecfeff;
	--gosu-cyan-100: #cffafe;
	--gosu-cyan-200: #a5f3fc;
	--gosu-cyan-300: #67e8f9;
	--gosu-cyan-400: #22d3ee;
	--gosu-cyan-500: #06b6d4;
	--gosu-cyan-600: #0891b2;
	--gosu-cyan-700: #0e7490;

	/* Indigo */
	--gosu-indigo-50: #eef2ff;
	--gosu-indigo-100: #e0e7ff;
	--gosu-indigo-200: #c7d2fe;
	--gosu-indigo-300: #a5b4fc;
	--gosu-indigo-400: #818cf8;
	--gosu-indigo-500: #6366f1;
	--gosu-indigo-700: #4338ca;
	--gosu-indigo-900: #312e81;

	/* Grays */
	--gosu-gray-50: #f9fafb;
	--gosu-gray-100: #f3f4f6;
	--gosu-gray-200: #e5e7eb;
	--gosu-gray-300: #d1d5db;
	--gosu-gray-400: #9ca3af;
	--gosu-gray-500: #6b7280;
	--gosu-gray-600: #4b5563;
	--gosu-gray-700: #374151;
	--gosu-gray-800: #1f2937;
	--gosu-gray-900: #111827;

	/* Shadows */
	--gosu-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--gosu-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--gosu-shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

	/* Spacing */
	--gosu-spacing-1: 0.25rem;
	--gosu-spacing-2: 0.5rem;
	--gosu-spacing-3: 0.75rem;
	--gosu-spacing-4: 1rem;
	--gosu-spacing-5: 1.25rem;
	--gosu-spacing-6: 1.5rem;
	--gosu-spacing-8: 2rem;
	--gosu-spacing-10: 2.5rem;
	--gosu-spacing-12: 3rem;

	/* Border radius */
	--gosu-radius-sm: 0.25rem;
	--gosu-radius: 0.375rem;
	--gosu-radius-md: 0.5rem;
	--gosu-radius-lg: 0.75rem;
	--gosu-radius-xl: 1rem;

	/* Container */
	--gosu-container-max: 1280px;

	/* Typography */
	--gosu-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--gosu-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Monaco, Consolas, monospace;
}

/* ============================================================================
   Hidden Attribute Support
   ============================================================================ */

.gosu-ai-report-page [hidden] {
	display: none !important;
}

/* ============================================================================
   Page Base
   ============================================================================ */

.gosu-ai-report-page {
	background: var(--gosu-gray-50);
	min-height: 60vh;
	padding: var(--gosu-spacing-6) var(--gosu-spacing-4);
	font-family: var(--gosu-font-sans);
	color: var(--gosu-gray-900);
	line-height: 1.6;
}

.gosu-ai-report-page * {
	box-sizing: border-box;
}

.gosu-ai-report-page .gosu-container {
	max-width: var(--gosu-container-max);
	margin: 0 auto;
}

/* ============================================================================
   Header Section
   ============================================================================ */

.gosu-report-header {
	text-align: center;
	margin-bottom: var(--gosu-spacing-6);
}

.gosu-report-header-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gosu-spacing-2);
	margin-bottom: var(--gosu-spacing-2);
	clear: both;
}

.gosu-report-header-icon svg {
	width: 2rem;
	height: 2rem;
	color: var(--gosu-purple-500);
}

.gosu-report-title {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--gosu-gray-900);
	margin: 0;
}

.gosu-report-subtitle {
	color: var(--gosu-gray-600);
	font-size: 0.875rem;
	margin-top: var(--gosu-spacing-2);
}

.gosu-back-link {
	display: inline-flex;
	align-items: center;
	gap: var(--gosu-spacing-1);
	color: var(--gosu-gray-500) !important;
	text-decoration: none !important;
	font-size: 0.875rem;
	margin-bottom: var(--gosu-spacing-4);
	transition: color 0.15s ease;
	float: left;
}

.gosu-back-link:hover {
	color: var(--gosu-blue-600) !important;
}

/* ============================================================================
   Card Component
   ============================================================================ */

.gosu-card {
	background: white;
	border: 1px solid var(--gosu-gray-200);
	border-radius: var(--gosu-radius-lg);
	padding: var(--gosu-spacing-6);
	box-shadow: var(--gosu-shadow-sm);
	margin-bottom: var(--gosu-spacing-6);
}

.gosu-card.gosu-card-highlight {
	border: 2px solid var(--gosu-blue-300);
}

.gosu-card.gosu-hero-card {
	border: 2px solid var(--gosu-blue-200);
}

.gosu-card-header {
	display: flex;
	align-items: center;
	gap: var(--gosu-spacing-2);
	margin-bottom: var(--gosu-spacing-4);
}

.gosu-card-header svg {
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
}

.gosu-card-header h3 {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--gosu-gray-900);
	margin: 0;
}

/* Card header with badge on right (for technical analysis trend badge) */
.gosu-card-header-with-badge {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--gosu-spacing-4);
	margin-bottom: var(--gosu-spacing-4);
}

.gosu-card-header-left {
	flex: 1;
}

.gosu-card-header-left .gosu-card-header {
	margin-bottom: var(--gosu-spacing-2);
}

.gosu-card-description {
	font-size: 0.875rem;
	color: var(--gosu-gray-600);
	line-height: 1.6;
}

/* ============================================================================
   Hero Card (Merged Company + Conclusion)
   ============================================================================ */

.gosu-hero-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--gosu-spacing-4);
	margin-bottom: var(--gosu-spacing-4);
}

.gosu-hero-company {
	flex: 1;
}

.gosu-hero-company-icon {
	display: flex;
	align-items: center;
	gap: var(--gosu-spacing-3);
	margin-bottom: var(--gosu-spacing-2);
}

.gosu-hero-company-icon svg {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--gosu-blue-500);
	flex-shrink: 0;
}

.gosu-hero-name {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--gosu-gray-900);
	margin: 0 0 var(--gosu-spacing-1);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gosu-spacing-2);
}

.gosu-hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gosu-spacing-2);
	margin-bottom: var(--gosu-spacing-2);
}

.gosu-hero-sector {
	font-size: 0.875rem;
	color: var(--gosu-gray-500);
	margin-bottom: var(--gosu-spacing-2);
}

.gosu-hero-mcap {
	font-size: 0.875rem;
	color: var(--gosu-gray-600);
}

.gosu-hero-mcap strong {
	font-weight: 500;
}

.gosu-hero-desc {
	color: var(--gosu-gray-700);
	line-height: 1.7;
}

/* Rating Box */
.gosu-rating-box {
	text-align: center;
	padding: var(--gosu-spacing-3) var(--gosu-spacing-4);
	border-radius: var(--gosu-radius-lg);
	border: 2px solid;
	flex-shrink: 0;
}

.gosu-rating-box .gosu-rating-label {
	font-size: 0.75rem;
	font-weight: 500;
	margin-bottom: var(--gosu-spacing-1);
}

.gosu-rating-box .gosu-rating-value {
	font-size: 1.5rem;
	font-weight: 700;
	text-transform: uppercase;
}

/* Rating color variants */
.gosu-rating-buy {
	background: var(--gosu-green-50);
	border-color: var(--gosu-green-200);
	color: var(--gosu-green-600);
}

.gosu-rating-hold {
	background: var(--gosu-blue-50);
	border-color: var(--gosu-blue-200);
	color: var(--gosu-blue-600);
}

.gosu-rating-sell {
	background: var(--gosu-red-50);
	border-color: var(--gosu-red-200);
	color: var(--gosu-red-600);
}

.gosu-rating-default {
	background: var(--gosu-gray-100);
	border-color: var(--gosu-gray-300);
	color: var(--gosu-gray-600);
}

/* Conclusion Box */
.gosu-conclusion-box {
	padding: var(--gosu-spacing-4);
	background: var(--gosu-blue-50);
	border-radius: var(--gosu-radius-lg);
	margin-bottom: var(--gosu-spacing-4);
}

.gosu-conclusion-box-header {
	display: flex;
	align-items: center;
	gap: var(--gosu-spacing-2);
	margin-bottom: var(--gosu-spacing-3);
	font-weight: 600;
}

.gosu-conclusion-box-header svg {
	width: 1rem;
	height: 1rem;
}

.gosu-conclusion-text {
	font-size: 1rem;
	color: var(--gosu-gray-700);
	line-height: 1.7;
	margin-bottom: var(--gosu-spacing-3);
}

.gosu-conclusion-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gosu-spacing-4);
	margin-top: var(--gosu-spacing-3);
}

.gosu-conclusion-grid-item {
	text-align: center;
	background: white;
	border-radius: var(--gosu-radius);
	padding: var(--gosu-spacing-3);
}

.gosu-conclusion-grid-item .label {
	font-size: 0.75rem;
	color: var(--gosu-gray-500);
	margin-bottom: var(--gosu-spacing-1);
}

.gosu-conclusion-grid-item .value {
	font-size: 1rem;
	font-weight: 600;
	color: var(--gosu-gray-900);
}

.gosu-conclusion-grid-item .value.text-primary {
	color: var(--gosu-blue-600);
}

.gosu-conclusion-grid-item .sub-value {
	font-size: 0.75rem;
	color: var(--gosu-green-600);
}

/* Key Points Grid */
.gosu-key-points-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gosu-spacing-2);
}

.gosu-key-points-grid .gosu-key-point {
	display: flex;
	align-items: flex-start;
	gap: var(--gosu-spacing-2);
	font-size: 0.875rem;
	color: var(--gosu-gray-700);
}

.gosu-key-points-grid .gosu-key-point svg {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--gosu-blue-500);
	flex-shrink: 0;
	margin-top: 0.125rem;
}

/* Verdict Box (retained from old) */
.gosu-verdict-box {
	padding: var(--gosu-spacing-4);
	background: var(--gosu-gray-100);
	border-radius: var(--gosu-radius-lg);
	margin-top: var(--gosu-spacing-4);
}

.gosu-verdict-box p {
	margin: 0;
	font-weight: 500;
	color: var(--gosu-gray-800);
}

/* ============================================================================
   Badge Component
   ============================================================================ */

.gosu-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	border-radius: var(--gosu-radius);
	white-space: nowrap;
}

.gosu-badge-primary {
	background: var(--gosu-blue-100);
	color: var(--gosu-blue-700);
}

.gosu-badge-secondary {
	background: var(--gosu-gray-200);
	color: var(--gosu-gray-700);
}

.gosu-badge-success {
	background: var(--gosu-green-100);
	color: var(--gosu-green-700);
}

.gosu-badge-danger {
	background: var(--gosu-red-100);
	color: var(--gosu-red-700);
}

.gosu-badge-purple {
	background: var(--gosu-purple-100);
	color: var(--gosu-purple-700);
}

.gosu-badge-orange {
	background: var(--gosu-orange-100);
	color: var(--gosu-orange-600);
}

/* Outline badge variant */
.gosu-badge-outline {
	background: transparent;
	border: 1px solid var(--gosu-gray-300);
	color: var(--gosu-gray-700);
}

/* Rating badges */
.gosu-badge-strong-buy {
	background: var(--gosu-green-600);
	color: white;
}

.gosu-badge-buy {
	background: var(--gosu-green-400);
	color: white;
}

.gosu-badge-hold,
.gosu-badge-neutral {
	background: var(--gosu-gray-400);
	color: white;
}

.gosu-badge-sell {
	background: var(--gosu-red-400);
	color: white;
}

.gosu-badge-strong-sell {
	background: var(--gosu-red-600);
	color: white;
}

.gosu-badge-lg {
	padding: 0.25rem 0.75rem;
	font-size: 0.875rem;
	font-weight: 600;
	border-radius: 9999px;
}

/* ============================================================================
   Button Component
   ============================================================================ */

.gosu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gosu-spacing-2);
	padding: 0.625rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	border-radius: var(--gosu-radius);
	border: none;
	cursor: pointer;
	transition: all 0.15s ease;
	text-decoration: none !important;
}

.gosu-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.gosu-btn svg {
	width: 1.25rem;
	height: 1.25rem;
}

.gosu-btn-primary {
	background: var(--gosu-blue-600) !important;
	color: white !important;
}

.gosu-btn-primary:hover:not(:disabled) {
	background: var(--gosu-blue-700) !important;
}

.gosu-btn-secondary {
	background: var(--gosu-gray-200) !important;
	color: var(--gosu-gray-700) !important;
}

.gosu-btn-secondary:hover:not(:disabled) {
	background: var(--gosu-gray-300) !important;
}

.gosu-btn-danger {
	background: var(--gosu-red-600) !important;
	color: white !important;
}

.gosu-btn-danger:hover:not(:disabled) {
	background: var(--gosu-red-700) !important;
}

/* ============================================================================
   Collapsible Component
   ============================================================================ */

.gosu-collapsible-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gosu-spacing-2);
	padding: var(--gosu-spacing-3);
	margin-top: var(--gosu-spacing-4);
	background: transparent !important;
	border: 1px solid var(--gosu-gray-200);
	border-radius: var(--gosu-radius);
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--gosu-gray-600) !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.gosu-collapsible-trigger:hover {
	background: var(--gosu-gray-50) !important;
	color: var(--gosu-gray-800) !important;
}

.gosu-collapsible-trigger svg {
	width: 1rem;
	height: 1rem;
	transition: transform 0.3s ease;
}

.gosu-collapsible-open .gosu-collapsible-trigger svg {
	transform: rotate(180deg);
}

.gosu-collapsible-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
}

.gosu-collapsible-open .gosu-collapsible-content {
	max-height: 5000px;
	transition: max-height 0.5s ease-in;
}

/* ============================================================================
   Trading Signals Grid
   ============================================================================ */

.gosu-signals-container {
	padding: var(--gosu-spacing-4);
	background: var(--gosu-purple-50);
	border-radius: var(--gosu-radius-lg);
	margin-bottom: var(--gosu-spacing-4);
}

.gosu-signals-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--gosu-spacing-3);
}

.gosu-signals-header h3 {
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--gosu-spacing-2);
}

.gosu-signals-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gosu-spacing-3);
}

@media (min-width: 768px) {
	.gosu-signals-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.gosu-signal-cell {
	background: white;
	padding: var(--gosu-spacing-3);
	border-radius: var(--gosu-radius);
	text-align: center;
}

.gosu-signal-cell .label {
	font-size: 0.75rem;
	color: var(--gosu-gray-500);
	margin-bottom: var(--gosu-spacing-1);
}

.gosu-signal-cell .value {
	font-size: 1.125rem;
	font-weight: 600;
}

.gosu-signal-cell .value.text-red {
	color: var(--gosu-red-600);
}

.gosu-signal-cell .value.text-green {
	color: var(--gosu-green-600);
}

.gosu-signals-action {
	margin-top: var(--gosu-spacing-3);
	font-size: 0.875rem;
	color: var(--gosu-gray-700);
	line-height: 1.6;
}

/* ============================================================================
   Financial Metrics Grid
   ============================================================================ */

.gosu-metrics-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gosu-spacing-3);
	margin-bottom: var(--gosu-spacing-4);
}

@media (min-width: 768px) {
	.gosu-metrics-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.gosu-metric-card {
	padding: var(--gosu-spacing-3);
	border-radius: var(--gosu-radius-lg);
	border: 1px solid;
}

.gosu-metric-card .label {
	font-size: 0.75rem;
	font-weight: 500;
}

.gosu-metric-card .value {
	font-size: 1.25rem;
	font-weight: 700;
	margin-top: var(--gosu-spacing-1);
}

.gosu-metric-card.green {
	background: var(--gosu-green-50);
	border-color: var(--gosu-green-200);
}

.gosu-metric-card.green .label {
	color: var(--gosu-green-600);
}

.gosu-metric-card.green .value {
	color: var(--gosu-green-700);
}

.gosu-metric-card.blue {
	background: var(--gosu-blue-50);
	border-color: var(--gosu-blue-200);
}

.gosu-metric-card.blue .label {
	color: var(--gosu-blue-600);
}

.gosu-metric-card.blue .value {
	color: var(--gosu-blue-700);
}

/* ============================================================================
   Grid Layouts
   ============================================================================ */

.gosu-grid-2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gosu-spacing-4);
}

.gosu-grid-3 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gosu-spacing-4);
}

.gosu-grid-4 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gosu-spacing-4);
}

@media (min-width: 768px) {
	.gosu-grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.gosu-grid-3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.gosu-grid-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 1024px) {
	.gosu-grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ============================================================================
   Technical Analysis Section
   ============================================================================ */

.gosu-tech-summary {
	padding: var(--gosu-spacing-4);
	background: var(--gosu-purple-50);
	border-radius: var(--gosu-radius-lg);
	margin-bottom: var(--gosu-spacing-4);
}

.gosu-tech-summary p {
	margin: 0;
	color: var(--gosu-gray-700);
}

.gosu-trend-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gosu-spacing-4);
	margin-bottom: var(--gosu-spacing-6);
}

@media (min-width: 768px) {
	.gosu-trend-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.gosu-trend-box {
	padding: var(--gosu-spacing-4);
	background: var(--gosu-gray-50);
	border-radius: var(--gosu-radius-lg);
}

.gosu-trend-box h4 {
	display: flex;
	align-items: center;
	gap: var(--gosu-spacing-2);
	font-size: 1rem;
	font-weight: 600;
	color: var(--gosu-gray-800);
	margin: 0 0 var(--gosu-spacing-3);
}

.gosu-trend-box h4 svg {
	width: 1.25rem;
	height: 1.25rem;
}

.gosu-trend-box p {
	font-size: 0.875rem;
	color: var(--gosu-gray-700);
	margin: 0 0 var(--gosu-spacing-1);
}

.gosu-trend-box p span.font-medium {
	font-weight: 500;
}

.gosu-trend-up {
	color: var(--gosu-green-600);
}

.gosu-trend-down {
	color: var(--gosu-red-600);
}

.gosu-trend-neutral {
	color: var(--gosu-gray-600);
}

/* Trend badge (for card header right side) */
.gosu-trend-badge {
	text-align: center;
	padding: var(--gosu-spacing-3) var(--gosu-spacing-4);
	border-radius: var(--gosu-radius-lg);
	border: 2px solid;
	flex-shrink: 0;
}

.gosu-trend-badge .gosu-trend-badge-label {
	font-size: 0.75rem;
	font-weight: 500;
	margin-bottom: var(--gosu-spacing-1);
}

.gosu-trend-badge .gosu-trend-badge-value {
	font-size: 1.5rem;
	font-weight: 700;
}

.gosu-trend-badge-up {
	background: var(--gosu-green-50);
	border-color: var(--gosu-green-200);
	color: var(--gosu-green-600);
}

.gosu-trend-badge-down {
	background: var(--gosu-red-50);
	border-color: var(--gosu-red-200);
	color: var(--gosu-red-600);
}

.gosu-trend-badge-neutral {
	background: var(--gosu-blue-50);
	border-color: var(--gosu-blue-200);
	color: var(--gosu-blue-600);
}

/* Technical Indicators Grid */
.gosu-indicators-section {
	padding: var(--gosu-spacing-4);
	background: var(--gosu-purple-50);
	border-radius: var(--gosu-radius-lg);
	margin-top: var(--gosu-spacing-4);
}

.gosu-indicators-section h4 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--gosu-purple-700);
	margin: 0 0 var(--gosu-spacing-3);
}

.gosu-indicators-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gosu-spacing-4);
}

@media (min-width: 768px) {
	.gosu-indicators-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.gosu-indicators-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.gosu-indicator-card {
	padding: var(--gosu-spacing-3);
	background: var(--gosu-indigo-50);
	border-radius: var(--gosu-radius);
	font-size: 0.875rem;
}

.gosu-indicator-card p {
	margin: 0 0 var(--gosu-spacing-1);
}

.gosu-indicator-card p:first-child {
	font-weight: 500;
	margin-bottom: var(--gosu-spacing-2);
}

.gosu-indicator-card .indicator-name {
	font-size: 0.875rem;
	color: var(--gosu-gray-500);
	margin-bottom: var(--gosu-spacing-1);
}

.gosu-indicator-card .indicator-value {
	font-size: 1.125rem;
	font-weight: 600;
	margin-bottom: var(--gosu-spacing-1);
}

.gosu-indicator-card .indicator-detail {
	font-size: 0.75rem;
	color: var(--gosu-gray-500);
}

/* Volume Analysis */
.gosu-volume-section {
	padding: var(--gosu-spacing-4);
	background: var(--gosu-cyan-50);
	border-radius: var(--gosu-radius-lg);
	margin-top: var(--gosu-spacing-4);
}

.gosu-volume-section h4 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--gosu-cyan-700);
	margin: 0 0 var(--gosu-spacing-3);
}

.gosu-volume-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gosu-spacing-4);
}

@media (min-width: 768px) {
	.gosu-volume-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.gosu-volume-grid p {
	font-size: 0.875rem;
	margin: 0 0 var(--gosu-spacing-2);
}

/* Support/Resistance */
.gosu-sr-section {
	padding: var(--gosu-spacing-4);
	background: var(--gosu-gray-50);
	border-radius: var(--gosu-radius-lg);
	margin-top: var(--gosu-spacing-4);
}

.gosu-sr-section h4 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--gosu-gray-700);
	margin: 0 0 var(--gosu-spacing-3);
}

.gosu-sr-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gosu-spacing-4);
}

@media (min-width: 768px) {
	.gosu-sr-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.gosu-sr-title {
	font-weight: 500;
	margin-bottom: var(--gosu-spacing-2);
}

.gosu-sr-support .gosu-sr-title {
	color: var(--gosu-green-600);
}

.gosu-sr-resistance .gosu-sr-title {
	color: var(--gosu-red-600);
}

.gosu-sr-level {
	padding: var(--gosu-spacing-2);
	border-radius: var(--gosu-radius);
	margin-bottom: var(--gosu-spacing-2);
	border-left: 4px solid;
}

.gosu-sr-support .gosu-sr-level {
	background: var(--gosu-green-50);
	border-color: var(--gosu-green-500);
}

.gosu-sr-resistance .gosu-sr-level {
	background: var(--gosu-red-50);
	border-color: var(--gosu-red-500);
}

.gosu-sr-level p {
	margin: 0;
	font-size: 0.875rem;
}

.gosu-sr-level .price {
	font-weight: 500;
}

.gosu-sr-level .significance {
	font-size: 0.75rem;
	color: var(--gosu-gray-600);
}

/* Support/Resistance side-by-side cards (reference design style) */
.gosu-sr-card {
	padding: var(--gosu-spacing-4);
	border-radius: var(--gosu-radius-lg);
	border: 1px solid;
}

.gosu-sr-card-support {
	background: var(--gosu-green-50);
	border-color: var(--gosu-green-200);
}

.gosu-sr-card-support h4 {
	font-weight: 600;
	font-size: 1rem;
	color: var(--gosu-green-700);
	margin: 0 0 var(--gosu-spacing-2);
}

.gosu-sr-card-support .sr-row {
	display: flex;
	justify-content: space-between;
	font-size: 0.875rem;
	margin-bottom: var(--gosu-spacing-1);
}

.gosu-sr-card-support .sr-row .price {
	color: var(--gosu-green-700);
}

.gosu-sr-card-support .sr-row .significance {
	font-size: 0.875rem;
	color: var(--gosu-green-600);
}

.gosu-sr-card-resistance {
	background: var(--gosu-red-50);
	border-color: var(--gosu-red-200);
}

.gosu-sr-card-resistance h4 {
	font-weight: 600;
	font-size: 1rem;
	color: var(--gosu-red-700);
	margin: 0 0 var(--gosu-spacing-2);
}

.gosu-sr-card-resistance .sr-row {
	display: flex;
	justify-content: space-between;
	font-size: 0.875rem;
	margin-bottom: var(--gosu-spacing-1);
}

.gosu-sr-card-resistance .sr-row .price {
	color: var(--gosu-red-700);
}

.gosu-sr-card-resistance .sr-row .significance {
	font-size: 0.875rem;
	color: var(--gosu-red-600);
}

/* Quant Factors */
.gosu-quant-section {
	padding: var(--gosu-spacing-4);
	background: var(--gosu-indigo-50);
	border-radius: var(--gosu-radius-lg);
	margin-top: var(--gosu-spacing-4);
}

.gosu-quant-section h4 {
	display: flex;
	align-items: center;
	gap: var(--gosu-spacing-2);
	font-size: 1rem;
	font-weight: 600;
	color: var(--gosu-indigo-700);
	margin: 0 0 var(--gosu-spacing-3);
}

.gosu-quant-section h4 svg {
	width: 1rem;
	height: 1rem;
}

.gosu-quant-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gosu-spacing-4);
}

@media (min-width: 768px) {
	.gosu-quant-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.gosu-quant-card {
	padding: var(--gosu-spacing-3);
	border-radius: var(--gosu-radius);
}

.gosu-quant-card h5 {
	font-size: 0.875rem;
	font-weight: 500;
	margin: 0 0 var(--gosu-spacing-2);
}

.gosu-quant-card.momentum {
	background: var(--gosu-indigo-100);
}

.gosu-quant-card.momentum h5 {
	color: var(--gosu-indigo-700);
}

.gosu-quant-card.volatility {
	background: var(--gosu-purple-100);
}

.gosu-quant-card.volatility h5 {
	color: var(--gosu-purple-700);
}

.gosu-quant-card.volume {
	background: var(--gosu-cyan-100);
}

.gosu-quant-card.volume h5 {
	color: var(--gosu-cyan-700);
}

.gosu-quant-card.growth {
	background: var(--gosu-green-100);
}

.gosu-quant-card.growth h5 {
	color: var(--gosu-green-700);
}

.gosu-quant-card.profitability {
	background: var(--gosu-blue-100);
}

.gosu-quant-card.profitability h5 {
	color: var(--gosu-blue-700);
}

.gosu-quant-card.cashflow {
	background: var(--gosu-orange-100);
}

.gosu-quant-card.cashflow h5 {
	color: var(--gosu-orange-600);
}

.gosu-quant-row {
	display: flex;
	justify-content: space-between;
	gap: var(--gosu-spacing-2);
	font-size: 0.75rem;
	margin-bottom: var(--gosu-spacing-1);
}

.gosu-quant-row span:first-child {
	color: var(--gosu-gray-600);
}

.gosu-quant-row span:last-child {
	font-weight: 500;
	color: var(--gosu-gray-800);
}

/* Advanced Analysis */
.gosu-advanced-section {
	border-top: 1px solid var(--gosu-gray-200);
	padding-top: var(--gosu-spacing-6);
	margin-top: var(--gosu-spacing-6);
}

.gosu-advanced-section h4 {
	display: flex;
	align-items: center;
	gap: var(--gosu-spacing-2);
	font-size: 1rem;
	font-weight: 600;
	color: var(--gosu-gray-800);
	margin: 0 0 var(--gosu-spacing-4);
}

.gosu-advanced-section h4 svg {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--gosu-indigo-500);
}

.gosu-advanced-summary {
	padding: var(--gosu-spacing-4);
	background: var(--gosu-indigo-50);
	border-radius: var(--gosu-radius-lg);
	margin-bottom: var(--gosu-spacing-4);
}

.gosu-advanced-summary p {
	margin: 0;
	color: var(--gosu-gray-700);
}

.gosu-strategy-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gosu-spacing-4);
	margin-bottom: var(--gosu-spacing-4);
}

@media (min-width: 768px) {
	.gosu-strategy-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.gosu-strategy-card {
	padding: var(--gosu-spacing-4);
	background: var(--gosu-gray-50);
	border-radius: var(--gosu-radius-lg);
}

.gosu-strategy-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--gosu-spacing-2);
}

.gosu-strategy-card p {
	font-size: 0.875rem;
	color: var(--gosu-gray-600);
	margin: 0 0 var(--gosu-spacing-1);
}

.gosu-scenario-conclusion {
	padding: var(--gosu-spacing-4);
	background: var(--gosu-gray-100);
	border-radius: var(--gosu-radius-lg);
}

.gosu-scenario-header {
	display: flex;
	align-items: center;
	gap: var(--gosu-spacing-3);
	margin-bottom: var(--gosu-spacing-2);
}

.gosu-scenario-header span {
	font-weight: 600;
	color: var(--gosu-gray-800);
}

.gosu-scenario-conclusion p {
	margin: 0;
	color: var(--gosu-gray-700);
}

/* ============================================================================
   Financials Section
   ============================================================================ */

.gosu-financials-table {
	overflow-x: auto;
	margin-bottom: var(--gosu-spacing-4);
}

.gosu-financials-table table {
	width: 100%;
	font-size: 0.875rem;
	border-collapse: collapse;
}

.gosu-financials-table th,
.gosu-financials-table td {
	padding: var(--gosu-spacing-2);
	text-align: right;
}

.gosu-financials-table th:first-child,
.gosu-financials-table td:first-child {
	text-align: left;
}

.gosu-financials-table thead tr {
	background: var(--gosu-gray-100);
}

.gosu-financials-table th {
	font-weight: 600;
	color: var(--gosu-gray-700);
}

.gosu-financials-table tbody tr {
	border-bottom: 1px solid var(--gosu-gray-200);
}

.gosu-financials-table tbody tr:hover {
	background: var(--gosu-blue-50);
}

.gosu-financials-table td {
	color: var(--gosu-gray-700);
}

.gosu-financials-table td:first-child {
	font-weight: 500;
}

.gosu-yoy-box {
	padding: var(--gosu-spacing-4);
	background: var(--gosu-green-50);
	border-radius: var(--gosu-radius-lg);
}

.gosu-yoy-box h4 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--gosu-green-700);
	margin: 0 0 var(--gosu-spacing-2);
}

.gosu-yoy-box p {
	font-size: 0.875rem;
	margin: 0 0 var(--gosu-spacing-1);
}

.gosu-valuation-box {
	padding: var(--gosu-spacing-4);
	background: var(--gosu-blue-50);
	border-radius: var(--gosu-radius-lg);
}

.gosu-valuation-box h4 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--gosu-blue-700);
	margin: 0 0 var(--gosu-spacing-2);
}

.gosu-valuation-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gosu-spacing-2);
}

.gosu-valuation-grid p {
	font-size: 0.875rem;
	margin: 0;
}

.gosu-financials-disclosures {
	font-size: 0.875rem;
	margin-top: var(--gosu-spacing-4);
}

.gosu-financials-summary {
	font-size: 0.875rem;
	color: var(--gosu-gray-600);
	line-height: 1.6;
}

.gosu-financials-summary p {
	margin-bottom: var(--gosu-spacing-2);
}

.gosu-financials-summary strong {
	font-weight: 600;
}

.gosu-financials-summary ol,
.gosu-financials-summary ul {
	padding-left: var(--gosu-spacing-6);
	margin-top: var(--gosu-spacing-2);
}

.gosu-financials-summary li {
	margin-bottom: var(--gosu-spacing-2);
}

/* Financial detail collapsible content */
.gosu-financial-detail-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gosu-spacing-3);
	background: var(--gosu-gray-50);
	border-radius: var(--gosu-radius-lg);
	padding: var(--gosu-spacing-4);
}

@media (min-width: 768px) {
	.gosu-financial-detail-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.gosu-financial-detail-grid .detail-item .label {
	font-size: 0.875rem;
	color: var(--gosu-gray-500);
	margin-bottom: var(--gosu-spacing-1);
}

.gosu-financial-detail-grid .detail-item .value {
	font-weight: 600;
	font-size: 1rem;
}

.gosu-financial-summary-box {
	margin-top: var(--gosu-spacing-4);
	background: var(--gosu-gray-50);
	border-radius: var(--gosu-radius-lg);
	padding: var(--gosu-spacing-4);
}

.gosu-financial-summary-box p {
	font-size: 0.875rem;
	color: var(--gosu-gray-700);
	line-height: 1.7;
	margin: 0;
}

/* ============================================================================
   Market Conditions Section
   ============================================================================ */

.gosu-macro-box {
	padding: var(--gosu-spacing-4);
	background: var(--gosu-orange-50);
	border-radius: var(--gosu-radius-lg);
	margin-bottom: var(--gosu-spacing-6);
}

.gosu-macro-box h4 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--gosu-orange-700);
	margin: 0 0 var(--gosu-spacing-3);
}

.gosu-macro-box > div {
	font-size: 0.875rem;
	color: var(--gosu-gray-700);
	margin-bottom: var(--gosu-spacing-2);
}

.gosu-sector-box {
	padding: var(--gosu-spacing-4);
	background: var(--gosu-purple-50);
	border-radius: var(--gosu-radius-lg);
	margin-bottom: var(--gosu-spacing-6);
}

.gosu-sector-box h4 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--gosu-purple-700);
	margin: 0 0 var(--gosu-spacing-3);
}

.gosu-sector-box p {
	font-size: 0.875rem;
	margin: 0 0 var(--gosu-spacing-2);
}

.gosu-sector-drivers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gosu-spacing-2);
	margin-top: var(--gosu-spacing-2);
}

.gosu-outlook-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gosu-spacing-4);
	margin-bottom: var(--gosu-spacing-6);
}

@media (min-width: 768px) {
	.gosu-outlook-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.gosu-outlook-card {
	padding: var(--gosu-spacing-4);
	border-radius: var(--gosu-radius-lg);
	border: 1px solid;
}

.gosu-outlook-card h4 {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 var(--gosu-spacing-2);
}

.gosu-outlook-card p {
	font-size: 0.875rem;
	color: var(--gosu-gray-700);
	margin: 0;
	line-height: 1.6;
}

.gosu-outlook-short {
	background: var(--gosu-blue-50);
	border-color: var(--gosu-blue-200);
}

.gosu-outlook-short h4 {
	color: var(--gosu-blue-700);
}

.gosu-outlook-mid {
	background: var(--gosu-purple-50);
	border-color: var(--gosu-purple-200);
}

.gosu-outlook-mid h4 {
	color: var(--gosu-purple-700);
}

.gosu-outlook-long {
	background: var(--gosu-green-50);
	border-color: var(--gosu-green-200);
}

.gosu-outlook-long h4 {
	color: var(--gosu-green-700);
}

.gosu-risks-opportunities {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gosu-spacing-4);
}

@media (min-width: 768px) {
	.gosu-risks-opportunities {
		grid-template-columns: repeat(2, 1fr);
	}
}

.gosu-risk-box,
.gosu-opportunity-box {
	padding: var(--gosu-spacing-4);
	border-radius: var(--gosu-radius-lg);
	border: 1px solid;
}

.gosu-risk-box {
	background: var(--gosu-red-50);
	border-color: var(--gosu-red-200);
}

.gosu-opportunity-box {
	background: var(--gosu-green-50);
	border-color: var(--gosu-green-200);
}

.gosu-risk-box .box-header,
.gosu-opportunity-box .box-header {
	display: flex;
	align-items: center;
	gap: var(--gosu-spacing-2);
	margin-bottom: var(--gosu-spacing-3);
}

.gosu-risk-box .box-header svg {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--gosu-red-500);
}

.gosu-opportunity-box .box-header svg {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--gosu-green-500);
}

.gosu-risk-box h4 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--gosu-red-700);
	margin: 0;
}

.gosu-opportunity-box h4 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--gosu-green-700);
	margin: 0;
}

.gosu-risk-box ul,
.gosu-opportunity-box ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.gosu-risk-box li,
.gosu-opportunity-box li {
	display: flex;
	align-items: flex-start;
	gap: var(--gosu-spacing-2);
	font-size: 0.875rem;
	color: var(--gosu-gray-700);
	margin-bottom: var(--gosu-spacing-2);
}

.gosu-risk-box li span:first-child {
	color: var(--gosu-red-500);
}

.gosu-opportunity-box li span:first-child {
	color: var(--gosu-green-500);
}

/* Market detail collapsible content */
.gosu-market-detail-box {
	padding: var(--gosu-spacing-4);
	background: var(--gosu-gray-50);
	border-radius: var(--gosu-radius-lg);
	margin-bottom: var(--gosu-spacing-3);
}

.gosu-market-detail-box h4 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--gosu-gray-800);
	margin: 0 0 var(--gosu-spacing-2);
}

.gosu-market-detail-box p {
	font-size: 0.875rem;
	color: var(--gosu-gray-700);
	line-height: 1.7;
	margin: 0;
}

/* ============================================================================
   News Section (Border-Left Cards)
   ============================================================================ */

.gosu-news-header {
	display: flex;
	align-items: center;
	gap: var(--gosu-spacing-2);
}

.gosu-news-list {
	display: flex;
	flex-direction: column;
	gap: var(--gosu-spacing-3);
}

.gosu-news-item {
	padding: var(--gosu-spacing-3) var(--gosu-spacing-4);
	border-left: 3px solid var(--gosu-blue-400);
	border-radius: 0 var(--gosu-radius) var(--gosu-radius) 0;
	background: white;
	transition: background-color 0.15s ease;
}

.gosu-news-item:hover {
	background: var(--gosu-blue-50);
}

.gosu-news-item-title {
	font-weight: 500;
	color: var(--gosu-gray-900);
	font-size: 0.9375rem;
	margin-bottom: var(--gosu-spacing-1);
}

.gosu-news-item-meta {
	font-size: 0.75rem;
	color: var(--gosu-gray-400);
	margin-bottom: var(--gosu-spacing-2);
}

.gosu-news-item-body {
	font-size: 0.875rem;
	color: var(--gosu-gray-600);
	margin-bottom: var(--gosu-spacing-2);
	line-height: 1.6;
}

.gosu-news-item-link {
	display: inline-flex;
	align-items: center;
	gap: var(--gosu-spacing-1);
	font-size: 0.875rem;
	color: var(--gosu-blue-500) !important;
	text-decoration: none !important;
}

.gosu-news-item-link:hover {
	color: var(--gosu-blue-700) !important;
	text-decoration: underline !important;
}

.gosu-news-item-link svg {
	width: 0.75rem;
	height: 0.75rem;
}

/* ============================================================================
   Loading State
   ============================================================================ */

.gosu-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--gosu-spacing-12) var(--gosu-spacing-6);
	color: var(--gosu-gray-500);
}

.gosu-spinner {
	width: 3rem;
	height: 3rem;
	border: 4px solid var(--gosu-gray-200);
	border-top-color: var(--gosu-purple-500);
	border-radius: 50%;
	animation: gosu-spin 1s linear infinite;
	margin-bottom: var(--gosu-spacing-4);
}

@keyframes gosu-spin {
	to {
		transform: rotate(360deg);
	}
}

.gosu-loading-text {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--gosu-gray-700);
	margin-bottom: var(--gosu-spacing-2);
}

.gosu-loading-subtext {
	font-size: 0.875rem;
	color: var(--gosu-gray-500);
}

/* ============================================================================
   Rate Limit State
   ============================================================================ */

.gosu-ratelimit {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--gosu-spacing-12) var(--gosu-spacing-6);
	text-align: center;
}

.gosu-ratelimit-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--gosu-gray-900);
	margin: 0 0 var(--gosu-spacing-2);
}

.gosu-ratelimit-desc {
	font-size: 0.875rem;
	color: var(--gosu-gray-500);
	margin: 0 0 var(--gosu-spacing-6);
}

.gosu-ratelimit-actions {
	display: flex;
	gap: var(--gosu-spacing-3);
	justify-content: center;
}

/* ============================================================================
   Alert Component
   ============================================================================ */

.gosu-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--gosu-spacing-3);
	padding: var(--gosu-spacing-4);
	border-radius: var(--gosu-radius);
	margin-bottom: var(--gosu-spacing-6);
}

.gosu-alert svg {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	margin-top: 0.125rem;
}

.gosu-alert-error {
	background: var(--gosu-red-50);
	border: 1px solid var(--gosu-red-200);
	color: var(--gosu-red-700);
}

.gosu-alert-error svg {
	color: var(--gosu-red-500);
}

.gosu-alert-info {
	background: var(--gosu-blue-50);
	border: 1px solid var(--gosu-blue-200);
	color: var(--gosu-blue-700);
}

/* ============================================================================
   Initial State
   ============================================================================ */

.gosu-initial-state {
	text-align: center;
	padding: var(--gosu-spacing-12) var(--gosu-spacing-6);
}

.gosu-initial-state svg {
	width: 4rem;
	height: 4rem;
	color: var(--gosu-gray-300);
	margin-bottom: var(--gosu-spacing-4);
}

.gosu-initial-state h3 {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--gosu-gray-700);
	margin: 0 0 var(--gosu-spacing-2);
}

.gosu-initial-state p {
	color: var(--gosu-gray-500);
	font-size: 0.875rem;
	max-width: 28rem;
	margin: 0 auto;
}

/* ============================================================================
   Input Component
   ============================================================================ */

.gosu-input {
	width: 100%;
	padding: 0.625rem 1rem;
	font-size: 0.875rem;
	border: 1px solid var(--gosu-gray-300);
	border-radius: var(--gosu-radius);
	background: white;
	color: var(--gosu-gray-900);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gosu-input:focus {
	outline: none;
	border-color: var(--gosu-blue-500);
	box-shadow: 0 0 0 3px var(--gosu-blue-100);
}

.gosu-input:disabled {
	background: var(--gosu-gray-100);
	cursor: not-allowed;
}

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

/* ============================================================================
   Search Section
   ============================================================================ */

.gosu-search-section {
	display: flex;
	flex-direction: column;
	gap: var(--gosu-spacing-4);
}

@media (min-width: 768px) {
	.gosu-search-section {
		flex-direction: row;
	}
}

.gosu-search-input-wrapper {
	flex: 1;
}

.gosu-search-buttons {
	display: flex;
	gap: var(--gosu-spacing-2);
	flex-shrink: 0;
}

/* ============================================================================
   Footer Section
   ============================================================================ */

.gosu-report-footer {
	text-align: center;
	font-size: 0.875rem;
	color: var(--gosu-gray-500);
	padding-top: var(--gosu-spacing-6);
	margin-top: var(--gosu-spacing-6);
	border-top: 1px solid var(--gosu-gray-200);
}

.gosu-report-footer p {
	margin: 0 0 var(--gosu-spacing-2);
}

.gosu-report-footer .disclaimer {
	font-size: 0.75rem;
	color: var(--gosu-gray-400);
}

/* ============================================================================
   Chart Section
   ============================================================================ */

.gosu-chart-container {
	width: 100%;
	margin-bottom: var(--gosu-spacing-4);
}

.gosu-chart {
	width: 100%;
	border-radius: var(--gosu-radius-lg);
	overflow: hidden;
	border: 1px solid var(--gosu-gray-200);
}

.gosu-chart-legend {
	display: flex;
	gap: var(--gosu-spacing-3);
	padding: var(--gosu-spacing-2);
	font-size: 0.75rem;
	flex-wrap: wrap;
	justify-content: center;
}

.gosu-legend-item {
	padding: var(--gosu-spacing-1) var(--gosu-spacing-2);
	border-radius: var(--gosu-radius-sm);
	background: var(--gosu-gray-100);
}

.gosu-legend-ma5 {
	border-left: 3px solid #ff5252;
}

.gosu-legend-ma20 {
	border-left: 3px solid #2196f3;
}

.gosu-legend-ma60 {
	border-left: 3px solid #ff9800;
}

.gosu-legend-bb {
	border-left: 3px solid #9c27b0;
}

.gosu-legend-vol {
	border-left: 3px solid #78909c;
}

.gosu-legend-rsi {
	font-weight: 600;
}

.gosu-legend-rsi.overbought {
	color: var(--gosu-red-500);
	background: var(--gosu-red-50);
}

.gosu-legend-rsi.oversold {
	color: #26a69a;
	background: #e0f2f1;
}

/* ============================================================================
   Login Popup / Overlay
   ============================================================================ */

.gosu-login-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.gosu-login-modal {
	background: white;
	border-radius: var(--gosu-radius-xl);
	padding: var(--gosu-spacing-8);
	max-width: 24rem;
	width: 90%;
	text-align: center;
	box-shadow: var(--gosu-shadow-md);
}

.gosu-login-modal h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--gosu-gray-900);
	margin: 0 0 var(--gosu-spacing-2);
}

.gosu-login-modal p {
	font-size: 0.875rem;
	color: var(--gosu-gray-600);
	margin: 0 0 var(--gosu-spacing-6);
}

.gosu-login-modal-actions {
	display: flex;
	gap: var(--gosu-spacing-3);
	justify-content: center;
}

/* ============================================================================
   Company Overview Section (retained for backward compatibility)
   ============================================================================ */

.gosu-company-header {
	display: flex;
	align-items: flex-start;
	gap: var(--gosu-spacing-4);
	margin-bottom: var(--gosu-spacing-4);
}

.gosu-company-header svg {
	width: 2rem;
	height: 2rem;
	color: var(--gosu-blue-500);
	flex-shrink: 0;
}

.gosu-company-info {
	flex: 1;
}

.gosu-company-name {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--gosu-gray-900);
	margin: 0 0 var(--gosu-spacing-1);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gosu-spacing-2);
}

.gosu-company-sector {
	font-size: 0.875rem;
	color: var(--gosu-gray-500);
	margin-bottom: var(--gosu-spacing-2);
}

.gosu-company-mcap {
	font-size: 0.875rem;
	color: var(--gosu-gray-600);
}

.gosu-company-mcap strong {
	font-weight: 500;
}

.gosu-company-desc {
	color: var(--gosu-gray-700);
	line-height: 1.7;
}

/* ============================================================================
   Investment Conclusion Section (retained for backward compatibility)
   ============================================================================ */

.gosu-conclusion-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gosu-spacing-4);
	margin-bottom: var(--gosu-spacing-6);
}

.gosu-conclusion-badge-item {
	display: flex;
	align-items: center;
	gap: var(--gosu-spacing-2);
}

.gosu-conclusion-badge-label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--gosu-gray-600);
}

.gosu-conclusion-target {
	font-weight: 700;
	color: var(--gosu-blue-600);
}

.gosu-conclusion-upside {
	color: var(--gosu-green-600);
	font-size: 0.875rem;
}

.gosu-thesis-box {
	padding: var(--gosu-spacing-4);
	background: var(--gosu-blue-50);
	border-radius: var(--gosu-radius-lg);
	margin-bottom: var(--gosu-spacing-4);
}

.gosu-thesis-box p {
	margin: 0;
	color: var(--gosu-gray-700);
}

.gosu-key-points h4 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--gosu-gray-800);
	margin: 0 0 var(--gosu-spacing-2);
}

.gosu-key-points ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.gosu-key-points li {
	display: flex;
	align-items: flex-start;
	gap: var(--gosu-spacing-2);
	font-size: 0.875rem;
	color: var(--gosu-gray-700);
	margin-bottom: var(--gosu-spacing-2);
}

.gosu-key-points li svg {
	width: 1rem;
	height: 1rem;
	color: var(--gosu-blue-500);
	flex-shrink: 0;
	margin-top: 0.125rem;
}

.gosu-additional-info {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gosu-spacing-4);
	font-size: 0.875rem;
	color: var(--gosu-gray-600);
	margin-top: var(--gosu-spacing-4);
}

.gosu-additional-info strong {
	font-weight: 600;
}

/* ============================================================================
   Utility Classes
   ============================================================================ */

.text-red {
	color: var(--gosu-red-600);
}

.text-green {
	color: var(--gosu-green-600);
}

.text-blue {
	color: var(--gosu-blue-600);
}

.text-muted {
	color: var(--gosu-gray-500);
}

/* ============================================================================
   Responsive Styles
   ============================================================================ */

@media (max-width: 640px) {
	.gosu-ai-report-page {
		padding: var(--gosu-spacing-4) var(--gosu-spacing-3);
	}

	.gosu-card {
		padding: var(--gosu-spacing-4);
	}

	.gosu-hero-name {
		font-size: 1.25rem;
	}

	.gosu-hero-header {
		flex-direction: column;
	}

	.gosu-rating-box {
		align-self: flex-start;
	}

	.gosu-conclusion-grid {
		grid-template-columns: 1fr;
	}

	.gosu-key-points-grid {
		grid-template-columns: 1fr;
	}

	.gosu-signals-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.gosu-metrics-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.gosu-report-title {
		font-size: 1.5rem;
	}

	.gosu-company-name {
		font-size: 1.125rem;
	}

	.gosu-conclusion-badges {
		flex-direction: column;
		gap: var(--gosu-spacing-2);
	}

	.gosu-search-buttons {
		flex-direction: column;
		width: 100%;
	}

	.gosu-search-buttons .gosu-btn {
		width: 100%;
	}

	.gosu-card-header-with-badge {
		flex-direction: column;
	}

	.gosu-trend-badge {
		align-self: flex-start;
	}
}

@media (min-width: 1024px) {
	.gosu-ai-report-page {
		padding: var(--gosu-spacing-8) var(--gosu-spacing-6);
	}
}

/* ============================================================================
   Print Styles
   ============================================================================ */

@media print {
	.gosu-ai-report-page {
		background: white;
		padding: 0;
	}

	.gosu-card {
		box-shadow: none;
		border: 1px solid var(--gosu-gray-300);
		page-break-inside: avoid;
	}

	.gosu-back-link {
		display: none;
	}

	/* Expand all collapsible sections in print */
	.gosu-collapsible-content {
		max-height: none !important;
		overflow: visible !important;
	}

	.gosu-collapsible-trigger {
		display: none;
	}

	.gosu-login-overlay {
		display: none;
	}

	.gosu-search-section {
		display: none;
	}
}