:root{ --amber:#E8A33D; --teal:#3FA796; --flame:#C1432A; --ink:#0B1F1A; --panel:#122A22; --panel-2:#17332A; --line:#25453A; --muted:#8FA79C; }
  *{-webkit-tap-highlight-color:transparent; touch-action:manipulation;}
  html,body{height:100%;}
  #lm-rider-app{background:var(--ink); color:#F5F2E8; font-family:'Inter',sans-serif; overscroll-behavior:none;}
  .disp{font-family:'Space Grotesk',sans-serif;}
  .safe-b{padding-bottom:env(safe-area-inset-bottom);}
  .safe-t{padding-top:env(safe-area-inset-top);}
  .screen{display:none; min-height:100vh; flex-direction:column;}
  .screen.active{display:flex;}
  .key{height:64px; border-radius:16px; background:var(--panel-2); border:1px solid var(--line); font-family:'Space Grotesk'; font-weight:700; font-size:24px;}
  .key:active{background:var(--line);}
  .pin-slot{width:46px; height:58px; border-radius:12px; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:700; font-size:26px;}
  .pin-slot.filled{border-color:var(--amber); background:rgba(232,163,61,.1);}
  .btn-amber{background:var(--amber); color:var(--ink); font-weight:700; border-radius:16px;}
  .btn-amber:active{transform:scale(.98);}
  .btn-flame{background:var(--flame); color:#fff; font-weight:700; border-radius:16px;}
  .toggle{width:52px; height:30px; border-radius:999px; background:var(--line); position:relative; transition:.2s;}
  .toggle.on{background:var(--teal);}
  .toggle-dot{width:24px; height:24px; border-radius:999px; background:#fff; position:absolute; top:3px; left:3px; transition:.2s;}
  .toggle.on .toggle-dot{left:25px;}
  .toast{position:fixed; left:50%; top:16px; transform:translate(-50%,-140%); background:#fff; color:var(--ink); padding:12px 18px; border-radius:12px; font-size:13.5px; z-index:80; transition:transform .35s cubic-bezier(.2,.8,.2,1); font-weight:600;}
  .toast.show{transform:translate(-50%,0);}
  .desk-nav-item{color:var(--muted);}
  .desk-nav-item.on{color:#fff;}
  .desk-aside{display:none;}
  /* Desktop: a wide operations console, not a phone frame pinned to the middle of the screen */
  @media (min-width:768px){
    #lm-rider-app{background:#081511;}
    .phone-shell{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:320px 1fr; min-height:100vh; align-items:stretch;}
    .desk-aside{display:flex;}
    .screen-col{border-left:1px solid var(--line);}
    .mobile-bottom-nav{display:none;}
  }