/* Responsive mobile refinement without duplicating desktop flows. */
:root{
  --ech-page-gutter:20px;
  --ech-space-1:4px;
  --ech-space-2:8px;
  --ech-space-3:12px;
  --ech-space-4:16px;
  --ech-space-5:20px;
  --ech-space-6:24px;
  --ech-space-7:32px;
  --ech-space-8:40px;
  --ech-mobile-dock-height:76px;
  --ech-mobile-dock-gap:12px;
  --ech-mobile-safe-bottom:max(env(safe-area-inset-bottom), 0px);
  --ech-mobile-dock-total:calc(var(--ech-mobile-dock-height) + var(--ech-mobile-dock-gap) + var(--ech-mobile-safe-bottom));
  --ech-mobile-sticky-top:12px;
  --ech-mobile-progress-scroll-padding:132px;
}

.ech-mobile-account-anchor,
.ech-mobile-dock,
.ech-mobile-register-sheet,
.tasting-wizard-mobile-steps{
  display:none;
}

.stats-mobile-filter-actions,
.stats-active-filter-row{
  display:none;
}

.stats-mobile-filter-panel{
  display:contents;
}

@media (max-width: 1023px){
  body{
    overflow-x:hidden;
  }

  img{
    max-width:100%;
    height:auto;
  }

  .container{
    padding-inline:clamp(16px, 4vw, 20px);
    max-width:none;
  }

  .card,
  .metric,
  .item-card,
  .history-final-card,
  .stats-hero-card,
  .stats-surface-card,
  .stats-split-card{
    min-width:0;
  }

  .input,
  .select,
  .textarea{
    width:100%;
    min-width:0;
  }

  .field label{
    font-size:12px;
    line-height:1.35;
    letter-spacing:.12em;
  }

  .section-title{
    font-size:clamp(24px, 3vw, 32px);
    line-height:1.08;
  }

  .section-subtitle,
  .footer-note{
    font-size:14px;
    line-height:1.55;
  }

  .tab-panel{
    min-width:0;
  }

  .history-final-card-title,
  .tasting-inventory-option-title,
  .stats-hero-title{
    overflow-wrap:anywhere;
  }

  .hero{
    padding:clamp(18px, 4vw, 28px) !important;
  }

  .hero-inner{
    grid-template-columns:1fr !important;
    gap:var(--ech-space-5) !important;
  }

  .brand{
    gap:clamp(16px, 4vw, 24px) !important;
    align-items:flex-start !important;
  }

  #mainBrandLogoImg{
    max-width:min(280px, 62vw) !important;
  }

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

  .grid-sidebar,
  .grid-tasting,
  .grid-collection,
  .history-final-detail-layout,
  #historyList .history-final-grid{
    grid-template-columns:1fr !important;
  }

  .history-final-detail-photo-column{
    position:static !important;
  }
}

@media (max-width: 760px){
  #appRoot{
    position:relative;
  }

  :root{
    --ech-page-gutter:clamp(16px, 4vw, 20px);
    --ech-mobile-sticky-top:16px;
    --ech-mobile-progress-scroll-padding:154px;
  }

  html{
    scroll-padding-top:var(--ech-mobile-progress-scroll-padding);
    scroll-padding-bottom:calc(var(--ech-mobile-dock-total) + 20px);
  }

  body.ech-mobile-keyboard-open .ech-mobile-dock{
    transform:translateY(calc(100% + 24px));
    opacity:0;
    pointer-events:none;
  }

  body.ech-mobile-nav-enabled .container{
    padding:14px var(--ech-page-gutter) calc(var(--ech-mobile-dock-total) + 24px) !important;
  }

  body.ech-mobile-nav-enabled .tab-buttons{
    display:none !important;
  }

  .hero{
    padding:16px !important;
    border-radius:24px !important;
  }

  .hero-inner{
    gap:24px !important;
  }

  .brand{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:18px !important;
  }

  #mainBrandLogoImg{
    width:min(160px, 56vw) !important;
    max-width:min(160px, 56vw) !important;
  }

  .brand .logo-round{
    align-self:center;
  }

  .brand > div:last-child{
    min-width:0 !important;
    width:100% !important;
  }

  #currentUserLine .greeting-title{
    font-size:clamp(28px, 8vw, 32px) !important;
    line-height:1.08 !important;
  }

  #currentUserLine .greeting-subtitle{
    font-size:15px !important;
    line-height:1.48 !important;
    max-width:32ch;
  }

  #appRoot .hero-control-row{
    display:block !important;
    width:auto !important;
    margin:0 !important;
  }

  #logoutBtn{
    display:none !important;
  }

  #appRoot .hero #logoutBtn{
    display:none !important;
  }

  .ech-mobile-account-anchor{
    display:block;
    position:absolute;
    top:16px;
    right:20px;
    margin:0;
    z-index:73;
  }

  .ech-mobile-account-btn{
    width:48px;
    height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    border:1px solid rgba(163,126,67,.22);
    background:linear-gradient(180deg, rgba(248,244,236,.96), rgba(241,235,224,.96));
    color:#17362C;
    box-shadow:0 10px 22px rgba(23,54,44,.08);
    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
  }

  .ech-mobile-account-btn svg,
  .ech-mobile-account-action svg,
  .ech-mobile-dock-item svg,
  .ech-mobile-dock-register svg,
  .ech-mobile-sheet-option svg{
    width:18px;
    height:18px;
    stroke:currentColor;
    stroke-width:1.8;
    fill:none;
  }

  .ech-mobile-account-user-icon{
    display:inline-flex;
  }

  .ech-mobile-account-user-icon svg{
    width:21px;
    height:21px;
  }

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

  .ech-mobile-account-menu{
    position:absolute;
    right:0;
    top:calc(100% + 10px);
    width:min(320px, calc(100vw - 24px));
    min-width:0;
    max-width:calc(100vw - 24px);
    padding:14px;
    border-radius:20px;
    border:1px solid rgba(163,126,67,.18);
    background:rgba(248,244,236,.98);
    box-shadow:0 18px 34px rgba(23,54,44,.12);
    display:grid;
    gap:10px;
    z-index:90;
  }

  .ech-mobile-account-summary{
    display:grid;
    gap:3px;
    padding:3px 4px 10px;
    color:#17362C;
    font-size:15px;
    font-weight:700;
  }

  .ech-mobile-account-summary span:last-child{
    color:#80602F;
    font-size:11px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
  }

  .ech-mobile-account-language{
    min-height:52px;
    display:flex;
    align-items:center;
    padding:8px 12px;
    border:1px solid rgba(201,190,172,.95);
    border-radius:14px;
    background:#F8F4EC;
  }

  .ech-mobile-account-language .hero-language-switch{
    display:flex !important;
    width:100%;
    justify-content:center;
    gap:10px;
    padding:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .ech-mobile-account-language .lang-flag-btn{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    flex-basis:36px !important;
  }

  .ech-mobile-account-menu[hidden]{
    display:none !important;
  }

  .ech-mobile-account-action{
    min-height:52px;
    width:100%;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    gap:12px;
    padding:14px;
    border:1px solid rgba(201,190,172,.95);
    border-radius:14px;
    background:#F8F4EC;
    color:#17362C;
    font-size:14px;
    font-weight:600;
    text-align:left;
    white-space:normal;
    overflow-wrap:break-word;
  }

  .ech-mobile-account-action svg{
    flex:0 0 auto;
    margin-top:1px;
  }

  .ech-mobile-account-action span{
    min-width:0;
  }

  .metrics{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:14px !important;
  }

  .metric{
    min-height:136px !important;
    padding:18px !important;
    border-radius:20px !important;
  }

  .metric-value{
    margin-top:8px !important;
    font-size:clamp(30px, 9vw, 38px) !important;
    line-height:1.02 !important;
  }

  .metric-label{
    font-size:11px !important;
    line-height:1.25 !important;
    letter-spacing:.14em !important;
  }

  .metric-hint{
    margin-top:7px !important;
    font-size:14px !important;
    line-height:1.35 !important;
  }

  .metric-icon{
    width:34px !important;
    height:34px !important;
    border-radius:12px !important;
    font-size:0 !important;
  }

  .metric-icon svg{
    width:18px;
    height:18px;
    display:block;
    stroke:currentColor;
    fill:none;
    stroke-width:1.8;
  }

  .metric-invested .metric-top{
    display:block;
  }

  .metric-invested .metric-top > div:first-child{
    position:relative;
    width:100%;
  }

  .metric-invested .metric-icon{
    display:none !important;
  }

  .metric-invested .metric-value-shell{
    display:block;
    min-width:0;
    padding-top:9px;
  }

  #metricInvested{
    display:block;
    min-width:0;
    padding-right:0;
    font-size:clamp(17px, 4.3vw, 21px) !important;
    line-height:1.08 !important;
    letter-spacing:-.025em;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
  }

  #metricInvested.money-long{
    font-size:clamp(16px, 4vw, 18px) !important;
  }

  #metricInvested.money-very-long{
    font-size:clamp(15px, 3.8vw, 17px) !important;
  }

  .metric-invested .metric-toggle-btn{
    position:absolute;
    top:-6px;
    right:-4px;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    border-radius:14px !important;
    margin:0;
  }

  #appRoot .metrics .hero-support-card{
    min-height:0;
    grid-template-columns:36px minmax(0, 1fr) !important;
    gap:12px !important;
    padding:16px !important;
    border-color:rgba(23,54,44,.22) !important;
    background:linear-gradient(145deg, #F6F1E8 0%, #EAF0EB 100%) !important;
    box-shadow:0 10px 22px rgba(23,54,44,.07) !important;
  }

  #appRoot .hero-support-card-icon{
    width:36px;
    height:36px;
    border-color:rgba(163,126,67,.26);
    background:rgba(163,126,67,.08);
    color:#80602F;
    font-size:20px;
  }

  #appRoot .hero-support-card-eyebrow,
  #appRoot .hero-support-card-title{
    color:#17362C;
  }

  #appRoot .hero-support-card-title{
    font-size:19px;
  }

  #appRoot .hero-support-card-description{
    color:#5F5A50;
    font-size:13px;
  }

  #appRoot .hero-support-card-action{
    grid-column:1 / -1;
    width:auto;
    min-height:44px;
    justify-content:flex-start;
    padding:0 4px;
    border:0;
    border-radius:0;
    color:#17362C;
    font-size:13px;
    text-decoration:underline;
    text-decoration-color:rgba(163,126,67,.65);
    text-underline-offset:4px;
  }

  #appRoot .hero-support-card-action::after{
    content:"→";
    margin-left:7px;
    color:#80602F;
    font-size:17px;
  }

  .card,
  .stats-hero-card,
  .stats-surface-card,
  .stats-split-card{
    border-radius:22px !important;
  }

  .card-header,
  .card-content{
    padding-inline:16px !important;
  }

  .form-grid,
  .filters-grid,
  .settings-account-grid,
  .settings-public-collection-layout,
  .settings-public-collection-actions-panel .collection-public-extra-actions{
    grid-template-columns:1fr !important;
  }

  .field label{
    font-size:11px;
    line-height:1.4;
    letter-spacing:.12em;
  }

  .input,
  .select,
  .textarea{
    min-height:54px !important;
    padding:16px 17px !important;
    font-size:16px !important;
    line-height:1.45 !important;
    border-radius:16px !important;
  }

  textarea.textarea,
  textarea.input{
    min-height:128px;
  }

  .settings-field-helper,
  #settings .settings-account-section-copy,
  .tasting-wizard-progress-copy,
  .tasting-wizard-section-copy{
    font-size:14px !important;
    line-height:1.5 !important;
  }

  .stats-metrics-grid,
  .stats-two-up-grid,
  .stats-decision-grid,
  .stats-overview-grid,
  #historyList .history-final-grid{
    grid-template-columns:1fr !important;
  }

  #historyList .history-final-card-title{
    font-size:clamp(22px, 7vw, 28px) !important;
    line-height:1.06 !important;
    max-width:calc(100% - 76px);
  }

  #historyList .history-final-card-actions{
    grid-template-columns:1fr !important;
  }

  .history-final-score-seal{
    width:60px !important;
    height:60px !important;
    right:12px !important;
    top:12px !important;
  }

  .ech-mobile-dock{
    display:flex;
    position:fixed;
    left:var(--ech-page-gutter);
    right:var(--ech-page-gutter);
    bottom:calc(var(--ech-mobile-safe-bottom) + 10px);
    z-index:120;
    display:flex;
    align-items:flex-end;
    gap:9px;
    pointer-events:none;
    transition:transform .18s ease, opacity .18s ease;
  }

  .ech-mobile-dock-group,
  .ech-mobile-dock-register{
    pointer-events:auto;
  }

  .ech-mobile-dock-group{
    flex:1 1 auto;
    min-width:0;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:3px;
    min-height:var(--ech-mobile-dock-height);
    padding:5px;
    border-radius:27px;
    border:1px solid rgba(163,126,67,.22);
    background:linear-gradient(145deg, rgba(255,253,248,.98), rgba(238,230,218,.97));
    box-shadow:0 16px 36px rgba(23,54,44,.16), inset 0 1px 0 rgba(255,255,255,.85);
    backdrop-filter:blur(12px) saturate(1.05);
  }

  .ech-mobile-dock-item,
  .ech-mobile-dock-register{
    border:0;
    appearance:none;
  }

  .ech-mobile-dock-item{
    position:relative;
    min-width:0;
    min-height:66px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:8px 4px 9px;
    border-radius:21px;
    background:transparent;
    color:#5F5A50;
    transition:background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
  }

  .ech-mobile-dock-item::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:6px;
    width:14px;
    height:2px;
    border-radius:999px;
    background:#C39A52;
    opacity:0;
    transform:translateX(-50%) scaleX(.45);
    transition:opacity .18s ease, transform .18s ease;
  }

  .ech-mobile-dock-label{
    font-size:10px;
    font-weight:750;
    letter-spacing:.075em;
    line-height:1.1;
    white-space:nowrap;
    text-transform:uppercase;
  }

  .ech-mobile-dock-item.is-active{
    background:linear-gradient(145deg, #1B493B, #123127);
    color:#F3EEE5;
    box-shadow:0 7px 15px rgba(23,54,44,.24), inset 0 1px 0 rgba(255,255,255,.10);
  }

  .ech-mobile-dock-item.is-active::after{
    opacity:1;
    transform:translateX(-50%) scaleX(1);
  }

  .ech-mobile-dock-item:focus-visible,
  .ech-mobile-dock-register:focus-visible{
    outline:2px solid #C39A52;
    outline-offset:2px;
  }

  .ech-mobile-dock-register{
    flex:0 0 auto;
    min-width:76px;
    min-height:76px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:10px 10px;
    border-radius:26px;
    border:1px solid rgba(195,154,82,.62);
    background:linear-gradient(155deg, #21503F, #123127 78%);
    color:#F3EEE5;
    box-shadow:0 16px 30px rgba(23,54,44,.27), inset 0 1px 0 rgba(255,255,255,.12);
    transition:transform .18s ease, box-shadow .18s ease;
  }

  .ech-mobile-dock-register:active,
  .ech-mobile-dock-item:active{
    transform:translateY(1px) scale(.98);
  }

  .ech-mobile-register-sheet{
    display:flex;
    position:fixed;
    inset:0;
    z-index:130;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:20px 16px calc(var(--ech-mobile-safe-bottom) + 16px);
    background:rgba(12,24,20,.35);
    backdrop-filter:blur(4px);
  }

  .ech-mobile-register-sheet[hidden]{
    display:none !important;
  }

  .ech-mobile-register-card{
    width:min(100%, 460px);
    display:grid;
    gap:12px;
    padding:18px;
    border-radius:26px;
    border:1px solid rgba(163,126,67,.18);
    background:#F6F1E8;
    box-shadow:0 24px 48px rgba(23,54,44,.16);
  }

  .ech-mobile-sheet-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
  }

  .ech-mobile-sheet-eyebrow{
    font-size:11px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#80602F;
  }

  .ech-mobile-sheet-title{
    margin-top:6px;
    font-family:var(--font-serif);
    font-size:28px;
    line-height:1.06;
    color:#17362C;
  }

  .ech-mobile-sheet-copy{
    margin-top:8px;
    color:#5F5A50;
    font-size:14px;
    line-height:1.55;
  }

  .ech-mobile-sheet-close{
    width:44px;
    height:44px;
    border-radius:999px;
    border:1px solid rgba(163,126,67,.18);
    background:#FBF7F0;
    color:#17362C;
    font-size:24px;
  }

  .ech-mobile-sheet-options{
    display:grid;
    gap:10px;
  }

  .ech-mobile-sheet-option{
    width:100%;
    min-height:64px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border-radius:18px;
    border:1px solid rgba(163,126,67,.18);
    background:linear-gradient(180deg, #FFF9F0 0%, #F2EBDD 100%);
    color:#17362C;
    text-align:left;
  }

  .ech-mobile-sheet-option-copy{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
  }

  .ech-mobile-sheet-option-title{
    font-size:16px;
    font-weight:700;
    line-height:1.2;
  }

  .ech-mobile-sheet-option-text{
    color:#5F5A50;
    font-size:13px;
    line-height:1.45;
  }

  #tasting,
  #tasting.active{
    max-height:none !important;
    overflow:visible !important;
  }

  .tasting-wizard-progress-card{
    position:sticky;
    top:var(--ech-mobile-sticky-top);
    z-index:60;
    padding:14px 14px 12px !important;
    border-radius:22px !important;
    background:#F6F1E8 !important;
    box-shadow:0 12px 26px rgba(23,54,44,.10) !important;
  }

  .tasting-wizard-progress-title{
    font-size:22px !important;
    line-height:1.06 !important;
  }

  .tasting-wizard-progress-copy{
    display:none;
  }

  .tasting-wizard-progress-pill{
    width:auto !important;
    min-height:38px !important;
    padding:8px 12px !important;
    font-size:11px !important;
  }

  .tasting-wizard-mobile-steps{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-top:12px;
    margin-top:10px;
    scrollbar-width:none;
  }

  .tasting-wizard-mobile-steps::-webkit-scrollbar{
    display:none;
  }

  .tasting-wizard-mobile-step{
    flex:0 0 auto;
    min-height:42px;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid rgba(163,126,67,.16);
    background:#FBF7F0;
    color:#5F5A50;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
  }

  .tasting-wizard-mobile-step.is-active{
    background:#17362C;
    border-color:#17362C;
    color:#F3EEE5;
  }

  .tasting-wizard-mobile-step[disabled]{
    opacity:.58;
  }

  #tastingWizardRoot .tasting-wizard-section,
  #tastingWizardRoot .tasting-wizard-start-card{
    scroll-margin-top:var(--ech-mobile-progress-scroll-padding) !important;
  }

  .tasting-wizard-footer{
    position:sticky;
    bottom:calc(var(--ech-mobile-dock-total) + 8px);
    z-index:55;
    padding:12px;
    border-radius:22px;
    background:rgba(246,241,232,.96);
    box-shadow:0 12px 24px rgba(23,54,44,.10);
  }

  #appRoot .metrics .hero-support-card{
    scroll-margin-bottom:calc(var(--ech-mobile-dock-total) + 20px);
  }

  #settings,
  #settings .settings-account-shell,
  #settings .settings-account-section,
  #settings .field,
  #settings .settings-account-section-heading{
    min-width:0;
    max-width:100%;
  }

  #settings :is(label, .settings-field-helper, .settings-account-section-copy, .section-subtitle, .footer-note){
    max-width:100%;
    overflow-wrap:break-word;
  }

  #settings :is(input, select, textarea){
    max-width:100%;
  }

  .stats-repertoire{
    gap:18px !important;
  }

  .stats-hero-card{
    padding:18px !important;
    border-radius:22px !important;
  }

  .stats-hero-title{
    margin-top:10px !important;
    font-size:clamp(28px, 8vw, 34px) !important;
  }

  .stats-hero-subtitle{
    margin-top:8px !important;
    line-height:1.55 !important;
  }

  .stats-toolbar{
    gap:10px !important;
  }

  .stats-mobile-filter-actions{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:10px;
  }

  .stats-mobile-filter-toggle,
  .stats-mobile-filter-clear{
    min-height:46px;
    border-radius:14px;
    border:1px solid rgba(163,126,67,.2);
    background:#F6F1E8;
    color:#17362C;
    font:inherit;
    font-size:14px;
    font-weight:700;
  }

  .stats-mobile-filter-toggle{
    text-align:left;
    padding:0 15px;
  }

  .stats-mobile-filter-clear{
    min-width:82px;
    padding:0 13px;
  }

  .stats-mobile-filter-clear:disabled{
    opacity:.48;
  }

  .stats-mobile-filter-panel{
    display:none;
    gap:10px;
    padding:14px;
    border:1px solid rgba(163,126,67,.17);
    border-radius:20px;
    background:#F3EEE5;
  }

  .stats-mobile-filter-panel.is-open{
    display:grid;
  }

  .stats-mobile-filter-panel .stats-filters-grid{
    display:grid;
    grid-template-columns:1fr !important;
    gap:10px;
  }

  .stats-mobile-filter-panel .stats-filter-chip-row{
    display:grid;
    gap:8px;
  }

  .stats-mobile-filter-panel .stats-checkbox-chip{
    min-height:46px;
    border-radius:14px;
  }

  .stats-active-filter-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .stats-active-filter{
    max-width:100%;
    min-height:36px;
    padding:7px 10px;
    border:1px solid rgba(23,54,44,.2);
    border-radius:999px;
    background:#E2EAE5;
    color:#17362C;
    font:inherit;
    font-size:12px;
    font-weight:700;
    overflow-wrap:anywhere;
  }

  .stats-summary-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .stats-summary-card{
    min-height:124px;
    padding:16px !important;
    border-radius:20px !important;
  }

  .stats-summary-icon{
    width:34px !important;
    height:34px !important;
    border-radius:12px !important;
    font-size:15px !important;
  }

  .stats-summary-label{
    margin-top:10px !important;
    font-size:11px !important;
    letter-spacing:.13em !important;
    line-height:1.25 !important;
  }

  .stats-summary-value{
    margin-top:7px !important;
    font-size:clamp(30px, 8vw, 38px) !important;
    line-height:1.02 !important;
  }

  .stats-summary-sub{
    margin-top:7px !important;
    font-size:13px !important;
    line-height:1.35 !important;
  }

  .stats-panel-card,
  .stats-insight-card,
  .stats-table-card,
  .stats-compat-card,
  .stats-synthesis-card{
    padding:18px 16px !important;
    border-radius:22px !important;
  }

  .stats-table-card{
    scroll-margin-bottom:calc(var(--ech-mobile-dock-total) + 20px);
  }

  .stats-table-card .stats-panel-header{
    align-items:center;
    gap:10px;
    margin-bottom:12px;
  }

  .stats-table-card .stats-panel-title{
    font-size:24px;
    line-height:1.12;
  }

  .stats-table-card .stats-panel-tools{
    flex:0 0 auto;
  }

  .stats-table-card .stats-panel-tools .btn{
    min-width:96px;
    min-height:38px !important;
    padding:8px 10px !important;
    border-radius:12px !important;
    background:transparent !important;
    border-color:rgba(163,126,67,.28) !important;
    color:#17362C !important;
    font-size:11px !important;
    line-height:1.2;
  }

  .stats-latest-table{
    gap:10px !important;
  }

  .stats-latest-row{
    position:relative;
    display:block !important;
    min-height:124px;
    padding:14px 86px 14px 14px !important;
    border-radius:18px !important;
  }

  .stats-latest-main{
    min-width:0;
    align-items:center !important;
    gap:10px !important;
  }

  .stats-latest-main > :last-child{
    min-width:0;
  }

  .stats-latest-thumb{
    width:52px !important;
    height:52px !important;
    border-radius:14px !important;
  }

  .stats-latest-title{
    display:-webkit-box;
    overflow:hidden;
    font-size:19px !important;
    line-height:1.12 !important;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }

  .stats-latest-sub{
    margin-top:4px !important;
    font-size:12px !important;
    line-height:1.3;
  }

  .stats-latest-details-toggle{
    display:inline-flex;
    align-items:center;
    gap:5px;
    min-height:32px;
    margin-top:8px;
    padding:4px 0;
    border:0;
    background:transparent;
    color:#80602F;
    font:inherit;
    font-size:12px;
    font-weight:700;
  }

  .stats-latest-row > :nth-child(2){
    position:absolute;
    top:14px;
    right:14px;
    width:62px;
    text-align:right;
    font-size:11px !important;
    line-height:1.2;
  }

  .stats-latest-row > :nth-child(3){
    position:absolute;
    top:35px;
    right:14px;
    width:62px;
    text-align:right;
  }

  .stats-latest-row > :nth-child(3) .stats-score-badge{
    min-width:44px;
    min-height:36px;
    padding:6px 9px;
    font-size:19px;
  }

  .stats-latest-detail-cell{
    display:none !important;
  }

  .stats-latest-row.is-expanded{
    min-height:190px;
  }

  .stats-latest-row.is-expanded .stats-latest-detail-cell:not(.is-empty){
    display:grid !important;
    gap:3px;
    margin:12px 0 0 62px;
  }

  .stats-latest-detail-cell span{
    color:#80602F;
    font-size:10px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
  }

  .stats-latest-detail-cell strong{
    color:#17362C;
    font-size:13px;
    font-weight:650;
    line-height:1.25;
  }

  .stats-latest-action{
    position:absolute;
    right:14px;
    bottom:14px;
    width:62px !important;
    min-width:62px !important;
    max-width:62px !important;
  }

  .stats-latest-row .stats-latest-action .btn.btn-secondary{
    width:62px !important;
    min-width:62px !important;
    max-width:62px !important;
    min-height:34px !important;
    padding:7px 8px !important;
    border-radius:11px !important;
    font-size:11px !important;
  }
}

@media (min-width: 360px) and (max-width: 760px){
  .metrics{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .metric{
    min-height:140px !important;
  }

  #appRoot .metrics .hero-support-card{
    grid-column:1 / -1;
  }

  .stats-summary-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 374px){
  .ech-mobile-dock{
    left:12px;
    right:12px;
    gap:8px;
  }

  .ech-mobile-dock-group{
    gap:4px;
    padding:6px;
  }

  .ech-mobile-dock-label{
    font-size:10px;
  }

  .ech-mobile-dock-register{
    min-width:68px;
    min-height:68px;
    border-radius:22px;
  }
}

/* Global metrics are the Panorama entry point; other mobile tabs lead with their task. */
@media (max-width: 760px){
  /* Fallback for older mobile browsers, synchronized by mobile-adaptive-nav.js. */
  body.ech-mobile-nav-enabled[data-ech-mobile-tab]:not([data-ech-mobile-tab="dashboard"]) #appRoot > .container > .hero{
    display:none !important;
  }

  body.ech-mobile-nav-enabled[data-ech-mobile-tab]:not([data-ech-mobile-tab="dashboard"]) #appRoot > .container > .tabs{
    margin-top:0 !important;
  }

  /* The active panel is the application's source of truth, independent of the dock script. */
  #appRoot .container:has(.tab-panel.active:not(#dashboard)) > .hero{
    display:none !important;
  }

  #appRoot .container:has(.tab-panel.active:not(#dashboard)) > .tabs{
    margin-top:0 !important;
  }

  body.ech-mobile-nav-enabled[data-ech-mobile-tab]:not([data-ech-mobile-tab="dashboard"]) .ech-mobile-account-anchor{
    top:14px;
  }

  body.ech-mobile-nav-enabled .tab-panel.active{
    animation:ech-mobile-tab-reveal .18s ease-out;
  }

  @keyframes ech-mobile-tab-reveal{
    from{ opacity:.01; transform:translateY(4px); }
    to{ opacity:1; transform:translateY(0); }
  }

  @media (prefers-reduced-motion: reduce){
    body.ech-mobile-nav-enabled .tab-panel.active{ animation:none; }
  }
}