.visuallyHidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.universeCount {
    color: var(--muted);
    font-size: 12px;
}

.tabCount {
    display: inline-grid;
    min-width: 18px;
    height: 18px;
    margin-left: 3px;
    place-items: center;
    padding: 0 5px;
    background: rgba(35, 88, 165, 0.1);
    border-radius: 9px;
    font-size: 10px;
}

.screeningWorkspace {
    padding: 30px 0 50px;
}

.tabPanel {
    display: none;
}

.tabPanel.is-active {
    display: block;
}

.workspaceTitleRow {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 14px;
}

.workspaceTitleRow > div:first-child {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 4px 10px;
}

.workspaceTitleRow h2 {
    margin: 0;
    font-size: 17px;
}

.workspaceTitleRow p {
    grid-column: 2;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.stepLabel {
    padding: 3px 8px;
    color: var(--blue-700);
    background: var(--blue-100);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.workspaceActions {
    display: flex;
    gap: 8px;
}

.button {
    min-height: 36px;
    padding: 0 15px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.primaryButton {
    color: #fff;
    background: var(--blue-700);
    border-color: var(--blue-700);
}

.primaryButton:hover {
    background: #174986;
}

.secondaryButton {
    color: #435a78;
    background: var(--surface);
    border-color: var(--line);
}

.button:disabled {
    cursor: wait;
    opacity: 0.68;
}

.conditionBuilder {
    --number-input-width: calc(6ch + 36px);
    display: grid;
    grid-template-columns: 205px minmax(0, 1fr);
    min-height: 420px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(31, 54, 85, 0.04);
    overflow: hidden;
}

.conditionCategories {
    padding: 12px 9px;
    background: #f8fafd;
    border-right: 1px solid var(--line);
}

.conditionCategory {
    position: relative;
    display: grid;
    width: 100%;
    gap: 1px;
    padding: 10px 12px;
    color: #405673;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}

.conditionCategoryTitle > span:first-child {
    font-weight: 600;
}

.conditionCategoryTitle {
    display: flex;
    align-items: center;
    gap: 6px;
}

.categoryConditionCount {
    display: inline-flex;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    background: var(--blue-700);
    border-radius: 999px;
}

.categoryConditionCount[hidden] {
    display: none;
}

.categoryErrorCount {
    display: inline-flex;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    background: #c93c33;
    border-radius: 999px;
}

.categoryErrorCount[hidden] {
    display: none;
}

.conditionCategory small {
    color: #8593a7;
    font-size: 10px;
}

.conditionCategory:hover {
    color: var(--blue-700);
    background: #eff4fb;
}

.conditionCategory.is-active {
    color: var(--blue-700);
    background: var(--blue-100);
}

.conditionCategory.is-active::after {
    position: absolute;
    top: 50%;
    right: 10px;
    content: "›";
    color: var(--blue-700);
    transform: translateY(-50%);
}

.conditionCanvas {
    padding: 23px 25px 26px;
}

.conditionSection {
    display: none;
}

.conditionSection.is-active {
    display: block;
}

.sectionHeader {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
}

.sectionEyebrow {
    color: var(--blue-700);
    font-size: 10px;
    font-weight: 700;
}

.sectionHeader h3 {
    margin: 3px 0 0;
    font-size: 16px;
}

.sectionCount {
    color: var(--muted);
    font-size: 11px;
}

.conditionGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-top: 16px;
}

.basicConditionGrid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.famousInvestorGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.commonRecommendedCard {
    min-height: 112px;
}

.commonRecommendedCard .rangeFields {
    justify-content: flex-start;
}

.commonRecommendedCard .rangeFields input {
    max-width: 150px;
}

.commonRecommendedNote {
    display: block;
    margin-top: 9px;
    color: #65758b;
    font-size: 11px;
    line-height: 1.45;
}

.commonRecommendedHeading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.commonRecommendedButton {
    height: 28px;
    padding: 0 11px;
    color: #2358a5;
    background: #eef4fc;
    border: 1px solid #b9cbe4;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
}

.commonRecommendedButton:hover,
.commonRecommendedButton:focus-visible {
    color: #fff;
    background: #2358a5;
    border-color: #2358a5;
    outline: none;
}

.famousInvestorName {
    margin-bottom: 0;
    padding-right: 0;
}

.famousInvestorBox {
    padding: 0;
    overflow: hidden;
}

.famousInvestorBoxHeader {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    min-height: 48px;
    padding: 0 14px;
    align-items: center;
    gap: 12px;
    background: #f3f6fa;
    border-bottom: 1px solid var(--line-soft);
}

.famousInvestorBoxHeader h4 {
    margin: 0;
    color: var(--navy-950);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.famousInvestorBoxHeader h4:hover,
.famousInvestorBoxHeader h4:focus-visible {
    color: var(--blue-700);
    outline: none;
}

.famousInvestorUse {
    display: inline-flex;
    align-items: center;
    color: #3f5470;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.famousInvestorUse input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--blue-700);
}

.famousInvestorHeaderActions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.famousInvestorReset,
.famousInvestorBulkButton {
    height: 30px;
    padding: 0 9px;
    color: #52657f;
    background: #fff;
    border: 1px solid #cdd7e5;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
}

.famousInvestorReset:hover,
.famousInvestorReset:focus-visible,
.famousInvestorBulkButton:hover,
.famousInvestorBulkButton:focus-visible {
    color: var(--blue-700);
    border-color: #7193c4;
    outline: none;
}

.famousConditionUse {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    cursor: pointer;
}

.famousConditionUse input {
    width: 15px;
    height: 15px;
    margin: 0;
    flex: 0 0 15px;
    accent-color: var(--blue-700);
}

.is-famous-condition-disabled .buffettConditionTitle,
.is-famous-condition-disabled .lynchConditionTitle {
    color: #8995a5;
}

.is-famous-condition-disabled .buffettConditionDescription,
.is-famous-condition-disabled .buffettConditionValue,
.is-famous-condition-disabled .lynchConditionValue {
    opacity: 0.42;
}

.is-famous-condition-unavailable .buffettConditionTitle,
.is-famous-condition-unavailable .lynchConditionTitle {
    color: #c62828;
}

.is-famous-condition-unavailable .famousConditionUse {
    cursor: not-allowed;
}

.famousInvestorToggle {
    width: 30px;
    height: 30px;
    padding: 0;
    color: var(--navy-800);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.famousInvestorToggle::before {
    display: block;
    width: 8px;
    height: 8px;
    margin: auto;
    content: "";
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

.famousInvestorBox.is-expanded .famousInvestorToggle::before {
    transform: rotate(135deg);
}

.famousInvestorToggle:hover,
.famousInvestorToggle:focus-visible {
    background: var(--blue-050);
    outline: none;
}

.buffettConditionList {
    display: none;
    padding: 5px 14px 10px;
}

.famousInvestorBox.is-expanded .buffettConditionList {
    display: grid;
}

.buffettCondition {
    display: grid;
    grid-template-columns: 190px auto minmax(0, 1fr);
    min-height: 45px;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 12px;
}

.buffettCondition:last-child {
    border-bottom: 0;
}

.buffettConditionTitle {
    color: #3f5470;
    font-weight: 600;
}

.buffettConditionDescription {
    color: #65758b;
}

.buffettConditionValue {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    color: #405673;
    white-space: nowrap;
}

.conditionCanvas .buffettConditionValue input[type="number"] {
    width: 72px;
    height: 31px;
    flex: 0 0 72px;
    padding: 0 8px;
    text-align: right;
}

.buffettConditionDebt {
    grid-template-columns: 190px auto auto auto auto minmax(0, 1fr);
}

.buffettConditionOr {
    color: #8a96a7;
    font-size: 11px;
}

.lynchConditionList {
    display: none;
    padding: 5px 14px 10px;
}

.famousInvestorBox.is-expanded .lynchConditionList {
    display: grid;
}

.lynchCondition {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    min-height: 49px;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 12px;
}

.lynchCondition:last-child {
    border-bottom: 0;
}

.lynchConditionTitle {
    color: #3f5470;
    font-weight: 600;
}

.lynchConditionValue,
.lynchCheckOptions,
.lynchCheckOptions label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #405673;
}

.conditionCanvas .lynchCondition input[type="number"] {
    width: 72px;
    height: 31px;
    flex: 0 0 72px;
    padding: 0 8px;
    text-align: right;
}

.lynchCheckOptions {
    flex-wrap: wrap;
}

.lynchConditionOr {
    color: #8a96a7;
    font-size: 11px;
}

.investorOptionRows {
    display: grid;
    gap: 7px;
    padding: 7px 0;
}

.investorOptionRows > label {
    display: grid;
    grid-template-columns: 18px 52px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    color: #405673;
}

.investorOptionRows > label > span:last-child {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.basicFieldFull {
    grid-column: 1 / -1;
}

.basicFieldHalf {
    grid-column: span 3;
}

.metricsConditionGrid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

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

.metricFieldQuarter {
    grid-column: span 3;
}

.metricFieldRowStart {
    grid-column: 1 / span 3;
}

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

.fieldCard {
    position: relative;
    min-width: 0;
    padding: 14px;
    background: #fbfcfe;
    border: 1px solid var(--line-soft);
    border-radius: 5px;
    transition: background-color 0.15s ease;
}

.fieldCard.is-condition-active {
    background: #fffebb;
}

.fieldCard.has-condition-error {
    background: #fde8e6;
    border-color: #dfa39e;
}

.fieldCardWide {
    grid-column: 1 / -1;
}

.fieldLabel {
    display: block;
    margin-bottom: 9px;
    padding-right: 30px;
    color: #3f5470;
    font-size: 12px;
    font-weight: 600;
}

.fieldLabelWithUse {
    display: flex;
    min-width: 0;
    margin-bottom: 9px;
    padding-right: 30px;
    align-items: center;
    gap: 7px;
}

.fieldLabelWithUse .fieldLabel {
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.fieldLabelWithUse .fieldLabel:hover {
    color: var(--blue-700);
}

.conditionUseCheckbox {
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 16px;
    accent-color: var(--blue-700);
    cursor: pointer;
}

.fieldClearButton {
    position: absolute;
    top: 7px;
    right: 7px;
    display: inline-flex;
    width: 28px;
    height: 28px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: #8593a7;
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.fieldClearButton:hover,
.fieldClearButton:focus-visible {
    color: #b33a2b;
    background: #fbecea;
    outline: none;
}

.fieldClearButton svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.fieldCard > input,
.fieldCard > textarea,
.rangeFields input {
    height: 35px;
    min-width: 0;
    padding: 0 10px;
    color: var(--navy-950);
    background: var(--surface);
    border: 1px solid #cdd7e5;
    border-radius: 4px;
    outline: none;
}

.fieldCard > textarea {
    width: 100%;
    min-height: 75px;
    resize: vertical;
    font: inherit;
    line-height: 1.5;
}

.conditionCanvas input,
.conditionCanvas select,
.conditionCanvas textarea {
    font-size: 13px;
}

.conditionCanvas input[type="number"] {
    width: var(--number-input-width);
    flex: 0 0 var(--number-input-width);
}

.fieldCard input:focus {
    border-color: #7193c4;
    box-shadow: 0 0 0 3px rgba(35, 88, 165, 0.1);
}

.rangeFields {
    display: grid;
    grid-template-columns: var(--number-input-width) auto var(--number-input-width) auto;
    justify-content: start;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 11px;
}

.marketCapControlRow {
    display: flex;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
}

.marketCapControlRow .rangeFields {
    grid-template-columns: 72px auto 72px auto;
    flex: 0 0 auto;
    gap: 5px;
}

.conditionCanvas .marketCapControlRow input[type="number"] {
    width: 72px;
}

.marketCapPresets {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
}

.rangePresetButton {
    min-width: 0;
    height: 35px;
    padding: 0 8px;
    color: #51647d;
    background: #fff;
    border: 1px solid #cdd7e5;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.rangePresetButton:hover,
.rangePresetButton:focus-visible {
    color: #2358a5;
    border-color: #7193c4;
    outline: none;
}

.rangePresetButton.is-active {
    color: #fff;
    background: #2358a5;
    border-color: #2358a5;
}

.checkPills {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.checkPills input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkPills span {
    display: inline-flex;
    min-height: 31px;
    align-items: center;
    padding: 0 12px;
    color: #52657f;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    cursor: pointer;
    font-size: 11px;
}

.checkPills input:checked + span {
    color: var(--blue-700);
    background: var(--blue-100);
    border-color: #9ab2d5;
    font-weight: 600;
}

.fcfControls {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.compactPills {
    gap: 4px;
}

.compactPills span {
    min-width: 30px;
    justify-content: center;
    padding: 0 8px;
}

.fieldControlRow {
    display: flex;
    min-height: 35px;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 11px;
    flex-wrap: wrap;
}

.fieldControlRow select,
.shortNumber,
.maMatrixRow select {
    height: 35px;
    padding: 0 9px;
    color: var(--navy-950);
    background: var(--surface);
    border: 1px solid #cdd7e5;
    border-radius: 4px;
}

.advancedCard {
    background: #f8fafd;
}

.maMatrixHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-right: 34px;
    flex-wrap: wrap;
}

.maMatrixTools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.maLookbackControl {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    font-size: 10px;
    white-space: nowrap;
}

.maLookbackControl select {
    height: 26px;
    padding: 0 6px;
    color: var(--navy-950);
    background: var(--surface);
    border: 1px solid #cdd7e5;
    border-radius: 4px;
    font: inherit;
}

.maMatrixPresets {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.maMatrixPresetButton {
    min-height: 26px;
    padding: 0 7px;
    color: #51647d;
    background: #fff;
    border: 1px solid #cdd7e5;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.maMatrixPresetButton[data-ma-direction="1"] {
    color: #197047;
    background: #edf8f2;
    border-color: #9bcbb0;
}

.maMatrixPresetButton[data-ma-direction="2"] {
    color: #a93a2d;
    background: #fff1ef;
    border-color: #e1ada6;
}

.maMatrixPresetButton[data-ma-direction="1"]:hover,
.maMatrixPresetButton[data-ma-direction="1"]:focus-visible {
    color: #105b38;
    background: #dff2e7;
    border-color: #55a578;
    outline: none;
}

.maMatrixPresetButton[data-ma-direction="2"]:hover,
.maMatrixPresetButton[data-ma-direction="2"]:focus-visible {
    color: #8f2f24;
    background: #fde3df;
    border-color: #c86e63;
    outline: none;
}

.maMatrixPresetButton[data-ma-direction="1"].is-active {
    color: #fff;
    background: #247b50;
    border-color: #247b50;
}

.maMatrixPresetButton[data-ma-direction="2"].is-active {
    color: #fff;
    background: #b33a2b;
    border-color: #b33a2b;
}

.maMatrixRows {
    display: grid;
    gap: 7px;
}

.maMatrixRow {
    display: flex;
    min-height: 35px;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 11px;
    flex-wrap: wrap;
}

.enableCheck {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #435a78;
}

.kyutoGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.kyutoGrid label {
    display: grid;
    gap: 6px;
    color: #52657f;
    font-size: 11px;
}

.kyutoGrid label > div {
    display: flex;
    align-items: center;
    gap: 6px;
}

.kyutoGrid input {
    width: 100%;
    min-width: 0;
    height: 35px;
    padding: 0 9px;
    color: var(--navy-950);
    background: var(--surface);
    border: 1px solid #cdd7e5;
    border-radius: 4px;
}

.kyutoGrid small {
    color: var(--muted);
    white-space: nowrap;
}

.kyutoRecommendedButton {
    min-height: 58px;
    align-self: end;
    color: #2358a5;
    background: #eef4fc;
    border: 1px solid #b9cbe4;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
}

.kyutoRecommendedButton:hover,
.kyutoRecommendedButton:focus-visible {
    color: #fff;
    background: #2358a5;
    border-color: #2358a5;
    outline: none;
}

.headerConditionStatus [data-active-count] {
    color: var(--blue-700);
    font-weight: 700;
}

.headerConditionTitles {
    margin-left: 12px;
    color: #435a78;
}

.workspaceTitleRow .headerConditionError {
    color: #c1352b;
    font-weight: 600;
}

.emptyState {
    min-height: 420px;
    padding: 100px 20px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
}

.emptyIcon {
    color: #8aa2c4;
    font-size: 28px;
}

.emptyState h2 {
    margin: 10px 0 4px;
    font-size: 18px;
}

.emptyState p {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 12px;
}

.resultPanel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}

.resultHeader {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.resultHeader > div:first-child {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 3px 9px;
}

.resultActions {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.resultColumnSettingsButton {
    display: inline-grid;
    width: 36px;
    height: 36px;
    padding: 0;
    flex: 0 0 36px;
    place-items: center;
    color: #52657f;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.resultColumnSettingsButton:hover,
.resultColumnSettingsButton:focus-visible,
.resultColumnSettingsButton[aria-expanded="true"] {
    color: var(--blue-700);
    background: var(--blue-050);
    border-color: #7193c4;
    outline: none;
}

.resultHeader h2 {
    margin: 0;
    font-size: 17px;
}

.resultHeader p {
    grid-column: 2;
    margin: 0;
    color: var(--muted);
    font-size: 11px;
}

.famousResultConditions {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: #f7f9fc;
}

.famousResultConditions[hidden] {
    display: none;
}

.famousResultConditions > h3 {
    margin: 0 0 8px;
    color: var(--navy-950);
    font-size: 12px;
}

.famousResultConditionGroup + .famousResultConditionGroup {
    margin-top: 7px;
}

.famousResultConditionGroup summary {
    width: fit-content;
    color: var(--navy-950);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.famousResultConditionItems {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 7px 0 1px 16px;
}

.famousResultConditionItem {
    display: inline-block;
    padding: 4px 7px;
    color: #37465a;
    background: var(--surface);
    border: 1px solid #d8e0ea;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.45;
}

.resultError {
    margin: 14px;
    padding: 10px 12px;
    color: #9c2f23;
    background: #fff1ef;
    border: 1px solid #f0c4bc;
    border-radius: 5px;
}

.searchProgress {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--muted);
}

.searchProgress[hidden] {
    display: none;
}

.searchProgressSpinner {
    width: 42px;
    height: 42px;
    border: 4px solid #dce6f3;
    border-top-color: var(--blue-700);
    border-radius: 50%;
    animation: searchProgressSpin 0.8s linear infinite;
}

.searchProgressLabel {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

@keyframes searchProgressSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .searchProgressSpinner {
        animation-duration: 1.6s;
    }
}

.resultTableWrap {
    max-height: 620px;
    overflow: auto;
}

.resultGrid {
    min-width: 0;
}

.resultTable {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

.resultTable th,
.resultTable td {
    height: 39px;
    padding: 7px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line-soft);
    font-size: 12px;
}

.resultTable th {
    position: sticky;
    z-index: 1;
    top: 0;
    color: #52657f;
    background: #f7f9fc;
    font-size: 11px;
    font-weight: 600;
}

.famousResultColumnHeader {
    min-width: 84px;
    max-width: 130px;
    white-space: nowrap;
}

.famousResultColumnHeader span {
    display: block;
}

.famousResultValueCell {
    max-width: 210px;
    color: #344054;
    white-space: normal;
    line-height: 1.4;
}

.resultTable .famousResultValueCell.numberCell {
    text-align: right;
}

.resultTable .famousResultValueCell.numberCell.is-negative {
    color: #c62828;
}

.resultTable [data-result-column][hidden] {
    display: none;
}

.resultColumnSettingsModal {
    position: fixed;
    z-index: 220;
    inset: 0;
    display: grid;
    padding: 24px;
    place-items: center;
    background: rgba(8, 20, 38, 0.48);
}

.resultColumnSettingsModal[hidden] {
    display: none;
}

.resultColumnSettingsDialog {
    display: grid;
    width: min(820px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    color: var(--navy-950);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 24px 64px rgba(6, 22, 51, 0.3);
    outline: none;
}

.resultColumnSettingsHeader {
    display: flex;
    min-height: 70px;
    padding: 14px 18px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
}

.resultColumnSettingsHeader h2 {
    margin: 2px 0 0;
    font-size: 18px;
}

.resultColumnSettingsClose {
    display: inline-grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    color: #52657f;
    background: transparent;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    font-size: 25px;
    line-height: 1;
}

.resultColumnSettingsClose:hover,
.resultColumnSettingsClose:focus-visible {
    color: var(--blue-700);
    background: var(--blue-050);
    outline: none;
}

.resultColumnSettingsBody {
    padding: 18px;
    overflow: auto;
}

.resultColumnSettingsGroup {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.resultColumnSettingsGroup + .resultColumnSettingsGroup {
    margin-top: 20px;
}

.resultColumnSettingsGroup legend {
    width: 100%;
    margin-bottom: 9px;
    padding: 0 0 6px;
    color: #52657f;
    border-bottom: 1px solid var(--line-soft);
    font-size: 12px;
    font-weight: 700;
}

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

.resultColumnSettingsOptionGrid label {
    display: flex;
    min-height: 38px;
    padding: 8px 10px;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid var(--line-soft);
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
}

.resultColumnSettingsOptionGrid label:hover {
    border-color: #9ab0cf;
}

.resultColumnSettingsOptionGrid input {
    width: 15px;
    height: 15px;
    margin: 0;
    flex: 0 0 15px;
    accent-color: var(--blue-700);
}

.resultColumnSettingsError {
    margin: 0;
    padding: 9px 18px;
    color: #c62828;
    background: #fff5f5;
    border-top: 1px solid #f1cccc;
    font-size: 12px;
}

.resultColumnSettingsError[hidden] {
    display: none;
}

.resultColumnSettingsFooter {
    display: flex;
    padding: 12px 18px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid var(--line);
}

.resultColumnSettingsBulkActions,
.resultColumnSettingsApplyActions {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.has-result-column-settings-modal {
    overflow: hidden;
}

.sortButton {
    display: inline-flex;
    width: 100%;
    padding: 5px 0;
    align-items: center;
    gap: 5px;
    color: inherit;
    font: inherit;
    text-align: inherit;
    white-space: nowrap;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.numberCell .sortButton {
    justify-content: flex-end;
}

.sortButton:hover,
.sortButton:focus-visible,
.resultTable th.is-sorted .sortButton {
    color: var(--blue-700);
    outline: none;
}

.sortIndicator {
    color: #8a99ad;
    font-size: 9px;
}

.resultTable th.is-sorted .sortIndicator {
    color: var(--blue-700);
}

.resultTable tbody tr:hover {
    background: var(--blue-050);
}

.resultTable .numberCell {
    text-align: right;
}

.resultTable .numberCell.is-negative {
    color: #c62828;
    font-weight: 600;
}

.resultPager {
    display: flex;
    min-height: 52px;
    padding: 10px 14px;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.resultPagerTop {
    min-width: 0;
    min-height: 32px;
    padding: 0;
    overflow-x: auto;
    border: 0;
}

.resultPagerBottom {
    border-top: 1px solid var(--line);
}

.pagerPages {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pagerMoveButton,
.pagerPageButton {
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    color: #435a78;
    background: var(--surface);
    border: 1px solid #cdd7e5;
    border-radius: 4px;
    cursor: pointer;
}

.pagerPageButton.is-active {
    color: #fff;
    background: var(--blue-700);
    border-color: var(--blue-700);
}

.pagerMoveButton:hover:not(:disabled),
.pagerPageButton:hover:not(.is-active) {
    color: var(--blue-700);
    background: var(--blue-050);
}

.pagerMoveButton:disabled {
    cursor: default;
    opacity: 0.45;
}

.pagerEllipsis,
.pagerSummary {
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}

.pagerEllipsis {
    padding: 0 2px;
}

.resultEmpty {
    border: 0;
    border-radius: 0;
}

.chartComparePanel {
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
}

.chartCompareHeader {
    display: flex;
    min-height: 76px;
    padding: 14px 16px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--line);
}

.chartCompareTitle {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 3px 9px;
}

.chartCompareTitle h2 {
    margin: 0;
    font-size: 17px;
}

.chartCompareTitle p {
    grid-column: 2;
    margin: 0;
    color: var(--muted);
    font-size: 11px;
}

.chartCompareControls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.chartPager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.chartPager[hidden] {
    display: none;
}

.chartPagerSettings {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
}

.chartSettingsButton {
    display: inline-grid;
    width: 36px;
    height: 36px;
    padding: 0;
    flex: 0 0 36px;
    place-items: center;
    color: #52657f;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.chartSettingsButton:hover,
.chartSettingsButton:focus-visible,
.chartSettingsButton[aria-expanded="true"] {
    color: var(--blue-700);
    background: var(--blue-050);
    border-color: #7193c4;
    outline: none;
}

.chartSettingsPopover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    display: grid;
    width: 290px;
    padding: 14px;
    gap: 10px;
    color: var(--navy-950);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 7px;
    box-shadow: 0 12px 30px rgba(24, 42, 68, 0.18);
}

.chartSettingsPopover[hidden] {
    display: none;
}

.chartSettingsPopover h3 {
    margin: 0;
    font-size: 14px;
}

.chartSettingsPopover .chartSettingsLabel {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}

.chartCompareControls .chartSettingsPopover label {
    display: flex;
    min-height: 34px;
    padding: 7px 9px;
    align-items: center;
    gap: 8px;
    color: #405673;
    background: #f7f9fc;
    border-radius: 5px;
    cursor: pointer;
}

.chartSettingsPopover input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--blue-700);
}

.chartPagerBottom {
    min-height: 58px;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
}

.chartCompareControls label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 12px;
}

.chartCompareControls select {
    height: 36px;
    padding: 0 28px 0 10px;
    color: var(--navy-950);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
}

.chartCompareGrid {
    --chart-items-per-row: 2;
    display: grid;
    grid-template-columns: repeat(var(--chart-items-per-row), minmax(280px, 1fr));
    gap: 12px;
    padding: 14px;
    overflow-x: auto;
}

.chartCompareGrid[hidden],
.chartMessage[hidden] {
    display: none;
}

.chartCompareCard {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.chartCardHeader {
    display: flex;
    min-height: 64px;
    padding: 10px 12px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    background: #f7f9fc;
    border-bottom: 1px solid var(--line-soft);
}

.chartCardIdentity {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 2px 8px;
}

.chartCardIdentity .stockCodeLink {
    color: var(--blue-700);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.chartCardIdentity h3 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chartCardIdentity p {
    display: flex;
    grid-column: 1 / -1;
    margin: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 8px;
    color: var(--muted);
    font-size: 11px;
}

.chartCardChange.is-negative {
    color: #c62828;
    font-weight: 600;
}

.chartCardChangeSummary {
    white-space: nowrap;
}

.chartCardChange.is-positive {
    color: #16803c;
    font-weight: 600;
}

.chartMount {
    width: 100%;
    min-height: 270px;
}

.chartMessage {
    display: grid;
    min-height: 270px;
    margin: -270px 0 0;
    place-items: center;
    color: var(--muted);
    font-size: 12px;
}

.chartCompareEmpty {
    border: 0;
    border-radius: 0;
}

[data-open-chart-comparison]:disabled {
    cursor: default;
}

@media (max-width: 760px) {
    .workspaceTitleRow {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .workspaceActions {
        width: 100%;
        justify-content: stretch;
    }

    .workspaceActions .button {
        min-width: 0;
        flex: 1;
        padding: 0 10px;
    }

    .conditionBuilder {
        grid-template-columns: 1fr;
    }

    .conditionCategories {
        display: flex;
        gap: 4px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        overflow-x: auto;
    }

    .conditionCategory {
        width: auto;
        min-width: 110px;
        flex: 0 0 auto;
        text-align: center;
    }

    .conditionCategory.is-active::after,
    .conditionCategory small {
        display: none;
    }

    .conditionCanvas {
        padding: 18px 14px;
    }

    .conditionGrid {
        grid-template-columns: 1fr;
    }

    .basicConditionGrid,
    .famousInvestorGrid,
    .metricsConditionGrid,
    .fourColumnConditionGrid {
        grid-template-columns: 1fr;
    }

    .basicFieldFull,
    .basicFieldHalf,
    .metricFieldQuarter,
    .metricFieldRowStart {
        grid-column: auto;
    }

    .commonRecommendedGrid {
        grid-template-columns: 1fr;
    }

    .technicalDeviationRow,
    .technicalSecondaryRow {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .famousInvestorBoxHeader {
        grid-template-columns: auto auto 1fr auto;
        gap: 8px;
        padding: 0 10px;
    }

    .famousInvestorHeaderActions {
        gap: 3px;
    }

    .famousInvestorReset,
    .famousInvestorBulkButton {
        padding: 0 6px;
        font-size: 10px;
    }

    .buffettCondition,
    .buffettConditionDebt {
        grid-template-columns: 1fr auto;
        padding: 10px 0;
        gap: 4px 8px;
    }

    .buffettConditionDescription {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .buffettConditionValue {
        grid-column: 2;
        grid-row: 1;
    }

    .buffettConditionDebt > :nth-child(1) {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .buffettConditionDebt > :nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    .buffettConditionDebt > :nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }

    .buffettConditionDebt > :nth-child(4) {
        grid-column: 1 / -1;
        grid-row: 3;
        text-align: center;
    }

    .buffettConditionDebt > :nth-child(5) {
        grid-column: 1;
        grid-row: 4;
    }

    .buffettConditionDebt > :nth-child(6) {
        grid-column: 2;
        grid-row: 4;
    }

    .lynchCondition {
        grid-template-columns: 1fr;
        padding: 10px 0;
        gap: 6px;
    }

    .lynchConditionValue {
        flex-wrap: wrap;
    }

    .kyutoGrid {
        grid-template-columns: 1fr;
    }

    .fieldCardWide {
        grid-column: auto;
    }

    .resultHeader {
        display: flex;
        align-items: stretch;
        flex-direction: column;
    }

    .resultPagerTop {
        justify-content: flex-start;
    }

    .resultActions {
        width: 100%;
    }

    .resultActions .button {
        min-width: 0;
        flex: 1;
        padding: 0 10px;
    }

    .resultColumnSettingsModal {
        padding: 12px;
    }

    .resultColumnSettingsDialog {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
    }

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

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

    .resultColumnSettingsBulkActions,
    .resultColumnSettingsApplyActions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chartCompareHeader,
    .chartCompareControls {
        align-items: stretch;
        flex-direction: column;
    }

    .chartCompareControls label {
        justify-content: space-between;
    }

}

@media (max-width: 460px) {
    .resultColumnSettingsOptionGrid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .screeningWorkspace {
        padding-top: 20px;
    }

    .workspaceTitleRow > div:first-child {
        grid-template-columns: auto 1fr;
    }

    .workspaceTitleRow p {
        grid-column: 1 / -1;
    }

}
.stockCodeLink {
    padding: 0;
    color: #2358a5;
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
}

.stockCodeLink:hover {
    text-decoration: underline;
}

.stockDetailWindow {
    position: fixed;
    z-index: 100;
    top: 72px;
    right: 16px;
    bottom: 16px;
    display: grid;
    width: 60vw;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
    background: #fff;
    border: 1px solid #c7d2e2;
    border-radius: 10px;
    box-shadow: 0 18px 48px rgba(6, 22, 51, 0.25);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(0.99);
    visibility: hidden;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}

.stockDetailWindow.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    visibility: visible;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.stockDetailWindow.is-centered {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    height: calc(100vh - 88px);
    transform: translate(-50%, calc(-50% + 8px)) scale(0.99);
}

.stockDetailWindow.is-centered.is-open {
    transform: translate(-50%, -50%) scale(1);
}

.stockDetailWindowFrame {
    width: 100%;
    height: 100%;
    background: #f3f5f8;
    border: 0;
}