:root {
  color-scheme: light;
  --ink: #19251f;
  --muted: #8a948e;
  --line: #e9ece7;
  --paper: #ffffff;
  --canvas: #f5f6f2;
  --green: #328064;
  --green-dark: #24674f;
  --green-soft: #e8f2ed;
  --sans: "DM Sans", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--sans); font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; }
.sidebar { background: #fff; border-right: 1px solid #eceeea; bottom: 0; display: flex; flex-direction: column; left: 0; padding: 28px 18px 18px; position: fixed; top: 0; width: 244px; z-index: 4; }
.brand { align-items: center; color: #1c2c24; display: flex; font-size: 25px; font-weight: 700; gap: 10px; letter-spacing: -1.4px; margin: 0 0 49px 7px; text-decoration: none; }
.brand-period { color: #4e9b76; }
.brand-mark { align-items: end; background: #e6f2eb; border-radius: 11px; display: flex; gap: 3px; height: 30px; justify-content: center; padding: 8px 7px; width: 30px; }
.brand-mark span { background: #398263; border-radius: 2px 2px 1px 1px; display: block; width: 4px; }
.brand-mark span:nth-child(1) { height: 8px; opacity: .65; }.brand-mark span:nth-child(2) { height: 13px; }.brand-mark span:nth-child(3) { height: 10px; opacity: .8; }
.workspace-label { color: #a1aaa4; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; margin: 0 0 11px 11px; }
.main-nav { display: grid; gap: 5px; }
.nav-link { align-items: center; border-radius: 8px; color: #707b74; display: flex; font-size: 13px; font-weight: 500; gap: 12px; padding: 11px 12px; text-decoration: none; transition: .15s ease; }
.nav-link:hover { background: #f6f8f6; color: var(--ink); }.nav-link.active { background: #edf5f0; color: #2d7658; font-weight: 600; }
.nav-icon { display: inline-grid; font-size: 17px; height: 20px; place-items: center; width: 20px; }
.sidebar-bottom { margin-top: auto; }
.privacy-card { align-items: flex-start; background: #f7f9f7; border: 1px solid #edf0ec; border-radius: 10px; display: flex; gap: 10px; margin-bottom: 17px; padding: 13px 10px; }
.privacy-icon { align-items: center; background: #e5f0e9; border-radius: 7px; color: #398263; display: flex; font-size: 18px; height: 28px; justify-content: center; min-width: 28px; }
.privacy-card strong { color: #415148; display: block; font-size: 11px; font-weight: 600; margin: 1px 0 4px; }.privacy-card p { color: #929b95; font-size: 10px; line-height: 1.6; margin: 0; }
.profile { align-items: center; border-top: 1px solid #eef0ed; display: flex; gap: 10px; padding: 17px 3px 0; }
.avatar { align-items: center; background: #dcebe1; border-radius: 50%; color: #36775b; display: flex; font-size: 12px; font-weight: 700; height: 34px; justify-content: center; width: 34px; }
.profile-copy { display: grid; gap: 4px; }.profile-copy strong { font-size: 11px; font-weight: 600; }.profile-copy span { color: #9aa29d; font-size: 10px; }.profile-more { color: #8e9991; font-size: 19px; margin-left: auto; }
.main-content { margin-left: 244px; min-height: 100vh; }
.topbar { align-items: center; background: rgba(255,255,255,.78); border-bottom: 1px solid #e9ece7; display: flex; height: 64px; justify-content: space-between; padding: 0 48px; }
.breadcrumb { align-items: center; color: #929b95; display: flex; font-size: 11px; gap: 10px; }.breadcrumb strong { color: #4a574f; font-weight: 600; }.crumb-divider { color: #c6ccc7; }
.topbar-right { align-items: center; display: flex; gap: 18px; }.today-label { color: #89938d; font-size: 11px; }.icon-button { background: none; border: 0; color: #68756d; font-size: 19px; height: 32px; width: 32px; }
.page-content { margin: 0 auto; max-width: 1300px; padding: 38px 48px 24px; }
.welcome-row { align-items: end; display: flex; justify-content: space-between; margin: 2px 0 25px; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.eyebrow { align-items: center; color: #8c9990; display: flex; font-size: 9px; font-weight: 700; gap: 7px; letter-spacing: 1.25px; }
.live-dot { background: #55a27b; border-radius: 50%; box-shadow: 0 0 0 3px #e4f0e8; height: 6px; width: 6px; }
h1 { font-size: 27px; letter-spacing: -.8px; margin: 8px 0 5px; }.welcome-subtitle { color: #929a95; font-size: 12px; margin: 0; }
.button { align-items: center; border: 1px solid transparent; border-radius: 7px; display: inline-flex; font-size: 12px; font-weight: 600; gap: 7px; justify-content: center; min-height: 39px; padding: 0 15px; transition: .16s ease; }
.button-primary { background: var(--green); box-shadow: 0 2px 3px #24674f1c; color: white; }.button-primary:hover { background: var(--green-dark); transform: translateY(-1px); }.plus { font-size: 17px; font-weight: 400; line-height: 1; }
.demo-notice { align-items: center; background: #f0f5f1; border: 1px solid #e5ede7; border-radius: 7px; color: #6b7c71; display: flex; font-size: 10px; gap: 8px; margin-bottom: 17px; min-height: 37px; padding: 7px 11px; }
.notice-mark { align-items: center; border: 1px solid #8ba694; border-radius: 50%; color: #658172; display: inline-flex; font-family: Georgia, serif; font-size: 9px; font-style: italic; height: 14px; justify-content: center; min-width: 14px; }
.notice-action { background: none; border: 0; color: #39795b; font-size: 10px; font-weight: 600; margin-left: auto; padding: 3px 0 3px 9px; white-space: nowrap; }.notice-action:hover { color: #205a40; text-decoration: underline; }
.summary-grid { display: grid; gap: 15px; grid-template-columns: 1.18fr 1fr 1fr; margin-bottom: 17px; }
.summary-card, .panel { background: var(--paper); border: 1px solid #e9ece8; border-radius: 9px; box-shadow: 0 2px 5px #29372f05; }
.summary-card { min-height: 132px; padding: 17px 19px; }.total-card { background: #fff; }
.card-topline { align-items: center; color: #7e8a82; display: flex; font-size: 11px; justify-content: space-between; }
.card-icon { align-items: center; border-radius: 7px; display: inline-flex; font-size: 14px; height: 28px; justify-content: center; width: 28px; }.icon-wallet { background: #edf5ef; color: #408264; }.icon-trend { background: #f0f3fb; color: #7186bd; }.icon-assets { background: #fbf4e9; color: #c29548; }
.total-amount { font-size: 28px; font-weight: 600; letter-spacing: -1.1px; margin: 8px 0 8px; }.metric-amount { font-size: 25px; font-weight: 600; letter-spacing: -.7px; margin: 10px 0 10px; }.unit { color: #8f9992; font-size: 13px; font-weight: 500; margin-left: 4px; }
.summary-foot { align-items: center; color: #9aa29d; display: flex; font-size: 10px; gap: 7px; }.change-pill { background: #eaf4ee; border-radius: 4px; color: #3d8964; font-size: 9px; font-weight: 600; padding: 4px 6px; }.positive-text { color: #398363; font-size: 10px; font-weight: 600; }
.overview-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .85fr); margin-bottom: 17px; }
.panel { padding: 19px 20px; }.performance-panel, .allocation-panel { min-height: 306px; }
.panel-header { align-items: flex-start; display: flex; justify-content: space-between; }.panel-header h2 { font-size: 13px; font-weight: 600; letter-spacing: -.15px; margin: 0 0 5px; }.panel-header p { color: #9aa29d; font-size: 10px; margin: 0; }
.select-button { background: #fff; border: 1px solid #e9ece8; border-radius: 5px; color: #68756d; font-size: 10px; padding: 7px 9px; }.select-button span { color: #99a29c; margin-left: 7px; }
.chart-status { background: #f5f7f5; border-radius: 4px; color: #869189; font-size: 9px; padding: 6px 8px; }
.chart-placeholder { align-items: center; color: #65756a; display: flex; flex-direction: column; font-size: 11px; height: 203px; justify-content: center; line-height: 1.8; text-align: center; }.chart-placeholder span { color: #9ba49e; font-size: 9px; }
.chart-placeholder[hidden], .chart-wrap[hidden], .chart-x-labels[hidden] { display: none; }
.chart-summary { align-items: baseline; display: flex; gap: 10px; margin: 15px 0 1px 38px; }.chart-summary strong { font-size: 20px; font-weight: 600; letter-spacing: -.5px; }.chart-change { color: #408565; font-size: 10px; font-weight: 600; }
.chart-wrap { height: 154px; margin-top: 3px; position: relative; }.chart-y-labels { color: #a3aba6; display: flex; flex-direction: column; font-size: 8px; height: 100%; justify-content: space-between; left: 0; padding: 8px 0 2px; position: absolute; top: 0; }
.performance-chart { height: 100%; left: 52px; overflow: visible; position: absolute; top: 0; width: calc(100% - 57px); }.chart-guide { stroke: #edf0ed; stroke-dasharray: 3 5; stroke-width: 1; }.chart-area { fill: url(#area-fill); }.chart-line { fill: none; stroke: #4b9471; stroke-linecap: round; stroke-width: 2.3; }.chart-point { fill: #fff; stroke: #438b68; stroke-width: 3; }
.chart-x-labels { color: #a3aba6; display: flex; font-size: 8px; justify-content: space-between; margin: 7px 0 0 52px; }
.more-button { background: transparent; border: 0; color: #7e8982; font-size: 19px; line-height: 1; }
.donut-area { align-items: center; display: flex; justify-content: center; padding: 16px 0 13px; }.donut-chart { align-items: center; background: conic-gradient(#4c9270 0 36%, #a3bea9 36% 61%, #d4dfd1 61% 82%, #e9d8b7 82% 100%); border-radius: 50%; display: flex; height: 126px; justify-content: center; position: relative; width: 126px; }.donut-chart::before { background: #fff; border-radius: 50%; content: ""; height: 86px; position: absolute; width: 86px; }.donut-center { align-items: center; display: flex; flex-direction: column; position: relative; z-index: 1; }.donut-center strong { font-size: 22px; font-weight: 600; }.donut-center span { color: #9aa29d; font-size: 9px; margin-top: 2px; }
.allocation-legend { display: grid; gap: 8px 13px; grid-template-columns: 1fr 1fr; }.legend-item { align-items: center; color: #78837c; display: flex; font-size: 9px; gap: 6px; min-width: 0; }.legend-dot { border-radius: 2px; height: 7px; min-width: 7px; }.legend-item strong { color: #59665e; font-size: 9px; font-weight: 600; margin-left: auto; }
.holdings-panel { padding: 19px 20px 0; }.holdings-header { align-items: center; margin-bottom: 14px; }.text-button { background: none; border: 0; color: #398061; font-size: 10px; font-weight: 600; padding: 7px 0 7px 8px; }.text-button:hover { color: #235f46; }
.table-scroll { overflow-x: auto; }table { border-collapse: collapse; min-width: 650px; text-align: left; width: 100%; }thead { background: #f8f9f7; }th { color: #96a099; font-size: 9px; font-weight: 500; padding: 10px 11px; }td { border-bottom: 1px solid #f0f2ef; color: #56635b; font-size: 10px; padding: 12px 11px; white-space: nowrap; }tbody tr:last-child td { border-bottom: 0; }.asset-identity { align-items: center; display: flex; gap: 9px; }.asset-symbol { align-items: center; background: #eff4ef; border-radius: 7px; color: #478367; display: flex; font-size: 9px; font-weight: 600; height: 30px; justify-content: center; width: 30px; }.asset-name { color: #344239; font-size: 10px; font-weight: 600; }.asset-ticker { color: #a0a8a2; font-size: 8px; margin-top: 3px; }.type-tag { background: #f3f5f2; border-radius: 4px; color: #738078; font-size: 9px; padding: 4px 7px; }.table-number { color: #536057; font-variant-numeric: tabular-nums; }.profit-positive { color: #388362; font-weight: 600; }.profit-negative { color: #c56a64; font-weight: 600; }.row-actions { color: #87928a; display: flex; gap: 3px; justify-content: flex-end; }.row-actions button { background: none; border: 0; border-radius: 4px; color: inherit; font-size: 9px; padding: 5px; }.row-actions button:hover { background: #f1f4f1; color: #344239; }
.table-footer { align-items: center; border-top: 1px solid #edf0ed; color: #9ba39e; display: flex; font-size: 9px; justify-content: space-between; margin-top: 1px; padding: 12px 1px; }.table-footer span:first-child { color: #78847c; }
.empty-state { align-items: center; color: #657269; display: flex; flex-direction: column; padding: 27px 10px 28px; text-align: center; }.empty-illustration { align-items: center; background: #edf5ef; border: 1px dashed #b6cbbb; border-radius: 50%; color: #448466; display: flex; font-size: 24px; height: 48px; justify-content: center; margin-bottom: 12px; width: 48px; }.empty-state strong { color: #415047; font-size: 12px; }.empty-state p { color: #9aa29d; font-size: 10px; line-height: 1.8; margin: 7px 0 14px; }.empty-state[hidden] { display: none; }
.page-footer { color: #a1aaa4; display: flex; font-size: 9px; justify-content: space-between; padding: 20px 2px 3px; }.page-footer span:first-child { color: #77837b; font-weight: 600; }
.asset-dialog { background: white; border: 1px solid #e9ece8; border-radius: 12px; box-shadow: 0 20px 80px #1e2b2440; color: var(--ink); max-width: calc(100vw - 30px); padding: 25px; width: 440px; }.asset-dialog::backdrop { background: #18241d70; backdrop-filter: blur(2px); }.dialog-heading { align-items: start; display: flex; justify-content: space-between; margin-bottom: 22px; }.dialog-heading h2 { font-size: 20px; letter-spacing: -.5px; margin: 6px 0 0; }.dialog-close { background: #f5f7f5; border: 0; border-radius: 50%; color: #77847b; font-size: 21px; height: 29px; line-height: 1; width: 29px; }.field-label { color: #536157; display: block; font-size: 10px; font-weight: 600; margin: 13px 0 7px; }.optional { color: #a0a8a2; font-size: 9px; font-weight: 400; }.text-input { background: #fff; border: 1px solid #e3e8e3; border-radius: 6px; color: #35433a; font-size: 11px; height: 38px; outline: 0; padding: 0 10px; width: 100%; }.text-input:focus { border-color: #77a68d; box-shadow: 0 0 0 3px #e8f2ec; }.text-input::placeholder { color: #b4bcb6; }.field-row { display: grid; gap: 13px; grid-template-columns: 1fr 1fr; }.field-row > div { min-width: 0; }.input-with-unit { position: relative; }.input-with-unit .text-input { padding-right: 30px; }.input-with-unit span { color: #9ba49e; font-size: 10px; position: absolute; right: 10px; top: 12px; }.form-note { background: #f7f9f7; border-radius: 5px; color: #87938b; font-size: 9px; line-height: 1.7; margin: 14px 0 19px; padding: 9px 10px; }.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; }.button-secondary { background: #fff; border-color: #e2e7e2; color: #6f7b73; }.button-secondary:hover { background: #f7f8f7; }
.toast { background: #25372c; border-radius: 7px; bottom: 25px; box-shadow: 0 6px 22px #1b2c2240; color: white; font-size: 11px; left: 50%; opacity: 0; padding: 11px 15px; pointer-events: none; position: fixed; transform: translate(-50%, 12px); transition: .2s ease; z-index: 8; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
.sr-only { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.import-dialog { max-height: min(88vh, 820px); overflow-y: auto; width: min(760px, calc(100vw - 30px)); }
.privacy-note { margin-top: -8px; }
.file-input { height: auto; padding: 8px; }
.import-progress { color: #62816e; font-size: 11px; min-height: 18px; padding-top: 8px; }
.excel-toolbar { align-items: center; display: flex; justify-content: space-between; }
.import-preview { display: grid; gap: 9px; margin: 12px 0 18px; max-height: 42vh; overflow-y: auto; }
.import-row { background: #fafbf9; border: 1px solid #e8ece7; border-radius: 8px; padding: 11px; }
.import-row-top { align-items: center; display: flex; gap: 8px; margin-bottom: 8px; }
.import-row-top label { color: #536157; font-size: 11px; font-weight: 600; }
.import-row-fields { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.import-row-fields label { color: #87938b; display: grid; font-size: 9px; gap: 4px; min-width: 0; }
.import-row-fields .text-input { font-size: 10px; height: 32px; padding: 0 7px; }
.import-duplicate { color: #9a6b32; display: block; font-size: 9px; margin: 7px 0 0 23px; }
.import-raw { background: #f7f9f7; border-radius: 5px; color: #7e8982; font-size: 9px; line-height: 1.6; margin-top: 10px; max-height: 100px; overflow: auto; padding: 8px; white-space: pre-wrap; }
@media (max-width: 620px) { .welcome-actions { gap: 4px; }.import-row-fields { grid-template-columns: 1fr 1fr; }.import-dialog { padding: 17px; } }
@media (min-width: 1500px) { .page-content { padding-top: 44px; }.summary-card { min-height: 145px; padding: 20px 22px; }.performance-panel, .allocation-panel { min-height: 326px; }.chart-wrap { height: 170px; } }
@media (max-width: 1100px) { .sidebar { width: 210px; }.main-content { margin-left: 210px; }.topbar { padding: 0 30px; }.page-content { padding: 32px 30px 22px; }.overview-grid { grid-template-columns: minmax(0, 1.45fr) minmax(255px, .9fr); }.panel { padding-left: 16px; padding-right: 16px; } }
@media (max-width: 820px) { .sidebar { align-items: center; bottom: auto; flex-direction: row; height: 60px; justify-content: space-between; padding: 0 19px; right: 0; top: 0; width: 100%; }.brand { font-size: 22px; margin: 0; }.brand-mark { height: 27px; width: 27px; }.workspace-label, .sidebar-bottom { display: none; }.main-nav { display: flex; gap: 4px; margin-left: auto; }.nav-link { font-size: 0; gap: 0; height: 36px; justify-content: center; padding: 5px; width: 36px; }.nav-icon { font-size: 18px; }.main-content { margin-left: 0; padding-top: 60px; }.topbar { height: 48px; padding: 0 22px; }.page-content { padding: 28px 22px 20px; } }
@media (max-width: 620px) { .topbar { padding: 0 16px; }.breadcrumb { font-size: 10px; }.today-label { display: none; }.topbar-right { gap: 5px; }.page-content { padding: 24px 14px 16px; }.welcome-row { align-items: center; margin-bottom: 18px; }.welcome-row h1 { font-size: 23px; }.welcome-subtitle { font-size: 10px; }.welcome-row .button { font-size: 10px; min-height: 36px; padding: 0 10px; }.demo-notice { align-items: flex-start; font-size: 9px; line-height: 1.5; padding: 8px; }.notice-action { font-size: 9px; }.summary-grid { gap: 8px; grid-template-columns: 1fr 1fr; }.summary-card { min-height: 112px; padding: 12px; }.total-card { grid-column: span 2; min-height: 119px; }.total-amount { font-size: 25px; }.metric-amount { font-size: 20px; }.card-topline { font-size: 10px; }.card-icon { height: 24px; width: 24px; }.overview-grid { grid-template-columns: 1fr; gap: 10px; }.performance-panel, .allocation-panel { min-height: 280px; }.allocation-panel { min-height: 280px; }.chart-wrap { height: 141px; }.donut-area { padding: 12px 0; }.donut-chart { height: 112px; width: 112px; }.donut-chart::before { height: 77px; width: 77px; }.allocation-legend { padding: 0 7px; }.holdings-panel { padding: 16px 12px 0; }.holdings-header h2 { font-size: 12px; }.text-button { font-size: 9px; }.table-footer { font-size: 8px; gap: 8px; }.page-footer { font-size: 8px; gap: 10px; line-height: 1.5; }.page-footer span:last-child { text-align: right; }.asset-dialog { padding: 20px; } }

/* Account- and asset-specific tracking */
.filterbar { align-items: center; background: #fff; border: 1px solid #e9ece8; border-radius: 9px; display: flex; gap: 12px; margin: 0 0 16px; padding: 12px 15px; }
.filter-intro { display: grid; gap: 3px; margin-right: auto; }.filter-intro strong { color: #45534a; font-size: 10px; font-weight: 600; }.filter-intro span { color: #9aa39d; font-size: 9px; }
.filterbar label { align-items: center; color: #89948c; display: flex; font-size: 9px; gap: 7px; white-space: nowrap; }
.filter-select { appearance: none; background: #fafbfa; border: 1px solid #e7ebe7; border-radius: 5px; color: #536157; font-size: 10px; min-width: 125px; padding: 7px 24px 7px 9px; }
.accounts-panel { margin-bottom: 16px; padding-bottom: 16px; }.accounts-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }.account-card { background: #fcfdfc; border: 1px solid #e9eee9; border-radius: 8px; min-width: 0; padding: 12px; transition: border-color .15s ease, background .15s ease; }.account-card.selected { background: #f2f8f4; border-color: #86b39a; }.account-card-top { align-items: center; display: flex; justify-content: space-between; }.account-kind-icon { align-items: center; background: #e9f2ec; border-radius: 7px; color: #448265; display: inline-flex; font-size: 14px; height: 29px; justify-content: center; width: 29px; }.kind-거래소 { background: #f1edf8; color: #8064a5; }.kind-은행 { background: #f8f1e5; color: #a27b3e; }.account-institution { color: #9ba49e; font-size: 9px; margin-top: 11px; }.account-card-name { color: #3c4a41; display: block; font-size: 12px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.account-card-bottom { align-items: center; border-top: 1px solid #edf0ed; display: flex; gap: 8px; margin-top: 11px; padding-top: 9px; }.account-card-bottom > span { color: #9ba49e; font-size: 9px; }.account-card-bottom > strong { color: #506057; font-size: 10px; margin-left: auto; white-space: nowrap; }.account-actions { display: flex; gap: 2px; }.account-actions button { background: none; border: 0; border-radius: 4px; color: #89948c; font-size: 8px; padding: 4px; }.account-actions button:hover { background: #eff3ef; color: #46554b; }.account-select-button { background: #f2f6f3; border: 0; border-radius: 4px; color: #458065; font-size: 8px; padding: 5px 7px; white-space: nowrap; }.account-select-button:hover { background: #e6f0e9; }.accounts-empty { color: #9aa39d; font-size: 10px; padding: 18px 5px 5px; text-align: center; }.accounts-empty[hidden] { display: none; }
.money-cell { min-width: 120px; }.money-cell > span, .money-cell > small { display: block; }.money-cell > span { color: #526057; }.money-cell > small { color: #a0a9a3; font-size: 8px; margin-top: 3px; }.account-name-cell { font-size: 9px; }.account-select-wrap { align-items: center; display: flex; gap: 6px; }.account-select-wrap select { min-width: 0; }.inline-add { background: #edf5ef; border: 0; border-radius: 5px; color: #438161; font-size: 17px; height: 36px; min-width: 36px; }.inline-add:hover { background: #e1eee5; }.savings-fields { background: #f8faf8; border: 1px solid #edf1ed; border-radius: 7px; margin-top: 13px; padding: 0 11px 10px; }.savings-fields[hidden] { display: none; }.savings-fields .field-label:first-child { margin-top: 10px; }.readonly-input { background: #f7f9f7; color: #9ba49e; }
#krw-unit-cost-field[hidden] { display: none; }
.market-bar { align-items: center; background: #fff; border: 1px solid #e9ece8; border-radius: 9px; display: flex; justify-content: space-between; margin: 0 0 16px; padding: 11px 15px; }
.market-statuses { align-items: center; display: flex; flex-wrap: wrap; gap: 9px; }
.market-actions { align-items: center; display: flex; gap: 14px; }
.market-bar strong { color: #45534a; font-size: 10px; font-weight: 600; }
.market-bar span { color: #89948c; font-size: 9px; }
.market-bar span[data-state="success"] { color: #398363; }
.market-bar span[data-state="warning"], .market-bar span[data-state="error"] { color: #a66d4d; }
.market-bar span[data-state="loading"] { color: #7186bd; }
#refresh-coin-prices:disabled { opacity: .55; pointer-events: none; }
.ticker-field { position: relative; }
.ticker-suggestions { background: #fff; border: 1px solid #e3e8e3; border-radius: 7px; box-shadow: 0 10px 26px #24372c1c; left: 0; max-height: 230px; overflow: auto; position: absolute; right: 0; top: calc(100% - 1px); z-index: 5; }
.ticker-suggestions[hidden] { display: none; }
.ticker-suggestion { align-items: center; background: #fff; border: 0; border-bottom: 1px solid #f0f2f0; color: #45534a; cursor: pointer; display: flex; font-size: 10px; justify-content: space-between; padding: 10px; text-align: left; width: 100%; }
.ticker-suggestion:hover, .ticker-suggestion:focus { background: #f1f7f3; outline: 0; }
.ticker-suggestion small { color: #99a39c; font-size: 8px; }
.ticker-suggestion-empty { color: #89948c; font-size: 9px; padding: 11px; }
.purchase-total-field { display: flex; flex-direction: column; justify-content: flex-end; }
.purchase-total { color: #526057; font-size: 12px; font-weight: 600; min-height: 38px; padding: 11px 10px; }
.valuation-row { display: grid; grid-template-columns: 1fr 1fr; margin-top: 0; }
.valuation-field { display: block; grid-column: 2; }
.chart-placeholder[hidden] { display: none; }
@media (max-width: 820px) { .main-nav { gap: 2px; }.nav-link { width: 33px; }.filterbar { align-items: stretch; flex-wrap: wrap; }.filter-intro { flex-basis: 100%; }.filterbar label { flex: 1; justify-content: space-between; }.filter-select { min-width: 110px; width: 62%; } }
@media (max-width: 620px) { .market-bar { align-items: flex-start; flex-direction: column; gap: 8px; }.market-actions { align-self: flex-end; flex-wrap: wrap; justify-content: flex-end; } }
@media (max-width: 620px) { .filterbar { gap: 7px; padding: 10px; }.filterbar label { align-items: flex-start; flex-direction: column; gap: 4px; }.filter-select { width: 100%; }.accounts-grid { grid-template-columns: 1fr 1fr; }.account-card { padding: 10px; }.account-card-bottom { flex-wrap: wrap; }.account-card-bottom > strong { font-size: 9px; }.account-select-button { margin-left: auto; }.field-row { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }