:root{
      --bar-h-desktop:72px;
      --bar-h-mobile:64px;
      --bg:#0b1220;
      --muted:#cfd8e3;
      --accent:#e84545;
      --glass: rgba(255,255,255,0.06);
      --glass-2: rgba(255,255,255,0.04);
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
    }
    *{box-sizing:border-box}
    html,body{height:100%;margin:0}
    body{
      font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
      background:var(--bg); color:#fff;
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
      padding-top: calc(var(--safe-top));
    }

    /* TOPBAR - general */
    .topbar{
      position:fixed; left:0; right:0; top:0; z-index:60;
      padding:10px 14px;
      display:flex; align-items:center; gap:12px;
      background: linear-gradient(180deg, rgba(0,0,0,0.64), rgba(0,0,0,0.28));
      backdrop-filter: blur(6px);
      border-bottom:1px solid var(--glass-2);
      transition: transform .26s ease, opacity .26s ease;
    }
    .topbar.hidden{ transform: translateY(-120%); opacity:0; pointer-events:none }

    .brand{ display:flex; align-items:center; gap:10px; min-width:0 }
    .brand .info{ display:flex; flex-direction:column; min-width:0 }
    .tool{ font-size:0.78rem; color:var(--muted); font-weight:600; letter-spacing:0.02em }
    .title{ font-size:1.05rem; font-weight:800; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
    .sub{ font-size:0.78rem; color:rgba(255,255,255,0.85); margin-left:6px; font-weight:700 }

    .demo-badge{
      margin-left:8px;
      background: linear-gradient(180deg,var(--accent),#d33a3a);
      color:#fff; padding:8px 12px; border-radius:10px; font-weight:900;
      letter-spacing:0.03em; text-transform:uppercase;
      box-shadow:0 8px 28px rgba(232,69,69,0.16), inset 0 -3px 8px rgba(0,0,0,0.12);
      display:inline-flex; align-items:center; gap:8px; font-size:0.85rem;
      transform-origin:center; animation:pulse 2000ms infinite;
    }
    @keyframes pulse {
      0% { transform: translateY(0) scale(1); box-shadow: 0 8px 20px rgba(232,69,69,0.14); }
      50% { transform: translateY(-2px) scale(1.02); box-shadow: 0 18px 36px rgba(232,69,69,0.18); }
      100%{ transform: translateY(0) scale(1); box-shadow: 0 8px 20px rgba(232,69,69,0.14); }
    }

    /* Controls */
    .controls{ margin-left:auto; display:flex; gap:8px; align-items:center }
    .btn{
      background:var(--glass); border:1px solid rgba(255,255,255,0.06);
      color:#fff; padding:8px 12px; border-radius:10px; font-weight:700;
      font-size:0.95rem; display:inline-flex; gap:8px; align-items:center; cursor:pointer;
      text-decoration:none;
    }
    .btn.ghost{ background:transparent; border:1px solid rgba(255,255,255,0.12) }

    .hint{ margin-left:14px; color:rgba(255,255,255,0.65); font-size:0.85rem }

    /* FRAME AREA */
    .frame-wrap{
      position:fixed; left:0; right:0;
      top:var(--bar-h-desktop); bottom:0; z-index:10; background:#000;
      transition: top .18s ease;
    }
    iframe{ width:100%; height:100%; border:0; display:block; background:#fff }

    .fallback{
      position:absolute; inset:14px; display:flex; align-items:center; justify-content:center;
      color:var(--muted); font-size:1rem; text-align:center; padding:16px; pointer-events:none;
    }

    /* MOBILE: FAB & menu */
    .mobile-fab{
      display:none;
      position:fixed; right:16px; bottom: calc(20px + var(--safe-bottom)); z-index:70;
      width:56px; height:56px; border-radius:999px; background:var(--accent); color:#fff;
      box-shadow: 0 10px 30px rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center;
      font-size:1.6rem; cursor:pointer; border:0;
    }
    .mobile-menu{
      display:none;
      position:fixed; right:12px; bottom:88px; z-index:75;
      background: linear-gradient(180deg, rgba(11,18,32,0.98), rgba(11,18,32,0.95));
      border:1px solid rgba(255,255,255,0.06); padding:10px; border-radius:12px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.4);
      display:flex; flex-direction:column; gap:8px; min-width:160px;
    }
    .menu-overlay{ display:none; position:fixed; inset:0; z-index:69; background:transparent; }

    /* Responsive adjustments */
    @media (max-width:700px){
      :root{ --bar-h-desktop: var(--bar-h-mobile); }
      .controls{ display:none } /* hide desktop controls on small screens */
      .mobile-fab{ display:flex }
      .brand .tool{ display:none }
      .hint{ display:none }
    }

    @media (max-width:420px){
      .demo-badge{ font-size:0.78rem; padding:6px 8px }
    }

    /* hide topbar when fullscreen (class toggled in JS) */
    .topbar.fullscreen-hidden{ transform: translateY(-120%); opacity:0; pointer-events:none; }

    /* focus */
    .btn:focus, .mobile-fab:focus { outline:3px solid rgba(232,69,69,0.18); outline-offset:2px }