:root {
  font-family: "Noto Sans Thai", "Microsoft YaHei UI", "Yu Gothic UI", "Malgun Gothic", "Tahoma", sans-serif;
  color: #22283b;
  background: #f7f8fc;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --muted: #858b9b;
  --line: #eceef4;
  --navy: #252b40;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f7f8fc; }
button, input, select { font: inherit; }
button { color: inherit; }
.page-shell { max-width: 1120px; padding: 0 32px; margin: 0 auto; }
.topbar { height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ebedf3; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); }
.brand-icon { width: 34px; height: 34px; display: grid; place-items: center; color: #4f65df; }
.brand-icon svg { width: 34px; height: 34px; }
.brand-name, .footer-brand { font-size: 18px; font-weight: 800; letter-spacing: -.5px; }
.brand-dot { color: #6576e8; }
.topbar-note { color: #767d90; font-size: 12px; display: flex; align-items: center; gap: 8px; }
.privacy-dot { width: 7px; height: 7px; background: #49c98b; border-radius: 50%; box-shadow: 0 0 0 3px #e4f7ed; }
.intro { min-height: 270px; display: flex; align-items: center; justify-content: space-between; position: relative; overflow: hidden; }
.intro-copy { max-width: 700px; padding: 31px 0 39px; position: relative; z-index: 1; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: #6271dd; font-size: 12px; font-weight: 700; margin-bottom: 17px; letter-spacing: .2px; }
.eyebrow-line { width: 20px; height: 2px; background: #7381ee; border-radius: 3px; }
h1 { margin: 0; font-size: clamp(34px, 4.2vw, 48px); line-height: 1.29; letter-spacing: -1.8px; color: #252b40; font-weight: 800; }
h1 span { color: #6676df; }
.intro-text { font-size: 14px; line-height: 1.8; margin: 14px 0 0; color: #777e91; }
.intro-cta { margin-top: 17px; min-height: 42px; padding: 0 17px; font-size: 12px; }
.intro-trust { margin: 8px 0 0; color: #858b9b; font-size: 10px; }
.intro-decoration { width: 285px; height: 225px; position: absolute; right: 26px; top: 19px; }
.deco-orbit { position: absolute; border: 1px solid #e5e8f8; border-radius: 50%; transform: rotate(-25deg); }
.orbit-one { width: 245px; height: 143px; right: 0; top: 40px; }
.orbit-two { width: 200px; height: 111px; right: 22px; top: 55px; border-color: #edf0fa; }
.deco-center { width: 100px; height: 100px; position: absolute; top: 62px; right: 73px; border-radius: 32px; background: linear-gradient(145deg, #7787f0, #5c6bd3); box-shadow: 0 18px 35px #6978de40; display: grid; place-items: center; transform: rotate(-9deg); }
.deco-center span { font-size: 55px; line-height: 1; font-weight: 700; color: white; transform: rotate(9deg); }
.deco-star { position: absolute; color: #f0b95a; }
.star-one { top: 42px; right: 52px; font-size: 24px; }
.star-two { top: 147px; right: 202px; color: #94d8ba; font-size: 17px; }
.deco-pill { position: absolute; top: 169px; right: 14px; color: #606b9e; background: white; border: 1px solid #eef0f8; box-shadow: 0 7px 22px #303c7110; padding: 8px 15px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.tool-finder { padding: 28px 30px 26px; margin-bottom: 24px; background: white; border: 1px solid #eaedf4; border-radius: 18px; box-shadow: 0 18px 50px #3039580b; }
.finder-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.finder-heading h2 { margin: 0; color: #272d41; font-size: 21px; letter-spacing: -.5px; }
.finder-heading p { margin: 5px 0 0; color: #8a90a0; font-size: 11px; }
.search-wrap { width: 255px; height: 40px; padding: 0 10px 0 12px; display: flex; align-items: center; gap: 8px; background: #fbfbfd; border: 1px solid #e9ebf1; border-radius: 8px; color: #9298a7; }
.search-wrap:focus-within { border-color: #9aa6f2; box-shadow: 0 0 0 3px #7584ec17; }
.search-wrap > span { font-size: 21px; line-height: 1; }
.search-wrap input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 11px; color: #292f42; }
.search-wrap kbd { padding: 2px 5px; border: 1px solid #e7e9ef; border-radius: 4px; color: #999eab; background: white; font: 10px "Noto Sans Thai", sans-serif; }
.category-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 21px 0 22px; padding-bottom: 18px; border-bottom: 1px solid #f0f1f5; }
.category-filter { border: 1px solid #eceef4; border-radius: 20px; padding: 7px 12px; background: white; color: #747b8e; font-size: 10px; cursor: pointer; transition: .15s; }
.category-filter:hover { background: #f8f9fd; }
.category-filter.active { border-color: #dce1ff; color: #5969d1; background: #f0f2ff; font-weight: 700; }
.category-filter span { margin-left: 4px; color: #818bdd; }
.tool-groups { display: grid; gap: 22px; }
.group-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.group-icon { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 12px; font-size: 14px; font-weight: 700; box-shadow: 0 3px 8px #3039580a; }
.group-icon svg { width: 20px; height: 20px; }
.group-heading h3 { margin: 0; color: #343a4e; font-size: 12px; }
.group-heading p { margin: 2px 0 0; color: #979cab; font-size: 9px; }
.group-count { margin-left: auto; color: #a1a6b2; font-size: 9px; white-space: nowrap; }
.tool-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-left: 42px; }
.tool-card { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 12px; text-align: left; border: 1px solid #eceef4; border-radius: 10px; background: white; cursor: pointer; transition: .16s ease; }
.tool-card:hover { border-color: #d9def8; background: #fcfcff; transform: translateY(-1px); box-shadow: 0 5px 15px #39425b0a; }
.tool-card.selected { border-color: #cdd4ff; background: #f9faff; box-shadow: inset 3px 0 #6878e3; }
.tool-card:focus-visible, .category-filter:focus-visible { outline: 3px solid #8390ed88; outline-offset: 2px; }
.card-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; font-size: 15px; font-weight: 700; }
.blue-icon { background: #eaf2ff; color: #5782c5; }
.card-copy { min-width: 0; display: grid; gap: 4px; }
.card-copy strong { overflow: hidden; color: #42485b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.card-copy small { overflow: hidden; color: #969bab; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.card-arrow { margin-left: auto; color: #a5aabd; font-size: 15px; }
.no-tools { margin: 18px 0 3px; color: #858b9b; font-size: 12px; text-align: center; }
.tool-results { margin: 10px 0 0; color: #858b9b; font-size: 10px; text-align: right; }
.tool-card[hidden], .tool-group[hidden], .no-tools[hidden] { display: none; }
.workspace { background: white; border: 1px solid #eaedf4; border-radius: 18px; box-shadow: 0 18px 50px #3039580b; overflow: hidden; }
.workspace { scroll-margin-top: 18px; }
.pricing-guide { margin: 29px 0 22px; padding: 28px 30px; border: 1px solid #eaedf4; border-radius: 16px; background: white; box-shadow: 0 18px 50px #3039580b; }
.pricing-guide h2 { margin: 0; color: #272d41; font-size: 21px; letter-spacing: -.4px; }
.pricing-guide-intro { max-width: 800px; margin: 9px 0 17px; color: #777e91; font-size: 12px; line-height: 1.8; }
.pricing-formula { display: grid; gap: 7px; padding: 16px; border: 1px solid #e5e9ff; border-radius: 10px; background: #f7f8ff; color: #5969d1; }
.pricing-formula span { font-size: 10px; font-weight: 700; }
.pricing-formula strong { font-size: 14px; line-height: 1.7; }
.pricing-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 15px 0; }
.pricing-guide-grid article { padding: 15px; border: 1px solid #eceef4; border-radius: 10px; }
.pricing-guide-grid h3 { margin: 0 0 6px; color: #42485b; font-size: 12px; }
.pricing-guide-grid p, .pricing-faq p { margin: 0; color: #777e91; font-size: 11px; line-height: 1.8; }
.pricing-guide-grid strong { color: #4e5fc3; }
.pricing-faq { padding: 12px 2px; border-bottom: 1px solid #eceef4; }
.pricing-faq summary { color: #42485b; font-size: 11px; font-weight: 700; cursor: pointer; }
.pricing-faq p { padding: 8px 0 0 17px; }
.pricing-guide-note { margin: 14px 0 0; color: #858b9b; font-size: 10px; line-height: 1.7; }
.mint-icon { background: #e7f8ef; color: #39a975; }
.lilac-icon { background: #efedff; color: #7968d5; }
.peach-icon { background: #fff1e9; color: #e79460; }
.gold-icon { background: #fff7df; color: #bb8a20; }
.teal-icon { background: #e4f7f6; color: #319a96; }
.calculator-panel { padding: 31px 39px 37px; }
.calculator-panel[hidden] { display: none; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 25px; }
.section-kicker { font-size: 9px; color: #9aa0b1; font-weight: 700; letter-spacing: 1.6px; margin-bottom: 6px; }
.panel-heading h2 { font-size: 21px; margin: 0; letter-spacing: -.5px; color: #272d41; }
.panel-heading p { font-size: 12px; color: #8a90a0; margin: 6px 0 0; }
.heading-badge { border-radius: 20px; font-size: 10px; font-weight: 700; padding: 7px 11px; }
.mint-badge { color: #369970; background: #e9f8f0; }
.lilac-badge { color: #7566d1; background: #f0edff; }
.peach-badge { color: #d9804a; background: #fff1e8; }
.calculator-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; align-items: stretch; }
.form-column { display: flex; flex-direction: column; }
.field-label { font-size: 11px; font-weight: 700; color: #4d5365; margin: 0 0 7px; display: flex; justify-content: space-between; }
.field-label span { color: #9a9eab; font-weight: 400; font-size: 10px; }
.input-wrap, .select-wrap { height: 43px; width: 100%; display: flex; align-items: center; background: #fbfbfd; border: 1px solid #e9ebf1; border-radius: 8px; transition: .15s; }
.input-wrap:focus-within, .select-wrap:focus-within { border-color: #9aa6f2; box-shadow: 0 0 0 3px #7584ec17; }
.input-wrap input { width: 100%; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: #292f42; font-size: 13px; font-weight: 600; padding: 0 12px; }
.input-wrap input[readonly] { color: #7e8493; cursor: default; }
.input-prefix { color: #a0a5b4; font-size: 12px; padding-left: 12px; }
.input-prefix + input { padding-left: 7px; }
.input-suffix { color: #8e94a3; font-size: 11px; padding: 0 12px 0 2px; white-space: nowrap; }
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
.field-row > div { min-width: 0; }
.field-row .field-label { min-height: 17px; }
.field-hint { color: #9a9eab; font-size: 10px; margin: 7px 0 0; line-height: 1.6; }
.cost-breakdown-title { margin: 0 0 3px; color: #4d5365; font-size: 12px; }
.cost-breakdown-hint { margin: 0 0 13px; }
.cost-component-row { gap: 10px; margin: 10px 0; }
.cost-component-row .field-label { font-size: 10px; }
.profit-mode-wrap { height: 34px; margin-bottom: 7px; }
.profit-mode-wrap select { font-size: 10px; }
.profit-mode-hint { min-height: 16px; margin-top: 5px; }
.result-card { min-height: 255px; border-radius: 13px; padding: 22px 24px 17px; display: flex; flex-direction: column; }
.mint-result { background: #f0faf4; }
.lilac-result { background: #f6f4ff; }
.peach-result { background: #fff7f1; }
.blue-result { background: #f1f6ff; }
.blue-result .result-icon { color: #5782c5; background: #e3edff; }
.blue-result .result-divider { background: #e0e9f8; }
.result-topline { display: flex; align-items: center; gap: 8px; color: #6f778a; font-size: 11px; font-weight: 600; }
.result-icon { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 8px; color: #369970; background: #ddf4e7; font-size: 14px; }
.lilac-result .result-icon { color: #7566d1; background: #ebe7ff; }
.peach-result .result-icon { color: #df8b54; background: #ffebdc; }
.result-value { font-size: clamp(29px, 3.7vw, 39px); font-weight: 800; letter-spacing: -1.4px; color: #252b40; margin-top: 13px; line-height: 1.25; }
.result-caption { font-size: 10px; color: #9096a5; margin-top: 3px; }
.result-divider { height: 1px; background: #dfeee5; margin: 17px 0 13px; }
.lilac-result .result-divider { background: #e7e3f5; }
.peach-result .result-divider { background: #f3e6db; }
.blue-badge { color: #5279b6; background: #eaf2ff; }
.breakdown-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 10px; color: #848a99; margin: 0 0 9px; }
.breakdown-row strong { color: #42485b; font-size: 11px; font-weight: 700; white-space: nowrap; }
.result-footnote { font-size: 9px; color: #999eaa; margin-top: auto; padding-top: 8px; line-height: 1.5; }
.field-divider { height: 1px; background: #eff0f4; margin: 5px 0 15px; }
.severance-box { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; margin-top: 4px; background: #eeebff; border-radius: 8px; }
.severance-box > div { display: grid; gap: 3px; }
.severance-label { font-size: 9px; color: #87809f; }
.severance-box strong { font-size: 15px; color: #453c83; }
.severance-days { border-radius: 12px; padding: 5px 8px; background: #e3dfff; color: #7265bc; font-weight: 700; font-size: 9px; }
.legal-note { color: #9296a2; font-size: 10px; line-height: 1.7; margin: 17px 0 0; }
.legal-note strong { color: #717789; }
.select-wrap { position: relative; margin-bottom: 16px; }
.select-wrap select { appearance: none; width: 100%; height: 100%; border: 0; outline: 0; background: transparent; padding: 0 34px 0 12px; font-size: 12px; font-weight: 600; color: #42485b; cursor: pointer; }
.select-wrap > span { pointer-events: none; position: absolute; right: 13px; color: #9298a7; font-size: 18px; top: 7px; }
.rate-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rate-option { border: 1px solid #e9ebf1; border-radius: 8px; background: #fbfbfd; min-height: 60px; text-align: left; padding: 9px 11px; cursor: pointer; display: grid; gap: 4px; transition: .15s; }
.rate-option strong { font-size: 15px; color: #555d72; }
.rate-option small { color: #9298a7; font-size: 9px; }
.rate-option.active { border-color: #e8b992; background: #fffaf5; box-shadow: 0 0 0 2px #f3b98a20; }
.rate-option.active strong { color: #d8834d; }
.rate-option:focus-visible, a:focus-visible { outline: 3px solid #8390ed88; outline-offset: 2px; }
.page-footer { display: flex; align-items: center; gap: 15px; padding: 27px 2px 34px; color: #a0a4b0; font-size: 10px; }
.footer-brand { color: #656b7e; font-size: 13px; }
.page-footer a { margin-left: auto; text-decoration: none; color: #727be0; font-weight: 600; }
.topbar-actions, .finder-actions, .export-actions { display: flex; align-items: center; gap: 10px; }
.language-picker { display: flex; align-items: center; gap: 6px; color: #858b9b; font-size: 9px; white-space: nowrap; }
.language-picker select { max-width: 112px; height: 34px; border: 1px solid #e7e9f0; border-radius: 7px; padding: 0 8px; background: white; color: #52596d; font-size: 10px; cursor: pointer; }
.utility-button, .primary-button { min-height: 36px; border: 1px solid #e7e9f0; border-radius: 8px; padding: 0 11px; background: white; color: #5d6478; font-size: 10px; font-weight: 600; cursor: pointer; transition: .15s; white-space: nowrap; }
.utility-button:hover { background: #f6f7fc; border-color: #d9def1; }
.theme-toggle { display: inline-flex; align-items: center; gap: 7px; }
.theme-toggle span:first-child { font-size: 15px; }
.assistant-toggle { color: #5d68c5; border-color: #e0e4ff; background: #f7f8ff; }
.assistant-panel { padding: 15px; margin: 17px 0 0; border: 1px solid #e8eaff; border-radius: 10px; background: #f9faff; }
.assistant-panel[hidden] { display: none; }
.assistant-panel label { display: block; margin-bottom: 8px; color: #555d72; font-size: 11px; font-weight: 700; }
.assistant-input-row { display: flex; gap: 8px; }
.assistant-input-row input { min-width: 0; flex: 1; height: 38px; padding: 0 11px; border: 1px solid #e7e9f0; border-radius: 7px; outline: 0; background: white; color: #30364a; font-size: 11px; }
.assistant-input-row input:focus { border-color: #9aa6f2; box-shadow: 0 0 0 3px #7584ec17; }
.assistant-panel p { margin: 8px 0 0; color: #82899b; font-size: 10px; line-height: 1.6; }
.primary-button { border-color: #6878e3; background: #6878e3; color: white; }
.primary-button:hover { background: #5869d4; }
.primary-button:disabled, .text-button:disabled { opacity: .6; cursor: wait; }
.data-center { margin: 29px 0 22px; }
.data-center-heading { margin-bottom: 15px; }
.data-center-heading h2 { margin: 0; color: #272d41; font-size: 19px; }
.data-center-heading p { margin: 5px 0 0; color: #8a90a0; font-size: 11px; }
.data-center-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.data-card { padding: 18px; border: 1px solid #eaedf4; border-radius: 12px; background: white; }
.data-card-top { display: flex; align-items: center; gap: 8px; }
.data-card-top strong { color: #3f4558; font-size: 11px; }
.source-tag { margin-left: auto; padding: 4px 7px; border-radius: 12px; background: #edf8f1; color: #368660; font-size: 8px; white-space: nowrap; }
.official-tag { background: #eff2ff; color: #5d6ac2; }
.live-indicator { width: 8px; height: 8px; border-radius: 50%; background: #52c28a; box-shadow: 0 0 0 3px #e6f7ed; }
.source-icon { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 7px; background: #efedff; color: #7566d1; font-size: 12px; font-weight: 700; }
.data-card > p { margin: 10px 0; color: #858b9b; font-size: 10px; line-height: 1.7; }
.data-status { min-height: 16px; color: #777e91; font-size: 9px; }
.text-button { margin-top: 8px; padding: 0; border: 0; background: transparent; color: #5969d1; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.stock-suggestions { position: relative; z-index: 3; display: grid; max-height: 260px; overflow: auto; margin: -12px 0 14px; border: 1px solid #e7e9f0; border-radius: 8px; background: white; box-shadow: 0 12px 28px #30395818; }
.asset-mode-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 20px; padding: 5px; border: 1px solid #eaedf4; border-radius: 10px; background: #f7f8fc; }
.asset-mode-button { min-height: 38px; border: 0; border-radius: 7px; background: transparent; color: #747b8e; font-size: 10px; font-weight: 650; cursor: pointer; }
.asset-mode-button.active, .asset-mode-button[aria-selected="true"] { background: white; color: #4e5fc3; box-shadow: 0 1px 5px #28345416; }
.asset-step-title { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; color: #42485b; font-size: 11px; }
.asset-step-title > span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #edf0ff; color: #5969d1; font-size: 10px; font-weight: 750; }
.asset-step-two, .asset-step-three { margin-top: 17px; }
.distribution-details { margin: 13px 0; padding: 10px 11px; border: 1px solid #eaedf4; border-radius: 8px; background: #fafbfe; }
.distribution-details[hidden], .distribution-result[hidden], .quick-assets[hidden] { display: none; }
.distribution-details summary { color: #5969d1; font-size: 10px; font-weight: 650; cursor: pointer; }
.distribution-details .field-row { margin-top: 12px; }
.sell-position { margin-top: 15px; padding: 13px; border: 1px solid #e5e9f5; border-radius: 9px; background: #f9faff; }
.sell-position[hidden] { display: none; }
.sell-position .asset-step-title { margin-top: 0; }
.sell-position .field-row { margin: 10px 0; }
.sell-preview { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 9px 0; color: #777e91; font-size: 10px; }
.sell-preview strong { color: #42485b; font-size: 12px; }
.sell-button { margin-top: 4px; }
.sales-history { margin: 16px 0; border: 1px solid #eaedf4; border-radius: 9px; }
.sales-history summary { padding: 12px; color: #5969d1; font-size: 10px; font-weight: 650; cursor: pointer; }
.sales-history .portfolio-table-wrap { border: 0; border-top: 1px solid #eaedf4; border-radius: 0 0 9px 9px; }
.sales-table { min-width: 680px; }
.quick-assets { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: -5px 0 14px; }
.quick-assets > span { width: 100%; color: #858b9b; font-size: 9px; }
.asset-quick-button { padding: 6px 9px; border: 1px solid #e4e7f0; border-radius: 7px; background: #fafbfe; color: #5969d1; font-size: 9px; font-weight: 650; cursor: pointer; }
.asset-quick-button:hover, .asset-quick-button:focus-visible { border-color: #9da8f0; background: #f2f4ff; outline: 0; }
.stock-suggestions[hidden] { display: none; }
.stock-suggestion { display: grid; gap: 3px; padding: 9px 11px; border: 0; border-bottom: 1px solid #f0f1f5; background: transparent; text-align: left; cursor: pointer; }
.stock-suggestion:last-child { border-bottom: 0; }
.stock-suggestion:hover, .stock-suggestion:focus-visible { background: #f5f7ff; outline: 0; }
.stock-suggestion strong { color: #42485b; font-size: 10px; }
.stock-suggestion span { color: #9298a7; font-size: 9px; }
.stock-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 3px 0 8px; }
.stock-actions .text-button { margin: 0; }
.portfolio-section { margin-top: 29px; padding-top: 24px; border-top: 1px solid #eceef4; }
.portfolio-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.portfolio-heading h3 { margin: 0; color: #343a4e; font-size: 14px; }
.portfolio-heading p { margin: 4px 0 0; color: #9298a7; font-size: 10px; }
.portfolio-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.portfolio-summary > div { min-width: 0; display: grid; gap: 7px; padding: 12px; border: 1px solid #eaedf4; border-radius: 9px; background: #fafbfe; }
.portfolio-summary span { color: #858b9b; font-size: 9px; }
.portfolio-summary strong { overflow-wrap: anywhere; color: #42485b; font-size: 12px; }
.portfolio-table-wrap { width: 100%; overflow-x: auto; border: 1px solid #eaedf4; border-radius: 9px; }
.portfolio-table { width: 100%; min-width: 760px; border-collapse: collapse; text-align: left; }
.portfolio-table th, .portfolio-table td { padding: 10px 9px; border-bottom: 1px solid #eff0f4; color: #656c7e; font-size: 9px; white-space: nowrap; }
.portfolio-table th { background: #f7f8fc; color: #777e91; font-weight: 700; }
.portfolio-table tr:last-child td { border-bottom: 0; }
.portfolio-table td:first-child { display: grid; gap: 3px; }
.portfolio-table td small { max-width: 160px; overflow: hidden; color: #9298a7; text-overflow: ellipsis; }
.portfolio-symbol-button { width: fit-content; padding: 0; border: 0; background: none; color: #5969d1; font-size: 10px; font-weight: 700; cursor: pointer; }
.table-action { min-width: 28px; min-height: 28px; margin-right: 3px; border: 1px solid #e7e9f0; border-radius: 7px; background: white; color: #6673d6; font-size: 14px; cursor: pointer; }
.remove-action { color: #c75d5d; }
.sell-row-action { padding: 0 7px; color: #5969d1; font-size: 9px; font-weight: 650; }
.positive-value { color: #31956c !important; }
.negative-value { color: #c75d5d !important; }
.portfolio-empty { margin: 12px; color: #9298a7; font-size: 10px; text-align: center; }
.portfolio-empty[hidden] { display: none; }
.favorites-heading { margin-top: 22px; }
.watchlist-list { display: grid; gap: 7px; }
.watchlist-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid #eaedf4; border-radius: 8px; }
.watchlist-select { min-width: 0; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.watchlist-select strong { overflow: hidden; color: #42485b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.watchlist-select span { color: #656c7e; font-size: 10px; white-space: nowrap; }
.source-links { display: flex; flex-wrap: wrap; gap: 8px 13px; margin-top: 13px; }
.source-links a { color: #5969d1; font-size: 10px; font-weight: 600; text-decoration: none; }
.source-links a:hover { text-decoration: underline; }
.export-bar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 19px; margin: 0 0 17px; border: 1px solid #eaedf4; border-radius: 12px; background: white; }
.export-bar > div:first-child { display: grid; gap: 4px; }
.export-bar strong { color: #41475a; font-size: 11px; }
.export-bar span { color: #9298a7; font-size: 9px; }
.notice-panel { padding: 20px 23px; margin-bottom: 8px; border: 1px solid #f1e7cf; border-radius: 12px; background: #fffdf8; }
.notice-heading { display: flex; align-items: flex-start; gap: 11px; }
.notice-icon { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; background: #fff0d1; color: #a97822; font-size: 13px; font-weight: 800; }
.notice-heading h2 { margin: 0; color: #504a3e; font-size: 13px; }
.notice-heading p { margin: 4px 0 0; color: #8c8576; font-size: 10px; }
.notice-panel ul { margin: 13px 0 0; padding-left: 37px; color: #797466; font-size: 10px; line-height: 1.8; }
.swap-button { width: 34px; height: 34px; flex: 0 0 auto; align-self: end; margin: 0 auto 4px; border: 1px solid #e7e9f0; border-radius: 50%; background: white; color: #6d77cd; cursor: pointer; }
.currency-row { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); align-items: end; }
.currency-row .select-wrap { margin-bottom: 0; }
.currency-row .field-label { min-height: auto; }
.search-wrap input:focus, .input-wrap input:focus { outline: 0; }

html[data-theme="dark"] { color-scheme: dark; color: #e5e8f2; background: #171b28; --muted: #a0a7bb; --line: #34394b; --navy: #e5e8f2; }
html[data-theme="dark"] body { background: #171b28; }
html[data-theme="dark"] .topbar { border-color: #303548; }
html[data-theme="dark"] .language-picker { color: #a2a8b9; }
html[data-theme="dark"] .language-picker select { background: #252b3c; border-color: #3a4053; color: #e5e8f2; }
html[data-theme="dark"] .topbar-note, html[data-theme="dark"] .intro-text, html[data-theme="dark"] .finder-heading p, html[data-theme="dark"] .panel-heading p, html[data-theme="dark"] .data-center-heading p { color: #a2a8b9; }
html[data-theme="dark"] h1, html[data-theme="dark"] .finder-heading h2, html[data-theme="dark"] .panel-heading h2, html[data-theme="dark"] .data-center-heading h2 { color: #edf0f8; }
html[data-theme="dark"] .workspace, html[data-theme="dark"] .tool-finder, html[data-theme="dark"] .data-card, html[data-theme="dark"] .export-bar { background: #202536; border-color: #34394b; box-shadow: 0 18px 50px #090b121c; }
html[data-theme="dark"] .category-filters { border-color: #34394b; }
html[data-theme="dark"] .category-filter, html[data-theme="dark"] .tool-card, html[data-theme="dark"] .utility-button, html[data-theme="dark"] .swap-button { background: #252b3c; border-color: #3a4053; color: #c3c8d6; }
html[data-theme="dark"] .category-filter:hover, html[data-theme="dark"] .tool-card:hover, html[data-theme="dark"] .utility-button:hover { background: #2c3347; }
html[data-theme="dark"] .category-filter.active, html[data-theme="dark"] .tool-card.selected { background: #2c3150; border-color: #555fa7; color: #d9ddff; }
html[data-theme="dark"] .card-copy strong, html[data-theme="dark"] .group-heading h3, html[data-theme="dark"] .data-card-top strong, html[data-theme="dark"] .export-bar strong { color: #e0e4ef; }
html[data-theme="dark"] .card-copy small, html[data-theme="dark"] .group-heading p, html[data-theme="dark"] .group-count, html[data-theme="dark"] .export-bar span { color: #a0a7ba; }
html[data-theme="dark"] .calculator-panel { color: #e5e8f2; }
html[data-theme="dark"] .field-label { color: #d0d5e2; }
html[data-theme="dark"] .input-wrap, html[data-theme="dark"] .select-wrap, html[data-theme="dark"] .search-wrap { background: #191e2c; border-color: #3a4053; }
html[data-theme="dark"] .input-wrap input, html[data-theme="dark"] .select-wrap select, html[data-theme="dark"] .search-wrap input { color: #e5e8f2; }
html[data-theme="dark"] .input-wrap input[readonly] { color: #a0a7ba; }
html[data-theme="dark"] .result-card, html[data-theme="dark"] .mint-result, html[data-theme="dark"] .lilac-result, html[data-theme="dark"] .peach-result, html[data-theme="dark"] .blue-result { background: #282e40; }
html[data-theme="dark"] .result-value { color: #f0f2f8; }
html[data-theme="dark"] .result-topline, html[data-theme="dark"] .breakdown-row { color: #b2b8c8; }
html[data-theme="dark"] .breakdown-row strong { color: #e1e4ed; }
html[data-theme="dark"] .result-divider, html[data-theme="dark"] .lilac-result .result-divider, html[data-theme="dark"] .peach-result .result-divider, html[data-theme="dark"] .blue-result .result-divider { background: #3b4256; }
html[data-theme="dark"] .severance-box { background: #373350; }
html[data-theme="dark"] .severance-box strong { color: #e5e0ff; }
html[data-theme="dark"] .rate-option { background: #202536; border-color: #3a4053; }
html[data-theme="dark"] .rate-option strong { color: #d4d8e4; }
html[data-theme="dark"] .rate-option.active { background: #37302d; border-color: #986f51; }
html[data-theme="dark"] .assistant-panel { background: #252b3c; border-color: #3b4260; }
html[data-theme="dark"] .assistant-panel label, html[data-theme="dark"] .assistant-panel p { color: #c1c7d7; }
html[data-theme="dark"] .assistant-input-row input { background: #191e2c; border-color: #3a4053; color: #e5e8f2; }
html[data-theme="dark"] .stock-suggestions, html[data-theme="dark"] .watchlist-item { background: #202536; border-color: #3a4053; }
html[data-theme="dark"] .asset-mode-picker, html[data-theme="dark"] .distribution-details, html[data-theme="dark"] .sell-position { background: #202536; border-color: #3a4053; }
html[data-theme="dark"] .asset-mode-button.active, html[data-theme="dark"] .asset-mode-button[aria-selected="true"] { background: #30374c; color: #c5cbff; }
html[data-theme="dark"] .asset-step-title { color: #e0e4ef; }
html[data-theme="dark"] .asset-step-title > span { background: #30374c; color: #c5cbff; }
html[data-theme="dark"] .distribution-details summary { color: #b9c2ff; }
html[data-theme="dark"] .sales-history { border-color: #3a4053; }
html[data-theme="dark"] .sales-history summary { color: #b9c2ff; }
html[data-theme="dark"] .sales-history .portfolio-table-wrap { border-color: #3a4053; }
html[data-theme="dark"] .sell-preview strong { color: #e0e4ef; }
html[data-theme="dark"] .asset-quick-button { background: #202536; border-color: #3a4053; color: #b9c2ff; }
html[data-theme="dark"] .asset-quick-button:hover, html[data-theme="dark"] .asset-quick-button:focus-visible { background: #2c3347; }
html[data-theme="dark"] .stock-suggestion { border-color: #34394b; }
html[data-theme="dark"] .stock-suggestion:hover, html[data-theme="dark"] .stock-suggestion:focus-visible { background: #2c3347; }
html[data-theme="dark"] .stock-suggestion strong, html[data-theme="dark"] .portfolio-heading h3, html[data-theme="dark"] .portfolio-summary strong, html[data-theme="dark"] .watchlist-select strong { color: #e0e4ef; }
html[data-theme="dark"] .portfolio-section { border-color: #34394b; }
html[data-theme="dark"] .portfolio-summary > div, html[data-theme="dark"] .portfolio-table-wrap { background: #202536; border-color: #3a4053; }
html[data-theme="dark"] .portfolio-table th, html[data-theme="dark"] .table-action { background: #252b3c; border-color: #3a4053; color: #c3c8d6; }
html[data-theme="dark"] .portfolio-table th, html[data-theme="dark"] .portfolio-table td { border-color: #34394b; color: #b2b8c8; }
html[data-theme="dark"] .portfolio-table td small, html[data-theme="dark"] .portfolio-heading p, html[data-theme="dark"] .portfolio-summary span, html[data-theme="dark"] .portfolio-empty { color: #a0a7ba; }
html[data-theme="dark"] .watchlist-select span { color: #c3c8d6; }
html[data-theme="dark"] .notice-panel { background: #2d2a24; border-color: #514530; }
html[data-theme="dark"] .notice-heading h2 { color: #f0e6cf; }
html[data-theme="dark"] .notice-heading p, html[data-theme="dark"] .notice-panel ul { color: #c6baa0; }
html[data-theme="dark"] .footer-brand { color: #c2c7d6; }
html[data-theme="dark"] .page-footer { color: #9da4b7; }
html[data-theme="dark"] .tool-results { color: #a0a7ba; }
html[data-theme="dark"] .pricing-guide { background: #202536; border-color: #34394b; box-shadow: 0 18px 50px #090b121c; }
html[data-theme="dark"] .pricing-guide h2, html[data-theme="dark"] .pricing-guide-grid h3, html[data-theme="dark"] .pricing-faq summary { color: #edf0f8; }
html[data-theme="dark"] .pricing-guide-intro, html[data-theme="dark"] .pricing-guide-grid p, html[data-theme="dark"] .pricing-faq p, html[data-theme="dark"] .pricing-guide-note, html[data-theme="dark"] .intro-trust { color: #a0a7ba; }
html[data-theme="dark"] .pricing-formula { background: #282e40; border-color: #3a4053; }
html[data-theme="dark"] .pricing-guide-grid article, html[data-theme="dark"] .pricing-faq { border-color: #3a4053; }
html[data-theme="dark"] .cost-breakdown-title { color: #d4d8e4; }
html[data-theme="dark"] .gold-icon { background: #393323; color: #e1bb61; }
html[data-theme="dark"] .teal-icon { background: #203635; color: #69c5bf; }

@media (max-width: 680px) {
  .topbar-actions { gap: 8px; }
  .topbar-note { font-size: 9px; }
  .language-picker-label { display: none; }
  .language-picker select { max-width: 91px; height: 32px; padding: 0 5px; font-size: 9px; }
  .theme-toggle { padding: 0 8px; }
  .theme-toggle #theme-label { display: none; }
  .finder-actions { width: 100%; }
  .finder-actions .search-wrap { flex: 1; }
  .assistant-toggle { font-size: 9px; }
  .data-center-grid { grid-template-columns: 1fr; }
  .export-bar { align-items: flex-start; flex-direction: column; }
  .export-actions { width: 100%; flex-wrap: wrap; }
  .export-actions .primary-button { margin-left: auto; }
  .currency-row { grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); gap: 8px; }
  .portfolio-summary { grid-template-columns: 1fr; }
  .swap-button { width: 30px; }
  .notice-panel { padding: 16px; }
  .notice-panel ul { padding-left: 28px; }
}

@media print {
  @page { margin: 16mm; }
  html, body { background: white !important; color: #222 !important; }
  .page-shell { max-width: none; padding: 0; }
  .topbar, .intro, .tool-finder, .export-bar, .page-footer, .data-center { display: none !important; }
  .workspace { display: block; overflow: visible; border: 0; box-shadow: none; }
  .calculator-panel[hidden] { display: none !important; }
  .calculator-panel { padding: 0; break-inside: avoid; }
  .result-card, .notice-panel { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .legal-note, .field-hint { color: #555 !important; }
  .notice-panel { margin-top: 14px; }
}

@media (max-width: 680px) {
  .page-shell { padding: 0 17px; }
  .topbar { height: 68px; }
  .topbar-note { font-size: 10px; }
  .intro { min-height: 224px; }
  .intro-copy { padding: 29px 0; }
  h1 { font-size: 35px; letter-spacing: -1.2px; }
  .intro-text { max-width: 320px; font-size: 12px; }
  .intro-copy { max-width: 100%; }
  .intro-cta { font-size: 11px; }
  .intro-decoration { opacity: .28; right: -115px; transform: scale(.83); transform-origin: center right; }
  .tool-finder { padding: 22px 17px; margin-bottom: 18px; }
  .finder-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  .finder-heading h2 { font-size: 18px; }
  .search-wrap { width: 100%; }
  .category-filters { gap: 6px; margin: 16px 0 18px; padding-bottom: 14px; }
  .category-filter { padding: 7px 9px; font-size: 9px; }
  .tool-groups { gap: 19px; }
  .group-heading p { max-width: 220px; }
  .tool-card-grid { grid-template-columns: 1fr; gap: 8px; padding-left: 0; }
  .tool-card { padding: 10px; }
  .card-copy strong { font-size: 10px; }
  .card-copy small { white-space: normal; }
  .calculator-panel { padding: 25px 20px 26px; }
  .panel-heading { margin-bottom: 21px; }
  .panel-heading h2 { font-size: 18px; }
  .panel-heading p { max-width: 245px; font-size: 10px; }
  .heading-badge { padding: 6px 8px; font-size: 9px; }
  .calculator-grid { grid-template-columns: 1fr; gap: 23px; }
  .pricing-guide { padding: 22px 17px; margin: 20px 0; }
  .pricing-guide h2 { font-size: 18px; }
  .pricing-guide-grid { grid-template-columns: 1fr; gap: 9px; }
  .pricing-formula strong { font-size: 12px; }
  .result-card { min-height: 245px; }
  .page-footer { flex-wrap: wrap; gap: 8px 12px; }
  .page-footer > span { order: 3; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 390px) {
  .page-shell { padding: 0 12px; }
  .calculator-panel { padding-right: 15px; padding-left: 15px; }
  .field-row { gap: 9px; }
  .tool-finder { padding-right: 13px; padding-left: 13px; }
  .group-count { font-size: 8px; }
  .category-filter { padding: 6px 8px; }
}