/*
 * StockVirtual local presentation layer.
 *
 * The legacy templates use a small, stable subset of Tailwind utility names.  The
 * original Tailwind CDN is deliberately not loaded: preview and production retain
 * a restrictive CSP and must render without an external stylesheet dependency.
 */
:root {
	--sv-sky: #0ea5e9;
	--sv-sky-dark: #0369a1;
	--sv-sky-pale: #f0f9ff;
	--sv-page: #ecf1f3;
	--sv-surface: #ffffff;
	--sv-surface-muted: #f8fafc;
	--sv-ink: #1f2937;
	--sv-heading: #0f172a;
	--sv-copy: #475569;
	--sv-muted: #4b5563;
	--sv-border: #dbe4ea;
	--sv-sky-ink: #075985;
	--sv-brand: #0c4a6e;
	--sv-brand-accent: #0284c7;
	--sv-radius-panel: 12px;
	--sv-radius-card: 10px;
	--sv-shadow: 0 4px 12px rgba(15, 23, 42, .12);
}

body#phpbb {
	background: var(--sv-page);
	color: var(--sv-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", "Noto Sans TC", Arial, sans-serif;
}

#wrap,
.wrap {
	box-sizing: border-box;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

#page-header {
	margin: 16px 0 0;
}

.sv-brand-header {
	background: linear-gradient(135deg, var(--sv-brand), var(--sv-brand-accent));
	border-radius: var(--sv-radius-panel) var(--sv-radius-panel) 0 0;
	box-shadow: var(--sv-shadow);
	color: #fff;
}

/* The clean phpBB 3.3 release does not contain StockVirtual's legacy
 * common.css chart rule. Keep the local portfolio renderer visible without
 * replacing an upstream stylesheet. */
.holding_stock_chart {
	width: 100%;
	max-width: 600px;
	height: 400px;
}

.sv-brand-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 76px;
	padding: 14px 22px;
}

.sv-brand-header__identity {
	display: flex;
	align-items: baseline;
	gap: 12px;
	min-width: 0;
}

.sv-wordmark {
	color: #fff;
	font-size: 29px;
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}
.sv-wordmark:hover,
.sv-wordmark:focus { color: #fff; text-decoration: none; }
.sv-wordmark__stock { color: #e0f2fe; }
.sv-wordmark__virtual { color: #fff; }
.sv-brand-header__tagline { color: #dbeafe; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-header-search { margin-left: auto; }
.sv-header-search form { margin: 0; }
.sv-header-search fieldset { border: 0; margin: 0; padding: 0; }
.sv-header-search input { width: 170px; }
.sv-brand-header .skiplink { margin: 0; }

#page-header .navbar {
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-top: 0;
	border-radius: 0 0 var(--sv-radius-panel) var(--sv-radius-panel);
	box-shadow: var(--sv-shadow);
}
#page-header .navbar .inner { padding: 0 14px; }
#page-header #nav-main,
#page-header #nav-breadcrumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1px 4px;
	margin: 0;
	padding: 6px 0;
}
#page-header #nav-main { border-bottom: 1px solid #e8eef3; }
#page-header #nav-main li,
#page-header #nav-breadcrumbs li { margin: 0; }
#page-header #nav-main h4 { margin: 0; font-size: 14px; font-weight: 700; }
#page-header #nav-main a,
#page-header #nav-breadcrumbs a {
	border-radius: 7px;
	color: #075985;
	display: inline-block;
	padding: 8px 9px;
	text-decoration: none;
}
#page-header #nav-main a:hover,
#page-header #nav-main a:focus,
#page-header #nav-breadcrumbs a:hover,
#page-header #nav-breadcrumbs a:focus { background: #e0f2fe; color: #0c4a6e; }
#page-header #nav-main .rightside,
#page-header #nav-breadcrumbs .rightside { margin-left: auto; }
#page-header #nav-main .rightside + .rightside,
#page-header #nav-breadcrumbs .rightside + .rightside { margin-left: 0; }
#page-header #nav-breadcrumbs { color: #4b5563; font-size: 13px; }
#page-header #nav-breadcrumbs .breadcrumbs a { padding-left: 0; }

#page-body { margin-top: 20px; }
#page-footer {
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-panel);
	box-shadow: var(--sv-shadow);
	box-sizing: border-box;
	margin: 24px 0 16px;
	padding: 12px 16px 16px;
}
#page-footer .navbar {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--sv-border);
	border-radius: 0;
	margin: 0 0 12px;
	padding: 0 0 10px;
}
#page-footer .navbar .inner { padding: 0; }
#page-footer .navbar a,
#page-footer .copyright a { color: var(--sv-sky-ink); }
#page-footer .navbar a:hover,
#page-footer .navbar a:focus,
#page-footer .copyright a:hover,
#page-footer .copyright a:focus { color: var(--sv-sky-dark); }
#page-footer .copyright { color: var(--sv-copy); padding: 4px 0 0; font-size: 12.5px; line-height: 1.6; }
#page-footer .copyright p { margin: 6px 0 0; }
#page-footer .sv-footer-social-row { margin: 0 0 12px; }
#page-footer .sv-footer-social-label { font-weight: 600; }

/* Portfolio holdings are shared by the homepage and member profile. The
 * profile previously fell back to a compact phpBB 3.1 panel, beside the
 * current StockVirtual cards. Keep data, charts and position actions intact
 * while giving the non-homepage version the same visual hierarchy. */
#page-body .sv-portfolio-panel {
	background: var(--sv-surface);
	border: 0;
	border-radius: var(--sv-radius-panel);
	box-shadow: var(--sv-shadow);
	margin: 0 0 24px;
	overflow: hidden;
	padding: 0;
}
#page-body .sv-portfolio-panel__header {
	background: var(--sv-sky);
	box-sizing: border-box;
	color: #fff;
	margin: 0;
	padding: 16px 24px;
}
#page-body .sv-portfolio-panel__header h2 {
	border: 0;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	margin: 0;
	padding: 0;
}
#page-body .sv-portfolio-panel .table_holding {
	border-collapse: collapse;
	box-sizing: border-box;
	margin: 20px 24px;
	width: calc(100% - 48px);
}
#page-body .sv-portfolio-panel .table_holding th,
#page-body .sv-portfolio-panel .table_holding td {
	border-bottom: 1px solid #e5e7eb;
	color: #334155;
	padding: 10px 12px;
	vertical-align: middle;
}
#page-body .sv-portfolio-panel .table_holding th,
#page-body .sv-portfolio-panel .table_holding tr:first-child td {
	background: #f0f9ff;
	color: #075985;
	font-weight: 700;
}
#page-body .sv-portfolio-panel .table_holding p { margin: 0; }
#page-body .sv-portfolio-panel .sv-portfolio-summary td:nth-child(odd) { color: #475569; font-weight: 600; }
#page-body .sv-portfolio-panel .sv-portfolio-table tr:hover td { background: #f8fafc; }
#page-body .sv-portfolio-panel .holding_stock_chart { margin: 0 auto 20px; }

/* Forum content keeps phpBB's markup while using the StockVirtual blue family.
 * UCP, login and registration are outside this page-only scope. */
body.section-index #page-body .headerbar,
body.section-forumindex #page-body .headerbar,
body.section-viewforum #page-body .headerbar,
body.section-viewtopic #page-body .headerbar,
body.section-search #page-body .headerbar {
	background-color: var(--sv-sky-dark);
	background-image: none;
	border-radius: var(--sv-radius-panel);
	box-shadow: var(--sv-shadow);
	color: var(--sv-surface);
}
body.section-index #page-body .forabg,
body.section-forumindex #page-body .forabg,
body.section-viewforum #page-body .forabg,
body.section-viewtopic #page-body .forabg,
body.section-search #page-body .forabg {
	background-color: var(--sv-sky-dark);
	background-image: none;
	border-radius: var(--sv-radius-panel);
	box-shadow: var(--sv-shadow);
}
body.section-index #page-body .forumbg,
body.section-forumindex #page-body .forumbg,
body.section-viewforum #page-body .forumbg,
body.section-viewtopic #page-body .forumbg,
body.section-search #page-body .forumbg {
	background-color: var(--sv-sky);
	background-image: none;
	border-radius: var(--sv-radius-panel);
	box-shadow: var(--sv-shadow);
}
body.section-index #page-body .panel,
body.section-forumindex #page-body .panel,
body.section-viewforum #page-body .panel,
body.section-viewtopic #page-body .panel,
body.section-search #page-body .panel {
	background-color: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-card);
	box-shadow: var(--sv-shadow);
	color: var(--sv-ink);
}
body.section-index #page-body .panel h2,
body.section-forumindex #page-body .panel h2,
body.section-viewforum #page-body .panel h2,
body.section-viewtopic #page-body .panel h2,
body.section-search #page-body .panel h2 {
	border-bottom-color: var(--sv-border);
	color: var(--sv-sky-ink);
}

/* Local compatibility for the utility classes present in StockVirtual's maintained templates. */
#page-body .bg-\[\#ECF1F3\] { background-color: var(--sv-page); }
#page-body .bg-white, #page-footer .bg-white { background-color: var(--sv-surface); }
#page-body .bg-sky-50 { background-color: #f0f9ff; }
#page-body .bg-sky-500 { background-color: var(--sv-sky); }
#page-body .bg-slate-50 { background-color: #f8fafc; }
#page-body .bg-white\/15 { background-color: rgba(255,255,255,.15); }
#page-body .text-white { color: #fff; }
#page-body .text-gray-500 { color: #6b7280; }
#page-body .text-gray-600 { color: #4b5563; }
#page-body .text-gray-700 { color: #374151; }
#page-body .text-slate-400 { color: #94a3b8; }
#page-body .text-slate-500 { color: #64748b; }
#page-body .text-slate-600 { color: #475569; }
#page-body .text-slate-700 { color: #334155; }
#page-body .text-slate-800 { color: #1e293b; }
#page-body .text-slate-900 { color: #0f172a; }
#page-body .text-sky-100 { color: #e0f2fe; }
#page-body .text-sky-500 { color: var(--sv-sky); }
#page-body .text-sky-600, #page-footer .text-sky-600 { color: #0284c7; }
#page-body .text-sky-700 { color: #0369a1; }
#page-body .text-blue-600, #page-footer .text-blue-600 { color: #2563eb; }
#page-footer .text-pink-500 { color: #db2777; }
#page-footer .text-black { color: #111827; }
#page-body .text-xs { font-size: 12px; }
#page-body .text-sm { font-size: 14px; }
#page-body .text-base { font-size: 16px; }
#page-body .text-lg { font-size: 18px; }
#page-body .text-xl { font-size: 20px; }
#page-body .text-2xl { font-size: 24px; }
#page-body .text-3xl { font-size: 30px; }
#page-body .font-medium { font-weight: 500; }
#page-body .font-semibold { font-weight: 600; }
#page-body .font-bold { font-weight: 700; }
#page-body .font-extrabold { font-weight: 800; }
#page-body .text-center, #page-footer .text-center { text-align: center; }
#page-body .text-left { text-align: left; }
#page-body .text-right { text-align: right; }
#page-body .block { display: block; }
#page-body .inline-block { display: inline-block; }
#page-body .inline-flex { display: inline-flex; }
#page-body .flex, #page-footer .flex { display: flex; }
#page-body .flex-1 { flex: 1 1 0%; }
#page-body .flex-col { flex-direction: column; }
#page-body .flex-wrap, #page-footer .flex-wrap { flex-wrap: wrap; }
#page-body .items-center, #page-footer .items-center { align-items: center; }
#page-body .items-end { align-items: flex-end; }
#page-body .justify-between { justify-content: space-between; }
#page-footer .justify-center { justify-content: center; }
#page-body .grid { display: grid; }
#page-body .grid-cols-1 { grid-template-columns: minmax(0, 1fr); }
#page-body .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#page-body .gap-1 { gap: 4px; }
#page-body .gap-2, #page-footer .gap-2 { gap: 8px; }
#page-body .gap-4, #page-footer .gap-4 { gap: 16px; }
#page-body .gap-6 { gap: 24px; }
#page-body .w-full { width: 100%; box-sizing: border-box; }
#page-body .w-28 { width: 7rem; }
#page-body .w-32 { width: 8rem; }
#page-body .w-40 { width: 10rem; }
#page-body .h-4 { height: 1rem; }
#page-body .w-4 { width: 1rem; }
#page-body .min-h-screen { min-height: 65vh; }
#page-body .mx-auto { margin-left: auto; margin-right: auto; }
#page-body .mt-0\.5 { margin-top: 2px; }
#page-body .mt-1 { margin-top: 4px; }
#page-body .mt-2 { margin-top: 8px; }
#page-body .mt-3 { margin-top: 12px; }
#page-body .mt-4 { margin-top: 16px; }
#page-body .mb-1 { margin-bottom: 4px; }
#page-body .mb-2 { margin-bottom: 8px; }
#page-body .mb-4, #page-footer .mb-4 { margin-bottom: 16px; }
#page-body .mb-5 { margin-bottom: 20px; }
#page-body .mb-6, #page-footer .mb-6 { margin-bottom: 24px; }
#page-body .my-5 { margin-bottom: 20px; margin-top: 20px; }
#page-body .mx-2 { margin-left: 8px; margin-right: 8px; }
#page-body .-mt-6 { margin-top: -24px; }
#page-body .-mx-6 { margin-left: -24px; margin-right: -24px; }
#page-body .p-1 { padding: 4px; }
#page-body .p-2 { padding: 8px; }
#page-body .p-3 { padding: 12px; }
#page-body .p-4, #page-footer .p-4 { padding: 16px; }
#page-body .p-5 { padding: 20px; }
#page-body .p-6 { padding: 24px; }
#page-body .px-1 { padding-left: 4px; padding-right: 4px; }
#page-body .px-2 { padding-left: 8px; padding-right: 8px; }
#page-body .px-3, #page-footer .px-3 { padding-left: 12px; padding-right: 12px; }
#page-body .px-4, #page-footer .px-4 { padding-left: 16px; padding-right: 16px; }
#page-body .py-1 { padding-bottom: 4px; padding-top: 4px; }
#page-body .py-2, #page-footer .py-2 { padding-bottom: 8px; padding-top: 8px; }
#page-body .py-3 { padding-bottom: 12px; padding-top: 12px; }
#page-body .py-4 { padding-bottom: 16px; padding-top: 16px; }
#page-body .py-6 { padding-bottom: 24px; padding-top: 24px; }
#page-body .rounded { border-radius: 4px; }
#page-body .rounded-lg, #page-footer .rounded-lg { border-radius: 10px; }
#page-body .rounded-t-lg { border-radius: 10px 10px 0 0; }
#page-body .rounded-full { border-radius: 999px; }
#page-body .shadow-md, #page-footer .shadow-md { box-shadow: var(--sv-shadow); }
#page-body .border, #page-footer .border { border: 1px solid var(--sv-border); }
#page-body .border-b { border-bottom: 1px solid var(--sv-border); }
#page-body .border-t { border-top: 1px solid var(--sv-border); }
#page-body .border-collapse { border-collapse: collapse; }
#page-body .border-sky-200 { border-color: #bae6fd; }
#page-body .border-sky-300 { border-color: #7dd3fc; }
#page-body .border-gray-100 { border-color: #f3f4f6; }
#page-body .border-gray-200 { border-color: #e5e7eb; }
#page-body .border-slate-100 { border-color: #f1f5f9; }
#page-body .border-slate-200 { border-color: #e2e8f0; }
#page-footer .border-blue-600 { border-color: #2563eb; }
#page-footer .border-pink-500 { border-color: #db2777; }
#page-footer .border-black { border-color: #111827; }
#page-body .overflow-x-auto { overflow-x: auto; }
#page-body .cursor-pointer { cursor: pointer; }
#page-body .transition { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
#page-body .hover\:bg-sky-50:hover { background-color: #f0f9ff; }
#page-body .hover\:bg-sky-100:hover { background-color: #e0f2fe; }
#page-body .hover\:bg-sky-600:hover { background-color: #0284c7; }
#page-body .hover\:text-white:hover { color: #fff; }
#page-body .hover\:text-sky-700:hover { color: #0369a1; }
#page-body .hover\:text-sky-800:hover { color: #075985; }
#page-body .hover\:underline:hover { text-decoration: underline; }
#page-body .hover\:border-sky-300:hover { border-color: #7dd3fc; }
#page-body input[type="text"], #page-body input[type="password"], #page-body input[type="email"], #page-body input[type="number"], #page-body select, #page-body textarea { box-sizing: border-box; }

/*
 * Additional local utility compatibility used by the maintained trading,
 * portfolio, delegation and activity templates.  These are deliberately
 * scoped to StockVirtual content instead of importing a framework globally.
 */
#page-body .container { box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: 100%; width: 100%; }
#page-body .bg-amber-50 { background-color: #fffbeb; }
#page-body .bg-emerald-50\/80 { background-color: rgba(236, 253, 245, .8); }
#page-body .bg-gray-500 { background-color: #6b7280; }
#page-body .bg-green-50 { background-color: #f0fdf4; }
#page-body .bg-green-600 { background-color: #16a34a; }
#page-body .bg-red-50 { background-color: #fef2f2; }
#page-body .bg-red-500 { background-color: #ef4444; }
#page-body .bg-red-600 { background-color: #dc2626; }
#page-body .bg-rose-50\/80 { background-color: rgba(255, 241, 242, .8); }
#page-body .bg-sky-50\/80 { background-color: rgba(240, 249, 255, .8); }
#page-body .bg-slate-50\/60 { background-color: rgba(248, 250, 252, .6); }
#page-body .bg-black { background-color: #000; }
#page-body .bg-opacity-30 { background-color: rgba(0, 0, 0, .3); }
#page-body .text-amber-600 { color: #d97706; }
#page-body .text-amber-700 { color: #b45309; }
#page-body .text-amber-800 { color: #92400e; }
#page-body .text-emerald-700 { color: #047857; }
#page-body .text-gray-400 { color: #9ca3af; }
#page-body .text-gray-800 { color: #1f2937; }
#page-body .text-green-600 { color: #16a34a; }
#page-body .text-green-800 { color: #166534; }
#page-body .text-red-500 { color: #ef4444; }
#page-body .text-red-600 { color: #dc2626; }
#page-body .text-red-700 { color: #b91c1c; }
#page-body .text-rose-700 { color: #be123c; }
#page-body .border-amber-200 { border-color: #fde68a; }
#page-body .border-emerald-100 { border-color: #d1fae5; }
#page-body .border-gray-300 { border-color: #d1d5db; }
#page-body .border-green-300 { border-color: #86efac; }
#page-body .border-red-200 { border-color: #fecaca; }
#page-body .border-rose-100 { border-color: #ffe4e6; }
#page-body .border-sky-100 { border-color: #e0f2fe; }
#page-body .border-sky-500 { border-color: #0ea5e9; }
#page-body .border-slate-300 { border-color: #cbd5e1; }
#page-body .border-dashed { border-style: dashed; }
#page-body .divide-y > :not([hidden]) ~ :not([hidden]) { border-top: 1px solid var(--sv-border); }
#page-body .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #f3f4f6; }
#page-body .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #f1f5f9; }
#page-body .focus\:outline-none:focus { outline: 0; }
#page-body .focus\:ring-1:focus { box-shadow: 0 0 0 1px rgba(14, 165, 233, .5); }
#page-body .focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(14, 165, 233, .5); }
#page-body .focus\:ring-sky-500:focus { --sv-focus-ring: #0ea5e9; }
#page-body .gap-3 { gap: 12px; }
#page-body .gap-x-5 { column-gap: 20px; }
#page-body .gap-y-2 { row-gap: 8px; }
#page-body .space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 8px; }
#page-body .space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 4px; }
#page-body .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 12px; }
#page-body .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 16px; }
#page-body .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 24px; }
#page-body .h-32 { height: 8rem; }
#page-body .h-\[220px\] { height: 220px; }
#page-body .h-\[280px\] { height: 280px; }
#page-body .w-8 { width: 2rem; }
#page-body .w-10 { width: 2.5rem; }
#page-body .w-16 { width: 4rem; }
#page-body .w-64 { width: 16rem; }
#page-body .min-w-0 { min-width: 0; }
#page-body .min-w-full { min-width: 100%; }
#page-body .max-w-sm { max-width: 24rem; }
#page-body .max-w-lg { max-width: 32rem; }
#page-body .max-w-2xl { max-width: 42rem; }
#page-body .max-w-7xl { max-width: 80rem; }
#page-body .shrink-0 { flex-shrink: 0; }
#page-body .items-baseline { align-items: baseline; }
#page-body .justify-around { justify-content: space-around; }
#page-body .justify-end { justify-content: flex-end; }
#page-body .fixed { position: fixed; }
#page-body .relative { position: relative; }
#page-body .inset-0 { bottom: 0; left: 0; right: 0; top: 0; }
#page-body .z-50 { z-index: 50; }
#page-body .hidden { display: none; }
#page-body .cursor-not-allowed { cursor: not-allowed; }
#page-body .opacity-90 { opacity: .9; }
#page-body .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#page-body .whitespace-nowrap { white-space: nowrap; }
#page-body .tracking-wide { letter-spacing: .025em; }
#page-body .leading-relaxed { line-height: 1.625; }
#page-body .underline { text-decoration: underline; }
#page-body .uppercase { text-transform: uppercase; }
#page-body .mt-5 { margin-top: 20px; }
#page-body .mt-6 { margin-top: 24px; }
#page-body .mb-3 { margin-bottom: 12px; }
#page-body .ml-2 { margin-left: 8px; }
#page-body .mr-1 { margin-right: 4px; }
#page-body .pb-2 { padding-bottom: 8px; }
#page-body .pb-3 { padding-bottom: 12px; }
#page-body .pl-2 { padding-left: 8px; }
#page-body .pr-2 { padding-right: 8px; }
#page-body .pr-4 { padding-right: 16px; }
#page-body .py-0\.5 { padding-bottom: 2px; padding-top: 2px; }
#page-body .py-1\.5, #page-footer .py-1\.5 { padding-bottom: 6px; padding-top: 6px; }
#page-body .py-10 { padding-bottom: 40px; padding-top: 40px; }
#page-body .py-12 { padding-bottom: 48px; padding-top: 48px; }
#page-body .rounded-2xl { border-radius: 16px; }
#page-body .hover\:bg-gray-50:hover { background-color: #f9fafb; }
#page-body .hover\:bg-gray-600:hover { background-color: #4b5563; }
#page-body .hover\:bg-red-50:hover { background-color: #fef2f2; }
#page-body .hover\:bg-red-600:hover { background-color: #dc2626; }
#page-body .hover\:bg-green-50:hover { background-color: #f0fdf4; }
#page-body .hover\:bg-white:hover { background-color: #fff; }
#page-body .hover\:bg-white\/20:hover { background-color: rgba(255, 255, 255, .2); }
#page-body .hover\:text-gray-700:hover { color: #374151; }
#page-body .hover\:text-red-600:hover { color: #dc2626; }
#page-body .disabled\:bg-gray-300:disabled { background-color: #d1d5db; }
#page-body .disabled\:text-gray-500:disabled { color: #6b7280; }
#page-body .first\:pt-0:first-child { padding-top: 0; }
#page-body .last\:border-b-0:last-child { border-bottom-width: 0; }
#page-body .last\:pb-0:last-child { padding-bottom: 0; }

.sv-footer-social-link { display: inline-flex; }
.sv-footer-social-label { font-size: 12px; font-weight: 700; }
.sv-footer-social-icon,
.sv-footer-social-icon--inline {
	display: block;
	flex: 0 0 20px;
	height: 20px;
	width: 20px;
}

/*
 * The custom registration card is narrower than phpBB's legacy fields2
 * layout.  Keep the Q&A CAPTCHA question and answer in one vertical flow so
 * the fixed 16em definition margin cannot push the answer out of the card.
 */
#register .captcha-panel fieldset.fields2 > dl {
	margin: 0;
}
#register .captcha-panel fieldset.fields2 > dl > dt,
#register .captcha-panel fieldset.fields2 > dl > dd.captcha {
	border: 0;
	float: none;
	margin: 0;
	padding: 0;
	width: auto;
}
#register .captcha-panel fieldset.fields2 > dl > dt {
	margin-bottom: 8px;
}
#register .captcha-panel fieldset.fields2 > dl > dd.captcha {
	display: block;
}
#register .captcha-panel input[name="qa_answer"] {
	box-sizing: border-box;
	max-width: 100%;
	width: 100% !important;
}

@media (min-width: 640px) {
	#page-body .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#page-body .sm\:flex-row { flex-direction: row; }
	#page-body .sm\:items-center { align-items: center; }
	#page-body .sm\:justify-between { justify-content: space-between; }
}
@media (min-width: 768px) {
	#page-body .md\:py-8 { padding-bottom: 32px; padding-top: 32px; }
	#page-body .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#page-body .md\:flex-row { flex-direction: row; }
	#page-body .md\:items-start { align-items: flex-start; }
	#page-body .md\:justify-between { justify-content: space-between; }
	#page-body .md\:items-end { align-items: flex-end; }
	#page-body .md\:p-6 { padding: 24px; }
	#page-body .md\:w-1\/3 { width: 33.333333%; }
	#page-body .md\:w-80 { width: 20rem; }
	#page-body .md\:h-\[340px\] { height: 340px; }
}
@media (min-width: 1024px) {
	#page-body .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	#page-body .lg\:col-span-1 { grid-column: span 1 / span 1; }
	#page-body .lg\:col-span-2 { grid-column: span 2 / span 2; }
	#page-body .lg\:flex-row { flex-direction: row; }
	#page-body .lg\:items-start { align-items: flex-start; }
	#page-body .lg\:justify-between { justify-content: space-between; }
}
@media (min-width: 1280px) {
	#page-body .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#page-body .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	#page-body .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	#page-body .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	#page-body .xl\:col-span-1 { grid-column: span 1 / span 1; }
	#page-body .xl\:col-span-2 { grid-column: span 2 / span 2; }
	#page-body .xl\:col-span-4 { grid-column: span 4 / span 4; }
}
@media (max-width: 700px) {
	#wrap, .wrap { max-width: none; padding: 0 12px; }
	#page-header { margin-top: 8px; }
	.sv-brand-header { border-radius: var(--sv-radius-card) var(--sv-radius-card) 0 0; }
	.sv-brand-header__inner { align-items: flex-start; flex-direction: column; gap: 10px; padding: 14px; }
	.sv-brand-header__tagline { display: none; }
	.sv-header-search { margin-left: 0; width: 100%; }
	.sv-header-search input { width: calc(100% - 72px); }
	#page-header #nav-main, #page-header #nav-breadcrumbs { align-items: flex-start; flex-direction: column; }
	#page-header #nav-main .rightside, #page-header #nav-breadcrumbs .rightside { margin-left: 0; }
	#page-body .grid-cols-2 { grid-template-columns: minmax(0, 1fr); }
	#page-body .p-6 { padding: 16px; }
	#page-body .-mt-6 { margin-top: -16px; }
	#page-body .-mx-6 { margin-left: -16px; margin-right: -16px; }
	#page-body .sv-portfolio-panel__header { padding: 14px 16px; }
	#page-body .sv-portfolio-panel .table_holding {
		display: block;
		margin: 14px 16px;
		overflow-x: auto;
		width: calc(100% - 32px);
	}
	.holding_stock_chart { height: 300px; }
}

/* Reward notification dialog: daily login +1 and/or limited-time campaign
   rewards, combined into one dialog when both land on the same page view
   (sv_overall_header.html / sv_overall_footer.html). jQuery UI's own
   titlebar/chrome is hidden in favour of this card so it reads as part of
   the site instead of a generic OS-style dialog window.

   Second pass (first pass felt flat): a soft halo behind the icon,
   amount/total shown as colored "chip" pills instead of plain bold text, a
   left accent stripe per item instead of a flat grey fill, and a bigger
   pill-shaped button with real lift on hover/press -- same tokens
   throughout, just more depth and a clearer focal point. (A top accent
   bar was tried here too, but with the real titlebar hidden it was the
   only thing left at the top of the dialog, so it just read as a thin,
   broken title bar -- removed.) */
.ui-dialog.sv-reward-dialog-chrome {
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: 16px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, .06), 0 16px 40px rgba(15, 23, 42, .16);
	padding: 0;
	max-width: 92vw;
	overflow: hidden;
}

.ui-dialog.sv-reward-dialog-chrome .ui-dialog-titlebar {
	display: none;
}

.ui-dialog.sv-reward-dialog-chrome .ui-dialog-content {
	padding: 0;
}

.sv-reward-dialog {
	color: var(--sv-ink);
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", "Noto Sans TC", Arial, sans-serif;
	background: var(--sv-surface);
}

/* The compact (daily-login-only, auto-closing) toast has no header/button
   of its own -- unaffected by this round -- so it keeps its own padding
   here instead of relying on .sv-reward-dialog's (now removed so the
   header below can span full width). */
.sv-reward-dialog--compact {
	padding: 16px 20px;
}

.sv-reward-dialog__compact {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sv-reward-dialog__icon {
	flex: 0 0 auto;
	display: block;
	border-radius: 50%;
	background: var(--sv-surface);
	box-shadow: 0 0 0 1px var(--sv-border);
}

.sv-reward-dialog__compact-label {
	flex: 1 1 auto;
	font-weight: 600;
	color: var(--sv-heading);
	font-size: 14px;
}

.sv-reward-dialog__compact-amount {
	display: inline-block;
	font-weight: 800;
	color: var(--sv-sky-dark);
	background: var(--sv-sky-pale);
	border-radius: 999px;
	padding: 3px 12px;
	font-size: 14px;
	white-space: nowrap;
}

/* Same solid-blue, white-text panel header used site-wide (e.g. the
   "bg-sky-500 text-white p-4 rounded-t-lg" block on corp.html / buy.html /
   adm_reward_campaign.html etc.) -- reimplemented here with the same
   --sv-sky token and px/py-equivalent spacing rather than those utility
   classes themselves, because this dialog is moved out from under
   #page-body by jQuery UI's own dialog widget (it re-parents the whole
   thing to <body>), and the utility classes in this file are scoped to
   #page-body/#page-footer, so they would silently not apply here. */
.sv-reward-dialog__header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 26px;
	background: var(--sv-sky);
}

.sv-reward-dialog__icon-wrap {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(2, 59, 91, .25);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sv-reward-dialog__icon-wrap img {
	display: block;
}

.sv-reward-dialog__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.3;
}

.sv-reward-dialog__items {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px 26px 0;
}

.sv-reward-dialog__item {
	padding: 12px 14px;
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-left: 3px solid var(--sv-sky);
	border-radius: var(--sv-radius-card);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.sv-reward-dialog__item-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.sv-reward-dialog__item-label {
	font-weight: 600;
	color: var(--sv-ink);
	font-size: 14px;
}

.sv-reward-dialog__item-amount {
	display: inline-block;
	font-weight: 800;
	color: var(--sv-sky-dark);
	background: var(--sv-sky-pale);
	border-radius: 999px;
	padding: 3px 12px;
	font-size: 15px;
	white-space: nowrap;
}

.sv-reward-dialog__item-message {
	margin: 8px 0 0;
	color: var(--sv-copy);
	font-size: 13px;
	line-height: 1.55;
	word-break: break-word;
}

.sv-reward-dialog__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 16px 26px 0;
	padding: 12px 14px;
	background: linear-gradient(135deg, var(--sv-sky-pale) 0%, rgba(240,249,255,.4) 100%);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-card);
	font-weight: 700;
	color: var(--sv-heading);
}

.sv-reward-dialog__total-amount {
	display: inline-block;
	color: #ffffff;
	background: linear-gradient(135deg, var(--sv-sky) 0%, var(--sv-brand-accent) 100%);
	border-radius: 999px;
	padding: 4px 14px;
	font-size: 17px;
	font-weight: 800;
}

.sv-reward-dialog__actions {
	margin-top: 20px;
	padding: 0 26px 22px;
	text-align: center;
}

/* Flat sky-500 / hover sky-600, 10px radius, 14px/600 weight -- the same
   recipe as the site's own ".bg-sky-500 hover:bg-sky-600 ... rounded-lg
   ... text-sm font-semibold ... transition" buttons (e.g. adm_reward_
   campaign.html's save/new-campaign buttons), reimplemented directly for
   the same #page-body-scoping reason noted on .sv-reward-dialog__header
   above. No gradient, no lift -- just the plain background-color swap
   those buttons use. */
.sv-reward-dialog__dismiss {
	appearance: none;
	border: none;
	border-radius: 10px;
	background: var(--sv-sky);
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 28px;
	cursor: pointer;
	transition: background-color .15s ease;
}

.sv-reward-dialog__dismiss:hover,
.sv-reward-dialog__dismiss:focus {
	background: var(--sv-brand-accent);
}

@media (max-width: 480px) {
	.sv-reward-dialog__header { padding: 18px 18px; }
	.sv-reward-dialog__items { padding: 16px 18px 0; }
	.sv-reward-dialog__total { margin: 16px 18px 0; }
	.sv-reward-dialog__actions { padding: 0 18px 18px; text-align: stretch; }
	.sv-reward-dialog__title { font-size: 17px; }
	.sv-reward-dialog__icon-wrap { width: 42px; height: 42px; }
	.sv-reward-dialog__dismiss { width: 100%; }
}