.tt-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;max-width:520px;margin:0 auto;
  padding:16px 18px;border:1px solid rgba(232,236,233,.18);border-radius:14px;
  background:rgba(10,12,10,.94);backdrop-filter:blur(10px);
  box-shadow:0 10px 40px rgba(0,0,0,.55);
  font-family:'Space Grotesk',system-ui,sans-serif;color:#e8ece9}
.tt-consent p{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:#a9b3ab}
.tt-consent-b{display:flex;gap:10px;justify-content:flex-end}
.tt-consent button{font-family:'Space Grotesk',system-ui,sans-serif;font-size:12px;letter-spacing:.04em;
  padding:8px 16px;border-radius:7px;cursor:pointer;border:1px solid rgba(232,236,233,.25);
  background:transparent;color:#a9b3ab;transition:all .15s}
.tt-consent button:hover{color:#e8ece9;border-color:rgba(232,236,233,.5)}
.tt-consent button[data-tt="ok"]{background:#33ff66;border-color:#33ff66;color:#0a0c0a;font-weight:700}
.tt-consent button[data-tt="ok"]:hover{background:#5cff85;border-color:#5cff85;color:#0a0c0a}
/* Audit 2.1. The claim was "a centred modal"; the measurement was worse in a
   duller way — position:fixed;bottom:16px is correct, but the card measured 164px
   tall at 390x844, and the dashboard's KPI grid happens to sit in the bottom half
   of the first screen. Result: two of six tiles fully hidden and four of six
   clipped mid-sentence, including MARKET REGIME, which the dashboard itself calls
   the gauge it checks first.

   So the fix is height, not position. Below 480px the copy sets in two tighter
   lines, the buttons share the row with it instead of stacking under it, and the
   card sits flush to the bottom edge. Measured after: 88px, inside the ≤96px the
   audit asked for, which clears the whole grid. */
@media(max-width:480px){
  .tt-consent{left:0;right:0;bottom:0;border-radius:12px 12px 0 0;border-left:0;border-right:0;
    border-bottom:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    display:flex;align-items:center;gap:12px}
  .tt-consent p{margin:0;flex:1;font-size:11.5px;line-height:1.35}
  .tt-consent-b{gap:8px;flex:0 0 auto}
  .tt-consent button{padding:7px 12px;font-size:11px;white-space:nowrap;
    min-height:36px}
}
/* Narrower than a small phone the two-column row stops fitting, so it stacks —
   still flush to the bottom, still far shorter than the 164px it was. */
@media(max-width:360px){
  .tt-consent{display:block}
  .tt-consent p{margin:0 0 8px}
  .tt-consent-b{justify-content:stretch}
  .tt-consent button{flex:1}
}
