/* v35.0 Build 14 - shared mobile UI layer */
:root{
  --ui-bg:#f3f5f4;
  --ui-card:#ffffff;
  --ui-text:#17211f;
  --ui-muted:#68736f;
  --ui-border:#d7ddda;
  --ui-radius:14px;
}
html{font-size:16px}
body{background:var(--ui-bg);color:var(--ui-text)}
button,select,input{min-height:44px}
.card,.kpi,.controls{border-radius:var(--ui-radius)}
@media(max-width:700px){
  main{padding-left:16px!important;padding-right:16px!important}
  header{padding-left:16px!important;padding-right:16px!important}
  table{font-size:13px}
  .table-wrap,.table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .controls{gap:8px!important}
  .chart-wrap{max-width:100%;overflow:hidden}
}

/* v35.0 Build 15 - visual refinement */
.page-title{letter-spacing:-.02em}
.kpi{transition:transform .15s ease,box-shadow .15s ease}
.kpi:hover{transform:translateY(-1px)}
.controls{position:relative}
.controls label{font-weight:600}
.chart-card{overflow:hidden}
.chart-card canvas{max-width:100%!important}
button{font-weight:600;transition:opacity .15s ease,transform .15s ease}
button:active{transform:scale(.99)}
.table-wrap,.table-container{border-radius:12px}
@media(max-width:700px){
  h1{font-size:clamp(25px,8vw,36px)!important;line-height:1.08}
  .sub{line-height:1.35}
  .kpi{padding:14px!important}
  .kpi b{font-size:clamp(20px,7vw,30px)!important}
  .controls{padding:12px!important}
  .chart-card{padding:12px!important}
}