* { box-sizing: border-box; }
:root { --bg:#f4f7fb; --panel:#fff; --text:#1e293b; --muted:#64748b; --line:#dbe3ec; --primary:#2563eb; --red:#dc2626; --blue:#2563eb; --content-region-max-height:min(520px,65vh); }
html, body { height:100%; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--perfect-picker-font-family); font-size:14px; }
[v-cloak] { display:none; }
button, input, select { font:inherit; }
button { cursor:pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid rgba(37,99,235,.2); outline-offset:1px; }
#app { height:100vh; display:flex; flex-direction:column; overflow:hidden; }
.appLayout { min-height:0; flex:1; display:grid; grid-template-columns:280px minmax(0,1fr); }
.appLayout.is-sidebar-collapsed { grid-template-columns:32px minmax(0,1fr); }
.themeSidebar { position:relative; min-height:0; display:flex; flex-direction:column; overflow:hidden; background:#f1f1f1; border-right:1px solid var(--line); }
.themeSidebarContent { min-height:0; flex:1; display:flex; flex-direction:column; padding:18px 14px; }
.sidebarCollapsedIndicator { position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:#f1f1f1; }
.themeSidebar.is-collapsed .themeSidebarContent,
.themeSidebar.is-collapsed .themeSidebarFooter { opacity:0; pointer-events:none; }
.themeSidebar.is-collapsed .sidebarCollapsedIndicator { display:flex; }
.screeningButton { width:100%; min-height:32px; display:flex; align-items:center; justify-content:center; border:1px solid #c7d2df; border-radius:6px; background:#fff; color:var(--text); font-weight:600; text-align:center; text-decoration:none; }
.screeningButton:hover { border-color:var(--primary); background:#eff6ff; color:#1d4ed8; }
.contentDisplayControls { display:flex; flex-direction:column; gap:8px; border:0; padding:0; margin:22px 0 0; }
.contentDisplayControls legend { padding:0; margin-bottom:10px; color:var(--muted); font-size:12px; font-weight:700; }
.contentDisplayControls label { display:flex; align-items:center; gap:7px; cursor:pointer; white-space:nowrap; }
.contentDisplayControls input { margin:0; }
.stockCardDisplayControls { display:flex; flex-direction:column; gap:6px; margin-left:20px; color:var(--muted); font-size:12px; }
.themeSidebarFooter { flex:0 0 50px; display:grid; grid-template-columns:32px minmax(0,1fr); align-items:center; gap:6px; padding:7px 8px; border-top:1px solid var(--line); background:rgba(255,255,255,.96); box-shadow:0 -4px 12px rgba(15,23,42,.05); }
.sidebarToggleButton { min-width:0; height:34px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:6px; background:#f8fafc; color:var(--muted); }
.sidebarToggleButton::before { content:""; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; }
.sidebarToggleExpand::before { transform:rotate(-45deg); }
.sidebarToggleCollapse::before { transform:rotate(135deg); }
.sidebarToggleButton:hover { border-color:#94a3b8; background:#eef2f7; color:var(--text); }
.sidebarCollapsedIndicator .sidebarToggleButton { width:100%; height:100%; border:0; border-radius:0; }
.maintenanceLink { padding:7px 4px; color:#94a3b8; font-size:11px; text-align:center; text-decoration:none; }
.maintenanceLink:hover { color:#64748b; text-decoration:underline; }
.themePickerPanel { position:relative; width:auto; display:flex; align-items:center; gap:10px; }
.clearButton { flex:0 0 auto; border:1px solid #cbd5e1; border-radius:6px; padding:5px 10px; background:#fff; color:#334155; font-weight:700; }
.clearButton:hover { border-color:#94a3b8; background:#f8fafc; }
.themeCombobox { position:relative; width:min(420px,50vw); }
.themeCombobox input { width:100%; min-height:28px; border:1px solid #cbd5e1; border-radius:6px; padding:3px 8px; background:#fff; }
.themeOptions { position:absolute; z-index:20; top:calc(100% + 4px); left:0; right:0; max-height:360px; overflow:auto; border:1px solid #cbd5e1; border-radius:7px; background:#fff; box-shadow:0 8px 24px rgba(15,23,42,.16); }
.themeOptions button { width:100%; display:flex; justify-content:space-between; gap:8px; border:0; border-bottom:1px solid #eef2f7; padding:8px 9px; background:#fff; color:var(--text); text-align:left; }
.themeOptions button:hover { background:#eff6ff; }
.themeOptions small { flex:0 0 auto; color:var(--muted); }
.themeOptions p { padding:9px; margin:0; color:var(--muted); }
.themeMain { min-width:0; min-height:0; overflow-y:auto; padding:0 24px 48px; }
.pageHeader, .panelHeader { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.pageHeader { position:sticky; z-index:20; top:0; width:calc(100% + 48px); min-height:44px; align-items:center; padding:7px 24px; margin:0 -24px 12px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.97); box-shadow:0 2px 6px rgba(15,23,42,.08); }
.pageHeader > div { min-width:0; flex:1; display:flex; align-items:center; gap:12px; }
.pageHeader .themePickerPanel + p { margin:0; white-space:nowrap; }
h1, h2, h3, p { margin:0; }
h1 { font-size:28px; }
.pageHeader p, .panelHeader p { margin-top:4px; color:var(--muted); }
.statusBadge { border:1px solid var(--line); border-radius:6px; padding:6px 10px; background:#fff; color:var(--muted); }
.errorText { border:1px solid #fecaca; border-radius:7px; padding:10px; background:#fef2f2; color:#b91c1c; }
.panel { min-width:0; border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:14px; background:var(--panel); box-shadow:0 1px 2px rgba(15,23,42,.06); }
.panelHeader { align-items:center; margin-bottom:12px; }
.panelHeader h2, .cardsTitle { font-size:19px; }
.rowCountControl { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; font-weight:700; }
.rowCountControl select { width:72px; border:1px solid #cbd5e1; border-radius:6px; padding:5px 7px; background:#fff; }
.tableWrap { max-height:var(--content-region-max-height); overflow:auto; scrollbar-gutter:stable; }
table { width:100%; min-width:930px; border-collapse:collapse; }
th, td { border-bottom:1px solid var(--line); padding:9px; text-align:left; white-space:nowrap; }
th { background:#f8fafc; color:var(--muted); font-size:12px; }
.relativeSelectCell { width:48px; text-align:center; }
.relativeSelectCell input { margin:0; }
.relativeSelectAll { display:inline-flex; align-items:center; justify-content:center; gap:4px; cursor:pointer; }
.stockCodeLink { color:var(--primary); font-family:Consolas,monospace; font-weight:700; text-decoration:none; }
.stockCodeLink:hover { color:#1d4ed8; }
.emptyTableRow td { height:39px; }
.tableSortButton { width:100%; min-height:28px; display:inline-flex; align-items:center; justify-content:space-between; gap:6px; border:0; padding:0; background:transparent; color:inherit; font-weight:700; text-align:inherit; }
.tableSortButton:hover, .tableSortButton.isActive { color:#1d4ed8; }
.tableSortMark { width:1em; flex:0 0 1em; color:#1d4ed8; font-size:10px; text-align:right; }
.num { font-variant-numeric:tabular-nums; text-align:right; }
.plus { color:var(--red); }
.minus { color:var(--blue); }
.pager { display:flex; justify-content:center; align-items:center; gap:12px; padding-top:12px; }
.pager.isPlaceholder { visibility:hidden; }
.pager button { border:1px solid #cbd5e1; border-radius:6px; padding:6px 12px; background:#fff; color:#334155; font-weight:700; }
.pager button:disabled { cursor:default; opacity:.45; }
.chartHeader { align-items:flex-start; }
.changeChartHeaderLeft { min-width:0; display:flex; flex-wrap:wrap; align-items:flex-start; gap:14px 20px; }
.relativeChartHeaderLeft { min-width:0; display:flex; flex-wrap:wrap; align-items:flex-start; gap:14px 20px; }
.relativeChartControls { display:flex; flex-wrap:wrap; align-items:center; gap:9px 14px; }
.relativeChartControls label { display:flex; align-items:center; gap:5px; color:var(--muted); font-size:12px; font-weight:700; white-space:nowrap; }
.relativeChartControls select { width:88px; border:1px solid #cbd5e1; border-radius:6px; padding:5px 7px; background:#fff; }
.relativeChartControls input { margin:0; }
.relativeChartMount { min-height:430px; }
.relativeChartMessage { height:430px; display:grid; place-items:center; margin-top:-430px; color:var(--muted); pointer-events:none; }
.changeMetricControl { display:flex; align-items:center; gap:5px; color:var(--muted); font-size:12px; font-weight:700; white-space:nowrap; }
.changeMetricControl select { width:150px; border:1px solid #cbd5e1; border-radius:6px; padding:5px 7px; background:#fff; }
.bubbleHeaderLeft { min-width:0; display:flex; flex-wrap:wrap; align-items:flex-start; gap:14px 20px; }
.bubbleAxisControls { display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; gap:9px; }
.bubbleAxisControls label { display:flex; align-items:center; gap:5px; color:var(--muted); font-size:12px; font-weight:700; white-space:nowrap; }
.bubbleAxisControls select { width:150px; border:1px solid #cbd5e1; border-radius:6px; padding:5px 7px; background:#fff; }
.chartMount { width:100%; height:430px; }
.chartScrollArea { max-height:var(--content-region-max-height); overflow:auto; scrollbar-gutter:stable; }
.changeChartMount { height:auto; min-height:390px; }
.cardsTitle { margin:22px 0 12px; }
.stockGrid { max-height:var(--content-region-max-height); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:14px; overflow:auto; padding-right:6px; scrollbar-gutter:stable; }
.stockCard { min-width:0; border:1px solid var(--line); border-radius:10px; padding:14px; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.06); }
.stockHead { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:10px; }
.stockHead > div { min-width:0; }
.stockIdentity { display:flex; align-items:baseline; gap:8px; }
.stockIdentity a { flex:0 0 auto; }
.stockHead a { color:#1d4ed8; font-weight:700; text-decoration:none; }
.stockHead h3 { min-width:0; font-size:18px; }
.stockHead p { margin-top:3px; color:var(--muted); font-size:12px; }
.stockHead > strong { flex:0 0 auto; font-size:18px; }
.metricGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:0 0 10px; overflow:hidden; border:1px solid var(--line); border-radius:7px; background:var(--line); }
.metricGrid div { padding:8px; background:#fff; }
.metricGrid dt { color:var(--muted); font-size:11px; }
.metricGrid dd { margin:3px 0 0; font-weight:700; font-variant-numeric:tabular-nums; }
.miniChart { height:180px; }
.miniChartMessage { height:180px; display:grid; place-items:center; margin-top:-180px; color:var(--muted); }
@media (max-width:1050px) { .appLayout:not(.is-sidebar-collapsed) { grid-template-columns:240px minmax(0,1fr); } .stockGrid { grid-template-columns:1fr; } }
@media (max-width:720px) { #app { height:auto; min-height:100vh; overflow:visible; } .appLayout, .appLayout.is-sidebar-collapsed { display:block; } .themeSidebar { min-height:auto; overflow:visible; } .themeSidebar.is-collapsed { min-height:32px; } .themeSidebarContent { gap:14px; } .themeSidebarFooter { flex-basis:auto; } .contentDisplayControls { margin-top:0; } .themeMain { overflow:visible; padding:0 14px 14px; } .pageHeader { top:0; width:calc(100% + 28px); padding:7px 14px; margin:0 -14px 12px; } .themePickerPanel { width:100%; } .themeCombobox { width:auto; flex:1; } .metricGrid { grid-template-columns:repeat(2,minmax(0,1fr)); } .chartHeader { display:block; } .relativeChartHeaderLeft, .bubbleHeaderLeft, .changeChartHeaderLeft { display:block; } .relativeChartControls, .bubbleAxisControls, .changeMetricControl { margin-top:10px; } h1 { font-size:23px; } }

/* Current Perfect Picker application shell */
.visuallyHidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#app.appShell {
    display: block;
    min-height: 100vh;
    height: auto;
    overflow: visible;
}

.themeMain.contentFrame {
    min-width: 0;
    min-height: 0;
    padding: 0 0 48px;
    overflow: visible;
}

.selectedThemeBadge {
    padding: 3px 9px;
    color: var(--blue-700);
    background: var(--blue-100);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.headingMeta {
    display: flex;
    gap: 12px;
}

.sidebar .contentDisplayControls {
    gap: 7px;
    margin: 18px 6px 0;
    padding: 16px 4px 0;
    border-top: 1px solid var(--line);
}

.sidebar .contentDisplayControls legend {
    margin-bottom: 8px;
    color: #52657f;
    font-size: 11px;
}

.sidebar .contentDisplayControls label {
    color: #435a78;
    font-size: 12px;
}

.sidebar .stockCardDisplayControls {
    margin-left: 18px;
    padding-left: 8px;
    border-left: 1px solid var(--line);
}

.themeMaintenanceLinkWrap {
    margin: 18px 6px 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.themeMaintenanceLinkWrap a {
    display: block;
    padding: 6px 8px;
    color: #7a899c;
    font-size: 11px;
    text-align: center;
    text-decoration: none;
}

.themeMaintenanceLinkWrap a:hover {
    color: var(--blue-700);
}

.themePickerPanel {
    position: sticky;
    z-index: 25;
    top: var(--topbar-height);
    width: 100%;
    min-height: 58px;
    justify-content: flex-start;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(22, 43, 77, 0.08);
}

.themeCombobox {
    width: min(440px, 55vw);
}

.themeCombobox input {
    min-height: 36px;
    padding: 0 11px;
    border-color: var(--line);
    border-radius: 5px;
}

.clearButton {
    min-height: 36px;
    padding: 0 13px;
    border-color: var(--line);
    border-radius: 5px;
}

.panel,
.stockCard {
    border-color: var(--line);
    border-radius: 6px;
    box-shadow: none;
}

.panel {
    padding: 0;
    margin-bottom: 14px;
    overflow: hidden;
}

.panelHeader {
    min-height: 58px;
    padding: 11px 14px;
    margin-bottom: 0;
    background: #f9fbfe;
    border-bottom: 1px solid var(--line);
}

.panelHeader h2,
.cardsTitle {
    font-size: 16px;
}

.tableWrap,
.chartScrollArea {
    max-height: var(--content-region-max-height);
}

th,
td {
    height: 39px;
    padding: 7px 10px;
}

.chartMount {
    padding: 8px;
}

.relativeChartMessage {
    padding: 8px;
}

.pager {
    min-height: 50px;
    padding: 9px 14px;
    border-top: 1px solid var(--line);
}

.cardsTitle {
    margin: 22px 0 10px;
}

@media (max-width: 720px) {
    .themeMain.contentFrame {
        padding: 0 0 24px;
    }

    .themePickerPanel {
        top: var(--topbar-height);
    }

    .themeCombobox {
        width: auto;
        min-width: 0;
        flex: 1;
    }
}