/* Mr. B app shell — v1.
   Additive visual polish for non-arcade tools. Loaded only on app pages. */

:root{
  --mrb-app-bg:#0b1226;
  --mrb-app-panel:rgba(255,255,255,.075);
  --mrb-app-panel-strong:rgba(255,255,255,.12);
  --mrb-app-line:rgba(255,255,255,.18);
  --mrb-app-ink:#f8fbff;
  --mrb-app-muted:rgba(248,251,255,.72);
  --mrb-app-blue:#38bdf8;
  --mrb-app-green:#34d399;
  --mrb-app-gold:#fbbf24;
  --mrb-app-pink:#fb7185;
  --mrb-app-violet:#a78bfa;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body.mrb-app-shell{
  position:relative;
  min-height:100vh;
  color:var(--mrb-app-ink);
}

body.mrb-app-shell::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 10%, rgba(56,189,248,.22), transparent 30%),
    radial-gradient(circle at 78% 16%, rgba(251,191,36,.16), transparent 28%),
    radial-gradient(circle at 88% 84%, rgba(52,211,153,.14), transparent 32%),
    linear-gradient(135deg, #071020 0%, #111827 48%, #18212f 100%);
}

body.mrb-app-shell::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.34;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.72), transparent 86%);
}

body.mrb-app-shell header,
body.mrb-app-shell .topbar,
body.mrb-app-shell aside header{
  box-shadow:0 18px 50px rgba(0,0,0,.22);
}

body.mrb-app-shell header{
  position:relative;
  overflow:hidden;
}

body.mrb-app-shell header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
}

body.mrb-app-shell h1,
body.mrb-app-shell .logo,
body.mrb-app-shell .brand,
body.mrb-app-shell .app-title{
  text-wrap:balance;
}

body.mrb-app-shell button,
body.mrb-app-shell .btn,
body.mrb-app-shell a.home,
body.mrb-app-shell a.back,
body.mrb-app-shell .pill,
body.mrb-app-shell input,
body.mrb-app-shell select,
body.mrb-app-shell textarea{
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease,
    background 140ms ease;
}

body.mrb-app-shell button:hover,
body.mrb-app-shell .btn:hover,
body.mrb-app-shell a.home:hover,
body.mrb-app-shell a.back:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}

body.mrb-app-shell button:active,
body.mrb-app-shell .btn:active{
  transform:translateY(0);
}

body.mrb-app-shell :is(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid rgba(251,191,36,.72);
  outline-offset:3px;
}

body.mrb-app-shell .card,
body.mrb-app-shell .panel,
body.mrb-app-shell .tool,
body.mrb-app-shell .box,
body.mrb-app-shell .stat,
body.mrb-app-shell .metric,
body.mrb-app-shell .lesson-card,
body.mrb-app-shell .result,
body.mrb-app-shell .module,
body.mrb-app-shell .drawer,
body.mrb-app-shell .sidebar,
body.mrb-app-shell aside,
body.mrb-app-shell main > section{
  border-color:var(--mrb-app-line);
  box-shadow:0 16px 38px rgba(0,0,0,.20);
}

body.mrb-app-shell .card,
body.mrb-app-shell .panel,
body.mrb-app-shell .tool,
body.mrb-app-shell .lesson-card,
body.mrb-app-shell .module{
  background-image:
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
}

body.mrb-app-shell input,
body.mrb-app-shell select,
body.mrb-app-shell textarea{
  border-color:rgba(255,255,255,.22);
}

body.mrb-app-shell input:focus,
body.mrb-app-shell select:focus,
body.mrb-app-shell textarea:focus{
  border-color:var(--mrb-app-gold);
  box-shadow:0 0 0 4px rgba(251,191,36,.16);
}

body.mrb-app-shell .mrb-app-sheen{
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:3px;
  z-index:2147480000;
  pointer-events:none;
  background:linear-gradient(90deg, var(--mrb-app-blue), var(--mrb-app-green), var(--mrb-app-gold), var(--mrb-app-pink), var(--mrb-app-violet));
  box-shadow:0 0 18px rgba(56,189,248,.42);
}

body.mrb-app-shell .mrb-app-corner{
  position:fixed;
  right:14px;
  bottom:14px;
  width:44px;
  height:44px;
  border-radius:50%;
  pointer-events:none;
  z-index:12;
  opacity:.34;
  background:
    conic-gradient(from 180deg, var(--mrb-app-blue), var(--mrb-app-green), var(--mrb-app-gold), var(--mrb-app-pink), var(--mrb-app-blue));
  box-shadow:0 12px 24px rgba(0,0,0,.24);
}

@media (max-width:720px){
  body.mrb-app-shell button:hover,
  body.mrb-app-shell .btn:hover,
  body.mrb-app-shell a.home:hover,
  body.mrb-app-shell a.back:hover{
    transform:none;
  }

  body.mrb-app-shell .mrb-app-corner{
    display:none;
  }
}

@media (prefers-reduced-motion:reduce){
  body.mrb-app-shell *,
  body.mrb-app-shell *::before,
  body.mrb-app-shell *::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
  }
}