/*
 * Ata Finance v6.4 — Product-wide UI polish & responsive stability
 * Applied after app.css + pro-ui.css + ui-v6-3.css.
 * Goals: predictable section rhythm, resilient Persian text, no page-level horizontal
 * scrolling, compact/meaningful empty states, standard responsive behavior and
 * dashboard density suitable for a personal-finance product.
 */
:root{
  --af64-content-max:1560px;
  --af64-sidebar:276px;
  --af64-page-x:clamp(24px,2.4vw,40px);
  --af64-section:28px;
  --af64-block:22px;
  --af64-card-gap:18px;
  --af64-card-pad:22px;
  --af64-radius:17px;
  --af64-radius-sm:12px;
}

/* ---------- foundation / resilient Persian text ---------- */
html{max-inline-size:100%;overflow-x:clip;scroll-behavior:smooth}
body{max-inline-size:100%;overflow-x:clip;font-size:16px;line-height:1.65}
.app-shell,.main-content,.sidebar,.panel,.page-grid,.content-grid,.hero-grid,.kpi-grid,
.settings-layout,.settings-content,.security-grid,.data-actions-grid,.account-grid,
.market-grid,.goal-grid-v5,.report-sections,.portfolio-row,.transaction-row,
.panel-title-row,.card-head,.section-toolbar,.topbar,.topbar-copy,.topbar-actions{min-width:0}

/* Never break ordinary Persian words in the middle. Only technical tokens may break anywhere. */
.main-content :where(h1,h2,h3,h4,p,li,label,span,strong,small,a,button,dt,dd){
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:none;
}
.main-content :where(h1,h2,h3){text-wrap:balance}
.cron-code,.provider-info,.provider-info-good,.security-note-v4,.provider-health,
.market-meta,.history-tooltip,.account-meta dd,code,pre,[data-long-token]{
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
.hero-value,.kpi-card strong,.money,.amount,.market-price,.asset-live-price,
.portfolio-row strong,.transaction-amount,.report-kpis strong,.numeric{
  font-variant-numeric:tabular-nums lining-nums;
}

/* Controls must remain usable if labels wrap. */
.primary-btn,.secondary-btn,.danger-button,.text-btn,.month-switch a,.wealth-links a,
.filter-tabs a,.range-tabs a,.market-filter button{line-height:1.35}
.primary-btn,.secondary-btn,.danger-button{min-height:44px}

/* Scrollbars only where scrolling is genuinely useful. */
.sidebar,.transaction-table-wrap,.ai-chat-stream{
  scrollbar-width:thin;
  scrollbar-color:#344151 transparent;
}
.sidebar::-webkit-scrollbar,.transaction-table-wrap::-webkit-scrollbar,.ai-chat-stream::-webkit-scrollbar{width:7px;height:7px}
.sidebar::-webkit-scrollbar-thumb,.transaction-table-wrap::-webkit-scrollbar-thumb,.ai-chat-stream::-webkit-scrollbar-thumb{background:#344151;border-radius:999px}
.sidebar::-webkit-scrollbar-track,.transaction-table-wrap::-webkit-scrollbar-track,.ai-chat-stream::-webkit-scrollbar-track{background:transparent}

/* ---------- desktop shell ---------- */
@media (min-width:821px){
  .app-shell{grid-template-columns:var(--af64-sidebar) minmax(0,1fr)!important}
  .sidebar{
    width:auto!important;
    height:100vh!important;
    height:100dvh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:20px 14px 18px!important;
  }
  /* One vertical scroll surface for the sidebar; avoid a second nested nav scrollbar. */
  .nav-list{overflow:visible!important;min-height:auto!important;padding-left:0!important}
  .sidebar-footer{margin-top:auto!important;flex-shrink:0!important}

  .main-content{
    width:100%!important;
    max-width:var(--af64-content-max)!important;
    padding:26px var(--af64-page-x) 72px!important;
    margin-inline:auto!important;
  }
  .topbar{
    min-height:72px!important;
    margin:0 0 26px!important;
    padding:8px 0 14px!important;
    gap:22px!important;
    align-items:center!important;
  }
  .topbar-copy{max-width:min(760px,58vw)!important}
  .topbar h1{font-size:25px!important;line-height:1.35!important}
  .topbar-subtitle{font-size:13px!important;line-height:1.6!important;max-width:70ch}
  .topbar-actions{display:flex!important;align-items:center!important;gap:9px!important;flex-wrap:wrap!important;justify-content:flex-end}
  .topbar-actions .primary-btn,.topbar-actions .secondary-btn{white-space:nowrap}

  /* Generic section rhythm. Explicit dashboard rule below handles hero → KPI. */
  .main-content>.section-toolbar{margin-bottom:22px!important}
  .main-content>.section-toolbar+.kpi-grid{margin-top:0!important}
  .main-content>.kpi-grid:not(.dashboard-kpi-grid){margin-top:0!important;margin-bottom:0!important}
  .main-content>.kpi-grid+.page-grid,
  .main-content>.kpi-grid+.wealth-links,
  .main-content>.kpi-grid+.content-grid,
  .main-content>.kpi-grid+.panel,
  .main-content>.kpi-grid+.market-section{margin-top:var(--af64-section)!important}
  .main-content>.wealth-links+.page-grid,
  .main-content>.wealth-links+.panel{margin-top:var(--af64-block)!important}
  .main-content>.panel+.panel,
  .main-content>.panel+.page-grid,
  .main-content>.page-grid+.panel,
  .main-content>.page-grid+.page-grid,
  .main-content>.market-section+.market-section,
  .main-content>.report-card+.panel{margin-top:var(--af64-section)!important}

  /* Shared panels: no artificial equal-height whitespace. */
  .panel{padding:var(--af64-card-pad)!important;border-radius:var(--af64-radius)!important}
  .page-grid,.content-grid{align-items:start!important;gap:var(--af64-card-gap)!important}
  .panel-title-row{margin-bottom:18px!important;gap:14px!important;flex-wrap:wrap}
  .panel-title-row>div{min-width:0;flex:1 1 280px}
  .panel-title-row h2,.panel h2{font-size:19px!important;line-height:1.45!important}
  .panel-description{font-size:13px!important;line-height:1.75!important;max-width:68ch}
  .empty-state{
    min-height:0!important;
    padding:30px 18px!important;
    display:grid;
    place-content:center;
    text-align:center;
    gap:6px;
  }
  .empty-state strong{font-size:15px!important;line-height:1.5}
  .empty-state p{font-size:13px!important;line-height:1.7!important;margin:0;max-width:46ch}
  .empty-state.compact{padding:20px 12px!important}

  /* ---------- dashboard ---------- */
  .dashboard-intro{margin:0 0 20px!important;gap:18px!important}
  .dashboard-intro h2{font-size:21px!important;line-height:1.35!important}
  .dashboard-intro p{font-size:13px!important;line-height:1.6!important}

  .dashboard-hero-grid{
    grid-template-columns:minmax(0,1.65fr) minmax(300px,.72fr)!important;
    gap:var(--af64-card-gap)!important;
    align-items:start!important;
  }
  .primary-overview-card,.overview-side-card{
    min-height:0!important;
    height:auto!important;
    padding:22px!important;
  }
  .primary-overview-card{display:block!important}
  .overview-side-card{display:flex!important;flex-direction:column!important}
  .hero-value{font-size:clamp(36px,3.6vw,52px)!important;line-height:1.15!important;margin-top:4px!important}
  .metric-explainer{font-size:12.5px!important;line-height:1.6!important;max-width:52ch}
  .metric-status{white-space:normal!important;flex:0 0 auto}
  .sparkline-wrap{
    height:118px!important;
    min-height:118px!important;
    max-height:118px!important;
    margin:18px -2px 6px!important;
    flex:none!important;
  }
  .sparkline-wrap svg{height:118px!important}
  .chart-footer{margin-top:8px!important;gap:12px;flex-wrap:wrap}

  .budget-visual-row{
    grid-template-columns:108px minmax(0,1fr)!important;
    gap:18px!important;
    margin:18px 0 14px!important;
  }
  .budget-ring{--size:108px!important;width:108px!important;height:108px!important}
  .budget-ring span{font-size:20px!important}
  .budget-side-copy span{font-size:11.5px!important}.budget-side-copy strong{font-size:14.5px!important}
  .card-action-link{margin-top:8px!important;min-height:40px!important;padding-top:12px!important}

  /* This missing margin was the main reason the dashboard blocks visually touched. */
  .dashboard-hero-grid + .dashboard-kpi-grid{margin-top:24px!important}
  .dashboard-kpi-grid{gap:16px!important;margin-bottom:0!important}
  .dashboard-kpi-grid .kpi-card{
    min-height:116px!important;
    padding:17px!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:12px!important;
    border-radius:15px!important;
  }
  .dashboard-kpi-grid .kpi-icon{width:44px!important;height:44px!important}
  .dashboard-kpi-grid .kpi-card strong{font-size:21px!important;line-height:1.3!important}
  .dashboard-kpi-grid .mini-trend{font-size:11.5px!important;line-height:1.55!important;margin-top:2px!important}

  .dashboard-kpi-grid + .dashboard-analytics-grid{margin-top:28px!important}
  .dashboard-analytics-grid{grid-template-columns:minmax(0,1.58fr) minmax(320px,.76fr)!important;align-items:start!important}
  .dashboard-analytics-grid .panel{min-height:0!important;height:auto!important}
  .cashflow-panel #cashflowChart{height:232px!important;margin-top:14px!important}
  .spending-panel .empty-state{min-height:196px!important}
  .spending-layout{grid-template-columns:150px minmax(0,1fr)!important;gap:22px!important;margin-top:20px!important}
  .donut{width:148px!important;height:148px!important}

  .dashboard-analytics-grid + .dashboard-activity-grid{margin-top:28px!important}
  .dashboard-activity-grid{align-items:start!important}
  .dashboard-activity-grid .panel{min-height:0!important;height:auto!important}
  .transaction-list,.dashboard-market-list{margin-top:8px!important}
  .dashboard-shortcuts{margin:28px 0!important;gap:12px!important}
  .dashboard-report-card{margin-top:0!important;padding:18px 20px!important;gap:14px!important}

  /* Chart empty states inserted by JS. */
  .chart-empty-label{font-family:PeydaFaNum,Tahoma,Arial,sans-serif;fill:#dce4ec;font-size:14px;font-weight:600}
  .chart-empty-hint{font-family:PeydaFaNum,Tahoma,Arial,sans-serif;fill:#7f8b99;font-size:11px;font-weight:400}

  /* ---------- secondary pages ---------- */
  .section-toolbar{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:18px!important;flex-wrap:wrap!important}
  .section-toolbar>div{min-width:0}
  .section-toolbar h2,.ai-settings-hero h2,.ai-hero h2{font-size:25px!important;line-height:1.35!important}
  .page-grid{grid-template-columns:minmax(0,1fr) minmax(340px,390px)!important}
  .page-grid>.panel,.page-grid>.side-form{padding:22px!important}
  .side-form{position:sticky;top:96px;align-self:start}

  /* Chips/tabs should wrap instead of creating a surprise horizontal scroller. */
  .wealth-links,.filter-tabs,.range-tabs,.market-filter,.month-switch,.toolbar-actions,.report-top-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    overflow:visible!important;
    gap:8px!important;
    max-width:100%;
  }
  .wealth-links{margin:24px 0 0!important;padding:0!important}
  .wealth-links a,.filter-tabs a,.range-tabs a,.market-filter button,.month-switch a{
    flex:0 0 auto!important;
    min-height:40px!important;
    padding:0 13px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    white-space:normal!important;
    text-align:center;
  }

  /* Data rows */
  .asset-row-v5{grid-template-columns:minmax(210px,1fr) auto minmax(150px,.55fr) 40px!important;gap:14px!important;align-items:center}
  .portfolio-row{align-items:center!important;row-gap:10px!important}
  .market-grid{gap:14px!important}
  .market-card{min-width:0}
  .market-card-head,.market-buy-sell{min-width:0}

  /* Settings: stable side navigation on wide screens; no nested horizontal scrolling. */
  body.page-account-settings .main-content{max-width:1480px!important}
  .settings-layout{grid-template-columns:238px minmax(0,1fr)!important;gap:24px!important;align-items:start!important}
  .settings-nav{
    position:sticky!important;
    top:96px!important;
    display:grid!important;
    overflow:visible!important;
    gap:5px!important;
    margin:0!important;
  }
  .settings-nav a{min-width:0!important;white-space:normal!important}
  .settings-content{gap:22px!important}
  .settings-section{padding:24px!important}
  .settings-section-head p{max-width:70ch!important}
  .security-grid,.data-actions-grid{align-items:start!important}
  .data-action-card{min-height:0!important;height:auto!important}

  /* Long forms: do not stretch every sibling to the tallest card. */
  .settings-content,.security-grid,.data-actions-grid,.goal-grid-v5,.account-grid{align-items:start!important}
}

/* ---------- medium desktop ---------- */
@media (min-width:821px) and (max-width:1260px){
  :root{--af64-sidebar:240px;--af64-page-x:22px;--af64-section:24px;--af64-card-gap:16px}
  .topbar-copy{max-width:58vw!important}
  .dashboard-hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(280px,.75fr)!important}
  .dashboard-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .dashboard-analytics-grid,.dashboard-activity-grid{grid-template-columns:1fr!important;gap:20px!important}
  .spending-panel .empty-state{min-height:0!important}
  .page-grid{grid-template-columns:1fr!important;gap:20px!important}
  .page-grid>.side-form{position:static!important;max-width:none!important}
  .asset-row-v5{grid-template-columns:minmax(0,1fr) auto minmax(150px,.5fr) 40px!important}

  /* Settings navigation becomes a wrapped grid, never a horizontally scrolling strip. */
  .settings-layout{grid-template-columns:1fr!important;gap:18px!important}
  .settings-nav{
    position:static!important;
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;
    gap:8px!important;
    overflow:visible!important;
    padding:8px!important;
    margin:0!important;
  }
  .settings-nav a{min-width:0!important;min-height:50px!important}
  .security-grid,.data-actions-grid{grid-template-columns:1fr!important}
  .preference-group{grid-template-columns:minmax(0,1fr) minmax(210px,.65fr)!important}
}

/* ---------- mobile and narrow tablet ---------- */
@media (max-width:820px){
  :root{--af64-section:20px;--af64-block:16px;--af64-card-gap:12px;--af64-card-pad:16px}
  body{font-size:16px!important;line-height:1.65!important;padding-bottom:86px}
  .main-content{padding:16px 14px 28px!important;max-width:none!important}
  .topbar{margin-bottom:18px!important;gap:10px!important;align-items:flex-start!important}
  .topbar h1{font-size:20px!important;line-height:1.4!important}
  .topbar-actions{gap:7px!important;flex:0 0 auto}
  .topbar-actions .primary-btn{padding-inline:12px!important}

  .main-content :where(h1,h2,h3,p,li,label,span,strong,small,a,button,dt,dd){overflow-wrap:break-word!important;word-break:normal!important}
  .main-content input,.main-content select,.main-content textarea{font-size:16px!important}

  .panel{padding:16px!important;border-radius:15px!important}
  .panel-title-row{margin-bottom:14px!important;gap:10px!important;align-items:flex-start!important;flex-wrap:wrap!important}
  .panel-title-row>div{flex:1 1 220px}
  .panel-title-row h2,.panel h2{font-size:18px!important;line-height:1.45!important}
  .panel-description{font-size:12px!important;line-height:1.7!important}
  .empty-state{padding:24px 12px!important;min-height:0!important}
  .empty-state strong{font-size:14px!important}.empty-state p{font-size:12px!important}

  /* Dashboard: compact but breathable. */
  .dashboard-hero-grid{gap:12px!important;align-items:start!important}
  .primary-overview-card,.overview-side-card{min-height:0!important;height:auto!important}
  .sparkline-wrap{height:92px!important;min-height:92px!important;max-height:92px!important;margin:12px -2px 2px!important}
  .sparkline-wrap svg{height:92px!important}
  .dashboard-hero-grid + .dashboard-kpi-grid{margin-top:18px!important}
  .dashboard-kpi-grid{gap:9px!important}
  .dashboard-kpi-grid .kpi-card{min-height:104px!important;height:auto!important;overflow:visible!important}
  .dashboard-kpi-grid .kpi-card strong{font-size:16px!important}
  .dashboard-kpi-grid .mini-trend{font-size:10.5px!important;line-height:1.5!important;overflow-wrap:break-word!important}
  .dashboard-kpi-grid + .dashboard-analytics-grid{margin-top:20px!important}
  .dashboard-analytics-grid,.dashboard-activity-grid{grid-template-columns:1fr!important;align-items:start!important;gap:14px!important}
  .dashboard-analytics-grid .panel,.dashboard-activity-grid .panel{min-height:0!important;height:auto!important}
  .cashflow-panel #cashflowChart{height:210px!important;margin-top:10px!important}
  .spending-panel .empty-state{min-height:0!important}
  .dashboard-analytics-grid + .dashboard-activity-grid{margin-top:20px!important}
  .dashboard-shortcuts{margin:20px 0!important}

  /* No horizontal scrollers for tabs/chips. Collections wrap naturally. */
  .wealth-links,.filter-tabs,.range-tabs,.market-filter,.month-switch,.toolbar-actions,.report-top-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    overflow:visible!important;
    gap:7px!important;
    padding:0!important;
    max-width:100%!important;
  }
  .wealth-links{margin:16px 0 0!important}
  .wealth-links a,.filter-tabs a,.range-tabs a,.market-filter button,.month-switch a{
    flex:0 1 auto!important;
    min-height:40px!important;
    white-space:normal!important;
    padding:0 11px!important;
    line-height:1.35!important;
  }
  .month-switch{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .month-switch a{width:100%}

  .page-grid,.content-grid,.report-sections,.ai-layout{grid-template-columns:1fr!important;gap:14px!important;align-items:start!important}
  .page-grid>.panel,.page-grid>.side-form{padding:16px!important}
  .side-form{position:static!important}

  /* Settings navigation: two-column wrapping grid instead of a hidden horizontal scrollbar. */
  .settings-layout{display:block!important}
  .settings-nav{
    position:static!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    overflow:visible!important;
    padding:7px!important;
    margin-bottom:14px!important;
  }
  .settings-nav a{min-width:0!important;min-height:44px!important;padding:8px!important;white-space:normal!important}
  .settings-nav a small{display:none!important}
  .settings-nav a strong{font-size:12px!important;line-height:1.4!important}
  .settings-content{gap:16px!important}
  .settings-section{padding:16px!important}
  .settings-section-head{grid-template-columns:40px minmax(0,1fr)!important;gap:10px!important}
  .settings-section-head p{font-size:12px!important;line-height:1.7!important}
  .preference-group{grid-template-columns:1fr!important;gap:10px!important}
  .accent-options{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible!important}

  /* Market filters and ranges are wrap-first. */
  .market-tools{gap:12px!important}
  .market-filter,.range-tabs{overflow:visible!important;flex-wrap:wrap!important;padding-bottom:0!important}
  .market-filter button,.range-tabs a{white-space:normal!important}

  /* Transaction table becomes a stacked card list; no horizontal table scroll on mobile. */
  .transaction-table-wrap{overflow:visible!important;border:0!important;border-radius:0!important;margin-top:14px!important}
  .transaction-table{display:block!important;min-width:0!important;width:100%!important}
  .transaction-table thead{display:none!important}
  .transaction-table tbody{display:grid!important;gap:10px!important}
  .transaction-table tr{display:grid!important;grid-template-columns:1fr!important;padding:12px 13px!important;border:1px solid var(--border)!important;border-radius:13px!important;background:#0d1319!important}
  .transaction-table td{display:grid!important;grid-template-columns:78px minmax(0,1fr)!important;align-items:center!important;gap:10px!important;padding:8px 0!important;border:0!important;min-width:0!important;text-align:right!important}
  .transaction-table td::before{content:attr(data-label);font-size:11px;color:var(--muted);font-weight:500}
  .transaction-table td:first-child{display:block!important;padding-top:0!important;padding-bottom:10px!important;border-bottom:1px solid #202a34!important}
  .transaction-table td:first-child::before{display:none!important}
  .transaction-table td:last-child{display:flex!important;justify-content:flex-end!important;padding-bottom:0!important}
  .transaction-table td:last-child::before{display:none!important}
  .transaction-table td[colspan]{display:block!important}
  .transaction-table td[colspan]::before{display:none!important}
  .transaction-table .table-title{min-width:0}
  .transaction-table .table-title>div{min-width:0}
  .transaction-table .table-title small{white-space:normal!important}

  /* Long card layouts collapse without clipping. */
  .asset-row-v5{grid-template-columns:minmax(0,1fr) auto!important;row-gap:8px!important}
  .portfolio-row{min-width:0!important}
  .report-archive-card,.notification-item{min-width:0!important}

  .mobile-nav{padding-inline:max(8px,env(safe-area-inset-left))!important;padding-bottom:max(8px,env(safe-area-inset-bottom))!important}
}

@media (max-width:480px){
  .main-content{padding-inline:12px!important}
  .dashboard-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .dashboard-kpi-grid .kpi-card{padding:12px!important;grid-template-columns:36px minmax(0,1fr)!important;gap:8px!important}
  .dashboard-kpi-grid .kpi-icon{width:36px!important;height:36px!important}
  .dashboard-kpi-grid .kpi-card .muted{font-size:11px!important}
  .dashboard-kpi-grid .kpi-card small{font-size:10px!important}
  .settings-nav{grid-template-columns:1fr 1fr!important}
  .report-kpis{grid-template-columns:1fr 1fr!important}
  .transaction-table td{grid-template-columns:68px minmax(0,1fr)!important}
}

/* Larger displays: scale width slightly without creating an "empty ocean". */
@media (min-width:1680px){
  :root{--af64-content-max:1640px;--af64-page-x:40px;--af64-card-gap:20px}
  .dashboard-hero-grid{grid-template-columns:minmax(0,1.72fr) minmax(320px,.70fr)!important}
  .dashboard-kpi-grid{gap:18px!important}
  .page-grid{grid-template-columns:minmax(0,1fr) 390px!important}
}

/* Comfortable/compact density remains user-selectable but can never collapse section separation. */
@media (min-width:821px){
  body.density-compact .dashboard-hero-grid + .dashboard-kpi-grid{margin-top:20px!important}
  body.density-compact .dashboard-kpi-grid + .dashboard-analytics-grid{margin-top:22px!important}
  body.density-compact .main-content>.kpi-grid+.page-grid,
  body.density-compact .main-content>.kpi-grid+.wealth-links{margin-top:22px!important}
  body.density-compact .panel{padding:19px!important}
}

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

/* Additional production safeguards from the final responsive audit. */
a,button,[role="button"]{touch-action:manipulation}
.history-chart:empty{display:none!important}
.main-content [id]{scroll-margin-top:96px}
@media (max-width:820px){.main-content [id]{scroll-margin-top:18px}}

/* ========================================================================
   v6.4 final hardening pass — full-site density, wrapping & scroll behavior
   ======================================================================== */

/* Legacy v4-v6 rules used 8–10px metadata in several modules. Product UI
   metadata now has a readable floor without inflating headings or controls. */
.main-content :where(
  .chart-footer,.budget-state-label,.category-list small,.market-card-head span,
  .market-price small,.market-meta,.market-buy-sell small,.market-buy-sell strong,
  .market-filter button,.range-tabs a,.history-tooltip,.portfolio-row span,
  .portfolio-row small,.trade-row small,.trade-type,.asset-detail-link,
  .notification-item p,.notification-item small,.report-archive-card span,
  .report-archive-card small,.dashboard-market-list small,.switch-row small,
  .analysis-run summary,.ai-message>span,.ai-message>small,.ai-disclaimer,
  .ai-report-section small,.ai-status-grid span,.privacy-box p,.usage-meter span,
  .report-budget span,.report-budget small,.provider-health,.provider-info,
  .provider-info-good,.security-note-v4,.sync-strip,.sync-strip small
){font-size:11.5px!important;line-height:1.55!important}

.main-content :where(.portfolio-row strong,.market-buy-sell strong,.dashboard-market-list>a>strong,
  .trade-row strong,.notification-item strong,.report-archive-card strong){font-size:13px!important;line-height:1.5!important}

/* Normal prose must never be split character-by-character. URLs/IDs remain handled
   by the technical-token selector near the top of this stylesheet. */
.main-content :where(p,li,label,.panel-description,.form-note,.muted-text,.preference-copy small){
  word-break:normal!important;
  overflow-wrap:break-word!important;
  white-space:normal!important;
}

/* Avoid nested page-like vertical scroll areas. The sidebar is intentionally its
   own viewport navigation surface; long AI conversations follow the page scroll. */
.ai-chat-stream{max-height:none!important;overflow:visible!important;min-height:0!important}
.ai-chat-panel{min-height:0!important;height:auto!important}

/* Charts should support analysis, not dominate an empty dashboard. */
.history-chart{height:280px!important;min-height:0!important}
.market-chart-panel{min-height:0!important}
.market-chart-panel .empty-state.compact{margin-top:4px!important}

/* Data-rich rows remain contained even with long Persian labels / symbols. */
.portfolio-row>*,.asset-row-v5>*,.notification-item>*,.report-archive-card>*,
.market-card>*,.transaction-row>*,.goal-card-v5>*{min-width:0}
.portfolio-row strong,.asset-row-v5 strong,.notification-item strong,.report-archive-card strong{
  overflow-wrap:break-word!important;word-break:normal!important
}

/* Notification / archive actions can wrap instead of forcing a page overflow. */
.notification-item,.report-archive-card{align-items:start!important}
.archive-actions,.toolbar-actions,.report-top-actions,.server-pdf-actions{flex-wrap:wrap!important}

/* Wide desktop stays comfortably dense; avoid huge empty cards. */
@media (min-width:1261px){
  .dashboard-analytics-grid .panel,.dashboard-activity-grid .panel{align-self:start!important}
  .dashboard-analytics-grid .empty-state{min-height:150px!important}
  .dashboard-activity-grid .empty-state{min-height:92px!important}
  .dashboard-report-card{min-height:0!important}
}

/* At laptop widths, two-column hero layouts become cramped beside a persistent
   sidebar. Stack them before text and controls start compressing. */
@media (min-width:821px) and (max-width:1100px){
  :root{--af64-sidebar:224px;--af64-page-x:20px}
  .topbar{align-items:flex-start!important;flex-wrap:wrap!important}
  .topbar-copy{max-width:none!important;flex:1 1 420px!important}
  .topbar-actions{flex:1 1 100%!important;justify-content:flex-start!important}
  .dashboard-hero-grid{grid-template-columns:1fr!important}
  .dashboard-hero-grid>.overview-side-card{max-width:none!important}
  .dashboard-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .market-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .asset-detail-head,.asset-market-hero{align-items:flex-start!important;flex-wrap:wrap!important}
  .portfolio-row{grid-template-columns:minmax(180px,1.3fr) repeat(2,minmax(120px,.8fr)) 28px!important}
  .portfolio-row>div:nth-of-type(4),.portfolio-row>div:nth-of-type(5){grid-column:auto!important}
}

/* Mobile component hardening — no hidden horizontal strips. */
@media (max-width:820px){
  html,body,.app-shell,.main-content{max-width:100%!important;overflow-x:clip!important}

  .asset-market-hero,.asset-detail-head{
    display:grid!important;
    grid-template-columns:1fr!important;
    align-items:start!important;
    gap:14px!important;
    padding:17px!important;
  }
  .asset-market-hero form,.asset-detail-head .asset-actions{justify-self:stretch!important}
  .asset-market-hero form button{width:100%!important}
  .asset-live-price{font-size:26px!important;flex-wrap:wrap!important;gap:8px!important}
  .history-chart{height:220px!important}

  /* Portfolio holdings become readable stacked cards instead of a wide desktop grid. */
  .portfolio-table{gap:10px!important}
  .portfolio-row{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px 14px!important;
    padding:14px!important;
    min-width:0!important;
  }
  .portfolio-row>div:first-child{grid-column:1/-1!important;padding-bottom:10px!important;border-bottom:1px solid #202a34!important}
  .portfolio-row>div{min-width:0!important}
  .portfolio-row>div span,.portfolio-row>div small{font-size:11px!important;line-height:1.45!important}
  .portfolio-row>div strong{font-size:13px!important;overflow-wrap:break-word!important}
  .portfolio-row .row-arrow{display:none!important}

  /* Notifications and archive cards use content-first stacked layout. */
  .notification-item{
    grid-template-columns:40px minmax(0,1fr)!important;
    gap:10px!important;
    padding:13px!important;
  }
  .notification-item form{grid-column:1/-1!important;justify-self:end!important}
  .notification-item p{margin-top:4px!important}
  .report-archive-card{
    grid-template-columns:40px minmax(0,1fr)!important;
    gap:10px!important;
    padding:13px!important;
  }
  .report-archive-card .archive-actions{grid-column:1/-1!important;justify-content:flex-start!important}

  .market-grid{grid-template-columns:1fr!important}
  .market-tools{display:grid!important;grid-template-columns:1fr!important;align-items:stretch!important}
  .market-search{min-width:0!important;width:100%!important}
  .market-card{padding:14px!important}

  .ai-input-form{grid-template-columns:1fr!important}
  .ai-input-form button{width:100%!important}
  .ai-message{max-width:94%!important}

  .quick-modules-v5,.more-grid{grid-template-columns:1fr!important}
  .quick-modules-v5>a,.more-grid>a{min-height:0!important}

  .report-cover,.report-page{min-width:0!important;max-width:100%!important}
  .comparison-grid,.report-sections,.report-category-bars{min-width:0!important}

  /* Inputs and long inline controls cannot force viewport overflow. */
  .input-with-unit,.form-grid,.settings-form,.inline-goal-form,.danger-reset-form,
  .inline-confirm-form,.scope-month,.server-pdf-actions{min-width:0!important;max-width:100%!important}
  input,select,textarea,button{max-width:100%}
}

@media (max-width:480px){
  .portfolio-row{grid-template-columns:1fr!important}
  .portfolio-row>div:first-child{grid-column:auto!important}
  .month-switch{grid-template-columns:1fr!important}
  .settings-nav{grid-template-columns:1fr!important}
  .accent-options{grid-template-columns:1fr 1fr!important}
  .report-kpis{grid-template-columns:1fr!important}
  .kpi-grid:not(.dashboard-kpi-grid){grid-template-columns:1fr!important}
}

/* v8.1 Backup & Migration */
.backup-grid{grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);align-items:start;gap:28px}.migration-steps{display:grid;gap:16px;margin:0;padding:0;list-style:none}.migration-steps li{display:grid;gap:5px;padding:16px 0;border-bottom:1px solid var(--border,#26303a)}.migration-steps li:last-child{border-bottom:0}.migration-steps small{color:var(--muted,#9aa7b4);line-height:1.9}.hash-code{direction:ltr;unicode-bidi:plaintext;font-size:12px}.table-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.table-actions form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.table-actions input{min-width:160px;max-width:210px}@media(max-width:980px){.backup-grid{grid-template-columns:1fr}}@media(max-width:640px){.table-actions,.table-actions form{align-items:stretch;flex-direction:column}.table-actions input,.table-actions .button-link,.table-actions button{width:100%;max-width:none}}